/* ===================================================================
 *  ARABESQUE — CARDS SPOTIFY + LECTEUR
 *  Uniquement des classes préfixées .sp-* et #sp-* → aucune collision.
 *  Les cards gardent le style .EntryCard de base.css / main.css.
 * =================================================================== */

/* card en cours de chargement : léger fondu */
.sp-card.is-loading .image {
    background-color: #111;
    animation: sp-pulse 1.2s ease-in-out infinite;
}

@keyframes sp-pulse {
    0%, 100% { opacity: .55; }
    50%      { opacity: .9; }
}

/* pas de cover : carré noir avec le logo en filigrane */
.sp-card.sp-no-cover .image {
    background: #000 url("../images/logo.png") center / 40% auto no-repeat;
}

/* morceau en cours de lecture */
.sp-card.is-active .image-wrapper {
    outline: 3px solid #26ff00;
    outline-offset: -3px;
}

.sp-card.is-active .play-button {
    opacity: 1;
}

.sp-card {
    cursor: pointer;
}


/* -------------------------------------------------------------------
 *  Lecteur Spotify dans #footer-player
 * ------------------------------------------------------------------- */

#footer-player .footer-player-content {
    gap: 10px;
    padding: 8px 10px;
}

#sp-embed {
    flex: 1;
    min-width: 0;
    height: 80px;
}

#sp-embed iframe {
    display: block;
    width: 100%;
    height: 80px;
    border: 0;
    border-radius: 12px;
}

#footer-player #footer-close-btn {
    height: auto;
    margin: 0;
    padding: 0 6px;
    line-height: 1;
    background: none;
    border: 0;
    color: #fff;
}