.player-container {
display: flex;
align-items: center;
gap: 9px;
width: fit-content;
max-width: 100%;
margin: 0 auto;
padding: 9px 14px;
border-radius: 8px;
border: 1.5px solid color-mix(in srgb, var(--current-bulle-color) 20%, transparent);
background: transparent;
font-family: Arial, sans-serif;
position: relative;
overflow: visible;
flex-wrap: nowrap;
} .play-button {
background: var(--current-bulle-color);
border: none;
width: 30px; height: 30px; min-width: 30px;
border-radius: 6px;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: opacity 0.15s;
flex-shrink: 0;
}
.play-button:hover { opacity: 0.85; }
.play-icon {
width: 14px; height: 14px;
fill: white;
} .progress {
flex: 1 1 80px;
min-width: 0;
width: 120px;
height: 4px;
border: none;
border-radius: 2px;
outline: none;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
background: linear-gradient(
to right,
var(--current-bulle-color) 0%,
var(--current-bulle-color) var(--progress, 0%),
#ddd var(--progress, 0%),
#ddd 100%
);
} .progress::before {
content: attr(data-title);
position: absolute;
bottom: 72%; left: 44px; right: 44px;
font-size: 9px;
color: var(--current-bulle-color);
white-space: nowrap; overflow: hidden;
text-align: center;
opacity: 0.7;
animation-play-state: paused;
} @keyframes scrollTitle {
0%, 20%  { text-indent: 0; }
80%, 100% { text-indent: -100%; }
}
.player-container.playing .progress[data-long-title="true"]::before {
animation: scrollTitle 8s linear infinite;
animation-play-state: running;
}
.progress:hover::before,
.player-container.paused .progress::before {
animation-play-state: paused !important;
} .progress::-webkit-slider-track {
background: #ddd; border-radius: 2px; height: 4px;
}
.progress::-webkit-slider-thumb {
-webkit-appearance: none;
width: 11px; height: 11px;
border-radius: 50%;
background: var(--current-bulle-color);
cursor: pointer;
box-shadow: 0 1px 3px color-mix(in srgb, var(--current-bulle-color) 40%, transparent);
} .progress::-moz-range-track {
background: #ddd; border-radius: 2px; height: 4px; border: none;
}
.progress::-moz-range-progress {
background: var(--current-bulle-color); border-radius: 2px; height: 4px;
}
.progress::-moz-range-thumb {
width: 11px; height: 11px;
border-radius: 50%;
background: var(--current-bulle-color);
cursor: pointer; border: none;
} .indication-duree {
display: flex; gap: 2px; align-items: center; flex-shrink: 0;
}
.currentTime, .duration {
font-size: 11px;
color: var(--current-bulle-color);
min-width: 28px;
text-align: center;
} .player-sep {
width: 1px; height: 16px;
background: #ddd;
flex-shrink: 0;
} .tempo-container {
position: relative;
display: flex; flex-direction: column; align-items: center;
}
.tempo-button {
background: none;
border: none;
padding: 2px 0;
cursor: pointer;
font-size: 9px; font-weight: bold;
color: #835fc5;
white-space: nowrap; line-height: 1;
transition: opacity 0.15s;
}
.tempo-button::before { display: none; }
.tempo-button[data-tempo]::after { content: attr(data-tempo); }
.tempo-button:hover { opacity: 0.7; }
.tempo-button svg { display: none; }
.tempo-slider-container {
position: absolute;
top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
background: white;
border: 1.5px solid #835fc5; border-radius: 8px;
padding: 12px 14px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
display: none; flex-direction: column; align-items: center; gap: 8px;
z-index: 1000; min-width: 280px;
}
.tempo-slider-container::before {
content: '';
position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
border: 7px solid transparent; border-bottom-color: #835fc5;
}
.tempo-slider {
width: 230px; height: 4px;
border-radius: 2px; outline: none; cursor: pointer;
-webkit-appearance: none; appearance: none;
background: linear-gradient(
to right,
#835fc5 0%, #835fc5 var(--tempo-progress, 33.33%),
#ddd var(--tempo-progress, 33.33%), #ddd 100%
);
}
.tempo-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 14px; height: 14px;
border-radius: 50%; background: #835fc5; cursor: pointer;
}
.tempo-slider::-moz-range-track {
background: #ddd; border-radius: 2px; height: 4px; border: none;
}
.tempo-slider::-moz-range-progress {
background: #835fc5; border-radius: 2px; height: 4px;
}
.tempo-slider::-moz-range-thumb {
width: 14px; height: 14px;
border-radius: 50%; background: #835fc5; cursor: pointer; border: none;
}
.tempo-graduations {
display: flex; justify-content: space-between;
width: 100%; font-size: 10px; color: #666;
}
.tempo-graduations span {
cursor: pointer; padding: 2px 3px; border-radius: 3px;
font-weight: 500; text-align: center; flex: 1;
transition: all 0.15s;
}
.tempo-graduations span:hover  { background: #f3f0fc; color: #835fc5; }
.tempo-graduations span.active { background: #835fc5; color: white; font-weight: bold; } .volume-container {
position: relative;
display: flex; flex-direction: column; align-items: center;
}
.volume-button {
background: none;
border: none;
padding: 2px 0;
cursor: pointer;
font-size: 9px; font-weight: bold;
color: #4a9a3a;
white-space: nowrap; line-height: 1;
transition: opacity 0.15s;
}
.volume-button::before { display: none; }
.volume-button[data-volume]::after { content: attr(data-volume); }
.volume-button:hover { opacity: 0.7; }
.volume-button svg { display: none; }
.volume-button.muted { color: #e53e3e; }
.volume-button.muted::after { text-decoration: line-through; }
.volume-slider-container {
position: absolute;
top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
background: white;
border: 1.5px solid #4a9a3a; border-radius: 8px;
padding: 12px 14px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
display: none; flex-direction: column; align-items: center; gap: 8px;
z-index: 1000; min-width: 200px;
}
.volume-slider-container::before {
content: '';
position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
border: 7px solid transparent; border-bottom-color: #4a9a3a;
}
.volume-slider {
width: 150px; height: 4px;
border-radius: 2px; outline: none; cursor: pointer;
-webkit-appearance: none; appearance: none;
background: linear-gradient(
to right,
#4a9a3a 0%, #4a9a3a var(--volume, 100%),
#ddd var(--volume, 100%), #ddd 100%
);
}
.volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 14px; height: 14px;
border-radius: 50%; background: #4a9a3a; cursor: pointer;
}
.volume-slider::-moz-range-track {
background: #ddd; border-radius: 2px; height: 4px; border: none;
}
.volume-slider::-moz-range-progress {
background: #4a9a3a; border-radius: 2px; height: 4px;
}
.volume-slider::-moz-range-thumb {
width: 14px; height: 14px;
border-radius: 50%; background: #4a9a3a; cursor: pointer; border: none;
}
.volume-graduations {
display: flex; justify-content: space-between;
width: 100%; font-size: 10px; color: #666;
}
.volume-graduations span {
cursor: pointer; padding: 2px 3px; border-radius: 3px;
font-weight: 500; text-align: center; flex: 1;
transition: all 0.15s;
}
.volume-graduations span:hover  { background: #f0f7f0; color: #4a9a3a; }
.volume-graduations span.active { background: #4a9a3a; color: white; font-weight: bold; } .loop-button {
width: 22px; height: 22px; border-radius: 4px;
background: transparent;
border: 1px solid #ddd;
display: flex; align-items: center; justify-content: center;
cursor: pointer; flex-shrink: 0;
transition: border-color 0.15s, background 0.15s;
}
.loop-button svg {
width: 11px; height: 11px;
fill: #bbb;
transition: fill 0.15s;
}
.loop-button:hover { border-color: var(--current-bulle-color); }
.loop-button:hover svg { fill: var(--current-bulle-color); }
.loop-button.active {
background: var(--current-bulle-color);
border-color: var(--current-bulle-color);
}
.loop-button.active svg { fill: white; } .download-button {
width: 22px; height: 22px; border-radius: 4px;
background: transparent;
border: 1px solid #ddd;
display: flex; align-items: center; justify-content: center;
cursor: pointer; flex-shrink: 0;
transition: border-color 0.15s;
}
.download-button:hover { border-color: #d02855; }
.download-button svg {
width: 11px; height: 11px;
fill: #bbb;
transition: fill 0.15s;
}
.download-button:hover svg { fill: #d02855; } .play-button:focus,
.tempo-button:focus,
.volume-button:focus,
.loop-button:focus,
.download-button:focus {
outline: 2px solid var(--current-bulle-color);
outline-offset: 2px;
} audio.player { display: none; } .groupe-audio {
position: sticky;
top: 0;
z-index: 9999;
background-color: var(--current-bulle-bg-audio);
border-top: 2px solid var(--current-bulle-color);
border-bottom: 2px solid var(--current-bulle-color);
margin: 1rem -2rem;
overflow: visible;
} .groupe-audio::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-image: url(//eac78.fr/wp-content/themes/eac78-theme/assets/images/onde2.png);
background-repeat: repeat-x;
background-position: center;
background-size: 36rem auto;
opacity: 0.5;
pointer-events: none;
mix-blend-mode: overlay;
z-index: -1;
} @media (max-width: 768px) {
.player-container { gap: 6px; padding: 8px 10px; }
.progress { width: 80px; }
.currentTime, .duration { font-size: 10px; min-width: 24px; }
.tempo-slider-container { min-width: 240px; }
.tempo-slider { width: 190px; }
.volume-slider-container { min-width: 170px; }
.volume-slider { width: 120px; }
}
@media (max-width: 480px) {
.player-container { gap: 5px; padding: 7px 8px; }
.play-button { width: 26px; height: 26px; min-width: 26px; }
.play-icon { width: 12px; height: 12px; }
.progress { width: 50px; }
.currentTime, .duration { font-size: 9px; min-width: 20px; }
.tempo-slider-container { min-width: 200px; }
.tempo-slider { width: 160px; }
.volume-slider-container { min-width: 160px; }
.volume-slider { width: 100px; }
}