/* ===== FIX LAYOUT PRINCIPAL ===== */

/* Correction de la structure body/sidebar/main-content */
body {
    display: flex;
    flex-direction: row;
    height: 100vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* Sidebar navigation fixe à gauche */
#sidebar {
    width: var(--nav-sidebar-width, 60px);
    flex-shrink: 0;
    height: 100vh;
}

/* Main content prend tout l'espace restant */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100vh;
    min-width: 0; /* Important pour éviter le débordement */
}

/* Sections internes correctement dimensionnées */
.section {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Main container dans les sections */
.section main {
    height: 100%;
    display: flex;
    width: 100%;
}

/* Content area dans les sections */
.content-area {
    flex: 1;
    overflow: hidden;
    min-width: 0; /* Important pour éviter le débordement */
}

/* Editor container */
.editor-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

/* Editor content avec scrollbar */
.editor-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.5rem;
    min-height: 0; /* Important pour le scroll */
}

/* Fix pour le panneau sound elements */
.sounds-panel,
.sound-elements {
    width: 100%;
    margin-bottom: 1rem;
}

/* Empêche le débordement horizontal */
.sounds-panel > *,
.sound-elements > * {
    max-width: 100%;
    overflow-wrap: break-word;
}

/* Ajustement des sidebars internes aux sections */
.section > .sidebar {
    width: 300px;
    flex-shrink: 0;
}