/* ===== 5-BANNIERE-NOM-ACCORD.CSS - SIMPLE ET FIXE ===== */
/* 🎵 Style visuel de la bannière affichant le nom de l'accord */
/* ⚠️ Le positionnement dans la grille est géré par 3-layout-ligne-controle.css */

/* ========================================
   STYLE VISUEL DE LA BANNIÈRE
   Bordure olive, fond crème, taille fixe 
   ======================================== */

.chord-name-banner {
    background: #FFFAEB;
    border-radius: var(--rayon-lg);
    padding: var(--padding-sm) var(--padding-lg);
    border: 0.22rem solid var(--couleur-primaire);
    display: inline-block;
    width: 10.25rem; 
    max-width: 95vw; /* Sécurité mobile */
}

.chord-name-content {
    color: #333;
    font-size: var(--texte-xl);
    font-weight: var(--poids-bold);
    margin: 0;
    line-height: var(--hauteur-ligne-serree);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========================================
   NOTATIONS (LATIN / ANGLO)
   ======================================== */

.notation-latin,
.notation-anglo {
    display: none;
}

/* Affichage selon la notation active */
body[data-notation="latin"] .notation-latin,
body:not([data-notation]) .notation-latin {
    display: inline;
}

body[data-notation="anglo"] .notation-anglo {
    display: inline;
}

/* ========================================
   BANNIÈRES DANS LES MODALES
   ======================================== */

.chord-name-banner-modal,
.chord-name-banner-modal-zoom {
    background: var(--fond-creme);
    border-radius: var(--rayon-md) var(--rayon-md) 0 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0.1875rem solid var(--couleur-primaire);
    border-bottom: none;
    padding: var(--padding-sm) var(--padding-lg);
}

.chord-name-banner-modal .chord-name-content,
.chord-name-banner-modal-zoom .chord-name-content {
    color: var(--couleur-primaire-foncee);
    font-size: var(--texte-titre);
    font-weight: var(--poids-bold);
    margin: 0;
    display: inline-block;
    background: transparent;
    padding: 0;
    white-space: nowrap;
}

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

@media (max-width: 47.9375rem) {
    .chord-name-banner {
        width: 90vw;
        max-width: 31.25rem;
        padding: var(--padding-xs) var(--padding-md);
    }
    
    .chord-name-content {
        font-size: var(--texte-xl);
    }
    
    .chord-name-banner-modal,
    .chord-name-banner-modal-zoom {
        padding: var(--padding-md) var(--padding-lg);
    }
    
    .chord-name-banner-modal .chord-name-content,
    .chord-name-banner-modal-zoom .chord-name-content {
        font-size: var(--texte-xl);
    }
}

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

@media (min-width: 48rem) and (max-width: 63.9375rem) {
    .chord-name-content {
        font-size: var(--texte-xxl);
    }
}

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

@media (prefers-reduced-motion: reduce) {
    .chord-name-banner {
        transition: none;
    }
}

/* ========================================
   VISIBILITÉ BANNIÈRES DESKTOP/MOBILE
   ======================================== */

/* Mobile : afficher uniquement la bannière mobile */
@media (max-width: 37.4375rem) {
    .chord-name-desktop {
        display: none !important;
    }
}

/* Desktop/Tablette : afficher uniquement la bannière desktop */
@media (min-width: 37.5rem) {
    .chord-name-mobile {
        display: none !important;
    }
}


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

@media print {
    .chord-name-banner {
        border: var(--bordure-normale) solid #333;
        background: transparent;
        color: #000;
    }
    
    .chord-name-content {
        color: #000;
    }
}


/* ========================================
   BANNIÈRE MODE (SYMÉTRIQUE À DROITE)
   Mêmes styles que chord-name-banner
   ======================================== */

.mode-banner {
    background: #FFFAEB;
    border-radius: var(--rayon-lg);
    padding: var(--padding-sm) var(--padding-lg);
    border: 0.22rem solid var(--couleur-primaire);
    display: inline-block;
    width: 10.25rem; 
    max-width: 95vw;
}

.mode-banner-content {
    color: #333;
    font-size: var(--texte-xl);
    font-weight: var(--poids-bold);
    margin: 0;
    line-height: var(--hauteur-ligne-serree);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mode-label {
    display: inline;
}

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

@media (max-width: 47.9375rem) {
    .mode-banner {
        width: 90vw;
        max-width: 31.25rem;
        padding: var(--padding-xs) var(--padding-md);
    }
    
    .mode-banner-content {
        font-size: var(--texte-xl);
    }
}

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

@media (min-width: 48rem) and (max-width: 63.9375rem) {
    .mode-banner-content {
        font-size: var(--texte-xxl);
    }
}

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

@media (prefers-reduced-motion: reduce) {
    .mode-banner {
        transition: none;
    }
}

/* ========================================
   VISIBILITÉ DESKTOP/MOBILE
   ======================================== */

/* Mobile : masquer la bannière mode */
@media (max-width: 37.4375rem) {
    .mode-banner {
        display: none !important;
    }
}

/* Desktop/Tablette : afficher la bannière mode */
@media (min-width: 37.5rem) {
    .mode-banner {
        display: inline-block;
    }
}

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

@media print {
    .mode-banner {
        display: none;
    }
}