/* ============================================
   TABLEAU INTERVALLES - STYLE UNIFIÉ
   Utilisé en mode générateur ET dictionnaire
   VERSION 2.0 : Avec support notes omises guitare
   ============================================ */

.intervals-section-static {
    width: 100%;
    max-width: 850px;
    margin: clamp(1.5rem, 3vh, 2.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;
    overflow-x: auto; /* ✅ Permettre le scroll horizontal si nécessaire */
    -webkit-overflow-scrolling: touch;
}

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

.intervals-table {
    table-layout: fixed;
    width: 100%; /* ✅ Largeur responsive au lieu de 800px fixe */
    max-width: 800px; /* ✅ Maximum sur grand écran */
    min-width: 300px; /* ✅ Minimum pour éviter l'écrasement */
    margin: 0 auto; /* ✅ Centrer le tableau */
    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;
}

/* ============================================
   🆕 STYLES POUR NOTES OMISES À LA GUITARE
   ============================================ */

/* Cellules des notes omises */
.omitted-note {
    opacity: 0.6;
    position: relative;
}

/* Fond légèrement grisé pour les notes omises */
.degree-row td.omitted-note {
    background: #d5d5c0; /* Version plus sombre de #e0d5a0 */
}

.interval-row td.omitted-note {
    background: #f5f5f5;
}

.note-row td.omitted-note {
    background: #f5f0dc; /* Version plus sombre de #FFFAEB */
}

/* Label "(omise à la guitare)" */
.omitted-label {
    font-size: 0.75em;
    color: #666;
    font-weight: normal;
    font-style: italic;
    display: block;
    margin-top: 0.25rem;
}

/* ============================================
   📱 RESPONSIVE - MOBILE (≤768px)
   ============================================ */

@media (max-width: 768px) {
    .intervals-section-static {
            margin: clamp(1.5rem, 3vh, 2.5rem) auto;
        padding: 0 0.5rem; /* ✅ Réduire le padding */
    }
    
    .intervals-container {
        /* ✅ Scroll horizontal si le tableau est trop large */
        overflow-x: auto;
        padding-bottom: 0.5rem;
    }
    
    .intervals-table {
        min-width: 280px; /* ✅ Réduire la largeur minimum */
        font-size: 0.85rem; /* ✅ Réduire la taille de police */
        border-width: 2px; /* ✅ Bordure plus fine */
        border-radius: 8px;
    }
    
    .intervals-table td {
        padding: 0.5rem 0.25rem; /* ✅ Réduire le padding */
    }
    
    .degree-row td {
        font-size: 0.9rem; /* ✅ Réduire taille */
    }
    
    .interval-row td {
        font-size: 0.75rem; /* ✅ Réduire taille */
    }
    
    .note-row td {
        font-size: 0.85rem; /* ✅ Réduire taille */
    }
    
    /* Adapter le label sur mobile */
    .omitted-label {
        font-size: 0.65em;
        margin-top: 0.15rem;
    }
}

/* ============================================
   📱 RESPONSIVE - TRÈS PETIT MOBILE (≤480px)
   ============================================ */

@media (max-width: 480px) {
    .intervals-section-static {
        margin: 2rem auto;
        padding: 0 0.25rem;
    }
    
    .intervals-table {
        font-size: 0.75rem; /* ✅ Encore plus petit */
        border-width: 1.5px;
    }
    
    .intervals-table td {
        padding: 0.4rem 0.15rem; /* ✅ Padding minimal */
    }
    
    .degree-row td {
        font-size: 0.8rem;
    }
    
    .interval-row td {
        font-size: 0.65rem;
    }
    
    .note-row td {
        font-size: 0.75rem;
    }
    
    .omitted-label {
        font-size: 0.6em;
        display: none; /* ✅ Cacher le label sur très petit écran */
    }
}

/* ============================================
   🖥️ RESPONSIVE - TABLETTE (768px - 1024px)
   ============================================ */

@media (min-width: 769px) and (max-width: 1024px) {
    .intervals-section-static {
            margin: clamp(1.5rem, 3vh, 2.5rem) auto;
    }
    
    .intervals-table {
        max-width: 700px;
        font-size: 0.95rem;
    }
    
    .intervals-table td {
        padding: 0.65rem 0.5rem;
    }
}