@media (min-width: 768px) {
    #sidebar { left: 0; }
    body.sidebar-closed #sidebar { left: -300px; }
    
    #map { left: 250px; }
    body.sidebar-closed #map { left: 0; }
    
    #mode-toggle { top: 12px; left: 270px; }
    body.sidebar-closed #mode-toggle { left: 70px; }


    #stats-panel { 
    left: auto; 
    right: 20px; 
    bottom: 70px; 
    width: 380px; 
    padding: 15px; 
    border-radius: 16px; 
}

/* Position fixe independante de la barre laterale */
body.sidebar-closed #stats-panel { 
    left: auto; 
    right: 20px; 
}
    
    #list-panel-container { left: auto; right: 20px; bottom: 20px; width: 280px; height: 40%; display: block !important; }
    body.sidebar-closed #list-panel-container { right: 20px; }
    
    #list-toggle-btn { display: none; }

    .stat-col { float: none; width: 100%; text-align: left; margin-bottom: 12px; }
    .stat-col:last-child { margin-bottom: 0; }
    .stat-icon { display: inline-block; vertical-align: middle; margin: 0 12px 0 0; }
    .stat-text { display: inline-block; vertical-align: middle; font-size: 14px; }
    
    .list-row { margin-bottom: 12px; padding-bottom: 0; border-bottom: none; }
    .list-data { font-size: 16px; }

    /* Masque le bouton et force l'affichage de la div sur PC */
    #panel-drag-handle { display: none; }
    #stats-extra { height: auto !important; }
}

@media (max-width: 767px) {
    #sidebar { left: -300px; }
    body.sidebar-open #sidebar { left: 0; }
    
    #map { left: 0; }
    
    #mode-toggle { top: 12px; left: 50%; margin-left: -110px; }
    
    #stats-panel { left: 12px; right: 12px; bottom: 12px; width: auto; }
    
    #list-toggle-btn { display: block; right: 12px; bottom: 85px; }
    
    #list-panel-container { right: 12px; bottom: 125px; width: 220px; height: 25%; display: none; }
    body.list-open #list-panel-container { display: block; }
    
    .leaflet-touch .leaflet-control-zoom { margin-top: 70px; }

    /* Réactive le bouton sur smartphone */
    #panel-drag-handle { display: block; }
}

@media (max-width: 360px) {
    .modal-content {
        left: 5%;
        margin-left: 0;
        width: 90%;
    }
}