/*
Pour personaliser les couleurs du player, ajoutez dans votre CSS :
.mejs-audio-wrapper-skin-retroplayer {
	--player-main-color: #c41558;
	--player-bg-color: #ddd;
	--player-bg-hover-color: #fff;
	--player-bg-mute-color: #ccc;
}

ou simplement
.mejs-audio-wrapper-skin-retroplayer {
	font-size:1.5em;
	color:purple;
}
*/

.mejs-audio-wrapper-skin-retroplayer {
	min-width:20em;
	max-width:100%;
	height:3em !important;
}

.mejs-audio-wrapper-skin-retroplayer > audio{
	height:3em !important;
	width: 100% !important;
	background:#1b1b1b;
	opacity: 75%;
}


.mejs__retroplayer {
	height:3em !important;
}

.mejs__retroplayer .mejs__controls {
	height:3em !important;
	border: 0.125em solid var(--player-main-color,currentColor);
	background: #eee;
}
.mejs__retroplayer .mejs__button button svg {
	visibility: hidden;
}

.mejs__retroplayer .mejs__playpause-button {
	font-size: inherit;
	position: absolute;
	left: 50%;
	top:1em;
	margin-left: -1em;
	width: 2em;
	height: 2em;
}
.mejs__retroplayer .mejs__playpause-button button {
	color:inherit;
	border:0.125em solid transparent;
	border-radius: 50%;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-size: inherit;
	background: rgba(255,255,255,0.33);
}

.mejs__retroplayer .mejs__playpause-button button:after {
	content:'';
	display:block;
	position:absolute;
	top:-0.125em;
	left:-0.125em;
	right: -0.125em;
	bottom:-0.125em;
	background-color:var(--player-main-color,currentColor);
	-webkit-mask-image: url(img/controls-retroplayer.svg);
	mask-image: url(img/controls-retroplayer.svg);
	-webkit-mask-size: 4em 4em;
	mask-size: 4em 4em;
	-webkit-mask-position: right top;
	mask-position: right top;
}

.mejs__retroplayer .mejs__playpause-button button:hover:after {
	filter: brightness(0.8);
}

.mejs__retroplayer .mejs__playpause-button.mejs__pause button:after {
	-webkit-mask-position: left top;
	mask-position: left top;
}
.mejs__retroplayer .mejs__playpause-button button:hover {
	background-color:var(--player-bg-hover-color,#fff);
	border-color:var(--player-main-color,currentColor);
}

.mejs__retroplayer .mejs__volume-button {
	font-size: inherit;
	position: absolute;
	left: 50%;
	top:1.25em;
	margin-left: 2em;
	width: 1.5em;
	height: 1.5em;
}
.mejs__retroplayer .mejs__volume-button button {
	color:inherit;
	border:2px solid transparent;
	border-radius: 50%;
	font-size: inherit;
	background:transparent;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.mejs__retroplayer .mejs__volume-button button:after {
	content:'';
	display:block;
	position:absolute;
	top:-0.09375em;
	left:-0.09375em;
	right: -0.09375em;
	bottom:-0.09375em;
	background-color:var(--player-main-color,currentColor);
	-webkit-mask-image: url(img/controls-retroplayer.svg);
	mask-image: url(img/controls-retroplayer.svg);
	-webkit-mask-size: 3em 3em;
	mask-size: 3em 3em;
	-webkit-mask-position: right top;
	mask-position: right bottom;
}

.mejs__retroplayer .mejs__volume-button button:hover {
	background-color: var(--player-bg-hover-color,#fff);
	border-color: var(--player-bg-hover-color,#fff);
}

.mejs__retroplayer .mejs__volume-button button:hover:after {
	filter: brightness(0.8);
}

.mejs__retroplayer .mejs__volume-button.mejs__unmute button:after {
	background-color:var(--player-bg-mute-color, #ccc);
	-webkit-mask-position: left bottom;
	mask-position: left bottom;
}

.mejs__retroplayer .mejs__horizontal-volume-slider {
	font-size: inherit;
	color:inherit;
	position: absolute;
	left: 50%;
	top:1.25em;
	height: 1.5em;
	margin-left: 3.75em;
}
.mejs__retroplayer .mejs__horizontal-volume-slider:hover {
	background: var(--player-bg-hover-color,#fff);
}
.mejs__retroplayer .mejs__horizontal-volume-slider .mejs__horizontal-volume-total {
	top:50%;
	width: 100%;
	background: var(--player-bg-mute-color, #ccc);
	font-size: inherit;
	height: 0.5em;
	margin-top: -0.25em;
}
.mejs__retroplayer .mejs__horizontal-volume-slider .mejs__horizontal-volume-current {
	font-size: inherit;
	height: 100%;
	background: var(--player-main-color,currentColor);

}

.mejs__retroplayer .mejs__time-rail {
	position: absolute;
	margin: 0;
	padding: 0;
	top:0.25em;
	left: 1em;
	right: 1em;
	width: auto;
	height: 1em;
	font-size: inherit;
}

.mejs__retroplayer .mejs__duration-container {
	color:inherit;
	font-size: inherit;
	position: absolute;
	right: 1em;
	top:1.25em;
	margin: 0;
	padding: 0;
	height: 1em;
	width: auto;
}
.mejs__retroplayer .mejs__duration-container .mejs__duration {
	display: block;
	text-align: right;
	font-size: 0.75em;
	height: 100%;
	line-height: 1.25em;
	width: auto;
	color: var(--player-main-color,currentColor);
}

.mejs__retroplayer .mejs__currenttime-container {
	color:inherit;
	font-size: inherit;
	position: absolute;
	left: 1em;
	top:1.25em;
	margin: 0;
	padding: 0;
	height: 1em;
	width: auto;
}
.mejs__retroplayer .mejs__currenttime-container .mejs__currenttime {
	display: block;
	text-align: left;
	font-size: 0.75em;
	height: 100%;
	line-height: 1.25em;
	width: auto;
	color: var(--player-main-color,currentColor);
}

.mejs__retroplayer .mejs__time-slider {
	margin-top: 0;
	background: transparent;
	position: relative;
	font-size: inherit;
	height: 100%;
}
.mejs__retroplayer .mejs__time-slider::before {
	content:'';
	display: block;
	position: absolute;
	top:50%;
	left: 0;
	right: 0;
	height: 0.125em;
	margin-top: -0.0625em;
	background: var(--player-main-color,currentColor);
}

.mejs__retroplayer .mejs__time-handle {
    border: 0;
    cursor: pointer;
    left: 0;
		top:0;
		width: 0.375em;
		height: 1em;
    position: absolute;
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
    z-index: 11;
}

.mejs__retroplayer .mejs__time-handle-content {
	position: absolute;
	top:50%;
	margin-top: -0.375em;
	left:-0.375em;
	display: block;
	width: 0.75em;
	height: 0.75em;
	border:0.125em solid var(--player-main-color,currentColor);
	background: var(--player-bg-hover-color,#fff);
	border-radius: 50%;
	-webkit-transform: none !important;
			-ms-transform: none !important;
					transform: none !important;
}

.mejs__retroplayer .mejs__time-slider .mejs__time-current{
	background: var(--player-main-color,currentColor);
	height: 0.25em;
	top:50%;
	margin-top:-0.125em;
}

.mejs__retroplayer .mejs__time-slider .mejs__time-loaded {
	background: hsla(0,0%,100%,.4);
	height: 0.25em;
	top:50%;
	margin-top:-0.125em;
}

.mejs__retroplayer .mejs__time-slider .mejs__time-hovered {
	background: var(--player-main-color,currentColor);
	opacity: 0.5;
	height: 0.25em;
	top:50%;
	margin-top:-0.125em;
}
.mejs__retroplayer .mejs__time-slider .mejs__time-hovered.negative {
	background: var(--player-bg-hover-color,#fff);
}

.mejs__retroplayer .mejs__controls .mejs__time-float {
	font-size: 0.625em;
	width:4em;
	height:1.8em !important;
	border:0;
	margin-bottom:0;
	background-color:var(--player-bg-color,#ddd);
}

.mejs__retroplayer .mejs__controls .mejs__time-float .mejs__time-float-corner {
	border-top-color:var(--player-bg-color,#ddd);
}
.mejs__retroplayer .mejs__controls .mejs__time-float .mejs__time-float-current {
	font-size:1em;
	width:100%;
	text-align:center;
	height:100%;
	line-height:1.8em;
	margin:0;
}