/**
 * Styles pour le tableau d'intervalles
 * Affiche la structure des accords (degrés, intervalles, notes)
 */

/* ============================================================
   INTERVALS TABLE - MODE NOTE+QUALITÉ
   ============================================================ */

.intervals-section {
    margin-top: 5rem;
}

.intervals-table-note {
    table-layout: fixed;
    width: 100%;
    max-width: 800px;
    margin: 0 auto 1rem auto;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 1rem;
    border: 3px solid #808000;
    border-radius: 12px;
    overflow: hidden;
    background: white;
}

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

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

.intervals-table-note td,
.intervals-table-note th {
    padding: 0.75rem;
    text-align: center;
    vertical-align: middle;
    border-right: 1.5px solid #808000;
    border-bottom: 1.5px solid #808000;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    hyphens: auto;
}

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

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

/* Ligne des degrés */
.intervals-table-note thead th {
    background: #e0d5a0;
    font-weight: 700;
    font-size: 1.1rem;
    color: #333;
}

/* Ligne des intervalles */
.intervals-table-note tbody tr:first-child td {
    background: white;
    color: #808000;
    font-size: 0.95rem;
    font-weight: 500;
}

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

/* ===================================
   RESPONSIVE
   =================================== */

@media (max-width: 768px) {
    .intervals-section {
        margin-top: 3rem;
    }
    
    .intervals-table-note {
        max-width: 100%;
        font-size: 0.85rem;
        border-radius: 8px;
    }
    
    .intervals-table-note td,
    .intervals-table-note th {
        padding: 0.5rem 0.375rem;
        font-size: 0.85rem;
    }
    
    .intervals-table-note thead th {
        font-size: 0.95rem;
    }
    
    .intervals-table-note tbody tr:first-child td {
        font-size: 0.8rem;
    }
    
    .intervals-table-note .notes-row td {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .intervals-section {
        margin-top: 2rem;
    }
    
    .intervals-table-note {
        font-size: 0.75rem;
        border-width: 2px;
    }
    
    .intervals-table-note td,
    .intervals-table-note th {
        padding: 0.4rem 0.25rem;
        font-size: 0.75rem;
    }
    
    .intervals-table-note thead th {
        font-size: 0.85rem;
    }
    
    .intervals-table-note tbody tr:first-child td {
        font-size: 0.7rem;
    }
    
    .intervals-table-note .notes-row td {
        font-size: 0.8rem;
    }
}