/* ============================================
   GRILLE TEXTUELLE - MODE GRILLE PERSONNALISÉE
   Tableau avec les noms des accords uniquement
   ============================================ */

/* ========================================
   VISIBILITÉ - Afficher uniquement en mode grille
   ======================================== */

/* Masquer par défaut */
.intervals-section-static.intervals-generator {
    display: none;
}

/* Afficher en mode grille */
body[data-mode="custom-grid"] .intervals-section-static.intervals-generator {
    display: block !important;
}

/* ========================================
   CONTENEUR SECTION
   ======================================== */

body[data-mode="custom-grid"] .intervals-section-static {
    width: 100%;
    max-width: 800px;
    margin: 3rem auto;
    padding: 0 1rem;
}

body[data-mode="custom-grid"] .intervals-container {
    background: transparent;
    padding: 0;
}

/* ========================================
   TITRE (Optionnel - masqué par défaut)
   ======================================== */

body[data-mode="custom-grid"] .intervals-title {
    display: none;
}

/* Si vous voulez afficher un titre personnalisé */
body[data-mode="custom-grid"] .intervals-title::after {
    content: " - Grille textuelle";
}

/* ========================================
   TABLEAU - Structure
   ======================================== */

body[data-mode="custom-grid"] .intervals-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0.5rem; /* Espace entre les cellules */
    
    /* 🆕 BORDURE EXTÉRIEURE ÉPAISSE OLIVE */
    border: 4px solid var(--couleur-primaire);
    border-radius: 12px;
    
    /* Fond transparent */
    background: transparent;
    
    /* Padding interne */
    padding: 0rem;
    
    /* Ombre subtile */
    box-shadow: 0 4px 12px rgba(128, 128, 0, 0.15);
}

/* ========================================
   LIGNES - Reset styles
   ======================================== */

body[data-mode="custom-grid"] .chord-text-row {
    background: none;
}

body[data-mode="custom-grid"] .intervals-table tbody tr {
    border: none;
}

/* ========================================
   CELLULES - Design des accords
   ======================================== */

body[data-mode="custom-grid"] .chord-text-cell {
    /* Fond blanc */
    background: white;
    
    /* 🆕 BORDURE NOIRE AUTOUR DE CHAQUE ACCORD */
    border: 2px solid #000000;
    border-radius: 8px;
    
    /* Espacement interne */
    padding: 1rem;
    
    /* Texte centré */
    text-align: center;
    
    /* Style du texte */
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--couleur-primaire);
    
    /* Transition douce */
    transition: all 0.2s ease;
    
    /* Curseur pointer pour indiquer l'interactivité */
    cursor: default;
}

/* ========================================
   HOVER - Effet interactif
   ======================================== */

body[data-mode="custom-grid"] .chord-text-cell:hover {
    /* Fond olive au survol */
    background: var(--couleur-primaire);
    
    /* Texte blanc au survol */
    color: white;
    
    /* Légère élévation */
    transform: translateY(-2px);
    
    /* Ombre plus prononcée */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* ========================================
   MESSAGE GRILLE VIDE
   ======================================== */

body[data-mode="custom-grid"] .intervals-table td[colspan] {
    text-align: center;
    padding: 2rem;
    color: #666;
    font-style: italic;
    background: transparent;
    border: none;
}

/* ========================================
   RESPONSIVE - MOBILE
   ======================================== */

@media (max-width: 47.9375rem) {
    body[data-mode="custom-grid"] .intervals-section-static {
        margin: 2rem auto;
        padding: 0 0.5rem;
    }
    
    body[data-mode="custom-grid"] .intervals-table {
        border-spacing: 0.375rem;
        padding: 0.375rem;
        border-width: 3px;
    }
    
    body[data-mode="custom-grid"] .chord-text-cell {
        padding: 0.75rem 0.5rem;
        font-size: 1rem;
    }
}

/* ========================================
   RESPONSIVE - TABLETTE
   ======================================== */

@media (min-width: 48rem) and (max-width: 63.9375rem) {
    body[data-mode="custom-grid"] .intervals-table {
        border-spacing: 0.5rem;
    }
    
    body[data-mode="custom-grid"] .chord-text-cell {
        font-size: 1.05rem;
    }
}

/* ========================================
   PRÉFÉRENCE MOUVEMENT RÉDUIT
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    body[data-mode="custom-grid"] .chord-text-cell {
        transition: none;
    }
    
    body[data-mode="custom-grid"] .chord-text-cell:hover {
        transform: none;
    }
}

/* ========================================
   PRINT
   ======================================== */

@media print {
    body[data-mode="custom-grid"] .intervals-table {
        border: 3px solid #808000;
        box-shadow: none;
    }
    
    body[data-mode="custom-grid"] .chord-text-cell {
        border: 1px solid #000;
    }
    
    body[data-mode="custom-grid"] .chord-text-cell:hover {
        background: white;
        color: var(--couleur-primaire);
        transform: none;
        box-shadow: none;
    }
}