/* 
 * CSS Frontend NI Carte Interactive - VERSION MOBILE CORRIGÉE
 * Fix: Carte invisible sur smartphone
 */

/* ===== CONTENEUR PRINCIPAL ===== */
.ni-carte-wrapper {
    display: block;
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 25px 0;
    line-height: 1.6;
    position: relative;
}

/* ===== CONTENEUR AVEC LISTE ===== */
.ni-carte-wrapper.has-list {
    display: flex;
    gap: 20px;
}

/* Position liste LEFT/RIGHT - Desktop */
.ni-carte-wrapper.has-list.list-position-left,
.ni-carte-wrapper.has-list.list-position-right {
    flex-direction: row;
    align-items: stretch;
}

/* Position liste LEFT - ordre éléments */
.ni-carte-wrapper.has-list.list-position-left .ni-carte-liste {
    order: 1;
}

.ni-carte-wrapper.has-list.list-position-left .ni-carte-map-container {
    order: 2;
}

/* Position liste RIGHT - ordre éléments */
.ni-carte-wrapper.has-list.list-position-right .ni-carte-liste {
    order: 2;
}

.ni-carte-wrapper.has-list.list-position-right .ni-carte-map-container {
    order: 1;
}

/* Position liste TOP/BOTTOM - Desktop */
.ni-carte-wrapper.has-list.list-position-top,
.ni-carte-wrapper.has-list.list-position-bottom {
    flex-direction: column;
}

.ni-carte-wrapper.has-list.list-position-top .ni-carte-liste {
    order: 1;
}

.ni-carte-wrapper.has-list.list-position-top .ni-carte-map-container {
    order: 2;
}

.ni-carte-wrapper.has-list.list-position-bottom .ni-carte-liste {
    order: 2;
}

.ni-carte-wrapper.has-list.list-position-bottom .ni-carte-map-container {
    order: 1;
}

/* ===== CONTENEUR CARTE ===== */
.ni-carte-map-container {
    flex: 1;
    position: relative;
    width: 100%;
    min-height: 400px;
    background: #f8f9fa;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* ===== CARTE LEAFLET ===== */
.ni-carte-map {
    width: 100% !important;
    height: 100% !important;
    min-height: 400px !important;
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    visibility: visible !important;
    border-radius: 12px;
    background: #e9ecef;
}

/* Force l'affichage de la carte */
.leaflet-container {
    width: 100% !important;
    height: 100% !important;
    min-height: 400px !important;
    position: relative !important;
    display: block !important;
    visibility: visible !important;
    z-index: 1 !important;
}

/* ===== LISTE POI ===== */
.ni-carte-liste {
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    position: relative;
    overflow-y: auto;
}

/* Dimensions liste selon position - Desktop */
.ni-carte-liste.position-left,
.ni-carte-liste.position-right {
    width: 300px;
    min-width: 300px;
    flex: 0 0 300px;
    max-height: 500px;
}

.ni-carte-liste.position-top,
.ni-carte-liste.position-bottom {
    width: 100%;
    flex: 0 0 auto;
    max-height: 200px;
}

/* ===== LOADING SPINNER ===== */
.ni-carte-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #666;
    z-index: 2;
}

.ni-carte-loading .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #007cba;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===== RESPONSIVE MOBILE - CORRECTION PRINCIPALE ===== */
@media (max-width: 768px) {

    /* FORCE LAYOUT MOBILE : CARTE EN HAUT, LISTE EN BAS */
    .ni-carte-wrapper.has-list {
        flex-direction: column !important;
        gap: 15px;
    }

    /* CARTE TOUJOURS EN PREMIER SUR MOBILE */
    .ni-carte-map-container {
        order: 1 !important;
        flex: none !important;
        width: 100% !important;
        min-height: 300px !important; /* Hauteur minimale mobile */
        height: 300px !important; /* Hauteur fixe mobile */
    }

    /* CARTE LEAFLET - DIMENSIONS FORCÉES MOBILE */
    .ni-carte-map {
        width: 100% !important;
        height: 300px !important;
        min-height: 300px !important;
        max-height: 300px !important;
        position: relative !important;
        display: block !important;
        visibility: visible !important;
        z-index: 1 !important;
        background: #e9ecef !important;
    }

    /* LEAFLET CONTAINER - FORCE AFFICHAGE MOBILE */
    .leaflet-container {
        width: 100% !important;
        height: 300px !important;
        min-height: 300px !important;
        max-height: 300px !important;
        position: relative !important;
        display: block !important;
        visibility: visible !important;
        z-index: 1 !important;
    }

    /* LISTE TOUJOURS EN SECOND SUR MOBILE */
    .ni-carte-liste {
        order: 2 !important;
        width: 100% !important;
        flex: none !important;
        min-width: auto !important;
        max-width: none !important;
        max-height: 250px; /* Hauteur réduite sur mobile */
        margin-top: 10px;
    }

    /* RESET TOUTES LES POSITIONS SUR MOBILE */
    .ni-carte-liste.position-left,
    .ni-carte-liste.position-right,
    .ni-carte-liste.position-top,
    .ni-carte-liste.position-bottom {
        width: 100% !important;
        flex: none !important;
        order: 2 !important;
    }
}

/* ===== RESPONSIVE TABLETTE ===== */
@media (max-width: 1024px) and (min-width: 769px) {

    /* Sur tablette, forcer colonne pour LEFT/RIGHT */
    .ni-carte-wrapper.has-list.list-position-left,
    .ni-carte-wrapper.has-list.list-position-right {
        flex-direction: column !important;
    }

    .ni-carte-liste.position-left,
    .ni-carte-liste.position-right {
        width: 100% !important;
        flex: 0 0 auto !important;
        max-height: 200px;
    }

    .ni-carte-map-container {
        min-height: 350px;
    }

    .ni-carte-map,
    .leaflet-container {
        min-height: 350px !important;
    }
}

/* ===== FIXES ADDITIONNELS ===== */

/* Empêcher le débordement */
.ni-carte-wrapper * {
    box-sizing: border-box;
}

/* Assurer la visibilité des contrôles Leaflet */
.leaflet-control-container {
    position: relative !important;
    z-index: 10 !important;
}

/* Boutons de zoom Leaflet */
.leaflet-control-zoom {
    border: none !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

/* Popups Leaflet */
.leaflet-popup-content-wrapper {
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
}

/* Attribution Leaflet */
.leaflet-control-attribution {
    font-size: 10px !important;
    background-color: rgba(255,255,255,0.8) !important;
    border-radius: 4px !important;
}

/* Debug - Forcer l'affichage en cas de problème */
.ni-carte-debug .ni-carte-map,
.ni-carte-debug .leaflet-container {
    border: 3px solid red !important;
    background: yellow !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    position: relative !important;
    z-index: 999 !important;
}