/**
 * TROUVE ACCORD - Affichage du nom de l'accord détecté
 * Style similaire à la bannière principale
 * ✅ CORRIGÉ : Largeur adaptative avec minimum
 */

/* ============================================
   CONTENEUR PRINCIPAL DE L'AFFICHAGE
   ============================================ */

.trouve-accord-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    margin-bottom: 0rem;
}

/* ============================================
   LABEL AU-DESSUS DE LA BANNIÈRE
   ============================================ */

.chord-label {
    display: block;
    font-size: 0.75rem;
    color: #666;
    font-weight: 500;
    margin-bottom: 0rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
}

/* ============================================
   BANNIÈRE DE L'ACCORD DÉTECTÉ
   Style identique à .chord-name-banner
   ✅ LARGEUR ADAPTATIVE
   ============================================ */

.trouve-accord-main-chord {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.chord-name {
    /* Apparence */
    background: #FFFAEB;
    border-radius: var(--rayon-lg, 0.75rem);
    padding: var(--padding-sm, 0.5rem) var(--padding-lg, 1.5rem);
    border: 0.22rem solid var(--couleur-primaire, #808000);
    
    /* Texte */
    color: #333;
    font-size: var(--texte-xl, 1.5rem);
    font-weight: var(--poids-bold, 700);
    line-height: var(--hauteur-ligne-serree, 1.2);
    text-align: center;
    margin: 0;
    
    /* 🆕 LARGEUR ADAPTATIVE */
    min-width: 16.25rem;        /* 260px minimum */
    width: fit-content;         /* S'adapte au contenu */
    max-width: 90vw;            /* Max 90% de la largeur d'écran */
    
    /* Gestion du débordement (si vraiment trop long) */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
    /* Layout */
    display: inline-block;
}

/* ============================================
   ANIMATION D'APPARITION
   ============================================ */

@keyframes chordNamePulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

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

@media (max-width: 47.9375rem) {
    .chord-name {
        min-width: 12rem;                           /* 192px minimum sur mobile */
        max-width: 95vw;                            /* Presque toute la largeur */
        padding: var(--padding-xs, 0.375rem) var(--padding-md, 1rem);
        font-size: var(--texte-lg, 1.25rem);        /* Texte plus petit */
    }

    .alternatives-list {
        flex-direction: column;
    }

    .alternative-chord {
        text-align: center;
    }
}

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

@media (min-width: 48rem) and (max-width: 63.9375rem) {
    .chord-name {
        font-size: var(--texte-xxl, 1.75rem);
        min-width: 18rem;                           /* 288px sur tablette */
    }
}

/* ============================================
   RESPONSIVE - DESKTOP LARGE
   ============================================ */

@media (min-width: 90rem) {
    .chord-name {
        max-width: 50rem;                           /* 800px max sur très grands écrans */
    }
}

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

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

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

@media print {
    .chord-name {
        border: 0.125rem solid #333;
        background: transparent;
        color: #000;
        max-width: 100%;
    }
}