/* public/app/css/dash-eq-signature.css
 * Synopsis: Griffes nommées par style d'égaliseur.
 * Objectif: Position et couleurs lisibles (bar/rétro/nuage/spectral).
 */

.dash .dash-eq__signature {
    border: 1px solid transparent;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .04em;
    line-height: 1.15;
    opacity: 1;
    padding: .2rem .5rem;
    pointer-events: none;
    position: absolute;
    text-transform: lowercase;
    transition: opacity .35s ease, visibility .35s ease;
    visibility: visible;
    z-index: 2;
}

.dash .dash-eq__signature.dash-eq__signature--hidden {
    opacity: 0 !important;
    visibility: hidden !important;
}

.dash .dash-eq[data-eq-style="1"] .dash-eq__signature {
    background: color-mix(in srgb, var(--dash-accent) 22%, var(--dash-elev));
    border-color: color-mix(in srgb, var(--dash-accent) 55%, transparent);
    bottom: .3rem;
    color: var(--dash-text);
    left: .4rem;
    right: auto;
    top: auto;
}

.dash .dash-eq[data-eq-style="2"] .dash-eq__signature {
    background: rgba(8, 18, 10, .88);
    border-color: #39ff14;
    bottom: auto;
    box-shadow: 0 0 10px color-mix(in srgb, #39ff14 35%, transparent);
    color: #39ff14;
    left: auto;
    right: 2.15rem;
    top: .28rem;
}

.dash .dash-eq[data-eq-style="4"] .dash-eq__signature {
    background: rgba(10, 24, 38, .88);
    border-color: #5ec8ff;
    bottom: auto;
    color: #d8f4ff;
    left: .42rem;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
}

.dash .dash-eq[data-eq-style="5"] .dash-eq__signature {
    background: rgba(18, 22, 12, .9);
    border-color: #ffb347;
    bottom: .3rem;
    color: #ffe8c8;
    left: 50%;
    right: auto;
    top: auto;
    transform: translateX(-50%);
}