/* ===== 4-BANNIERE-NOM-ACCORD.CSS ===== */
/* 🎵 Bannière affichant le nom de l'accord */
/* ✅ Compatible mode générateur ET mode dictionnaire */

/* ========================================
   BANNIÈRE STANDARD (MODE GÉNÉRATEUR)
   ======================================== */

.chord-name-wrapper {
    text-align: center;
    margin: var(--margin-xs) auto var(--margin-lg);
    width: 100%;
}

.chord-name-banner {
    background: var(--couleur-primaire);
    border-radius: var(--rayon-lg);
    padding: var(--padding-sm) var(--padding-xxl);
    box-shadow: var(--ombre-lg);
    display: inline-block;
    width: auto;
    max-width: 90%;
}

.chord-name-content {
    color: var(--texte-blanc);
    font-size: var(--texte-xxl);
    font-weight: var(--poids-bold);
    text-shadow: 0.0625rem 0.0625rem 0.1875rem rgba(0, 0, 0, 0.2);
    margin: 0;
    line-height: var(--hauteur-ligne-serree);
}

/* ========================================
   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ÈRE MODE DICTIONNAIRE - STYLE IDENTIQUE AU GÉNÉRATEUR
   ======================================== */

body[data-current-note] .chord-name-wrapper {
    text-align: center;
    margin: var(--margin-xs) auto var(--margin-lg);
    width: 100%;
}

body[data-current-note] .chord-name-banner {
    background: var(--couleur-primaire);
    border-radius: var(--rayon-lg);
    padding: var(--padding-sm) var(--padding-xxl); /* ✅ Padding identique */
    box-shadow: var(--ombre-lg);
    display: inline-block;
    width: auto;
    max-width: 90%;
}

body[data-current-note] .chord-name-content {
    color: var(--texte-blanc);
    font-size: var(--texte-xxl);
    font-weight: var(--poids-bold);
    text-shadow: 0.0625rem 0.0625rem 0.1875rem rgba(0, 0, 0, 0.2);
    margin: 0;
    line-height: var(--hauteur-ligne-serree);
    text-transform: capitalize;
    letter-spacing: 0.02em;
}

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

.chord-name-banner-modal,
.chord-name-banner-modal-zoom {
    background: var(--couleur-primaire);
    border-radius: var(--rayon-md) var(--rayon-md) 0 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.chord-name-banner-modal .chord-name-content,
.chord-name-banner-modal-zoom .chord-name-content {
    color: var(--texte-blanc);
    font-size: var(--texte-titre);
    font-weight: var(--poids-bold);
    text-shadow: 0.0625rem 0.0625rem 0.1875rem rgba(0, 0, 0, 0.2);
    margin: 0;
    display: inline-block;
    background: var(--couleur-primaire);
    padding: var(--padding-sm) var(--padding-xxl);
    border-radius: var(--rayon-md);
}

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

@media (max-width: 47.9375rem) {
    .chord-name-banner,
    body[data-current-note] .chord-name-banner {
        padding: var(--padding-xs) var(--padding-lg);
        max-width: 95%;
    }
    
    .chord-name-content,
    body[data-current-note] .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);
        padding: var(--padding-xs) var(--padding-lg);
    }
}

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

@media (min-width: 48rem) and (max-width: 63.9375rem) {
    .chord-name-content,
    body[data-current-note] .chord-name-content {
        font-size: var(--texte-xxl);
    }
}

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

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

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

@media print {
    .chord-name-banner {
        border: var(--bordure-normale) solid #333;
        box-shadow: none;
        background: transparent;
        color: #000;
    }
    
    .chord-name-content {
        color: #000;
        text-shadow: none;
    }
    
    body[data-current-note] .chord-name-banner {
        border-bottom: 2px solid #000;
        padding-bottom: 0.5rem;
        margin-bottom: 1rem;
    }
}