.player-card {
--player-primary: #ff4757;
--player-card-bg: rgba(255, 255, 255, 0.08);
--player-text: #f8fafc;
--player-text-secondary: #94a3b8;
/* Design du bloc */
background: var(--player-card-bg);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 24px;
padding: 32px;
width: 100%;
max-width: 350px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
text-align: center;
box-sizing: border-box;
font-family: 'Segoe UI', system-ui, sans-serif;
color: var(--player-text);
margin: 20px auto; /* Centre le lecteur dans son conteneur */
}
.player-card * {
box-sizing: border-box;
}
/* Jaquette */
.player-card .cover-art {
width: 180px;
height: 180px;
background: linear-gradient(45deg, #f43f5e, #ed64a6);
border-radius: 50%;
margin: 0 auto 24px;
box-shadow: 0 10px 25px rgba(244, 63, 94, 0.3);
display: flex;
align-items: center;
justify-content: center;
}
.player-card .cover-art.playing {
animation: rotateCover 12s linear infinite;
}
.player-card .cover-art i {
font-size: 56px;
color: #fff;
}
/* Infos Track */
.player-card .track-info h2 {
font-size: 1.3rem;
margin: 0 0 6px 0;
font-weight: 600;
}
.player-card .track-info p {
color: var(--player-text-secondary);
font-size: 0.9rem;
margin: 0 0 24px 0;
}
/* Progression */
.player-card .progress-container {
width: 100%;
margin-bottom: 24px;
cursor: pointer;
}
.player-card .progress-bar {
height: 6px;
width: 100%;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
position: relative;
}
.player-card .progress-fill {
height: 100%;
width: 0%;
background: var(--player-primary);
border-radius: 10px;
position: absolute;
top: 0;
left: 0;
}
.player-card .time-stamps {
display: flex;
justify-content: space-between;
font-size: 0.75rem;
color: var(--player-text-secondary);
margin-top: 8px;
}
/* Contrôles */
.player-card .controls {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
.player-card .btn {
background: none;
border: none;
color: var(--player-text);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
padding: 0;
}
.player-card .btn:hover {
color: var(--player-primary);
transform: scale(1.05);
}
.player-card .btn-play {
background: var(--player-text);
color: #0f172a;
width: 50px;
height: 50px;
border-radius: 50%;
}
.player-card .btn-play:hover {
background: var(--player-primary);
color: #fff;
transform: scale(1.1);
}
.player-card .btn i { font-size: 26px; }
.player-card .btn-play i { font-size: 32px; }
@keyframes rotateCover {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}