/* FORCER PLEINE LARGEUR MOBILE */
@media (max-width: 768px) {
    /* Reset total */
    body, html {
        margin: 0 !important;
        padding: 0 !important;
        width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    /* Section Quantum Map - PLEINE LARGEUR */
    .mobile-container {
        width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #f5f5f7 !important;
    }
    
    .mobile-container > div {
        width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .mobile-container > div > div {
        width: 100vw !important;
        margin: 0 !important;
        padding: 1.5rem !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: white !important;
    }
    
    /* Carte */
    #quantum-map {
        width: calc(100vw - 3rem) !important;
        margin: 0 1.5rem !important;
        height: 350px !important;
    }
    
    /* Supprimer TOUS les backgrounds violets */
    .mobile-container,
    .mobile-container > div {
        background: white !important;
        background-image: none !important;
    }
    
    /* Toutes les sections */
    section {
        width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Centrer la carte sur mobile */
@media (max-width: 768px) {
    /* Carte centrée */
    #quantum-map {
        width: calc(100vw - 2rem) !important;
        margin: 1rem auto !important;
        height: 400px !important;
        display: block !important;
        border-radius: 12px !important;
        border: 1px solid #e5e5ea !important;
    }
    
    /* Légende centrée */
    .mobile-container div[style*="display: flex"][style*="justify-content: center"] {
        margin-top: 1rem !important;
        padding: 0 1rem !important;
    }
}

/* Desktop - carte bien centrée aussi */
@media (min-width: 769px) {
    #quantum-map {
        margin: 1.5rem auto !important;
        display: block !important;
        max-width: 900px !important;
    }
}

/* Centrer uniquement la carte sur mobile */
@media (max-width: 768px) {
    #quantum-map {
        width: calc(100vw - 1rem) !important;
        margin: 0.5rem auto !important;
        display: block !important;
        max-width: calc(100vw - 1rem) !important;
    }
}