.audio-player {
    background: #000; /* Fond noir */
    padding: 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 250px;
    position: fixed;
    bottom: 45px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    box-shadow: 0 2px 2px rgba(255, 255, 255, 0.3);
}

.audio-player button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: #F7931A; /* Boutons blancs */
    padding: 5px;
}

.audio-player button:hover {
    color: #ccc;
}

.audio-player input[type="range"] {
    width: 150px; /* Jauge de progression */
    cursor: pointer;
    background: #333; /* Fond de la piste */
    -webkit-appearance: none; /* Désactive le style par défaut */
    border-radius: 5px;
}

.audio-player input[type="range"]#volume {
    width: 50px; /* Jauge de volume plus petite */
    margin-left: 5px;
}

/* Style de la piste (partie non remplie) */
.audio-player input[type="range"]::-webkit-slider-runnable-track {
    background: #333; /* Fond gris foncé */
    height: 5px;
    border-radius: 5px;
}

.audio-player input[type="range"]::-moz-range-track {
    background: #333;
    height: 5px;
    border-radius: 5px;
}

/* Style de la piste (partie remplie) */
.audio-player input[type="range"]::-webkit-slider-runnable-track {
    background: linear-gradient(to right, #f7931a var(--value), #333 var(--value)); /* Orange pour la partie remplie */
	
}

.audio-player input[type="range"] {
    --value: calc(100% * (var(--webkit-value) / 100)); /* Pour Chrome */
}

/* Style du pouce (pointeur de la jauge) */
.audio-player input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    background: #f7931a; /* Pouce orange */
    border-radius: 50%;
    margin-top: -2.5px; /* Centre le pouce sur la piste */
}

.audio-player input[type="range"]::-moz-range-thumb {
    width: 10px;
    height: 10px;
    background: #f7931a; /* Pouce orange */
    border-radius: 50%;
}

.audio-player input[type="range"]:hover::-webkit-slider-thumb {
    background: #fff;
}

.audio-player input[type="range"]:hover::-moz-range-thumb {
    background: #fff;
}