<!-- DEBUG CSV -->
<!-- Fichier CSV: activites_data.csv -->
<!-- Fichier existe: OUI -->
<!-- Taille fichier: 20461 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: extérieur - Champ'ânes -->
<!-- Ligne 3: extérieur - Escape Game - Le Der sauve Paris -->
<!-- Ligne 4: extérieur - Observatoire ornithologique de l'Etang du Grand Coulon -->
<!-- Ligne 5: extérieur - Ranch du Pont Urgin -->
<!-- Ligne 6: extérieur - Maison des Pêcheurs -->
<!-- Ligne 7: extérieur - Nomad'Ride - Location de vélos -->
<!-- Ligne 8: extérieur - Heaven Bike -->
<!-- Ligne 9: extérieur - Le Train du Der -->
<!-- Ligne 10: extérieur - Chez Caroline Sophro - Bien-être et Sophrologie -->
<!-- Ligne 11: extérieur - L'Escale Dorée -->
<!-- Ligne 12: extérieur - Ferme Pédagogique du Grand Der -->
<!-- Ligne 13: extérieur - ROUL'ÔDER -->
<!-- Ligne 14: extérieur - Didier du Val - Randonnées découvertes du Pays du Der -->
<!-- Ligne 15: extérieur - Les Amis de la Pêche -->
<!-- Ligne 16: extérieur - Centre Equestre de la Contance -->
<!-- Ligne 17: extérieur - Swin Golf de la Flage -->
<!-- Ligne 18: extérieur - Accrobranche - Parc Aventure Domaine du Buisson -->
<!-- Ligne 19: extérieur - Ferme aux Grues -->
<!-- Ligne 20: extérieur - Accrobranche - Accro Der -->
<!-- Ligne 21: extérieur - Etang des Leschères -->
<!-- Ligne 22: extérieur - Mini-cars du Der - Karting enfant -->
<!-- Ligne 23: extérieur - Escape Game - La Dame du Lac -->
<!-- Ligne 24: extérieur - Aube ULM Services -->
<!-- Ligne 25: extérieur - Pumptrack Saint-Dizier -->
<!-- Ligne 26: extérieur - Mini Park Toons Land -->
<!-- Ligne 27: extérieur - Fantasti Golf -->
<!-- Ligne 28: extérieur - L'âne cœur -->
<!-- Ligne 29: extérieur - VAUCLERC Aviation - Baptêmes de l'air -->
<!-- Ligne 30: extérieur - Aéroclub de SAINT-DIZIER - ROBINSON -->
<!-- Ligne 31: extérieur - Golf de Combles en Barrois -->
<!-- Ligne 32: intérieur - Centre Aquatique La Salamandre -->
<!-- Ligne 33: intérieur - Der Game -->
<!-- Ligne 34: intérieur - Bowling Starting Point 52 -->
<!-- Ligne 35: intérieur - Espace Zen et Flottaison -->
<!-- Ligne 36: intérieur - Casino JOA du Lac du Der -->
<!-- Ligne 37: intérieur - Massages Villarais -->
<!-- Ligne 38: intérieur - Multiplexe Ciné Quai - Cinéma -->
<!-- Ligne 39: intérieur - Cinéma Pierre Brasseur -->
<!-- Ligne 40: nautisme - Bateau Ecole Jean Jaurès -->
<!-- Ligne 41: nautisme - Bateau de promenade - Au Fil de l'Eau -->
<!-- Ligne 42: nautisme - FunCenter - Locations de Jet-Skis -->
<!-- Ligne 43: nautisme - Ligue de l'Enseignement FOL 55 -->
<!-- Ligne 44: nautisme - Nomad'Ride -->
<!-- Ligne 45: nautisme - Maison des Pêcheurs -->
<!-- Ligne 46: nautisme - PLAYA REGAT'Ô -->
<!-- Ligne 47: nautisme - Batel Plaisance -->
<!-- Ligne 48: nautisme - Club voile et vent (C.V.V.) - Club de voile -->
<!-- Ligne 49: nautisme - Ecole départementale de voile de Braucourt -->
<!-- Ligne 50: nautisme - FunCenter - Locations -->
<!-- Ligne 51: nautisme - FunCenter - Bouées tractées -->
<!-- Ligne 52: nautisme - PLAYA REGAT'Ô - Location de pédalos -->
<!-- Ligne 53: nautisme - PEDAL' Ô DER - location de pédalos et paddles -->
<!-- Ligne 54: nautisme - La Flotte du Der -->
<!-- Ligne 55: nautisme - Aquader - parc aquatique gonflable -->
<!-- Ligne 56: culturel - Village Musée du Der -->
<!-- Ligne 57: culturel - Musée de Saint-Dizier -->
<!-- Ligne 58: culturel - Muse Saint-Dizier -->
<!-- Ligne 59: culturel - Metallurgic Park -->
<!-- Ligne 60: culturel - L'Ecole d'Autrefois -->
<!-- Ligne 61: culturel - Au Petit Paris -->
<!-- Ligne 62: culturel - Centre Socioculturel de Saint-Dizier -->
<!-- Ligne 63: culturel - Conservatoire -->
<!-- Ligne 64: culturel - Studio d'enregistrement -->
<!-- Ligne 65: culturel - Bords 2 Scènes - L'Orange Bleue -->
<!-- Ligne 66: culturel - Musée de la Batellerie -->
<!-- Ligne 67: culturel - Musée Barrois - Bar-le-Duc -->
<!-- Total activités lus: 66 -->
<!-- Extérieur: 30 -->
<!-- Intérieur: 8 -->
<!-- Nautisme: 16 -->
<!-- Culturel: 12 -->
<!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="#a855f7">
<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>Sorties & Activités - 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, #a855f7, #9333ea); 
    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: #a855f7;
    padding: 12px 20px;
    border-radius: 12px;
    border: 2px solid #9333ea;
    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: #9333ea;
    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, #a855f7, #9333ea);
    color: white;
    border: 2px solid #9333ea;
    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: #a855f7;
}

.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 #9333ea;
}

.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: contain !important; /*ori : 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: contain !important; /*ori : cover; */
    background: white;
}
}

.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: #a855f7;
    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: #a855f7;
    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: #9333ea;
    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: contain !important; /* ori cover */
    border-radius: 10px;
    display: block;
    background: white;
}

.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 #9333ea;
    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>Sorties & Activités</h1>
        <div class="subtitle">Découvrez nos activités autour du lac</div>
    </div>

    <!-- PUB -->
    <a href="../contact/contact_pro.html" target="_blank" 
       onclick="trackClick('Sorties & Activités Clic-Pub', '#');" 
       style="display: block; text-align: center;">
        <img src="activités_pub.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('Sorties & Activités 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="extérieur">
                <input type="checkbox" data-category="extérieur">
                <span class="legend-icon">🌳</span>
                <span>Extérieur</span>
            </label>

            <label class="legend-item" data-category="intérieur">
                <input type="checkbox" data-category="intérieur">
                <span class="legend-icon">🏠</span>
                <span>Intérieur</span>
            </label>
           
            <label class="legend-item" data-category="nautisme">
                <input type="checkbox" data-category="nautisme">
                <span class="legend-icon">⛵</span>
                <span>Sur l'eau</span>
            </label>
            
            <label class="legend-item" data-category="culturel">
                <input type="checkbox" data-category="culturel">
                <span class="legend-icon">🎨</span>
                <span>Culturel</span>
            </label>
        </div>

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

        <div id="debut-listes"></div>
    <!-- ========== LISTE EXTéRIEUR ========== -->
    <div id="exterieur-list-container" style="display: none; margin-top: 20px;">
        <div class="map-title">
            <div class="map-title-content" >
                <h2>🌳 Liste des Extérieur</h2>
                <div style="display: flex; gap: 10px; align-items: center;">
                    <input type="text" id="searchBarExterieur" placeholder="Rechercher..." style="flex: 1; padding: 10px 15px; font-size: 16px;" onclick="trackClick('Sorties & Activités Extérieur Recherche dans liste', '#')">
                    <button class="btn-clear-filter" onclick="clearSearchFilterExtérieur(); trackClick('Sorties & Activités Extérieur Effacer recherche', '#')">🔄 Effacer filtre</button>
                </div>
            </div>
        </div>

        <div id="dynamic-list-exterieur">
            <div class="exterieur-item" data-name="Champ'ânes">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🌳 Champ'ânes</h4>
                                                <p>🗺️ 6 chemin de la Hayotte<br>51290 Outines</p>
                                                <p>📞 0326721566</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0326721566" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Champ\'ânes', 'tel:0326721566')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0326721566" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Champ\'ânes', 'tel:0326721566')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.au-milieu-de-nulle-part.com/fr" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Champ\'ânes', '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('Sorties & Activités Extérieur-Liste-Site-Champ\'ânes', 'https://www.au-milieu-de-nulle-part.com/fr')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.57174, 4.67476], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Champ\'ânes', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.57174, 4.67476], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Champ\'ânes', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Champ&#039;ânes'); trackClick('Sorties & Activités Extérieur-Liste-photos-Champ&#039;ânes', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Champ\'ânes'); trackClick('Sorties & Activités Extérieur-Liste-options-Champ\'ânes', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Champ\'ânes'); trackClick('Sorties & Activités Extérieur-Liste-options-Champ\'ânes', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Adoptez un âne le temps d&#039;une randonnée autour du lac du Der ! À la journée, ou sur 2 jours.                                                <br>A partir de 70€                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Champ'ânes" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="exterieur-item" data-name="Escape Game - Le Der sauve Paris">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🌳 Escape Game - Le Der sauve Paris</h4>
                                                <p>🗺️ 1 bis rue de la Cachotte Station Nautique<br>51290 Giffaumont-Champaubert</p>
                                                <p>📞 0326726280</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0326726280" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Escape Game - Le Der sauve Paris', 'tel:0326726280')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0326726280" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Escape Game - Le Der sauve Paris', 'tel:0326726280')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.escapegamelacduder.com/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Escape Game - Le Der sauve Paris', 'https://www.escapegamelacduder.com/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.escapegamelacduder.com/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Escape Game - Le Der sauve Paris', 'https://www.escapegamelacduder.com/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.55374, 4.76792], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Escape Game - Le Der sauve Paris', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.55374, 4.76792], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Escape Game - Le Der sauve Paris', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Escape Game - Le Der sauve Paris'); trackClick('Sorties & Activités Extérieur-Liste-photos-Escape Game - Le Der sauve Paris', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Escape Game - Le Der sauve Paris'); trackClick('Sorties & Activités Extérieur-Liste-options-Escape Game - Le Der sauve Paris', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Escape Game - Le Der sauve Paris'); trackClick('Sorties & Activités Extérieur-Liste-options-Escape Game - Le Der sauve Paris', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Vivez un escape game en plein air exclusif en toute autonomie et sauvez Paris de l&#039;inondation !                                                <br>Tarif groupes 20€ (entre 2 et 6 personnes)                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Escape Game - Le Der sauve Paris" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="exterieur-item" data-name="Observatoire ornithologique de l'Etang du Grand Coulon">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🌳 Observatoire ornithologique de l'Etang du Grand Coulon</h4>
                                                <p>🗺️ <br>51290 Outines</p>
                                                <p>📞 0326726280</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0326726280" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Observatoire ornithologique de l\'Etang du Grand Coulon', 'tel:0326726280')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0326726280" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Observatoire ornithologique de l\'Etang du Grand Coulon', 'tel:0326726280')">📞 Appeler</a>
                                                                                    <!-- <button onclick="zoomToRestaurant([48.56098, 4.68730], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Observatoire ornithologique de l\'Etang du Grand Coulon', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.56098, 4.68730], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Observatoire ornithologique de l\'Etang du Grand Coulon', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Observatoire ornithologique de l&#039;Etang du Grand Coulon'); trackClick('Sorties & Activités Extérieur-Liste-photos-Observatoire ornithologique de l&#039;Etang du Grand Coulon', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Observatoire ornithologique de l\'Etang du Grand Coulon'); trackClick('Sorties & Activités Extérieur-Liste-options-Observatoire ornithologique de l\'Etang du Grand Coulon', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Observatoire ornithologique de l\'Etang du Grand Coulon'); trackClick('Sorties & Activités Extérieur-Liste-options-Observatoire ornithologique de l\'Etang du Grand Coulon', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Au cœur de la nature, à la rencontre des oiseaux.                                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Observatoire ornithologique de l'Etang du Grand Coulon" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="exterieur-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('Sorties & Activités Extérieur-Liste-Appeler-Ranch du Pont Urgin', 'tel:0637983017')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0637983017" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Ranch du Pont Urgin', 'tel:0637983017')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.facebook.com/p/Ranch-du-Pont-Urgin-100057491527736/?locale=fr_FR" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Ranch du Pont Urgin', 'https://www.facebook.com/p/Ranch-du-Pont-Urgin-100057491527736/?locale=fr_FR')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.facebook.com/p/Ranch-du-Pont-Urgin-100057491527736/?locale=fr_FR" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Ranch du Pont Urgin', 'https://www.facebook.com/p/Ranch-du-Pont-Urgin-100057491527736/?locale=fr_FR')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.50952, 4.79503], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Ranch du Pont Urgin', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.50952, 4.79503], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Ranch du Pont Urgin', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Ranch du Pont Urgin'); trackClick('Sorties & Activités Extérieur-Liste-photos-Ranch du Pont Urgin', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Ranch du Pont Urgin'); trackClick('Sorties & Activités Extérieur-Liste-options-Ranch du Pont Urgin', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Ranch du Pont Urgin'); trackClick('Sorties & Activités Extérieur-Liste-options-Ranch du Pont Urgin', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Le Ranch du Pont Urgin propose des balades à cheval ou à poney accompagnées par Caroline, guide équestre diplômée.                                                    </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="exterieur-item" data-name="Maison des Pêcheurs">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🌳 Maison des Pêcheurs</h4>
                                                <p>🗺️ 5 Chemin des Milleperthuis Station Nautique<br>51290 Giffaumont-Champaubert</p>
                                                <p>📞 0326726343</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0326726343" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Maison des Pêcheurs', 'tel:0326726343')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0326726343" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Maison des Pêcheurs', 'tel:0326726343')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.pecheauder.com/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Maison des Pêcheurs', 'https://www.pecheauder.com/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.pecheauder.com/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Maison des Pêcheurs', 'https://www.pecheauder.com/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.55390, 4.77627], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Maison des Pêcheurs', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.55390, 4.77627], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Maison des Pêcheurs', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Maison des Pêcheurs'); trackClick('Sorties & Activités Extérieur-Liste-photos-Maison des Pêcheurs', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Maison des Pêcheurs'); trackClick('Sorties & Activités Extérieur-Liste-options-Maison des Pêcheurs', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Maison des Pêcheurs'); trackClick('Sorties & Activités Extérieur-Liste-options-Maison des Pêcheurs', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>out sur la pêche au bord et sur le lac du Der                                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Maison des Pêcheurs" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="exterieur-item" data-name="Nomad'Ride - Location de vélos">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🌳 Nomad'Ride - Location de vélos</h4>
                                                <p>🗺️ 6 rue des Bois<br>51290 Sainte-Marie-du-Lac-Nuisement</p>
                                                <p>📞 0632203416</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0632203416" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Nomad\'Ride - Location de vélos', 'tel:0632203416')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0632203416" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Nomad\'Ride - Location de vélos', 'tel:0632203416')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.nomadride.fr/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Nomad\'Ride - Location de vélos', 'https://www.nomadride.fr/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.nomadride.fr/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Nomad\'Ride - Location de vélos', 'https://www.nomadride.fr/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.60564, 4.77474], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Nomad\'Ride - Location de vélos', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.60564, 4.77474], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Nomad\'Ride - Location de vélos', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Nomad&#039;Ride - Location de vélos'); trackClick('Sorties & Activités Extérieur-Liste-photos-Nomad&#039;Ride - Location de vélos', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Nomad\'Ride - Location de vélos'); trackClick('Sorties & Activités Extérieur-Liste-options-Nomad\'Ride - Location de vélos', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Nomad\'Ride - Location de vélos'); trackClick('Sorties & Activités Extérieur-Liste-options-Nomad\'Ride - Location de vélos', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Location de vélo                                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Nomad'Ride - Location de vélos" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="exterieur-item" data-name="Heaven Bike">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🌳 Heaven Bike</h4>
                                                <p>🗺️ Station Nautique<br>51290 Giffaumont-Champaubert</p>
                                                <p>📞 0649468974</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0649468974" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Heaven Bike', 'tel:0649468974')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0649468974" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Heaven Bike', 'tel:0649468974')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.heavenbike.com/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Heaven Bike', 'https://www.heavenbike.com/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.heavenbike.com/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Heaven Bike', 'https://www.heavenbike.com/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.55096, 4.77316], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Heaven Bike', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.55096, 4.77316], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Heaven Bike', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Heaven Bike'); trackClick('Sorties & Activités Extérieur-Liste-photos-Heaven Bike', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Heaven Bike'); trackClick('Sorties & Activités Extérieur-Liste-options-Heaven Bike', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Heaven Bike'); trackClick('Sorties & Activités Extérieur-Liste-options-Heaven Bike', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Location de Rosalies, vélos classiques ou électriques, vélos enfant, remorques, Tricycles adaptés PMR                                                <br>Rosalies de 4 à 6 places                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Heaven Bike" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="exterieur-item" data-name="Le Train du Der">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🌳 Le Train du Der</h4>
                                                <p>🗺️ Station Nautique<br>51290 Giffaumont-Champaubert</p>
                                                <p>📞 0616723504</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0616723504" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Le Train du Der', 'tel:0616723504')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0616723504" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Le Train du Der', 'tel:0616723504')">📞 Appeler</a>
                                                                                    <!-- <button onclick="zoomToRestaurant([48.55458, 4.76834], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Le Train du Der', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.55458, 4.76834], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Le Train du Der', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Le Train du Der'); trackClick('Sorties & Activités Extérieur-Liste-photos-Le Train du Der', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Le Train du Der'); trackClick('Sorties & Activités Extérieur-Liste-options-Le Train du Der', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Le Train du Der'); trackClick('Sorties & Activités Extérieur-Liste-options-Le Train du Der', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Partez de la Station Nautique, pour une visite guidée d&#039;une heure sur la digue panoramique.                                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Le Train du Der" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="exterieur-item" data-name="Chez Caroline Sophro - Bien-être et Sophrologie">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🌳 Chez Caroline Sophro - Bien-être et Sophrologie</h4>
                                                <p>🗺️ 27 Rue de la Mairie<br>51290 Arzillières-Neuville</p>
                                                <p>📞 0688490439</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0688490439" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Chez Caroline Sophro - Bien-être et Sophrologie', 'tel:0688490439')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0688490439" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Chez Caroline Sophro - Bien-être et Sophrologie', 'tel:0688490439')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.chezcaroline-sophro.fr/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Chez Caroline Sophro - Bien-être et Sophrologie', 'https://www.chezcaroline-sophro.fr/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.chezcaroline-sophro.fr/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Chez Caroline Sophro - Bien-être et Sophrologie', 'https://www.chezcaroline-sophro.fr/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.64440, 4.58908], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Chez Caroline Sophro - Bien-être et Sophrologie', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.64440, 4.58908], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Chez Caroline Sophro - Bien-être et Sophrologie', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Chez Caroline Sophro - Bien-être et Sophrologie'); trackClick('Sorties & Activités Extérieur-Liste-photos-Chez Caroline Sophro - Bien-être et Sophrologie', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Chez Caroline Sophro - Bien-être et Sophrologie'); trackClick('Sorties & Activités Extérieur-Liste-options-Chez Caroline Sophro - Bien-être et Sophrologie', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Chez Caroline Sophro - Bien-être et Sophrologie'); trackClick('Sorties & Activités Extérieur-Liste-options-Chez Caroline Sophro - Bien-être et Sophrologie', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Caroline, vous propose des sophro-balades dans les forêts autour du Lac du Der, des sophro-plages ou sophro-barques                                                <br>Tarif individuel à partir de 50€ - Groupe de 12€ à 100€                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Chez Caroline Sophro - Bien-être et Sophrologie" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="exterieur-item" data-name="L'Escale Dorée">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🌳 L'Escale Dorée</h4>
                                                <p>🗺️ 1 rue de Champaubert<br>51290 Giffaumont-Champaubert</p>
                                                <p>📞 0671953918</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0671953918" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-L\'Escale Dorée', 'tel:0671953918')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0671953918" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-L\'Escale Dorée', 'tel:0671953918')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.location-velos-lac-du-der.fr/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-L\'Escale Dorée', 'https://www.location-velos-lac-du-der.fr/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.location-velos-lac-du-der.fr/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-L\'Escale Dorée', 'https://www.location-velos-lac-du-der.fr/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.55305, 4.75323], this); trackClick('Sorties & Activités Extérieur-Liste-carte-L\'Escale Dorée', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.55305, 4.75323], this); trackClick('Sorties & Activités Extérieur-Liste-carte-L\'Escale Dorée', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'L&#039;Escale Dorée'); trackClick('Sorties & Activités Extérieur-Liste-photos-L&#039;Escale Dorée', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'L\'Escale Dorée'); trackClick('Sorties & Activités Extérieur-Liste-options-L\'Escale Dorée', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'L\'Escale Dorée'); trackClick('Sorties & Activités Extérieur-Liste-options-L\'Escale Dorée', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Location de vélo &amp; de Rosalie, remorques enfant, siège bébé ou pour chien                                                <br>Location de vélo Tandem                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="L'Escale Dorée" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="exterieur-item" data-name="Ferme Pédagogique du Grand Der">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🌳 Ferme Pédagogique du Grand Der</h4>
                                                <p>🗺️ 1 Bis, rue du Chêne<br>52220 Frampas</p>
                                                <p>📞 0679467496</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0679467496" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Ferme Pédagogique du Grand Der', 'tel:0679467496')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0679467496" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Ferme Pédagogique du Grand Der', 'tel:0679467496')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.facebook.com/p/Ferme-P%C3%A9dagogique-du-Grand-Der-100064564727060" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Ferme Pédagogique du Grand Der', 'https://www.facebook.com/p/Ferme-P%C3%A9dagogique-du-Grand-Der-100064564727060')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.facebook.com/p/Ferme-P%C3%A9dagogique-du-Grand-Der-100064564727060" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Ferme Pédagogique du Grand Der', 'https://www.facebook.com/p/Ferme-P%C3%A9dagogique-du-Grand-Der-100064564727060')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.51755, 4.82899], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Ferme Pédagogique du Grand Der', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.51755, 4.82899], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Ferme Pédagogique du Grand Der', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Ferme Pédagogique du Grand Der'); trackClick('Sorties & Activités Extérieur-Liste-photos-Ferme Pédagogique du Grand Der', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Ferme Pédagogique du Grand Der'); trackClick('Sorties & Activités Extérieur-Liste-options-Ferme Pédagogique du Grand Der', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Ferme Pédagogique du Grand Der'); trackClick('Sorties & Activités Extérieur-Liste-options-Ferme Pédagogique du Grand Der', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Sur 7 ha, venez partager un moment unique avec les animaux de la ferme et découvrir notre élevage d’escargots à travers diverses activités familiales.                                                <br>Adulte 9,5€ - Enfant 8€ - moins de 3ans Gratuit                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Ferme Pédagogique du Grand Der" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="exterieur-item" data-name="ROUL'ÔDER">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🌳 ROUL'ÔDER</h4>
                                                <p>🗺️ 8 Rue des Belles Prairies<br>52290 Sainte-Livière</p>
                                                <p>📞 0672294242</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0672294242" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-ROUL\'ÔDER', 'tel:0672294242')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0672294242" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-ROUL\'ÔDER', 'tel:0672294242')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.facebook.com/p/Roul%C3%B4Der-100094517332858/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-ROUL\'ÔDER', 'https://www.facebook.com/p/Roul%C3%B4Der-100094517332858/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.facebook.com/p/Roul%C3%B4Der-100094517332858/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-ROUL\'ÔDER', 'https://www.facebook.com/p/Roul%C3%B4Der-100094517332858/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.60024, 4.82128], this); trackClick('Sorties & Activités Extérieur-Liste-carte-ROUL\'ÔDER', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.60024, 4.82128], this); trackClick('Sorties & Activités Extérieur-Liste-carte-ROUL\'ÔDER', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'ROUL&#039;ÔDER'); trackClick('Sorties & Activités Extérieur-Liste-photos-ROUL&#039;ÔDER', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'ROUL\'ÔDER'); trackClick('Sorties & Activités Extérieur-Liste-options-ROUL\'ÔDER', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'ROUL\'ÔDER'); trackClick('Sorties & Activités Extérieur-Liste-options-ROUL\'ÔDER', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Roulez en SWINCAR e-Spider... le tout est électrique. Monoplace ou Tandem, avec ses 4 bras suspendus : aucun obstacle insurmontable !                                                <br>A partir de 45€                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="ROUL'ÔDER" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="exterieur-item" data-name="Didier du Val - Randonnées découvertes du Pays du Der">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🌳 Didier du Val - Randonnées découvertes du Pays du Der</h4>
                                                <p>🗺️ 8 Rue des Aziaux<br>52410 Euriville-Bienville</p>
                                                <p>📞 0681654002</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0681654002" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Didier du Val - Randonnées découvertes du Pays du Der', 'tel:0681654002')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0681654002" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Didier du Val - Randonnées découvertes du Pays du Der', 'tel:0681654002')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.lacduder.com/offres/didier-du-val-randonnees-decouvertes-du-pays-du-der-eurville-bienville-fr-4988299/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Didier du Val - Randonnées découvertes du Pays du Der', 'https://www.lacduder.com/offres/didier-du-val-randonnees-decouvertes-du-pays-du-der-eurville-bienville-fr-4988299/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.lacduder.com/offres/didier-du-val-randonnees-decouvertes-du-pays-du-der-eurville-bienville-fr-4988299/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Didier du Val - Randonnées découvertes du Pays du Der', 'https://www.lacduder.com/offres/didier-du-val-randonnees-decouvertes-du-pays-du-der-eurville-bienville-fr-4988299/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.58829, 5.03691], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Didier du Val - Randonnées découvertes du Pays du Der', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.58829, 5.03691], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Didier du Val - Randonnées découvertes du Pays du Der', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Didier du Val - Randonnées découvertes du Pays du Der'); trackClick('Sorties & Activités Extérieur-Liste-photos-Didier du Val - Randonnées découvertes du Pays du Der', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Didier du Val - Randonnées découvertes du Pays du Der'); trackClick('Sorties & Activités Extérieur-Liste-options-Didier du Val - Randonnées découvertes du Pays du Der', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Didier du Val - Randonnées découvertes du Pays du Der'); trackClick('Sorties & Activités Extérieur-Liste-options-Didier du Val - Randonnées découvertes du Pays du Der', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Didier vous propose des randonnées pédestres à la découverte du pays du Der.                                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Didier du Val - Randonnées découvertes du Pays du Der" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="exterieur-item" data-name="Les Amis de la Pêche">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🌳 Les Amis de la Pêche</h4>
                                                <p>🗺️ 105 Avenue des États-Unis<br>52100 Saint-Dizier</p>
                                                <p>📞 0642436297</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0642436297" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Les Amis de la Pêche', 'tel:0642436297')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0642436297" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Les Amis de la Pêche', 'tel:0642436297')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.facebook.com/lesamisdelapeche52" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Les Amis de la Pêche', 'https://www.facebook.com/lesamisdelapeche52')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.facebook.com/lesamisdelapeche52" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Les Amis de la Pêche', 'https://www.facebook.com/lesamisdelapeche52')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.63644, 4.97338], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Les Amis de la Pêche', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.63644, 4.97338], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Les Amis de la Pêche', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Les Amis de la Pêche'); trackClick('Sorties & Activités Extérieur-Liste-photos-Les Amis de la Pêche', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Les Amis de la Pêche'); trackClick('Sorties & Activités Extérieur-Liste-options-Les Amis de la Pêche', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Les Amis de la Pêche'); trackClick('Sorties & Activités Extérieur-Liste-options-Les Amis de la Pêche', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Pêche 2ème catégorie sur la rivière Marne (14km), sur le canal Entre Champagne et Bourgogne et sur les étangs à proximité de Saint-Dizier                                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Les Amis de la Pêche" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="exterieur-item" data-name="Centre Equestre de la Contance">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🌳 Centre Equestre de la Contance</h4>
                                                <p>🗺️ 5, rue de l'Héronne<br>52220 Laneuville-à-Rémy</p>
                                                <p>📞 0325559610</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0325559610" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Centre Equestre de la Contance', 'tel:0325559610')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0325559610" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Centre Equestre de la Contance', 'tel:0325559610')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.facebook.com/centreequestredelacontance" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Centre Equestre de la Contance', 'https://www.facebook.com/centreequestredelacontance')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.facebook.com/centreequestredelacontance" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Centre Equestre de la Contance', 'https://www.facebook.com/centreequestredelacontance')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.47559, 4.88381], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Centre Equestre de la Contance', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.47559, 4.88381], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Centre Equestre de la Contance', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Centre Equestre de la Contance'); trackClick('Sorties & Activités Extérieur-Liste-photos-Centre Equestre de la Contance', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Centre Equestre de la Contance'); trackClick('Sorties & Activités Extérieur-Liste-options-Centre Equestre de la Contance', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Centre Equestre de la Contance'); trackClick('Sorties & Activités Extérieur-Liste-options-Centre Equestre de la Contance', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>À Laneuville‑à‑Rémy, le centre équestre de la Contance propose toute l’année des leçons, balades, randonnées et stages avec passage de galop, encadrés par trois moniteurs diplômés. Labelisé École Française d’Équitation.                                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Centre Equestre de la Contance" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="exterieur-item" data-name="Swin Golf de la Flage">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🌳 Swin Golf de la Flage</h4>
                                                <p>🗺️ 14 Route 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('Sorties & Activités Extérieur-Liste-Appeler-Swin Golf de la Flage', 'tel:0326726034')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0326726034" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Swin Golf de la Flage', 'tel:0326726034')">📞 Appeler</a>
                                                                                    <!-- <button onclick="zoomToRestaurant([48.62438, 4.70419], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Swin Golf de la Flage', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.62438, 4.70419], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Swin Golf de la Flage', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Swin Golf de la Flage'); trackClick('Sorties & Activités Extérieur-Liste-photos-Swin Golf de la Flage', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Swin Golf de la Flage'); trackClick('Sorties & Activités Extérieur-Liste-options-Swin Golf de la Flage', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Swin Golf de la Flage'); trackClick('Sorties & Activités Extérieur-Liste-options-Swin Golf de la Flage', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>parcours de 12 trous de 2060 m sur 10 ha en herbe avec un matériel différent. 1 club à 3 faces (bois, fer 7, putter) et 1 balle souple sans danger                                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Swin Golf de la Flage" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="exterieur-item" data-name="Accrobranche - Parc Aventure Domaine du Buisson">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🌳 Accrobranche - Parc Aventure Domaine du Buisson</h4>
                                                <p>🗺️ Domaine du Buisson Le Buisson<br>52130 Louvemon</p>
                                                <p>📞 0646382150</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0646382150" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Accrobranche - Parc Aventure Domaine du Buisson', 'tel:0646382150')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0646382150" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Accrobranche - Parc Aventure Domaine du Buisson', 'tel:0646382150')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.accro-52.fr/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Accrobranche - Parc Aventure Domaine du Buisson', 'https://www.accro-52.fr/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.accro-52.fr/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Accrobranche - Parc Aventure Domaine du Buisson', 'https://www.accro-52.fr/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.54235, 4.90796], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Accrobranche - Parc Aventure Domaine du Buisson', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.54235, 4.90796], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Accrobranche - Parc Aventure Domaine du Buisson', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Accrobranche - Parc Aventure Domaine du Buisson'); trackClick('Sorties & Activités Extérieur-Liste-photos-Accrobranche - Parc Aventure Domaine du Buisson', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Accrobranche - Parc Aventure Domaine du Buisson'); trackClick('Sorties & Activités Extérieur-Liste-options-Accrobranche - Parc Aventure Domaine du Buisson', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Accrobranche - Parc Aventure Domaine du Buisson'); trackClick('Sorties & Activités Extérieur-Liste-options-Accrobranche - Parc Aventure Domaine du Buisson', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Vous propose plusieurs parcours acrobatiques de hauteurs et de difficultés croissantes à la lisière de la forêt domaniale du Der                                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Accrobranche - Parc Aventure Domaine du Buisson" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="exterieur-item" data-name="Ferme aux Grues">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🌳 Ferme aux Grues</h4>
                                                <p>🗺️ 1 route de Drosnay<br>51290 Saint-Remy-en-Bouzemont-Saint-Genest-et-Isson</p>
                                                <p>📞 0326725447</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0326725447" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Ferme aux Grues', 'tel:0326725447')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0326725447" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Ferme aux Grues', 'tel:0326725447')">📞 Appeler</a>
                                                                                    <!-- <a href="https://champagne-ardenne.lpo.fr/grue-cendree/ou-voir-les-grues-cendrees/la-ferme-aux-grues" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Ferme aux Grues', 'https://champagne-ardenne.lpo.fr/grue-cendree/ou-voir-les-grues-cendrees/la-ferme-aux-grues')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://champagne-ardenne.lpo.fr/grue-cendree/ou-voir-les-grues-cendrees/la-ferme-aux-grues" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Ferme aux Grues', 'https://champagne-ardenne.lpo.fr/grue-cendree/ou-voir-les-grues-cendrees/la-ferme-aux-grues')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.61853, 4.64721], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Ferme aux Grues', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.61853, 4.64721], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Ferme aux Grues', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Ferme aux Grues'); trackClick('Sorties & Activités Extérieur-Liste-photos-Ferme aux Grues', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Ferme aux Grues'); trackClick('Sorties & Activités Extérieur-Liste-options-Ferme aux Grues', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Ferme aux Grues'); trackClick('Sorties & Activités Extérieur-Liste-options-Ferme aux Grues', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Venez observer dans la propriété du Syndicat d&#039;aménagement Touristique du Lac du Der la migration des Grues                                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Ferme aux Grues" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="exterieur-item" data-name="Accrobranche - Accro Der">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🌳 Accrobranche - Accro Der</h4>
                                                <p>🗺️ Station nautique Terrasses du Lac<br>51290 Giffaumont-Champaubert</p>
                                                <p>📞 0663802107</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0663802107" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Accrobranche - Accro Der', 'tel:0663802107')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0663802107" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Accrobranche - Accro Der', 'tel:0663802107')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.accroder.com/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Accrobranche - Accro Der', 'https://www.accroder.com/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.accroder.com/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Accrobranche - Accro Der', 'https://www.accroder.com/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.55172, 4.77109], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Accrobranche - Accro Der', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.55172, 4.77109], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Accrobranche - Accro Der', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Accrobranche - Accro Der'); trackClick('Sorties & Activités Extérieur-Liste-photos-Accrobranche - Accro Der', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Accrobranche - Accro Der'); trackClick('Sorties & Activités Extérieur-Liste-options-Accrobranche - Accro Der', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Accrobranche - Accro Der'); trackClick('Sorties & Activités Extérieur-Liste-options-Accrobranche - Accro Der', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Accrobranche sur la station nautique du Lac du Der                                                <br>A partir de 10€                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Accrobranche - Accro Der" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="exterieur-item" data-name="Etang des Leschères">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🌳 Etang des Leschères</h4>
                                                <p>🗺️ Rue de la Digue<br>52130 Wassy</p>
                                                <p>📞 0325553190</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0325553190" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Etang des Leschères', 'tel:0325553190')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0325553190" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Etang des Leschères', 'tel:0325553190')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.lacduder.com/offres/etang-des-lescheres-wassy-fr-4987680/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Etang des Leschères', 'https://www.lacduder.com/offres/etang-des-lescheres-wassy-fr-4987680/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.lacduder.com/offres/etang-des-lescheres-wassy-fr-4987680/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Etang des Leschères', 'https://www.lacduder.com/offres/etang-des-lescheres-wassy-fr-4987680/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.48988, 4.95004], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Etang des Leschères', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.48988, 4.95004], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Etang des Leschères', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Etang des Leschères'); trackClick('Sorties & Activités Extérieur-Liste-photos-Etang des Leschères', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Etang des Leschères'); trackClick('Sorties & Activités Extérieur-Liste-options-Etang des Leschères', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Etang des Leschères'); trackClick('Sorties & Activités Extérieur-Liste-options-Etang des Leschères', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Baignade aménagée mais non surveillée &amp; parcours de santé, u ntrès bel endroit.                                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Etang des Leschères" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="exterieur-item" data-name="Mini-cars du Der - Karting enfant">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🌳 Mini-cars du Der - Karting enfant</h4>
                                                <p>🗺️ Station Nautique<br>51290 Giffaumont-Champaubert</p>
                                                <p>📞 0786005605</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0786005605" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Mini-cars du Der - Karting enfant', 'tel:0786005605')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0786005605" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Mini-cars du Der - Karting enfant', 'tel:0786005605')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.lacduder.com/offres/mini-cars-du-der-giffaumont-champaubert-fr-4988244/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Mini-cars du Der - Karting enfant', 'https://www.lacduder.com/offres/mini-cars-du-der-giffaumont-champaubert-fr-4988244/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.lacduder.com/offres/mini-cars-du-der-giffaumont-champaubert-fr-4988244/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Mini-cars du Der - Karting enfant', 'https://www.lacduder.com/offres/mini-cars-du-der-giffaumont-champaubert-fr-4988244/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.55224, 4.77071], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Mini-cars du Der - Karting enfant', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.55224, 4.77071], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Mini-cars du Der - Karting enfant', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Mini-cars du Der - Karting enfant'); trackClick('Sorties & Activités Extérieur-Liste-photos-Mini-cars du Der - Karting enfant', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Mini-cars du Der - Karting enfant'); trackClick('Sorties & Activités Extérieur-Liste-options-Mini-cars du Der - Karting enfant', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Mini-cars du Der - Karting enfant'); trackClick('Sorties & Activités Extérieur-Liste-options-Mini-cars du Der - Karting enfant', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Pour enfants de 4 à 12 ans, Mini quad, Formule 1, Buggy, Moto sur piste.                                                <br>A partir de 2€                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Mini-cars du Der - Karting enfant" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="exterieur-item" data-name="Escape Game - La Dame du Lac">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🌳 Escape Game - La Dame du Lac</h4>
                                                <p>🗺️ 1 bis rue de la Cachotte Station Nautique<br>51290 Giffaumont-Champaubert</p>
                                                <p>📞 0326726280</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0326726280" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Escape Game - La Dame du Lac', 'tel:0326726280')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0326726280" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Escape Game - La Dame du Lac', 'tel:0326726280')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.escapegamelacduder.com/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Escape Game - La Dame du Lac', 'https://www.escapegamelacduder.com/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.escapegamelacduder.com/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Escape Game - La Dame du Lac', 'https://www.escapegamelacduder.com/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.55373, 4.76726], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Escape Game - La Dame du Lac', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.55373, 4.76726], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Escape Game - La Dame du Lac', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Escape Game - La Dame du Lac'); trackClick('Sorties & Activités Extérieur-Liste-photos-Escape Game - La Dame du Lac', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Escape Game - La Dame du Lac'); trackClick('Sorties & Activités Extérieur-Liste-options-Escape Game - La Dame du Lac', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Escape Game - La Dame du Lac'); trackClick('Sorties & Activités Extérieur-Liste-options-Escape Game - La Dame du Lac', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Vivez un escape game en plein air exclusif en toute autonomie et sauvez la Dame du Lac !                                                <br>Tarif groupes 20€ (entre 2 et 6 personnes)                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Escape Game - La Dame du Lac" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="exterieur-item" data-name="Aube ULM Services">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🌳 Aube ULM Services</h4>
                                                <p>🗺️ Aérodrome de Brienne-le-Château ECOLE DES LACS<br>10500 Saint-Christophe-Dodinicourt</p>
                                                <p>📞 0608241906</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0608241906" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Aube ULM Services', 'tel:0608241906')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0608241906" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Aube ULM Services', 'tel:0608241906')">📞 Appeler</a>
                                                                                    <!-- <a href="https://aube-ulm.fr/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Aube ULM Services', 'https://aube-ulm.fr/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://aube-ulm.fr/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Aube ULM Services', 'https://aube-ulm.fr/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.43906, 4.46998], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Aube ULM Services', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.43906, 4.46998], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Aube ULM Services', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Aube ULM Services'); trackClick('Sorties & Activités Extérieur-Liste-photos-Aube ULM Services', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Aube ULM Services'); trackClick('Sorties & Activités Extérieur-Liste-options-Aube ULM Services', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Aube ULM Services'); trackClick('Sorties & Activités Extérieur-Liste-options-Aube ULM Services', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Formations ULM et PARAMOTEUR, vol d&#039;initiation, baptêmes de l&#039;air…                                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Aube ULM Services" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="exterieur-item" data-name="Pumptrack Saint-Dizier">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🌳 Pumptrack Saint-Dizier</h4>
                                                <p>🗺️ Boulevard de Marne<br>52100 Saint-Dizier</p>
                                                <p>📞 0325073131</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0325073131" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Pumptrack Saint-Dizier', 'tel:0325073131')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0325073131" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Pumptrack Saint-Dizier', 'tel:0325073131')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.saint-dizier.fr/actualites-et-sorties/sport-loisirs-et-musique/pumptrack/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Pumptrack Saint-Dizier', 'https://www.saint-dizier.fr/actualites-et-sorties/sport-loisirs-et-musique/pumptrack/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.saint-dizier.fr/actualites-et-sorties/sport-loisirs-et-musique/pumptrack/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Pumptrack Saint-Dizier', 'https://www.saint-dizier.fr/actualites-et-sorties/sport-loisirs-et-musique/pumptrack/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.63181, 4.94384], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Pumptrack Saint-Dizier', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.63181, 4.94384], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Pumptrack Saint-Dizier', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Pumptrack Saint-Dizier'); trackClick('Sorties & Activités Extérieur-Liste-photos-Pumptrack Saint-Dizier', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Pumptrack Saint-Dizier'); trackClick('Sorties & Activités Extérieur-Liste-options-Pumptrack Saint-Dizier', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Pumptrack Saint-Dizier'); trackClick('Sorties & Activités Extérieur-Liste-options-Pumptrack Saint-Dizier', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>4500 m² de circuit dans tous les sens..                                                <br>Incontournable!                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Pumptrack Saint-Dizier" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="exterieur-item" data-name="Mini Park Toons Land">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🌳 Mini Park Toons Land</h4>
                                                <p>🗺️ Station Nautique<br>51290 Giffaumont-Champaubert</p>
                                                <p>📞 0786005605</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0786005605" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Mini Park Toons Land', 'tel:0786005605')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0786005605" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Mini Park Toons Land', 'tel:0786005605')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.lacduder.com/offres/mini-park-toons-land-giffaumont-champaubert-fr-4987566/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Mini Park Toons Land', 'https://www.lacduder.com/offres/mini-park-toons-land-giffaumont-champaubert-fr-4987566/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.lacduder.com/offres/mini-park-toons-land-giffaumont-champaubert-fr-4987566/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Mini Park Toons Land', 'https://www.lacduder.com/offres/mini-park-toons-land-giffaumont-champaubert-fr-4987566/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.55269, 4.77055], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Mini Park Toons Land', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.55269, 4.77055], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Mini Park Toons Land', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Mini Park Toons Land'); trackClick('Sorties & Activités Extérieur-Liste-photos-Mini Park Toons Land', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Mini Park Toons Land'); trackClick('Sorties & Activités Extérieur-Liste-options-Mini Park Toons Land', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Mini Park Toons Land'); trackClick('Sorties & Activités Extérieur-Liste-options-Mini Park Toons Land', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Le mini-park propose deux trampolines, 3 structures gonflables.                                                <br>Tarif enfant 9€                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Mini Park Toons Land" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="exterieur-item" data-name="Fantasti Golf">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🌳 Fantasti Golf</h4>
                                                <p>🗺️ Station Nautique<br>51290 Giffaumont-Champaubert</p>
                                                <p>📞 0786005605</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0786005605" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Fantasti Golf', 'tel:0786005605')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0786005605" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Fantasti Golf', 'tel:0786005605')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.lacduder.com/offres/fantasti-golf-giffaumont-champaubert-fr-4987567/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Fantasti Golf', 'https://www.lacduder.com/offres/fantasti-golf-giffaumont-champaubert-fr-4987567/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.lacduder.com/offres/fantasti-golf-giffaumont-champaubert-fr-4987567/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Fantasti Golf', 'https://www.lacduder.com/offres/fantasti-golf-giffaumont-champaubert-fr-4987567/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.55166, 4.77162], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Fantasti Golf', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.55166, 4.77162], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Fantasti Golf', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Fantasti Golf'); trackClick('Sorties & Activités Extérieur-Liste-photos-Fantasti Golf', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Fantasti Golf'); trackClick('Sorties & Activités Extérieur-Liste-options-Fantasti Golf', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Fantasti Golf'); trackClick('Sorties & Activités Extérieur-Liste-options-Fantasti Golf', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>2 parcours de mini-golf paysagers sur gazon synthétique seront à votre disposition pour des parties en 18 trous pleine de sensations !                                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Fantasti Golf" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="exterieur-item" data-name="L'âne cœur">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🌳 L'âne cœur</h4>
                                                <p>🗺️ 1 Chemin du Meligne<br>52130 Voillecomte</p>
                                                <p>📞 0601326961</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0601326961" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-L\'âne cœur', 'tel:0601326961')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0601326961" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-L\'âne cœur', 'tel:0601326961')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.lanecoeur.com/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-L\'âne cœur', 'https://www.lanecoeur.com/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.lanecoeur.com/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-L\'âne cœur', 'https://www.lanecoeur.com/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.50536, 4.85456], this); trackClick('Sorties & Activités Extérieur-Liste-carte-L\'âne cœur', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.50536, 4.85456], this); trackClick('Sorties & Activités Extérieur-Liste-carte-L\'âne cœur', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'L&#039;âne cœur'); trackClick('Sorties & Activités Extérieur-Liste-photos-L&#039;âne cœur', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'L\'âne cœur'); trackClick('Sorties & Activités Extérieur-Liste-options-L\'âne cœur', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'L\'âne cœur'); trackClick('Sorties & Activités Extérieur-Liste-options-L\'âne cœur', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Partagez un moment de détente en famille, entre amis ou à deux au contact de la nature. Laurine, animatrice nature et praticienne en médiation asine, vous propose une rencontre avec ses ânes et des activités nature adaptées à tous.                                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="L'âne cœur" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="exterieur-item" data-name="VAUCLERC Aviation - Baptêmes de l'air">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🌳 VAUCLERC Aviation - Baptêmes de l'air</h4>
                                                <p>🗺️ Aérodrome Vitry-le-François RN4<br>51300 Vauclerc</p>
                                                <p>📞 0784638148</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0784638148" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-VAUCLERC Aviation - Baptêmes de l\'air', 'tel:0784638148')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0784638148" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-VAUCLERC Aviation - Baptêmes de l\'air', 'tel:0784638148')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.facebook.com/vauclerc.aviation/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-VAUCLERC Aviation - Baptêmes de l\'air', 'https://www.facebook.com/vauclerc.aviation/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.facebook.com/vauclerc.aviation/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-VAUCLERC Aviation - Baptêmes de l\'air', 'https://www.facebook.com/vauclerc.aviation/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.69994, 4.68266], this); trackClick('Sorties & Activités Extérieur-Liste-carte-VAUCLERC Aviation - Baptêmes de l\'air', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.69994, 4.68266], this); trackClick('Sorties & Activités Extérieur-Liste-carte-VAUCLERC Aviation - Baptêmes de l\'air', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'VAUCLERC Aviation - Baptêmes de l&#039;air'); trackClick('Sorties & Activités Extérieur-Liste-photos-VAUCLERC Aviation - Baptêmes de l&#039;air', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'VAUCLERC Aviation - Baptêmes de l\'air'); trackClick('Sorties & Activités Extérieur-Liste-options-VAUCLERC Aviation - Baptêmes de l\'air', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'VAUCLERC Aviation - Baptêmes de l\'air'); trackClick('Sorties & Activités Extérieur-Liste-options-VAUCLERC Aviation - Baptêmes de l\'air', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Baptême de l&#039;air en Ulm 3 axes, pendulaire ou en Paramoteur biplace.                                                <br>A partir de 75€                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="VAUCLERC Aviation - Baptêmes de l'air" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="exterieur-item" data-name="Aéroclub de SAINT-DIZIER - ROBINSON">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🌳 Aéroclub de SAINT-DIZIER - ROBINSON</h4>
                                                <p>🗺️ 34 rue Godard-Brulliard<br>52100 Saint-Dizier</p>
                                                <p>📞 0325050467</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0325050467" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Aéroclub de SAINT-DIZIER - ROBINSON', 'tel:0325050467')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0325050467" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Aéroclub de SAINT-DIZIER - ROBINSON', 'tel:0325050467')">📞 Appeler</a>
                                                                                    <!-- <a href="https://aeroclub-saint-dizier.com/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Aéroclub de SAINT-DIZIER - ROBINSON', 'https://aeroclub-saint-dizier.com/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://aeroclub-saint-dizier.com/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Aéroclub de SAINT-DIZIER - ROBINSON', 'https://aeroclub-saint-dizier.com/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.63767, 4.91813], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Aéroclub de SAINT-DIZIER - ROBINSON', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.63767, 4.91813], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Aéroclub de SAINT-DIZIER - ROBINSON', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Aéroclub de SAINT-DIZIER - ROBINSON'); trackClick('Sorties & Activités Extérieur-Liste-photos-Aéroclub de SAINT-DIZIER - ROBINSON', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Aéroclub de SAINT-DIZIER - ROBINSON'); trackClick('Sorties & Activités Extérieur-Liste-options-Aéroclub de SAINT-DIZIER - ROBINSON', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Aéroclub de SAINT-DIZIER - ROBINSON'); trackClick('Sorties & Activités Extérieur-Liste-options-Aéroclub de SAINT-DIZIER - ROBINSON', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Baptême de l&#039;air                                                <br>A partir de 50€                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Aéroclub de SAINT-DIZIER - ROBINSON" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="exterieur-item" data-name="Golf de Combles en Barrois">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🌳 Golf de Combles en Barrois</h4>
                                                <p>🗺️ 38 rue Basse<br>55000 Combles-en-Barrois</p>
                                                <p>📞 0329451603</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0329451603" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Golf de Combles en Barrois', 'tel:0329451603')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0329451603" class="btn-call" onclick="trackClick('Sorties & Activités Extérieur-Liste-Appeler-Golf de Combles en Barrois', 'tel:0329451603')">📞 Appeler</a>
                                                                                    <!-- <a href="https://golfdecomblesenbarrois.fr/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Golf de Combles en Barrois', 'https://golfdecomblesenbarrois.fr/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://golfdecomblesenbarrois.fr/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Extérieur-Liste-Site-Golf de Combles en Barrois', 'https://golfdecomblesenbarrois.fr/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.75327, 5.11617], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Golf de Combles en Barrois', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.75327, 5.11617], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Golf de Combles en Barrois', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Golf de Combles en Barrois'); trackClick('Sorties & Activités Extérieur-Liste-photos-Golf de Combles en Barrois', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Golf de Combles en Barrois'); trackClick('Sorties & Activités Extérieur-Liste-options-Golf de Combles en Barrois', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Golf de Combles en Barrois'); trackClick('Sorties & Activités Extérieur-Liste-options-Golf de Combles en Barrois', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Suivez le parcours 18 trous offre des points de vue champêtres, bucoliques, très agréables ; il allie la technicité avec de nombreux bunkers, à l’agrément de jouer sur des trous aux profils différents.                                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Golf de Combles en Barrois" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
                        
            <!-- DÉMO EN DUR pour chaque catégorie -->
                        <!-- Extérieur DEMO avec carrousel -->
            <div class="exterieur-item" data-name="Activité Extérieur Demo Carrousel">
                <div class="restaurant-cardDemo" style="border-left: 5px solid #f8fc04;">
                    <div class="restaurant-card-content">
                        <h4>🌳 Activité Extérieur DÉMO - Carrousel Photos + Bouton Menu</h4>
                        <p style="color: #a855f7; font-weight: 600; text-align: center;">
                            Spécialité: ⭐⭐⭐ Activité en plein air
                        </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('Sorties & Activités Extérieur-Liste-Site-Extérieur DEMO', '#')">🌐 Contactez-nous</a>
                            <button onclick="zoomToRestaurant([48.553638, 4.767266], this); trackClick('Sorties & Activités Extérieur-Liste-carte-Extérieur DEMO', '#')" class="btn-map">📍 Carte</button>
                            <button onclick="openMenuModal('menu1.jpg', 'Extérieur DÉMO'); trackClick('Sorties & Activités Extérieur-Liste-menu-Extérieur 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;">♿ PMR</td>
        <td style="padding:4px 10px;">💳 Paiement CB</td>
    </tr>
    <tr>
        <td style="padding:4px 10px;">🚻 Wc</td>
        <td style="padding:4px 10px;">🚻♿ Wc 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;">🚿 Douche</td>
        <td style="padding:4px 10px;">🐾 Chiens acceptés</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="Pub_ext1.jpg" alt="Photo 1">
                                </div>
                                <div class="carousel-slide">
                                    <img src="Pub_ext2.jpg" alt="Photo 2">
                                </div>
                                <div class="carousel-slide">
                                    <img src="Pub_ext3.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 INTéRIEUR ========== -->
    <div id="interieur-list-container" style="display: none; margin-top: 20px;">
        <div class="map-title">
            <div class="map-title-content" >
                <h2>🏠 Liste des Intérieur</h2>
                <div style="display: flex; gap: 10px; align-items: center;">
                    <input type="text" id="searchBarInterieur" placeholder="Rechercher..." style="flex: 1; padding: 10px 15px; font-size: 16px;" onclick="trackClick('Sorties & Activités Intérieur Recherche dans liste', '#')">
                    <button class="btn-clear-filter" onclick="clearSearchFilterIntérieur(); trackClick('Sorties & Activités Intérieur Effacer recherche', '#')">🔄 Effacer filtre</button>
                </div>
            </div>
        </div>

        <div id="dynamic-list-interieur">
            <div class="interieur-item" data-name="Centre Aquatique La Salamandre">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏠 Centre Aquatique La Salamandre</h4>
                                                <p>🗺️ 1 Avenue du Quai des Fontaines<br>51300 Vitry-le-François</p>
                                                <p>📞 0354170560</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0354170560" class="btn-call" onclick="trackClick('Sorties & Activités Intérieur-Liste-Appeler-Centre Aquatique La Salamandre', 'tel:0354170560')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0354170560" class="btn-call" onclick="trackClick('Sorties & Activités Intérieur-Liste-Appeler-Centre Aquatique La Salamandre', 'tel:0354170560')">📞 Appeler</a>
                                                                                    <!-- <button onclick="zoomToRestaurant([48.73010, 4.58235], this); trackClick('Sorties & Activités Intérieur-Liste-carte-Centre Aquatique La Salamandre', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.73010, 4.58235], this); trackClick('Sorties & Activités Intérieur-Liste-carte-Centre Aquatique La Salamandre', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Centre Aquatique La Salamandre'); trackClick('Sorties & Activités Intérieur-Liste-photos-Centre Aquatique La Salamandre', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Centre Aquatique La Salamandre'); trackClick('Sorties & Activités Intérieur-Liste-options-Centre Aquatique La Salamandre', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Centre Aquatique La Salamandre'); trackClick('Sorties & Activités Intérieur-Liste-options-Centre Aquatique La Salamandre', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Le Centre Aquatique La Salamandre vous propose des équipements aqua-ludiques modernes et un espace bien-être et détente.                                                <br>A partir de 5€                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Centre Aquatique La Salamandre" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="interieur-item" data-name="Der Game">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏠 Der Game</h4>
                                                <p>🗺️ 12 rue de la Cachotte Station Nautique<br>51290 Giffaumont-Champaubert</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                                                    <!-- <a href="https://www.facebook.com/p/DER-GAME-61571767274934/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Intérieur-Liste-Site-Der Game', 'https://www.facebook.com/p/DER-GAME-61571767274934/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.facebook.com/p/DER-GAME-61571767274934/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Intérieur-Liste-Site-Der Game', 'https://www.facebook.com/p/DER-GAME-61571767274934/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.55384, 4.76817], this); trackClick('Sorties & Activités Intérieur-Liste-carte-Der Game', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.55384, 4.76817], this); trackClick('Sorties & Activités Intérieur-Liste-carte-Der Game', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Der Game'); trackClick('Sorties & Activités Intérieur-Liste-photos-Der Game', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Der Game'); trackClick('Sorties & Activités Intérieur-Liste-options-Der Game', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Der Game'); trackClick('Sorties & Activités Intérieur-Liste-options-Der Game', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Salle de jeux d’arcade et virtuelle                                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Der Game" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="interieur-item" data-name="Bowling Starting Point 52">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏠 Bowling Starting Point 52</h4>
                                                <p>🗺️ 17 Rue des Roises<br>52100 Bettancourt-la-Ferrée</p>
                                                <p>📞 0325080368</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0325080368" class="btn-call" onclick="trackClick('Sorties & Activités Intérieur-Liste-Appeler-Bowling Starting Point 52', 'tel:0325080368')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0325080368" class="btn-call" onclick="trackClick('Sorties & Activités Intérieur-Liste-Appeler-Bowling Starting Point 52', 'tel:0325080368')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.startingpoint52.com/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Intérieur-Liste-Site-Bowling Starting Point 52', 'https://www.startingpoint52.com/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.startingpoint52.com/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Intérieur-Liste-Site-Bowling Starting Point 52', 'https://www.startingpoint52.com/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.65312, 4.96536], this); trackClick('Sorties & Activités Intérieur-Liste-carte-Bowling Starting Point 52', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.65312, 4.96536], this); trackClick('Sorties & Activités Intérieur-Liste-carte-Bowling Starting Point 52', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Bowling Starting Point 52'); trackClick('Sorties & Activités Intérieur-Liste-photos-Bowling Starting Point 52', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Bowling Starting Point 52'); trackClick('Sorties & Activités Intérieur-Liste-options-Bowling Starting Point 52', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Bowling Starting Point 52'); trackClick('Sorties & Activités Intérieur-Liste-options-Bowling Starting Point 52', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Bowling, jeux d&#039;arcades, billards, karaoké et réalité virtuelle + Restauration rapide.                                                <br>A partir de 6,5€                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Bowling Starting Point 52" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="interieur-item" data-name="Espace Zen et Flottaison">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏠 Espace Zen et Flottaison</h4>
                                                <p>🗺️ 10 rue de la Cachotte<br>51290 Giffaumont-Champaubert</p>
                                                <p>📞 0612547044</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0612547044" class="btn-call" onclick="trackClick('Sorties & Activités Intérieur-Liste-Appeler-Espace Zen et Flottaison', 'tel:0612547044')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0612547044" class="btn-call" onclick="trackClick('Sorties & Activités Intérieur-Liste-Appeler-Espace Zen et Flottaison', 'tel:0612547044')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.espacezenetflottaison.com/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Intérieur-Liste-Site-Espace Zen et Flottaison', 'https://www.espacezenetflottaison.com/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.espacezenetflottaison.com/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Intérieur-Liste-Site-Espace Zen et Flottaison', 'https://www.espacezenetflottaison.com/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.55075, 4.77018], this); trackClick('Sorties & Activités Intérieur-Liste-carte-Espace Zen et Flottaison', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.55075, 4.77018], this); trackClick('Sorties & Activités Intérieur-Liste-carte-Espace Zen et Flottaison', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Espace Zen et Flottaison'); trackClick('Sorties & Activités Intérieur-Liste-photos-Espace Zen et Flottaison', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Espace Zen et Flottaison'); trackClick('Sorties & Activités Intérieur-Liste-options-Espace Zen et Flottaison', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Espace Zen et Flottaison'); trackClick('Sorties & Activités Intérieur-Liste-options-Espace Zen et Flottaison', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Flottez vers la détente absolue..Un soin de relaxation en cabine privée qui vous offre une expérience unique en terme de détente et de bien être                                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Espace Zen et Flottaison" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="interieur-item" data-name="Casino JOA du Lac du Der">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏠 Casino JOA du Lac du Der</h4>
                                                <p>🗺️ 6 rue du Port Station nautique<br>51290 Giffaumont-Champaubert</p>
                                                <p>📞 0326749800</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0326749800" class="btn-call" onclick="trackClick('Sorties & Activités Intérieur-Liste-Appeler-Casino JOA du Lac du Der', 'tel:0326749800')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0326749800" class="btn-call" onclick="trackClick('Sorties & Activités Intérieur-Liste-Appeler-Casino JOA du Lac du Der', 'tel:0326749800')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.facebook.com/CasinoJOA.LacDuDer" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Intérieur-Liste-Site-Casino JOA du Lac du Der', 'https://www.facebook.com/CasinoJOA.LacDuDer')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.facebook.com/CasinoJOA.LacDuDer" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Intérieur-Liste-Site-Casino JOA du Lac du Der', 'https://www.facebook.com/CasinoJOA.LacDuDer')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.55405, 4.76621], this); trackClick('Sorties & Activités Intérieur-Liste-carte-Casino JOA du Lac du Der', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.55405, 4.76621], this); trackClick('Sorties & Activités Intérieur-Liste-carte-Casino JOA du Lac du Der', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Casino JOA du Lac du Der'); trackClick('Sorties & Activités Intérieur-Liste-photos-Casino JOA du Lac du Der', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Casino JOA du Lac du Der'); trackClick('Sorties & Activités Intérieur-Liste-options-Casino JOA du Lac du Der', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Casino JOA du Lac du Der'); trackClick('Sorties & Activités Intérieur-Liste-options-Casino JOA du Lac du Der', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Informations: 135 machines à sous, la roulette anglaise et black jack électroniques                                                <br>Accès PMR                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Casino JOA du Lac du Der" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="interieur-item" data-name="Massages Villarais">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏠 Massages Villarais</h4>
                                                <p>🗺️ 2 rue des Trois Mares<br>52100 Villiers-en-Lieu</p>
                                                <p>📞 0645078165</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0645078165" class="btn-call" onclick="trackClick('Sorties & Activités Intérieur-Liste-Appeler-Massages Villarais', 'tel:0645078165')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0645078165" class="btn-call" onclick="trackClick('Sorties & Activités Intérieur-Liste-Appeler-Massages Villarais', 'tel:0645078165')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.massages-villarais.fr/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Intérieur-Liste-Site-Massages Villarais', 'https://www.massages-villarais.fr/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.massages-villarais.fr/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Intérieur-Liste-Site-Massages Villarais', 'https://www.massages-villarais.fr/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.66845, 4.90458], this); trackClick('Sorties & Activités Intérieur-Liste-carte-Massages Villarais', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.66845, 4.90458], this); trackClick('Sorties & Activités Intérieur-Liste-carte-Massages Villarais', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Massages Villarais'); trackClick('Sorties & Activités Intérieur-Liste-photos-Massages Villarais', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Massages Villarais'); trackClick('Sorties & Activités Intérieur-Liste-options-Massages Villarais', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Massages Villarais'); trackClick('Sorties & Activités Intérieur-Liste-options-Massages Villarais', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Toute une gamme de massages, pour faire du bien au corps.                                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Massages Villarais" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="interieur-item" data-name="Multiplexe Ciné Quai - Cinéma">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏠 Multiplexe Ciné Quai - Cinéma</h4>
                                                <p>🗺️ 36 rue Lamartine<br>52100 Saint-Dizier</p>
                                                <p>📞 0325050325</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0325050325" class="btn-call" onclick="trackClick('Sorties & Activités Intérieur-Liste-Appeler-Multiplexe Ciné Quai - Cinéma', 'tel:0325050325')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0325050325" class="btn-call" onclick="trackClick('Sorties & Activités Intérieur-Liste-Appeler-Multiplexe Ciné Quai - Cinéma', 'tel:0325050325')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.cinequai.fr/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Intérieur-Liste-Site-Multiplexe Ciné Quai - Cinéma', 'https://www.cinequai.fr/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.cinequai.fr/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Intérieur-Liste-Site-Multiplexe Ciné Quai - Cinéma', 'https://www.cinequai.fr/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.63940, 4.95242], this); trackClick('Sorties & Activités Intérieur-Liste-carte-Multiplexe Ciné Quai - Cinéma', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.63940, 4.95242], this); trackClick('Sorties & Activités Intérieur-Liste-carte-Multiplexe Ciné Quai - Cinéma', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Multiplexe Ciné Quai - Cinéma'); trackClick('Sorties & Activités Intérieur-Liste-photos-Multiplexe Ciné Quai - Cinéma', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Multiplexe Ciné Quai - Cinéma'); trackClick('Sorties & Activités Intérieur-Liste-options-Multiplexe Ciné Quai - Cinéma', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Multiplexe Ciné Quai - Cinéma'); trackClick('Sorties & Activités Intérieur-Liste-options-Multiplexe Ciné Quai - Cinéma', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Multiplexe Ciné Quai - Cinéma" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="interieur-item" data-name="Cinéma Pierre Brasseur">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🏠 Cinéma Pierre Brasseur</h4>
                                                <p>🗺️ 18 Grande rue de Vaux<br>51300 Vitry-le-François</p>
                                                <p>📞 0326740110</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0326740110" class="btn-call" onclick="trackClick('Sorties & Activités Intérieur-Liste-Appeler-Cinéma Pierre Brasseur', 'tel:0326740110')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0326740110" class="btn-call" onclick="trackClick('Sorties & Activités Intérieur-Liste-Appeler-Cinéma Pierre Brasseur', 'tel:0326740110')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.cine-vitry.fr/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Intérieur-Liste-Site-Cinéma Pierre Brasseur', 'https://www.cine-vitry.fr/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.cine-vitry.fr/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Intérieur-Liste-Site-Cinéma Pierre Brasseur', 'https://www.cine-vitry.fr/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.72728, 4.58652], this); trackClick('Sorties & Activités Intérieur-Liste-carte-Cinéma Pierre Brasseur', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.72728, 4.58652], this); trackClick('Sorties & Activités Intérieur-Liste-carte-Cinéma Pierre Brasseur', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Cinéma Pierre Brasseur'); trackClick('Sorties & Activités Intérieur-Liste-photos-Cinéma Pierre Brasseur', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Cinéma Pierre Brasseur'); trackClick('Sorties & Activités Intérieur-Liste-options-Cinéma Pierre Brasseur', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Cinéma Pierre Brasseur'); trackClick('Sorties & Activités Intérieur-Liste-options-Cinéma Pierre Brasseur', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Cinéma Pierre Brasseur" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
                        
            <!-- DÉMO EN DUR pour chaque catégorie -->
            
            <!-- DEMO intérieur -->
                        <div class="interieur-item" data-name="Activité Intérieur Demo">
                <div class="restaurant-cardDemo" style="border-left: 5px solid #f8fc04;">
                    <div class="restaurant-card-content">
                        <h4>🏠 Activité Intérieur DÉMO - Carrousel Photos + Bouton Menu</h4>
                        <p style="color: #a855f7; 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('Sorties & Activités Intérieur-Liste-Site-Intérieur DEMO', '#')">🌐 Contactez-nous</a>
                            <button onclick="zoomToRestaurant([48.553638, 4.767266], this); trackClick('Sorties & Activités Intérieur-Liste-carte-Intérieur DEMO', '#')" class="btn-map">📍 Carte</button>
                            <button onclick="openMenuModal('Pub_int3.jpg', 'Intérieur DÉMO'); trackClick('Sorties & Activités Intérieur-Liste-menu-Intérieur 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;">⭐ 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>

</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="Pub_int1.jpg" alt="Photo 1">
                                </div>
                                <div class="carousel-slide">
                                    <img src="Pub_int2.jpg" alt="Photo 2">
                                </div>
                                <div class="carousel-slide">
                                    <img src="Pub_int3.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 NAUTISME ========== -->
    <div id="nautisme-list-container" style="display: none; margin-top: 20px;">
        <div class="map-title">
            <div class="map-title-content" >
                <h2>⛵ Liste des Nautisme</h2>
                <div style="display: flex; gap: 10px; align-items: center;">
                    <input type="text" id="searchBarNautisme" placeholder="Rechercher..." style="flex: 1; padding: 10px 15px; font-size: 16px;" onclick="trackClick('Sorties & Activités Nautisme Recherche dans liste', '#')">
                    <button class="btn-clear-filter" onclick="clearSearchFilterNautisme(); trackClick('Sorties & Activités Nautisme Effacer recherche', '#')">🔄 Effacer filtre</button>
                </div>
            </div>
        </div>

        <div id="dynamic-list-nautisme">
            <div class="nautisme-item" data-name="Bateau Ecole Jean Jaurès">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>⛵ Bateau Ecole Jean Jaurès</h4>
                                                <p>🗺️ 21 place de l'Hôtel de Ville<br>52290 La Porte du Der</p>
                                                <p>📞 0670087711</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0670087711" class="btn-call" onclick="trackClick('Sorties & Activités Nautisme-Liste-Appeler-Bateau Ecole Jean Jaurès', 'tel:0670087711')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0670087711" class="btn-call" onclick="trackClick('Sorties & Activités Nautisme-Liste-Appeler-Bateau Ecole Jean Jaurès', 'tel:0670087711')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.bateauecolereims.fr/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Nautisme-Liste-Site-Bateau Ecole Jean Jaurès', 'https://www.bateauecolereims.fr/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.bateauecolereims.fr/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Nautisme-Liste-Site-Bateau Ecole Jean Jaurès', 'https://www.bateauecolereims.fr/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.47675, 4.77208], this); trackClick('Sorties & Activités Nautisme-Liste-carte-Bateau Ecole Jean Jaurès', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.47675, 4.77208], this); trackClick('Sorties & Activités Nautisme-Liste-carte-Bateau Ecole Jean Jaurès', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Bateau Ecole Jean Jaurès'); trackClick('Sorties & Activités Nautisme-Liste-photos-Bateau Ecole Jean Jaurès', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Bateau Ecole Jean Jaurès'); trackClick('Sorties & Activités Nautisme-Liste-options-Bateau Ecole Jean Jaurès', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Bateau Ecole Jean Jaurès'); trackClick('Sorties & Activités Nautisme-Liste-options-Bateau Ecole Jean Jaurès', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>PERMIS BATEAU, JET SKI, REMORQUE                                                <br>Formation rapide, cours le week-end sur le Lac du Der                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Bateau Ecole Jean Jaurès" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="nautisme-item" data-name="Bateau de promenade - Au Fil de l'Eau">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>⛵ Bateau de promenade - Au Fil de l'Eau</h4>
                                                <p>🗺️ Station Nautique<br>51290 Giffaumont-Champaubert</p>
                                                <p>📞 0678750517</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0678750517" class="btn-call" onclick="trackClick('Sorties & Activités Nautisme-Liste-Appeler-Bateau de promenade - Au Fil de l\'Eau', 'tel:0678750517')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0678750517" class="btn-call" onclick="trackClick('Sorties & Activités Nautisme-Liste-Appeler-Bateau de promenade - Au Fil de l\'Eau', 'tel:0678750517')">📞 Appeler</a>
                                                                                    <!-- <a href="https://aufildeleau51.fr/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Nautisme-Liste-Site-Bateau de promenade - Au Fil de l\'Eau', 'https://aufildeleau51.fr/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://aufildeleau51.fr/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Nautisme-Liste-Site-Bateau de promenade - Au Fil de l\'Eau', 'https://aufildeleau51.fr/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.55441, 4.77214], this); trackClick('Sorties & Activités Nautisme-Liste-carte-Bateau de promenade - Au Fil de l\'Eau', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.55441, 4.77214], this); trackClick('Sorties & Activités Nautisme-Liste-carte-Bateau de promenade - Au Fil de l\'Eau', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Bateau de promenade - Au Fil de l&#039;Eau'); trackClick('Sorties & Activités Nautisme-Liste-photos-Bateau de promenade - Au Fil de l&#039;Eau', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Bateau de promenade - Au Fil de l\'Eau'); trackClick('Sorties & Activités Nautisme-Liste-options-Bateau de promenade - Au Fil de l\'Eau', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Bateau de promenade - Au Fil de l\'Eau'); trackClick('Sorties & Activités Nautisme-Liste-options-Bateau de promenade - Au Fil de l\'Eau', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Le tour du lac, Au fil de l&#039;Eau vous emmène pour une aventure sur l&#039;eau                                                <br>Adulte 10€ - Enfant 9€ - PMR - Animaux acceptés                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Bateau de promenade - Au Fil de l'Eau" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="nautisme-item" data-name="FunCenter - Locations de Jet-Skis">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>⛵ FunCenter - Locations de Jet-Skis</h4>
                                                <p>🗺️ Station Nautique<br>51290 Giffaumont-Champaubert</p>
                                                <p>📞 0659308697</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0659308697" class="btn-call" onclick="trackClick('Sorties & Activités Nautisme-Liste-Appeler-FunCenter - Locations de Jet-Skis', 'tel:0659308697')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0659308697" class="btn-call" onclick="trackClick('Sorties & Activités Nautisme-Liste-Appeler-FunCenter - Locations de Jet-Skis', 'tel:0659308697')">📞 Appeler</a>
                                                                                    <!-- <a href="https://funcenter-lacduder.com/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Nautisme-Liste-Site-FunCenter - Locations de Jet-Skis', 'https://funcenter-lacduder.com/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://funcenter-lacduder.com/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Nautisme-Liste-Site-FunCenter - Locations de Jet-Skis', 'https://funcenter-lacduder.com/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.55432, 4.77237], this); trackClick('Sorties & Activités Nautisme-Liste-carte-FunCenter - Locations de Jet-Skis', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.55432, 4.77237], this); trackClick('Sorties & Activités Nautisme-Liste-carte-FunCenter - Locations de Jet-Skis', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'FunCenter - Locations de Jet-Skis'); trackClick('Sorties & Activités Nautisme-Liste-photos-FunCenter - Locations de Jet-Skis', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'FunCenter - Locations de Jet-Skis'); trackClick('Sorties & Activités Nautisme-Liste-options-FunCenter - Locations de Jet-Skis', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'FunCenter - Locations de Jet-Skis'); trackClick('Sorties & Activités Nautisme-Liste-options-FunCenter - Locations de Jet-Skis', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Initiation sans permis avec moniteur diplômé (à partir de 16 ans)                                                <br>Tarif: 80€ les 30 min (1 ou 2 pers.)                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="FunCenter - Locations de Jet-Skis" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="nautisme-item" data-name="Ligue de l'Enseignement FOL 55">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>⛵ Ligue de l'Enseignement FOL 55</h4>
                                                <p>🗺️ Station Nautique<br>51290 Giffaumont-Champaubert</p>
                                                <p>📞 0326621031</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0326621031" class="btn-call" onclick="trackClick('Sorties & Activités Nautisme-Liste-Appeler-Ligue de l\'Enseignement FOL 55', 'tel:0326621031')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0326621031" class="btn-call" onclick="trackClick('Sorties & Activités Nautisme-Liste-Appeler-Ligue de l\'Enseignement FOL 55', 'tel:0326621031')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.ligue55.org/Giffaumont" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Nautisme-Liste-Site-Ligue de l\'Enseignement FOL 55', 'https://www.ligue55.org/Giffaumont')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.ligue55.org/Giffaumont" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Nautisme-Liste-Site-Ligue de l\'Enseignement FOL 55', 'https://www.ligue55.org/Giffaumont')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.55421, 4.78029], this); trackClick('Sorties & Activités Nautisme-Liste-carte-Ligue de l\'Enseignement FOL 55', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.55421, 4.78029], this); trackClick('Sorties & Activités Nautisme-Liste-carte-Ligue de l\'Enseignement FOL 55', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Ligue de l&#039;Enseignement FOL 55'); trackClick('Sorties & Activités Nautisme-Liste-photos-Ligue de l&#039;Enseignement FOL 55', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Ligue de l\'Enseignement FOL 55'); trackClick('Sorties & Activités Nautisme-Liste-options-Ligue de l\'Enseignement FOL 55', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Ligue de l\'Enseignement FOL 55'); trackClick('Sorties & Activités Nautisme-Liste-options-Ligue de l\'Enseignement FOL 55', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Formation &amp; Location labellisé FFVoile: kayak, paddle, catamaran, dériveur, planche à voile, wing Foil.                                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Ligue de l'Enseignement FOL 55" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="nautisme-item" data-name="Nomad'Ride">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>⛵ Nomad'Ride</h4>
                                                <p>🗺️ 6 rue des Bois<br>51290 Sainte-Marie-du-Lac-Nuisement</p>
                                                <p>📞 0632203416</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0632203416" class="btn-call" onclick="trackClick('Sorties & Activités Nautisme-Liste-Appeler-Nomad\'Ride', 'tel:0632203416')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0632203416" class="btn-call" onclick="trackClick('Sorties & Activités Nautisme-Liste-Appeler-Nomad\'Ride', 'tel:0632203416')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.nomadride.fr/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Nautisme-Liste-Site-Nomad\'Ride', 'https://www.nomadride.fr/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.nomadride.fr/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Nautisme-Liste-Site-Nomad\'Ride', 'https://www.nomadride.fr/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.60554, 4.77464], this); trackClick('Sorties & Activités Nautisme-Liste-carte-Nomad\'Ride', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.60554, 4.77464], this); trackClick('Sorties & Activités Nautisme-Liste-carte-Nomad\'Ride', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Nomad&#039;Ride'); trackClick('Sorties & Activités Nautisme-Liste-photos-Nomad&#039;Ride', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Nomad\'Ride'); trackClick('Sorties & Activités Nautisme-Liste-options-Nomad\'Ride', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Nomad\'Ride'); trackClick('Sorties & Activités Nautisme-Liste-options-Nomad\'Ride', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Location de CANOES et Stand Up Paddle                                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Nomad'Ride" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="nautisme-item" data-name="Maison des Pêcheurs">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>⛵ Maison des Pêcheurs</h4>
                                                <p>🗺️ 5 Chemin des Milleperthuis Station Nautique<br>51290 Giffaumont-Champaubert</p>
                                                <p>📞 0326726343</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0326726343" class="btn-call" onclick="trackClick('Sorties & Activités Nautisme-Liste-Appeler-Maison des Pêcheurs', 'tel:0326726343')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0326726343" class="btn-call" onclick="trackClick('Sorties & Activités Nautisme-Liste-Appeler-Maison des Pêcheurs', 'tel:0326726343')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.pecheauder.com/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Nautisme-Liste-Site-Maison des Pêcheurs', 'https://www.pecheauder.com/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.pecheauder.com/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Nautisme-Liste-Site-Maison des Pêcheurs', 'https://www.pecheauder.com/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.55370, 4.77607], this); trackClick('Sorties & Activités Nautisme-Liste-carte-Maison des Pêcheurs', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.55370, 4.77607], this); trackClick('Sorties & Activités Nautisme-Liste-carte-Maison des Pêcheurs', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Maison des Pêcheurs'); trackClick('Sorties & Activités Nautisme-Liste-photos-Maison des Pêcheurs', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Maison des Pêcheurs'); trackClick('Sorties & Activités Nautisme-Liste-options-Maison des Pêcheurs', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Maison des Pêcheurs'); trackClick('Sorties & Activités Nautisme-Liste-options-Maison des Pêcheurs', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>out sur la pêche au bord et sur le lac du Der                                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Maison des Pêcheurs" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="nautisme-item" data-name="PLAYA REGAT'Ô">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>⛵ PLAYA REGAT'Ô</h4>
                                                <p>🗺️ Presqu'île de Rougemer<br>51290 Giffaumont-Champaubert</p>
                                                <p>📞 0647552213</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0647552213" class="btn-call" onclick="trackClick('Sorties & Activités Nautisme-Liste-Appeler-PLAYA REGAT\'Ô', 'tel:0647552213')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0647552213" class="btn-call" onclick="trackClick('Sorties & Activités Nautisme-Liste-Appeler-PLAYA REGAT\'Ô', 'tel:0647552213')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.facebook.com/regisregatostanduppaddle" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Nautisme-Liste-Site-PLAYA REGAT\'Ô', 'https://www.facebook.com/regisregatostanduppaddle')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.facebook.com/regisregatostanduppaddle" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Nautisme-Liste-Site-PLAYA REGAT\'Ô', 'https://www.facebook.com/regisregatostanduppaddle')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.55323, 4.78016], this); trackClick('Sorties & Activités Nautisme-Liste-carte-PLAYA REGAT\'Ô', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.55323, 4.78016], this); trackClick('Sorties & Activités Nautisme-Liste-carte-PLAYA REGAT\'Ô', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'PLAYA REGAT&#039;Ô'); trackClick('Sorties & Activités Nautisme-Liste-photos-PLAYA REGAT&#039;Ô', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'PLAYA REGAT\'Ô'); trackClick('Sorties & Activités Nautisme-Liste-options-PLAYA REGAT\'Ô', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'PLAYA REGAT\'Ô'); trackClick('Sorties & Activités Nautisme-Liste-options-PLAYA REGAT\'Ô', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Location de paddle - Initiation (Paddle solo duo ou familial 4-10 personnes)                                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="PLAYA REGAT'Ô" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="nautisme-item" data-name="Batel Plaisance">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>⛵ Batel Plaisance</h4>
                                                <p>🗺️ Station Nautique<br>51290 Giffaumont-Champaubert</p>
                                                <p>📞 0325412000</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0325412000" class="btn-call" onclick="trackClick('Sorties & Activités Nautisme-Liste-Appeler-Batel Plaisance', 'tel:0325412000')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0325412000" class="btn-call" onclick="trackClick('Sorties & Activités Nautisme-Liste-Appeler-Batel Plaisance', 'tel:0325412000')">📞 Appeler</a>
                                                                                    <!-- <a href="https://batel-plaisance.fr/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Nautisme-Liste-Site-Batel Plaisance', 'https://batel-plaisance.fr/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://batel-plaisance.fr/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Nautisme-Liste-Site-Batel Plaisance', 'https://batel-plaisance.fr/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.55264, 4.77318], this); trackClick('Sorties & Activités Nautisme-Liste-carte-Batel Plaisance', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.55264, 4.77318], this); trackClick('Sorties & Activités Nautisme-Liste-carte-Batel Plaisance', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Batel Plaisance'); trackClick('Sorties & Activités Nautisme-Liste-photos-Batel Plaisance', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Batel Plaisance'); trackClick('Sorties & Activités Nautisme-Liste-options-Batel Plaisance', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Batel Plaisance'); trackClick('Sorties & Activités Nautisme-Liste-options-Batel Plaisance', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Location de bateaux avec permis sur Lac du DER                                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Batel Plaisance" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="nautisme-item" data-name="Club voile et vent (C.V.V.) - Club de voile">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>⛵ Club voile et vent (C.V.V.) - Club de voile</h4>
                                                <p>🗺️ Presqu'Île de Champaubert<br>52290 Giffaumont-Champaubert</p>
                                                <p>📞 0786878145</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0786878145" class="btn-call" onclick="trackClick('Sorties & Activités Nautisme-Liste-Appeler-Club voile et vent (C.V.V.) - Club de voile', 'tel:0786878145')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0786878145" class="btn-call" onclick="trackClick('Sorties & Activités Nautisme-Liste-Appeler-Club voile et vent (C.V.V.) - Club de voile', 'tel:0786878145')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.facebook.com/p/Club-Voile-et-Vent-100064848573942/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Nautisme-Liste-Site-Club voile et vent (C.V.V.) - Club de voile', 'https://www.facebook.com/p/Club-Voile-et-Vent-100064848573942/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.facebook.com/p/Club-Voile-et-Vent-100064848573942/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Nautisme-Liste-Site-Club voile et vent (C.V.V.) - Club de voile', 'https://www.facebook.com/p/Club-Voile-et-Vent-100064848573942/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.55559, 4.78937], this); trackClick('Sorties & Activités Nautisme-Liste-carte-Club voile et vent (C.V.V.) - Club de voile', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.55559, 4.78937], this); trackClick('Sorties & Activités Nautisme-Liste-carte-Club voile et vent (C.V.V.) - Club de voile', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Club voile et vent (C.V.V.) - Club de voile'); trackClick('Sorties & Activités Nautisme-Liste-photos-Club voile et vent (C.V.V.) - Club de voile', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Club voile et vent (C.V.V.) - Club de voile'); trackClick('Sorties & Activités Nautisme-Liste-options-Club voile et vent (C.V.V.) - Club de voile', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Club voile et vent (C.V.V.) - Club de voile'); trackClick('Sorties & Activités Nautisme-Liste-options-Club voile et vent (C.V.V.) - Club de voile', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Le club s&#039;adresse aux planchistes, dériveurs légers et catamarans et amateur de canoë-kayak                                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Club voile et vent (C.V.V.) - Club de voile" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="nautisme-item" data-name="Ecole départementale de voile de Braucourt">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>⛵ Ecole départementale de voile de Braucourt</h4>
                                                <p>🗺️ Presqu'Île de Champaubert<br>52290 Braucourt</p>
                                                <p>📞 03250412</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:03250412" class="btn-call" onclick="trackClick('Sorties & Activités Nautisme-Liste-Appeler-Ecole départementale de voile de Braucourt', 'tel:03250412')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:03250412" class="btn-call" onclick="trackClick('Sorties & Activités Nautisme-Liste-Appeler-Ecole départementale de voile de Braucourt', 'tel:03250412')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.cchm52.fr/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Nautisme-Liste-Site-Ecole départementale de voile de Braucourt', 'https://www.cchm52.fr/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.cchm52.fr/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Nautisme-Liste-Site-Ecole départementale de voile de Braucourt', 'https://www.cchm52.fr/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.55258, 4.79225], this); trackClick('Sorties & Activités Nautisme-Liste-carte-Ecole départementale de voile de Braucourt', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.55258, 4.79225], this); trackClick('Sorties & Activités Nautisme-Liste-carte-Ecole départementale de voile de Braucourt', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Ecole départementale de voile de Braucourt'); trackClick('Sorties & Activités Nautisme-Liste-photos-Ecole départementale de voile de Braucourt', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Ecole départementale de voile de Braucourt'); trackClick('Sorties & Activités Nautisme-Liste-options-Ecole départementale de voile de Braucourt', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Ecole départementale de voile de Braucourt'); trackClick('Sorties & Activités Nautisme-Liste-options-Ecole départementale de voile de Braucourt', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>La Base de voile de Braucourt accueille de mars à octobre écoles et groupes pour des séjours nature et nautiques. Hébergement en tipis ou tentes, activités variées : voile, kayak, paddle, VTT, géocaching et découverte du lac du Der.                                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Ecole départementale de voile de Braucourt" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="nautisme-item" data-name="FunCenter - Locations">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>⛵ FunCenter - Locations</h4>
                                                <p>🗺️ Presqu'Île de Champaubert<br>52290 Braucourt</p>
                                                <p>📞 0659308697</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0659308697" class="btn-call" onclick="trackClick('Sorties & Activités Nautisme-Liste-Appeler-FunCenter - Locations', 'tel:0659308697')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0659308697" class="btn-call" onclick="trackClick('Sorties & Activités Nautisme-Liste-Appeler-FunCenter - Locations', 'tel:0659308697')">📞 Appeler</a>
                                                                                    <!-- <a href="https://funcenter-lacduder.com/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Nautisme-Liste-Site-FunCenter - Locations', 'https://funcenter-lacduder.com/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://funcenter-lacduder.com/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Nautisme-Liste-Site-FunCenter - Locations', 'https://funcenter-lacduder.com/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.55590, 4.78849], this); trackClick('Sorties & Activités Nautisme-Liste-carte-FunCenter - Locations', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.55590, 4.78849], this); trackClick('Sorties & Activités Nautisme-Liste-carte-FunCenter - Locations', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'FunCenter - Locations'); trackClick('Sorties & Activités Nautisme-Liste-photos-FunCenter - Locations', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'FunCenter - Locations'); trackClick('Sorties & Activités Nautisme-Liste-options-FunCenter - Locations', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'FunCenter - Locations'); trackClick('Sorties & Activités Nautisme-Liste-options-FunCenter - Locations', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Location de Surf électrique, paddle (solo double ou géant!) &amp; canoë kayak.                                                <br>A ne pas manquer!                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="FunCenter - Locations" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="nautisme-item" data-name="FunCenter - Bouées tractées">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>⛵ FunCenter - Bouées tractées</h4>
                                                <p>🗺️ Port de Giffaumont<br>51290 Giffaumont-Champaubert</p>
                                                <p>📞 0659308697</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0659308697" class="btn-call" onclick="trackClick('Sorties & Activités Nautisme-Liste-Appeler-FunCenter - Bouées tractées', 'tel:0659308697')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0659308697" class="btn-call" onclick="trackClick('Sorties & Activités Nautisme-Liste-Appeler-FunCenter - Bouées tractées', 'tel:0659308697')">📞 Appeler</a>
                                                                                    <!-- <a href="https://funcenter-lacduder.com/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Nautisme-Liste-Site-FunCenter - Bouées tractées', 'https://funcenter-lacduder.com/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://funcenter-lacduder.com/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Nautisme-Liste-Site-FunCenter - Bouées tractées', 'https://funcenter-lacduder.com/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.55426, 4.77247], this); trackClick('Sorties & Activités Nautisme-Liste-carte-FunCenter - Bouées tractées', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.55426, 4.77247], this); trackClick('Sorties & Activités Nautisme-Liste-carte-FunCenter - Bouées tractées', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'FunCenter - Bouées tractées'); trackClick('Sorties & Activités Nautisme-Liste-photos-FunCenter - Bouées tractées', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'FunCenter - Bouées tractées'); trackClick('Sorties & Activités Nautisme-Liste-options-FunCenter - Bouées tractées', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'FunCenter - Bouées tractées'); trackClick('Sorties & Activités Nautisme-Liste-options-FunCenter - Bouées tractées', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Près pour des sensations fortes ? Bouée tractée, Ski nautique, Wakeboard, Wakesurf                                                <br>Bouée tractée 20€ 15min - Ski ou wake 40€ 15min                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="FunCenter - Bouées tractées" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="nautisme-item" data-name="PLAYA REGAT'Ô - Location de pédalos">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>⛵ PLAYA REGAT'Ô - Location de pédalos</h4>
                                                <p>🗺️ Presqu'île de Rougemer<br>51290 Giffaumont-Champaubert</p>
                                                <p>📞 0647552213</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0647552213" class="btn-call" onclick="trackClick('Sorties & Activités Nautisme-Liste-Appeler-PLAYA REGAT\'Ô - Location de pédalos', 'tel:0647552213')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0647552213" class="btn-call" onclick="trackClick('Sorties & Activités Nautisme-Liste-Appeler-PLAYA REGAT\'Ô - Location de pédalos', 'tel:0647552213')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.facebook.com/regisregatostanduppaddle" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Nautisme-Liste-Site-PLAYA REGAT\'Ô - Location de pédalos', 'https://www.facebook.com/regisregatostanduppaddle')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.facebook.com/regisregatostanduppaddle" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Nautisme-Liste-Site-PLAYA REGAT\'Ô - Location de pédalos', 'https://www.facebook.com/regisregatostanduppaddle')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.55335, 4.78035], this); trackClick('Sorties & Activités Nautisme-Liste-carte-PLAYA REGAT\'Ô - Location de pédalos', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.55335, 4.78035], this); trackClick('Sorties & Activités Nautisme-Liste-carte-PLAYA REGAT\'Ô - Location de pédalos', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'PLAYA REGAT&#039;Ô - Location de pédalos'); trackClick('Sorties & Activités Nautisme-Liste-photos-PLAYA REGAT&#039;Ô - Location de pédalos', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'PLAYA REGAT\'Ô - Location de pédalos'); trackClick('Sorties & Activités Nautisme-Liste-options-PLAYA REGAT\'Ô - Location de pédalos', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'PLAYA REGAT\'Ô - Location de pédalos'); trackClick('Sorties & Activités Nautisme-Liste-options-PLAYA REGAT\'Ô - Location de pédalos', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Location de pédalo                                                <br>A partir de 13€                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="PLAYA REGAT'Ô - Location de pédalos" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="nautisme-item" data-name="PEDAL' Ô DER - location de pédalos et paddles">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>⛵ PEDAL' Ô DER - location de pédalos et paddles</h4>
                                                <p>🗺️ Parking Arrigny Plage de Larzicourt<br>51290 Larzicourt</p>
                                                <p>📞 0663679457</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0663679457" class="btn-call" onclick="trackClick('Sorties & Activités Nautisme-Liste-Appeler-PEDAL\' Ô DER - location de pédalos et paddles', 'tel:0663679457')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0663679457" class="btn-call" onclick="trackClick('Sorties & Activités Nautisme-Liste-Appeler-PEDAL\' Ô DER - location de pédalos et paddles', 'tel:0663679457')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.facebook.com/pedaloder.pedaloder" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Nautisme-Liste-Site-PEDAL\' Ô DER - location de pédalos et paddles', 'https://www.facebook.com/pedaloder.pedaloder')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.facebook.com/pedaloder.pedaloder" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Nautisme-Liste-Site-PEDAL\' Ô DER - location de pédalos et paddles', 'https://www.facebook.com/pedaloder.pedaloder')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.60319, 4.71722], this); trackClick('Sorties & Activités Nautisme-Liste-carte-PEDAL\' Ô DER - location de pédalos et paddles', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.60319, 4.71722], this); trackClick('Sorties & Activités Nautisme-Liste-carte-PEDAL\' Ô DER - location de pédalos et paddles', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'PEDAL&#039; Ô DER - location de pédalos et paddles'); trackClick('Sorties & Activités Nautisme-Liste-photos-PEDAL&#039; Ô DER - location de pédalos et paddles', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'PEDAL\' Ô DER - location de pédalos et paddles'); trackClick('Sorties & Activités Nautisme-Liste-options-PEDAL\' Ô DER - location de pédalos et paddles', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'PEDAL\' Ô DER - location de pédalos et paddles'); trackClick('Sorties & Activités Nautisme-Liste-options-PEDAL\' Ô DER - location de pédalos et paddles', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Location de pédalo XL &amp; paddles (simple, duo et XL)                                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="PEDAL' Ô DER - location de pédalos et paddles" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="nautisme-item" data-name="La Flotte du Der">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>⛵ La Flotte du Der</h4>
                                                <p>🗺️ Port de Giffaumont<br>51290 Giffaumont-Champaubert</p>
                                                <p>📞 0632412798</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0632412798" class="btn-call" onclick="trackClick('Sorties & Activités Nautisme-Liste-Appeler-La Flotte du Der', 'tel:0632412798')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0632412798" class="btn-call" onclick="trackClick('Sorties & Activités Nautisme-Liste-Appeler-La Flotte du Der', 'tel:0632412798')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.lacduder.com/offres/la-flotte-du-der-giffaumont-champaubert-fr-4986946/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Nautisme-Liste-Site-La Flotte du Der', 'https://www.lacduder.com/offres/la-flotte-du-der-giffaumont-champaubert-fr-4986946/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.lacduder.com/offres/la-flotte-du-der-giffaumont-champaubert-fr-4986946/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Nautisme-Liste-Site-La Flotte du Der', 'https://www.lacduder.com/offres/la-flotte-du-der-giffaumont-champaubert-fr-4986946/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.55377, 4.77593], this); trackClick('Sorties & Activités Nautisme-Liste-carte-La Flotte du Der', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.55377, 4.77593], this); trackClick('Sorties & Activités Nautisme-Liste-carte-La Flotte du Der', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'La Flotte du Der'); trackClick('Sorties & Activités Nautisme-Liste-photos-La Flotte du Der', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'La Flotte du Der'); trackClick('Sorties & Activités Nautisme-Liste-options-La Flotte du Der', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'La Flotte du Der'); trackClick('Sorties & Activités Nautisme-Liste-options-La Flotte du Der', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Location de bateaux électriques sans permis                                                <br>A partir de 30€ pour 1h.                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="La Flotte du Der" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="nautisme-item" data-name="Aquader - parc aquatique gonflable">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>⛵ Aquader - parc aquatique gonflable</h4>
                                                <p>🗺️ Port de Nuisement<br>51290 Sainte-Marie-du-Lac-Nuisement</p>
                                                <p>📞 0757083677</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0757083677" class="btn-call" onclick="trackClick('Sorties & Activités Nautisme-Liste-Appeler-Aquader - parc aquatique gonflable', 'tel:0757083677')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0757083677" class="btn-call" onclick="trackClick('Sorties & Activités Nautisme-Liste-Appeler-Aquader - parc aquatique gonflable', 'tel:0757083677')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.aquader51.fr/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Nautisme-Liste-Site-Aquader - parc aquatique gonflable', 'https://www.aquader51.fr/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.aquader51.fr/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Nautisme-Liste-Site-Aquader - parc aquatique gonflable', 'https://www.aquader51.fr/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.60356, 4.74600], this); trackClick('Sorties & Activités Nautisme-Liste-carte-Aquader - parc aquatique gonflable', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.60356, 4.74600], this); trackClick('Sorties & Activités Nautisme-Liste-carte-Aquader - parc aquatique gonflable', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Aquader - parc aquatique gonflable'); trackClick('Sorties & Activités Nautisme-Liste-photos-Aquader - parc aquatique gonflable', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Aquader - parc aquatique gonflable'); trackClick('Sorties & Activités Nautisme-Liste-options-Aquader - parc aquatique gonflable', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Aquader - parc aquatique gonflable'); trackClick('Sorties & Activités Nautisme-Liste-options-Aquader - parc aquatique gonflable', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Parc aquatique gonflable du Lac du Der                                                <br>A partir de 12€                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Aquader - parc aquatique gonflable" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
                        
            <!-- DÉMO EN DUR pour chaque catégorie -->
                        
            <!-- DEMO NAUTISME -->
                        <div class="nautisme-item" data-name="Activité Nautisme Demo">
                <div class="restaurant-cardDemo" style="border-left: 5px solid #f8fc04;">
                    <div class="restaurant-card-content">
                        <h4>⛵ Nautisme DÉMO - Carrousel Photos + Bouton Menu</h4>
                        <p style="color: #a855f7; 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('Sorties & Activités Nautisme-Liste-Site-Nautisme DEMO', '#')">🌐 Contactez-nous</a>
                            <button onclick="zoomToRestaurant([48.58209, 4.81104], this); trackClick('Sorties & Activités Nautisme-Liste-carte-Nautisme DEMO', '#')" class="btn-map">📍 Carte</button>
                            <button onclick="openMenuModal('menu1.jpg', 'Nautisme DÉMO'); trackClick('Sorties & Activités Nautisme-Liste-menu-Nautisme 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;">⭐ Vous souhaitez 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_activités_pub.jpg" alt="Photo 1">
                                </div>
                                <div class="carousel-slide">
                                    <img src="Pub_nautisme1.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 CULTUREL ========== -->
    <div id="culturel-list-container" style="display: none; margin-top: 20px;">
        <div class="map-title">
            <div class="map-title-content" >
                <h2>🎨 Liste des Culturel</h2>
                <div style="display: flex; gap: 10px; align-items: center;">
                    <input type="text" id="searchBarCulturel" placeholder="Rechercher..." style="flex: 1; padding: 10px 15px; font-size: 16px;" onclick="trackClick('Sorties & Activités Culturel Recherche dans liste', '#')">
                    <button class="btn-clear-filter" onclick="clearSearchFilterCulturel(); trackClick('Sorties & Activités Culturel Effacer recherche', '#')">🔄 Effacer filtre</button>
                </div>
            </div>
        </div>

        <div id="dynamic-list-culturel">
            <div class="culturel-item" data-name="Village Musée du Der">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🎨 Village Musée du Der</h4>
                                                <p>🗺️ Grande rue des Côtes<br>51290 Sainte-Marie-du-Lac-Nuisement</p>
                                                <p>📞 0326410102</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0326410102" class="btn-call" onclick="trackClick('Sorties & Activités Culturel-Liste-Appeler-Village Musée du Der', 'tel:0326410102')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0326410102" class="btn-call" onclick="trackClick('Sorties & Activités Culturel-Liste-Appeler-Village Musée du Der', 'tel:0326410102')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.villagemuseeduder.com/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Culturel-Liste-Site-Village Musée du Der', 'https://www.villagemuseeduder.com/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.villagemuseeduder.com/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Culturel-Liste-Site-Village Musée du Der', 'https://www.villagemuseeduder.com/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.60763, 4.77302], this); trackClick('Sorties & Activités Culturel-Liste-carte-Village Musée du Der', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.60763, 4.77302], this); trackClick('Sorties & Activités Culturel-Liste-carte-Village Musée du Der', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Village Musée du Der'); trackClick('Sorties & Activités Culturel-Liste-photos-Village Musée du Der', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Village Musée du Der'); trackClick('Sorties & Activités Culturel-Liste-options-Village Musée du Der', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Village Musée du Der'); trackClick('Sorties & Activités Culturel-Liste-options-Village Musée du Der', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Découvrez l&#039;histoire fascinante du Lac du Der sa création et son écosystème unique. Expositions permanentes et temporaires.                                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Village Musée du Der" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="culturel-item" data-name="Musée de Saint-Dizier">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🎨 Musée de Saint-Dizier</h4>
                                                <p>🗺️ 17 rue de la Victroire<br>52100 Saint-Dizier</p>
                                                <p>📞 0325073150</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0325073150" class="btn-call" onclick="trackClick('Sorties & Activités Culturel-Liste-Appeler-Musée de Saint-Dizier', 'tel:0325073150')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0325073150" class="btn-call" onclick="trackClick('Sorties & Activités Culturel-Liste-Appeler-Musée de Saint-Dizier', 'tel:0325073150')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.saint-dizier.fr/actualites-et-sorties/culture-et-patrimoine/musee-de-saint-dizier/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Culturel-Liste-Site-Musée de Saint-Dizier', 'https://www.saint-dizier.fr/actualites-et-sorties/culture-et-patrimoine/musee-de-saint-dizier/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.saint-dizier.fr/actualites-et-sorties/culture-et-patrimoine/musee-de-saint-dizier/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Culturel-Liste-Site-Musée de Saint-Dizier', 'https://www.saint-dizier.fr/actualites-et-sorties/culture-et-patrimoine/musee-de-saint-dizier/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.63790, 4.94819], this); trackClick('Sorties & Activités Culturel-Liste-carte-Musée de Saint-Dizier', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.63790, 4.94819], this); trackClick('Sorties & Activités Culturel-Liste-carte-Musée de Saint-Dizier', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Musée de Saint-Dizier'); trackClick('Sorties & Activités Culturel-Liste-photos-Musée de Saint-Dizier', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Musée de Saint-Dizier'); trackClick('Sorties & Activités Culturel-Liste-options-Musée de Saint-Dizier', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Musée de Saint-Dizier'); trackClick('Sorties & Activités Culturel-Liste-options-Musée de Saint-Dizier', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Découvrez une momie précolombienne, des décors architecturaux d’Hector Guimard et un trésor mérovingien.                                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Musée de Saint-Dizier" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="culturel-item" data-name="Muse Saint-Dizier">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🎨 Muse Saint-Dizier</h4>
                                                <p>🗺️ 24 rue Diderot<br>52100 Saint-Dizier</p>
                                                <p>📞 0972105053</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0972105053" class="btn-call" onclick="trackClick('Sorties & Activités Culturel-Liste-Appeler-Muse Saint-Dizier', 'tel:0972105053')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0972105053" class="btn-call" onclick="trackClick('Sorties & Activités Culturel-Liste-Appeler-Muse Saint-Dizier', 'tel:0972105053')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.saint-dizier.fr/actualites-et-sorties/culture-et-patrimoine/muse-saint-dizier/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Culturel-Liste-Site-Muse Saint-Dizier', 'https://www.saint-dizier.fr/actualites-et-sorties/culture-et-patrimoine/muse-saint-dizier/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.saint-dizier.fr/actualites-et-sorties/culture-et-patrimoine/muse-saint-dizier/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Culturel-Liste-Site-Muse Saint-Dizier', 'https://www.saint-dizier.fr/actualites-et-sorties/culture-et-patrimoine/muse-saint-dizier/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.63514, 4.95478], this); trackClick('Sorties & Activités Culturel-Liste-carte-Muse Saint-Dizier', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.63514, 4.95478], this); trackClick('Sorties & Activités Culturel-Liste-carte-Muse Saint-Dizier', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Muse Saint-Dizier'); trackClick('Sorties & Activités Culturel-Liste-photos-Muse Saint-Dizier', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Muse Saint-Dizier'); trackClick('Sorties & Activités Culturel-Liste-options-Muse Saint-Dizier', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Muse Saint-Dizier'); trackClick('Sorties & Activités Culturel-Liste-options-Muse Saint-Dizier', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>MUSE Découverte est un parcours permanent d’initiation à l’art, comprenant des activités ludiques et didactiques.                                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Muse Saint-Dizier" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="culturel-item" data-name="Metallurgic Park">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🎨 Metallurgic Park</h4>
                                                <p>🗺️ 13 rue du Maréchal Leclerc<br>52110 Dommartin-le-Franc</p>
                                                <p>📞 0325040707</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0325040707" class="btn-call" onclick="trackClick('Sorties & Activités Culturel-Liste-Appeler-Metallurgic Park', 'tel:0325040707')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0325040707" class="btn-call" onclick="trackClick('Sorties & Activités Culturel-Liste-Appeler-Metallurgic Park', 'tel:0325040707')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.saint-dizier.fr/actualites-et-sorties/culture-et-patrimoine/metallurgic-park/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Culturel-Liste-Site-Metallurgic Park', 'https://www.saint-dizier.fr/actualites-et-sorties/culture-et-patrimoine/metallurgic-park/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.saint-dizier.fr/actualites-et-sorties/culture-et-patrimoine/metallurgic-park/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Culturel-Liste-Site-Metallurgic Park', 'https://www.saint-dizier.fr/actualites-et-sorties/culture-et-patrimoine/metallurgic-park/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.42922, 4.96088], this); trackClick('Sorties & Activités Culturel-Liste-carte-Metallurgic Park', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.42922, 4.96088], this); trackClick('Sorties & Activités Culturel-Liste-carte-Metallurgic Park', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Metallurgic Park'); trackClick('Sorties & Activités Culturel-Liste-photos-Metallurgic Park', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Metallurgic Park'); trackClick('Sorties & Activités Culturel-Liste-options-Metallurgic Park', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Metallurgic Park'); trackClick('Sorties & Activités Culturel-Liste-options-Metallurgic Park', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Plongez au cœur de la métallurgie à Dommartin-le-Franc                                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Metallurgic Park" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="culturel-item" data-name="L'Ecole d'Autrefois">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🎨 L'Ecole d'Autrefois</h4>
                                                <p>🗺️ 66 rue Henri Pouilly<br>52410 Roches-sur-Marne</p>
                                                <p>📞 0325555969</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0325555969" class="btn-call" onclick="trackClick('Sorties & Activités Culturel-Liste-Appeler-L\'Ecole d\'Autrefois', 'tel:0325555969')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0325555969" class="btn-call" onclick="trackClick('Sorties & Activités Culturel-Liste-Appeler-L\'Ecole d\'Autrefois', 'tel:0325555969')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.saint-dizier.fr/actualites-et-sorties/culture-et-patrimoine/l-ecole-d-autrefois/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Culturel-Liste-Site-L\'Ecole d\'Autrefois', 'https://www.saint-dizier.fr/actualites-et-sorties/culture-et-patrimoine/l-ecole-d-autrefois/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.saint-dizier.fr/actualites-et-sorties/culture-et-patrimoine/l-ecole-d-autrefois/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Culturel-Liste-Site-L\'Ecole d\'Autrefois', 'https://www.saint-dizier.fr/actualites-et-sorties/culture-et-patrimoine/l-ecole-d-autrefois/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.60359, 5.03427], this); trackClick('Sorties & Activités Culturel-Liste-carte-L\'Ecole d\'Autrefois', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.60359, 5.03427], this); trackClick('Sorties & Activités Culturel-Liste-carte-L\'Ecole d\'Autrefois', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'L&#039;Ecole d&#039;Autrefois'); trackClick('Sorties & Activités Culturel-Liste-photos-L&#039;Ecole d&#039;Autrefois', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'L\'Ecole d\'Autrefois'); trackClick('Sorties & Activités Culturel-Liste-options-L\'Ecole d\'Autrefois', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'L\'Ecole d\'Autrefois'); trackClick('Sorties & Activités Culturel-Liste-options-L\'Ecole d\'Autrefois', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Visitez une salle de classe des années 1930 reconstituée.                                                <br>Adulte 5€ - Enfant moins de 17ans 3€                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="L'Ecole d'Autrefois" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="culturel-item" data-name="Au Petit Paris">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🎨 Au Petit Paris</h4>
                                                <p>🗺️ 478 avenue de la République<br>52100 Saint-Dizier</p>
                                                <p>📞 0351459623</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0351459623" class="btn-call" onclick="trackClick('Sorties & Activités Culturel-Liste-Appeler-Au Petit Paris', 'tel:0351459623')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0351459623" class="btn-call" onclick="trackClick('Sorties & Activités Culturel-Liste-Appeler-Au Petit Paris', 'tel:0351459623')">📞 Appeler</a>
                                                                                    <!-- <a href="https://baraupetitparis.wixsite.com/bar-au-petit-paris" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Culturel-Liste-Site-Au Petit Paris', 'https://baraupetitparis.wixsite.com/bar-au-petit-paris')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://baraupetitparis.wixsite.com/bar-au-petit-paris" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Culturel-Liste-Site-Au Petit Paris', 'https://baraupetitparis.wixsite.com/bar-au-petit-paris')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.63794, 4.93792], this); trackClick('Sorties & Activités Culturel-Liste-carte-Au Petit Paris', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.63794, 4.93792], this); trackClick('Sorties & Activités Culturel-Liste-carte-Au Petit Paris', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Au Petit Paris'); trackClick('Sorties & Activités Culturel-Liste-photos-Au Petit Paris', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Au Petit Paris'); trackClick('Sorties & Activités Culturel-Liste-options-Au Petit Paris', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Au Petit Paris'); trackClick('Sorties & Activités Culturel-Liste-options-Au Petit Paris', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>La maison Au Petit Paris est une oeuvre originale d’Art brut.                                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Au Petit Paris" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="culturel-item" data-name="Centre Socioculturel de Saint-Dizier">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🎨 Centre Socioculturel de Saint-Dizier</h4>
                                                <p>🗺️ 9 rue Marcel Thil<br>52100 Saint-Dizier</p>
                                                <p>📞 0325077988</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0325077988" class="btn-call" onclick="trackClick('Sorties & Activités Culturel-Liste-Appeler-Centre Socioculturel de Saint-Dizier', 'tel:0325077988')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0325077988" class="btn-call" onclick="trackClick('Sorties & Activités Culturel-Liste-Appeler-Centre Socioculturel de Saint-Dizier', 'tel:0325077988')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.saint-dizier.fr/actualites-et-sorties/sport-loisirs-et-musique/centre-socioculturel/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Culturel-Liste-Site-Centre Socioculturel de Saint-Dizier', 'https://www.saint-dizier.fr/actualites-et-sorties/sport-loisirs-et-musique/centre-socioculturel/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.saint-dizier.fr/actualites-et-sorties/sport-loisirs-et-musique/centre-socioculturel/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Culturel-Liste-Site-Centre Socioculturel de Saint-Dizier', 'https://www.saint-dizier.fr/actualites-et-sorties/sport-loisirs-et-musique/centre-socioculturel/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.64263, 4.97442], this); trackClick('Sorties & Activités Culturel-Liste-carte-Centre Socioculturel de Saint-Dizier', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.64263, 4.97442], this); trackClick('Sorties & Activités Culturel-Liste-carte-Centre Socioculturel de Saint-Dizier', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Centre Socioculturel de Saint-Dizier'); trackClick('Sorties & Activités Culturel-Liste-photos-Centre Socioculturel de Saint-Dizier', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Centre Socioculturel de Saint-Dizier'); trackClick('Sorties & Activités Culturel-Liste-options-Centre Socioculturel de Saint-Dizier', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Centre Socioculturel de Saint-Dizier'); trackClick('Sorties & Activités Culturel-Liste-options-Centre Socioculturel de Saint-Dizier', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Le centre socioculturel propose activités, soutien et échanges pour tous.                                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Centre Socioculturel de Saint-Dizier" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="culturel-item" data-name="Conservatoire">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🎨 Conservatoire</h4>
                                                <p>🗺️ 1 rue Waldeck Rousseau<br>52100 Saint-Dizier</p>
                                                <p>📞 0325960500</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0325960500" class="btn-call" onclick="trackClick('Sorties & Activités Culturel-Liste-Appeler-Conservatoire', 'tel:0325960500')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0325960500" class="btn-call" onclick="trackClick('Sorties & Activités Culturel-Liste-Appeler-Conservatoire', 'tel:0325960500')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.saint-dizier.fr/actualites-et-sorties/sport-loisirs-et-musique/conservatoire/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Culturel-Liste-Site-Conservatoire', 'https://www.saint-dizier.fr/actualites-et-sorties/sport-loisirs-et-musique/conservatoire/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.saint-dizier.fr/actualites-et-sorties/sport-loisirs-et-musique/conservatoire/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Culturel-Liste-Site-Conservatoire', 'https://www.saint-dizier.fr/actualites-et-sorties/sport-loisirs-et-musique/conservatoire/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.63794, 4.94148], this); trackClick('Sorties & Activités Culturel-Liste-carte-Conservatoire', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.63794, 4.94148], this); trackClick('Sorties & Activités Culturel-Liste-carte-Conservatoire', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Conservatoire'); trackClick('Sorties & Activités Culturel-Liste-photos-Conservatoire', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Conservatoire'); trackClick('Sorties & Activités Culturel-Liste-options-Conservatoire', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Conservatoire'); trackClick('Sorties & Activités Culturel-Liste-options-Conservatoire', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Le Conservatoire à Rayonnement Intercommunal est un établissement d’éducation artistique agréé par le Ministère de la Culture et se conforme au Schéma National d’Orientation Pédagogique.                                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Conservatoire" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="culturel-item" data-name="Studio d'enregistrement">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🎨 Studio d'enregistrement</h4>
                                                <p>🗺️ 11 Avenue Raoul Laurent<br>52100 Saint-Dizier</p>
                                                <p>📞 0325073168</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0325073168" class="btn-call" onclick="trackClick('Sorties & Activités Culturel-Liste-Appeler-Studio d\'enregistrement', 'tel:0325073168')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0325073168" class="btn-call" onclick="trackClick('Sorties & Activités Culturel-Liste-Appeler-Studio d\'enregistrement', 'tel:0325073168')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.saint-dizier.fr/actualites-et-sorties/sport-loisirs-et-musique/studio-denregistrement/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Culturel-Liste-Site-Studio d\'enregistrement', 'https://www.saint-dizier.fr/actualites-et-sorties/sport-loisirs-et-musique/studio-denregistrement/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.saint-dizier.fr/actualites-et-sorties/sport-loisirs-et-musique/studio-denregistrement/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Culturel-Liste-Site-Studio d\'enregistrement', 'https://www.saint-dizier.fr/actualites-et-sorties/sport-loisirs-et-musique/studio-denregistrement/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.64783, 4.95835], this); trackClick('Sorties & Activités Culturel-Liste-carte-Studio d\'enregistrement', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.64783, 4.95835], this); trackClick('Sorties & Activités Culturel-Liste-carte-Studio d\'enregistrement', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Studio d&#039;enregistrement'); trackClick('Sorties & Activités Culturel-Liste-photos-Studio d&#039;enregistrement', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Studio d\'enregistrement'); trackClick('Sorties & Activités Culturel-Liste-options-Studio d\'enregistrement', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Studio d\'enregistrement'); trackClick('Sorties & Activités Culturel-Liste-options-Studio d\'enregistrement', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Studio d’enregistrement des Fuseaux à Saint-Dizier offre un espace moderne et équipé pour répétitions, enregistrements, mixage et accompagnement artistique                                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Studio d'enregistrement" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="culturel-item" data-name="Bords 2 Scènes - L'Orange Bleue">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🎨 Bords 2 Scènes - L'Orange Bleue</h4>
                                                <p>🗺️ 4 rue Auguste Choisy Quartier des bords de Marne<br>51300 Vitry-le-François</p>
                                                <p>📞 0326410010</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0326410010" class="btn-call" onclick="trackClick('Sorties & Activités Culturel-Liste-Appeler-Bords 2 Scènes - L\'Orange Bleue', 'tel:0326410010')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0326410010" class="btn-call" onclick="trackClick('Sorties & Activités Culturel-Liste-Appeler-Bords 2 Scènes - L\'Orange Bleue', 'tel:0326410010')">📞 Appeler</a>
                                                                                    <!-- <a href="https://bords2scenes.fr/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Culturel-Liste-Site-Bords 2 Scènes - L\'Orange Bleue', 'https://bords2scenes.fr/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://bords2scenes.fr/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Culturel-Liste-Site-Bords 2 Scènes - L\'Orange Bleue', 'https://bords2scenes.fr/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.72658, 4.57960], this); trackClick('Sorties & Activités Culturel-Liste-carte-Bords 2 Scènes - L\'Orange Bleue', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.72658, 4.57960], this); trackClick('Sorties & Activités Culturel-Liste-carte-Bords 2 Scènes - L\'Orange Bleue', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Bords 2 Scènes - L&#039;Orange Bleue'); trackClick('Sorties & Activités Culturel-Liste-photos-Bords 2 Scènes - L&#039;Orange Bleue', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Bords 2 Scènes - L\'Orange Bleue'); trackClick('Sorties & Activités Culturel-Liste-options-Bords 2 Scènes - L\'Orange Bleue', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Bords 2 Scènes - L\'Orange Bleue'); trackClick('Sorties & Activités Culturel-Liste-options-Bords 2 Scènes - L\'Orange Bleue', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Théâtre et musique sous toutes leurs formes                                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Bords 2 Scènes - L'Orange Bleue" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="culturel-item" data-name="Musée de la Batellerie">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🎨 Musée de la Batellerie</h4>
                                                <p>🗺️ 11 rue des Pointis<br>51300 Vitry-le-François</p>
                                                <p>📞 0326747089</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0326747089" class="btn-call" onclick="trackClick('Sorties & Activités Culturel-Liste-Appeler-Musée de la Batellerie', 'tel:0326747089')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0326747089" class="btn-call" onclick="trackClick('Sorties & Activités Culturel-Liste-Appeler-Musée de la Batellerie', 'tel:0326747089')">📞 Appeler</a>
                                                                                    <!-- <a href="https://www.vitry-le-francois.net/articles/culture" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Culturel-Liste-Site-Musée de la Batellerie', 'https://www.vitry-le-francois.net/articles/culture')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://www.vitry-le-francois.net/articles/culture" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Culturel-Liste-Site-Musée de la Batellerie', 'https://www.vitry-le-francois.net/articles/culture')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.72545, 4.59494], this); trackClick('Sorties & Activités Culturel-Liste-carte-Musée de la Batellerie', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.72545, 4.59494], this); trackClick('Sorties & Activités Culturel-Liste-carte-Musée de la Batellerie', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Musée de la Batellerie'); trackClick('Sorties & Activités Culturel-Liste-photos-Musée de la Batellerie', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Musée de la Batellerie'); trackClick('Sorties & Activités Culturel-Liste-options-Musée de la Batellerie', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Musée de la Batellerie'); trackClick('Sorties & Activités Culturel-Liste-options-Musée de la Batellerie', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>On y retrouve toute l&#039;ambiance du transport fluvial d&#039;autrefois avec nombre de photos, de cartes et d&#039;accessoires qui perpétuent le souvenir et rappellent toute la rudesse et aussi le bonheur de la vie au fil des écluses.                                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Musée de la Batellerie" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
            <div class="culturel-item" data-name="Musée Barrois - Bar-le-Duc">
                <div class="restaurant-card">
                    <div class="restaurant-card-content">
                        <h4>🎨 Musée Barrois - Bar-le-Duc</h4>
                                                <p>🗺️ 7 rue François de Guise<br>55000 Bar-le-Duc</p>
                                                <p>📞 0329761467</p>
                                                <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                        <!-- <a href="tel:0329761467" class="btn-call" onclick="trackClick('Sorties & Activités Culturel-Liste-Appeler-Musée Barrois - Bar-le-Duc', 'tel:0329761467')">📞 Appeler</a> -->
<!-- modifier pour apostrophe dans nom --><a href="tel:0329761467" class="btn-call" onclick="trackClick('Sorties & Activités Culturel-Liste-Appeler-Musée Barrois - Bar-le-Duc', 'tel:0329761467')">📞 Appeler</a>
                                                                                    <!-- <a href="https://musees-meuse.fr/musees/musee-barrois-bar-le-duc/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Culturel-Liste-Site-Musée Barrois - Bar-le-Duc', 'https://musees-meuse.fr/musees/musee-barrois-bar-le-duc/')">🌐 Site web</a> -->
<!-- modifier pour apostrophe dans nom --><a href="https://musees-meuse.fr/musees/musee-barrois-bar-le-duc/" target="_blank" class="btn-website" onclick="trackClick('Sorties & Activités Culturel-Liste-Site-Musée Barrois - Bar-le-Duc', 'https://musees-meuse.fr/musees/musee-barrois-bar-le-duc/')">🌐 Site web</a>
                                                        <!-- <button onclick="zoomToRestaurant([48.77184, 5.15675], this); trackClick('Sorties & Activités Culturel-Liste-carte-Musée Barrois - Bar-le-Duc', '#')" class="btn-map">📍 Carte</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="zoomToRestaurant([48.77184, 5.15675], this); trackClick('Sorties & Activités Culturel-Liste-carte-Musée Barrois - Bar-le-Duc', '#')" class="btn-map">📍 Carte</button>
                                                            <!--
                            <button onclick="openMenuModal('Votre_pub.jpg', 'Musée Barrois - Bar-le-Duc'); trackClick('Sorties & Activités Culturel-Liste-photos-Musée Barrois - Bar-le-Duc', '#')" class="btn-menu">📋 Photos</button>
                            -->
                                                                                    <!-- <button onclick="openMenuModal('Votre_pub.jpg', 'Musée Barrois - Bar-le-Duc'); trackClick('Sorties & Activités Culturel-Liste-options-Musée Barrois - Bar-le-Duc', '#')" class="btn-menu">📋 Options</button> -->
<!-- modifier pour apostrophe dans nom --><button onclick="openMenuModal('Votre_pub.jpg', 'Musée Barrois - Bar-le-Duc'); trackClick('Sorties & Activités Culturel-Liste-options-Musée Barrois - Bar-le-Duc', '#')" class="btn-menu">📋 Options</button>
                                                    </div>
                                <br>Au fil des 13 salles, le visiteur découvre des peintures et des sculptures du Moyen-Âge au XXe siècle.                                                    </div>
                    <div class="restaurant-card-images">
                                                <!-- IMAGE UNIQUE -->
                        <div class="restaurant-images">
                                                        <img src="Votre_pub.jpg" alt="Musée Barrois - Bar-le-Duc" class="single-image">
                                                    </div>
                                            </div>
                </div>
            </div>
                        
            <!-- DÉMO EN DUR pour chaque catégorie -->
                        
            <!-- DEMO CULTUREL -->
                        <div class="culturel-item" data-name="Activité Culturelle Demo">
                <div class="restaurant-cardDemo" style="border-left: 5px solid #f8fc04;">
                    <div class="restaurant-card-content">
                        <h4>🎨 Culturel DÉMO - Carrousel Photos + Bouton Menu</h4>
                        <p style="color: #a855f7; 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('Sorties & Activités Culturel-Liste-Site-Culturel DEMO', '#')">🌐 Contactez-nous</a>
                            <button onclick="zoomToRestaurant([48.553638, 4.767266], this); trackClick('Sorties & Activités Culturel-Liste-carte-Culturel DEMO', '#')" class="btn-map">📍 Carte</button>
                            <button onclick="openMenuModal('Pub_culturel1.jpg', 'Culturel DÉMO'); trackClick('Sorties & Activités Culturel-Liste-menu-Culturel 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;">♿ 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;">👨‍👩‍👧‍👦… 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="Pub_culturel1.jpg" alt="Photo 1">
                                </div>
                                <div class="carousel-slide">
                                    <img src="Pub_culturel2.jpg" alt="Photo 2">
                                </div>
                                <div class="carousel-slide">
                                    <img src="Pub_culturel3.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.57174, 4.67476], icon: '🐎', title: 'Champ&#039;ânes', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Champ&#039;ânes" class="popup-image">
                        <h5>🐎 Champ&#039;ânes</h5>
            <p>
                🗺️ 6 chemin de la Hayotte<br>
                51290 Outines<br>
                                <a href="tel:0326721566" class="popup-phone">📞 0326721566</a>
                                                <br><a href="https://www.au-milieu-de-nulle-part.com/fr" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Adoptez un âne le temps d&#039;une randonnée autour du lac du Der ! À la journée, ou sur 2 jours.                            </p>
        </div>`, category: 'extérieur'},
        {coords: [48.55374, 4.76792], icon: '🕵️‍♂️', title: 'Escape Game - Le Der sauve Paris', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Escape Game - Le Der sauve Paris" class="popup-image">
                        <h5>🕵️‍♂️ Escape Game - Le Der sauve Paris</h5>
            <p>
                🗺️ 1 bis rue de la Cachotte Station Nautique<br>
                51290 Giffaumont-Champaubert<br>
                                <a href="tel:0326726280" class="popup-phone">📞 0326726280</a>
                                                <br><a href="https://www.escapegamelacduder.com/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Vivez un escape game en plein air exclusif en toute autonomie et sauvez Paris de l&#039;inondation !                            </p>
        </div>`, category: 'extérieur'},
        {coords: [48.56098, 4.68730], icon: '🔭', title: 'Observatoire ornithologique de l&#039;Etang du Grand Coulon', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Observatoire ornithologique de l&#039;Etang du Grand Coulon" class="popup-image">
                        <h5>🔭 Observatoire ornithologique de l&#039;Etang du Grand Coulon</h5>
            <p>
                🗺️ <br>
                51290 Outines<br>
                                <a href="tel:0326726280" class="popup-phone">📞 0326726280</a>
                                                                <br><br>Au cœur de la nature, à la rencontre des oiseaux.                            </p>
        </div>`, category: 'extérieur'},
        {coords: [48.50952, 4.79503], 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.facebook.com/p/Ranch-du-Pont-Urgin-100057491527736/?locale=fr_FR" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Le Ranch du Pont Urgin propose des balades à cheval ou à poney accompagnées par Caroline, guide équestre diplômée.                            </p>
        </div>`, category: 'extérieur'},
        {coords: [48.55390, 4.77627], icon: '🎣', title: 'Maison des Pêcheurs', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Maison des Pêcheurs" class="popup-image">
                        <h5>🎣 Maison des Pêcheurs</h5>
            <p>
                🗺️ 5 Chemin des Milleperthuis Station Nautique<br>
                51290 Giffaumont-Champaubert<br>
                                <a href="tel:0326726343" class="popup-phone">📞 0326726343</a>
                                                <br><a href="https://www.pecheauder.com/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>out sur la pêche au bord et sur le lac du Der                            </p>
        </div>`, category: 'extérieur'},
        {coords: [48.60564, 4.77474], icon: '🚴', title: 'Nomad&#039;Ride - Location de vélos', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Nomad&#039;Ride - Location de vélos" class="popup-image">
                        <h5>🚴 Nomad&#039;Ride - Location de vélos</h5>
            <p>
                🗺️ 6 rue des Bois<br>
                51290 Sainte-Marie-du-Lac-Nuisement<br>
                                <a href="tel:0632203416" class="popup-phone">📞 0632203416</a>
                                                <br><a href="https://www.nomadride.fr/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Location de vélo                            </p>
        </div>`, category: 'extérieur'},
        {coords: [48.55096, 4.77316], icon: '🚴', title: 'Heaven Bike', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Heaven Bike" class="popup-image">
                        <h5>🚴 Heaven Bike</h5>
            <p>
                🗺️ Station Nautique<br>
                51290 Giffaumont-Champaubert<br>
                                <a href="tel:0649468974" class="popup-phone">📞 0649468974</a>
                                                <br><a href="https://www.heavenbike.com/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Location de Rosalies, vélos classiques ou électriques, vélos enfant, remorques, Tricycles adaptés PMR                            </p>
        </div>`, category: 'extérieur'},
        {coords: [48.55458, 4.76834], icon: '🚂', title: 'Le Train du Der', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Le Train du Der" class="popup-image">
                        <h5>🚂 Le Train du Der</h5>
            <p>
                🗺️ Station Nautique<br>
                51290 Giffaumont-Champaubert<br>
                                <a href="tel:0616723504" class="popup-phone">📞 0616723504</a>
                                                                <br><br>Partez de la Station Nautique, pour une visite guidée d&#039;une heure sur la digue panoramique.                            </p>
        </div>`, category: 'extérieur'},
        {coords: [48.64440, 4.58908], icon: '🧘‍♂️', title: 'Chez Caroline Sophro - Bien-être et Sophrologie', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Chez Caroline Sophro - Bien-être et Sophrologie" class="popup-image">
                        <h5>🧘‍♂️ Chez Caroline Sophro - Bien-être et Sophrologie</h5>
            <p>
                🗺️ 27 Rue de la Mairie<br>
                51290 Arzillières-Neuville<br>
                                <a href="tel:0688490439" class="popup-phone">📞 0688490439</a>
                                                <br><a href="https://www.chezcaroline-sophro.fr/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Caroline, vous propose des sophro-balades dans les forêts autour du Lac du Der, des sophro-plages ou sophro-barques                            </p>
        </div>`, category: 'extérieur'},
        {coords: [48.55305, 4.75323], icon: '🚴', title: 'L&#039;Escale Dorée', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="L&#039;Escale Dorée" class="popup-image">
                        <h5>🚴 L&#039;Escale Dorée</h5>
            <p>
                🗺️ 1 rue de Champaubert<br>
                51290 Giffaumont-Champaubert<br>
                                <a href="tel:0671953918" class="popup-phone">📞 0671953918</a>
                                                <br><a href="https://www.location-velos-lac-du-der.fr/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Location de vélo &amp; de Rosalie, remorques enfant, siège bébé ou pour chien                            </p>
        </div>`, category: 'extérieur'},
        {coords: [48.51755, 4.82899], icon: '🐐', title: 'Ferme Pédagogique du Grand Der', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Ferme Pédagogique du Grand Der" class="popup-image">
                        <h5>🐐 Ferme Pédagogique du Grand Der</h5>
            <p>
                🗺️ 1 Bis, rue du Chêne<br>
                52220 Frampas<br>
                                <a href="tel:0679467496" class="popup-phone">📞 0679467496</a>
                                                <br><a href="https://www.facebook.com/p/Ferme-P%C3%A9dagogique-du-Grand-Der-100064564727060" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Sur 7 ha, venez partager un moment unique avec les animaux de la ferme et découvrir notre élevage d’escargots à travers diverses activités familiales.                            </p>
        </div>`, category: 'extérieur'},
        {coords: [48.60024, 4.82128], icon: '🛺', title: 'ROUL&#039;ÔDER', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="ROUL&#039;ÔDER" class="popup-image">
                        <h5>🛺 ROUL&#039;ÔDER</h5>
            <p>
                🗺️ 8 Rue des Belles Prairies<br>
                52290 Sainte-Livière<br>
                                <a href="tel:0672294242" class="popup-phone">📞 0672294242</a>
                                                <br><a href="https://www.facebook.com/p/Roul%C3%B4Der-100094517332858/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Roulez en SWINCAR e-Spider... le tout est électrique. Monoplace ou Tandem, avec ses 4 bras suspendus : aucun obstacle insurmontable !                            </p>
        </div>`, category: 'extérieur'},
        {coords: [48.58829, 5.03691], icon: '🚶‍♂️', title: 'Didier du Val - Randonnées découvertes du Pays du Der', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Didier du Val - Randonnées découvertes du Pays du Der" class="popup-image">
                        <h5>🚶‍♂️ Didier du Val - Randonnées découvertes du Pays du Der</h5>
            <p>
                🗺️ 8 Rue des Aziaux<br>
                52410 Euriville-Bienville<br>
                                <a href="tel:0681654002" class="popup-phone">📞 0681654002</a>
                                                <br><a href="https://www.lacduder.com/offres/didier-du-val-randonnees-decouvertes-du-pays-du-der-eurville-bienville-fr-4988299/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Didier vous propose des randonnées pédestres à la découverte du pays du Der.                            </p>
        </div>`, category: 'extérieur'},
        {coords: [48.63644, 4.97338], icon: '🎣', title: 'Les Amis de la Pêche', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Les Amis de la Pêche" class="popup-image">
                        <h5>🎣 Les Amis de la Pêche</h5>
            <p>
                🗺️ 105 Avenue des États-Unis<br>
                52100 Saint-Dizier<br>
                                <a href="tel:0642436297" class="popup-phone">📞 0642436297</a>
                                                <br><a href="https://www.facebook.com/lesamisdelapeche52" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Pêche 2ème catégorie sur la rivière Marne (14km), sur le canal Entre Champagne et Bourgogne et sur les étangs à proximité de Saint-Dizier                            </p>
        </div>`, category: 'extérieur'},
        {coords: [48.47559, 4.88381], icon: '🐎', title: 'Centre Equestre de la Contance', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Centre Equestre de la Contance" class="popup-image">
                        <h5>🐎 Centre Equestre de la Contance</h5>
            <p>
                🗺️ 5, rue de l&#039;Héronne<br>
                52220 Laneuville-à-Rémy<br>
                                <a href="tel:0325559610" class="popup-phone">📞 0325559610</a>
                                                <br><a href="https://www.facebook.com/centreequestredelacontance" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>À Laneuville‑à‑Rémy, le centre équestre de la Contance propose toute l’année des leçons, balades, randonnées et stages avec passage de galop, encadrés par trois moniteurs diplômés. Labelisé École Française d’Équitation.                            </p>
        </div>`, category: 'extérieur'},
        {coords: [48.62438, 4.70419], icon: '🏌️‍♂️', title: 'Swin Golf de la Flage', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Swin Golf de la Flage" class="popup-image">
                        <h5>🏌️‍♂️ Swin Golf de la Flage</h5>
            <p>
                🗺️ 14 Route de Saint Rémy en Bouzemont<br>
                51290 Arrigny<br>
                                <a href="tel:0326726034" class="popup-phone">📞 0326726034</a>
                                                                <br><br>parcours de 12 trous de 2060 m sur 10 ha en herbe avec un matériel différent. 1 club à 3 faces (bois, fer 7, putter) et 1 balle souple sans danger                            </p>
        </div>`, category: 'extérieur'},
        {coords: [48.54235, 4.90796], icon: '🧗‍♂️', title: 'Accrobranche - Parc Aventure Domaine du Buisson', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Accrobranche - Parc Aventure Domaine du Buisson" class="popup-image">
                        <h5>🧗‍♂️ Accrobranche - Parc Aventure Domaine du Buisson</h5>
            <p>
                🗺️ Domaine du Buisson Le Buisson<br>
                52130 Louvemon<br>
                                <a href="tel:0646382150" class="popup-phone">📞 0646382150</a>
                                                <br><a href="https://www.accro-52.fr/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Vous propose plusieurs parcours acrobatiques de hauteurs et de difficultés croissantes à la lisière de la forêt domaniale du Der                            </p>
        </div>`, category: 'extérieur'},
        {coords: [48.61853, 4.64721], icon: '🔭', title: 'Ferme aux Grues', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Ferme aux Grues" class="popup-image">
                        <h5>🔭 Ferme aux Grues</h5>
            <p>
                🗺️ 1 route de Drosnay<br>
                51290 Saint-Remy-en-Bouzemont-Saint-Genest-et-Isson<br>
                                <a href="tel:0326725447" class="popup-phone">📞 0326725447</a>
                                                <br><a href="https://champagne-ardenne.lpo.fr/grue-cendree/ou-voir-les-grues-cendrees/la-ferme-aux-grues" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Venez observer dans la propriété du Syndicat d&#039;aménagement Touristique du Lac du Der la migration des Grues                            </p>
        </div>`, category: 'extérieur'},
        {coords: [48.55172, 4.77109], icon: '🧗‍♂️', title: 'Accrobranche - Accro Der', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Accrobranche - Accro Der" class="popup-image">
                        <h5>🧗‍♂️ Accrobranche - Accro Der</h5>
            <p>
                🗺️ Station nautique Terrasses du Lac<br>
                51290 Giffaumont-Champaubert<br>
                                <a href="tel:0663802107" class="popup-phone">📞 0663802107</a>
                                                <br><a href="https://www.accroder.com/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Accrobranche sur la station nautique du Lac du Der                            </p>
        </div>`, category: 'extérieur'},
        {coords: [48.48988, 4.95004], icon: '🏊‍♂️', title: 'Etang des Leschères', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Etang des Leschères" class="popup-image">
                        <h5>🏊‍♂️ Etang des Leschères</h5>
            <p>
                🗺️ Rue de la Digue<br>
                52130 Wassy<br>
                                <a href="tel:0325553190" class="popup-phone">📞 0325553190</a>
                                                <br><a href="https://www.lacduder.com/offres/etang-des-lescheres-wassy-fr-4987680/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Baignade aménagée mais non surveillée &amp; parcours de santé, u ntrès bel endroit.                            </p>
        </div>`, category: 'extérieur'},
        {coords: [48.55224, 4.77071], icon: '🏎️', title: 'Mini-cars du Der - Karting enfant', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Mini-cars du Der - Karting enfant" class="popup-image">
                        <h5>🏎️ Mini-cars du Der - Karting enfant</h5>
            <p>
                🗺️ Station Nautique<br>
                51290 Giffaumont-Champaubert<br>
                                <a href="tel:0786005605" class="popup-phone">📞 0786005605</a>
                                                <br><a href="https://www.lacduder.com/offres/mini-cars-du-der-giffaumont-champaubert-fr-4988244/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Pour enfants de 4 à 12 ans, Mini quad, Formule 1, Buggy, Moto sur piste.                            </p>
        </div>`, category: 'extérieur'},
        {coords: [48.55373, 4.76726], icon: '🕵️‍♂️', title: 'Escape Game - La Dame du Lac', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Escape Game - La Dame du Lac" class="popup-image">
                        <h5>🕵️‍♂️ Escape Game - La Dame du Lac</h5>
            <p>
                🗺️ 1 bis rue de la Cachotte Station Nautique<br>
                51290 Giffaumont-Champaubert<br>
                                <a href="tel:0326726280" class="popup-phone">📞 0326726280</a>
                                                <br><a href="https://www.escapegamelacduder.com/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Vivez un escape game en plein air exclusif en toute autonomie et sauvez la Dame du Lac !                            </p>
        </div>`, category: 'extérieur'},
        {coords: [48.43906, 4.46998], icon: '🛩️', title: 'Aube ULM Services', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Aube ULM Services" class="popup-image">
                        <h5>🛩️ Aube ULM Services</h5>
            <p>
                🗺️ Aérodrome de Brienne-le-Château ECOLE DES LACS<br>
                10500 Saint-Christophe-Dodinicourt<br>
                                <a href="tel:0608241906" class="popup-phone">📞 0608241906</a>
                                                <br><a href="https://aube-ulm.fr/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Formations ULM et PARAMOTEUR, vol d&#039;initiation, baptêmes de l&#039;air…                            </p>
        </div>`, category: 'extérieur'},
        {coords: [48.63181, 4.94384], icon: '🛴', title: 'Pumptrack Saint-Dizier', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Pumptrack Saint-Dizier" class="popup-image">
                        <h5>🛴 Pumptrack Saint-Dizier</h5>
            <p>
                🗺️ Boulevard de Marne<br>
                52100 Saint-Dizier<br>
                                <a href="tel:0325073131" class="popup-phone">📞 0325073131</a>
                                                <br><a href="https://www.saint-dizier.fr/actualites-et-sorties/sport-loisirs-et-musique/pumptrack/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>4500 m² de circuit dans tous les sens..                            </p>
        </div>`, category: 'extérieur'},
        {coords: [48.55269, 4.77055], icon: '🏎️', title: 'Mini Park Toons Land', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Mini Park Toons Land" class="popup-image">
                        <h5>🏎️ Mini Park Toons Land</h5>
            <p>
                🗺️ Station Nautique<br>
                51290 Giffaumont-Champaubert<br>
                                <a href="tel:0786005605" class="popup-phone">📞 0786005605</a>
                                                <br><a href="https://www.lacduder.com/offres/mini-park-toons-land-giffaumont-champaubert-fr-4987566/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Le mini-park propose deux trampolines, 3 structures gonflables.                            </p>
        </div>`, category: 'extérieur'},
        {coords: [48.55166, 4.77162], icon: '🏌️‍♂️', title: 'Fantasti Golf', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Fantasti Golf" class="popup-image">
                        <h5>🏌️‍♂️ Fantasti Golf</h5>
            <p>
                🗺️ Station Nautique<br>
                51290 Giffaumont-Champaubert<br>
                                <a href="tel:0786005605" class="popup-phone">📞 0786005605</a>
                                                <br><a href="https://www.lacduder.com/offres/fantasti-golf-giffaumont-champaubert-fr-4987567/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>2 parcours de mini-golf paysagers sur gazon synthétique seront à votre disposition pour des parties en 18 trous pleine de sensations !                            </p>
        </div>`, category: 'extérieur'},
        {coords: [48.50536, 4.85456], icon: '🐎', title: 'L&#039;âne cœur', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="L&#039;âne cœur" class="popup-image">
                        <h5>🐎 L&#039;âne cœur</h5>
            <p>
                🗺️ 1 Chemin du Meligne<br>
                52130 Voillecomte<br>
                                <a href="tel:0601326961" class="popup-phone">📞 0601326961</a>
                                                <br><a href="https://www.lanecoeur.com/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Partagez un moment de détente en famille, entre amis ou à deux au contact de la nature. Laurine, animatrice nature et praticienne en médiation asine, vous propose une rencontre avec ses ânes et des activités nature adaptées à tous.                            </p>
        </div>`, category: 'extérieur'},
        {coords: [48.69994, 4.68266], icon: '🛩️', title: 'VAUCLERC Aviation - Baptêmes de l&#039;air', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="VAUCLERC Aviation - Baptêmes de l&#039;air" class="popup-image">
                        <h5>🛩️ VAUCLERC Aviation - Baptêmes de l&#039;air</h5>
            <p>
                🗺️ Aérodrome Vitry-le-François RN4<br>
                51300 Vauclerc<br>
                                <a href="tel:0784638148" class="popup-phone">📞 0784638148</a>
                                                <br><a href="https://www.facebook.com/vauclerc.aviation/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Baptême de l&#039;air en Ulm 3 axes, pendulaire ou en Paramoteur biplace.                            </p>
        </div>`, category: 'extérieur'},
        {coords: [48.63767, 4.91813], icon: '🛩️', title: 'Aéroclub de SAINT-DIZIER - ROBINSON', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Aéroclub de SAINT-DIZIER - ROBINSON" class="popup-image">
                        <h5>🛩️ Aéroclub de SAINT-DIZIER - ROBINSON</h5>
            <p>
                🗺️ 34 rue Godard-Brulliard<br>
                52100 Saint-Dizier<br>
                                <a href="tel:0325050467" class="popup-phone">📞 0325050467</a>
                                                <br><a href="https://aeroclub-saint-dizier.com/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Baptême de l&#039;air                            </p>
        </div>`, category: 'extérieur'},
        {coords: [48.75327, 5.11617], icon: '🏌️‍♂️', title: 'Golf de Combles en Barrois', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Golf de Combles en Barrois" class="popup-image">
                        <h5>🏌️‍♂️ Golf de Combles en Barrois</h5>
            <p>
                🗺️ 38 rue Basse<br>
                55000 Combles-en-Barrois<br>
                                <a href="tel:0329451603" class="popup-phone">📞 0329451603</a>
                                                <br><a href="https://golfdecomblesenbarrois.fr/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Suivez le parcours 18 trous offre des points de vue champêtres, bucoliques, très agréables ; il allie la technicité avec de nombreux bunkers, à l’agrément de jouer sur des trous aux profils différents.                            </p>
        </div>`, category: 'extérieur'},
        {coords: [48.73010, 4.58235], icon: '🏊‍♂️', title: 'Centre Aquatique La Salamandre', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Centre Aquatique La Salamandre" class="popup-image">
                        <h5>🏊‍♂️ Centre Aquatique La Salamandre</h5>
            <p>
                🗺️ 1 Avenue du Quai des Fontaines<br>
                51300 Vitry-le-François<br>
                                <a href="tel:0354170560" class="popup-phone">📞 0354170560</a>
                                                                <br><br>Le Centre Aquatique La Salamandre vous propose des équipements aqua-ludiques modernes et un espace bien-être et détente.                            </p>
        </div>`, category: 'intérieur'},
        {coords: [48.55384, 4.76817], icon: '🎮', title: 'Der Game', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Der Game" class="popup-image">
                        <h5>🎮 Der Game</h5>
            <p>
                🗺️ 12 rue de la Cachotte Station Nautique<br>
                51290 Giffaumont-Champaubert<br>
                                                <br><a href="https://www.facebook.com/p/DER-GAME-61571767274934/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Salle de jeux d’arcade et virtuelle                            </p>
        </div>`, category: 'intérieur'},
        {coords: [48.65312, 4.96536], icon: '🎳', title: 'Bowling Starting Point 52', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Bowling Starting Point 52" class="popup-image">
                        <h5>🎳 Bowling Starting Point 52</h5>
            <p>
                🗺️ 17 Rue des Roises<br>
                52100 Bettancourt-la-Ferrée<br>
                                <a href="tel:0325080368" class="popup-phone">📞 0325080368</a>
                                                <br><a href="https://www.startingpoint52.com/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Bowling, jeux d&#039;arcades, billards, karaoké et réalité virtuelle + Restauration rapide.                            </p>
        </div>`, category: 'intérieur'},
        {coords: [48.55075, 4.77018], icon: '🧘‍♂️', title: 'Espace Zen et Flottaison', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Espace Zen et Flottaison" class="popup-image">
                        <h5>🧘‍♂️ Espace Zen et Flottaison</h5>
            <p>
                🗺️ 10 rue de la Cachotte<br>
                51290 Giffaumont-Champaubert<br>
                                <a href="tel:0612547044" class="popup-phone">📞 0612547044</a>
                                                <br><a href="https://www.espacezenetflottaison.com/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Flottez vers la détente absolue..Un soin de relaxation en cabine privée qui vous offre une expérience unique en terme de détente et de bien être                            </p>
        </div>`, category: 'intérieur'},
        {coords: [48.55405, 4.76621], icon: '🎲', title: 'Casino JOA du Lac du Der', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Casino JOA du Lac du Der" class="popup-image">
                        <h5>🎲 Casino JOA du Lac du Der</h5>
            <p>
                🗺️ 6 rue du Port Station nautique<br>
                51290 Giffaumont-Champaubert<br>
                                <a href="tel:0326749800" class="popup-phone">📞 0326749800</a>
                                                <br><a href="https://www.facebook.com/CasinoJOA.LacDuDer" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Informations: 135 machines à sous, la roulette anglaise et black jack électroniques                            </p>
        </div>`, category: 'intérieur'},
        {coords: [48.66845, 4.90458], icon: '🧘‍♂️', title: 'Massages Villarais', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Massages Villarais" class="popup-image">
                        <h5>🧘‍♂️ Massages Villarais</h5>
            <p>
                🗺️ 2 rue des Trois Mares<br>
                52100 Villiers-en-Lieu<br>
                                <a href="tel:0645078165" class="popup-phone">📞 0645078165</a>
                                                <br><a href="https://www.massages-villarais.fr/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Toute une gamme de massages, pour faire du bien au corps.                            </p>
        </div>`, category: 'intérieur'},
        {coords: [48.63940, 4.95242], icon: '🎞️', title: 'Multiplexe Ciné Quai - Cinéma', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Multiplexe Ciné Quai - Cinéma" class="popup-image">
                        <h5>🎞️ Multiplexe Ciné Quai - Cinéma</h5>
            <p>
                🗺️ 36 rue Lamartine<br>
                52100 Saint-Dizier<br>
                                <a href="tel:0325050325" class="popup-phone">📞 0325050325</a>
                                                <br><a href="https://www.cinequai.fr/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                            </p>
        </div>`, category: 'intérieur'},
        {coords: [48.72728, 4.58652], icon: '🎞️', title: 'Cinéma Pierre Brasseur', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Cinéma Pierre Brasseur" class="popup-image">
                        <h5>🎞️ Cinéma Pierre Brasseur</h5>
            <p>
                🗺️ 18 Grande rue de Vaux<br>
                51300 Vitry-le-François<br>
                                <a href="tel:0326740110" class="popup-phone">📞 0326740110</a>
                                                <br><a href="https://www.cine-vitry.fr/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                            </p>
        </div>`, category: 'intérieur'},
        {coords: [48.47675, 4.77208], icon: '🚤', title: 'Bateau Ecole Jean Jaurès', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Bateau Ecole Jean Jaurès" class="popup-image">
                        <h5>🚤 Bateau Ecole Jean Jaurès</h5>
            <p>
                🗺️ 21 place de l&#039;Hôtel de Ville<br>
                52290 La Porte du Der<br>
                                <a href="tel:0670087711" class="popup-phone">📞 0670087711</a>
                                                <br><a href="https://www.bateauecolereims.fr/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>PERMIS BATEAU, JET SKI, REMORQUE                            </p>
        </div>`, category: 'nautisme'},
        {coords: [48.55441, 4.77214], icon: '🛥️', title: 'Bateau de promenade - Au Fil de l&#039;Eau', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Bateau de promenade - Au Fil de l&#039;Eau" class="popup-image">
                        <h5>🛥️ Bateau de promenade - Au Fil de l&#039;Eau</h5>
            <p>
                🗺️ Station Nautique<br>
                51290 Giffaumont-Champaubert<br>
                                <a href="tel:0678750517" class="popup-phone">📞 0678750517</a>
                                                <br><a href="https://aufildeleau51.fr/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Le tour du lac, Au fil de l&#039;Eau vous emmène pour une aventure sur l&#039;eau                            </p>
        </div>`, category: 'nautisme'},
        {coords: [48.55432, 4.77237], icon: '🚤', title: 'FunCenter - Locations de Jet-Skis', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="FunCenter - Locations de Jet-Skis" class="popup-image">
                        <h5>🚤 FunCenter - Locations de Jet-Skis</h5>
            <p>
                🗺️ Station Nautique<br>
                51290 Giffaumont-Champaubert<br>
                                <a href="tel:0659308697" class="popup-phone">📞 0659308697</a>
                                                <br><a href="https://funcenter-lacduder.com/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Initiation sans permis avec moniteur diplômé (à partir de 16 ans)                            </p>
        </div>`, category: 'nautisme'},
        {coords: [48.55421, 4.78029], icon: '⛵', title: 'Ligue de l&#039;Enseignement FOL 55', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Ligue de l&#039;Enseignement FOL 55" class="popup-image">
                        <h5>⛵ Ligue de l&#039;Enseignement FOL 55</h5>
            <p>
                🗺️ Station Nautique<br>
                51290 Giffaumont-Champaubert<br>
                                <a href="tel:0326621031" class="popup-phone">📞 0326621031</a>
                                                <br><a href="https://www.ligue55.org/Giffaumont" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Formation &amp; Location labellisé FFVoile: kayak, paddle, catamaran, dériveur, planche à voile, wing Foil.                            </p>
        </div>`, category: 'nautisme'},
        {coords: [48.60554, 4.77464], icon: '🏄‍♂️', title: 'Nomad&#039;Ride', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Nomad&#039;Ride" class="popup-image">
                        <h5>🏄‍♂️ Nomad&#039;Ride</h5>
            <p>
                🗺️ 6 rue des Bois<br>
                51290 Sainte-Marie-du-Lac-Nuisement<br>
                                <a href="tel:0632203416" class="popup-phone">📞 0632203416</a>
                                                <br><a href="https://www.nomadride.fr/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Location de CANOES et Stand Up Paddle                            </p>
        </div>`, category: 'nautisme'},
        {coords: [48.55370, 4.77607], icon: '🎣', title: 'Maison des Pêcheurs', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Maison des Pêcheurs" class="popup-image">
                        <h5>🎣 Maison des Pêcheurs</h5>
            <p>
                🗺️ 5 Chemin des Milleperthuis Station Nautique<br>
                51290 Giffaumont-Champaubert<br>
                                <a href="tel:0326726343" class="popup-phone">📞 0326726343</a>
                                                <br><a href="https://www.pecheauder.com/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>out sur la pêche au bord et sur le lac du Der                            </p>
        </div>`, category: 'nautisme'},
        {coords: [48.55323, 4.78016], icon: '🏄‍♂️', title: 'PLAYA REGAT&#039;Ô', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="PLAYA REGAT&#039;Ô" class="popup-image">
                        <h5>🏄‍♂️ PLAYA REGAT&#039;Ô</h5>
            <p>
                🗺️ Presqu&#039;île de Rougemer<br>
                51290 Giffaumont-Champaubert<br>
                                <a href="tel:0647552213" class="popup-phone">📞 0647552213</a>
                                                <br><a href="https://www.facebook.com/regisregatostanduppaddle" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Location de paddle - Initiation (Paddle solo duo ou familial 4-10 personnes)                            </p>
        </div>`, category: 'nautisme'},
        {coords: [48.55264, 4.77318], icon: '🚤', title: 'Batel Plaisance', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Batel Plaisance" class="popup-image">
                        <h5>🚤 Batel Plaisance</h5>
            <p>
                🗺️ Station Nautique<br>
                51290 Giffaumont-Champaubert<br>
                                <a href="tel:0325412000" class="popup-phone">📞 0325412000</a>
                                                <br><a href="https://batel-plaisance.fr/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Location de bateaux avec permis sur Lac du DER                            </p>
        </div>`, category: 'nautisme'},
        {coords: [48.55559, 4.78937], icon: '⛵', title: 'Club voile et vent (C.V.V.) - Club de voile', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Club voile et vent (C.V.V.) - Club de voile" class="popup-image">
                        <h5>⛵ Club voile et vent (C.V.V.) - Club de voile</h5>
            <p>
                🗺️ Presqu&#039;Île de Champaubert<br>
                52290 Giffaumont-Champaubert<br>
                                <a href="tel:0786878145" class="popup-phone">📞 0786878145</a>
                                                <br><a href="https://www.facebook.com/p/Club-Voile-et-Vent-100064848573942/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Le club s&#039;adresse aux planchistes, dériveurs légers et catamarans et amateur de canoë-kayak                            </p>
        </div>`, category: 'nautisme'},
        {coords: [48.55258, 4.79225], icon: '⛵', title: 'Ecole départementale de voile de Braucourt', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Ecole départementale de voile de Braucourt" class="popup-image">
                        <h5>⛵ Ecole départementale de voile de Braucourt</h5>
            <p>
                🗺️ Presqu&#039;Île de Champaubert<br>
                52290 Braucourt<br>
                                <a href="tel:03250412" class="popup-phone">📞 03250412</a>
                                                <br><a href="https://www.cchm52.fr/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>La Base de voile de Braucourt accueille de mars à octobre écoles et groupes pour des séjours nature et nautiques. Hébergement en tipis ou tentes, activités variées : voile, kayak, paddle, VTT, géocaching et découverte du lac du Der.                            </p>
        </div>`, category: 'nautisme'},
        {coords: [48.55590, 4.78849], icon: '🏄‍♂️', title: 'FunCenter - Locations', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="FunCenter - Locations" class="popup-image">
                        <h5>🏄‍♂️ FunCenter - Locations</h5>
            <p>
                🗺️ Presqu&#039;Île de Champaubert<br>
                52290 Braucourt<br>
                                <a href="tel:0659308697" class="popup-phone">📞 0659308697</a>
                                                <br><a href="https://funcenter-lacduder.com/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Location de Surf électrique, paddle (solo double ou géant!) &amp; canoë kayak.                            </p>
        </div>`, category: 'nautisme'},
        {coords: [48.55426, 4.77247], icon: '🏄‍♂️', title: 'FunCenter - Bouées tractées', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="FunCenter - Bouées tractées" class="popup-image">
                        <h5>🏄‍♂️ FunCenter - Bouées tractées</h5>
            <p>
                🗺️ Port de Giffaumont<br>
                51290 Giffaumont-Champaubert<br>
                                <a href="tel:0659308697" class="popup-phone">📞 0659308697</a>
                                                <br><a href="https://funcenter-lacduder.com/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Près pour des sensations fortes ? Bouée tractée, Ski nautique, Wakeboard, Wakesurf                            </p>
        </div>`, category: 'nautisme'},
        {coords: [48.55335, 4.78035], icon: '🛶', title: 'PLAYA REGAT&#039;Ô - Location de pédalos', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="PLAYA REGAT&#039;Ô - Location de pédalos" class="popup-image">
                        <h5>🛶 PLAYA REGAT&#039;Ô - Location de pédalos</h5>
            <p>
                🗺️ Presqu&#039;île de Rougemer<br>
                51290 Giffaumont-Champaubert<br>
                                <a href="tel:0647552213" class="popup-phone">📞 0647552213</a>
                                                <br><a href="https://www.facebook.com/regisregatostanduppaddle" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Location de pédalo                            </p>
        </div>`, category: 'nautisme'},
        {coords: [48.60319, 4.71722], icon: '🛶', title: 'PEDAL&#039; Ô DER - location de pédalos et paddles', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="PEDAL&#039; Ô DER - location de pédalos et paddles" class="popup-image">
                        <h5>🛶 PEDAL&#039; Ô DER - location de pédalos et paddles</h5>
            <p>
                🗺️ Parking Arrigny Plage de Larzicourt<br>
                51290 Larzicourt<br>
                                <a href="tel:0663679457" class="popup-phone">📞 0663679457</a>
                                                <br><a href="https://www.facebook.com/pedaloder.pedaloder" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Location de pédalo XL &amp; paddles (simple, duo et XL)                            </p>
        </div>`, category: 'nautisme'},
        {coords: [48.55377, 4.77593], icon: '⛵', title: 'La Flotte du Der', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="La Flotte du Der" class="popup-image">
                        <h5>⛵ La Flotte du Der</h5>
            <p>
                🗺️ Port de Giffaumont<br>
                51290 Giffaumont-Champaubert<br>
                                <a href="tel:0632412798" class="popup-phone">📞 0632412798</a>
                                                <br><a href="https://www.lacduder.com/offres/la-flotte-du-der-giffaumont-champaubert-fr-4986946/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Location de bateaux électriques sans permis                            </p>
        </div>`, category: 'nautisme'},
        {coords: [48.60356, 4.74600], icon: '🏊‍♂️', title: 'Aquader - parc aquatique gonflable', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Aquader - parc aquatique gonflable" class="popup-image">
                        <h5>🏊‍♂️ Aquader - parc aquatique gonflable</h5>
            <p>
                🗺️ Port de Nuisement<br>
                51290 Sainte-Marie-du-Lac-Nuisement<br>
                                <a href="tel:0757083677" class="popup-phone">📞 0757083677</a>
                                                <br><a href="https://www.aquader51.fr/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Parc aquatique gonflable du Lac du Der                            </p>
        </div>`, category: 'nautisme'},
        {coords: [48.60763, 4.77302], icon: '🏛️', title: 'Village Musée du Der', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Village Musée du Der" class="popup-image">
                        <h5>🏛️ Village Musée du Der</h5>
            <p>
                🗺️ Grande rue des Côtes<br>
                51290 Sainte-Marie-du-Lac-Nuisement<br>
                                <a href="tel:0326410102" class="popup-phone">📞 0326410102</a>
                                                <br><a href="https://www.villagemuseeduder.com/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Découvrez l&#039;histoire fascinante du Lac du Der sa création et son écosystème unique. Expositions permanentes et temporaires.                            </p>
        </div>`, category: 'culturel'},
        {coords: [48.63790, 4.94819], icon: '🏛️', title: 'Musée de Saint-Dizier', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Musée de Saint-Dizier" class="popup-image">
                        <h5>🏛️ Musée de Saint-Dizier</h5>
            <p>
                🗺️ 17 rue de la Victroire<br>
                52100 Saint-Dizier<br>
                                <a href="tel:0325073150" class="popup-phone">📞 0325073150</a>
                                                <br><a href="https://www.saint-dizier.fr/actualites-et-sorties/culture-et-patrimoine/musee-de-saint-dizier/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Découvrez une momie précolombienne, des décors architecturaux d’Hector Guimard et un trésor mérovingien.                            </p>
        </div>`, category: 'culturel'},
        {coords: [48.63514, 4.95478], icon: '🏛️', title: 'Muse Saint-Dizier', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Muse Saint-Dizier" class="popup-image">
                        <h5>🏛️ Muse Saint-Dizier</h5>
            <p>
                🗺️ 24 rue Diderot<br>
                52100 Saint-Dizier<br>
                                <a href="tel:0972105053" class="popup-phone">📞 0972105053</a>
                                                <br><a href="https://www.saint-dizier.fr/actualites-et-sorties/culture-et-patrimoine/muse-saint-dizier/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>MUSE Découverte est un parcours permanent d’initiation à l’art, comprenant des activités ludiques et didactiques.                            </p>
        </div>`, category: 'culturel'},
        {coords: [48.42922, 4.96088], icon: '🏛️', title: 'Metallurgic Park', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Metallurgic Park" class="popup-image">
                        <h5>🏛️ Metallurgic Park</h5>
            <p>
                🗺️ 13 rue du Maréchal Leclerc<br>
                52110 Dommartin-le-Franc<br>
                                <a href="tel:0325040707" class="popup-phone">📞 0325040707</a>
                                                <br><a href="https://www.saint-dizier.fr/actualites-et-sorties/culture-et-patrimoine/metallurgic-park/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Plongez au cœur de la métallurgie à Dommartin-le-Franc                            </p>
        </div>`, category: 'culturel'},
        {coords: [48.60359, 5.03427], icon: '🏛️', title: 'L&#039;Ecole d&#039;Autrefois', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="L&#039;Ecole d&#039;Autrefois" class="popup-image">
                        <h5>🏛️ L&#039;Ecole d&#039;Autrefois</h5>
            <p>
                🗺️ 66 rue Henri Pouilly<br>
                52410 Roches-sur-Marne<br>
                                <a href="tel:0325555969" class="popup-phone">📞 0325555969</a>
                                                <br><a href="https://www.saint-dizier.fr/actualites-et-sorties/culture-et-patrimoine/l-ecole-d-autrefois/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Visitez une salle de classe des années 1930 reconstituée.                            </p>
        </div>`, category: 'culturel'},
        {coords: [48.63794, 4.93792], icon: '🏛️', title: 'Au Petit Paris', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Au Petit Paris" class="popup-image">
                        <h5>🏛️ Au Petit Paris</h5>
            <p>
                🗺️ 478 avenue de la République<br>
                52100 Saint-Dizier<br>
                                <a href="tel:0351459623" class="popup-phone">📞 0351459623</a>
                                                <br><a href="https://baraupetitparis.wixsite.com/bar-au-petit-paris" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>La maison Au Petit Paris est une oeuvre originale d’Art brut.                            </p>
        </div>`, category: 'culturel'},
        {coords: [48.64263, 4.97442], icon: '🏛️', title: 'Centre Socioculturel de Saint-Dizier', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Centre Socioculturel de Saint-Dizier" class="popup-image">
                        <h5>🏛️ Centre Socioculturel de Saint-Dizier</h5>
            <p>
                🗺️ 9 rue Marcel Thil<br>
                52100 Saint-Dizier<br>
                                <a href="tel:0325077988" class="popup-phone">📞 0325077988</a>
                                                <br><a href="https://www.saint-dizier.fr/actualites-et-sorties/sport-loisirs-et-musique/centre-socioculturel/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Le centre socioculturel propose activités, soutien et échanges pour tous.                            </p>
        </div>`, category: 'culturel'},
        {coords: [48.63794, 4.94148], icon: '🎵', title: 'Conservatoire', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Conservatoire" class="popup-image">
                        <h5>🎵 Conservatoire</h5>
            <p>
                🗺️ 1 rue Waldeck Rousseau<br>
                52100 Saint-Dizier<br>
                                <a href="tel:0325960500" class="popup-phone">📞 0325960500</a>
                                                <br><a href="https://www.saint-dizier.fr/actualites-et-sorties/sport-loisirs-et-musique/conservatoire/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Le Conservatoire à Rayonnement Intercommunal est un établissement d’éducation artistique agréé par le Ministère de la Culture et se conforme au Schéma National d’Orientation Pédagogique.                            </p>
        </div>`, category: 'culturel'},
        {coords: [48.64783, 4.95835], icon: '🎤', title: 'Studio d&#039;enregistrement', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Studio d&#039;enregistrement" class="popup-image">
                        <h5>🎤 Studio d&#039;enregistrement</h5>
            <p>
                🗺️ 11 Avenue Raoul Laurent<br>
                52100 Saint-Dizier<br>
                                <a href="tel:0325073168" class="popup-phone">📞 0325073168</a>
                                                <br><a href="https://www.saint-dizier.fr/actualites-et-sorties/sport-loisirs-et-musique/studio-denregistrement/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Studio d’enregistrement des Fuseaux à Saint-Dizier offre un espace moderne et équipé pour répétitions, enregistrements, mixage et accompagnement artistique                            </p>
        </div>`, category: 'culturel'},
        {coords: [48.72658, 4.57960], icon: '🎵', title: 'Bords 2 Scènes - L&#039;Orange Bleue', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Bords 2 Scènes - L&#039;Orange Bleue" class="popup-image">
                        <h5>🎵 Bords 2 Scènes - L&#039;Orange Bleue</h5>
            <p>
                🗺️ 4 rue Auguste Choisy Quartier des bords de Marne<br>
                51300 Vitry-le-François<br>
                                <a href="tel:0326410010" class="popup-phone">📞 0326410010</a>
                                                <br><a href="https://bords2scenes.fr/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Théâtre et musique sous toutes leurs formes                            </p>
        </div>`, category: 'culturel'},
        {coords: [48.72545, 4.59494], icon: '🏛️', title: 'Musée de la Batellerie', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Musée de la Batellerie" class="popup-image">
                        <h5>🏛️ Musée de la Batellerie</h5>
            <p>
                🗺️ 11 rue des Pointis<br>
                51300 Vitry-le-François<br>
                                <a href="tel:0326747089" class="popup-phone">📞 0326747089</a>
                                                <br><a href="https://www.vitry-le-francois.net/articles/culture" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>On y retrouve toute l&#039;ambiance du transport fluvial d&#039;autrefois avec nombre de photos, de cartes et d&#039;accessoires qui perpétuent le souvenir et rappellent toute la rudesse et aussi le bonheur de la vie au fil des écluses.                            </p>
        </div>`, category: 'culturel'},
        {coords: [48.77184, 5.15675], icon: '🏛️', title: 'Musée Barrois - Bar-le-Duc', desc: `
        <div class="custom-popup">
                        <img src="Votre_pub.jpg" alt="Musée Barrois - Bar-le-Duc" class="popup-image">
                        <h5>🏛️ Musée Barrois - Bar-le-Duc</h5>
            <p>
                🗺️ 7 rue François de Guise<br>
                55000 Bar-le-Duc<br>
                                <a href="tel:0329761467" class="popup-phone">📞 0329761467</a>
                                                <br><a href="https://musees-meuse.fr/musees/musee-barrois-bar-le-duc/" target="_blank" style="color:#a855f7;">🌐 Site Web</a>
                                                <br><br>Au fil des 13 salles, le visiteur découvre des peintures et des sculptures du Moyen-Âge au XXe siècle.                            </p>
        </div>`, category: 'culturel'},
        
    // DÉMO Culturel avec photo et téléphone
    {coords: [48.553638, 4.767266], icon: '🎨', title: 'Démonstration PUB', desc: `
        <div class="custom-popup">
            <img src="Votre_activités_pub.jpg" alt="Démonstration PUB" class="popup-image">
            <h5>🎨 Démonstration PUB</h5>
            <p>
                🗺️ 1 Avenue du Lac<br>
                51290 Lac du Der<br>
                <a href="tel:+33123456789" class="popup-phone">📞 03 26 xx xx xx</a>
                <br><a href="../contact/contact.html" style="color:#a855f7;">🌐 Contactez-nous</a>
                <br><br>Démonstration PUB avec carrousel photos - Exemple de présentation complète
            </p>
        </div>`, category: 'culturel'},
    {coords: [48.5654, 4.7412], icon: '🏠', title: 'Démonstration PUB', desc: `
        <div class="custom-popup">
            <img src="Votre_pub.jpg" alt="Démonstration PUB" class="popup-image">
            <h5>🏠 Démonstration PUB</h5>
            <p>
                🗺️ Route du Lac<br>
                51290 Sainte-Marie-du-Lac-Nuisement<br>
                <a href="tel:+33123456789" class="popup-phone">📞 03 26 xx xx xx</a>
                <br><a href="../contact/contact.html" style="color:#a855f7;">🌐 Contactez-nous</a>
                <br><br>Démonstration PUB - Capacité 6 personnes
            </p>
        </div>`, category: 'intérieur'},
    {coords: [48.58209, 4.81104], icon: '🌳', title: 'Démonstration PUB', desc: `
        <div class="custom-popup">
            <img src="Votre_pub.jpg" alt="Démonstration PUB" class="popup-image">
            <h5>🌳 Démonstration PUB</h5>
            <p>
                🗺️ Route de la Plage<br>
                52220 Puellemontier<br>
                <a href="tel:+33123456789" class="popup-phone">📞 03 25 xx xx xx</a>
                <br><a href="../contact/contact.html" style="color:#a855f7;">🌐 Contactez-nous</a>
                <br><br>Démonstration PUB
            </p>
        </div>`, category: 'extérieur'},
    {coords: [48.5789, 4.8234], icon: '⛵', title: 'Démonstration PUB', desc: `
        <div class="custom-popup">
            <img src="Votre_pub.jpg" alt="Démonstration PUB" class="popup-image">
            <h5>⛵ Démonstration PUB</h5>
            <p>
                🗺️ Chemin des Cabanes<br>
                52290 Eclaron-Braucourt-Sainte-Livière<br>
                <a href="tel:+33123456789" class="popup-phone">📞 03 25 xx xx xx</a>
                <br><a href="../contact/contact.html" style="color:#a855f7;">🌐 Contactez-nous</a>
                <br><br>Démonstration PUB
            </p>
        </div>`, category: 'nautisme'},

    // 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 - Presqu\'î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('🎨 Culturel:', pointsInteret.filter(p => p.category === 'culturel').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(`Sorties & Activités-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 clic sur la catégorie
    trackClick(`Sorties & Activités Choix-${category}`, '#');
    
        const hebergementCategories = ['culturel', 'intérieur', 'extérieur', 'nautisme'];
        
        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 = {
        'extérieur': 'exterieur-list-container',
        'intérieur': 'interieur-list-container',
        'nautisme': 'nautisme-list-container',
        'culturel': 'culturel-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 === 'extérieur') {
            shuffleExterieur();
        } else if (category === 'intérieur') {
            shuffleGites();
        } else if (category === 'nautisme') {
            shuffleNautisme();
        } else if (category === 'culturel') {
            forceResetRestaurants();
            shuffleCulturel();
        }
        
        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 = {
        'extérieur': 'exterieur-list-container',
        'intérieur': 'interieur-list-container',
        'nautisme': 'nautisme-list-container',
        'culturel': 'culturel-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['culturel']) {
        markerGroups['culturel'].forEach(marker => {
            if (!map.hasLayer(marker)) {
                map.addLayer(marker);
            }
        });
    }

    map.closePopup();
}

// ========== MÉLANGE ALÉATOIRE DES HOTELS ==========
function shuffleCulturel() {
    console.log('🎲 Mélange des restaurants');
    const listContainer = document.getElementById('dynamic-list-culturel');
    if (!listContainer) {
        console.error('❌ Container dynamic-list introuvable !');
        return;
    }
    
    const allItems = Array.from(listContainer.children);
    
    const demoRestaurant = allItems.find(item => 
        item.classList.contains('culturel-item') && 
        item.getAttribute('data-name') === 'Activité Culturelle Demo'
    );
    
    const regularRestaurants = allItems.filter(item => 
        item.classList.contains('culturel-item') && 
        item.getAttribute('data-name') !== 'Activité Culturelle Demo'
    );
    
    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('✅ Culturel 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-interieur');
    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('interieur-item') && 
        item.getAttribute('data-name') === 'Activité Intérieur Demo'
    );
    
    // Séparer les gîtes normaux et les pubs
    const regularGites = allItems.filter(item => 
        item.classList.contains('interieur-item') && 
        item.getAttribute('data-name') !== 'Activité Intérieur Demo'
    );
    
    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('✅ Intérieur mélangés aléatoirement');
}

// ========== MÉLANGE ALÉATOIRE DES CAMPINGS ==========
function shuffleExterieur() {
    console.log('🎲 Mélange des campings');
    const listContainer = document.getElementById('dynamic-list-exterieur');
    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('exterieur-item') && 
        item.getAttribute('data-name') === 'Activité Extérieur Demo Carrousel'
    );
    
    // Séparer les campings normaux et les pubs
    const regularExtérieur = allItems.filter(item => 
        item.classList.contains('exterieur-item') && 
        item.getAttribute('data-name') !== 'Activité Extérieur Demo Carrousel'
    );
    
    const ads = allItems.filter(item => item.classList.contains('ad-card'));
    
    // Mélanger les campings normaux avec la fonction shuffleArray
    const shuffledExtérieur = shuffleArray(regularExtérieur);
    
    // Vider le container
    listContainer.innerHTML = '';
    
    let campingCount = 0;
    let adIndex = 0;
    
    // Ajouter le premier camping régulier s'il existe
    if (shuffledExtérieur.length > 0) {
        listContainer.appendChild(shuffledExtérieur[0]);
        campingCount++;
    }
    
    // Ajouter le Démonstration PUB en position 2
    if (demoCamping) {
        listContainer.appendChild(demoCamping);
        console.log('✅ Démonstration PUB ajouté en position 2');
    }
    
    // Ajouter les autres campings réguliers
    for (let i = 1; i < shuffledExtérieur.length; i++) {
        listContainer.appendChild(shuffledExtérieur[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('✅ Extérieur mélangés aléatoirement');
}

// ========== MÉLANGE ALÉATOIRE DES INSOLITES ==========
function shuffleNautisme() {
    console.log('🎲 Mélange des activités insolites');
    const listContainer = document.getElementById('dynamic-list-nautisme');
    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('nautisme-item') && 
        item.getAttribute('data-name') === 'Activité Nautisme Demo'
    );
    
    // Séparer les insolites normaux et les pubs
    const regularInsolites = allItems.filter(item => 
        item.classList.contains('nautisme-item') && 
        item.getAttribute('data-name') !== 'Activité Nautisme Demo'
    );
    
    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('searchBarExterieur', 'exterieur-item', 'dynamic-list-exterieur');
setupSearch('searchBarInterieur', 'interieur-item', 'dynamic-list-interieur');
setupSearch('searchBarNautisme', 'nautisme-item', 'dynamic-list-nautisme');
setupSearch('searchBarCulturel', 'culturel-item', 'dynamic-list-culturel');

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

function clearSearchFilterExtérieur() {
    const searchBar = document.getElementById('searchBarExterieur');
    if (searchBar) {
        searchBar.value = "";
        document.querySelectorAll('.exterieur-item').forEach(item => item.style.display = 'block');
        document.querySelectorAll('#dynamic-list-exterieur .ad-card').forEach(ad => ad.style.display = 'block');
    }
}
function clearSearchFilterIntérieur() {
    const searchBar = document.getElementById('searchBarInterieur');
    if (searchBar) {
        searchBar.value = "";
        document.querySelectorAll('.interieur-item').forEach(item => item.style.display = 'block');
        document.querySelectorAll('#dynamic-list-interieur .ad-card').forEach(ad => ad.style.display = 'block');
    }
}
function clearSearchFilterNautisme() {
    const searchBar = document.getElementById('searchBarNautisme');
    if (searchBar) {
        searchBar.value = "";
        document.querySelectorAll('.nautisme-item').forEach(item => item.style.display = 'block');
        document.querySelectorAll('#dynamic-list-nautisme .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');
    shuffleCulturel();
    shuffleGites();
    shuffleExterieur();
    shuffleNautisme();
    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: '#a855f7',
                fillColor: '#9333ea',
                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('Sorties & Activités 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="culturel"], input[data-category="intérieur"], input[data-category="extérieur"], input[data-category="nautisme"]');
    
    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, #a855f7 0%, #9333ea 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>