/* Intégration des polices (si pas déjà fait) */
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Playfair+Display:ital,wght@0,600;1,600&display=swap');

    :root {
        --bg-page: #fdfcf8;
        --font-heading: 'Playfair Display', serif;
    }

    body {
        background-color: var(--bg-page) !important;
    }

    /* Transformation des cartes en style Magazine */
    .bg-white.rounded-xl.shadow-sm.border.border-gray-100 {
        background: #ffffff !important;
        border-radius: 1.5rem !important;
        border: 1px solid rgba(0,0,0,0.05) !important;
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.03) !important;
    }

    /* Typographie Magazine pour les titres */
    h2, h3, h4 {
        font-family: var(--font-heading) !important;
        letter-spacing: -0.01em !important;
    }

    /* Style des boutons de zoom */
    .bg-green-50.text-green-700 {
        background-color: #ecfdf5 !important;
        border-radius: 9999px !important;
        font-family: 'Inter', sans-serif !important;
    }

 


    /* Classe utilitaire pour les cartes */
    .card-magazine {
        background: white;
        border-radius: 1.5rem;
        border: 1px solid rgba(0,0,0,0.05);
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.03);
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .card-magazine:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
    }

  
    #map-canal-berry {
        width: 100%;
        height: 100%;
        display: block;
    }
	
	dialog:not([open]) {
    display: none;
}
/* Supprime les marges par défaut de la bulle Leaflet */
.leaflet-popup-content-wrapper {
    padding: 0 !important; /* Enlève l'espace interne */
    border-radius: 0px !important; /* Garde les coins arrondis */
}

.leaflet-popup-content {
    margin: 0 !important; /* Enlève la marge par défaut */
    width: auto !important; /* Laisse votre div gérer la largeur */
	
}

    main p.text-lg {
        font-family: 'Inter', sans-serif;
        color: #4b5563;
    }
    
    /* Apporte un peu d'élégance aux titres de la galerie */
    h1 {
        font-family: 'Playfair Display', serif;
    }
	

    /* Force le centrage de la modale dans la fenêtre */
    dialog::backdrop {
        background: rgba(0, 0, 0, 0.9);
    }
    
    dialog[open] {
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        overflow: visible;
    }

    /* Optionnel : animation d'entrée */
    dialog[open] {
        animation: fadeIn 0.3s ease-out;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: scale(0.95); }
        to { opacity: 1; transform: scale(1); }
    }
#map {
    /* Si vous avez une transition, elle doit être très rapide ou inexistante pour Leaflet */
    transition: none; 
}
/* Force le recalcul et stabilise le positionnement */
.leaflet-popup {
    transition: none !important;
}

/* Important : on donne une largeur fixe au contenu du popup pour que 
   Leaflet n'ait pas de doute sur la taille lors du premier rendu */
.leaflet-popup-content {
    min-width: 200px !important; 
    max-width: 300px !important;
}

/* Permet d'effacer les bordures et fonds natifs des popups Leaflet pour laisser Tailwind s'exprimer */
.custom-popup-card .leaflet-popup-content-wrapper {
    padding: 0;
    overflow: hidden;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    border: none;
}
.custom-popup-card .leaflet-popup-content {
    margin: 0;
    width: auto !important;
}
.custom-popup-card .leaflet-popup-tip-container {
    margin-top: -1px;
}
/* Cache la scrollbar horizontale des boutons sur mobile */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 1. On s'assure que le header reste toujours au-dessus */
header.bg-white.shadow-sm.sticky.top-0 {
    z-index: 1000 !important; /* On augmente la priorité */
}

/* 2. On s'assure que la carte ne tente pas de "dépasser" en index */
#map {
    z-index: 1 !important; /* La carte doit rester en arrière-plan */
}

/* 3. Correction optionnelle si le bug persiste sur les contrôles Leaflet */
.leaflet-control-container {
    z-index: 900 !important;
}
/* Supprime le rectangle noir de focus lors du clic sur les polygones des communes */
    .leaflet-interactive:focus {
        outline: none !important;
    }
    /* Sécurité globale pour éviter le rectangle noir sur tout élément de la carte au clic */
    #map :focus {
        outline: none !important;
    }

</style>