/*
 * Secure Playlist — player styles
 * Accent: #5B21B6 (thème Vincent Artaud)
 */

:root {
    --sp-accent:      #5B21B6;
    --sp-accent-light:#7C3AED;
    --sp-accent-pale: #EDE9FE;
    --sp-accent-mid:  #DDD6FE;
}

.sp-playlist {
    width: 100%;
    max-width: 800px;
    margin: 1.5em 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    box-sizing: border-box;
}

/* -----------------------------------------------------------------------
   Player bar
   --------------------------------------------------------------------- */

.sp-player {
    background: #0f0f1a;
    border-radius: 8px 8px 0 0;
    padding: 12px 20px 10px;
    box-sizing: border-box;
    color: #fff;
}

.sp-player-top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.sp-player-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.sp-artwork {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    background: #1e1e3a;
    display: block;
}
.sp-artwork--placeholder { background: #1e1e3a; }

.sp-track-info { min-width: 0; overflow: hidden; }

.sp-track-title {
    font-size: 0.9em;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
    display: block;
}
.sp-track-artist {
    font-size: 0.78em;
    color: #a0a0c0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    margin-top: 2px;
}

/* Controls */
.sp-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
}

.sp-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #a0a0c0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.15s;
    line-height: 1;
}
.sp-btn:hover { color: #fff; }
.sp-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    display: block;
}

.sp-btn-play {
    background: #fff;
    color: #0f0f1a;
    width: 36px;
    height: 36px;
    padding: 0;
    flex-shrink: 0;
    transition: transform 0.15s, background 0.15s;
}
.sp-btn-play:hover { background: #e0e0e0; transform: scale(1.05); }
.sp-btn-play svg { width: 20px; height: 20px; }

.sp-btn--active { color: var(--sp-accent-light); }
.sp-btn--active:hover { color: var(--sp-accent); }

/* -----------------------------------------------------------------------
   Progress bar
   --------------------------------------------------------------------- */

.sp-progress-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sp-time {
    font-size: 0.7em;
    color: #a0a0c0;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    min-width: 32px;
    user-select: none;
}
.sp-time-current { text-align: right; }
.sp-time-total   { text-align: left; }

.sp-progress {
    flex: 1;
    height: 4px;
    background: #2e2e4e;
    border-radius: 2px;
    position: relative;
    cursor: pointer;
    transition: height 0.1s;
}
.sp-progress:hover { height: 6px; }

.sp-progress-bar {
    height: 100%;
    background: var(--sp-accent-light);
    border-radius: 2px;
    width: 0%;
    position: relative;
}

.sp-progress-bar::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.15s;
}
.sp-progress:hover .sp-progress-bar::after { opacity: 1; }

/* Volume */
.sp-volume {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}
.sp-volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 80px;
    height: 4px;
    background: #2e2e4e;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.sp-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}
.sp-volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    border: none;
}

/* -----------------------------------------------------------------------
   Track list
   --------------------------------------------------------------------- */

.sp-track-list {
    margin: 0;
    padding: 0;
    list-style: none;
    background: #f8f7ff;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}

.sp-track-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 16px;
    cursor: pointer;
    transition: background 0.12s;
    user-select: none;
    box-sizing: border-box;
    color: #4a4a6a;
}
.sp-track-item:hover { background: var(--sp-accent-pale); }
.sp-track-item:focus,
.sp-track-item:focus-visible,
.sp-track-item:active { outline: none; box-shadow: none; }

/* Piste active — dégradé pastel violet */
.sp-track-item--active {
    background: linear-gradient( 90deg, var(--sp-accent-mid) 0%, var(--sp-accent-pale) 100% );
}
.sp-track-item--active .sp-track-name  { color: var(--sp-accent); font-weight: 700; }
.sp-track-item--active .sp-track-by   { color: var(--sp-accent-light); }
.sp-track-item--active .sp-track-num  { color: var(--sp-accent); }

/* Track number / animated bars */
.sp-track-num {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    font-size: 0.82em;
    color: #8888aa;
}

.sp-bars {
    display: none;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
    width: 20px;
}
.sp-bars span {
    display: block;
    width: 3px;
    background: var(--sp-accent);
    border-radius: 1px;
    animation: sp-bar 0.7s ease-in-out infinite alternate;
}
.sp-bars span:nth-child(1) { height: 50%;  animation-delay: 0s; }
.sp-bars span:nth-child(2) { height: 100%; animation-delay: 0.12s; }
.sp-bars span:nth-child(3) { height: 35%;  animation-delay: 0.25s; }

@keyframes sp-bar {
    from { transform: scaleY(0.3); }
    to   { transform: scaleY(1); }
}

.sp-playlist--playing .sp-track-item--active .sp-num-display { display: none; }
.sp-playlist--playing .sp-track-item--active .sp-bars { display: flex; }

.sp-track-details {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.sp-track-name {
    font-size: 0.9em;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #1a1a2e;
    display: block;
}
.sp-track-by {
    font-size: 0.78em;
    color: #7a7a9a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    margin-top: 2px;
}
.sp-track-duration {
    flex-shrink: 0;
    font-size: 0.78em;
    color: #8888aa;
    font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */

@media (max-width: 600px) {
    .sp-player-top { grid-template-columns: 1fr auto; }
    .sp-volume { display: none; }
    .sp-time { min-width: 24px; font-size: 0.65em; }
    .sp-artwork { width: 36px; height: 36px; }
}