/* ==========================================================================
   Feuille de Style pour le Plugin "La Dent Creuse - Carte des Distributeurs"
   Version: 2.0
   Design: Thème sombre inspiré du tableau de bord
   ========================================================================== */

/* Importation d'une police moderne et propre qui correspond à votre design */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Définition de la palette de couleurs inspirée de votre dashboard */
:root {
    --ldc-bg-dark: #2a2e34; /* Fond général de la page */
    --ldc-card-bg: #3c424a; /* Fond des cartes */
    --ldc-primary-accent: #F97316; /* Violet / Indigo pour les éléments interactifs */
    --ldc-primary-accent-hover: #e26913; /* Violet plus foncé pour le survol */
    --ldc-text-light: #f8f9fa; /* Texte principal blanc cassé */
    --ldc-text-muted: #adb5bd; /* Texte secondaire gris clair */
    --ldc-success-green: #F97316; /* Vert vif pour les liens et infos positives */
    --ldc-border-color: rgba(255, 255, 255, 0.1); /* Bordure subtile pour les cartes */
}

/* Container principal de la carte et de ses informations */
.leaflet-map-wrapper {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espace entre la carte et la carte d'information */
    margin: 20px 0;
}

/* Style de la carte Leaflet elle-même */
.ldc-map-card {
    height: 500px;
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--ldc-border-color);
    background-color: var(--ldc-bg-dark); /* Couleur de fond pendant le chargement des tuiles */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    overflow: hidden; /* Assure que les tuiles de la carte respectent les coins arrondis */
}


/* Style de la carte d'information du distributeur le plus proche */
/* Style de la carte d'information du distributeur le plus proche */
.ldc-info-card {
    padding: 20px 25px;
    border-radius: 12px;
    color: var(--ldc-text-light);
    border: 1px solid var(--ldc-border-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    overflow: hidden;

    /* Le fond sera maintenant géré par le style en ligne injecté par PHP. */
    /* On met une couleur de secours au cas où. */
    background-color: var(--ldc-card-bg);
}
/* Style du lien "Voir le stock" */
.distributor-link {
    color: var(--ldc-success-green) !important;
    text-decoration: none !important;
    font-weight: bold;
    transition: opacity 0.2s ease;
}

.distributor-link:hover {
    opacity: 0.8;
}

/* Style pour le bouton de recentrage, pour qu'il soit rond et violet */
.leaflet-control a {
    background-color: var(--ldc-primary-accent) !important;
    color: white !important;
    border-radius: 50% !important;
    width: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
    font-size: 1.5em !important;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: background-color 0.2s ease;
}

.leaflet-control a:hover {
    background-color: var(--ldc-primary-accent-hover) !important; /* Violet plus foncé */
}

/* Supprime le style de barre rectangulaire par défaut de Leaflet */
.leaflet-bar {
    border-radius: 50% !important;
    box-shadow: none !important;
}

/* Animation de fondu pour l'apparition de la carte d'information */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* --- NOUVEAUX STYLES POUR LES POPUPS DE CARTE --- */

/* Apparence générale de la popup de Leaflet */
.leaflet-popup-content-wrapper {
    background: var(--ldc-card-bg) !important;
    color: var(--ldc-text-light) !important;
    border-radius: 12px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.4) !important;
}
.leaflet-popup-content {
    margin: 0 !important;
    padding: 0 !important;
    width: 200px !important; /* Largeur fixe pour un meilleur contrôle */
    font-family: 'Inter', sans-serif;
}
.leaflet-popup-tip {
    background: var(--ldc-card-bg) !important;
}
/* Supprime la flèche de fermeture par défaut */
.leaflet-popup-close-button {
    display: none !important;
}

/* Notre contenu personnalisé à l'intérieur de la popup */
.ldc-map-popup .popup-header {
    background-color: rgba(0,0,0,0.2);
    padding: 10px 15px;
    font-weight: 600;
    font-size: 15px;
    border-bottom: 1px solid var(--ldc-border-color);
}
.ldc-map-popup .popup-content {
    padding: 15px;
}
.ldc-map-popup p {
    margin: 0 0 15px 0;
    font-size: 13px;
    color: var(--ldc-text-muted);
}
.ldc-map-popup .popup-button {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: var(--ldc-primary-accent);
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    transition: background-color 0.2s ease;
}
.ldc-map-popup .popup-button:hover {
    background-color: var(--ldc-primary-accent-hover);
}