.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;
}
.player-container {
display: flex;
width: 354px;
align-items: center;
border-left: 2px solid var(--current-bulle-color);
border-right: 2px solid var(--current-bulle-color);
margin: 0 auto;
gap: 10px;
padding: 15px 5px 10px 5px;
border-radius: 4px;
background-color: #ffffff;
justify-content: center;
font-family: Arial, sans-serif;
position: relative;
} .play-button {
background: var(--current-bulle-color);
border: none;
width: 30px;
height: 30px;
min-width: 30px; border-radius: 3px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s;
flex-shrink: 0; }
.play-button:hover {
background: #0056b3;
}
.play-icon {
width: 20px;
height: 20px;
fill: white;
} .progress {
flex: 1;
max-width: 120px; height: 6px;
background: #ddd;
border: solid 0.5px var(--current-bulle-color);
border-radius: 3px;
outline: none;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.progress::before {
content: attr(data-title);
position: absolute;
bottom: 60%;
left: 38px;
right: 0;
font-size: 10px;
color: var(--current-bulle-color);
padding: 2px 6px;  margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-align: center;
max-width: 54%;
animation-play-state: paused;
} @keyframes scrollTitle {
0% { text-indent: 0; }
20% { text-indent: 0; }
80% { text-indent: -100%; }
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 {
animation-play-state: paused !important;
} .player-container.paused .progress::before {
animation-play-state: paused !important;
} .progress::-webkit-slider-track {
background: #ddd;
border-radius: 3px;
height: 6px;
}
.progress::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--current-bulle-color);
cursor: pointer;
position: relative;
} .progress::-moz-range-track {
background: #ddd;
border-radius: 3px;
height: 6px;
border: none;
}
.progress::-moz-range-progress {
background: var(--current-bulle-color);
border-radius: 3px;
height: 6px;
}
.progress::-moz-range-thumb {
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--current-bulle-color);
cursor: pointer;
border: none;
} .progress {
background: linear-gradient(to right, var(--current-bulle-color) 0%, var(--current-bulle-color) var(--progress, 0%), #ddd var(--progress, 0%), #ddd 100%);
} .currentTime, .duration {
font-size: 12px;
color: var(--current-bulle-color);
min-width: 35px;
text-align: center;
} .tempo-container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.tempo-button {
background: #835fc5;
border: none;
border-radius: 4px;
width: 30px;
height: 30px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s;
position: relative;
}
.tempo-button::before {
content: attr(data-tempo);
position: absolute;
top: -11px;
left: 50%;
transform: translateX(-50%);
font-size: 9px;
font-weight: bold;
color: #6f42c1; padding: 1px 4px;
border-radius: 3px; white-space: nowrap;
pointer-events: none;
}
.tempo-button:hover {
background: #5a359a;
}
.tempo-button svg {
width: 16px;
height: 16px;
fill: white;
}
.tempo-slider-container {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background: white;
border: 2px solid #6f42c1;
border-radius: 8px;
padding: 15px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
display: none;
flex-direction: column;
align-items: center;
gap: 10px;
z-index: 1000;
margin-top: 8px;
min-width: 300px;
}
.tempo-slider-container::before {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border: 8px solid transparent;
border-bottom-color: #6f42c1;
}
.tempo-slider {
width: 250px;
height: 6px;
background: #ddd;
border-radius: 3px;
outline: none;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
} .tempo-slider::-webkit-slider-track {
background: #ddd;
border-radius: 3px;
height: 6px;
}
.tempo-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: #6f42c1;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
} .tempo-slider::-moz-range-track {
background: #ddd;
border-radius: 3px;
height: 6px;
border: none;
}
.tempo-slider::-moz-range-progress {
background: #6f42c1;
border-radius: 3px;
height: 6px;
}
.tempo-slider::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: #6f42c1;
cursor: pointer;
border: none;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
} .tempo-slider {
background: linear-gradient(to right, #6f42c1 0%, #6f42c1 var(--tempo-progress, 33.33%), #ddd var(--tempo-progress, 33.33%), #ddd 100%);
}
.tempo-graduations {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
font-size: 10px;
color: #495057;
margin-top: 5px;
}
.tempo-graduations span {
cursor: pointer;
padding: 2px 4px;
border-radius: 3px;
transition: all 0.2s;
font-weight: 500;
text-align: center;
flex: 1;
}
.tempo-graduations span:hover {
background: #e9ecef;
color: #6f42c1;
}
.tempo-graduations span.active {
background: #6f42c1;
color: white;
font-weight: bold;
} .volume-container {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.volume-button {
background: #56a321;
border: none;
border-radius: 4px;
width: 30px;
height: 30px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s;
position: relative;
}
.volume-button::before {
content: attr(data-volume);
position: absolute;
top: -11px;
left: 50%;
transform: translateX(-50%);
font-size: 9px;
font-weight: bold;
color: #28a745;
padding: 1px 4px;
border-radius: 3px;
white-space: nowrap;
pointer-events: none;
}
.volume-button:hover {
background: #218838;
}
.volume-button svg {
width: 16px;
height: 16px;
fill: white;
} .volume-button.muted svg {
opacity: 0.5;
}
.volume-button.muted::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 2px;
background: #dc3545;
transform: translate(-50%, -50%) rotate(45deg);
border-radius: 1px;
}
.volume-slider-container {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background: white;
border: 2px solid #28a745;
border-radius: 8px;
padding: 15px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
display: none;
flex-direction: column;
align-items: center;
gap: 10px;
z-index: 1000;
margin-top: 8px;
min-width: 200px;
}
.volume-slider-container::before {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border: 8px solid transparent;
border-bottom-color: #28a745;
}
.volume-slider {
width: 150px;
height: 6px;
background: #ddd;
border-radius: 3px;
outline: none;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
} .volume-slider::-webkit-slider-track {
background: #ddd;
border-radius: 3px;
height: 6px;
}
.volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: #28a745;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
} .volume-slider::-moz-range-track {
background: #ddd;
border-radius: 3px;
height: 6px;
border: none;
}
.volume-slider::-moz-range-progress {
background: #28a745;
border-radius: 3px;
height: 6px;
}
.volume-slider::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
background: #28a745;
cursor: pointer;
border: none;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
} .volume-slider {
background: linear-gradient(to right, #28a745 0%, #28a745 var(--volume, 100%), #ddd var(--volume, 100%), #ddd 100%);
}
.volume-graduations {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
font-size: 10px;
color: #495057;
margin-top: 5px;
}
.volume-graduations span {
cursor: pointer;
padding: 2px 4px;
border-radius: 3px;
transition: all 0.2s;
font-weight: 500;
text-align: center;
flex: 1;
}
.volume-graduations span:hover {
background: #e9ecef;
color: #28a745;
}
.volume-graduations span.active {
background: #28a745;
color: white;
font-weight: bold;
} .download-button {
background: #d02855;
border: none;
border-radius: 4px;
width: 30px;
height: 30px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s;
}
.download-button:hover {
background: #B82149;
}
.download-button svg {
width: 16px;
height: 16px;
fill: white;
} audio.player {
display: none;
} @media (max-width: 768px) {
.player-container {
gap: 8px;
width: 284px;
}
.play-button {
width: 25px;
height: 25px;
min-width: 25px;
}
.play-icon {
width: 18px;
height: 18px;
}
.progress {
max-width: 80px; height: 5px;
}
.progress::before {
font-size: 9px;
padding: 1px 4px;
margin-bottom: 3px;
bottom: 63%;
left: 34px;
max-width: 52%;
}
.currentTime, .duration {
font-size: 11px;
min-width: 30px;
}
.tempo-button {
width: 25px;
height: 25px;
}
.tempo-button::before {
top: -10px;
font-size: 8px;
padding: 1px 3px;
}
.tempo-button svg {
width: 14px;
height: 14px;
}
.tempo-slider-container {
padding: 12px;
min-width: 250px;
}
.tempo-slider {
width: 200px;
height: 5px;
}
.tempo-graduations {
font-size: 9px;
}
.volume-button {
width: 25px;
height: 25px;
}
.volume-button::before {
top: -10px;
font-size: 8px;
padding: 1px 3px;
}
.volume-button svg {
width: 14px;
height: 14px;
}
.volume-slider-container {
padding: 12px;
min-width: 180px;
}
.volume-slider {
width: 120px;
height: 5px;
}
.volume-graduations {
font-size: 9px;
}
.download-button {
width: 25px;
height: 25px;
}
.download-button svg {
width: 14px;
height: 14px;
}
} @media (max-width: 480px) {
.player-container {
width: 236px;
gap: 6px;
padding: 8px 6px 4px 8px;
}
.play-button {
width: 22px;
height: 22px;
min-width: 22px;
}
.play-icon {
width: 16px;
height: 16px;
}
.progress {
max-width: 60px; height: 4px;
}
.progress::before {
font-size: 8px;
padding: 1px 3px;
margin-bottom: 2px;
bottom: 63%;
left: 33px;
max-width: 49%;
}
.currentTime, .duration {
font-size: 10px;
min-width: 25px;
}
.tempo-button {
width: 22px;
height: 22px;
}
.tempo-button::before {
top: -9px;
font-size: 7px;
padding: 1px 2px;
}
.tempo-button svg {
width: 12px;
height: 12px;
}
.tempo-slider-container {
padding: 10px;
min-width: 200px;
}
.tempo-slider {
width: 160px;
height: 4px;
}
.tempo-slider::-webkit-slider-thumb {
width: 14px;
height: 14px;
}
.tempo-slider::-moz-range-thumb {
width: 14px;
height: 14px;
}
.tempo-graduations {
font-size: 8px;
}
.volume-button {
width: 22px;
height: 22px;
}
.volume-button::before {
top: -9px;
font-size: 7px;
padding: 1px 2px;
}
.volume-button svg {
width: 12px;
height: 12px;
}
.volume-slider-container {
padding: 10px;
min-width: 160px;
}
.volume-slider {
width: 100px;
height: 4px;
}
.volume-slider::-webkit-slider-thumb {
width: 14px;
height: 14px;
}
.volume-slider::-moz-range-thumb {
width: 14px;
height: 14px;
}
.volume-graduations {
font-size: 8px;
}
.download-button {
width: 22px;
height: 22px;
}
.download-button svg {
width: 12px;
height: 12px;
}
}