<!-- DEBUG CSV -->
<!-- Fichier CSV: hebergements_data.csv -->
<!-- Fichier existe: OUI -->
<!-- Taille fichier: 26946 octets -->
<!-- Headers trouvés: 17 -->
<!-- Headers: categorie, nom, adresse, code_postal, ville, telephone, site_web, latitude, longitude, photo1, photo2, photo3, image_icone, specialite, options, description, description2 -->
<!-- Ligne 2: hotel - Logis Hôtel Le Cheval Blanc -->
<!-- Ligne 3: hotel - L'Atelier -->
<!-- Ligne 4: hotel - Le Toro Bleu -->
<!-- Ligne 5: hotel - Hôtel le Dervois -->
<!-- Ligne 6: hotel - Hôtel de Champagne -->
<!-- Ligne 7: classic - Vintage House -->
<!-- Ligne 8: classic - Cottage 12B -->
<!-- Ligne 9: classic - Chalet Giffaumont -->
<!-- Ligne 10: classic - La Cachotière du Lac -->
<!-- Ligne 11: classic - Le chalet de la Presquile -->
<!-- Ligne 12: classic - Home du port -->
<!-- Ligne 13: classic - Marina Holyder -->
<!-- Ligne 14: classic - Appartement T1 -->
<!-- Ligne 15: classic - Les Coccinels 41 -->
<!-- Ligne 16: classic - La Roselière du Der -->
<!-- Ligne 17: classic - Bulle Der Cottage 19 -->
<!-- Ligne 18: classic - Le Logis du Der -->
<!-- Ligne 19: classic - Chalet confortable -->
<!-- Ligne 20: classic - La Maison Bleu du Lac -->
<!-- Ligne 21: classic - Le Gros Chêne -->
<!-- Ligne 22: classic - Chalet au Charme du Der -->
<!-- Ligne 23: classic - Alaguyauder le KOTA -->
<!-- Ligne 24: classic - Au fils des Saisons -->
<!-- Ligne 25: classic - Gîte de la loge Seryse -->
<!-- Ligne 26: classic - Les Fortelles -->
<!-- Ligne 27: classic - Ranch du pont urgin -->
<!-- Ligne 28: classic - A la Bonne Franquette -->
<!-- Ligne 29: classic - La maison de Marie -->
<!-- Ligne 30: classic - Le Moulin d Eclaron -->
<!-- Ligne 31: classic - Charmant logement -->
<!-- Ligne 32: classic - Le Gîte de Laurence -->
<!-- Ligne 33: classic - L'échappée Der -->
<!-- Ligne 34: classic - Mobile-home -->
<!-- Ligne 35: classic - Le Gruon du Lac -->
<!-- Ligne 36: classic - La Sente des Vignes -->
<!-- Ligne 37: classic - Chez David et Julie -->
<!-- Ligne 38: classic - Partout l'étang Montier en der -->
<!-- Ligne 39: classic - La Chantourelle -->
<!-- Ligne 40: classic - Domaine des deux sapins -->
<!-- Ligne 41: classic - Ô bout d'la Motte -->
<!-- Ligne 42: classic - Au lac du der -->
<!-- Ligne 43: classic - Au jardin de Victor -->
<!-- Ligne 44: classic - Manoir romantique 8min du lac -->
<!-- Ligne 45: classic - La Varnière - B&B with communal kitchen -->
<!-- Ligne 46: classic - Maison Carteret -->
<!-- Ligne 47: classic - Maison du bonheur -->
<!-- Ligne 48: classic - Gîte Tomettes et Colombages -->
<!-- Ligne 49: classic - Au Milieu de Nulle Part Chambres au lac du Der -->
<!-- Ligne 50: classic - Maison du lac -->
<!-- Ligne 51: classic - Le Québec -->
<!-- Ligne 52: classic - La Plume -->
<!-- Ligne 53: classic - Le Deroscope -->
<!-- Ligne 54: classic - Gîte des bulles -->
<!-- Ligne 55: classic - Les Piafs du Der 2 -->
<!-- Ligne 56: classic - Gîte Le Courlis -->
<!-- Ligne 57: classic - Les Hirondelles -->
<!-- Ligne 58: classic - La Grue Cendrée -->
<!-- Ligne 59: classic - Gîte les Oiseaux -->
<!-- Ligne 60: classic - La petite maison -->
<!-- Ligne 61: classic - Nuit Champenoise Tout Confort -->
<!-- Ligne 62: classic - De brique & de bois -->
<!-- Ligne 63: classic - La Gilbertine -->
<!-- Ligne 64: classic - Au Passage des Grues -->
<!-- Ligne 65: classic - La Fuste des Garceaux -->
<!-- Ligne 66: classic - Chambre d'hôte lac du Der orconiat -->
<!-- Ligne 67: classic - Appartement chez Lisa -->
<!-- Ligne 68: classic - Le Chatelier -->
<!-- Ligne 69: classic - La P'tite Ambrièroise -->
<!-- Ligne 70: classic - Exclusive Lodge overlooking private lake -->
<!-- Ligne 71: classic - Chez Monique -->
<!-- Ligne 72: classic - Chez Brigitte et Francis -->
<!-- Ligne 73: classic - Maison chaleureuse à La Porte-du-Der -->
<!-- Ligne 74: classic - Maison Campagne -->
<!-- Ligne 75: classic - La Baroud'ER -->
<!-- Ligne 76: insolite - Bateaux habitables Flotyll -->
<!-- Ligne 77: insolite - Wigwam les Étoiles Pour Toile de Fond -->
<!-- Ligne 78: insolite - Une yourte avec vue sur le lac du Der -->
<!-- Ligne 79: insolite - MESHUTES: le gite des nuits insolites -->
<!-- Ligne 80: insolite - Ma Maison sur l'Eau -->
<!-- Ligne 81: insolite - Les cabanes du lac du der -->
<!-- Ligne 82: insolite - La cabane aux Secrets -->
<!-- Ligne 83: insolite - La Roulottte des Elfes -->
<!-- Ligne 84: insolite - A l'aube des sens -->
<!-- Ligne 85: insolite - La Carabol Der -->
<!-- Ligne 86: insolite - Les Chalets du Parc -->
<!-- Ligne 87: camping - Camping du Buisson -->
<!-- Ligne 88: camping - Camping sur la Route du Der -->
<!-- Ligne 89: camping - Camping Swin Golf -->
<!-- Ligne 90: camping - Camping de la forêt -->
<!-- Ligne 91: camping - Camping de la Cornée du Der -->
<!-- Ligne 92: camping - Camping Yelloh! -->
<!-- Ligne 93: camping - Camping de La Presqu'île de Champaubert -->
<!-- Ligne 94: camping - Camping de La Plage -->
<!-- Ligne 95: camping - Le Clos du Vieux Moulin -->
<!-- Ligne 96: camping - Camping des Lescheres Wassy -->
<!-- Ligne 97: camping - Camping La Croix Badeau -->
<!-- Ligne 98: camping - Camping Nature -->
<!-- Total hébergements lus: 97 -->
<!-- Hotels: 5 -->
<!-- Gîtes: 69 -->
<!-- Campings: 12 -->
<!-- Insolites: 11 -->
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#0891b2">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

<title>Hébergements - Lac du Der</title>

<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; 
    background: #f8fafc; 
    padding: 20px; 
    min-height: 100vh; 
}

.container { 
    max-width: 600px; 
    margin: 0 auto; 
}

/* Tablettes - largeur moyenne */
@media (min-width: 768px) {
    body {
        padding: 30px 20px;
    }
    .container {
        max-width: 900px;
    }
}

/* Grands écrans */
@media (min-width: 1024px) {
    body {
        padding: 40px 30px;
    }
    .container {
        max-width: 1100px;
    }
}

/* Header */
.header { 
    background: linear-gradient(135deg, #cfc535, #fabb0c); 
    color: white; 
    padding: 20px; 
    border-radius: 20px; 
    text-align: center; 
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(8, 145, 178, 0.3);
}

.header-icon {
    font-size: 50px;
    margin-bottom: 10px;
}

.header h1 { 
    font-size: 26px; 
    margin-bottom: 8px;
    font-weight: 800;
}

.header .subtitle { 
    opacity: 0.95; 
    font-size: 16px;
    font-weight: 600;
}

/* Bouton retour */
.back-button {
    background: rgba(255, 255, 255, 0.9);
    color: #cfc535;
    padding: 12px 20px;
    border-radius: 12px;
    border: 2px solid #fabb0c;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    margin-bottom: 20px;
}

.back-button:hover {
    background: #fabb0c;
    color: white;
    transform: translateX(-3px);
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    color: #0284c7;
    font-size: 14px;
    line-height: 1.6;
}

.info-item:last-child {
    margin-bottom: 0;
}

.info-icon {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Container pour centrer le bouton */
.button-container {
    text-align: center;
}

/* Carte */
#map {
    height: 550px;
    border-radius: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

/* Bouton de localisation */
.locate-button {
    background: linear-gradient(135deg, #cfc535, #fabb0c);
    color: white;
    border: 2px solid #fabb0c;
    border-radius: 12px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(8, 145, 178, 0.4);
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    animation: pulse 2s infinite;
}

.locate-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(8, 145, 178, 0.5);
}

.locate-button:active {
    transform: translateY(0);
}

.locate-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    animation: none;
}

.locate-icon {
    font-size: 18px;
}

/* Animation clignotante */
@keyframes pulse {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(8, 145, 178, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 4px 25px rgba(8, 145, 178, 0.8);
        transform: scale(1.05);
    }
}

/* Bouton info copyright sur la carte */
.leaflet-info-button {
    border-radius: 50%;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    user-select: none;
    background: white;
}

.leaflet-info-button:hover {
    background: #f1f5f9;
}

/* Titre section carte */
.map-title {
    background: white;
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.map-title-content {
    flex: 1;
}

.map-title h2 {
    font-size: 22px;
    color: #0f172a;
    margin-bottom: 8px;
    font-weight: 700;
}

.map-title p {
    color: #64748b;
    font-size: 14px;
    margin: 0;
}

/* Légende */
.legend {
    background: white;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.legend h3 {
    font-size: 18px;
    color: #0f172a;
    margin-bottom: 15px;
    font-weight: 700;
}

.legend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #f8fafc;
    border-radius: 8px;
    font-size: 14px;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s;
}

.legend-item:hover {
    background: #e2e8f0;
}

.legend-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #0891b2;
}

.legend-item.unchecked {
    opacity: 0.5;
}

.legend-item.unchecked .legend-icon {
    filter: grayscale(100%);
}

.legend-icon {
    font-size: 24px;
    flex-shrink: 0;
}

/* Style des popups */
.custom-popup {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    min-width: 250px;
}

.custom-popup h5 {
    font-size: 16px;
    color: #0f172a;
    margin-bottom: 6px;
    font-weight: 700;
}

.custom-popup p {
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

.popup-image {
    width: 100%;
    height: 150px;
    /* object-fit: cover; */
    object-fit: contain;     /* Image complète visible */
    border-radius: 8px;
    margin-bottom: 10px;
}

.popup-phone {
    color: #008000;
    font-weight: 600;
    text-decoration: none;
    display: block;
    margin-top: 5px;
}

.popup-phone:hover {
    text-decoration: underline;
}

/* Styles personnalisés pour les popups Leaflet */
.leaflet-popup-content-wrapper {
    border-radius: 12px;
    padding: 8px 0 0 0;
}

.leaflet-popup-content {
    margin: 0;
    padding: 0;
    min-width: 250px;
}

.custom-leaflet-popup .leaflet-popup-content-wrapper {
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.custom-popup {
    padding: 12px;
}

.custom-popup h5 {
    margin-top: 0;
}

.custom-popup .popup-image {
    margin: 0 -12px 10px -12px;
    width: calc(100% + 24px);
    border-radius: 8px 8px 0 0;
}

/*liste etablissement */
.restaurant-card {
    background: white;
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: row;
    gap: 15px;
    border-left: 5px solid #fabb0c;
}

.restaurant-card-content {
    flex: 1;
    min-width: 0;
}

.restaurant-card-images {
    flex-shrink: 0;
    width: 200px;
    position: contain;
    background: transparent;
}

.restaurant-images {
    background: transparent;
}


.restaurant-cardDemo {
    background: rgb(190, 190, 190);
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: row;
    gap: 15px;
    border-left: 5px solid #ef4444;
}

@media (max-width: 768px) {
    .restaurant-card {
        flex-direction: column;
    }
    
    .restaurant-card-images {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
    }
    
    .restaurant-images {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
    }
    
.restaurant-images img {
    max-width: 200px;
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
    background: transparent;
}
    
    .restaurant-cardDemo {
        flex-direction: column;
    }
    .carousel-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-slide img {
    max-width: 200px;
    width: 100%;
    height: 200px;
    object-fit: cover;
}
}

.restaurant-card h4 { color: #0f172a; font-size: 18px; margin-bottom: 10px; }
.restaurant-card p { font-size: 14px; color: #64748b; margin: 0; }

.btn-call {
    background: #008000;
    color: white;
    text-decoration: none;
    text-align: center;
    padding: 10px;
    border-radius: 8px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 14px;
    transition: opacity 0.2s;
}

.btn-call:active {
    opacity: 0.7;
}

.btn-website {
    background: #0891b2;
    color: white;
    text-decoration: none;
    text-align: center;
    padding: 10px;
    border-radius: 8px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 14px;
    transition: opacity 0.2s;
    border: none;
    cursor: pointer;
}

.btn-website:active {
    opacity: 0.7;
}

.btn-map {
    background: #64748b;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 14px;
    transition: opacity 0.2s;
}

.btn-map:active {
    opacity: 0.7;
}

/* Bouton Effacer filtre */
.btn-clear-filter {
    background: #cfc535;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
    transition: all 0.2s;
}

.btn-clear-filter:hover {
    background: #fabb0c;
    transform: translateY(-1px);
}

.btn-clear-filter:active {
    transform: translateY(0);
    opacity: 0.8;
}

/* Carrousel d'images */
.restaurant-images {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
    background: transparent;
    padding: 0;
    margin: 0;
}
.restaurant-images img {
    display: block;
    margin: 0;
    padding: 0;
}

.carousel-container {
    display: flex;
    transition: transform 0.3s ease;
    width: 100%;
}

.carousel-slide {
    min-width: 100%;
    flex-shrink: 0;
}

.carousel-slide img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.carousel-controls {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    background: rgba(0,0,0,0.5);
    padding: 5px 10px;
    border-radius: 20px;
    z-index: 10;
}

.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: all 0.3s;
}

.carousel-dot.active {
    background: white;
    width: 20px;
    border-radius: 4px;
}

.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.2s;
}

.carousel-nav:hover {
    background: rgba(0,0,0,0.7);
}

.carousel-nav.prev {
    left: 10px;
}

.carousel-nav.next {
    right: 10px;
}

/* Image unique sans carrousel */
.single-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
    display: block;
    margin: 0;
    padding: 0;
    vertical-align: bottom;
    background-color: transparent !important;
}

/* Animation cercle clignotant rouge */
@keyframes pulse-red {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 20px rgba(239, 68, 68, 0);
        transform: scale(1.2);
    }
}

.marker-highlight {
    animation: pulse-red 1.5s ease-out 3;
}

#searchBar,
#searchBarClassic,
#searchBarCamping,
#searchBarInsolite {
    width: 100%;
    padding: 13px 15px;
    font-size: 16px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    margin-top: 10px;
}

#searchBar:focus,
#searchBarClassic:focus,
#searchBarCamping:focus,
#searchBarInsolite:focus {
    outline: 2px solid #fabb0c;
    border-color: transparent;
}

.ad-card {
    background: #fff8dc;
    border: 2px dashed #facc15;
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 15px;
    text-align: center;
}

.btn-menu {
    background: #f59e0b;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 14px;
    transition: opacity 0.2s;
}

.btn-menu:active {
    opacity: 0.7;
}

/* ========== MODAL MENU ========== */
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    animation: fadeIn 0.3s;
}

.modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    animation: zoomIn 0.3s;
}

.modal-content img {
    width: 100%;
    height: auto;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 10px;
}

.modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    transition: transform 0.2s;
}

.modal-close:hover {
    transform: scale(1.2);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes zoomIn {
    from { transform: scale(0.8); }
    to { transform: scale(1); }
}

/* Responsive ===========================================================================*/
@media (max-width: 768px) {
    .header h1 {
        font-size: 22px;
    }
    
    .office-section {
        padding: 20px;
    }
    
    #map {
        height: 500px;
    }
    
    .map-title {
        flex-direction: column;
        text-align: center;
        padding: 15px;
    }
    
    .map-title h2 {
        font-size: 18px;
        margin-bottom: 6px;
    }
    
    .map-title p {
        font-size: 13px;
    }
    
    .locate-button {
        width: 100%;
        justify-content: center;
        padding: 10px 16px;
        font-size: 13px;
    }

    .legend-grid {
        grid-template-columns: 1fr;
    }
    
    .locate-icon {
        font-size: 18px;
    }

    /* Responsive pour la barre de recherche et le bouton */
    .map-title-content > div {
        flex-direction: column;
        gap: 10px;
    }

    .btn-clear-filter {
        width: 100%;
    }
}

/* Bannière GPS */
.gps-banner {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    color: white;
    padding: 12px 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 9999;
    animation: slideDown 0.5s ease;
    margin-bottom: 15px; 
}

@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

.gps-banner-content {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 15px;
}

.gps-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.gps-text {
    flex: 1;
}

.gps-text strong {
    display: block;
    font-size: 16px;
    margin-bottom: 3px;
}

.gps-text p {
    font-size: 13px;
    opacity: 0.9;
    margin: 0;
}

.gps-btn {
    background: white;
    color: #ea580c;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
}

.gps-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.gps-close {
    background: transparent;
    color: white;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 5px 10px;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.gps-close:hover {
    opacity: 1;
}


@media (max-width: 768px) {
    .gps-banner-content {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .gps-icon {
        order: 1;
    }
    
    .gps-text p {
        order: 2;
        width: calc(100% - 70px);
        font-size: 12px;
    }
    
    .gps-text strong {
        order: 3;
        width: 100%;
        font-size: 14px;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    
    .gps-btn {
        order: 4;
        flex: 1;
    }
    
    .gps-close {
        order: 5;
        position: absolute;
        top: 10px;
        right: 10px;
    }
    
    .gps-text {
        display: contents;
    }
}

</style>
</head>
<body>
<!-- Bannière GPS - À mettre juste après <body> -->
<div id="gpsBanner" class="gps-banner" style="display: none;">
    <div class="gps-banner-content">
        <span class="gps-icon">📍</span>
        <div class="gps-text">
            <strong id="gpsTitle">Activez votre GPS</strong>
            <p id="gpsMessage">Pour une meilleure expérience, activez la localisation</p>
        </div>
        <button id="gpsActivateBtn" class="gps-btn">Activer</button>
        <button id="gpsCloseBtn" class="gps-close">✕</button>
    </div>
</div>

<div class="container">
    <!-- Bouton Retour -->
    <a href="../app.html" class="back-button">
        ← Retour
    </a>

    <!-- Header -->
    <div class="header">
        <div class="header-icon">🏨 🏡 🏕️ 🎪</div>
        <h1>Hébergements</h1>
        <div class="subtitle">Lac du Der - Trouvez votre hébergement idéal</div>
    </div>

    <!-- PUB -->
    <a href="../contact/contact_pro.html" target="_blank" 
       onclick="trackClick('Hébergements Clic-Pub', '#');" 
       style="display: block; text-align: center;">
        <img src="pub2.jpg" alt="Publicité" 
             style="width: 100%; max-width: 600px; height: auto; border-radius: 12px; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.2); display: inline-block;">
    </a>
    <br>
    
    <!-- Titre carte -->
    <div class="map-title" id="map-section">
        <div class="map-title-content">
            <h2>🗺️ Carte des Points d'Intérêt</h2>
            <p>Cliquez sur les icônes pour plus d'informations</p>
        </div>
        <button class="locate-button" id="locateBtn" onclick="localiserUtilisateur(); trackClick('Hébergements MeLocaliser', '#')">
            <span class="locate-icon">📍</span>
            <span>Me localiser</span>
        </button>
    </div>

    <!-- Carte interactive -->
    <div id="map"></div>

    <!-- Légende -->
    <div class="legend">
        <h3>📍 Légende de la carte</h3>
        <div class="legend-grid">
            <label class="legend-item" data-category="hotel">
                <input type="checkbox" data-category="hotel">
                <span class="legend-icon">🏨</span>
                <span>Hotel</span>
            </label>

            <label class="legend-item" data-category="classic">
                <input type="checkbox" data-category="classic">
                <span class="legend-icon">🏡</span>
                <span>Gîte / Maison d'hôtes</span>
            </label>
           
            <label class="legend-item" data-category="camping">
                <input type="checkbox" data-category="camping">
                <span class="legend-icon">🏕️</span>
                <span>Camping</span>
            </label>
            
            <label class="legend-item" data-category="insolite">
                <input type="checkbox" data-category="insolite">
                <span class="legend-icon">🎪</span>
                <span>Insolite</span>
            </label>
        </div>

        <span><br>Vous n'apparaissez pas sur la carte ? </span>
        <a href="../contact/contact.html" onclick="trackClick('Hébergements Contact-pas_sur_la_carte', '#')">
            Contactez-nous
        </a>
    </div>

        <div id="debut-listes"></div>
    <!-- ========== LISTE HOTELS ========== -->
    <div id="restaurant-list-container" style="display: none; margin-top: 20px;">
        <div class="map-title">
            <div class="map-title-content" >
                <h2>🏨 Liste des Hotels</h2>
                <div style="display: flex; gap: 10px; align-items: center;">
                    <input type="text" id="searchBar" placeholder="Rechercher..." style="flex: 1;" onclick="trackClick('Hébergements Hotels Recherche dans liste', '#')">
                    <button class="btn-clear-filter" onclick="clearSearchFilterHotel(); trackClick('Hébergements Hotels Effacer recherche', '#')">🔄 Effacer filtre</button>
                </div>
            </div>
        </div>

        <div id="dynamic-list">
            <div class="hotel-item" data-name="Logis Hôtel Le Cheval Blanc">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏨 Logis Hôtel Le Cheval Blanc</h4>
                                                <p>🗺️ 21 Rue du Lac<br>51290 Giffaumont-Champaubert</p>
                                                <p>📞 0326624548</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0326624548" class="btn-call" onclick="trackClick('Hébergements Hotels-Liste-Appeler-Logis Hôtel Le Cheval Blanc', 'tel:0326624548')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0326624548" class="btn-call" onclick="trackClick('Hébergements Hotels-Liste-Appeler-Logis Hôtel Le Cheval Blanc', 'tel:0326624548')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.lecheval-blanc.com/fr/index.php" target="_blank" class="btn-website" onclick="trackClick('Hébergements Hotels-Liste-Site-Logis Hôtel Le Cheval Blanc', 'https://www.lecheval-blanc.com/fr/index.php')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.lecheval-blanc.com/fr/index.php" target="_blank" class="btn-website" onclick="trackClick('Hébergements Hotels-Liste-Site-Logis Hôtel Le Cheval Blanc', 'https://www.lecheval-blanc.com/fr/index.php')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.5566042, 4.753419], this); trackClick('Hébergements Hotels-Liste-carte-Logis Hôtel Le Cheval Blanc', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.5566042, 4.753419], this); trackClick('Hébergements Hotels-Liste-carte-Logis Hôtel Le Cheval Blanc', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Logis Hôtel Le Cheval Blanc'); trackClick('Hébergements Hotels-Liste-photos-Logis Hôtel Le Cheval Blanc', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Hôtel - Bar - Restaurant - Terrasse - Parking                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Logis Hôtel Le Cheval Blanc" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="hotel-item" data-name="L'Atelier">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏨 L'Atelier</h4>
                                                <p>🗺️ 29 rue du château des petites côtes<br>51290 Sainte-Marie-du-Lac-Nuisement</p>
                                                <p>📞 0621131188</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0621131188" class="btn-call" onclick="trackClick('Hébergements Hotels-Liste-Appeler-L\'Atelier', 'tel:0621131188')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0621131188" class="btn-call" onclick="trackClick('Hébergements Hotels-Liste-Appeler-L\'Atelier', 'tel:0621131188')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.latelier-maisondhotes.com/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Hotels-Liste-Site-L\'Atelier', 'https://www.latelier-maisondhotes.com/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.latelier-maisondhotes.com/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Hotels-Liste-Site-L\'Atelier', 'https://www.latelier-maisondhotes.com/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.605148, 4.781396], this); trackClick('Hébergements Hotels-Liste-carte-L\'Atelier', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.605148, 4.781396], this); trackClick('Hébergements Hotels-Liste-carte-L\'Atelier', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'L&#039;Atelier'); trackClick('Hébergements Hotels-Liste-photos-L&#039;Atelier', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Mi-chemin entre l&#039;hôtel et la maison d&#039;hôtes. 200 mètres du Lac du Der                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="L'Atelier" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="hotel-item" data-name="Le Toro Bleu">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏨 Le Toro Bleu</h4>
                                                <p>🗺️ 22 place de l'Hotel de ville<br>52220 Montier-en-der</p>
                                                <p>📞 0325942294</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0325942294" class="btn-call" onclick="trackClick('Hébergements Hotels-Liste-Appeler-Le Toro Bleu', 'tel:0325942294')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0325942294" class="btn-call" onclick="trackClick('Hébergements Hotels-Liste-Appeler-Le Toro Bleu', 'tel:0325942294')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/le-toro-bleu-montier-en-der.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Hotels-Liste-Site-Le Toro Bleu', 'https://www.booking.com/hotel/fr/le-toro-bleu-montier-en-der.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/le-toro-bleu-montier-en-der.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Hotels-Liste-Site-Le Toro Bleu', 'https://www.booking.com/hotel/fr/le-toro-bleu-montier-en-der.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.47668, 4.77241], this); trackClick('Hébergements Hotels-Liste-carte-Le Toro Bleu', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.47668, 4.77241], this); trackClick('Hébergements Hotels-Liste-carte-Le Toro Bleu', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Le Toro Bleu'); trackClick('Hébergements Hotels-Liste-photos-Le Toro Bleu', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Hotel et Restaurant                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Le Toro Bleu" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="hotel-item" data-name="Hôtel le Dervois">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏨 Hôtel le Dervois</h4>
                                                <p>🗺️ 9 rue Audiffred<br>52220 Montier-en-der</p>
                                                <p>📞 0325042276</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0325042276" class="btn-call" onclick="trackClick('Hébergements Hotels-Liste-Appeler-Hôtel le Dervois', 'tel:0325042276')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0325042276" class="btn-call" onclick="trackClick('Hébergements Hotels-Liste-Appeler-Hôtel le Dervois', 'tel:0325042276')">📞 Appeler</a>
                                                                                    <!-- <a href="https://hotelledervois.blogspot.com/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Hotels-Liste-Site-Hôtel le Dervois', 'https://hotelledervois.blogspot.com/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://hotelledervois.blogspot.com/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Hotels-Liste-Site-Hôtel le Dervois', 'https://hotelledervois.blogspot.com/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.47719, 4.77351], this); trackClick('Hébergements Hotels-Liste-carte-Hôtel le Dervois', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.47719, 4.77351], this); trackClick('Hébergements Hotels-Liste-carte-Hôtel le Dervois', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Hôtel le Dervois'); trackClick('Hébergements Hotels-Liste-photos-Hôtel le Dervois', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Chambre avec salle d&#039;eau - Térasse - Bar                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Hôtel le Dervois" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="hotel-item" data-name="Hôtel de Champagne">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏨 Hôtel de Champagne</h4>
                                                <p>🗺️ 19 Avenue Jean Pierre Timbaud<br>52100 Saint-Dizier</p>
                                                <p>📞 0325044961</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0325044961" class="btn-call" onclick="trackClick('Hébergements Hotels-Liste-Appeler-Hôtel de Champagne', 'tel:0325044961')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0325044961" class="btn-call" onclick="trackClick('Hébergements Hotels-Liste-Appeler-Hôtel de Champagne', 'tel:0325044961')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.roomreserve.online/fr/hotel-de-champagne-saint-dizier/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Hotels-Liste-Site-Hôtel de Champagne', 'https://www.roomreserve.online/fr/hotel-de-champagne-saint-dizier/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.roomreserve.online/fr/hotel-de-champagne-saint-dizier/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Hotels-Liste-Site-Hôtel de Champagne', 'https://www.roomreserve.online/fr/hotel-de-champagne-saint-dizier/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.62579, 4.98433], this); trackClick('Hébergements Hotels-Liste-carte-Hôtel de Champagne', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.62579, 4.98433], this); trackClick('Hébergements Hotels-Liste-carte-Hôtel de Champagne', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Hôtel de Champagne'); trackClick('Hébergements Hotels-Liste-photos-Hôtel de Champagne', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Chambre Double à Quadruple avec Restaurant                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Hôtel de Champagne" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
                        
            <!-- DÉMO EN DUR pour chaque catégorie -->
                        <!-- Hotel DEMO avec carrousel -->
            <div class="hotel-item" data-name="Hotel Demo Carrousel">
                <div class="restaurant-cardDemo" style="border-left: 5px solid #f8fc04;">
                    <div class="restaurant-card-content">
                        <h4>🏨 Hotel DÉMO - Carrousel Photos + Bouton Menu</h4>
                        <p style="color: #0891b2; font-weight: 600; text-align: center;">
                            Spécialité: ⭐⭐⭐ Avec restaurant et terrasse
                        </p> 
                        <p>🗺️ 1 Avenue du Lac<br>51290 Lac du Der</p>
                        <p>📞 xx xx xx xx xx</p>
                        <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                            <a href="tel:+33123" class="btn-call">📞 Appeler</a>
                            <a href="../contact/contact.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Hotels-Liste-Site-Hotel DEMO', '#')">🌐 Contactez-nous</a>
                            <button onclick="zoomToRestaurant([48.553638, 4.767266], this); trackClick('Hébergements Hotels-Liste-carte-Hotel DEMO', '#')" class="btn-map">📍 Carte</button>
                            <button onclick="openMenuModal('menu1.jpg', 'Hotel DÉMO'); trackClick('Hébergements Hotels-Liste-menu-Hotel DEMO', '#')" class="btn-menu">📋 Options</button>
                        </div>
                        <p style="margin-top: 10px; font-size: 12px; color: #64748b; font-style: italic;">
                            💡 Cet établissement démontre l'option carrousel photo (3 images) Plus le menu OPTION</p>
                        <table style="width:100%; margin-top:10px; font-size:14px; color:#64748b; font-style:italic; border-collapse:collapse;">
    <tr>
        <td style="padding:4px 10px;">🍽️ Restaurant</td>
        <td style="padding:4px 10px;">🥐 ☕ Croissants et petit déjeuner</td>
    </tr>
    <tr>
        <td style="padding:4px 10px;">⭐ Vous avez des étoiles ?</td>
        <td style="padding:4px 10px;">♿ PMR</td>

    </tr>
    <tr>
        <td style="padding:4px 10px;">🅿️ Parking gratuit</td>
        <td style="padding:4px 10px;">🔋 Recharge véhicule</td>
    </tr>
    <tr>
        <td style="padding:4px 10px;">📶 Wifi</td>
        <td style="padding:4px 10px;">🐾 Chiens acceptés</td>
    </tr>
    <tr>
        <td style="padding:4px 10px;">🛍️ Proche magasins</td>
        <td style="padding:4px 10px;">🛒 Proche épicerie</td>
    </tr>
    <tr>
        <td style="padding:4px 10px;">🚲 Vélo disponible</td>
        <td style="padding:4px 10px;">🦆 Proche d'un site d'observation</td>
    </tr>
    <tr>
        <td style="padding:4px 10px;">🎤 Karaoké</td>
        <td style="padding:4px 10px;">… et bien d'autres</td>
    </tr>
</table>

                    </div>
                    <div class="restaurant-card-images">
                        <div class="restaurant-images" data-carousel="demo-hotel">
                            <button class="carousel-nav prev" onclick="changeSlide('demo-hotel', -1)">❮</button>
                            <button class="carousel-nav next" onclick="changeSlide('demo-hotel', 1)">❯</button>
                            <div class="carousel-container">
                                <div class="carousel-slide">
                                    <img src="Votre_pub2.jpg" alt="Photo 1">
                                </div>
                                <div class="carousel-slide">
                                    <img src="Votre_pub3.jpg" alt="Photo 2">
                                </div>
                                <div class="carousel-slide">
                                    <img src="Votre_pub.jpg" alt="Photo 3">
                                </div>
                            </div>
                            <div class="carousel-controls">
                                <span class="carousel-dot active" onclick="goToSlide('demo-hotel', 0)"></span>
                                <span class="carousel-dot" onclick="goToSlide('demo-hotel', 1)"></span>
                                <span class="carousel-dot" onclick="goToSlide('demo-hotel', 2)"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- PUBS -->
            <div class="ad-card">
                <p>🌟 <strong>PUB :</strong> Votre établissement ici ! <a href="../contact/contact_pro.html" style="color:#ef4444;">Contactez-nous</a></p>
            </div>
        </div>
    </div>
    
        <div id="debut-listes"></div>
    <!-- ========== LISTE GîTES ========== -->
    <div id="classic-list-container" style="display: none; margin-top: 20px;">
        <div class="map-title">
            <div class="map-title-content" >
                <h2>🏡 Liste des Gîtes</h2>
                <div style="display: flex; gap: 10px; align-items: center;">
                    <input type="text" id="searchBarClassic" placeholder="Rechercher..." style="flex: 1;" onclick="trackClick('Hébergements Gîtes Recherche dans liste', '#')">
                    <button class="btn-clear-filter" onclick="clearSearchFilterClassic(); trackClick('Hébergements Gîtes Effacer recherche', '#')">🔄 Effacer filtre</button>
                </div>
            </div>
        </div>

        <div id="dynamic-list-classic">
            <div class="classic-item" data-name="Vintage House">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Vintage House</h4>
                                                <p>🗺️ 2b rue du Lac<br>51290 Giffaumont-Champaubert</p>
                                                <p>📞 0621131188</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0621131188" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-Vintage House', 'tel:0621131188')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0621131188" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-Vintage House', 'tel:0621131188')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.gites.fr/gites_vintage-house_giffaumont-champaubert_h6450944.htm" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Vintage House', 'https://www.gites.fr/gites_vintage-house_giffaumont-champaubert_h6450944.htm')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.gites.fr/gites_vintage-house_giffaumont-champaubert_h6450944.htm" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Vintage House', 'https://www.gites.fr/gites_vintage-house_giffaumont-champaubert_h6450944.htm')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.556622, 4.753715], this); trackClick('Hébergements Gîtes-Liste-carte-Vintage House', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.556622, 4.753715], this); trackClick('Hébergements Gîtes-Liste-carte-Vintage House', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Vintage House'); trackClick('Hébergements Gîtes-Liste-photos-Vintage House', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Vue sur le jardin                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Vintage House" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Cottage 12B">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Cottage 12B</h4>
                                                <p>🗺️ 12 Presqu'île de Rougemer<br>51290 Giffaumont-Champaubert</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/gite-cottage-2-a-4-pers-bulle-der-12b-lac-du-der.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Cottage 12B', 'https://www.booking.com/hotel/fr/gite-cottage-2-a-4-pers-bulle-der-12b-lac-du-der.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/gite-cottage-2-a-4-pers-bulle-der-12b-lac-du-der.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Cottage 12B', 'https://www.booking.com/hotel/fr/gite-cottage-2-a-4-pers-bulle-der-12b-lac-du-der.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.549155, 4.774075], this); trackClick('Hébergements Gîtes-Liste-carte-Cottage 12B', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.549155, 4.774075], this); trackClick('Hébergements Gîtes-Liste-carte-Cottage 12B', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Cottage 12B'); trackClick('Hébergements Gîtes-Liste-photos-Cottage 12B', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Proche de la plage                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Cottage 12B" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Chalet Giffaumont">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Chalet Giffaumont</h4>
                                                <p>🗺️ 1 rue Rougemer<br>51290 Giffaumont-Champaubert</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/magnifique-chalet-climatise-avec-jardin-adapte-pmr.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Chalet Giffaumont', 'https://www.booking.com/hotel/fr/magnifique-chalet-climatise-avec-jardin-adapte-pmr.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/magnifique-chalet-climatise-avec-jardin-adapte-pmr.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Chalet Giffaumont', 'https://www.booking.com/hotel/fr/magnifique-chalet-climatise-avec-jardin-adapte-pmr.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.548285, 4.770356], this); trackClick('Hébergements Gîtes-Liste-carte-Chalet Giffaumont', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.548285, 4.770356], this); trackClick('Hébergements Gîtes-Liste-carte-Chalet Giffaumont', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Chalet Giffaumont'); trackClick('Hébergements Gîtes-Liste-photos-Chalet Giffaumont', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Chalet climatisé avec Jardin                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Chalet Giffaumont" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="La Cachotière du Lac">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 La Cachotière du Lac</h4>
                                                <p>🗺️ Chemin de la Cachotte<br>51290 Giffaumont-Champaubert</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/la-cachotiere-du-lac.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-La Cachotière du Lac', 'https://www.booking.com/hotel/fr/la-cachotiere-du-lac.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/la-cachotiere-du-lac.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-La Cachotière du Lac', 'https://www.booking.com/hotel/fr/la-cachotiere-du-lac.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.551542, 4.768877], this); trackClick('Hébergements Gîtes-Liste-carte-La Cachotière du Lac', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.551542, 4.768877], this); trackClick('Hébergements Gîtes-Liste-carte-La Cachotière du Lac', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'La Cachotière du Lac'); trackClick('Hébergements Gîtes-Liste-photos-La Cachotière du Lac', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Parking - Climatisation - Jardin                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="La Cachotière du Lac" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Le chalet de la Presquile">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Le chalet de la Presquile</h4>
                                                <p>🗺️ Rue de Rougemer<br>51290 Giffaumont-Champaubert</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/le-chalet-de-la-plage-giffaumont-champaubert.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Le chalet de la Presquile', 'https://www.booking.com/hotel/fr/le-chalet-de-la-plage-giffaumont-champaubert.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/le-chalet-de-la-plage-giffaumont-champaubert.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Le chalet de la Presquile', 'https://www.booking.com/hotel/fr/le-chalet-de-la-plage-giffaumont-champaubert.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.548684, 4.77036], this); trackClick('Hébergements Gîtes-Liste-carte-Le chalet de la Presquile', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.548684, 4.77036], this); trackClick('Hébergements Gîtes-Liste-carte-Le chalet de la Presquile', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Le chalet de la Presquile'); trackClick('Hébergements Gîtes-Liste-photos-Le chalet de la Presquile', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Parking Gratuit - Petit déjeuner                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Le chalet de la Presquile" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Home du port">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Home du port</h4>
                                                <p>🗺️ 3 Chemin des Fontaines<br>51290 Giffaumont-Champaubert</p>
                                                <p>📞 0658965768</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0658965768" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-Home du port', 'tel:0658965768')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0658965768" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-Home du port', 'tel:0658965768')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/home-du-port.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Home du port', 'https://www.booking.com/hotel/fr/home-du-port.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/home-du-port.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Home du port', 'https://www.booking.com/hotel/fr/home-du-port.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.55161, 4.77121], this); trackClick('Hébergements Gîtes-Liste-carte-Home du port', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.55161, 4.77121], this); trackClick('Hébergements Gîtes-Liste-carte-Home du port', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Home du port'); trackClick('Hébergements Gîtes-Liste-photos-Home du port', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>A coté d&#039;ACCRODER                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Home du port" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Marina Holyder">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Marina Holyder</h4>
                                                <p>🗺️ 11 Presqu'île de Rougemer<br>51290 Giffaumont-Champaubert</p>
                                                <p>📞 0326728404</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0326728404" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-Marina Holyder', 'tel:0326728404')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0326728404" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-Marina Holyder', 'tel:0326728404')">📞 Appeler</a>
                                                                                    <!-- <a href="http://www.marina-holyder.com/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Marina Holyder', 'http://www.marina-holyder.com/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="http://www.marina-holyder.com/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Marina Holyder', 'http://www.marina-holyder.com/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.55207, 4.77351], this); trackClick('Hébergements Gîtes-Liste-carte-Marina Holyder', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.55207, 4.77351], this); trackClick('Hébergements Gîtes-Liste-carte-Marina Holyder', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Marina Holyder'); trackClick('Hébergements Gîtes-Liste-photos-Marina Holyder', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Cottage indépendant sur terrain privatif                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Marina Holyder" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Appartement T1">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Appartement T1</h4>
                                                <p>🗺️ 2 Ter rue du grand der<br>51290 Giffaumont-Champaubert</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/appartement-t1-tout-confort-au-lac-du-der.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Appartement T1', 'https://www.booking.com/hotel/fr/appartement-t1-tout-confort-au-lac-du-der.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/appartement-t1-tout-confort-au-lac-du-der.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Appartement T1', 'https://www.booking.com/hotel/fr/appartement-t1-tout-confort-au-lac-du-der.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.553629, 4.744412], this); trackClick('Hébergements Gîtes-Liste-carte-Appartement T1', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.553629, 4.744412], this); trackClick('Hébergements Gîtes-Liste-carte-Appartement T1', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Appartement T1'); trackClick('Hébergements Gîtes-Liste-photos-Appartement T1', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Jardin - Restaurant - Terrasse                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Appartement T1" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Les Coccinels 41">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Les Coccinels 41</h4>
                                                <p>🗺️ 11 Presqu'île de Rougemer<br>51290 Giffaumont-Champaubert</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/maison-lac-du-der.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Les Coccinels 41', 'https://www.booking.com/hotel/fr/maison-lac-du-der.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/maison-lac-du-der.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Les Coccinels 41', 'https://www.booking.com/hotel/fr/maison-lac-du-der.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.551043, 4.774812], this); trackClick('Hébergements Gîtes-Liste-carte-Les Coccinels 41', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.551043, 4.774812], this); trackClick('Hébergements Gîtes-Liste-carte-Les Coccinels 41', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Les Coccinels 41'); trackClick('Hébergements Gîtes-Liste-photos-Les Coccinels 41', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>La maison est bien placée proche de la plage et du port                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Les Coccinels 41" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="La Roselière du Der">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 La Roselière du Der</h4>
                                                <p>🗺️ 25 rue du Lac<br>51290 Giffaumont-Champaubert</p>
                                                <p>📞 0326726416</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0326726416" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-La Roselière du Der', 'tel:0326726416')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0326726416" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-La Roselière du Der', 'tel:0326726416')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/la-roseliere-du-der.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-La Roselière du Der', 'https://www.booking.com/hotel/fr/la-roseliere-du-der.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/la-roseliere-du-der.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-La Roselière du Der', 'https://www.booking.com/hotel/fr/la-roseliere-du-der.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.55421, 4.75291], this); trackClick('Hébergements Gîtes-Liste-carte-La Roselière du Der', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.55421, 4.75291], this); trackClick('Hébergements Gîtes-Liste-carte-La Roselière du Der', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'La Roselière du Der'); trackClick('Hébergements Gîtes-Liste-photos-La Roselière du Der', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Gîte de 220m² Juste magnifique                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="La Roselière du Der" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Bulle Der Cottage 19">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Bulle Der Cottage 19</h4>
                                                <p>🗺️ 32 impasse de la Plage<br>51290 Giffaumont-Champaubert</p>
                                                <p>📞 0643417645</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0643417645" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-Bulle Der Cottage 19', 'tel:0643417645')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0643417645" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-Bulle Der Cottage 19', 'tel:0643417645')">📞 Appeler</a>
                                                                                    <!-- <a href="https://gite-bulle-der.jimdosite.com/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Bulle Der Cottage 19', 'https://gite-bulle-der.jimdosite.com/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://gite-bulle-der.jimdosite.com/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Bulle Der Cottage 19', 'https://gite-bulle-der.jimdosite.com/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.55490, 4.75148], this); trackClick('Hébergements Gîtes-Liste-carte-Bulle Der Cottage 19', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.55490, 4.75148], this); trackClick('Hébergements Gîtes-Liste-carte-Bulle Der Cottage 19', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Bulle Der Cottage 19'); trackClick('Hébergements Gîtes-Liste-photos-Bulle Der Cottage 19', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Très jolie maison de vacance de 80m²                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Bulle Der Cottage 19" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Le Logis du Der">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Le Logis du Der</h4>
                                                <p>🗺️ 26 rue du Bois<br>51290 Giffaumont-Champaubert</p>
                                                <p>📞 0650523095</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0650523095" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-Le Logis du Der', 'tel:0650523095')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0650523095" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-Le Logis du Der', 'tel:0650523095')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/le-logis-du-der.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Le Logis du Der', 'https://www.booking.com/hotel/fr/le-logis-du-der.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/le-logis-du-der.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Le Logis du Der', 'https://www.booking.com/hotel/fr/le-logis-du-der.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.54979, 4.74787], this); trackClick('Hébergements Gîtes-Liste-carte-Le Logis du Der', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.54979, 4.74787], this); trackClick('Hébergements Gîtes-Liste-carte-Le Logis du Der', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Le Logis du Der'); trackClick('Hébergements Gîtes-Liste-photos-Le Logis du Der', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Maison de 160m² avec Terrasse                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Le Logis du Der" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Chalet confortable">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Chalet confortable</h4>
                                                <p>🗺️ 47 la Cachotte<br>51290 Giffaumont-Champaubert</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/chalet-la-cachotte.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Chalet confortable', 'https://www.booking.com/hotel/fr/chalet-la-cachotte.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/chalet-la-cachotte.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Chalet confortable', 'https://www.booking.com/hotel/fr/chalet-la-cachotte.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.552713, 4.768504], this); trackClick('Hébergements Gîtes-Liste-carte-Chalet confortable', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.552713, 4.768504], this); trackClick('Hébergements Gîtes-Liste-carte-Chalet confortable', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Chalet confortable'); trackClick('Hébergements Gîtes-Liste-photos-Chalet confortable', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Chalet de 30m² - Parking privé                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Chalet confortable" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="La Maison Bleu du Lac">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 La Maison Bleu du Lac</h4>
                                                <p>🗺️ Résidence Marina Holyder Maison N07<br>51290 Giffaumont-Champaubert</p>
                                                <p>📞 0625901252</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0625901252" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-La Maison Bleu du Lac', 'tel:0625901252')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0625901252" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-La Maison Bleu du Lac', 'tel:0625901252')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/maison-bleu-du-lac.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-La Maison Bleu du Lac', 'https://www.booking.com/hotel/fr/maison-bleu-du-lac.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/maison-bleu-du-lac.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-La Maison Bleu du Lac', 'https://www.booking.com/hotel/fr/maison-bleu-du-lac.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.549479, 4.773816], this); trackClick('Hébergements Gîtes-Liste-carte-La Maison Bleu du Lac', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.549479, 4.773816], this); trackClick('Hébergements Gîtes-Liste-carte-La Maison Bleu du Lac', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'La Maison Bleu du Lac'); trackClick('Hébergements Gîtes-Liste-photos-La Maison Bleu du Lac', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Parking Gratuit - Baignoire - Barbecue                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="La Maison Bleu du Lac" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Le Gros Chêne">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Le Gros Chêne</h4>
                                                <p>🗺️ 1 rue du Chêne<br>52220 Frampas</p>
                                                <p>📞 0632663087</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0632663087" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-Le Gros Chêne', 'tel:0632663087')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0632663087" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-Le Gros Chêne', 'tel:0632663087')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/le-gros-chene-frampas.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Le Gros Chêne', 'https://www.booking.com/hotel/fr/le-gros-chene-frampas.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/le-gros-chene-frampas.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Le Gros Chêne', 'https://www.booking.com/hotel/fr/le-gros-chene-frampas.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.51805, 4.82866], this); trackClick('Hébergements Gîtes-Liste-carte-Le Gros Chêne', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.51805, 4.82866], this); trackClick('Hébergements Gîtes-Liste-carte-Le Gros Chêne', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Le Gros Chêne'); trackClick('Hébergements Gîtes-Liste-photos-Le Gros Chêne', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Maison en pierre avec jardin - Parking                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Le Gros Chêne" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Chalet au Charme du Der">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Chalet au Charme du Der</h4>
                                                <p>🗺️ 6 rue de la Loge<br>51290 Châtillon-sur-Broué</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/joli-chalet-au-charme-du-der.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Chalet au Charme du Der', 'https://www.booking.com/hotel/fr/joli-chalet-au-charme-du-der.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/joli-chalet-au-charme-du-der.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Chalet au Charme du Der', 'https://www.booking.com/hotel/fr/joli-chalet-au-charme-du-der.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.55103, 4.707938], this); trackClick('Hébergements Gîtes-Liste-carte-Chalet au Charme du Der', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.55103, 4.707938], this); trackClick('Hébergements Gîtes-Liste-carte-Chalet au Charme du Der', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Chalet au Charme du Der'); trackClick('Hébergements Gîtes-Liste-photos-Chalet au Charme du Der', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Chalet climatisé de 50m² avec vue sur Jardin                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Chalet au Charme du Der" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Alaguyauder le KOTA">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Alaguyauder le KOTA</h4>
                                                <p>🗺️ 3 rue de la Loge<br>51290 Châtillon-sur-Broué</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/alaguyauder-le-kota.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Alaguyauder le KOTA', 'https://www.booking.com/hotel/fr/alaguyauder-le-kota.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/alaguyauder-le-kota.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Alaguyauder le KOTA', 'https://www.booking.com/hotel/fr/alaguyauder-le-kota.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.55083, 4.70776], this); trackClick('Hébergements Gîtes-Liste-carte-Alaguyauder le KOTA', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.55083, 4.70776], this); trackClick('Hébergements Gîtes-Liste-carte-Alaguyauder le KOTA', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Alaguyauder le KOTA'); trackClick('Hébergements Gîtes-Liste-photos-Alaguyauder le KOTA', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Capacité 10 personnes - Piscine                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Alaguyauder le KOTA" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Au fils des Saisons">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Au fils des Saisons</h4>
                                                <p>🗺️ 17 rue du Lac<br>51290 Châtillon-sur-Broué</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/au-fils-des-saisons.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Au fils des Saisons', 'https://www.booking.com/hotel/fr/au-fils-des-saisons.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/au-fils-des-saisons.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Au fils des Saisons', 'https://www.booking.com/hotel/fr/au-fils-des-saisons.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.552792, 4.707019], this); trackClick('Hébergements Gîtes-Liste-carte-Au fils des Saisons', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.552792, 4.707019], this); trackClick('Hébergements Gîtes-Liste-carte-Au fils des Saisons', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Au fils des Saisons'); trackClick('Hébergements Gîtes-Liste-photos-Au fils des Saisons', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Très jolie maison de 80m² avec Parking                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Au fils des Saisons" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Gîte de la loge Seryse">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Gîte de la loge Seryse</h4>
                                                <p>🗺️ 4B rue de la Loge<br>51290 Châtillon-sur-Broué</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/gite-de-la-loge-chac-tillon-sur-broua-c.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Gîte de la loge Seryse', 'https://www.booking.com/hotel/fr/gite-de-la-loge-chac-tillon-sur-broua-c.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/gite-de-la-loge-chac-tillon-sur-broua-c.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Gîte de la loge Seryse', 'https://www.booking.com/hotel/fr/gite-de-la-loge-chac-tillon-sur-broua-c.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.55103, 4.707938], this); trackClick('Hébergements Gîtes-Liste-carte-Gîte de la loge Seryse', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.55103, 4.707938], this); trackClick('Hébergements Gîtes-Liste-carte-Gîte de la loge Seryse', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Gîte de la loge Seryse'); trackClick('Hébergements Gîtes-Liste-photos-Gîte de la loge Seryse', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Gîte de 50m² - Parking - Piscine                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Gîte de la loge Seryse" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Les Fortelles">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Les Fortelles</h4>
                                                <p>🗺️ 35 rue du Lac<br>51290 Châtillon-sur-Broué</p>
                                                <p>📞 0680883806</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0680883806" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-Les Fortelles', 'tel:0680883806')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0680883806" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-Les Fortelles', 'tel:0680883806')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/les-fortelles.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Les Fortelles', 'https://www.booking.com/hotel/fr/les-fortelles.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/les-fortelles.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Les Fortelles', 'https://www.booking.com/hotel/fr/les-fortelles.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.557402, 4.705802], this); trackClick('Hébergements Gîtes-Liste-carte-Les Fortelles', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.557402, 4.705802], this); trackClick('Hébergements Gîtes-Liste-carte-Les Fortelles', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Les Fortelles'); trackClick('Hébergements Gîtes-Liste-photos-Les Fortelles', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Belle maison anciènne rénovée - Parking                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Les Fortelles" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Ranch du pont urgin">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Ranch du pont urgin</h4>
                                                <p>🗺️ Ferme du Pont Urgin<br>52220 Planrupt</p>
                                                <p>📞 0637983017</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0637983017" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-Ranch du pont urgin', 'tel:0637983017')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0637983017" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-Ranch du pont urgin', 'tel:0637983017')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/ranch-du-pont-urgin.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Ranch du pont urgin', 'https://www.booking.com/hotel/fr/ranch-du-pont-urgin.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/ranch-du-pont-urgin.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Ranch du pont urgin', 'https://www.booking.com/hotel/fr/ranch-du-pont-urgin.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.509545, 4.795004], this); trackClick('Hébergements Gîtes-Liste-carte-Ranch du pont urgin', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.509545, 4.795004], this); trackClick('Hébergements Gîtes-Liste-carte-Ranch du pont urgin', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Ranch du pont urgin'); trackClick('Hébergements Gîtes-Liste-photos-Ranch du pont urgin', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Très jolie propriété – balade à cheval avec Caroline                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Ranch du pont urgin" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="A la Bonne Franquette">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 A la Bonne Franquette</h4>
                                                <p>🗺️ 31 hameau du Voy<br>52220 Droyes</p>
                                                <p>📞 0687065812</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0687065812" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-A la Bonne Franquette', 'tel:0687065812')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0687065812" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-A la Bonne Franquette', 'tel:0687065812')">📞 Appeler</a>
                                                                                    <!-- <a href="https://escapadadeviaje.com/france/droyes/a-la-bonne-franquette/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-A la Bonne Franquette', 'https://escapadadeviaje.com/france/droyes/a-la-bonne-franquette/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://escapadadeviaje.com/france/droyes/a-la-bonne-franquette/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-A la Bonne Franquette', 'https://escapadadeviaje.com/france/droyes/a-la-bonne-franquette/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.52628, 4.72455], this); trackClick('Hébergements Gîtes-Liste-carte-A la Bonne Franquette', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.52628, 4.72455], this); trackClick('Hébergements Gîtes-Liste-carte-A la Bonne Franquette', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'A la Bonne Franquette'); trackClick('Hébergements Gîtes-Liste-photos-A la Bonne Franquette', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Très jolie maison anciènne rénovée                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="A la Bonne Franquette" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="La maison de Marie">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 La maison de Marie</h4>
                                                <p>🗺️ 11 rue de la Motte<br>52220 Droyes</p>
                                                <p>📞 0683301740</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0683301740" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-La maison de Marie', 'tel:0683301740')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0683301740" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-La maison de Marie', 'tel:0683301740')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.la-maison-de-marie.com/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-La maison de Marie', 'https://www.la-maison-de-marie.com/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.la-maison-de-marie.com/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-La maison de Marie', 'https://www.la-maison-de-marie.com/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.51238, 4.70111], this); trackClick('Hébergements Gîtes-Liste-carte-La maison de Marie', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.51238, 4.70111], this); trackClick('Hébergements Gîtes-Liste-carte-La maison de Marie', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'La maison de Marie'); trackClick('Hébergements Gîtes-Liste-photos-La maison de Marie', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Belle maison anciènne rénovée - Parking - Petit-déjeuner                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="La maison de Marie" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Le Moulin d Eclaron">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Le Moulin d Eclaron</h4>
                                                <p>🗺️ 3 rue du moulin<br>52290 Eclaron</p>
                                                <p>📞 0661238304</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0661238304" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-Le Moulin d Eclaron', 'tel:0661238304')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0661238304" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-Le Moulin d Eclaron', 'tel:0661238304')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.chambres-hotes.fr/chambres-hotes_le-moulin-d-eclaron_eclaron-braucourt-sainte-liviere_h609761.htm" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Le Moulin d Eclaron', 'https://www.chambres-hotes.fr/chambres-hotes_le-moulin-d-eclaron_eclaron-braucourt-sainte-liviere_h609761.htm')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.chambres-hotes.fr/chambres-hotes_le-moulin-d-eclaron_eclaron-braucourt-sainte-liviere_h609761.htm" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Le Moulin d Eclaron', 'https://www.chambres-hotes.fr/chambres-hotes_le-moulin-d-eclaron_eclaron-braucourt-sainte-liviere_h609761.htm')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.59369, 4.86518], this); trackClick('Hébergements Gîtes-Liste-carte-Le Moulin d Eclaron', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.59369, 4.86518], this); trackClick('Hébergements Gîtes-Liste-carte-Le Moulin d Eclaron', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Le Moulin d Eclaron'); trackClick('Hébergements Gîtes-Liste-photos-Le Moulin d Eclaron', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Vue sur le cours d eau - Petit déjeuner                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Le Moulin d Eclaron" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Charmant logement">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Charmant logement</h4>
                                                <p>🗺️ 2 Place Pelletier<br>52290 Eclaron</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/charmant-logement-avec-parking-gratuit-sur-plac-eclaron-braucourt-sainte-liviere.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Charmant logement', 'https://www.booking.com/hotel/fr/charmant-logement-avec-parking-gratuit-sur-plac-eclaron-braucourt-sainte-liviere.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/charmant-logement-avec-parking-gratuit-sur-plac-eclaron-braucourt-sainte-liviere.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Charmant logement', 'https://www.booking.com/hotel/fr/charmant-logement-avec-parking-gratuit-sur-plac-eclaron-braucourt-sainte-liviere.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.590386, 4.865673], this); trackClick('Hébergements Gîtes-Liste-carte-Charmant logement', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.590386, 4.865673], this); trackClick('Hébergements Gîtes-Liste-carte-Charmant logement', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Charmant logement'); trackClick('Hébergements Gîtes-Liste-photos-Charmant logement', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Petit appartement situé sur une jolie place                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Charmant logement" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Le Gîte de Laurence">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Le Gîte de Laurence</h4>
                                                <p>🗺️ 16 rue Sainte Libaire<br>52290 Sainte-Livière</p>
                                                <p>📞 0640070970</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0640070970" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-Le Gîte de Laurence', 'tel:0640070970')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0640070970" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-Le Gîte de Laurence', 'tel:0640070970')">📞 Appeler</a>
                                                                                    <!-- <a href="https://legitedelaurence5.wixsite.com/le-gite-de-laurence" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Le Gîte de Laurence', 'https://legitedelaurence5.wixsite.com/le-gite-de-laurence')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://legitedelaurence5.wixsite.com/le-gite-de-laurence" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Le Gîte de Laurence', 'https://legitedelaurence5.wixsite.com/le-gite-de-laurence')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.60079, 4.82352], this); trackClick('Hébergements Gîtes-Liste-carte-Le Gîte de Laurence', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.60079, 4.82352], this); trackClick('Hébergements Gîtes-Liste-carte-Le Gîte de Laurence', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Le Gîte de Laurence'); trackClick('Hébergements Gîtes-Liste-photos-Le Gîte de Laurence', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Superbe bâtisse de charme à colombages - Capacité de 14 personnes - Un lieu unique                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Le Gîte de Laurence" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="L'échappée Der">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 L'échappée Der</h4>
                                                <p>🗺️ 1 rue des Cannes<br>52290 Braucourt</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/echappee-der.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-L\'échappée Der', 'https://www.booking.com/hotel/fr/echappee-der.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/echappee-der.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-L\'échappée Der', 'https://www.booking.com/hotel/fr/echappee-der.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.535368, 4.817664], this); trackClick('Hébergements Gîtes-Liste-carte-L\'échappée Der', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.535368, 4.817664], this); trackClick('Hébergements Gîtes-Liste-carte-L\'échappée Der', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'L&#039;échappée Der'); trackClick('Hébergements Gîtes-Liste-photos-L&#039;échappée Der', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Maison de 38m² - Petit déjeuner - Parking                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="L'échappée Der" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Mobile-home">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Mobile-home</h4>
                                                <p>🗺️ 9 rue du Souvenir<br>52290 Braucourt</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/mobile-home-eclaron-braucourt-sainte-liviere.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Mobile-home', 'https://www.booking.com/hotel/fr/mobile-home-eclaron-braucourt-sainte-liviere.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/mobile-home-eclaron-braucourt-sainte-liviere.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Mobile-home', 'https://www.booking.com/hotel/fr/mobile-home-eclaron-braucourt-sainte-liviere.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.533211, 4.81693], this); trackClick('Hébergements Gîtes-Liste-carte-Mobile-home', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.533211, 4.81693], this); trackClick('Hébergements Gîtes-Liste-carte-Mobile-home', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Mobile-home'); trackClick('Hébergements Gîtes-Liste-photos-Mobile-home', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Petit mobile home avec 2 chambres, salon tout équipé - Parking                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Mobile-home" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Le Gruon du Lac">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Le Gruon du Lac</h4>
                                                <p>🗺️ 6 rue du Souvenir<br>52290 Braucourt</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/le-gruon-du-lac.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Le Gruon du Lac', 'https://www.booking.com/hotel/fr/le-gruon-du-lac.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/le-gruon-du-lac.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Le Gruon du Lac', 'https://www.booking.com/hotel/fr/le-gruon-du-lac.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.5331, 4.816595], this); trackClick('Hébergements Gîtes-Liste-carte-Le Gruon du Lac', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.5331, 4.816595], this); trackClick('Hébergements Gîtes-Liste-carte-Le Gruon du Lac', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Le Gruon du Lac'); trackClick('Hébergements Gîtes-Liste-photos-Le Gruon du Lac', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Maison de 30m² avec Parking                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Le Gruon du Lac" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="La Sente des Vignes">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 La Sente des Vignes</h4>
                                                <p>🗺️ 17 rue Haute<br>51290 Hauteville</p>
                                                <p>📞 0608289995</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0608289995" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-La Sente des Vignes', 'tel:0608289995')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0608289995" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-La Sente des Vignes', 'tel:0608289995')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.lasentedesvignes.com/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-La Sente des Vignes', 'https://www.lasentedesvignes.com/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.lasentedesvignes.com/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-La Sente des Vignes', 'https://www.lasentedesvignes.com/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.63790, 4.76998], this); trackClick('Hébergements Gîtes-Liste-carte-La Sente des Vignes', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.63790, 4.76998], this); trackClick('Hébergements Gîtes-Liste-carte-La Sente des Vignes', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'La Sente des Vignes'); trackClick('Hébergements Gîtes-Liste-photos-La Sente des Vignes', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Un très bel endroit avec petit déjeuner - Bain à remous                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="La Sente des Vignes" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Chez David et Julie">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Chez David et Julie</h4>
                                                <p>🗺️ 3 Bis rue de la grande Inglee<br>52220 La Bouverie</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/chez-david-et-julie.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Chez David et Julie', 'https://www.booking.com/hotel/fr/chez-david-et-julie.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/chez-david-et-julie.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Chez David et Julie', 'https://www.booking.com/hotel/fr/chez-david-et-julie.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.474678, 4.780478], this); trackClick('Hébergements Gîtes-Liste-carte-Chez David et Julie', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.474678, 4.780478], this); trackClick('Hébergements Gîtes-Liste-carte-Chez David et Julie', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Chez David et Julie'); trackClick('Hébergements Gîtes-Liste-photos-Chez David et Julie', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Maison de vacance de 60m² - Parking                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Chez David et Julie" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Partout l'étang Montier en der">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Partout l'étang Montier en der</h4>
                                                <p>🗺️ 1 rue du Moulin de la Battoire<br>52220 La Bouverie</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/partout-l-etang.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Partout l\'étang Montier en der', 'https://www.booking.com/hotel/fr/partout-l-etang.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/partout-l-etang.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Partout l\'étang Montier en der', 'https://www.booking.com/hotel/fr/partout-l-etang.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.472863, 4.777405], this); trackClick('Hébergements Gîtes-Liste-carte-Partout l\'étang Montier en der', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.472863, 4.777405], this); trackClick('Hébergements Gîtes-Liste-carte-Partout l\'étang Montier en der', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Partout l&#039;étang Montier en der'); trackClick('Hébergements Gîtes-Liste-photos-Partout l&#039;étang Montier en der', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Maison de 80m² avec terrasse et barbecue                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Partout l'étang Montier en der" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="La Chantourelle">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 La Chantourelle</h4>
                                                <p>🗺️ 4 rue Chantourelle<br>51290 Landricourt</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/la-chantourelle.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-La Chantourelle', 'https://www.booking.com/hotel/fr/la-chantourelle.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/la-chantourelle.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-La Chantourelle', 'https://www.booking.com/hotel/fr/la-chantourelle.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.616067, 4.810505], this); trackClick('Hébergements Gîtes-Liste-carte-La Chantourelle', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.616067, 4.810505], this); trackClick('Hébergements Gîtes-Liste-carte-La Chantourelle', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'La Chantourelle'); trackClick('Hébergements Gîtes-Liste-photos-La Chantourelle', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Maison de 250m²  exceptionnelle avec piscine, terrasse - Parking                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="La Chantourelle" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Domaine des deux sapins">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Domaine des deux sapins</h4>
                                                <p>🗺️ 39 rue de la Croix<br>52130 Voillecomte</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/domaine-des-deux-sapins.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Domaine des deux sapins', 'https://www.booking.com/hotel/fr/domaine-des-deux-sapins.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/domaine-des-deux-sapins.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Domaine des deux sapins', 'https://www.booking.com/hotel/fr/domaine-des-deux-sapins.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.506547, 4.858106], this); trackClick('Hébergements Gîtes-Liste-carte-Domaine des deux sapins', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.506547, 4.858106], this); trackClick('Hébergements Gîtes-Liste-carte-Domaine des deux sapins', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Domaine des deux sapins'); trackClick('Hébergements Gîtes-Liste-photos-Domaine des deux sapins', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Au calme de la campagne dans une maison de 200m² - Parking                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Domaine des deux sapins" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Ô bout d'la Motte">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Ô bout d'la Motte</h4>
                                                <p>🗺️ 27 rue de la Motte<br>52130 Voillecomte</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/o-bout-d-39-la-motte.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Ô bout d\'la Motte', 'https://www.booking.com/hotel/fr/o-bout-d-39-la-motte.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/o-bout-d-39-la-motte.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Ô bout d\'la Motte', 'https://www.booking.com/hotel/fr/o-bout-d-39-la-motte.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.505351, 4.877044], this); trackClick('Hébergements Gîtes-Liste-carte-Ô bout d\'la Motte', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.505351, 4.877044], this); trackClick('Hébergements Gîtes-Liste-carte-Ô bout d\'la Motte', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Ô bout d&#039;la Motte'); trackClick('Hébergements Gîtes-Liste-photos-Ô bout d&#039;la Motte', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Vue sur le jardin avec terrasse - Parking                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Ô bout d'la Motte" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Au lac du der">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Au lac du der</h4>
                                                <p>🗺️ 1 rue de la Motte<br>52130 Voillecomte</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/au-lac-du-der.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Au lac du der', 'https://www.booking.com/hotel/fr/au-lac-du-der.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/au-lac-du-der.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Au lac du der', 'https://www.booking.com/hotel/fr/au-lac-du-der.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.505175, 4.868449], this); trackClick('Hébergements Gîtes-Liste-carte-Au lac du der', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.505175, 4.868449], this); trackClick('Hébergements Gîtes-Liste-carte-Au lac du der', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Au lac du der'); trackClick('Hébergements Gîtes-Liste-photos-Au lac du der', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Maison de 65m² rénovée avec terrasse et barbecue                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Au lac du der" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Au jardin de Victor">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Au jardin de Victor</h4>
                                                <p>🗺️ 32 rue de Moncetz<br>51290 Saint-Rémy-en-Bouzemont-Saint-Genest-et-Isson</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/au-jardin-de-victor.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Au jardin de Victor', 'https://www.booking.com/hotel/fr/au-jardin-de-victor.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/au-jardin-de-victor.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Au jardin de Victor', 'https://www.booking.com/hotel/fr/au-jardin-de-victor.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.63179, 4.649806], this); trackClick('Hébergements Gîtes-Liste-carte-Au jardin de Victor', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.63179, 4.649806], this); trackClick('Hébergements Gîtes-Liste-carte-Au jardin de Victor', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Au jardin de Victor'); trackClick('Hébergements Gîtes-Liste-photos-Au jardin de Victor', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Appartement climatisé de 36m² avec jardin terrasse                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Au jardin de Victor" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Manoir romantique 8min du lac">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Manoir romantique 8min du lac</h4>
                                                <p>🗺️ 37 rue Audiffred<br>52220 Montier-en-der</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/manoir-romantique-8-mn-du-lac-et-2-heures-de-paris.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Manoir romantique 8min du lac', 'https://www.booking.com/hotel/fr/manoir-romantique-8-mn-du-lac-et-2-heures-de-paris.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/manoir-romantique-8-mn-du-lac-et-2-heures-de-paris.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Manoir romantique 8min du lac', 'https://www.booking.com/hotel/fr/manoir-romantique-8-mn-du-lac-et-2-heures-de-paris.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.47720, 4.77572], this); trackClick('Hébergements Gîtes-Liste-carte-Manoir romantique 8min du lac', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.47720, 4.77572], this); trackClick('Hébergements Gîtes-Liste-carte-Manoir romantique 8min du lac', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Manoir romantique 8min du lac'); trackClick('Hébergements Gîtes-Liste-photos-Manoir romantique 8min du lac', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Manoir avec piscine - Billard - Pingpong - Jeux pour enfants                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Manoir romantique 8min du lac" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="La Varnière - B&amp;B with communal kitchen">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 La Varnière - B&amp;B with communal kitchen</h4>
                                                <p>🗺️ 2 La Varnière<br>52290 Montier-en-der</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/la-varniere.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-La Varnière - B&amp;B with communal kitchen', 'https://www.booking.com/hotel/fr/la-varniere.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/la-varniere.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-La Varnière - B&B with communal kitchen', 'https://www.booking.com/hotel/fr/la-varniere.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.4737, 4.784547], this); trackClick('Hébergements Gîtes-Liste-carte-La Varnière - B&amp;B with communal kitchen', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.4737, 4.784547], this); trackClick('Hébergements Gîtes-Liste-carte-La Varnière - B&B with communal kitchen', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'La Varnière - B&amp;B with communal kitchen'); trackClick('Hébergements Gîtes-Liste-photos-La Varnière - B&amp;B with communal kitchen', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Très belle maison commune avec jardin                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="La Varnière - B&amp;B with communal kitchen" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Maison Carteret">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Maison Carteret</h4>
                                                <p>🗺️ 6 rue Thibault<br>52290 Montier-en-der</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/la-maison-carteret.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Maison Carteret', 'https://www.booking.com/hotel/fr/la-maison-carteret.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/la-maison-carteret.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Maison Carteret', 'https://www.booking.com/hotel/fr/la-maison-carteret.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.476134, 4.771806], this); trackClick('Hébergements Gîtes-Liste-carte-Maison Carteret', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.476134, 4.771806], this); trackClick('Hébergements Gîtes-Liste-carte-Maison Carteret', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Maison Carteret'); trackClick('Hébergements Gîtes-Liste-photos-Maison Carteret', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Maison de 160m² avec parking                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Maison Carteret" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Maison du bonheur">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Maison du bonheur</h4>
                                                <p>🗺️ 46 rue des Ponts<br>52220 Montier-en-der</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/maison-du-bonheur-la-porte-du-der.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Maison du bonheur', 'https://www.booking.com/hotel/fr/maison-du-bonheur-la-porte-du-der.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/maison-du-bonheur-la-porte-du-der.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Maison du bonheur', 'https://www.booking.com/hotel/fr/maison-du-bonheur-la-porte-du-der.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.475319, 4.767951], this); trackClick('Hébergements Gîtes-Liste-carte-Maison du bonheur', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.475319, 4.767951], this); trackClick('Hébergements Gîtes-Liste-carte-Maison du bonheur', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Maison du bonheur'); trackClick('Hébergements Gîtes-Liste-photos-Maison du bonheur', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Maison de 100m² avec parking                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Maison du bonheur" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Gîte Tomettes et Colombages">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Gîte Tomettes et Colombages</h4>
                                                <p>🗺️ 20 rue de l'Heronne<br>52220 Laneuville-à-Rémy</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/maison-champenoise-proche-du-der-laneuville-a-remy.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Gîte Tomettes et Colombages', 'https://www.booking.com/hotel/fr/maison-champenoise-proche-du-der-laneuville-a-remy.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/maison-champenoise-proche-du-der-laneuville-a-remy.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Gîte Tomettes et Colombages', 'https://www.booking.com/hotel/fr/maison-champenoise-proche-du-der-laneuville-a-remy.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.476231, 4.885197], this); trackClick('Hébergements Gîtes-Liste-carte-Gîte Tomettes et Colombages', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.476231, 4.885197], this); trackClick('Hébergements Gîtes-Liste-carte-Gîte Tomettes et Colombages', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Gîte Tomettes et Colombages'); trackClick('Hébergements Gîtes-Liste-photos-Gîte Tomettes et Colombages', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Maison anciènne de 100m² avec terrasse et barbecue                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Gîte Tomettes et Colombages" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Au Milieu de Nulle Part Chambres au lac du Der">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Au Milieu de Nulle Part Chambres au lac du Der</h4>
                                                <p>🗺️ Lieudit La Pierre<br>51290 Outines</p>
                                                <p>📞 0667367493</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0667367493" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-Au Milieu de Nulle Part Chambres au lac du Der', 'tel:0667367493')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0667367493" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-Au Milieu de Nulle Part Chambres au lac du Der', 'tel:0667367493')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.au-milieu-de-nulle-part.com/fr" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Au Milieu de Nulle Part Chambres au lac du Der', 'https://www.au-milieu-de-nulle-part.com/fr')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.au-milieu-de-nulle-part.com/fr" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Au Milieu de Nulle Part Chambres au lac du Der', 'https://www.au-milieu-de-nulle-part.com/fr')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.57164, 4.67524], this); trackClick('Hébergements Gîtes-Liste-carte-Au Milieu de Nulle Part Chambres au lac du Der', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.57164, 4.67524], this); trackClick('Hébergements Gîtes-Liste-carte-Au Milieu de Nulle Part Chambres au lac du Der', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Au Milieu de Nulle Part Chambres au lac du Der'); trackClick('Hébergements Gîtes-Liste-photos-Au Milieu de Nulle Part Chambres au lac du Der', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Un site d&#039;exception en pleine nature avec différent type de logements                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Au Milieu de Nulle Part Chambres au lac du Der" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Maison du lac">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Maison du lac</h4>
                                                <p>🗺️ 7 chemin de la Côté Saint-Pierre<br>51290 Ecollement</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/maisons-du-lac-ecollemont.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Maison du lac', 'https://www.booking.com/hotel/fr/maisons-du-lac-ecollemont.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/maisons-du-lac-ecollemont.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Maison du lac', 'https://www.booking.com/hotel/fr/maisons-du-lac-ecollemont.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.619528, 4.73381], this); trackClick('Hébergements Gîtes-Liste-carte-Maison du lac', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.619528, 4.73381], this); trackClick('Hébergements Gîtes-Liste-carte-Maison du lac', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Maison du lac'); trackClick('Hébergements Gîtes-Liste-photos-Maison du lac', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Maison de 200m² avec jardin et parking                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Maison du lac" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Le Québec">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Le Québec</h4>
                                                <p>🗺️ 1C rue janson<br>51290 Arrigny</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/le-quebec.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Le Québec', 'https://www.booking.com/hotel/fr/le-quebec.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/le-quebec.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Le Québec', 'https://www.booking.com/hotel/fr/le-quebec.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.624092, 4.708123], this); trackClick('Hébergements Gîtes-Liste-carte-Le Québec', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.624092, 4.708123], this); trackClick('Hébergements Gîtes-Liste-carte-Le Québec', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Le Québec'); trackClick('Hébergements Gîtes-Liste-photos-Le Québec', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Maison de 55m² avec Jardin - Restaurant - Bar                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Le Québec" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="La Plume">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 La Plume</h4>
                                                <p>🗺️ 1 rue janson<br>51290 Arrigny</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/la-plume-arrigny1.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-La Plume', 'https://www.booking.com/hotel/fr/la-plume-arrigny1.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/la-plume-arrigny1.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-La Plume', 'https://www.booking.com/hotel/fr/la-plume-arrigny1.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.624099, 4.708130], this); trackClick('Hébergements Gîtes-Liste-carte-La Plume', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.624099, 4.708130], this); trackClick('Hébergements Gîtes-Liste-carte-La Plume', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'La Plume'); trackClick('Hébergements Gîtes-Liste-photos-La Plume', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Appartement de 40m² avec jardin équipé barbecue                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="La Plume" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Le Deroscope">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Le Deroscope</h4>
                                                <p>🗺️ 14 grande rue sur Blaise<br>51290 Arrigny</p>
                                                <p>📞 0326621715</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0326621715" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-Le Deroscope', 'tel:0326621715')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0326621715" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-Le Deroscope', 'tel:0326621715')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.lederoscope.fr/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Le Deroscope', 'https://www.lederoscope.fr/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.lederoscope.fr/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Le Deroscope', 'https://www.lederoscope.fr/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.62566, 4.71046], this); trackClick('Hébergements Gîtes-Liste-carte-Le Deroscope', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.62566, 4.71046], this); trackClick('Hébergements Gîtes-Liste-carte-Le Deroscope', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Le Deroscope'); trackClick('Hébergements Gîtes-Liste-photos-Le Deroscope', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Maison de vacance de 150m² avec terrasse, barbecue - Parking                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Le Deroscope" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Gîte des bulles">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Gîte des bulles</h4>
                                                <p>🗺️ 7 rue qui boue Bailly-le-Franc<br>10330 Bailly-le-Franc</p>
                                                <p>📞 0619208165</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0619208165" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-Gîte des bulles', 'tel:0619208165')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0619208165" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-Gîte des bulles', 'tel:0619208165')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.lacduder.com/offres/gite-des-bulles-bailly-le-franc-fr-5521588/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Gîte des bulles', 'https://www.lacduder.com/offres/gite-des-bulles-bailly-le-franc-fr-5521588/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.lacduder.com/offres/gite-des-bulles-bailly-le-franc-fr-5521588/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Gîte des bulles', 'https://www.lacduder.com/offres/gite-des-bulles-bailly-le-franc-fr-5521588/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.52263, 4.65805], this); trackClick('Hébergements Gîtes-Liste-carte-Gîte des bulles', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.52263, 4.65805], this); trackClick('Hébergements Gîtes-Liste-carte-Gîte des bulles', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Gîte des bulles'); trackClick('Hébergements Gîtes-Liste-photos-Gîte des bulles', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Maison rénovée avec piscine partagée                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Gîte des bulles" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Les Piafs du Der 2">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Les Piafs du Der 2</h4>
                                                <p>🗺️ 1 rue de la Pierre Levée<br>10330 Joncreuil</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/les-piafs-du-der-2.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Les Piafs du Der 2', 'https://www.booking.com/hotel/fr/les-piafs-du-der-2.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/les-piafs-du-der-2.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Les Piafs du Der 2', 'https://www.booking.com/hotel/fr/les-piafs-du-der-2.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.522577, 4.61346], this); trackClick('Hébergements Gîtes-Liste-carte-Les Piafs du Der 2', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.522577, 4.61346], this); trackClick('Hébergements Gîtes-Liste-carte-Les Piafs du Der 2', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Les Piafs du Der 2'); trackClick('Hébergements Gîtes-Liste-photos-Les Piafs du Der 2', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Maison équipé d&#039;une piscine extérieur                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Les Piafs du Der 2" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Gîte Le Courlis">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Gîte Le Courlis</h4>
                                                <p>🗺️ 10 place de l'église<br>51290 Outines</p>
                                                <p>📞 0611447412</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0611447412" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-Gîte Le Courlis', 'tel:0611447412')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0611447412" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-Gîte Le Courlis', 'tel:0611447412')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.clevacances.com/fr/hebergement/37775-gite-le-courlis-5-personnes-proche-lac-du-der-en-champagne" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Gîte Le Courlis', 'https://www.clevacances.com/fr/hebergement/37775-gite-le-courlis-5-personnes-proche-lac-du-der-en-champagne')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.clevacances.com/fr/hebergement/37775-gite-le-courlis-5-personnes-proche-lac-du-der-en-champagne" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Gîte Le Courlis', 'https://www.clevacances.com/fr/hebergement/37775-gite-le-courlis-5-personnes-proche-lac-du-der-en-champagne')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.55463, 4.65061], this); trackClick('Hébergements Gîtes-Liste-carte-Gîte Le Courlis', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.55463, 4.65061], this); trackClick('Hébergements Gîtes-Liste-carte-Gîte Le Courlis', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Gîte Le Courlis'); trackClick('Hébergements Gîtes-Liste-photos-Gîte Le Courlis', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Maison de 98m² rénovée avec petit-déjeuner                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Gîte Le Courlis" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Les Hirondelles">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Les Hirondelles</h4>
                                                <p>🗺️ rue de l'Eglise<br>52220 Puellemontier</p>
                                                <p>📞 0617930485</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0617930485" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-Les Hirondelles', 'tel:0617930485')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0617930485" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-Les Hirondelles', 'tel:0617930485')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/les-hirondelles-rives-dervoises.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Les Hirondelles', 'https://www.booking.com/hotel/fr/les-hirondelles-rives-dervoises.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/les-hirondelles-rives-dervoises.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Les Hirondelles', 'https://www.booking.com/hotel/fr/les-hirondelles-rives-dervoises.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.49490, 4.70082], this); trackClick('Hébergements Gîtes-Liste-carte-Les Hirondelles', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.49490, 4.70082], this); trackClick('Hébergements Gîtes-Liste-carte-Les Hirondelles', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Les Hirondelles'); trackClick('Hébergements Gîtes-Liste-photos-Les Hirondelles', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Maison de 160m² avec jardin et barbecue - Parking                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Les Hirondelles" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="La Grue Cendrée">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 La Grue Cendrée</h4>
                                                <p>🗺️ 3 rue de l'Eglise<br>52220 Puellemontier</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/la-grue-cendree-les-gites-du-der.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-La Grue Cendrée', 'https://www.booking.com/hotel/fr/la-grue-cendree-les-gites-du-der.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/la-grue-cendree-les-gites-du-der.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-La Grue Cendrée', 'https://www.booking.com/hotel/fr/la-grue-cendree-les-gites-du-der.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.494957, 4.70063], this); trackClick('Hébergements Gîtes-Liste-carte-La Grue Cendrée', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.494957, 4.70063], this); trackClick('Hébergements Gîtes-Liste-carte-La Grue Cendrée', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'La Grue Cendrée'); trackClick('Hébergements Gîtes-Liste-photos-La Grue Cendrée', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Maison anciènne rénovée 100m avec terrasse et barbecue                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="La Grue Cendrée" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Gîte les Oiseaux">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Gîte les Oiseaux</h4>
                                                <p>🗺️ 6 rue du Four<br>52130 Louvemont</p>
                                                <p>📞 0684238278</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0684238278" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-Gîte les Oiseaux', 'tel:0684238278')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0684238278" class="btn-call" onclick="trackClick('Hébergements Gîtes-Liste-Appeler-Gîte les Oiseaux', 'tel:0684238278')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.gitesetcouvertdeslacs.com/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Gîte les Oiseaux', 'https://www.gitesetcouvertdeslacs.com/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.gitesetcouvertdeslacs.com/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Gîte les Oiseaux', 'https://www.gitesetcouvertdeslacs.com/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.55233, 4.91160], this); trackClick('Hébergements Gîtes-Liste-carte-Gîte les Oiseaux', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.55233, 4.91160], this); trackClick('Hébergements Gîtes-Liste-carte-Gîte les Oiseaux', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Gîte les Oiseaux'); trackClick('Hébergements Gîtes-Liste-photos-Gîte les Oiseaux', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Très grand et magnifique gîte de 360 avec Piscine                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Gîte les Oiseaux" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="La petite maison">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 La petite maison</h4>
                                                <p>🗺️ 3 Grande rue<br>52130 Louvemont</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/la-petite-maison-louvemont1.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-La petite maison', 'https://www.booking.com/hotel/fr/la-petite-maison-louvemont1.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/la-petite-maison-louvemont1.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-La petite maison', 'https://www.booking.com/hotel/fr/la-petite-maison-louvemont1.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.550981, 4.909879], this); trackClick('Hébergements Gîtes-Liste-carte-La petite maison', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.550981, 4.909879], this); trackClick('Hébergements Gîtes-Liste-carte-La petite maison', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'La petite maison'); trackClick('Hébergements Gîtes-Liste-photos-La petite maison', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Maison de 80m² avec terrasse et barbecue - Parking                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="La petite maison" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Nuit Champenoise Tout Confort">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Nuit Champenoise Tout Confort</h4>
                                                <p>🗺️ 16 rue du Cimetière<br>52220 Louze</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/nuit-champenoise-tout-confort.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Nuit Champenoise Tout Confort', 'https://www.booking.com/hotel/fr/nuit-champenoise-tout-confort.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/nuit-champenoise-tout-confort.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Nuit Champenoise Tout Confort', 'https://www.booking.com/hotel/fr/nuit-champenoise-tout-confort.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.436615, 4.723844], this); trackClick('Hébergements Gîtes-Liste-carte-Nuit Champenoise Tout Confort', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.436615, 4.723844], this); trackClick('Hébergements Gîtes-Liste-carte-Nuit Champenoise Tout Confort', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Nuit Champenoise Tout Confort'); trackClick('Hébergements Gîtes-Liste-photos-Nuit Champenoise Tout Confort', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Maison tout confort offre une vue sur le jardin                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Nuit Champenoise Tout Confort" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="De brique &amp; de bois">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 De brique &amp; de bois</h4>
                                                <p>🗺️ 32 grande rue<br>52220 Louze</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/de-brique-amp-de-bois-lac-du-der.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-De brique &amp; de bois', 'https://www.booking.com/hotel/fr/de-brique-amp-de-bois-lac-du-der.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/de-brique-amp-de-bois-lac-du-der.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-De brique & de bois', 'https://www.booking.com/hotel/fr/de-brique-amp-de-bois-lac-du-der.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.433092, 4.721351], this); trackClick('Hébergements Gîtes-Liste-carte-De brique &amp; de bois', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.433092, 4.721351], this); trackClick('Hébergements Gîtes-Liste-carte-De brique & de bois', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'De brique &amp; de bois'); trackClick('Hébergements Gîtes-Liste-photos-De brique &amp; de bois', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Maison de 120m² avec jardin et parking                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="De brique &amp; de bois" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="La Gilbertine">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 La Gilbertine</h4>
                                                <p>🗺️ 10 rue d'Enson la ville<br>52220 Louze</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/la-gilbertine.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-La Gilbertine', 'https://www.booking.com/hotel/fr/la-gilbertine.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/la-gilbertine.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-La Gilbertine', 'https://www.booking.com/hotel/fr/la-gilbertine.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.435673, 4.71602], this); trackClick('Hébergements Gîtes-Liste-carte-La Gilbertine', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.435673, 4.71602], this); trackClick('Hébergements Gîtes-Liste-carte-La Gilbertine', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'La Gilbertine'); trackClick('Hébergements Gîtes-Liste-photos-La Gilbertine', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Maison climatisée de 100m²                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="La Gilbertine" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Au Passage des Grues">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Au Passage des Grues</h4>
                                                <p>🗺️ 1 rue des salzards<br>51290 Drosnay</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/au-passage-des-grues.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Au Passage des Grues', 'https://www.booking.com/hotel/fr/au-passage-des-grues.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/au-passage-des-grues.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Au Passage des Grues', 'https://www.booking.com/hotel/fr/au-passage-des-grues.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.574724, 4.613546], this); trackClick('Hébergements Gîtes-Liste-carte-Au Passage des Grues', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.574724, 4.613546], this); trackClick('Hébergements Gîtes-Liste-carte-Au Passage des Grues', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Au Passage des Grues'); trackClick('Hébergements Gîtes-Liste-photos-Au Passage des Grues', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>L’établissement sert un petit-déjeuner continental ou sans gluten                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Au Passage des Grues" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="La Fuste des Garceaux">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 La Fuste des Garceaux</h4>
                                                <p>🗺️ 1 rue de la Sablière  Lieu-dit les Garceaux<br>51300 Orconte</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/la-fuste-des-garceaux-orconte.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-La Fuste des Garceaux', 'https://www.booking.com/hotel/fr/la-fuste-des-garceaux-orconte.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/la-fuste-des-garceaux-orconte.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-La Fuste des Garceaux', 'https://www.booking.com/hotel/fr/la-fuste-des-garceaux-orconte.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.66785, 4.77992], this); trackClick('Hébergements Gîtes-Liste-carte-La Fuste des Garceaux', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.66785, 4.77992], this); trackClick('Hébergements Gîtes-Liste-carte-La Fuste des Garceaux', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'La Fuste des Garceaux'); trackClick('Hébergements Gîtes-Liste-photos-La Fuste des Garceaux', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Maison avec jardin et parking                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="La Fuste des Garceaux" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Chambre d'hôte lac du Der orconiat">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Chambre d'hôte lac du Der orconiat</h4>
                                                <p>🗺️ 1 rue Henri Robert<br>51300 Orconte</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/lac-du-der-orconiat.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Chambre d\'hôte lac du Der orconiat', 'https://www.booking.com/hotel/fr/lac-du-der-orconiat.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/lac-du-der-orconiat.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Chambre d\'hôte lac du Der orconiat', 'https://www.booking.com/hotel/fr/lac-du-der-orconiat.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.669804, 4.735698], this); trackClick('Hébergements Gîtes-Liste-carte-Chambre d\'hôte lac du Der orconiat', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.669804, 4.735698], this); trackClick('Hébergements Gîtes-Liste-carte-Chambre d\'hôte lac du Der orconiat', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Chambre d&#039;hôte lac du Der orconiat'); trackClick('Hébergements Gîtes-Liste-photos-Chambre d&#039;hôte lac du Der orconiat', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Chambre d hôte avec jardin et terrasse - Parking                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Chambre d'hôte lac du Der orconiat" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Appartement chez Lisa">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Appartement chez Lisa</h4>
                                                <p>🗺️ 7 rue de la Fontaine Saint-Nicolas<br>52130 Louvemont</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/appartement-chez-lisa.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Appartement chez Lisa', 'https://www.booking.com/hotel/fr/appartement-chez-lisa.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/appartement-chez-lisa.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Appartement chez Lisa', 'https://www.booking.com/hotel/fr/appartement-chez-lisa.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.544903, 4.923722], this); trackClick('Hébergements Gîtes-Liste-carte-Appartement chez Lisa', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.544903, 4.923722], this); trackClick('Hébergements Gîtes-Liste-carte-Appartement chez Lisa', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Appartement chez Lisa'); trackClick('Hébergements Gîtes-Liste-photos-Appartement chez Lisa', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Appartement de 80m² avec parking                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Appartement chez Lisa" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Le Chatelier">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Le Chatelier</h4>
                                                <p>🗺️ 1 le Chatelier<br>52130 Louvemont</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/le-chatelier.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Le Chatelier', 'https://www.booking.com/hotel/fr/le-chatelier.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/le-chatelier.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Le Chatelier', 'https://www.booking.com/hotel/fr/le-chatelier.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.53648, 4.91444], this); trackClick('Hébergements Gîtes-Liste-carte-Le Chatelier', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.53648, 4.91444], this); trackClick('Hébergements Gîtes-Liste-carte-Le Chatelier', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Le Chatelier'); trackClick('Hébergements Gîtes-Liste-photos-Le Chatelier', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Très belle demeure de 180m² avec piscine                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Le Chatelier" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="La P'tite Ambrièroise">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 La P'tite Ambrièroise</h4>
                                                <p>🗺️ 19 rue de Laneuville<br>51290 Ambrières</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/la-p-tite-ambrieroise.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-La P\'tite Ambrièroise', 'https://www.booking.com/hotel/fr/la-p-tite-ambrieroise.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/la-p-tite-ambrieroise.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-La P\'tite Ambrièroise', 'https://www.booking.com/hotel/fr/la-p-tite-ambrieroise.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.632664, 4.840884], this); trackClick('Hébergements Gîtes-Liste-carte-La P\'tite Ambrièroise', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.632664, 4.840884], this); trackClick('Hébergements Gîtes-Liste-carte-La P\'tite Ambrièroise', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'La P&#039;tite Ambrièroise'); trackClick('Hébergements Gîtes-Liste-photos-La P&#039;tite Ambrièroise', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Maison de 70m² avec térrasse et barbecue - Parking                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="La P'tite Ambrièroise" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Exclusive Lodge overlooking private lake">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Exclusive Lodge overlooking private lake</h4>
                                                <p>🗺️ 22 rue de l'Héronne<br>52220 Laneuville-à-Rémy</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/exclusive-lodge-overlooking-private-lake.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Exclusive Lodge overlooking private lake', 'https://www.booking.com/hotel/fr/exclusive-lodge-overlooking-private-lake.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/exclusive-lodge-overlooking-private-lake.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Exclusive Lodge overlooking private lake', 'https://www.booking.com/hotel/fr/exclusive-lodge-overlooking-private-lake.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.478403, 4.885908], this); trackClick('Hébergements Gîtes-Liste-carte-Exclusive Lodge overlooking private lake', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.478403, 4.885908], this); trackClick('Hébergements Gîtes-Liste-carte-Exclusive Lodge overlooking private lake', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Exclusive Lodge overlooking private lake'); trackClick('Hébergements Gîtes-Liste-photos-Exclusive Lodge overlooking private lake', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Chalet de 100m² au bord d&#039;un étang magnifique                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Exclusive Lodge overlooking private lake" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Chez Monique">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Chez Monique</h4>
                                                <p>🗺️ 12 Petite rue<br>52100 Sapignicourt</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/chez-monique-sapignicourt.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Chez Monique', 'https://www.booking.com/hotel/fr/chez-monique-sapignicourt.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/chez-monique-sapignicourt.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Chez Monique', 'https://www.booking.com/hotel/fr/chez-monique-sapignicourt.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.651315, 4.81413], this); trackClick('Hébergements Gîtes-Liste-carte-Chez Monique', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.651315, 4.81413], this); trackClick('Hébergements Gîtes-Liste-carte-Chez Monique', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Chez Monique'); trackClick('Hébergements Gîtes-Liste-photos-Chez Monique', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Maison de 100m² avec parking                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Chez Monique" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Chez Brigitte et Francis">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Chez Brigitte et Francis</h4>
                                                <p>🗺️ 14 Grande rue<br>52100 Perthes</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/chez-brigitte-et-francis-perthes1.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Chez Brigitte et Francis', 'https://www.booking.com/hotel/fr/chez-brigitte-et-francis-perthes1.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/chez-brigitte-et-francis-perthes1.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Chez Brigitte et Francis', 'https://www.booking.com/hotel/fr/chez-brigitte-et-francis-perthes1.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.656139, 4.822858], this); trackClick('Hébergements Gîtes-Liste-carte-Chez Brigitte et Francis', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.656139, 4.822858], this); trackClick('Hébergements Gîtes-Liste-carte-Chez Brigitte et Francis', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Chez Brigitte et Francis'); trackClick('Hébergements Gîtes-Liste-photos-Chez Brigitte et Francis', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Maison de 45m² restaurée - Parking                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Chez Brigitte et Francis" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Maison chaleureuse à La Porte-du-Der">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Maison chaleureuse à La Porte-du-Der</h4>
                                                <p>🗺️ 5 bis rue Saint-Barthélémy<br>52220 Robert-Magny</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/maison-de-2-chambres-avec-jardin-clos-et-wifi-a-la-porte-du-der.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Maison chaleureuse à La Porte-du-Der', 'https://www.booking.com/hotel/fr/maison-de-2-chambres-avec-jardin-clos-et-wifi-a-la-porte-du-der.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/maison-de-2-chambres-avec-jardin-clos-et-wifi-a-la-porte-du-der.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Maison chaleureuse à La Porte-du-Der', 'https://www.booking.com/hotel/fr/maison-de-2-chambres-avec-jardin-clos-et-wifi-a-la-porte-du-der.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.461299, 4.84731], this); trackClick('Hébergements Gîtes-Liste-carte-Maison chaleureuse à La Porte-du-Der', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.461299, 4.84731], this); trackClick('Hébergements Gîtes-Liste-carte-Maison chaleureuse à La Porte-du-Der', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Maison chaleureuse à La Porte-du-Der'); trackClick('Hébergements Gîtes-Liste-photos-Maison chaleureuse à La Porte-du-Der', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Maison anciènne rénovée 100m avec terrasse et barbecue                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Maison chaleureuse à La Porte-du-Der" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="Maison Campagne">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 Maison Campagne</h4>
                                                <p>🗺️ <br>52100 Hallignicourt</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/maison-campagne-hallignicourt.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Maison Campagne', 'https://www.booking.com/hotel/fr/maison-campagne-hallignicourt.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/maison-campagne-hallignicourt.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Maison Campagne', 'https://www.booking.com/hotel/fr/maison-campagne-hallignicourt.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.645091, 4.872765], this); trackClick('Hébergements Gîtes-Liste-carte-Maison Campagne', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.645091, 4.872765], this); trackClick('Hébergements Gîtes-Liste-carte-Maison Campagne', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Maison Campagne'); trackClick('Hébergements Gîtes-Liste-photos-Maison Campagne', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Maison de 90m² *** - Parking                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Maison Campagne" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="classic-item" data-name="La Baroud'ER">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏡 La Baroud'ER</h4>
                                                <p>🗺️ 27 rue de la Motte<br>52130 Voillecomte</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/la-carabol-der.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-La Baroud\'ER', 'https://www.booking.com/hotel/fr/la-carabol-der.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/la-carabol-der.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-La Baroud\'ER', 'https://www.booking.com/hotel/fr/la-carabol-der.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.505642, 4.876931], this); trackClick('Hébergements Gîtes-Liste-carte-La Baroud\'ER', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.505642, 4.876931], this); trackClick('Hébergements Gîtes-Liste-carte-La Baroud\'ER', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'La Baroud&#039;ER'); trackClick('Hébergements Gîtes-Liste-photos-La Baroud&#039;ER', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Maison avec jardin, barbecue et parking                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="La Baroud'ER" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
                        
            <!-- DÉMO EN DUR pour chaque catégorie -->
                        <!--
            <div class="classic-item" data-name="Gite Demo Les Oiseaux du Lac">
                <div class="restaurant-cardDemo" style="border-left: 5px solid #f8fc04;">
                    <div class="restaurant-card-content">
                        <h4>🏡 Gîte DÉMO - Les Oiseaux du Lac</h4>
                        <p style="color: #0891b2; font-weight: 600; text-align: center;">
                            Capacité: 6 personnes - Maison de charme rénovée
                        </p> 
                        <p>🗺️ Route du Lac<br>51290 Sainte-Marie-du-Lac-Nuisement</p>
                        <p>📞 xx xx xx xx xx</p>
                        <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                            <a href="tel:+33123" class="btn-call">📞 Appeler</a>
                            <a href="../contact/contact.html" target="_blank" class="btn-website">🌐 Contactez-nous</a>
                            <button onclick="zoomToRestaurant([48.5654, 4.7412], this); trackClick('Hébergements Gîtes-Liste-carte-Gîte DEMO', '#')" class="btn-map">📍 Carte</button>
                            <button onclick="openMenuModal('menu1.jpg', 'Gîte DÉMO')" class="btn-menu">📋 Photos</button>
                        </div>
                        <p style="margin-top: 10px; font-size: 12px; color: #64748b; font-style: italic;">
                            💡 Cet établissement démontre les options disponibles - Contactez-nous pour un RDV !
                        </p>
                    </div>
                    <div class="restaurant-card-images">
                        <div class="restaurant-images">
                            <img src="Votre_pub.jpg" alt="Gîte DÉMO" class="single-image">
                        </div>
                    </div>
                </div>
            </div>
            -->
            <!-- DEMO GITE -->
                        <div class="classic-item" data-name="Gite Demo Les Oiseaux du Lac">
                <div class="restaurant-cardDemo" style="border-left: 5px solid #f8fc04;">
                    <div class="restaurant-card-content">
                        <h4>🏡 Gîte DÉMO - Carrousel Photos + Bouton Menu</h4>
                        <p style="color: #0891b2; font-weight: 600; text-align: center;">
                            Spécialité: ⭐⭐⭐ A partir de xx€
                        </p> 
                        <p>🗺️ 1 Avenue du Lac<br>51290 Lac du Der</p>
                        <p>📞 xx xx xx xx xx</p>
                        <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                            <a href="tel:+33123" class="btn-call">📞 Appeler</a>
                            <a href="../contact/contact.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Gîtes-Liste-Site-Gite DEMO', '#')">🌐 Contactez-nous</a>
                            <button onclick="zoomToRestaurant([48.553638, 4.767266], this); trackClick('Hébergements Gîtes-Liste-carte-Gite DEMO', '#')" class="btn-map">📍 Carte</button>
                            <button onclick="openMenuModal('menu1.jpg', 'Gite DÉMO'); trackClick('Hébergements Gîtes-Liste-menu-Gite DEMO', '#')" class="btn-menu">📋 Options</button>
                        </div>
                       <p style="margin-top: 10px; font-size: 12px; color: #64748b; font-style: italic;">
                            💡 Cet établissement démontre l'option carrousel photo (3 images) Plus le menu OPTION</p>
                        <table style="width:100%; margin-top:10px; font-size:14px; color:#64748b; font-style:italic; border-collapse:collapse;">
    <tr>
        <td style="padding:4px 10px;">🍽️ Restaurant</td>
        <td style="padding:4px 10px;">🥐 ☕ Croissants et petit déjeuner</td>
    </tr>
    <tr>
        <td style="padding:4px 10px;">⭐ Vous avez des étoiles ?</td>
        <td style="padding:4px 10px;">♿ PMR</td>

    </tr>
    <tr>
        <td style="padding:4px 10px;">🅿️ Parking gratuit</td>
        <td style="padding:4px 10px;">🔋 Recharge véhicule</td>
    </tr>
    <tr>
        <td style="padding:4px 10px;">📶 Wifi</td>
        <td style="padding:4px 10px;">🐾 Chiens acceptés</td>
    </tr>
    <tr>
        <td style="padding:4px 10px;">🛍️ Proche magasins</td>
        <td style="padding:4px 10px;">🛒 Proche épicerie</td>
    </tr>
    <tr>
        <td style="padding:4px 10px;">🚲 Vélo disponible</td>
        <td style="padding:4px 10px;">🦆 Proche d'un site d'observation</td>
    </tr>
    <tr>
        <td style="padding:4px 10px;">🎤 Karaoké</td>
        <td style="padding:4px 10px;">… et bien d'autres</td>
    </tr>
</table>
                    </div>
                    <div class="restaurant-card-images">
                        <div class="restaurant-images" data-carousel="demo-gite">
                            <button class="carousel-nav prev" onclick="changeSlide('demo-gite', -1)">❮</button>
                            <button class="carousel-nav next" onclick="changeSlide('demo-gite', 1)">❯</button>
                            <div class="carousel-container">
                                <div class="carousel-slide">
                                    <img src="Votre_pub2.jpg" alt="Photo 1">
                                </div>
                                <div class="carousel-slide">
                                    <img src="Votre_pub3.jpg" alt="Photo 2">
                                </div>
                                <div class="carousel-slide">
                                    <img src="Votre_pub.jpg" alt="Photo 3">
                                </div>
                            </div>
                            <div class="carousel-controls">
                                <span class="carousel-dot active" onclick="goToSlide('demo-gite', 0)"></span>
                                <span class="carousel-dot" onclick="goToSlide('demo-gite', 1)"></span>
                                <span class="carousel-dot" onclick="goToSlide('demo-gite', 2)"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- PUBS -->
            <div class="ad-card">
                <p>🌟 <strong>PUB :</strong> Votre établissement ici ! <a href="../contact/contact_pro.html" style="color:#ef4444;">Contactez-nous</a></p>
            </div>
        </div>
    </div>
    
        <div id="debut-listes"></div>
    <!-- ========== LISTE CAMPINGS ========== -->
    <div id="camping-list-container" style="display: none; margin-top: 20px;">
        <div class="map-title">
            <div class="map-title-content" >
                <h2>🏕️ Liste des Campings</h2>
                <div style="display: flex; gap: 10px; align-items: center;">
                    <input type="text" id="searchBarCamping" placeholder="Rechercher..." style="flex: 1;" onclick="trackClick('Hébergements Campings Recherche dans liste', '#')">
                    <button class="btn-clear-filter" onclick="clearSearchFilterCamping(); trackClick('Hébergements Campings Effacer recherche', '#')">🔄 Effacer filtre</button>
                </div>
            </div>
        </div>

        <div id="dynamic-list-camping">
            <div class="camping-item" data-name="Camping du Buisson">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏕️ Camping du Buisson</h4>
                                                <p>🗺️ Lieu dit, Le Buisson<br>52130 Louvemont</p>
                                                <p>📞 0684979331</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0684979331" class="btn-call" onclick="trackClick('Hébergements Campings-Liste-Appeler-Camping du Buisson', 'tel:0684979331')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0684979331" class="btn-call" onclick="trackClick('Hébergements Campings-Liste-Appeler-Camping du Buisson', 'tel:0684979331')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.camping-lac-du-der.com/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Campings-Liste-Site-Camping du Buisson', 'https://www.camping-lac-du-der.com/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.camping-lac-du-der.com/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Campings-Liste-Site-Camping du Buisson', 'https://www.camping-lac-du-der.com/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.542264, 4.908199], this); trackClick('Hébergements Campings-Liste-carte-Camping du Buisson', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.542264, 4.908199], this); trackClick('Hébergements Campings-Liste-carte-Camping du Buisson', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Camping du Buisson'); trackClick('Hébergements Campings-Liste-photos-Camping du Buisson', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Camping Nature 4 Etoiles avec Piscine chauffée - Aire de Jeux - Accrobranche                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Camping du Buisson" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="camping-item" data-name="Camping sur la Route du Der">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏕️ Camping sur la Route du Der</h4>
                                                <p>🗺️ D13<br>51290 Moncetz-l'Abbaye</p>
                                                <p>📞 0326733663</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0326733663" class="btn-call" onclick="trackClick('Hébergements Campings-Liste-Appeler-Camping sur la Route du Der', 'tel:0326733663')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0326733663" class="btn-call" onclick="trackClick('Hébergements Campings-Liste-Appeler-Camping sur la Route du Der', 'tel:0326733663')">📞 Appeler</a>
                                                                                    <!-- <a href="https://sur-la-route-du-der.fr/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Campings-Liste-Site-Camping sur la Route du Der', 'https://sur-la-route-du-der.fr/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://sur-la-route-du-der.fr/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Campings-Liste-Site-Camping sur la Route du Der', 'https://sur-la-route-du-der.fr/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.65164, 4.66600], this); trackClick('Hébergements Campings-Liste-carte-Camping sur la Route du Der', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.65164, 4.66600], this); trackClick('Hébergements Campings-Liste-carte-Camping sur la Route du Der', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Camping sur la Route du Der'); trackClick('Hébergements Campings-Liste-photos-Camping sur la Route du Der', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Camping original &amp; familial 3 Etoiles - Aire de Jeux - Pétanque - Au bord de l&#039;etang                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Camping sur la Route du Der" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="camping-item" data-name="Camping Swin Golf">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏕️ Camping Swin Golf</h4>
                                                <p>🗺️ 14 rue de Saint-Rémy-en-Bouzemont<br>51290 Arrigny</p>
                                                <p>📞 0326726034</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0326726034" class="btn-call" onclick="trackClick('Hébergements Campings-Liste-Appeler-Camping Swin Golf', 'tel:0326726034')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0326726034" class="btn-call" onclick="trackClick('Hébergements Campings-Liste-Appeler-Camping Swin Golf', 'tel:0326726034')">📞 Appeler</a>
                                                                                    <!-- <a href="https://pages.perso.orange.fr/camping-swin-golf" target="_blank" class="btn-website" onclick="trackClick('Hébergements Campings-Liste-Site-Camping Swin Golf', 'https://pages.perso.orange.fr/camping-swin-golf')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://pages.perso.orange.fr/camping-swin-golf" target="_blank" class="btn-website" onclick="trackClick('Hébergements Campings-Liste-Site-Camping Swin Golf', 'https://pages.perso.orange.fr/camping-swin-golf')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.62443, 4.70421], this); trackClick('Hébergements Campings-Liste-carte-Camping Swin Golf', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.62443, 4.70421], this); trackClick('Hébergements Campings-Liste-carte-Camping Swin Golf', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Camping Swin Golf'); trackClick('Hébergements Campings-Liste-photos-Camping Swin Golf', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Petit Camping à l&#039;anciènne                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Camping Swin Golf" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="camping-item" data-name="Camping de la forêt">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏕️ Camping de la forêt</h4>
                                                <p>🗺️ Presqu'ile de Larzicourt<br>51290 Arrigny</p>
                                                <p>📞 0326740023</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0326740023" class="btn-call" onclick="trackClick('Hébergements Campings-Liste-Appeler-Camping de la forêt', 'tel:0326740023')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0326740023" class="btn-call" onclick="trackClick('Hébergements Campings-Liste-Appeler-Camping de la forêt', 'tel:0326740023')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.campingdelaforet.com/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Campings-Liste-Site-Camping de la forêt', 'https://www.campingdelaforet.com/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.campingdelaforet.com/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Campings-Liste-Site-Camping de la forêt', 'https://www.campingdelaforet.com/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.60424, 4.71489], this); trackClick('Hébergements Campings-Liste-carte-Camping de la forêt', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.60424, 4.71489], this); trackClick('Hébergements Campings-Liste-carte-Camping de la forêt', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Camping de la forêt'); trackClick('Hébergements Campings-Liste-photos-Camping de la forêt', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Camping 3 Etoiles avec piscine au bord du Lac du Der proche de la plage                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Camping de la forêt" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="camping-item" data-name="Camping de la Cornée du Der">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏕️ Camping de la Cornée du Der</h4>
                                                <p>🗺️ 1 route de la Cornée - Petites Côtes<br>51290 Sainte-Marie-du-Lac-Nuisement</p>
                                                <p>📞 0326726623</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0326726623" class="btn-call" onclick="trackClick('Hébergements Campings-Liste-Appeler-Camping de la Cornée du Der', 'tel:0326726623')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0326726623" class="btn-call" onclick="trackClick('Hébergements Campings-Liste-Appeler-Camping de la Cornée du Der', 'tel:0326726623')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.camping-cornee-lac-du-der.com/fr/index" target="_blank" class="btn-website" onclick="trackClick('Hébergements Campings-Liste-Site-Camping de la Cornée du Der', 'https://www.camping-cornee-lac-du-der.com/fr/index')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.camping-cornee-lac-du-der.com/fr/index" target="_blank" class="btn-website" onclick="trackClick('Hébergements Campings-Liste-Site-Camping de la Cornée du Der', 'https://www.camping-cornee-lac-du-der.com/fr/index')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.59935, 4.79529], this); trackClick('Hébergements Campings-Liste-carte-Camping de la Cornée du Der', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.59935, 4.79529], this); trackClick('Hébergements Campings-Liste-carte-Camping de la Cornée du Der', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Camping de la Cornée du Der'); trackClick('Hébergements Campings-Liste-photos-Camping de la Cornée du Der', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Au bord du Lac du Der dans un écrin de verdure entre lac et forêt                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Camping de la Cornée du Der" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="camping-item" data-name="Camping Yelloh!">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏕️ Camping Yelloh!</h4>
                                                <p>🗺️ D384<br>52290 Braucourt</p>
                                                <p>📞 0466739739</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0466739739" class="btn-call" onclick="trackClick('Hébergements Campings-Liste-Appeler-Camping Yelloh!', 'tel:0466739739')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0466739739" class="btn-call" onclick="trackClick('Hébergements Campings-Liste-Appeler-Camping Yelloh!', 'tel:0466739739')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.yellohvillage.fr/camping/yelloh_en_champagne" target="_blank" class="btn-website" onclick="trackClick('Hébergements Campings-Liste-Site-Camping Yelloh!', 'https://www.yellohvillage.fr/camping/yelloh_en_champagne')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.yellohvillage.fr/camping/yelloh_en_champagne" target="_blank" class="btn-website" onclick="trackClick('Hébergements Campings-Liste-Site-Camping Yelloh!', 'https://www.yellohvillage.fr/camping/yelloh_en_champagne')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.57190, 4.84845], this); trackClick('Hébergements Campings-Liste-carte-Camping Yelloh!', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.57190, 4.84845], this); trackClick('Hébergements Campings-Liste-carte-Camping Yelloh!', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Camping Yelloh!'); trackClick('Hébergements Campings-Liste-photos-Camping Yelloh!', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Camping 5 Etoiles avec piscine au bord du lac du Der proche de la plage                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Camping Yelloh!" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="camping-item" data-name="Camping de La Presqu'île de Champaubert">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏕️ Camping de La Presqu'île de Champaubert</h4>
                                                <p>🗺️ RD 153<br>52290 Braucourt</p>
                                                <p>📞 0325041320</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0325041320" class="btn-call" onclick="trackClick('Hébergements Campings-Liste-Appeler-Camping de La Presqu\'île de Champaubert', 'tel:0325041320')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0325041320" class="btn-call" onclick="trackClick('Hébergements Campings-Liste-Appeler-Camping de La Presqu\'île de Champaubert', 'tel:0325041320')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.campingpresquilechampaubert.fr/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Campings-Liste-Site-Camping de La Presqu\'île de Champaubert', 'https://www.campingpresquilechampaubert.fr/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.campingpresquilechampaubert.fr/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Campings-Liste-Site-Camping de La Presqu\'île de Champaubert', 'https://www.campingpresquilechampaubert.fr/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.55405, 4.79217], this); trackClick('Hébergements Campings-Liste-carte-Camping de La Presqu\'île de Champaubert', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.55405, 4.79217], this); trackClick('Hébergements Campings-Liste-carte-Camping de La Presqu\'île de Champaubert', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Camping de La Presqu&#039;île de Champaubert'); trackClick('Hébergements Campings-Liste-photos-Camping de La Presqu&#039;île de Champaubert', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Camping au bord du Lac avec piscine, jeux, balade à pieds ou à vélo                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Camping de La Presqu'île de Champaubert" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="camping-item" data-name="Camping de La Plage">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏕️ Camping de La Plage</h4>
                                                <p>🗺️ Suivre station nautique 8 rue de la Cachotte<br>51290 Giffaumont-Champaubert</p>
                                                <p>📞 0665625135</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0665625135" class="btn-call" onclick="trackClick('Hébergements Campings-Liste-Appeler-Camping de La Plage', 'tel:0665625135')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0665625135" class="btn-call" onclick="trackClick('Hébergements Campings-Liste-Appeler-Camping de La Plage', 'tel:0665625135')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.camping-delaplage.fr/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Campings-Liste-Site-Camping de La Plage', 'https://www.camping-delaplage.fr/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.camping-delaplage.fr/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Campings-Liste-Site-Camping de La Plage', 'https://www.camping-delaplage.fr/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.55007, 4.77170], this); trackClick('Hébergements Campings-Liste-carte-Camping de La Plage', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.55007, 4.77170], this); trackClick('Hébergements Campings-Liste-carte-Camping de La Plage', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Camping de La Plage'); trackClick('Hébergements Campings-Liste-photos-Camping de La Plage', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Camping en mobil-homes ou en campingcar près du port - Snack-bar                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Camping de La Plage" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="camping-item" data-name="Le Clos du Vieux Moulin">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏕️ Le Clos du Vieux Moulin</h4>
                                                <p>🗺️ 33 rue du Lac<br>51290 Châtillon-sur-Broué</p>
                                                <p>📞 0326413043</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0326413043" class="btn-call" onclick="trackClick('Hébergements Campings-Liste-Appeler-Le Clos du Vieux Moulin', 'tel:0326413043')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0326413043" class="btn-call" onclick="trackClick('Hébergements Campings-Liste-Appeler-Le Clos du Vieux Moulin', 'tel:0326413043')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.leclosduvieuxmoulin.fr/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Campings-Liste-Site-Le Clos du Vieux Moulin', 'https://www.leclosduvieuxmoulin.fr/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.leclosduvieuxmoulin.fr/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Campings-Liste-Site-Le Clos du Vieux Moulin', 'https://www.leclosduvieuxmoulin.fr/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.55761, 4.70614], this); trackClick('Hébergements Campings-Liste-carte-Le Clos du Vieux Moulin', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.55761, 4.70614], this); trackClick('Hébergements Campings-Liste-carte-Le Clos du Vieux Moulin', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Le Clos du Vieux Moulin'); trackClick('Hébergements Campings-Liste-photos-Le Clos du Vieux Moulin', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Camping à 400m du Lac avec piscine, aire de jeux, pétanque, jeux video - Snack Bar                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Le Clos du Vieux Moulin" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="camping-item" data-name="Camping des Lescheres Wassy">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏕️ Camping des Lescheres Wassy</h4>
                                                <p>🗺️ rue Malarme<br>52130 Wassy</p>
                                                <p>📞 0771609790</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0771609790" class="btn-call" onclick="trackClick('Hébergements Campings-Liste-Appeler-Camping des Lescheres Wassy', 'tel:0771609790')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0771609790" class="btn-call" onclick="trackClick('Hébergements Campings-Liste-Appeler-Camping des Lescheres Wassy', 'tel:0771609790')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.bienvenue-hautemarne.fr/hebergements/wassy-camping-des-lescheres-hpacha051v50a1wy/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Campings-Liste-Site-Camping des Lescheres Wassy', 'https://www.bienvenue-hautemarne.fr/hebergements/wassy-camping-des-lescheres-hpacha051v50a1wy/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.bienvenue-hautemarne.fr/hebergements/wassy-camping-des-lescheres-hpacha051v50a1wy/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Campings-Liste-Site-Camping des Lescheres Wassy', 'https://www.bienvenue-hautemarne.fr/hebergements/wassy-camping-des-lescheres-hpacha051v50a1wy/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.48838, 4.94939], this); trackClick('Hébergements Campings-Liste-carte-Camping des Lescheres Wassy', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.48838, 4.94939], this); trackClick('Hébergements Campings-Liste-carte-Camping des Lescheres Wassy', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Camping des Lescheres Wassy'); trackClick('Hébergements Campings-Liste-photos-Camping des Lescheres Wassy', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Camping non classé très calme placé au bord de l&#039;eau pour la baignade, pêche - Snack                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Camping des Lescheres Wassy" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="camping-item" data-name="Camping La Croix Badeau">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏕️ Camping La Croix Badeau</h4>
                                                <p>🗺️ 6 rue de la Croix Badeau<br>10200 Soulaines-Dhuys</p>
                                                <p>📞 0325272563</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0325272563" class="btn-call" onclick="trackClick('Hébergements Campings-Liste-Appeler-Camping La Croix Badeau', 'tel:0325272563')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0325272563" class="btn-call" onclick="trackClick('Hébergements Campings-Liste-Appeler-Camping La Croix Badeau', 'tel:0325272563')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.croix-badeau.com/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Campings-Liste-Site-Camping La Croix Badeau', 'https://www.croix-badeau.com/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.croix-badeau.com/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Campings-Liste-Site-Camping La Croix Badeau', 'https://www.croix-badeau.com/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.37675, 4.73830], this); trackClick('Hébergements Campings-Liste-carte-Camping La Croix Badeau', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.37675, 4.73830], this); trackClick('Hébergements Campings-Liste-carte-Camping La Croix Badeau', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Camping La Croix Badeau'); trackClick('Hébergements Campings-Liste-photos-Camping La Croix Badeau', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Camping avec piscine. Emplacements pour Caravane, tente ou campingcar -Snack                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Camping La Croix Badeau" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="camping-item" data-name="Camping Nature">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏕️ Camping Nature</h4>
                                                <p>🗺️ 13 rue de l'Evangile<br>51300 Luxémont-et-Villotte</p>
                                                <p>📞 0683428353</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0683428353" class="btn-call" onclick="trackClick('Hébergements Campings-Liste-Appeler-Camping Nature', 'tel:0683428353')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0683428353" class="btn-call" onclick="trackClick('Hébergements Campings-Liste-Appeler-Camping Nature', 'tel:0683428353')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.camping-nature.net/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Campings-Liste-Site-Camping Nature', 'https://www.camping-nature.net/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.camping-nature.net/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Campings-Liste-Site-Camping Nature', 'https://www.camping-nature.net/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.69686, 4.63039], this); trackClick('Hébergements Campings-Liste-carte-Camping Nature', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.69686, 4.63039], this); trackClick('Hébergements Campings-Liste-carte-Camping Nature', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Camping Nature'); trackClick('Hébergements Campings-Liste-photos-Camping Nature', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Camping au bord d&#039;un etang très calme                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Camping Nature" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
                        
            <!-- DÉMO EN DUR pour chaque catégorie -->
                        <!--
            <div class="camping-item" data-name="Camping Demo Lac de la Liez">
                <div class="restaurant-cardDemo" style="border-left: 5px solid #f8fc04;">
                    <div class="restaurant-card-content">
                        <h4>🏕️ Camping DÉMO - Lac de la Liez</h4>
                        <p style="color: #0891b2; font-weight: 600; text-align: center;">
                            Emplacements tentes et camping-cars - Accès direct plage
                        </p> 
                        <p>🗺️ Route de la Plage<br>52220 Puellemontier</p>
                        <p>📞 xx xx xx xx xx</p>
                        <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                            <a href="tel:+33123" class="btn-call">📞 Appeler</a>
                            <a href="../contact/contact.html" target="_blank" class="btn-website">🌐 Contactez-nous</a>
                            <button onclick="zoomToRestaurant([48.4523, 5.2145], this); trackClick('Hébergements Camping-Liste-carte-Camping DEMO', '#')" class="btn-map">📍 Carte</button>
                            <button onclick="openMenuModal('menu1.jpg', 'Camping DÉMO')" class="btn-menu">📋 Photos</button>
                        </div>
                        <p style="margin-top: 10px; font-size: 12px; color: #64748b; font-style: italic;">
                            💡 Cet établissement démontre les options disponibles - Contactez-nous pour un RDV !
                        </p>
                    </div>
                    <div class="restaurant-card-images">
                        <div class="restaurant-images">
                            <img src="Votre_pub.jpg" alt="Camping DÉMO" class="single-image">
                        </div>
                    </div>
                </div>
            </div>
            -->
            <!-- DEMO CAMPING -->
                        <div class="camping-item" data-name="Camping Demo Lac de la Liez">
                <div class="restaurant-cardDemo" style="border-left: 5px solid #f8fc04;">
                    <div class="restaurant-card-content">
                        <h4>🏕️ Camping DÉMO - Carrousel Photos + Bouton Menu</h4>
                        <p style="color: #0891b2; font-weight: 600; text-align: center;">
                            Spécialité: ⭐⭐⭐ A partir de xx€
                        </p> 
                        <p>🗺️ 1 Avenue du Lac<br>51290 Lac du Der</p>
                        <p>📞 xx xx xx xx xx</p>
                        <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                            <a href="tel:+33123" class="btn-call">📞 Appeler</a>
                            <a href="../contact/contact.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Camping-Liste-Site-Camping DEMO', '#')">🌐 Contactez-nous</a>
                            <button onclick="zoomToRestaurant([48.58209, 4.81104], this); trackClick('Hébergements Camping-Liste-carte-Camping DEMO', '#')" class="btn-map">📍 Carte</button>
                            <button onclick="openMenuModal('menu1.jpg', 'Gite DÉMO'); trackClick('Hébergements Camping-Liste-menu-Camping DEMO', '#')" class="btn-menu">📋 Options</button>
                        </div>
                       <p style="margin-top: 10px; font-size: 12px; color: #64748b; font-style: italic;">
                            💡 Cet établissement démontre l'option carrousel photo (3 images) Plus le menu OPTION</p>
                        <table style="width:100%; margin-top:10px; font-size:14px; color:#64748b; font-style:italic; border-collapse:collapse;">
    <tr>
        <td style="padding:4px 10px;">🍽️ Restaurant</td>
        <td style="padding:4px 10px;">🥐 ☕ Croissants et petit déjeuner</td>
    </tr>
    <tr>
        <td style="padding:4px 10px;">⭐ Vous avez des étoiles ?</td>
        <td style="padding:4px 10px;">♿ PMR</td>

    </tr>
    <tr>
        <td style="padding:4px 10px;">🅿️ Parking gratuit</td>
        <td style="padding:4px 10px;">🔋 Recharge véhicule</td>
    </tr>
    <tr>
        <td style="padding:4px 10px;">📶 Wifi</td>
        <td style="padding:4px 10px;">🐾 Chiens acceptés</td>
    </tr>
    <tr>
        <td style="padding:4px 10px;">🛍️ Proche magasins</td>
        <td style="padding:4px 10px;">🛒 Proche épicerie</td>
    </tr>
    <tr>
        <td style="padding:4px 10px;">🚲 Vélo disponible</td>
        <td style="padding:4px 10px;">🦆 Proche d'un site d'observation</td>
    </tr>
    <tr>
        <td style="padding:4px 10px;">🎤 Karaoké</td>
        <td style="padding:4px 10px;">… et bien d'autres</td>
    </tr>
</table>
                    </div>
                    <div class="restaurant-card-images">
                        <div class="restaurant-images" data-carousel="demo-camping">
                            <button class="carousel-nav prev" onclick="changeSlide('demo-camping', -1)">❮</button>
                            <button class="carousel-nav next" onclick="changeSlide('demo-camping', 1)">❯</button>
                            <div class="carousel-container">
                                <div class="carousel-slide">
                                    <img src="Votre_pub2.jpg" alt="Photo 1">
                                </div>
                                <div class="carousel-slide">
                                    <img src="Votre_pub3.jpg" alt="Photo 2">
                                </div>
                                <div class="carousel-slide">
                                    <img src="Votre_pub.jpg" alt="Photo 3">
                                </div>
                            </div>
                            <div class="carousel-controls">
                                <span class="carousel-dot active" onclick="goToSlide('demo-camping', 0)"></span>
                                <span class="carousel-dot" onclick="goToSlide('demo-camping', 1)"></span>
                                <span class="carousel-dot" onclick="goToSlide('demo-camping', 2)"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- PUBS -->
            <div class="ad-card">
                <p>🌟 <strong>PUB :</strong> Votre établissement ici ! <a href="../contact/contact_pro.html" style="color:#ef4444;">Contactez-nous</a></p>
            </div>
        </div>
    </div>
    
        <div id="debut-listes"></div>
    <!-- ========== LISTE HéBERGEMENTS INSOLITES ========== -->
    <div id="insolite-list-container" style="display: none; margin-top: 20px;">
        <div class="map-title">
            <div class="map-title-content" >
                <h2>🎪 Liste des Hébergements Insolites</h2>
                <div style="display: flex; gap: 10px; align-items: center;">
                    <input type="text" id="searchBarInsolite" placeholder="Rechercher..." style="flex: 1;" onclick="trackClick('Hébergements Hébergements Insolites Recherche dans liste', '#')">
                    <button class="btn-clear-filter" onclick="clearSearchFilterInsolite(); trackClick('Hébergements Hébergements Insolites Effacer recherche', '#')">🔄 Effacer filtre</button>
                </div>
            </div>
        </div>

        <div id="dynamic-list-insolite">
            <div class="insolite-item" data-name="Bateaux habitables Flotyll">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🎪 Bateaux habitables Flotyll</h4>
                                                <p>🗺️ Port de Nemours<br>52290 Sainte Livière</p>
                                                <p>📞 0689732118</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0689732118" class="btn-call" onclick="trackClick('Hébergements Hébergements Insolites-Liste-Appeler-Bateaux habitables Flotyll', 'tel:0689732118')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0689732118" class="btn-call" onclick="trackClick('Hébergements Hébergements Insolites-Liste-Appeler-Bateaux habitables Flotyll', 'tel:0689732118')">📞 Appeler</a>
                                                                                    <!-- <a href="https://flotyll.fr/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Hébergements Insolites-Liste-Site-Bateaux habitables Flotyll', 'https://flotyll.fr/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://flotyll.fr/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Hébergements Insolites-Liste-Site-Bateaux habitables Flotyll', 'https://flotyll.fr/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.584218, 4.808217], this); trackClick('Hébergements Hébergements Insolites-Liste-carte-Bateaux habitables Flotyll', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.584218, 4.808217], this); trackClick('Hébergements Hébergements Insolites-Liste-carte-Bateaux habitables Flotyll', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Bateaux habitables Flotyll'); trackClick('Hébergements Hébergements Insolites-Liste-photos-Bateaux habitables Flotyll', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Retrouvez-vous à bord de nos bateaux                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Bateaux habitables Flotyll" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="insolite-item" data-name="Wigwam les Étoiles Pour Toile de Fond">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🎪 Wigwam les Étoiles Pour Toile de Fond</h4>
                                                <p>🗺️ Port de Nemours<br>52290 Sainte Livière</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.abritel.fr/location-vacances/p2009680" target="_blank" class="btn-website" onclick="trackClick('Hébergements Hébergements Insolites-Liste-Site-Wigwam les Étoiles Pour Toile de Fond', 'https://www.abritel.fr/location-vacances/p2009680')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.abritel.fr/location-vacances/p2009680" target="_blank" class="btn-website" onclick="trackClick('Hébergements Hébergements Insolites-Liste-Site-Wigwam les Étoiles Pour Toile de Fond', 'https://www.abritel.fr/location-vacances/p2009680')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.581359, 4.815219], this); trackClick('Hébergements Hébergements Insolites-Liste-carte-Wigwam les Étoiles Pour Toile de Fond', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.581359, 4.815219], this); trackClick('Hébergements Hébergements Insolites-Liste-carte-Wigwam les Étoiles Pour Toile de Fond', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Wigwam les Étoiles Pour Toile de Fond'); trackClick('Hébergements Hébergements Insolites-Liste-photos-Wigwam les Étoiles Pour Toile de Fond', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Dormir dans une tente en forme de dôme avec vue sur le Lac du Der                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Wigwam les Étoiles Pour Toile de Fond" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="insolite-item" data-name="Une yourte avec vue sur le lac du Der">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🎪 Une yourte avec vue sur le lac du Der</h4>
                                                <p>🗺️ Port de Nemours<br>52290 Sainte Livière</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.abritel.fr/location-vacances/p2009680" target="_blank" class="btn-website" onclick="trackClick('Hébergements Hébergements Insolites-Liste-Site-Une yourte avec vue sur le lac du Der', 'https://www.abritel.fr/location-vacances/p2009680')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.abritel.fr/location-vacances/p2009680" target="_blank" class="btn-website" onclick="trackClick('Hébergements Hébergements Insolites-Liste-Site-Une yourte avec vue sur le lac du Der', 'https://www.abritel.fr/location-vacances/p2009680')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.580947, 4.816674], this); trackClick('Hébergements Hébergements Insolites-Liste-carte-Une yourte avec vue sur le lac du Der', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.580947, 4.816674], this); trackClick('Hébergements Hébergements Insolites-Liste-carte-Une yourte avec vue sur le lac du Der', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Une yourte avec vue sur le lac du Der'); trackClick('Hébergements Hébergements Insolites-Liste-photos-Une yourte avec vue sur le lac du Der', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Dormir dans une yourte comme un Nomades d&#039;Asie centrale au bord du Lac                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Une yourte avec vue sur le lac du Der" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="insolite-item" data-name="MESHUTES: le gite des nuits insolites">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🎪 MESHUTES: le gite des nuits insolites</h4>
                                                <p>🗺️ Port de Nemours<br>52290 Sainte Livière</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.abritel.fr/location-vacances/p2009680" target="_blank" class="btn-website" onclick="trackClick('Hébergements Hébergements Insolites-Liste-Site-MESHUTES: le gite des nuits insolites', 'https://www.abritel.fr/location-vacances/p2009680')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.abritel.fr/location-vacances/p2009680" target="_blank" class="btn-website" onclick="trackClick('Hébergements Hébergements Insolites-Liste-Site-MESHUTES: le gite des nuits insolites', 'https://www.abritel.fr/location-vacances/p2009680')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.581369, 4.8114261], this); trackClick('Hébergements Hébergements Insolites-Liste-carte-MESHUTES: le gite des nuits insolites', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.581369, 4.8114261], this); trackClick('Hébergements Hébergements Insolites-Liste-carte-MESHUTES: le gite des nuits insolites', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'MESHUTES: le gite des nuits insolites'); trackClick('Hébergements Hébergements Insolites-Liste-photos-MESHUTES: le gite des nuits insolites', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Une sensation de dormir dehors : Yourtes, tipi, cabane sur pilotis, bulle                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="MESHUTES: le gite des nuits insolites" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="insolite-item" data-name="Ma Maison sur l'Eau">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🎪 Ma Maison sur l'Eau</h4>
                                                <p>🗺️ Presqu'ile de Rougemer<br>51290 Giffaumont-Champaubert</p>
                                                <p>📞 0789007384</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0789007384" class="btn-call" onclick="trackClick('Hébergements Hébergements Insolites-Liste-Appeler-Ma Maison sur l\'Eau', 'tel:0789007384')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0789007384" class="btn-call" onclick="trackClick('Hébergements Hébergements Insolites-Liste-Appeler-Ma Maison sur l\'Eau', 'tel:0789007384')">📞 Appeler</a>
                                                                                    <!-- <a href="https://mamaisonsurleau.com/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Hébergements Insolites-Liste-Site-Ma Maison sur l\'Eau', 'https://mamaisonsurleau.com/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://mamaisonsurleau.com/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Hébergements Insolites-Liste-Site-Ma Maison sur l\'Eau', 'https://mamaisonsurleau.com/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.55285, 4.779654], this); trackClick('Hébergements Hébergements Insolites-Liste-carte-Ma Maison sur l\'Eau', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.55285, 4.779654], this); trackClick('Hébergements Hébergements Insolites-Liste-carte-Ma Maison sur l\'Eau', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Ma Maison sur l&#039;Eau'); trackClick('Hébergements Hébergements Insolites-Liste-photos-Ma Maison sur l&#039;Eau', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Vous rêvez de dormir sur l&#039;eau ?                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Ma Maison sur l'Eau" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="insolite-item" data-name="Les cabanes du lac du der">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🎪 Les cabanes du lac du der</h4>
                                                <p>🗺️ 3 Bis chemin des fontaines<br>51290 Giffaumont-Champaubert</p>
                                                <p>📞 0607590242</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0607590242" class="btn-call" onclick="trackClick('Hébergements Hébergements Insolites-Liste-Appeler-Les cabanes du lac du der', 'tel:0607590242')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0607590242" class="btn-call" onclick="trackClick('Hébergements Hébergements Insolites-Liste-Appeler-Les cabanes du lac du der', 'tel:0607590242')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.cabanesdulacduder.com/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Hébergements Insolites-Liste-Site-Les cabanes du lac du der', 'https://www.cabanesdulacduder.com/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.cabanesdulacduder.com/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Hébergements Insolites-Liste-Site-Les cabanes du lac du der', 'https://www.cabanesdulacduder.com/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.551669, 4.771327], this); trackClick('Hébergements Hébergements Insolites-Liste-carte-Les cabanes du lac du der', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.551669, 4.771327], this); trackClick('Hébergements Hébergements Insolites-Liste-carte-Les cabanes du lac du der', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Les cabanes du lac du der'); trackClick('Hébergements Hébergements Insolites-Liste-photos-Les cabanes du lac du der', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Il faut le faire une fois dans sa vie, c&#039;est magnifique !                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Les cabanes du lac du der" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="insolite-item" data-name="La cabane aux Secrets">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🎪 La cabane aux Secrets</h4>
                                                <p>🗺️ Lieudit La Pierre<br>51290 Outines</p>
                                                <p>📞 0667367493</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0667367493" class="btn-call" onclick="trackClick('Hébergements Hébergements Insolites-Liste-Appeler-La cabane aux Secrets', 'tel:0667367493')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0667367493" class="btn-call" onclick="trackClick('Hébergements Hébergements Insolites-Liste-Appeler-La cabane aux Secrets', 'tel:0667367493')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.au-milieu-de-nulle-part.com/fr" target="_blank" class="btn-website" onclick="trackClick('Hébergements Hébergements Insolites-Liste-Site-La cabane aux Secrets', 'https://www.au-milieu-de-nulle-part.com/fr')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.au-milieu-de-nulle-part.com/fr" target="_blank" class="btn-website" onclick="trackClick('Hébergements Hébergements Insolites-Liste-Site-La cabane aux Secrets', 'https://www.au-milieu-de-nulle-part.com/fr')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.57163, 4.67523], this); trackClick('Hébergements Hébergements Insolites-Liste-carte-La cabane aux Secrets', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.57163, 4.67523], this); trackClick('Hébergements Hébergements Insolites-Liste-carte-La cabane aux Secrets', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'La cabane aux Secrets'); trackClick('Hébergements Hébergements Insolites-Liste-photos-La cabane aux Secrets', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Un site d&#039;exception en pleine nature avec différent type de logements                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="La cabane aux Secrets" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="insolite-item" data-name="La Roulottte des Elfes">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🎪 La Roulottte des Elfes</h4>
                                                <p>🗺️ Lieudit La Pierre<br>51290 Outines</p>
                                                <p>📞 0667367493</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0667367493" class="btn-call" onclick="trackClick('Hébergements Hébergements Insolites-Liste-Appeler-La Roulottte des Elfes', 'tel:0667367493')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0667367493" class="btn-call" onclick="trackClick('Hébergements Hébergements Insolites-Liste-Appeler-La Roulottte des Elfes', 'tel:0667367493')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.au-milieu-de-nulle-part.com/fr" target="_blank" class="btn-website" onclick="trackClick('Hébergements Hébergements Insolites-Liste-Site-La Roulottte des Elfes', 'https://www.au-milieu-de-nulle-part.com/fr')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.au-milieu-de-nulle-part.com/fr" target="_blank" class="btn-website" onclick="trackClick('Hébergements Hébergements Insolites-Liste-Site-La Roulottte des Elfes', 'https://www.au-milieu-de-nulle-part.com/fr')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.57207, 4.67509], this); trackClick('Hébergements Hébergements Insolites-Liste-carte-La Roulottte des Elfes', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.57207, 4.67509], this); trackClick('Hébergements Hébergements Insolites-Liste-carte-La Roulottte des Elfes', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'La Roulottte des Elfes'); trackClick('Hébergements Hébergements Insolites-Liste-photos-La Roulottte des Elfes', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Un site d&#039;exception en pleine nature avec différent type de logements                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="La Roulottte des Elfes" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="insolite-item" data-name="A l'aube des sens">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🎪 A l'aube des sens</h4>
                                                <p>🗺️ 7 rue qui boue Bailly-le-Franc<br>10330 Bailly-le-Franc</p>
                                                <p>📞 0619208165</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0619208165" class="btn-call" onclick="trackClick('Hébergements Hébergements Insolites-Liste-Appeler-A l\'aube des sens', 'tel:0619208165')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0619208165" class="btn-call" onclick="trackClick('Hébergements Hébergements Insolites-Liste-Appeler-A l\'aube des sens', 'tel:0619208165')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.lacduder.com/offres/gite-des-bulles-bailly-le-franc-fr-5521588/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Hébergements Insolites-Liste-Site-A l\'aube des sens', 'https://www.lacduder.com/offres/gite-des-bulles-bailly-le-franc-fr-5521588/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.lacduder.com/offres/gite-des-bulles-bailly-le-franc-fr-5521588/" target="_blank" class="btn-website" onclick="trackClick('Hébergements Hébergements Insolites-Liste-Site-A l\'aube des sens', 'https://www.lacduder.com/offres/gite-des-bulles-bailly-le-franc-fr-5521588/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.52300, 4.65900], this); trackClick('Hébergements Hébergements Insolites-Liste-carte-A l\'aube des sens', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.52300, 4.65900], this); trackClick('Hébergements Hébergements Insolites-Liste-carte-A l\'aube des sens', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'A l&#039;aube des sens'); trackClick('Hébergements Hébergements Insolites-Liste-photos-A l&#039;aube des sens', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Dormez dans une bulle avec piscine                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="A l'aube des sens" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="insolite-item" data-name="La Carabol Der">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🎪 La Carabol Der</h4>
                                                <p>🗺️ 27 rue de la Motte<br>52130 Voillecomte</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/la-carabol-der.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Hébergements Insolites-Liste-Site-La Carabol Der', 'https://www.booking.com/hotel/fr/la-carabol-der.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/la-carabol-der.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Hébergements Insolites-Liste-Site-La Carabol Der', 'https://www.booking.com/hotel/fr/la-carabol-der.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.505542, 4.876831], this); trackClick('Hébergements Hébergements Insolites-Liste-carte-La Carabol Der', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.505542, 4.876831], this); trackClick('Hébergements Hébergements Insolites-Liste-carte-La Carabol Der', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'La Carabol Der'); trackClick('Hébergements Hébergements Insolites-Liste-photos-La Carabol Der', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Tentez cette aventure en Caravane - Terrasse - Parking                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="La Carabol Der" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="insolite-item" data-name="Les Chalets du Parc">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🎪 Les Chalets du Parc</h4>
                                                <p>🗺️ 2 impasse Du Parc<br>52100 Saint-Eulien</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.booking.com/hotel/fr/les-chalets-du-parc-st-eulien.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Hébergements Insolites-Liste-Site-Les Chalets du Parc', 'https://www.booking.com/hotel/fr/les-chalets-du-parc-st-eulien.fr.html')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.booking.com/hotel/fr/les-chalets-du-parc-st-eulien.fr.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Hébergements Insolites-Liste-Site-Les Chalets du Parc', 'https://www.booking.com/hotel/fr/les-chalets-du-parc-st-eulien.fr.html')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.679144, 4.867097], this); trackClick('Hébergements Hébergements Insolites-Liste-carte-Les Chalets du Parc', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.679144, 4.867097], this); trackClick('Hébergements Hébergements Insolites-Liste-carte-Les Chalets du Parc', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Les Chalets du Parc'); trackClick('Hébergements Hébergements Insolites-Liste-photos-Les Chalets du Parc', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                </div>
                                <br>Hébergement insolite climatisé avec terrasse                                                <br>Pour afficher vos icones contactez-nous                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Les Chalets du Parc" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
                        
            <!-- DÉMO EN DUR pour chaque catégorie -->
                        <!--
            <div class="insolite-item" data-name="Insolite Demo Cabanes des Grands Lacs">
                <div class="restaurant-cardDemo" style="border-left: 5px solid #f8fc04;">
                    <div class="restaurant-card-content">
                        <h4>🎪 Hébergement Insolite DÉMO - Cabanes des Grands Lacs</h4>
                        <p style="color: #0891b2; font-weight: 600; text-align: center;">
                            Cabanes perchées dans les arbres - Spa privatif
                        </p> 
                        <p>🗺️ Chemin des Cabanes<br>52290 Eclaron-Braucourt-Sainte-Livière</p>
                        <p>📞 xx xx xx xx xx</p>
                        <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                            <a href="tel:+33123" class="btn-call">📞 Appeler</a>
                            <a href="../contact/contact.html" target="_blank" class="btn-website">🌐 Contactez-nous</a>
                            <button onclick="zoomToRestaurant([48.5789, 4.8234], this); trackClick('Hébergements Insolite-Liste-carte-Insolite DEMO', '#')" class="btn-map">📍 Carte</button>
                            <button onclick="openMenuModal('menu1.jpg', 'Insolite DÉMO')" class="btn-menu">📋 Photos</button>
                        </div>
                        <p style="margin-top: 10px; font-size: 12px; color: #64748b; font-style: italic;">
                            💡 Cet établissement démontre les options disponibles - Contactez-nous pour un RDV !
                        </p>
                    </div>
                    <div class="restaurant-card-images">
                        <div class="restaurant-images">
                            <img src="Votre_pub.jpg" alt="Insolite DÉMO" class="single-image">
                        </div>
                    </div>
                </div>
            </div>
            -->
            <!-- DEMO INSOLITE -->
                        <div class="insolite-item" data-name="Insolite Demo Cabanes des Grands Lacs">
                <div class="restaurant-cardDemo" style="border-left: 5px solid #f8fc04;">
                    <div class="restaurant-card-content">
                        <h4>🎪 Insolite DÉMO - Carrousel Photos + Bouton Menu</h4>
                        <p style="color: #0891b2; font-weight: 600; text-align: center;">
                            Spécialité: ⭐⭐⭐ A partir de xx€
                        </p> 
                        <p>🗺️ 1 Avenue du Lac<br>51290 Lac du Der</p>
                        <p>📞 xx xx xx xx xx</p>
                        <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                            <a href="tel:+33123" class="btn-call">📞 Appeler</a>
                            <a href="../contact/contact.html" target="_blank" class="btn-website" onclick="trackClick('Hébergements Insolite-Liste-Site-Insolite DEMO', '#')">🌐 Contactez-nous</a>
                            <button onclick="zoomToRestaurant([48.553638, 4.767266], this); trackClick('Hébergements Insolite-Liste-carte-Insolite DEMO', '#')" class="btn-map">📍 Carte</button>
                            <button onclick="openMenuModal('menu1.jpg', 'Gite DÉMO'); trackClick('Hébergements Insolite-Liste-menu-Insolite DEMO', '#')" class="btn-menu">📋 Options</button>
                        </div>
                       <p style="margin-top: 10px; font-size: 12px; color: #64748b; font-style: italic;">
                            💡 Cet établissement démontre l'option carrousel photo (3 images) Plus le menu OPTION</p>
                        <table style="width:100%; margin-top:10px; font-size:14px; color:#64748b; font-style:italic; border-collapse:collapse;">
    <tr>
        <td style="padding:4px 10px;">🍽️ Restaurant</td>
        <td style="padding:4px 10px;">🥐 ☕ Croissants et petit déjeuner</td>
    </tr>
    <tr>
        <td style="padding:4px 10px;">⭐ Vous avez des étoiles ?</td>
        <td style="padding:4px 10px;">♿ PMR</td>

    </tr>
    <tr>
        <td style="padding:4px 10px;">🅿️ Parking gratuit</td>
        <td style="padding:4px 10px;">🔋 Recharge véhicule</td>
    </tr>
    <tr>
        <td style="padding:4px 10px;">📶 Wifi</td>
        <td style="padding:4px 10px;">🐾 Chiens acceptés</td>
    </tr>
    <tr>
        <td style="padding:4px 10px;">🛍️ Proche magasins</td>
        <td style="padding:4px 10px;">🛒 Proche épicerie</td>
    </tr>
    <tr>
        <td style="padding:4px 10px;">🚲 Vélo disponible</td>
        <td style="padding:4px 10px;">🦆 Proche d'un site d'observation</td>
    </tr>
    <tr>
        <td style="padding:4px 10px;">🎤 Karaoké</td>
        <td style="padding:4px 10px;">… et bien d'autres</td>
    </tr>
</table>
                    </div>
                    <div class="restaurant-card-images">
                        <div class="restaurant-images" data-carousel="demo-insolite">
                            <button class="carousel-nav prev" onclick="changeSlide('demo-insolite', -1)">❮</button>
                            <button class="carousel-nav next" onclick="changeSlide('demo-insolite', 1)">❯</button>
                            <div class="carousel-container">
                                <div class="carousel-slide">
                                    <img src="Votre_pub2.jpg" alt="Photo 1">
                                </div>
                                <div class="carousel-slide">
                                    <img src="Votre_pub3.jpg" alt="Photo 2">
                                </div>
                                <div class="carousel-slide">
                                    <img src="Votre_pub.jpg" alt="Photo 3">
                                </div>
                            </div>
                            <div class="carousel-controls">
                                <span class="carousel-dot active" onclick="goToSlide('demo-insolite', 0)"></span>
                                <span class="carousel-dot" onclick="goToSlide('demo-insolite', 1)"></span>
                                <span class="carousel-dot" onclick="goToSlide('demo-insolite', 2)"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- PUBS -->
            <div class="ad-card">
                <p>🌟 <strong>PUB :</strong> Votre établissement ici ! <a href="../contact/contact_pro.html" style="color:#ef4444;">Contactez-nous</a></p>
            </div>
        </div>
    </div>
    
    
</div>

<!-- ========== MODAL MENU IMAGE ========== -->
<div id="menuModal" class="modal" onclick="closeMenuModal()">
    <div class="modal-content" onclick="event.stopPropagation()">
        <button class="modal-close" onclick="closeMenuModal()">&times;</button>
        <img id="menuImage" src="" alt="Menu">
    </div>
</div>

<script>
// ==================== FONCTION DE MÉLANGE ====================

// Fonction pour mélanger un tableau (algorithme Fisher-Yates)
function shuffleArray(array) {
    const shuffled = [...array]; // Créer une copie
    for (let i = shuffled.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
    }
    return shuffled;
}

// ==================== INITIALISATION CARTE ====================

var map = L.map('map', {
    attributionControl: false
}).setView([48.5640, 4.7680], 12);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors',
    maxZoom: 18
}).addTo(map);

var infoControl = L.control({ position: 'bottomright' });

infoControl.onAdd = function () {
    var div = L.DomUtil.create('div', 'leaflet-info-button');
    div.innerHTML = 'ℹ️';

    div.onclick = function (e) {
        e.stopPropagation();
        alert('© OpenStreetMap contributors\nCarte affichée avec Leaflet');
    };

    return div;
};

infoControl.addTo(map);

// ==================== POINTS D'INTÉRÊT DEPUIS PHP ====================

var pointsInteret = [
    // Toilettes publiques
    {coords: [48.5538, 4.7675], icon: '🚻', title: 'Toilettes publiques', desc: 'WC publics - Giffaumont centre', category: 'toilettes'},
    {coords: [48.5539, 4.7702], icon: '🚻', title: 'Toilettes publiques', desc: 'WC publics - Giffaumont direction le port', category: 'toilettes'},
    {coords: [48.6032, 4.7463], icon: '🚻', title: 'Toilettes publiques', desc: 'WC publics - Plage de Nuisement', category: 'toilettes'},
    {coords: [48.6032, 4.7171], icon: '🚻', title: 'Toilettes publiques', desc: 'WC publics - Plage de Larzicourt', category: 'toilettes'},
    {coords: [48.5690, 4.7032], icon: '🚻', title: 'Toilettes publiques', desc: 'WC publics - Site de Chantecoq', category: 'toilettes'},
    {coords: [48.5904, 4.7982], icon: '🚻', title: 'Toilettes publiques', desc: 'WC publics - Plage de la Cornée du Der', category: 'toilettes'},
    {coords: [48.5546, 4.7683], icon: '🚻', title: 'Toilettes publiques', desc: 'WC et fontaine - Zone sud', category: 'toilettes'},
    
    // HÉBERGEMENTS DEPUIS CSV
        {coords: [48.5566042, 4.753419], icon: '🏨', title: 'Logis Hôtel Le Cheval Blanc', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Logis Hôtel Le Cheval Blanc" class="popup-image">
                        <h5>🏨 Logis Hôtel Le Cheval Blanc</h5>
            <p>
                🗺️ 21 Rue du Lac<br>
                51290 Giffaumont-Champaubert<br>
                                <a href="tel:0326624548" class="popup-phone">📞 0326624548</a>
                                                <br><a href="https://www.lecheval-blanc.com/fr/index.php" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Hôtel - Bar - Restaurant - Terrasse - Parking                            </p>
        </div>`, category: 'hotel'},
        {coords: [48.605148, 4.781396], icon: '🏨', title: 'L&#039;Atelier', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="L&#039;Atelier" class="popup-image">
                        <h5>🏨 L&#039;Atelier</h5>
            <p>
                🗺️ 29 rue du château des petites côtes<br>
                51290 Sainte-Marie-du-Lac-Nuisement<br>
                                <a href="tel:0621131188" class="popup-phone">📞 0621131188</a>
                                                <br><a href="https://www.latelier-maisondhotes.com/" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Mi-chemin entre l&#039;hôtel et la maison d&#039;hôtes. 200 mètres du Lac du Der                            </p>
        </div>`, category: 'hotel'},
        {coords: [48.47668, 4.77241], icon: '🏨', title: 'Le Toro Bleu', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Le Toro Bleu" class="popup-image">
                        <h5>🏨 Le Toro Bleu</h5>
            <p>
                🗺️ 22 place de l&#039;Hotel de ville<br>
                52220 Montier-en-der<br>
                                <a href="tel:0325942294" class="popup-phone">📞 0325942294</a>
                                                <br><a href="https://www.booking.com/hotel/fr/le-toro-bleu-montier-en-der.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Hotel et Restaurant                            </p>
        </div>`, category: 'hotel'},
        {coords: [48.47719, 4.77351], icon: '🏨', title: 'Hôtel le Dervois', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Hôtel le Dervois" class="popup-image">
                        <h5>🏨 Hôtel le Dervois</h5>
            <p>
                🗺️ 9 rue Audiffred<br>
                52220 Montier-en-der<br>
                                <a href="tel:0325042276" class="popup-phone">📞 0325042276</a>
                                                <br><a href="https://hotelledervois.blogspot.com/" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Chambre avec salle d&#039;eau - Térasse - Bar                            </p>
        </div>`, category: 'hotel'},
        {coords: [48.62579, 4.98433], icon: '🏨', title: 'Hôtel de Champagne', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Hôtel de Champagne" class="popup-image">
                        <h5>🏨 Hôtel de Champagne</h5>
            <p>
                🗺️ 19 Avenue Jean Pierre Timbaud<br>
                52100 Saint-Dizier<br>
                                <a href="tel:0325044961" class="popup-phone">📞 0325044961</a>
                                                <br><a href="https://www.roomreserve.online/fr/hotel-de-champagne-saint-dizier/" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Chambre Double à Quadruple avec Restaurant                            </p>
        </div>`, category: 'hotel'},
        {coords: [48.556622, 4.753715], icon: '🏡', title: 'Vintage House', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Vintage House" class="popup-image">
                        <h5>🏡 Vintage House</h5>
            <p>
                🗺️ 2b rue du Lac<br>
                51290 Giffaumont-Champaubert<br>
                                <a href="tel:0621131188" class="popup-phone">📞 0621131188</a>
                                                <br><a href="https://www.gites.fr/gites_vintage-house_giffaumont-champaubert_h6450944.htm" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Vue sur le jardin                            </p>
        </div>`, category: 'classic'},
        {coords: [48.549155, 4.774075], icon: '🏡', title: 'Cottage 12B', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Cottage 12B" class="popup-image">
                        <h5>🏡 Cottage 12B</h5>
            <p>
                🗺️ 12 Presqu&#039;île de Rougemer<br>
                51290 Giffaumont-Champaubert<br>
                                                <br><a href="https://www.booking.com/hotel/fr/gite-cottage-2-a-4-pers-bulle-der-12b-lac-du-der.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Proche de la plage                            </p>
        </div>`, category: 'classic'},
        {coords: [48.548285, 4.770356], icon: '🏡', title: 'Chalet Giffaumont', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Chalet Giffaumont" class="popup-image">
                        <h5>🏡 Chalet Giffaumont</h5>
            <p>
                🗺️ 1 rue Rougemer<br>
                51290 Giffaumont-Champaubert<br>
                                                <br><a href="https://www.booking.com/hotel/fr/magnifique-chalet-climatise-avec-jardin-adapte-pmr.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Chalet climatisé avec Jardin                            </p>
        </div>`, category: 'classic'},
        {coords: [48.551542, 4.768877], icon: '🏡', title: 'La Cachotière du Lac', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="La Cachotière du Lac" class="popup-image">
                        <h5>🏡 La Cachotière du Lac</h5>
            <p>
                🗺️ Chemin de la Cachotte<br>
                51290 Giffaumont-Champaubert<br>
                                                <br><a href="https://www.booking.com/hotel/fr/la-cachotiere-du-lac.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Parking - Climatisation - Jardin                            </p>
        </div>`, category: 'classic'},
        {coords: [48.548684, 4.77036], icon: '🏡', title: 'Le chalet de la Presquile', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Le chalet de la Presquile" class="popup-image">
                        <h5>🏡 Le chalet de la Presquile</h5>
            <p>
                🗺️ Rue de Rougemer<br>
                51290 Giffaumont-Champaubert<br>
                                                <br><a href="https://www.booking.com/hotel/fr/le-chalet-de-la-plage-giffaumont-champaubert.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Parking Gratuit - Petit déjeuner                            </p>
        </div>`, category: 'classic'},
        {coords: [48.55161, 4.77121], icon: '🏡', title: 'Home du port', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Home du port" class="popup-image">
                        <h5>🏡 Home du port</h5>
            <p>
                🗺️ 3 Chemin des Fontaines<br>
                51290 Giffaumont-Champaubert<br>
                                <a href="tel:0658965768" class="popup-phone">📞 0658965768</a>
                                                <br><a href="https://www.booking.com/hotel/fr/home-du-port.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>A coté d&#039;ACCRODER                            </p>
        </div>`, category: 'classic'},
        {coords: [48.55207, 4.77351], icon: '🏡', title: 'Marina Holyder', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Marina Holyder" class="popup-image">
                        <h5>🏡 Marina Holyder</h5>
            <p>
                🗺️ 11 Presqu&#039;île de Rougemer<br>
                51290 Giffaumont-Champaubert<br>
                                <a href="tel:0326728404" class="popup-phone">📞 0326728404</a>
                                                <br><a href="http://www.marina-holyder.com/" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Cottage indépendant sur terrain privatif                            </p>
        </div>`, category: 'classic'},
        {coords: [48.553629, 4.744412], icon: '🏡', title: 'Appartement T1', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Appartement T1" class="popup-image">
                        <h5>🏡 Appartement T1</h5>
            <p>
                🗺️ 2 Ter rue du grand der<br>
                51290 Giffaumont-Champaubert<br>
                                                <br><a href="https://www.booking.com/hotel/fr/appartement-t1-tout-confort-au-lac-du-der.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Jardin - Restaurant - Terrasse                            </p>
        </div>`, category: 'classic'},
        {coords: [48.551043, 4.774812], icon: '🏡', title: 'Les Coccinels 41', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Les Coccinels 41" class="popup-image">
                        <h5>🏡 Les Coccinels 41</h5>
            <p>
                🗺️ 11 Presqu&#039;île de Rougemer<br>
                51290 Giffaumont-Champaubert<br>
                                                <br><a href="https://www.booking.com/hotel/fr/maison-lac-du-der.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>La maison est bien placée proche de la plage et du port                            </p>
        </div>`, category: 'classic'},
        {coords: [48.55421, 4.75291], icon: '🏡', title: 'La Roselière du Der', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="La Roselière du Der" class="popup-image">
                        <h5>🏡 La Roselière du Der</h5>
            <p>
                🗺️ 25 rue du Lac<br>
                51290 Giffaumont-Champaubert<br>
                                <a href="tel:0326726416" class="popup-phone">📞 0326726416</a>
                                                <br><a href="https://www.booking.com/hotel/fr/la-roseliere-du-der.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Gîte de 220m² Juste magnifique                            </p>
        </div>`, category: 'classic'},
        {coords: [48.55490, 4.75148], icon: '🏡', title: 'Bulle Der Cottage 19', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Bulle Der Cottage 19" class="popup-image">
                        <h5>🏡 Bulle Der Cottage 19</h5>
            <p>
                🗺️ 32 impasse de la Plage<br>
                51290 Giffaumont-Champaubert<br>
                                <a href="tel:0643417645" class="popup-phone">📞 0643417645</a>
                                                <br><a href="https://gite-bulle-der.jimdosite.com/" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Très jolie maison de vacance de 80m²                            </p>
        </div>`, category: 'classic'},
        {coords: [48.54979, 4.74787], icon: '🏡', title: 'Le Logis du Der', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Le Logis du Der" class="popup-image">
                        <h5>🏡 Le Logis du Der</h5>
            <p>
                🗺️ 26 rue du Bois<br>
                51290 Giffaumont-Champaubert<br>
                                <a href="tel:0650523095" class="popup-phone">📞 0650523095</a>
                                                <br><a href="https://www.booking.com/hotel/fr/le-logis-du-der.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Maison de 160m² avec Terrasse                            </p>
        </div>`, category: 'classic'},
        {coords: [48.552713, 4.768504], icon: '🏡', title: 'Chalet confortable', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Chalet confortable" class="popup-image">
                        <h5>🏡 Chalet confortable</h5>
            <p>
                🗺️ 47 la Cachotte<br>
                51290 Giffaumont-Champaubert<br>
                                                <br><a href="https://www.booking.com/hotel/fr/chalet-la-cachotte.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Chalet de 30m² - Parking privé                            </p>
        </div>`, category: 'classic'},
        {coords: [48.549479, 4.773816], icon: '🏡', title: 'La Maison Bleu du Lac', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="La Maison Bleu du Lac" class="popup-image">
                        <h5>🏡 La Maison Bleu du Lac</h5>
            <p>
                🗺️ Résidence Marina Holyder Maison N07<br>
                51290 Giffaumont-Champaubert<br>
                                <a href="tel:0625901252" class="popup-phone">📞 0625901252</a>
                                                <br><a href="https://www.booking.com/hotel/fr/maison-bleu-du-lac.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Parking Gratuit - Baignoire - Barbecue                            </p>
        </div>`, category: 'classic'},
        {coords: [48.51805, 4.82866], icon: '🏡', title: 'Le Gros Chêne', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Le Gros Chêne" class="popup-image">
                        <h5>🏡 Le Gros Chêne</h5>
            <p>
                🗺️ 1 rue du Chêne<br>
                52220 Frampas<br>
                                <a href="tel:0632663087" class="popup-phone">📞 0632663087</a>
                                                <br><a href="https://www.booking.com/hotel/fr/le-gros-chene-frampas.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Maison en pierre avec jardin - Parking                            </p>
        </div>`, category: 'classic'},
        {coords: [48.55103, 4.707938], icon: '🏡', title: 'Chalet au Charme du Der', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Chalet au Charme du Der" class="popup-image">
                        <h5>🏡 Chalet au Charme du Der</h5>
            <p>
                🗺️ 6 rue de la Loge<br>
                51290 Châtillon-sur-Broué<br>
                                                <br><a href="https://www.booking.com/hotel/fr/joli-chalet-au-charme-du-der.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Chalet climatisé de 50m² avec vue sur Jardin                            </p>
        </div>`, category: 'classic'},
        {coords: [48.55083, 4.70776], icon: '🏡', title: 'Alaguyauder le KOTA', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Alaguyauder le KOTA" class="popup-image">
                        <h5>🏡 Alaguyauder le KOTA</h5>
            <p>
                🗺️ 3 rue de la Loge<br>
                51290 Châtillon-sur-Broué<br>
                                                <br><a href="https://www.booking.com/hotel/fr/alaguyauder-le-kota.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Capacité 10 personnes - Piscine                            </p>
        </div>`, category: 'classic'},
        {coords: [48.552792, 4.707019], icon: '🏡', title: 'Au fils des Saisons', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Au fils des Saisons" class="popup-image">
                        <h5>🏡 Au fils des Saisons</h5>
            <p>
                🗺️ 17 rue du Lac<br>
                51290 Châtillon-sur-Broué<br>
                                                <br><a href="https://www.booking.com/hotel/fr/au-fils-des-saisons.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Très jolie maison de 80m² avec Parking                            </p>
        </div>`, category: 'classic'},
        {coords: [48.55103, 4.707938], icon: '🏡', title: 'Gîte de la loge Seryse', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Gîte de la loge Seryse" class="popup-image">
                        <h5>🏡 Gîte de la loge Seryse</h5>
            <p>
                🗺️ 4B rue de la Loge<br>
                51290 Châtillon-sur-Broué<br>
                                                <br><a href="https://www.booking.com/hotel/fr/gite-de-la-loge-chac-tillon-sur-broua-c.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Gîte de 50m² - Parking - Piscine                            </p>
        </div>`, category: 'classic'},
        {coords: [48.557402, 4.705802], icon: '🏡', title: 'Les Fortelles', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Les Fortelles" class="popup-image">
                        <h5>🏡 Les Fortelles</h5>
            <p>
                🗺️ 35 rue du Lac<br>
                51290 Châtillon-sur-Broué<br>
                                <a href="tel:0680883806" class="popup-phone">📞 0680883806</a>
                                                <br><a href="https://www.booking.com/hotel/fr/les-fortelles.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Belle maison anciènne rénovée - Parking                            </p>
        </div>`, category: 'classic'},
        {coords: [48.509545, 4.795004], icon: '🏡', title: 'Ranch du pont urgin', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Ranch du pont urgin" class="popup-image">
                        <h5>🏡 Ranch du pont urgin</h5>
            <p>
                🗺️ Ferme du Pont Urgin<br>
                52220 Planrupt<br>
                                <a href="tel:0637983017" class="popup-phone">📞 0637983017</a>
                                                <br><a href="https://www.booking.com/hotel/fr/ranch-du-pont-urgin.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Très jolie propriété – balade à cheval avec Caroline                            </p>
        </div>`, category: 'classic'},
        {coords: [48.52628, 4.72455], icon: '🏡', title: 'A la Bonne Franquette', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="A la Bonne Franquette" class="popup-image">
                        <h5>🏡 A la Bonne Franquette</h5>
            <p>
                🗺️ 31 hameau du Voy<br>
                52220 Droyes<br>
                                <a href="tel:0687065812" class="popup-phone">📞 0687065812</a>
                                                <br><a href="https://escapadadeviaje.com/france/droyes/a-la-bonne-franquette/" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Très jolie maison anciènne rénovée                            </p>
        </div>`, category: 'classic'},
        {coords: [48.51238, 4.70111], icon: '🏡', title: 'La maison de Marie', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="La maison de Marie" class="popup-image">
                        <h5>🏡 La maison de Marie</h5>
            <p>
                🗺️ 11 rue de la Motte<br>
                52220 Droyes<br>
                                <a href="tel:0683301740" class="popup-phone">📞 0683301740</a>
                                                <br><a href="https://www.la-maison-de-marie.com/" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Belle maison anciènne rénovée - Parking - Petit-déjeuner                            </p>
        </div>`, category: 'classic'},
        {coords: [48.59369, 4.86518], icon: '🏡', title: 'Le Moulin d Eclaron', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Le Moulin d Eclaron" class="popup-image">
                        <h5>🏡 Le Moulin d Eclaron</h5>
            <p>
                🗺️ 3 rue du moulin<br>
                52290 Eclaron<br>
                                <a href="tel:0661238304" class="popup-phone">📞 0661238304</a>
                                                <br><a href="https://www.chambres-hotes.fr/chambres-hotes_le-moulin-d-eclaron_eclaron-braucourt-sainte-liviere_h609761.htm" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Vue sur le cours d eau - Petit déjeuner                            </p>
        </div>`, category: 'classic'},
        {coords: [48.590386, 4.865673], icon: '🏡', title: 'Charmant logement', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Charmant logement" class="popup-image">
                        <h5>🏡 Charmant logement</h5>
            <p>
                🗺️ 2 Place Pelletier<br>
                52290 Eclaron<br>
                                                <br><a href="https://www.booking.com/hotel/fr/charmant-logement-avec-parking-gratuit-sur-plac-eclaron-braucourt-sainte-liviere.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Petit appartement situé sur une jolie place                            </p>
        </div>`, category: 'classic'},
        {coords: [48.60079, 4.82352], icon: '🏡', title: 'Le Gîte de Laurence', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Le Gîte de Laurence" class="popup-image">
                        <h5>🏡 Le Gîte de Laurence</h5>
            <p>
                🗺️ 16 rue Sainte Libaire<br>
                52290 Sainte-Livière<br>
                                <a href="tel:0640070970" class="popup-phone">📞 0640070970</a>
                                                <br><a href="https://legitedelaurence5.wixsite.com/le-gite-de-laurence" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Superbe bâtisse de charme à colombages - Capacité de 14 personnes - Un lieu unique                            </p>
        </div>`, category: 'classic'},
        {coords: [48.535368, 4.817664], icon: '🏡', title: 'L&#039;échappée Der', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="L&#039;échappée Der" class="popup-image">
                        <h5>🏡 L&#039;échappée Der</h5>
            <p>
                🗺️ 1 rue des Cannes<br>
                52290 Braucourt<br>
                                                <br><a href="https://www.booking.com/hotel/fr/echappee-der.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Maison de 38m² - Petit déjeuner - Parking                            </p>
        </div>`, category: 'classic'},
        {coords: [48.533211, 4.81693], icon: '🏡', title: 'Mobile-home', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Mobile-home" class="popup-image">
                        <h5>🏡 Mobile-home</h5>
            <p>
                🗺️ 9 rue du Souvenir<br>
                52290 Braucourt<br>
                                                <br><a href="https://www.booking.com/hotel/fr/mobile-home-eclaron-braucourt-sainte-liviere.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Petit mobile home avec 2 chambres, salon tout équipé - Parking                            </p>
        </div>`, category: 'classic'},
        {coords: [48.5331, 4.816595], icon: '🏡', title: 'Le Gruon du Lac', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Le Gruon du Lac" class="popup-image">
                        <h5>🏡 Le Gruon du Lac</h5>
            <p>
                🗺️ 6 rue du Souvenir<br>
                52290 Braucourt<br>
                                                <br><a href="https://www.booking.com/hotel/fr/le-gruon-du-lac.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Maison de 30m² avec Parking                            </p>
        </div>`, category: 'classic'},
        {coords: [48.63790, 4.76998], icon: '🏡', title: 'La Sente des Vignes', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="La Sente des Vignes" class="popup-image">
                        <h5>🏡 La Sente des Vignes</h5>
            <p>
                🗺️ 17 rue Haute<br>
                51290 Hauteville<br>
                                <a href="tel:0608289995" class="popup-phone">📞 0608289995</a>
                                                <br><a href="https://www.lasentedesvignes.com/" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Un très bel endroit avec petit déjeuner - Bain à remous                            </p>
        </div>`, category: 'classic'},
        {coords: [48.474678, 4.780478], icon: '🏡', title: 'Chez David et Julie', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Chez David et Julie" class="popup-image">
                        <h5>🏡 Chez David et Julie</h5>
            <p>
                🗺️ 3 Bis rue de la grande Inglee<br>
                52220 La Bouverie<br>
                                                <br><a href="https://www.booking.com/hotel/fr/chez-david-et-julie.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Maison de vacance de 60m² - Parking                            </p>
        </div>`, category: 'classic'},
        {coords: [48.472863, 4.777405], icon: '🏡', title: 'Partout l&#039;étang Montier en der', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Partout l&#039;étang Montier en der" class="popup-image">
                        <h5>🏡 Partout l&#039;étang Montier en der</h5>
            <p>
                🗺️ 1 rue du Moulin de la Battoire<br>
                52220 La Bouverie<br>
                                                <br><a href="https://www.booking.com/hotel/fr/partout-l-etang.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Maison de 80m² avec terrasse et barbecue                            </p>
        </div>`, category: 'classic'},
        {coords: [48.616067, 4.810505], icon: '🏡', title: 'La Chantourelle', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="La Chantourelle" class="popup-image">
                        <h5>🏡 La Chantourelle</h5>
            <p>
                🗺️ 4 rue Chantourelle<br>
                51290 Landricourt<br>
                                                <br><a href="https://www.booking.com/hotel/fr/la-chantourelle.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Maison de 250m²  exceptionnelle avec piscine, terrasse - Parking                            </p>
        </div>`, category: 'classic'},
        {coords: [48.506547, 4.858106], icon: '🏡', title: 'Domaine des deux sapins', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Domaine des deux sapins" class="popup-image">
                        <h5>🏡 Domaine des deux sapins</h5>
            <p>
                🗺️ 39 rue de la Croix<br>
                52130 Voillecomte<br>
                                                <br><a href="https://www.booking.com/hotel/fr/domaine-des-deux-sapins.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Au calme de la campagne dans une maison de 200m² - Parking                            </p>
        </div>`, category: 'classic'},
        {coords: [48.505351, 4.877044], icon: '🏡', title: 'Ô bout d&#039;la Motte', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Ô bout d&#039;la Motte" class="popup-image">
                        <h5>🏡 Ô bout d&#039;la Motte</h5>
            <p>
                🗺️ 27 rue de la Motte<br>
                52130 Voillecomte<br>
                                                <br><a href="https://www.booking.com/hotel/fr/o-bout-d-39-la-motte.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Vue sur le jardin avec terrasse - Parking                            </p>
        </div>`, category: 'classic'},
        {coords: [48.505175, 4.868449], icon: '🏡', title: 'Au lac du der', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Au lac du der" class="popup-image">
                        <h5>🏡 Au lac du der</h5>
            <p>
                🗺️ 1 rue de la Motte<br>
                52130 Voillecomte<br>
                                                <br><a href="https://www.booking.com/hotel/fr/au-lac-du-der.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Maison de 65m² rénovée avec terrasse et barbecue                            </p>
        </div>`, category: 'classic'},
        {coords: [48.63179, 4.649806], icon: '🏡', title: 'Au jardin de Victor', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Au jardin de Victor" class="popup-image">
                        <h5>🏡 Au jardin de Victor</h5>
            <p>
                🗺️ 32 rue de Moncetz<br>
                51290 Saint-Rémy-en-Bouzemont-Saint-Genest-et-Isson<br>
                                                <br><a href="https://www.booking.com/hotel/fr/au-jardin-de-victor.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Appartement climatisé de 36m² avec jardin terrasse                            </p>
        </div>`, category: 'classic'},
        {coords: [48.47720, 4.77572], icon: '🏡', title: 'Manoir romantique 8min du lac', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Manoir romantique 8min du lac" class="popup-image">
                        <h5>🏡 Manoir romantique 8min du lac</h5>
            <p>
                🗺️ 37 rue Audiffred<br>
                52220 Montier-en-der<br>
                                                <br><a href="https://www.booking.com/hotel/fr/manoir-romantique-8-mn-du-lac-et-2-heures-de-paris.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Manoir avec piscine - Billard - Pingpong - Jeux pour enfants                            </p>
        </div>`, category: 'classic'},
        {coords: [48.4737, 4.784547], icon: '🏡', title: 'La Varnière - B&amp;B with communal kitchen', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="La Varnière - B&amp;B with communal kitchen" class="popup-image">
                        <h5>🏡 La Varnière - B&amp;B with communal kitchen</h5>
            <p>
                🗺️ 2 La Varnière<br>
                52290 Montier-en-der<br>
                                                <br><a href="https://www.booking.com/hotel/fr/la-varniere.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Très belle maison commune avec jardin                            </p>
        </div>`, category: 'classic'},
        {coords: [48.476134, 4.771806], icon: '🏡', title: 'Maison Carteret', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Maison Carteret" class="popup-image">
                        <h5>🏡 Maison Carteret</h5>
            <p>
                🗺️ 6 rue Thibault<br>
                52290 Montier-en-der<br>
                                                <br><a href="https://www.booking.com/hotel/fr/la-maison-carteret.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Maison de 160m² avec parking                            </p>
        </div>`, category: 'classic'},
        {coords: [48.475319, 4.767951], icon: '🏡', title: 'Maison du bonheur', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Maison du bonheur" class="popup-image">
                        <h5>🏡 Maison du bonheur</h5>
            <p>
                🗺️ 46 rue des Ponts<br>
                52220 Montier-en-der<br>
                                                <br><a href="https://www.booking.com/hotel/fr/maison-du-bonheur-la-porte-du-der.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Maison de 100m² avec parking                            </p>
        </div>`, category: 'classic'},
        {coords: [48.476231, 4.885197], icon: '🏡', title: 'Gîte Tomettes et Colombages', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Gîte Tomettes et Colombages" class="popup-image">
                        <h5>🏡 Gîte Tomettes et Colombages</h5>
            <p>
                🗺️ 20 rue de l&#039;Heronne<br>
                52220 Laneuville-à-Rémy<br>
                                                <br><a href="https://www.booking.com/hotel/fr/maison-champenoise-proche-du-der-laneuville-a-remy.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Maison anciènne de 100m² avec terrasse et barbecue                            </p>
        </div>`, category: 'classic'},
        {coords: [48.57164, 4.67524], icon: '🏡', title: 'Au Milieu de Nulle Part Chambres au lac du Der', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Au Milieu de Nulle Part Chambres au lac du Der" class="popup-image">
                        <h5>🏡 Au Milieu de Nulle Part Chambres au lac du Der</h5>
            <p>
                🗺️ Lieudit La Pierre<br>
                51290 Outines<br>
                                <a href="tel:0667367493" class="popup-phone">📞 0667367493</a>
                                                <br><a href="https://www.au-milieu-de-nulle-part.com/fr" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Un site d&#039;exception en pleine nature avec différent type de logements                            </p>
        </div>`, category: 'classic'},
        {coords: [48.619528, 4.73381], icon: '🏡', title: 'Maison du lac', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Maison du lac" class="popup-image">
                        <h5>🏡 Maison du lac</h5>
            <p>
                🗺️ 7 chemin de la Côté Saint-Pierre<br>
                51290 Ecollement<br>
                                                <br><a href="https://www.booking.com/hotel/fr/maisons-du-lac-ecollemont.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Maison de 200m² avec jardin et parking                            </p>
        </div>`, category: 'classic'},
        {coords: [48.624092, 4.708123], icon: '🏡', title: 'Le Québec', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Le Québec" class="popup-image">
                        <h5>🏡 Le Québec</h5>
            <p>
                🗺️ 1C rue janson<br>
                51290 Arrigny<br>
                                                <br><a href="https://www.booking.com/hotel/fr/le-quebec.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Maison de 55m² avec Jardin - Restaurant - Bar                            </p>
        </div>`, category: 'classic'},
        {coords: [48.624099, 4.708130], icon: '🏡', title: 'La Plume', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="La Plume" class="popup-image">
                        <h5>🏡 La Plume</h5>
            <p>
                🗺️ 1 rue janson<br>
                51290 Arrigny<br>
                                                <br><a href="https://www.booking.com/hotel/fr/la-plume-arrigny1.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Appartement de 40m² avec jardin équipé barbecue                            </p>
        </div>`, category: 'classic'},
        {coords: [48.62566, 4.71046], icon: '🏡', title: 'Le Deroscope', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Le Deroscope" class="popup-image">
                        <h5>🏡 Le Deroscope</h5>
            <p>
                🗺️ 14 grande rue sur Blaise<br>
                51290 Arrigny<br>
                                <a href="tel:0326621715" class="popup-phone">📞 0326621715</a>
                                                <br><a href="https://www.lederoscope.fr/" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Maison de vacance de 150m² avec terrasse, barbecue - Parking                            </p>
        </div>`, category: 'classic'},
        {coords: [48.52263, 4.65805], icon: '🏡', title: 'Gîte des bulles', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Gîte des bulles" class="popup-image">
                        <h5>🏡 Gîte des bulles</h5>
            <p>
                🗺️ 7 rue qui boue Bailly-le-Franc<br>
                10330 Bailly-le-Franc<br>
                                <a href="tel:0619208165" class="popup-phone">📞 0619208165</a>
                                                <br><a href="https://www.lacduder.com/offres/gite-des-bulles-bailly-le-franc-fr-5521588/" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Maison rénovée avec piscine partagée                            </p>
        </div>`, category: 'classic'},
        {coords: [48.522577, 4.61346], icon: '🏡', title: 'Les Piafs du Der 2', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Les Piafs du Der 2" class="popup-image">
                        <h5>🏡 Les Piafs du Der 2</h5>
            <p>
                🗺️ 1 rue de la Pierre Levée<br>
                10330 Joncreuil<br>
                                                <br><a href="https://www.booking.com/hotel/fr/les-piafs-du-der-2.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Maison équipé d&#039;une piscine extérieur                            </p>
        </div>`, category: 'classic'},
        {coords: [48.55463, 4.65061], icon: '🏡', title: 'Gîte Le Courlis', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Gîte Le Courlis" class="popup-image">
                        <h5>🏡 Gîte Le Courlis</h5>
            <p>
                🗺️ 10 place de l&#039;église<br>
                51290 Outines<br>
                                <a href="tel:0611447412" class="popup-phone">📞 0611447412</a>
                                                <br><a href="https://www.clevacances.com/fr/hebergement/37775-gite-le-courlis-5-personnes-proche-lac-du-der-en-champagne" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Maison de 98m² rénovée avec petit-déjeuner                            </p>
        </div>`, category: 'classic'},
        {coords: [48.49490, 4.70082], icon: '🏡', title: 'Les Hirondelles', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Les Hirondelles" class="popup-image">
                        <h5>🏡 Les Hirondelles</h5>
            <p>
                🗺️ rue de l&#039;Eglise<br>
                52220 Puellemontier<br>
                                <a href="tel:0617930485" class="popup-phone">📞 0617930485</a>
                                                <br><a href="https://www.booking.com/hotel/fr/les-hirondelles-rives-dervoises.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Maison de 160m² avec jardin et barbecue - Parking                            </p>
        </div>`, category: 'classic'},
        {coords: [48.494957, 4.70063], icon: '🏡', title: 'La Grue Cendrée', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="La Grue Cendrée" class="popup-image">
                        <h5>🏡 La Grue Cendrée</h5>
            <p>
                🗺️ 3 rue de l&#039;Eglise<br>
                52220 Puellemontier<br>
                                                <br><a href="https://www.booking.com/hotel/fr/la-grue-cendree-les-gites-du-der.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Maison anciènne rénovée 100m avec terrasse et barbecue                            </p>
        </div>`, category: 'classic'},
        {coords: [48.55233, 4.91160], icon: '🏡', title: 'Gîte les Oiseaux', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Gîte les Oiseaux" class="popup-image">
                        <h5>🏡 Gîte les Oiseaux</h5>
            <p>
                🗺️ 6 rue du Four<br>
                52130 Louvemont<br>
                                <a href="tel:0684238278" class="popup-phone">📞 0684238278</a>
                                                <br><a href="https://www.gitesetcouvertdeslacs.com/" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Très grand et magnifique gîte de 360 avec Piscine                            </p>
        </div>`, category: 'classic'},
        {coords: [48.550981, 4.909879], icon: '🏡', title: 'La petite maison', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="La petite maison" class="popup-image">
                        <h5>🏡 La petite maison</h5>
            <p>
                🗺️ 3 Grande rue<br>
                52130 Louvemont<br>
                                                <br><a href="https://www.booking.com/hotel/fr/la-petite-maison-louvemont1.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Maison de 80m² avec terrasse et barbecue - Parking                            </p>
        </div>`, category: 'classic'},
        {coords: [48.436615, 4.723844], icon: '🏡', title: 'Nuit Champenoise Tout Confort', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Nuit Champenoise Tout Confort" class="popup-image">
                        <h5>🏡 Nuit Champenoise Tout Confort</h5>
            <p>
                🗺️ 16 rue du Cimetière<br>
                52220 Louze<br>
                                                <br><a href="https://www.booking.com/hotel/fr/nuit-champenoise-tout-confort.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Maison tout confort offre une vue sur le jardin                            </p>
        </div>`, category: 'classic'},
        {coords: [48.433092, 4.721351], icon: '🏡', title: 'De brique &amp; de bois', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="De brique &amp; de bois" class="popup-image">
                        <h5>🏡 De brique &amp; de bois</h5>
            <p>
                🗺️ 32 grande rue<br>
                52220 Louze<br>
                                                <br><a href="https://www.booking.com/hotel/fr/de-brique-amp-de-bois-lac-du-der.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Maison de 120m² avec jardin et parking                            </p>
        </div>`, category: 'classic'},
        {coords: [48.435673, 4.71602], icon: '🏡', title: 'La Gilbertine', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="La Gilbertine" class="popup-image">
                        <h5>🏡 La Gilbertine</h5>
            <p>
                🗺️ 10 rue d&#039;Enson la ville<br>
                52220 Louze<br>
                                                <br><a href="https://www.booking.com/hotel/fr/la-gilbertine.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Maison climatisée de 100m²                            </p>
        </div>`, category: 'classic'},
        {coords: [48.574724, 4.613546], icon: '🏡', title: 'Au Passage des Grues', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Au Passage des Grues" class="popup-image">
                        <h5>🏡 Au Passage des Grues</h5>
            <p>
                🗺️ 1 rue des salzards<br>
                51290 Drosnay<br>
                                                <br><a href="https://www.booking.com/hotel/fr/au-passage-des-grues.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>L’établissement sert un petit-déjeuner continental ou sans gluten                            </p>
        </div>`, category: 'classic'},
        {coords: [48.66785, 4.77992], icon: '🏡', title: 'La Fuste des Garceaux', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="La Fuste des Garceaux" class="popup-image">
                        <h5>🏡 La Fuste des Garceaux</h5>
            <p>
                🗺️ 1 rue de la Sablière  Lieu-dit les Garceaux<br>
                51300 Orconte<br>
                                                <br><a href="https://www.booking.com/hotel/fr/la-fuste-des-garceaux-orconte.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Maison avec jardin et parking                            </p>
        </div>`, category: 'classic'},
        {coords: [48.669804, 4.735698], icon: '🏡', title: 'Chambre d&#039;hôte lac du Der orconiat', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Chambre d&#039;hôte lac du Der orconiat" class="popup-image">
                        <h5>🏡 Chambre d&#039;hôte lac du Der orconiat</h5>
            <p>
                🗺️ 1 rue Henri Robert<br>
                51300 Orconte<br>
                                                <br><a href="https://www.booking.com/hotel/fr/lac-du-der-orconiat.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Chambre d hôte avec jardin et terrasse - Parking                            </p>
        </div>`, category: 'classic'},
        {coords: [48.544903, 4.923722], icon: '🏡', title: 'Appartement chez Lisa', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Appartement chez Lisa" class="popup-image">
                        <h5>🏡 Appartement chez Lisa</h5>
            <p>
                🗺️ 7 rue de la Fontaine Saint-Nicolas<br>
                52130 Louvemont<br>
                                                <br><a href="https://www.booking.com/hotel/fr/appartement-chez-lisa.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Appartement de 80m² avec parking                            </p>
        </div>`, category: 'classic'},
        {coords: [48.53648, 4.91444], icon: '🏡', title: 'Le Chatelier', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Le Chatelier" class="popup-image">
                        <h5>🏡 Le Chatelier</h5>
            <p>
                🗺️ 1 le Chatelier<br>
                52130 Louvemont<br>
                                                <br><a href="https://www.booking.com/hotel/fr/le-chatelier.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Très belle demeure de 180m² avec piscine                            </p>
        </div>`, category: 'classic'},
        {coords: [48.632664, 4.840884], icon: '🏡', title: 'La P&#039;tite Ambrièroise', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="La P&#039;tite Ambrièroise" class="popup-image">
                        <h5>🏡 La P&#039;tite Ambrièroise</h5>
            <p>
                🗺️ 19 rue de Laneuville<br>
                51290 Ambrières<br>
                                                <br><a href="https://www.booking.com/hotel/fr/la-p-tite-ambrieroise.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Maison de 70m² avec térrasse et barbecue - Parking                            </p>
        </div>`, category: 'classic'},
        {coords: [48.478403, 4.885908], icon: '🏡', title: 'Exclusive Lodge overlooking private lake', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Exclusive Lodge overlooking private lake" class="popup-image">
                        <h5>🏡 Exclusive Lodge overlooking private lake</h5>
            <p>
                🗺️ 22 rue de l&#039;Héronne<br>
                52220 Laneuville-à-Rémy<br>
                                                <br><a href="https://www.booking.com/hotel/fr/exclusive-lodge-overlooking-private-lake.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Chalet de 100m² au bord d&#039;un étang magnifique                            </p>
        </div>`, category: 'classic'},
        {coords: [48.651315, 4.81413], icon: '🏡', title: 'Chez Monique', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Chez Monique" class="popup-image">
                        <h5>🏡 Chez Monique</h5>
            <p>
                🗺️ 12 Petite rue<br>
                52100 Sapignicourt<br>
                                                <br><a href="https://www.booking.com/hotel/fr/chez-monique-sapignicourt.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Maison de 100m² avec parking                            </p>
        </div>`, category: 'classic'},
        {coords: [48.656139, 4.822858], icon: '🏡', title: 'Chez Brigitte et Francis', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Chez Brigitte et Francis" class="popup-image">
                        <h5>🏡 Chez Brigitte et Francis</h5>
            <p>
                🗺️ 14 Grande rue<br>
                52100 Perthes<br>
                                                <br><a href="https://www.booking.com/hotel/fr/chez-brigitte-et-francis-perthes1.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Maison de 45m² restaurée - Parking                            </p>
        </div>`, category: 'classic'},
        {coords: [48.461299, 4.84731], icon: '🏡', title: 'Maison chaleureuse à La Porte-du-Der', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Maison chaleureuse à La Porte-du-Der" class="popup-image">
                        <h5>🏡 Maison chaleureuse à La Porte-du-Der</h5>
            <p>
                🗺️ 5 bis rue Saint-Barthélémy<br>
                52220 Robert-Magny<br>
                                                <br><a href="https://www.booking.com/hotel/fr/maison-de-2-chambres-avec-jardin-clos-et-wifi-a-la-porte-du-der.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Maison anciènne rénovée 100m avec terrasse et barbecue                            </p>
        </div>`, category: 'classic'},
        {coords: [48.645091, 4.872765], icon: '🏡', title: 'Maison Campagne', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Maison Campagne" class="popup-image">
                        <h5>🏡 Maison Campagne</h5>
            <p>
                🗺️ <br>
                52100 Hallignicourt<br>
                                                <br><a href="https://www.booking.com/hotel/fr/maison-campagne-hallignicourt.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Maison de 90m² *** - Parking                            </p>
        </div>`, category: 'classic'},
        {coords: [48.505642, 4.876931], icon: '🏡', title: 'La Baroud&#039;ER', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="La Baroud&#039;ER" class="popup-image">
                        <h5>🏡 La Baroud&#039;ER</h5>
            <p>
                🗺️ 27 rue de la Motte<br>
                52130 Voillecomte<br>
                                                <br><a href="https://www.booking.com/hotel/fr/la-carabol-der.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Maison avec jardin, barbecue et parking                            </p>
        </div>`, category: 'classic'},
        {coords: [48.584218, 4.808217], icon: '🎪', title: 'Bateaux habitables Flotyll', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Bateaux habitables Flotyll" class="popup-image">
                        <h5>🎪 Bateaux habitables Flotyll</h5>
            <p>
                🗺️ Port de Nemours<br>
                52290 Sainte Livière<br>
                                <a href="tel:0689732118" class="popup-phone">📞 0689732118</a>
                                                <br><a href="https://flotyll.fr/" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Retrouvez-vous à bord de nos bateaux                            </p>
        </div>`, category: 'insolite'},
        {coords: [48.581359, 4.815219], icon: '🎪', title: 'Wigwam les Étoiles Pour Toile de Fond', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Wigwam les Étoiles Pour Toile de Fond" class="popup-image">
                        <h5>🎪 Wigwam les Étoiles Pour Toile de Fond</h5>
            <p>
                🗺️ Port de Nemours<br>
                52290 Sainte Livière<br>
                                                <br><a href="https://www.abritel.fr/location-vacances/p2009680" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Dormir dans une tente en forme de dôme avec vue sur le Lac du Der                            </p>
        </div>`, category: 'insolite'},
        {coords: [48.580947, 4.816674], icon: '🎪', title: 'Une yourte avec vue sur le lac du Der', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Une yourte avec vue sur le lac du Der" class="popup-image">
                        <h5>🎪 Une yourte avec vue sur le lac du Der</h5>
            <p>
                🗺️ Port de Nemours<br>
                52290 Sainte Livière<br>
                                                <br><a href="https://www.abritel.fr/location-vacances/p2009680" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Dormir dans une yourte comme un Nomades d&#039;Asie centrale au bord du Lac                            </p>
        </div>`, category: 'insolite'},
        {coords: [48.581369, 4.8114261], icon: '🎪', title: 'MESHUTES: le gite des nuits insolites', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="MESHUTES: le gite des nuits insolites" class="popup-image">
                        <h5>🎪 MESHUTES: le gite des nuits insolites</h5>
            <p>
                🗺️ Port de Nemours<br>
                52290 Sainte Livière<br>
                                                <br><a href="https://www.abritel.fr/location-vacances/p2009680" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Une sensation de dormir dehors : Yourtes, tipi, cabane sur pilotis, bulle                            </p>
        </div>`, category: 'insolite'},
        {coords: [48.55285, 4.779654], icon: '🎪', title: 'Ma Maison sur l&#039;Eau', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Ma Maison sur l&#039;Eau" class="popup-image">
                        <h5>🎪 Ma Maison sur l&#039;Eau</h5>
            <p>
                🗺️ Presqu&#039;ile de Rougemer<br>
                51290 Giffaumont-Champaubert<br>
                                <a href="tel:0789007384" class="popup-phone">📞 0789007384</a>
                                                <br><a href="https://mamaisonsurleau.com/" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Vous rêvez de dormir sur l&#039;eau ?                            </p>
        </div>`, category: 'insolite'},
        {coords: [48.551669, 4.771327], icon: '🎪', title: 'Les cabanes du lac du der', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Les cabanes du lac du der" class="popup-image">
                        <h5>🎪 Les cabanes du lac du der</h5>
            <p>
                🗺️ 3 Bis chemin des fontaines<br>
                51290 Giffaumont-Champaubert<br>
                                <a href="tel:0607590242" class="popup-phone">📞 0607590242</a>
                                                <br><a href="https://www.cabanesdulacduder.com/" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Il faut le faire une fois dans sa vie, c&#039;est magnifique !                            </p>
        </div>`, category: 'insolite'},
        {coords: [48.57163, 4.67523], icon: '🎪', title: 'La cabane aux Secrets', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="La cabane aux Secrets" class="popup-image">
                        <h5>🎪 La cabane aux Secrets</h5>
            <p>
                🗺️ Lieudit La Pierre<br>
                51290 Outines<br>
                                <a href="tel:0667367493" class="popup-phone">📞 0667367493</a>
                                                <br><a href="https://www.au-milieu-de-nulle-part.com/fr" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Un site d&#039;exception en pleine nature avec différent type de logements                            </p>
        </div>`, category: 'insolite'},
        {coords: [48.57207, 4.67509], icon: '🎪', title: 'La Roulottte des Elfes', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="La Roulottte des Elfes" class="popup-image">
                        <h5>🎪 La Roulottte des Elfes</h5>
            <p>
                🗺️ Lieudit La Pierre<br>
                51290 Outines<br>
                                <a href="tel:0667367493" class="popup-phone">📞 0667367493</a>
                                                <br><a href="https://www.au-milieu-de-nulle-part.com/fr" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Un site d&#039;exception en pleine nature avec différent type de logements                            </p>
        </div>`, category: 'insolite'},
        {coords: [48.52300, 4.65900], icon: '🎪', title: 'A l&#039;aube des sens', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="A l&#039;aube des sens" class="popup-image">
                        <h5>🎪 A l&#039;aube des sens</h5>
            <p>
                🗺️ 7 rue qui boue Bailly-le-Franc<br>
                10330 Bailly-le-Franc<br>
                                <a href="tel:0619208165" class="popup-phone">📞 0619208165</a>
                                                <br><a href="https://www.lacduder.com/offres/gite-des-bulles-bailly-le-franc-fr-5521588/" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Dormez dans une bulle avec piscine                            </p>
        </div>`, category: 'insolite'},
        {coords: [48.505542, 4.876831], icon: '🎪', title: 'La Carabol Der', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="La Carabol Der" class="popup-image">
                        <h5>🎪 La Carabol Der</h5>
            <p>
                🗺️ 27 rue de la Motte<br>
                52130 Voillecomte<br>
                                                <br><a href="https://www.booking.com/hotel/fr/la-carabol-der.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Tentez cette aventure en Caravane - Terrasse - Parking                            </p>
        </div>`, category: 'insolite'},
        {coords: [48.679144, 4.867097], icon: '🎪', title: 'Les Chalets du Parc', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Les Chalets du Parc" class="popup-image">
                        <h5>🎪 Les Chalets du Parc</h5>
            <p>
                🗺️ 2 impasse Du Parc<br>
                52100 Saint-Eulien<br>
                                                <br><a href="https://www.booking.com/hotel/fr/les-chalets-du-parc-st-eulien.fr.html" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Hébergement insolite climatisé avec terrasse                            </p>
        </div>`, category: 'insolite'},
        {coords: [48.542264, 4.908199], icon: '🏕️', title: 'Camping du Buisson', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Camping du Buisson" class="popup-image">
                        <h5>🏕️ Camping du Buisson</h5>
            <p>
                🗺️ Lieu dit, Le Buisson<br>
                52130 Louvemont<br>
                                <a href="tel:0684979331" class="popup-phone">📞 0684979331</a>
                                                <br><a href="https://www.camping-lac-du-der.com/" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Camping Nature 4 Etoiles avec Piscine chauffée - Aire de Jeux - Accrobranche                            </p>
        </div>`, category: 'camping'},
        {coords: [48.65164, 4.66600], icon: '🏕️', title: 'Camping sur la Route du Der', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Camping sur la Route du Der" class="popup-image">
                        <h5>🏕️ Camping sur la Route du Der</h5>
            <p>
                🗺️ D13<br>
                51290 Moncetz-l&#039;Abbaye<br>
                                <a href="tel:0326733663" class="popup-phone">📞 0326733663</a>
                                                <br><a href="https://sur-la-route-du-der.fr/" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Camping original &amp; familial 3 Etoiles - Aire de Jeux - Pétanque - Au bord de l&#039;etang                            </p>
        </div>`, category: 'camping'},
        {coords: [48.62443, 4.70421], icon: '🏕️', title: 'Camping Swin Golf', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Camping Swin Golf" class="popup-image">
                        <h5>🏕️ Camping Swin Golf</h5>
            <p>
                🗺️ 14 rue de Saint-Rémy-en-Bouzemont<br>
                51290 Arrigny<br>
                                <a href="tel:0326726034" class="popup-phone">📞 0326726034</a>
                                                <br><a href="https://pages.perso.orange.fr/camping-swin-golf" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Petit Camping à l&#039;anciènne                            </p>
        </div>`, category: 'camping'},
        {coords: [48.60424, 4.71489], icon: '🏕️', title: 'Camping de la forêt', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Camping de la forêt" class="popup-image">
                        <h5>🏕️ Camping de la forêt</h5>
            <p>
                🗺️ Presqu&#039;ile de Larzicourt<br>
                51290 Arrigny<br>
                                <a href="tel:0326740023" class="popup-phone">📞 0326740023</a>
                                                <br><a href="https://www.campingdelaforet.com/" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Camping 3 Etoiles avec piscine au bord du Lac du Der proche de la plage                            </p>
        </div>`, category: 'camping'},
        {coords: [48.59935, 4.79529], icon: '🏕️', title: 'Camping de la Cornée du Der', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Camping de la Cornée du Der" class="popup-image">
                        <h5>🏕️ Camping de la Cornée du Der</h5>
            <p>
                🗺️ 1 route de la Cornée - Petites Côtes<br>
                51290 Sainte-Marie-du-Lac-Nuisement<br>
                                <a href="tel:0326726623" class="popup-phone">📞 0326726623</a>
                                                <br><a href="https://www.camping-cornee-lac-du-der.com/fr/index" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Au bord du Lac du Der dans un écrin de verdure entre lac et forêt                            </p>
        </div>`, category: 'camping'},
        {coords: [48.57190, 4.84845], icon: '🏕️', title: 'Camping Yelloh!', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Camping Yelloh!" class="popup-image">
                        <h5>🏕️ Camping Yelloh!</h5>
            <p>
                🗺️ D384<br>
                52290 Braucourt<br>
                                <a href="tel:0466739739" class="popup-phone">📞 0466739739</a>
                                                <br><a href="https://www.yellohvillage.fr/camping/yelloh_en_champagne" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Camping 5 Etoiles avec piscine au bord du lac du Der proche de la plage                            </p>
        </div>`, category: 'camping'},
        {coords: [48.55405, 4.79217], icon: '🏕️', title: 'Camping de La Presqu&#039;île de Champaubert', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Camping de La Presqu&#039;île de Champaubert" class="popup-image">
                        <h5>🏕️ Camping de La Presqu&#039;île de Champaubert</h5>
            <p>
                🗺️ RD 153<br>
                52290 Braucourt<br>
                                <a href="tel:0325041320" class="popup-phone">📞 0325041320</a>
                                                <br><a href="https://www.campingpresquilechampaubert.fr/" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Camping au bord du Lac avec piscine, jeux, balade à pieds ou à vélo                            </p>
        </div>`, category: 'camping'},
        {coords: [48.55007, 4.77170], icon: '🏕️', title: 'Camping de La Plage', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Camping de La Plage" class="popup-image">
                        <h5>🏕️ Camping de La Plage</h5>
            <p>
                🗺️ Suivre station nautique 8 rue de la Cachotte<br>
                51290 Giffaumont-Champaubert<br>
                                <a href="tel:0665625135" class="popup-phone">📞 0665625135</a>
                                                <br><a href="https://www.camping-delaplage.fr/" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Camping en mobil-homes ou en campingcar près du port - Snack-bar                            </p>
        </div>`, category: 'camping'},
        {coords: [48.55761, 4.70614], icon: '🏕️', title: 'Le Clos du Vieux Moulin', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Le Clos du Vieux Moulin" class="popup-image">
                        <h5>🏕️ Le Clos du Vieux Moulin</h5>
            <p>
                🗺️ 33 rue du Lac<br>
                51290 Châtillon-sur-Broué<br>
                                <a href="tel:0326413043" class="popup-phone">📞 0326413043</a>
                                                <br><a href="https://www.leclosduvieuxmoulin.fr/" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Camping à 400m du Lac avec piscine, aire de jeux, pétanque, jeux video - Snack Bar                            </p>
        </div>`, category: 'camping'},
        {coords: [48.48838, 4.94939], icon: '🏕️', title: 'Camping des Lescheres Wassy', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Camping des Lescheres Wassy" class="popup-image">
                        <h5>🏕️ Camping des Lescheres Wassy</h5>
            <p>
                🗺️ rue Malarme<br>
                52130 Wassy<br>
                                <a href="tel:0771609790" class="popup-phone">📞 0771609790</a>
                                                <br><a href="https://www.bienvenue-hautemarne.fr/hebergements/wassy-camping-des-lescheres-hpacha051v50a1wy/" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Camping non classé très calme placé au bord de l&#039;eau pour la baignade, pêche - Snack                            </p>
        </div>`, category: 'camping'},
        {coords: [48.37675, 4.73830], icon: '🏕️', title: 'Camping La Croix Badeau', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Camping La Croix Badeau" class="popup-image">
                        <h5>🏕️ Camping La Croix Badeau</h5>
            <p>
                🗺️ 6 rue de la Croix Badeau<br>
                10200 Soulaines-Dhuys<br>
                                <a href="tel:0325272563" class="popup-phone">📞 0325272563</a>
                                                <br><a href="https://www.croix-badeau.com/" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Camping avec piscine. Emplacements pour Caravane, tente ou campingcar -Snack                            </p>
        </div>`, category: 'camping'},
        {coords: [48.69686, 4.63039], icon: '🏕️', title: 'Camping Nature', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Camping Nature" class="popup-image">
                        <h5>🏕️ Camping Nature</h5>
            <p>
                🗺️ 13 rue de l&#039;Evangile<br>
                51300 Luxémont-et-Villotte<br>
                                <a href="tel:0683428353" class="popup-phone">📞 0683428353</a>
                                                <br><a href="https://www.camping-nature.net/" target="_blank" style="color:#0891b2;">🌐 Site Web</a>
                                                <br><br>Camping au bord d&#039;un etang très calme                            </p>
        </div>`, category: 'camping'},
        
    // DÉMO Hotels avec photo et téléphone
    {coords: [48.553638, 4.767266], icon: '🏨', title: 'Hotel DÉMO', desc: `
        <div class="custom-popup">
            <img src="Votre_pub2.jpg" alt="Hotel DÉMO" class="popup-image">
            <h5>🏨 Hotel DÉMO</h5>
            <p>
                🗺️ 1 Avenue du Lac<br>
                51290 Lac du Der<br>
                <a href="tel:+33123456789" class="popup-phone">📞 03 26 12 34 56</a>
                <br><a href="../contact/contact.html" style="color:#0891b2;">🌐 Contactez-nous</a>
                <br><br>Hotel DÉMO avec carrousel photos - Exemple de présentation complète
            </p>
        </div>`, category: 'hotel'},
    {coords: [48.5654, 4.7412], icon: '🏡', title: 'Gîte DÉMO', desc: `
        <div class="custom-popup">
            <img src="Votre_pub.jpg" alt="Gîte DÉMO" class="popup-image">
            <h5>🏡 Gîte DÉMO</h5>
            <p>
                🗺️ Route du Lac<br>
                51290 Sainte-Marie-du-Lac-Nuisement<br>
                <a href="tel:+33123456789" class="popup-phone">📞 03 26 12 34 56</a>
                <br><a href="../contact/contact.html" style="color:#0891b2;">🌐 Contactez-nous</a>
                <br><br>Gîte DÉMO - Capacité 6 personnes
            </p>
        </div>`, category: 'classic'},
    {coords: [48.58209, 4.81104], icon: '🏕️', title: 'Camping DÉMO', desc: `
        <div class="custom-popup">
            <img src="Votre_pub.jpg" alt="Camping DÉMO" class="popup-image">
            <h5>🏕️ Camping DÉMO</h5>
            <p>
                🗺️ Route de la Plage<br>
                52220 Puellemontier<br>
                <a href="tel:+33123456789" class="popup-phone">📞 03 25 55 89 00</a>
                <br><a href="../contact/contact.html" style="color:#0891b2;">🌐 Contactez-nous</a>
                <br><br>Camping DÉMO avec accès direct plage
            </p>
        </div>`, category: 'camping'},
    {coords: [48.5789, 4.8234], icon: '🎪', title: 'Insolite DÉMO', desc: `
        <div class="custom-popup">
            <img src="Votre_pub.jpg" alt="Insolite DÉMO" class="popup-image">
            <h5>🎪 Insolite DÉMO</h5>
            <p>
                🗺️ Chemin des Cabanes<br>
                52290 Eclaron-Braucourt-Sainte-Livière<br>
                <a href="tel:+33123456789" class="popup-phone">📞 03 25 55 87 65</a>
                <br><a href="../contact/contact.html" style="color:#0891b2;">🌐 Contactez-nous</a>
                <br><br>Cabanes perchées DÉMO - Spa privatif
            </p>
        </div>`, category: 'insolite'},

    // Parkings
    {coords: [48.5544, 4.7657], icon: '🅿️', title: 'Parking', desc: 'Parking - Giffaumont Casino', category: 'parking'},
    {coords: [48.5529, 4.7656], icon: '🅿️', title: 'Parking', desc: 'Parking Principal - Giffaumont', category: 'parking'},
    {coords: [48.5505, 4.7711], icon: '🅿️', title: 'Parking', desc: 'Parking face Camping de la Plage - Giffaumont', category: 'parking'},
    {coords: [48.5530, 4.7759], icon: '🅿️', title: 'Parking', desc: 'Parking Port & Pêche Giffaumont', category: 'parking'},
    {coords: [48.5538, 4.7799], icon: '🅿️', title: 'Parking', desc: 'Parking Bassin Sud Digue et activité nautique', category: 'parking'},
    {coords: [48.5516, 4.7936], icon: '🅿️', title: 'Parking', desc: 'Parking plage - Presqu\'île de Champaubert', category: 'parking'},
    {coords: [48.5714, 4.8486], icon: '🅿️', title: 'Parking', desc: 'Parking plage - Sources du Lac', category: 'parking'},
    {coords: [48.5703, 4.8030], icon: '🅿️', title: 'Parking', desc: 'Parking de la brêche', category: 'parking'},
    {coords: [48.5820, 4.8099], icon: '🅿️', title: 'Parking', desc: 'Parking port de Nemours', category: 'parking'},
    {coords: [48.5925, 4.7985], icon: '🅿️', title: 'Parking', desc: 'Parking plage - De La Cornée Du Der', category: 'parking'},
    {coords: [48.6022, 4.7505], icon: '🅿️', title: 'Parking', desc: 'Parking port de Nuisement', category: 'parking'},
    {coords: [48.6040, 4.7480], icon: '🅿️', title: 'Parking', desc: 'Parking plage - Nuisement', category: 'parking'},
    {coords: [48.6037, 4.7158], icon: '🅿️', title: 'Parking', desc: 'Parking plage - \'île de Larzicourt', category: 'parking'},
    {coords: [48.5695, 4.7027], icon: '🅿️', title: 'Parking', desc: 'Parking observatoire ornithologique de Chantecoq', category: 'parking'}
];

console.log('📊 Total points:', pointsInteret.length);
console.log('🏨 Hotels:', pointsInteret.filter(p => p.category === 'hotel').length);

// ==================== AFFICHAGE DES MARQUEURS ====================

var markerGroups = {};
var defaultCategories = []; // VIDE = RIEN ne s'affiche par défaut

console.log('✅ Catégories par défaut:', defaultCategories);

pointsInteret.forEach(point => {
    var marker = L.marker(point.coords, {
        icon: L.divIcon({
            html: `<div style="font-size: 28px; text-shadow: 0 2px 4px rgba(0,0,0,0.3);">${point.icon}</div>`,
            className: 'custom-marker',
            iconSize: [30, 30],
            iconAnchor: [15, 15]
        })
    });

    marker.nom = point.title;  

    if (defaultCategories.includes(point.category)) {
        marker.addTo(map);
    }

    marker.bindPopup(point.desc, {
        maxWidth: 300,
        minWidth: 250,
        className: 'custom-leaflet-popup'
    });
    
    if (!markerGroups[point.category]) {
        markerGroups[point.category] = [];
    }
    markerGroups[point.category].push(marker);
});

const initialView = {
    center: [48.5640, 4.7680],
    zoom: 18
};

Object.values(markerGroups).forEach(group => {
    group.forEach(marker => {
        marker.on('click', function() {
            trackClick(`Hébergements-icone-${marker.nom}`, window.location.href);
        });
    });
});

// ==================== GESTION DES FILTRES ====================

document.querySelectorAll('.legend-item input[type="checkbox"]').forEach(checkbox => {
    checkbox.addEventListener('change', function() {
        const category = this.getAttribute('data-category');
        const isChecked = this.checked;
        
        // 🔵 TRACKING du changement de catégorie
        const categoryNames = {
            'hotel': 'Hotel',
            'classic': 'Gîte / Maison d\'hôtes',
            'camping': 'Camping',
            'insolite': 'Insolite'
        };
        const categoryName = categoryNames[category] || category;
        const action = isChecked ? 'Cochée' : 'Décochée';
        trackClick(`Hébergements Filtre-${categoryName}-${action}`, '#');
        
        const hebergementCategories = ['hotel', 'classic', 'camping', 'insolite'];
        
        if (hebergementCategories.includes(category)) {
            if (isChecked) {
                document.querySelectorAll('.legend-item input[type="checkbox"]').forEach(cb => {
                    const cbCategory = cb.getAttribute('data-category');
                    if (hebergementCategories.includes(cbCategory) && cbCategory !== category) {
                        cb.checked = false;
                        hideCategory(cbCategory);
                    }
                });
            }
            
            if (isChecked) {
                showCategory(category);
            } else {
                hideCategory(category);
            }
        } else {
            if (markerGroups[category]) {
                markerGroups[category].forEach(marker => {
                    isChecked ? map.addLayer(marker) : map.removeLayer(marker);
                });
            }
        }
    });
});


function showCategory(category) {
    console.log('✅ Affichage catégorie:', category);

    // RECENTRER LA CARTE SUR LE LAC DU DER + ZOOM
    map.setView([48.555727, 4.767527], 10);  
    
    const containerIds = {
        'hotel': 'restaurant-list-container',
        'classic': 'classic-list-container',
        'camping': 'camping-list-container',
        'insolite': 'insolite-list-container'
    };
    
    const listContainer = document.getElementById(containerIds[category]);
    console.log('📦 Container trouvé:', containerIds[category], listContainer ? 'OUI' : 'NON');
    
    if (listContainer) {
        // Mélanger les éléments pour chaque catégorie
        if (category === 'hotel') {
            forceResetRestaurants();
            shuffleRestaurants();
        } else if (category === 'classic') {
            shuffleGites();
        } else if (category === 'camping') {
            shuffleCampings();
        } else if (category === 'insolite') {
            shuffleInsolites();
        }
        
        listContainer.style.display = 'block';
        console.log('✅ Container affiché');
    }
    
    if (markerGroups[category]) {
        console.log('🗺️ Ajout de', markerGroups[category].length, 'marqueurs');
        markerGroups[category].forEach(marker => map.addLayer(marker));
    }
    
    setTimeout(function() {
        const mapSection = document.getElementById('map-section');
        if (mapSection) {
            mapSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
    }, 100);
}

function hideCategory(category) {
    console.log('❌ Masquage catégorie:', category);

    // RECENTRER LA CARTE SUR LE LAC DU DER + ZOOM
    map.setView([48.5738, 4.7583], 11);  
    
    const containerIds = {
        'hotel': 'restaurant-list-container',
        'classic': 'classic-list-container',
        'camping': 'camping-list-container',
        'insolite': 'insolite-list-container'
    };
    
    const listContainer = document.getElementById(containerIds[category]);
    if (listContainer) {
        listContainer.style.display = 'none';
        console.log('✅ Container masqué');
    }
    
    // RETIRER TOUS LES MARQUEURS DE CETTE CATÉGORIE
    if (markerGroups[category]) {
        console.log('🗺️ Retrait de', markerGroups[category].length, 'marqueurs');
        markerGroups[category].forEach(marker => {
            if (map.hasLayer(marker)) {
                map.removeLayer(marker);
            }
            // Retirer le flag temporaire si présent
            marker._isTemporary = false;
        });
    }
    
    // FERMER TOUTES LES POPUPS
    map.closePopup();
}


// ==================== FONCTIONS DE RESET ET RECHERCHE ====================
function forceResetRestaurants() {
    console.log('🔄 Reset des restaurants');
    const searchBar = document.getElementById('searchBar');
    if (searchBar) searchBar.value = "";

    const allItems = document.querySelectorAll('.hotel-item, .ad-card');
    allItems.forEach(item => {
        item.style.display = 'block';
    });

    if (markerGroups['hotel']) {
        markerGroups['hotel'].forEach(marker => {
            if (!map.hasLayer(marker)) {
                map.addLayer(marker);
            }
        });
    }

    map.closePopup();
}

// ========== MÉLANGE ALÉATOIRE DES HOTELS ==========
function shuffleRestaurants() {
    console.log('🎲 Mélange des restaurants');
    const listContainer = document.getElementById('dynamic-list');
    if (!listContainer) {
        console.error('❌ Container dynamic-list introuvable !');
        return;
    }
    
    const allItems = Array.from(listContainer.children);
    
    const demoRestaurant = allItems.find(item => 
        item.classList.contains('hotel-item') && 
        item.getAttribute('data-name') === 'Hotel Demo Carrousel'
    );
    
    const regularRestaurants = allItems.filter(item => 
        item.classList.contains('hotel-item') && 
        item.getAttribute('data-name') !== 'Hotel Demo Carrousel'
    );
    
    const ads = allItems.filter(item => item.classList.contains('ad-card'));
    
    // Mélanger les restaurants normaux avec la fonction shuffleArray
    const shuffledRestaurants = shuffleArray(regularRestaurants);
    
    listContainer.innerHTML = '';
    
    let restaurantCount = 0;
    let adIndex = 0;
    
    // Ajouter le premier restaurant régulier s'il existe
    if (shuffledRestaurants.length > 0) {
        listContainer.appendChild(shuffledRestaurants[0]);
        restaurantCount++;
    }
    
    // Ajouter le restaurant démo juste après le premier
    if (demoRestaurant) {
        listContainer.appendChild(demoRestaurant);
        console.log('✅ Hotel DÉMO ajouté en position 2');
    }
    
    // Ajouter les autres restaurants réguliers
    for (let i = 1; i < shuffledRestaurants.length; i++) {
        listContainer.appendChild(shuffledRestaurants[i]);
        restaurantCount++;
        
        // Insérer une pub tous les 4 restaurants
        if (restaurantCount > 0 && restaurantCount % 4 === 0 && adIndex < ads.length) {
            listContainer.appendChild(ads[adIndex]);
            adIndex++;
        }
    }
    
    // Ajouter les pubs restantes à la fin
    while (adIndex < ads.length) {
        listContainer.appendChild(ads[adIndex]);
        adIndex++;
    }
    
    console.log('✅ Hotels mélangés aléatoirement');
}

// ========== MÉLANGE ALÉATOIRE DES GÎTES ==========
function shuffleGites() {
    console.log('🎲 Mélange des gîtes');
    const listContainer = document.getElementById('dynamic-list-classic');
    if (!listContainer) {
        console.error('❌ Container dynamic-list-classic introuvable !');
        return;
    }
    
    const allItems = Array.from(listContainer.children);
    
    // Trouver l'élément démo
    const demoGite = allItems.find(item => 
        item.classList.contains('classic-item') && 
        item.getAttribute('data-name') === 'Gite Demo Les Oiseaux du Lac'
    );
    
    // Séparer les gîtes normaux et les pubs
    const regularGites = allItems.filter(item => 
        item.classList.contains('classic-item') && 
        item.getAttribute('data-name') !== 'Gite Demo Les Oiseaux du Lac'
    );
    
    const ads = allItems.filter(item => item.classList.contains('ad-card'));
    
    // Mélanger les gîtes normaux avec la fonction shuffleArray
    const shuffledGites = shuffleArray(regularGites);
    
    // Vider le container
    listContainer.innerHTML = '';
    
    let giteCount = 0;
    let adIndex = 0;
    
    // Ajouter le premier gîte régulier s'il existe
    if (shuffledGites.length > 0) {
        listContainer.appendChild(shuffledGites[0]);
        giteCount++;
    }
    
    // Ajouter le gîte démo en position 2
    if (demoGite) {
        listContainer.appendChild(demoGite);
        console.log('✅ Gîte DÉMO ajouté en position 2');
    }
    
    // Ajouter les autres gîtes réguliers
    for (let i = 1; i < shuffledGites.length; i++) {
        listContainer.appendChild(shuffledGites[i]);
        giteCount++;
        
        // Insérer une pub tous les 4 gîtes
        if (giteCount > 0 && giteCount % 4 === 0 && adIndex < ads.length) {
            listContainer.appendChild(ads[adIndex]);
            adIndex++;
        }
    }
    
    // Ajouter les pubs restantes à la fin
    while (adIndex < ads.length) {
        listContainer.appendChild(ads[adIndex]);
        adIndex++;
    }
    
    console.log('✅ Gîtes mélangés aléatoirement');
}

// ========== MÉLANGE ALÉATOIRE DES CAMPINGS ==========
function shuffleCampings() {
    console.log('🎲 Mélange des campings');
    const listContainer = document.getElementById('dynamic-list-camping');
    if (!listContainer) {
        console.error('❌ Container dynamic-list-camping introuvable !');
        return;
    }
    
    const allItems = Array.from(listContainer.children);
    
    // Trouver l'élément démo
    const demoCamping = allItems.find(item => 
        item.classList.contains('camping-item') && 
        item.getAttribute('data-name') === 'Camping Demo Lac de la Liez'
    );
    
    // Séparer les campings normaux et les pubs
    const regularCampings = allItems.filter(item => 
        item.classList.contains('camping-item') && 
        item.getAttribute('data-name') !== 'Camping Demo Lac de la Liez'
    );
    
    const ads = allItems.filter(item => item.classList.contains('ad-card'));
    
    // Mélanger les campings normaux avec la fonction shuffleArray
    const shuffledCampings = shuffleArray(regularCampings);
    
    // Vider le container
    listContainer.innerHTML = '';
    
    let campingCount = 0;
    let adIndex = 0;
    
    // Ajouter le premier camping régulier s'il existe
    if (shuffledCampings.length > 0) {
        listContainer.appendChild(shuffledCampings[0]);
        campingCount++;
    }
    
    // Ajouter le camping démo en position 2
    if (demoCamping) {
        listContainer.appendChild(demoCamping);
        console.log('✅ Camping DÉMO ajouté en position 2');
    }
    
    // Ajouter les autres campings réguliers
    for (let i = 1; i < shuffledCampings.length; i++) {
        listContainer.appendChild(shuffledCampings[i]);
        campingCount++;
        
        // Insérer une pub tous les 4 campings
        if (campingCount > 0 && campingCount % 4 === 0 && adIndex < ads.length) {
            listContainer.appendChild(ads[adIndex]);
            adIndex++;
        }
    }
    
    // Ajouter les pubs restantes à la fin
    while (adIndex < ads.length) {
        listContainer.appendChild(ads[adIndex]);
        adIndex++;
    }
    
    console.log('✅ Campings mélangés aléatoirement');
}

// ========== MÉLANGE ALÉATOIRE DES INSOLITES ==========
function shuffleInsolites() {
    console.log('🎲 Mélange des hébergements insolites');
    const listContainer = document.getElementById('dynamic-list-insolite');
    if (!listContainer) {
        console.error('❌ Container dynamic-list-insolite introuvable !');
        return;
    }
    
    const allItems = Array.from(listContainer.children);
    
    // Trouver l'élément démo
    const demoInsolite = allItems.find(item => 
        item.classList.contains('insolite-item') && 
        item.getAttribute('data-name') === 'Insolite Demo Cabanes des Grands Lacs'
    );
    
    // Séparer les insolites normaux et les pubs
    const regularInsolites = allItems.filter(item => 
        item.classList.contains('insolite-item') && 
        item.getAttribute('data-name') !== 'Insolite Demo Cabanes des Grands Lacs'
    );
    
    const ads = allItems.filter(item => item.classList.contains('ad-card'));
    
    // Mélanger les insolites normaux avec la fonction shuffleArray
    const shuffledInsolites = shuffleArray(regularInsolites);
    
    // Vider le container
    listContainer.innerHTML = '';
    
    let insoliteCount = 0;
    let adIndex = 0;
    
    // Ajouter le premier insolite régulier s'il existe
    if (shuffledInsolites.length > 0) {
        listContainer.appendChild(shuffledInsolites[0]);
        insoliteCount++;
    }
    
    // Ajouter l'insolite démo en position 2
    if (demoInsolite) {
        listContainer.appendChild(demoInsolite);
        console.log('✅ Insolite DÉMO ajouté en position 2');
    }
    
    // Ajouter les autres insolites réguliers
    for (let i = 1; i < shuffledInsolites.length; i++) {
        listContainer.appendChild(shuffledInsolites[i]);
        insoliteCount++;
        
        // Insérer une pub tous les 4 insolites
        if (insoliteCount > 0 && insoliteCount % 4 === 0 && adIndex < ads.length) {
            listContainer.appendChild(ads[adIndex]);
            adIndex++;
        }
    }
    
    // Ajouter les pubs restantes à la fin
    while (adIndex < ads.length) {
        listContainer.appendChild(ads[adIndex]);
        adIndex++;
    }
    
    console.log('✅ Insolites mélangés aléatoirement');
}


// Fonction pour normaliser le texte (enlever accents + minuscules)
function normalizeText(text) {
    if (!text) return '';
    return text
        .toLowerCase()
        .normalize('NFD')
        .replace(/[\u0300-\u036f]/g, '');
}

// ==================== FONCTION DE RECHERCHE GÉNÉRIQUE ====================
function setupSearch(searchBarId, itemClass, listContainerId) {
    document.getElementById(searchBarId)?.addEventListener('input', function(e) {
        console.log('🔍 Recherche:', e.target.value);
        const term = normalizeText(e.target.value);
        const items = document.querySelectorAll('.' + itemClass);
        const ads = document.querySelectorAll('#' + listContainerId + ' .ad-card');
        const listContainer = document.getElementById(listContainerId);
        
        if (term === '') {
            items.forEach(item => item.style.display = 'block');
            ads.forEach(ad => ad.style.display = 'block');
        } else {
            const visibleItems = [];
            items.forEach(item => {
                // Récupérer uniquement les paragraphes <p> et <h4>
                const titre = item.querySelector('h4') ? normalizeText(item.querySelector('h4').textContent) : '';
                const paragraphes = Array.from(item.querySelectorAll('p')).map(p => normalizeText(p.textContent)).join(' ');
                const allText = titre + ' ' + paragraphes;
                
                if (allText.includes(term)) {
                    visibleItems.push(item);
                    item.style.display = 'block';
                } else {
                    item.style.display = 'none';
                }
            });
            
            ads.forEach(ad => ad.style.display = 'none');
            
            if (visibleItems.length > 0 && ads.length > 0) {
                if (ads[0]) {
                    listContainer.insertBefore(ads[0], visibleItems[0]);
                    ads[0].style.display = 'block';
                }
                
                if (ads.length > 1) {
                    for (let i = 1; i < ads.length; i++) {
                        listContainer.appendChild(ads[i]);
                        ads[i].style.display = 'block';
                    }
                }
            }
        }
    });
}

// Initialiser toutes les recherches
setupSearch('searchBar', 'hotel-item', 'dynamic-list');
setupSearch('searchBarClassic', 'classic-item', 'dynamic-list-classic');
setupSearch('searchBarCamping', 'camping-item', 'dynamic-list-camping');
setupSearch('searchBarInsolite', 'insolite-item', 'dynamic-list-insolite');

// ==================== FONCTIONS DE CLEAR ====================
function clearSearchFilter() {
    const searchBar = document.getElementById('searchBar');
    if (searchBar) {
        searchBar.value = "";
        document.querySelectorAll('.hotel-item').forEach(item => item.style.display = 'block');
        document.querySelectorAll('#dynamic-list .ad-card').forEach(ad => ad.style.display = 'block');
    }
}

function clearSearchFilterClassic() {
    const searchBar = document.getElementById('searchBarClassic');
    if (searchBar) {
        searchBar.value = "";
        document.querySelectorAll('.classic-item').forEach(item => item.style.display = 'block');
        document.querySelectorAll('#dynamic-list-classic .ad-card').forEach(ad => ad.style.display = 'block');
    }
}
function clearSearchFilterCamping() {
    const searchBar = document.getElementById('searchBarCamping');
    if (searchBar) {
        searchBar.value = "";
        document.querySelectorAll('.camping-item').forEach(item => item.style.display = 'block');
        document.querySelectorAll('#dynamic-list-camping .ad-card').forEach(ad => ad.style.display = 'block');
    }
}
function clearSearchFilterInsolite() {
    const searchBar = document.getElementById('searchBarInsolite');
    if (searchBar) {
        searchBar.value = "";
        document.querySelectorAll('.insolite-item').forEach(item => item.style.display = 'block');
        document.querySelectorAll('#dynamic-list-insolite .ad-card').forEach(ad => ad.style.display = 'block');
    }
}

// ========== FONCTIONS CARROUSEL ==========
const carousels = {};

function initCarousel(carouselId) {
    if (!carousels[carouselId]) {
        carousels[carouselId] = {
            currentSlide: 0,
            totalSlides: document.querySelectorAll(`[data-carousel="${carouselId}"] .carousel-slide`).length
        };
    }
}

function changeSlide(carouselId, direction) {
    initCarousel(carouselId);
    const carousel = carousels[carouselId];
    const container = document.querySelector(`[data-carousel="${carouselId}"] .carousel-container`);
    const dots = document.querySelectorAll(`[data-carousel="${carouselId}"] .carousel-dot`);
    
    carousel.currentSlide += direction;
    /*
    if (carousel.currentSlide >= carousel.totalSlides) {
        carousel.currentSlide = 0;
    } else if (carousel.currentSlide < 0) {
        carousel.currentSlide = carousel.totalSlides - 1;
    }*/
   if (carousel.currentSlide >= carousel.totalSlides) {
    carousel.currentSlide = carousel.totalSlides - 1;
} else if (carousel.currentSlide < 0) {
    carousel.currentSlide = 0;
}
    
    const translateValue = -carousel.currentSlide * 100;
    container.style.transform = `translateX(${translateValue}%)`;
    
    dots.forEach((dot, index) => {
        dot.classList.toggle('active', index === carousel.currentSlide);
    });
}

function goToSlide(carouselId, slideIndex) {
    initCarousel(carouselId);
    const carousel = carousels[carouselId];
    const container = document.querySelector(`[data-carousel="${carouselId}"] .carousel-container`);
    const dots = document.querySelectorAll(`[data-carousel="${carouselId}"] .carousel-dot`);
    
    carousel.currentSlide = slideIndex;
    
    const translateValue = -carousel.currentSlide * 100;
    container.style.transform = `translateX(${translateValue}%)`;
    
    dots.forEach((dot, index) => {
        dot.classList.toggle('active', index === carousel.currentSlide);
    });
}

document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('[data-carousel]').forEach(carousel => {
        const carouselId = carousel.getAttribute('data-carousel');
        initCarousel(carouselId);
    });
    
    // Mélange initial de toutes les listes au chargement de la page
    console.log('🎲 Mélange initial de toutes les listes au chargement');
    shuffleRestaurants();
    shuffleGites();
    shuffleCampings();
    shuffleInsolites();
    console.log('✅ Toutes les listes ont été mélangées');
});


function zoomToRestaurant(coords, buttonElement) {
    console.log('🗺️ Zoom vers:', coords);
    
    // CENTRER UN PEU PLUS BAS (offset négatif = marqueur plus haut sur l'écran)
    var offsetLat = coords[0] + 0.002; // Décalage de ~220m vers le bas
    map.setView([offsetLat, coords[1]], 16);
    
    var markerFound = false;
    var markerToOpen = null;
    /*
    Object.values(markerGroups).forEach(group => {
        group.forEach(marker => {
            var markerLatLng = marker.getLatLng();
    */
   Object.values(markerGroups).forEach(group => {
    group.forEach(marker => {
        if (!marker || !marker.getLatLng) return;
        var markerLatLng = marker.getLatLng();       
            // Tolérance augmentée pour gérer les coordonnées avec 7 décimales
            var tolerance = 0.00001; // ~1 mètre de précision
            var latDiff = Math.abs(markerLatLng.lat - coords[0]);
            var lngDiff = Math.abs(markerLatLng.lng - coords[1]);
            
            console.log('🔍 Comparaison:', {
                'Marqueur': [markerLatLng.lat, markerLatLng.lng],
                'Recherché': coords,
                'Diff Lat': latDiff,
                'Diff Lng': lngDiff,
                'Match': (latDiff < tolerance && lngDiff < tolerance)
            });
            
            if (latDiff < tolerance && lngDiff < tolerance) {
                markerFound = true;
                markerToOpen = marker;
                console.log('✅ Marqueur trouvé');
            }
        });
    });
    
    // AJOUTER LE MARQUEUR SEULEMENT SI TROUVÉ ET OUVRIR LA POPUP
    if (markerToOpen) {
        if (!map.hasLayer(markerToOpen)) {
            console.log('⚠️ Marqueur pas sur la carte, on l\'ajoute temporairement');
            map.addLayer(markerToOpen);
            // Marquer comme temporaire pour le retirer plus tard
            markerToOpen._isTemporary = true;
        }
        // ENLEVER LE CLIGNOTEMENT - juste ouvrir la popup
        markerToOpen.openPopup();
    }
    
    if (!markerFound) {
        console.log('❌ Marqueur non trouvé');
    }
    
    const mapSection = document.getElementById('map-section');
    if (mapSection) {
        mapSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
}


// ==================== GÉOLOCALISATION ====================

var userMarker = null;
var userCircle = null;

function localiserUtilisateur() {
    const btn = document.getElementById('locateBtn');
    
    if (!navigator.geolocation) {
        alert('❌ La géolocalisation n\'est pas supportée par votre navigateur.');
        return;
    }
    
    btn.disabled = true;
    btn.innerHTML = '<span class="locate-icon">⏳</span><span>Localisation...</span>';
    
    navigator.geolocation.getCurrentPosition(
        function(position) {
            const lat = position.coords.latitude;
            const lng = position.coords.longitude;
            const accuracy = position.coords.accuracy;
            
            if (userMarker) {
                map.removeLayer(userMarker);
            }
            if (userCircle) {
                map.removeLayer(userCircle);
            }
            
            userMarker = L.marker([lat, lng], {
                icon: L.divIcon({
                    html: `<div style="font-size: 32px; text-shadow: 0 2px 4px rgba(0,0,0,0.3);">📍</div>`,
                    className: 'custom-marker',
                    iconSize: [32, 32],
                    iconAnchor: [16, 16]
                })
            }).addTo(map);
            
            userMarker.bindPopup(`
                <div class="custom-popup">
                    <h5>📍 Vous êtes ici</h5>
                    <p>Précision : ${Math.round(accuracy)} mètres</p>
                </div>
            `).openPopup();
            
            userCircle = L.circle([lat, lng], {
                radius: accuracy,
                color: '#0891b2',
                fillColor: '#06b6d4',
                fillOpacity: 0.2,
                weight: 2
            }).addTo(map);
            
            map.setView([lat, lng], 14);
            
            btn.disabled = false;
            btn.innerHTML = '<span class="locate-icon">✅</span><span>Position trouvée</span>';
            
            setTimeout(() => {
                btn.innerHTML = '<span class="locate-icon">📍</span><span>Me localiser</span>';
            }, 3000);
        },
        function(error) {
            let message = '';
            switch(error.code) {
                case error.PERMISSION_DENIED:
                    message = '❌ Vous avez refusé l\'accès à votre position.';
                    break;
                case error.POSITION_UNAVAILABLE:
                    message = '❌ Votre position n\'est pas disponible.';
                    break;
                case error.TIMEOUT:
                    message = '⏱️ La recherche de position a pris trop de temps.';
                    break;
                default:
                    message = '❌ Une erreur est survenue lors de la localisation.';
            }
            
            alert(message);
            
            btn.disabled = false;
            btn.innerHTML = '<span class="locate-icon">📍</span><span>Me localiser</span>';
        },
        {
            enableHighAccuracy: true,
            timeout: 10000,
            maximumAge: 0
        }
    );
}

// ========== MODAL IMAGE ==========

function openMenuModal(imageUrl, restaurantName) {
    const modal = document.getElementById('menuModal');
    const modalImage = document.getElementById('menuImage');
    
    modalImage.src = imageUrl;
    modalImage.alt = 'Menu ' + restaurantName;
    modal.classList.add('active');
    
    document.body.style.overflow = 'hidden';
    
    trackClick('Hébergements Option-' + restaurantName, window.location.href);
}

function closeMenuModal() {
    const modal = document.getElementById('menuModal');
    modal.classList.remove('active');
    
    document.body.style.overflow = 'auto';
}

document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') {
        closeMenuModal();
    }
});

// ==================== BOUTON LISTE FLOTTANT ====================

document.addEventListener('DOMContentLoaded', function() {
    const checkboxes = document.querySelectorAll('input[data-category="hotel"], input[data-category="classic"], input[data-category="camping"], input[data-category="insolite"]');
    
    checkboxes.forEach(function(checkbox) {
        checkbox.addEventListener('change', function() {
            const boutonExistant = document.getElementById('btn-liste-bas');
            
            const auMoinsUneCochee = Array.from(checkboxes).some(cb => cb.checked);
            
            if (auMoinsUneCochee) {
                if (boutonExistant) return;
                
                const bouton = document.createElement('button');
                bouton.id = 'btn-liste-bas';
                bouton.textContent = 'Liste en bas';
                bouton.style.cssText = `
                    position: fixed;
                    bottom: 20px;
                    right: 20px;
                    padding: 15px 25px;
                    background: linear-gradient(135deg, #cfc535 0%, #fabb0c 100%); 
                    color: white;
                    border: none;
                    border-radius: 50px;
                    font-size: 16px;
                    font-weight: bold;
                    cursor: pointer;
                    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
                    z-index: 999999;
                    animation: clignoter 1.5s infinite;
                    transition: transform 0.2s;
                `;
                
                if (!document.getElementById('style-clignoter')) {
                    const style = document.createElement('style');
                    style.id = 'style-clignoter';
                    style.textContent = `
                        @keyframes clignoter {
                            0%, 100% { opacity: 1; }
                            50% { opacity: 0.5; }
                        }
                        #btn-liste-bas:hover {
                            transform: scale(1.05);
                        }
                    `;
                    document.head.appendChild(style);
                }
                
                //remonte à la div id debut-listes
                bouton.onclick = function() {
    const target = document.getElementById('debut-listes');
    if (target) {
        target.scrollIntoView({ 
            behavior: 'smooth', 
            block: 'start' 
        });
    }
};
                
                document.body.appendChild(bouton);
                
            } else {
                if (boutonExistant) {
                    boutonExistant.remove();
                }
            }
        });
    });
});

</script>

<!-- 1. Vérification PWA (bloque si pas installé) -->
<script src="/alerte_meteo_webapp/js/pwa-check.js"></script>
<!-- ID crypté tjrs avant gps-->
<script src="/alerte_meteo_webapp/js/utils_userid.js"></script>
<!-- SCRIPT GPS & TRACKING -->
<script src="/alerte_meteo_webapp/js/gps-track.js"></script>
<!-- No cache image en js -->
<script src="/alerte_meteo_webapp/js/no-cache.js"></script>

</body>
</html>