/**
 * Styles principaux pour les pages d'accords individuels (note + qualité)
 * Ex: /dictionnaire/fr/guitare/do-majeur.html
 */

/* ===================================
   LAYOUT GÉNÉRAL
   =================================== */

.quality-content-note {
    padding: 1rem;
}

.section-title {
    text-align: center;
    margin-bottom: 2rem;
}

/* ===================================
   CHORD HEADER
   =================================== */

.chord-header {
    text-align: center;
    padding: 0rem 0;
}

.chord-name {
    background: #808000;
    border-radius: 12px;
    padding: 0.5rem 1rem;
    margin: 0 auto 2rem auto;
    width: fit-content; 
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
    color: white;
}

/* ============================================================
   CHORD POSITIONS - GRILLE
   ============================================================ */

.chord-positions-grid-note {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
    margin-bottom: 3rem;
    justify-content: center;
    align-items: center;
}

.chord-position-item-note {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.position-name-note {
    display: none;
    padding: 0.5rem 1rem;
    margin: 0 auto 0rem auto;
    width: fit-content; 
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: black;
}

/* ============================================================
   CARDS PAR INSTRUMENT (Dimensions des conteneurs)
   ============================================================ */

.chord-position-card-note {
    background: transparent;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 0rem 0rem;
    text-align: center;
}

/* Piano */
.chord-position-card-note.piano-diagram {
    width: 750px;
    height: 350px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Guitare (toutes langues : guitare, guitar, guitarra) */
.chord-position-card-note.guitare-diagram,
.chord-position-card-note.guitar-diagram,
.chord-position-card-note.guitarra-diagram {
    width: 280px;
    height: 350px;
    padding: 1rem 0rem;
}

/* Ukulélé (toutes langues : ukulele, ukelele) */
.chord-position-card-note.ukulele-diagram,
.chord-position-card-note.ukelele-diagram {
    width: 240px;
    height: 350px;
    padding: 1rem 0rem;
}

/* Charango */
.chord-position-card-note.charango-diagram {
    width: 300px;
    height: 380px;
    padding: 1rem 0rem;
}

/* ============================================================
   IMAGES PAR INSTRUMENT (Tailles des images à modifier ici)
   ============================================================ */

/* Piano - Images */
.position-diagram-piano {
    max-width: 80%;
    height: auto;
}

/* Guitare - Images */
.position-diagram-guitare {
    max-width: 100%;
    height: 310px;
    
}

/* Ukulélé - Images */
.position-diagram-ukulele {
    max-width: 100%;
    height: 320px;
    object-fit: contain;
}

/* Charango - Images */
.position-diagram-charango {
    max-width: 100%;
    height: 350px;
    object-fit: contain;
}

/* ============================================================
   RÈGLES SPÉCIALES
   ============================================================ */

.chord-position-card-note:has(img[src*="11-basse-4"]) img {
    width: 82.5% !important;
    height: 100% !important;
}

/* ===================================
   SIDEBAR BUTTONS - ACTIVE STATES
   =================================== */

.quality-btn.active,
.note-btn-quality.active {
    background: var(--primary-color, white);
    color: black;
    font-weight: 600;
}

/* ===================================
   RESPONSIVE - TABLETTE (768px)
   =================================== */

@media (max-width: 768px) {
    .chord-name {
        font-size: 1.5rem;
        padding: 0.625rem 1rem;
    }
    
    .chord-positions-grid-note {
        gap: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .position-name-note {
        font-size: 1rem;
    }
    
    .section-title {
        font-size: 1.25rem;
        margin-top: 4rem;
    }
    
    /* ===== CARDS MOBILE ===== */
    
    /* Piano mobile */
    .chord-position-card-note.piano-diagram {
        width: 100%;
        max-width: 400px;
        height: auto;
        min-height: 240px;
        padding: 0.5rem;
    }
    
    /* Guitare/Guitar/Guitarra mobile */
    .chord-position-card-note.guitare-diagram,
    .chord-position-card-note.guitar-diagram,
    .chord-position-card-note.guitarra-diagram {
        width: 100%;
        max-width: 240px;
        height: auto;
        min-height: 280px;
        padding: 0rem 0rem;
    }
    
    /* Ukulélé/Ukelele mobile */
    .chord-position-card-note.ukulele-diagram,
    .chord-position-card-note.ukelele-diagram {
        width: 100%;
        max-width: 250px;
        height: auto;
        min-height: 320px;
        padding: 0.875rem 0.5rem;
    }
    
    /* Charango mobile */
    .chord-position-card-note.charango-diagram {
        width: 100%;
        max-width: 250px;
        height: auto;
        min-height: 320px;
        padding: 0.875rem 0.5rem;
    }
    
    /* ===== IMAGES MOBILE ===== */
    
    /* Piano - Images mobile */
    .position-diagram-piano {
        max-width: 100%;
        height: auto;
    }
    
    /* Guitare - Images mobile */
    .position-diagram-guitare {
        max-width: 100%;
        height: 250px;
    }
    
    /* Ukulélé - Images mobile */
    .position-diagram-ukulele {
        max-width: 100%;
        height: 290px;
    }
    
    /* Charango - Images mobile */
    .position-diagram-charango {
        max-width: 100%;
        height: 290px;
    }
}

/* ===================================
   RESPONSIVE - MOBILE (480px)
   =================================== */

@media (max-width: 480px) {
    .chord-header {
        padding: 0rem 0;
    }
    
    .chord-name {
        font-size: 1.3rem;
        padding: 0.5rem 0.875rem;
    }
    
    .chord-positions-grid-note {
        gap: 1.25rem;
    }
    
    .position-name-note {
        font-size: 0.9rem;
    }
    
    /* ===== CARDS TRÈS PETIT MOBILE ===== */
    
    .chord-position-card-note.piano-diagram {
        max-width: 320px;
        min-height: 200px;
    }
    
    .chord-position-card-note.guitare-diagram,
    .chord-position-card-note.guitar-diagram,
    .chord-position-card-note.guitarra-diagram {
        max-width: 200px;
        min-height: 240px;
    }
    
    .chord-position-card-note.ukulele-diagram,
    .chord-position-card-note.ukelele-diagram,
    .chord-position-card-note.charango-diagram {
        max-width: 210px;
        min-height: 260px;
    }
    
    /* ===== IMAGES TRÈS PETIT MOBILE ===== */
    
    /* Guitare - Images très petit mobile */
    .position-diagram-guitare {
        height: 230px;
    }
    
    /* Ukulélé - Images très petit mobile */
    .position-diagram-ukulele {
        height: 240px;
    }
    
    /* Charango - Images très petit mobile */
    .position-diagram-charango {
        height: 240px;
    }
}