/* ============================================
   GRILLE TEXTUELLE - MODE GRILLE PERSONNALISÉE
   ============================================ */

/* Masquer par défaut */
.text-grid-section {
    display: none;
}

/* Afficher en mode grille */
body[data-mode="custom-grid"] .text-grid-section {
    display: block;
    width: 100%;
    max-width: 800px;
    margin: 3rem auto;
    padding: 0 1rem;
}

/* Titre */
body[data-mode="custom-grid"] .text-grid-title {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--couleur-primaire);
}

/* Tableau */
body[data-mode="custom-grid"] .chord-text-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 2px solid #000;
    border-radius: 12px;
    background: transparent;
}

/* Cellules - pas de bordure par défaut */
body[data-mode="custom-grid"] .chord-text-cell {
    border: none;
    padding: 1rem;
    text-align: center;
    vertical-align: middle;
    font-weight: 600;
    font-size: 1.1rem;
    color: #000;
    background: transparent;
}

/* Quadrillage interne uniquement */
body[data-mode="custom-grid"] .chord-text-cell {
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
}

/* Pas de bordure à droite sur la 4ème cellule de chaque ligne */
body[data-mode="custom-grid"] .chord-text-cell:nth-child(4) {
    border-right: none;
}

/* Pas de bordure en bas sur la dernière ligne */
body[data-mode="custom-grid"] .chord-text-row:last-child .chord-text-cell {
    border-bottom: none;
}

/* Message grille vide */
body[data-mode="custom-grid"] .chord-text-grid td[colspan] {
    text-align: center;
    padding: 2rem;
    color: #666;
    font-style: italic;
    border: none;
}

/* RESPONSIVE - Mobile */
@media (max-width: 47.9375rem) {
    body[data-mode="custom-grid"] .text-grid-section {
        margin: 2rem auto;
        padding: 0 0.5rem;
    }
    
    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"] .chord-text-cell {
        font-size: 1.05rem;
    }
}