/**
 * TROUVE ACCORD - RESPONSIVE
 * Corrections pour mobile, tablette et desktop
 * À charger APRÈS tous les autres CSS du mode Trouve Accord
 */

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

@media (max-width: 768px) {
    
    /* ========================================
       1. PANNEAU DE CONTRÔLE - Éviter collision avec navbar
       ======================================== */
    
    body[data-mode="trouve-accord"] .control-zone-wrapper {
        margin-top: 1.5rem !important; /* ✅ Espace sous la navbar sticky */
        margin-bottom: 1.5rem !important;
        padding: 0 0.5rem;
    }
    
    body[data-mode="trouve-accord"] .control-zone {
        gap: 1rem !important;
    }
    
    /* ========================================
       2. BANNIÈRE NOM DE L'ACCORD
       ======================================== */
    
    .trouve-accord-display {
        margin-bottom: 1rem;
        gap: 0.75rem;
    }
    
    .chord-name {
        width: 90vw !important;
        max-width: 100% !important;
        font-size: 1.25rem !important;
        padding: 0.5rem 1rem !important;
        white-space: normal !important; /* ✅ Permettre le retour à la ligne */
        word-wrap: break-word;
    }
    
    /* ========================================
       3. CONTENEUR INSTRUMENT - Plus compact
       ======================================== */
    
    .trouve-accord-instrument-container {
        padding: 1rem 0.5rem !important;
        margin: 1rem auto;
        max-width: 100%;
        overflow-x: auto; /* ✅ Scroll horizontal si nécessaire */
    }
    
    /* Piano : plus d'espace vertical */
    .trouve-accord-instrument-container:has(.piano-interactive) {
        padding: 2.5rem 0.75rem !important;
    }
    
    /* ========================================
       4. MANCHE INTERACTIF - Réduire la taille
       ======================================== */
    
    .fretboard-interactive {
        /* ✅ Réduire les espacements */
        --string-spacing: 35px !important;
        --fret-spacing: 65px !important;
        
        margin-left: 50px !important;
        margin-top: 30px !important;
        margin-bottom: 30px !important;
        padding: 15px !important;
        
        /* Permettre le scroll horizontal */
        overflow-x: visible;
    }
    
    /* Wrapper de scroll pour le fretboard */
    .fretboard-scroll-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 30px;
    }
    
    /* Notes sur le manche - plus petites */
    .fretboard-dot {
        width: 35px !important;
        height: 35px !important;
        font-size: 12px !important;
    }
    
    /* Repères de frettes - plus petits */
    .fretboard-marker {
        font-size: 16px !important;
    }
    
    /* Cordes - plus fines */
    .fretboard-string {
        height: 2px !important;
    }
    
    /* Frettes - plus fines */
    .fretboard-fret {
        width: 2px !important;
    }
    
    .fretboard-fret.nut {
        width: 8px !important;
    }
    
    /* ========================================
       5. PIANO INTERACTIF - Plus d'espace
       ======================================== */
    
    .piano-interactive {
        padding: 0 !important; /* ✅ Enlever le padding interne */
        justify-content: flex-start;
    }
    
    /* Touches du piano - taille mobile */
    .piano-key.white-key {
        width: 38px !important;
        height: 150px !important;
        border-width: 1.5px !important;
    }
    
    .piano-key.black-key {
        width: 24px !important;
        height: 95px !important;
        border-width: 1.5px !important;
    }
    
    /* Labels - lisibles */
    .key-label {
        font-size: 0.625rem !important;
        bottom: 6px !important;
    }
    
    .black-key .key-label {
        font-size: 0.5625rem !important;
        bottom: 5px !important;
    }
    
    /* ========================================
       6. TABLEAUX - Responsive
       ======================================== */
    
    /* Tableau d'intervalles */
    .trouve-accord-intervals-table {
        max-width: 100%;
        padding: 0 0.5rem;
    }
    
    .trouve-accord-intervals-table .intervals-table {
        font-size: 0.85rem !important;
        border-width: 2px !important;
    }
    
    /* Tableau accords similaires */
    .trouve-accord-similar-section {
        padding: 0 0.5rem;
        margin: 1.5rem auto;
    }
    
    .similar-chords-table {
        font-size: 0.85rem !important;
        border-width: 2px !important;
    }
    
    .similar-chords-table thead th,
    .similar-chords-table tbody td {
        padding: 0.5rem 0.25rem !important;
        font-size: 0.85rem !important;
    }
    
    /* ========================================
       7. CONTRÔLES INSTRUMENT (bouton affichage notes)
       ======================================== */
    
    .instrument-controls {
        top: 5px !important;
        right: 5px !important;
    }
    
    .toggle-notes-label {
        font-size: 12px !important;
        gap: 6px !important;
    }
    
    .toggle-notes-label input[type="checkbox"] {
        width: 16px !important;
        height: 16px !important;
    }
}

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

@media (max-width: 480px) {
    
    /* Panneau de contrôle */
    body[data-mode="trouve-accord"] .control-zone-wrapper {
        margin-top: 1rem !important;
        padding: 0 0.25rem;
    }
    
    /* Bannière nom */
    .chord-name {
        font-size: 1.1rem !important;
        padding: 0.4rem 0.75rem !important;
    }
    
    /* Conteneur instrument - encore plus compact */
    .trouve-accord-instrument-container {
        padding: 1.75rem 1.25rem !important;
        border-width: 1.5px !important;
    }
    
    /* Manche - encore plus petit */
    .fretboard-interactive {
        --string-spacing: 30px !important;
        --fret-spacing: 55px !important;
        
        margin-left: 50px !important;
        margin-top: 20px !important;
        margin-bottom: 20px !important;
        padding: 10px !important;
    }
    
    .fretboard-dot {
        width: 35px !important;
        height: 35px !important;
        font-size: 12px !important;
    }
    
    .fretboard-marker {
        font-size: 16px !important;
    }
    
    /* Piano - touches encore plus petites */
    .piano-key.white-key {
        width: 34px !important;
        height: 130px !important;
    }
    
    .piano-key.black-key {
        width: 22px !important;
        height: 82px !important;
    }
    
    /* Cacher les labels sur très petit écran */
    .key-label {
        display: none !important;
    }
    
    /* Tableaux - plus compacts */
    .trouve-accord-intervals-table .intervals-table,
    .similar-chords-table {
        font-size: 0.75rem !important;
        border-width: 1.5px !important;
    }
    
    .trouve-accord-intervals-table td,
    .similar-chords-table thead th,
    .similar-chords-table tbody td {
        padding: 0.4rem 0.15rem !important;
        font-size: 0.75rem !important;
    }
}

/* ============================================
   💻 TABLETTE (768px - 1024px)
   ============================================ */

@media (min-width: 769px) and (max-width: 1024px) {
    
    /* Panneau de contrôle */
    body[data-mode="trouve-accord"] .control-zone-wrapper {
        margin-top: 1rem;
        margin-bottom: 1.5rem;
    }
    
    /* Conteneur instrument */
    .trouve-accord-instrument-container {
        padding: 1.5rem 1rem;
        max-width: 95%;
    }
    
    /* Manche - taille intermédiaire */
    .fretboard-interactive {
        --string-spacing: 45px;
        --fret-spacing: 80px;
    }
    
    .fretboard-dot {
        width: 35px !important;
        height: 35px !important;
        font-size: 12px !important;
    }
    
    /* Piano - taille intermédiaire */
    .piano-key.white-key {
        width: 48px;
        height: 170px;
    }
    
    .piano-key.black-key {
        width: 30px;
        height: 105px;
    }
    
    .key-label {
        font-size: 0.6875rem;
    }
}

/* ============================================
   🖥️ DESKTOP LARGE (>1200px)
   ============================================ */

@media (min-width: 1200px) {
    
    /* Conteneur instrument - plus grand */
    .trouve-accord-instrument-container {
        max-width: 1100px;
        padding: 2.5rem;
    }
    
    /* Manche - espacement confortable */
    .fretboard-interactive {
        --string-spacing: 55px;
        --fret-spacing: 100px;
    }
    
    /* Piano - touches plus grandes */
    .piano-key.white-key {
        width: 60px;
        height: 220px;
    }
    
    .piano-key.black-key {
        width: 38px;
        height: 135px;
    }
}

/* ============================================
   🔄 ORIENTATION PAYSAGE MOBILE
   ============================================ */

@media (max-width: 768px) and (orientation: landscape) {
    
    /* Réduire les marges verticales en paysage */
    body[data-mode="trouve-accord"] .control-zone-wrapper {
        margin-top: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .trouve-accord-display {
        margin-bottom: 0.5rem;
    }
    
    .trouve-accord-instrument-container {
        margin: 0.5rem auto;
    }
    
    /* Manche - hauteur réduite */
    .fretboard-interactive {
        margin-top: 15px !important;
        margin-bottom: 15px !important;
    }
    
    /* Piano - hauteur réduite */
    .piano-key.white-key {
        height: 120px !important;
    }
    
    .piano-key.black-key {
        height: 75px !important;
    }
}

/* ============================================
   ♿ ACCESSIBILITÉ
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .chord-name {
        animation: none !important;
    }
}

/* ============================================
   🖨️ PRINT
   ============================================ */

@media print {
    
    /* Masquer les contrôles */
    .instrument-controls,
    .toggle-notes-label {
        display: none !important;
    }
    
    /* Optimiser pour l'impression */
    .trouve-accord-instrument-container {
        padding: 1rem;
        border-width: 1px;
        page-break-inside: avoid;
    }
    
    .fretboard-interactive,
    .piano-interactive {
        page-break-inside: avoid;
    }
}