/* 1. L'Ombre (Arrière-plan) - Style visuel unifié */
.button-shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--btn-shadow-light);
    border-radius: var(--btn-border-radius);
    top: var(--btn-shadow-offset);
    left: var(--btn-shadow-offset);
    z-index: 1;
    transition: opacity 0.2s;
}

/* 2. Le Bouton (Premier plan) - Style visuel unifié basé sur playlist-name */
.control-btn, 
.playlist-name {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--btn-backround-light);
    border: none;
    border-radius: var(--btn-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s, color 0.2s;
    z-index: 2;
    box-sizing: border-box;
    /* Reset des styles par défaut */
    padding: 0;
    margin: 0;
}

/* Padding spécifique pour playlist-name (défini dans playlist-ui.css si nécessaire) */

/* --- États Interactifs (Hover, Active, Clicked) --- */

/* Hover - Style unifié */
/* Le hover ne doit s'appliquer que sur les appareils avec souris (pas les tactiles) */
/* Le hover ne doit pas s'appliquer si le bouton est enfoncé (active/clicked/inactive) */
@media (hover: hover) {
    .control-btn:hover:not(:active):not(.clicked):not(.inactive), 
    .playlist-item:hover .playlist-name:not(:active),
    .playlist-name:hover:not(:active) {
        background-color: var(--primary-color-light) !important;
        color: var(--text-color-dark) !important;
    }
}

/* Active / Clicked (L'effet d'enfoncement) - Style unifié */
/* :active doit avoir la priorité sur .active (classe JS) - même si .active est présent */
.control-btn:active,
.control-btn:active.active,
.control-btn:active.inactive,
.control-btn.clicked,
.control-btn.active-click,
.playlist-name:active,
.playlist-item.active .playlist-name {
    background-color: var(--btn-active-light) !important;
    color: var(--text-color-dark) !important;
    transform: var(--btn-active-transform) !important;
}

/* Masquer l'ombre quand le bouton est enfoncé - Style unifié */
.control-btn:active ~ .button-shadow,
.control-btn.clicked ~ .button-shadow,
.playlist-name:active ~ .button-shadow,
.playlist-item.active .button-shadow {
    opacity: 0;
}

/* État Inactif / Outline (Spécifique à la sélection active persistante) */
.control-btn.inactive,
.playlist-item.active .playlist-name {
    background-color: var(--btn-active-light);
    color: var(--text-color-dark);
    transform: var(--btn-active-transform);
    outline: 2px solid var(--primary-color-light);
    outline-offset: 3px;
    position: relative;
    z-index: 10;
}