/* CSS Responsive Simple pour les cibles TOEM */
/* Utilise uniquement max-width et préserve tous les calculs JS existants */

/* Base: tous les SVG deviennent responsive */
svg {
    max-width: 100%;
    height: auto;
}

/* Cibles principales - conserver le ratio */
svg[viewBox*="1400"] {
    max-width: 100%;
    height: auto;
    width: auto !important; /* Override les width fixes */
}

/* Zoom cible - DÉSACTIVÉ en mode paysage, géré par responsive.css */
/* #zoom-cible-svg svg {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: 100% !important;
} */

/* Assurer que les conteneurs ne contraignent pas */
.scene-container,
.toem-center-panel {
    width: 100%;
    max-width: none;
    overflow-x: hidden; /* Empêcher le dépassement horizontal */
}

#zoom-cible-svg {
    width: 100%;
    max-width: 600px; /* Limite raisonnable pour le zoom */
    margin: 0 auto;
    overflow: hidden; /* Empêcher tout débordement */
}

/* Breakpoints simples pour ajuster les max-width */
@media (max-width: 768px) {
    #zoom-cible-svg {
        max-width: 400px;
    }
}

@media (max-width: 480px) {
    #zoom-cible-svg {
        max-width: 350px;
    }
}

/* Grands écrans - limiter la taille max */
@media (min-width: 1600px) {
    svg[viewBox*="1400"] {
        max-width: 1400px;
    }
    
    #zoom-cible-svg {
        max-width: 700px;
    }
}