/* ============================================
   TABLEAU INTERVALLES - STYLE UNIFIÉ
   Utilisé en mode générateur ET dictionnaire
   ============================================ */

.intervals-section-static {
    width: 100%;
    max-width: 850px;
    margin: 5.5rem auto;
    padding: 0 1rem;
}

/* 🔹 Visibilité selon le mode */
/* Mode générateur : visible seulement si pas de data-current-note */
body:not([data-current-note]) .intervals-section-static.intervals-generator {
    display: block;
}

/* Mode dictionnaire : visible seulement si data-current-note existe */
body[data-current-note] .intervals-section-static.intervals-dictionary {
    display: block;
}

/* 🆕 Mode grille : afficher la grille textuelle */
body[data-mode="custom-grid"] .intervals-section-static.intervals-generator {
    display: block !important;
}

/* Masquer l'autre mode */
body[data-current-note] .intervals-section-static.intervals-generator {
    display: none;
}

body:not([data-current-note]) .intervals-section-static.intervals-dictionary {
    display: none;
}

.intervals-container {
    background: transparent;
    padding: 0;
}

/* Masquer le titre */
.intervals-title {
    display: none;
}

.intervals-table {
    table-layout: fixed; /* Force la répartition égale des colonnes */
    width: 800px; /* Largeur totale fixe du tableau - ajustez selon vos besoins */
    border-collapse: separate;
    border-spacing: 0;
    font-size: 1rem;
    border: 3px solid #808000;
    border-radius: 12px;
    overflow: hidden;
    background: white;
}

.intervals-table tbody tr {
    border-bottom: 2px solid #808000;
}

.intervals-table tbody tr:last-child {
    border-bottom: none;
}

.intervals-table td {
    padding: 0.75rem;
    text-align: center;
    vertical-align: middle;
    border-right: 1.5px solid #808000;
    border-bottom: 1.5px solid #808000;
}

.intervals-table td:last-child {
    border-right: none;
}

.intervals-table tbody tr:last-child td {
    border-bottom: none;
}

/* Ligne des degrés */
.degree-row td {
    font-weight: 700;
    font-size: 1.1rem;
    color: #333;
    background: #e0d5a0;
}

/* Ligne des intervalles */
.interval-row td {
    color: #808000;
    font-size: 0.95rem;
    font-weight: 500;
    background: white;
}

/* Ligne des notes */
.note-row td {
    font-weight: 600;
    font-size: 1.05rem;
    color: #333;
    background: #FFFAEB;
}

/* Mobile */
@media (max-width: 767px) {
    .intervals-section-static {
        margin: 4rem auto;
    }
    
    .intervals-table {
        width: 100%; /* Prend toute la largeur disponible sur mobile */
        max-width: 600px; /* Largeur maximale sur mobile */
        font-size: 0.9rem;
        border-radius: 8px;
    }
    
    .intervals-table td {
        padding: 0.5rem 0.25rem;
    }
    
    .degree-row td {
        font-size: 1rem;
    }
    
    .note-row td {
        font-size: 0.95rem;
    }
}