:root {
    --bg: #0f111a;
    --accent: var(--mapBgColor);
    --text: #ffffff;
}

.wp-site-blocks:has(.player-bar.active){
	padding-bottom: 100px;
}
.player-bar {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: var(--bg);
    color: var(--text);
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.4s ease;
    z-index: 9999;
}

.player-bar.active { transform: translateY(0); }

/* Barre de progression massive */
.player-bar .progress-area {
    width: 100%;
    height: 10px;
    background: rgba(255,255,255,0.1);
}

 .player-bar .progress-bar {
	position: relative;
    height: 100%;
    width: 0%;
    background: var(--accent);
    pointer-events: none;
}

.player-bar .progress-bar::after {
	content: '';
	width: 6px;
	height: 16px;
	background-color: var(--accent);
	position: absolute;
	right: 0;
	top: -4px;
}

.player-bar .player-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 15px 30px;
}

.player-bar .info, .player-bar .extra { flex: 1; display: flex; align-items: center; }
.player-bar .info { gap: 15px; }
.player-bar .extra { justify-content: flex-end; gap: 20px; }

.player-bar .live-tag {
    background: var(--accent);
    font-size: 10px;
    font-weight: bold;
    padding: 3px 6px;
    border-radius: 3px;
}

.player-bar .meta strong { display: block; font-size: 1rem; }
.player-bar .meta span { font-size: 0.8rem; opacity: 0.6; }

.player-bar .play-trigger {
	position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background: var(--text);
    color: var(--bg);
	
	content: '';
	font-size: 0;
	color: transparent;
}

.player-bar .play-trigger::after {
	content: '';
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height: 100%;
	
	background-color: var(--bg);
	
	mask-image: url("/naiv/assets/icons/play.svg");
	mask-position: 60% center;
	mask-repeat: no-repeat;
	mask-size: 60%;
}

.player-bar.playing .play-trigger::after {
	mask-image: url("/naiv/assets/icons/pause.svg");
	mask-position: 50% 50%;
}


.player-bar #volumeControl { 
	position: relative;
	accent-color: var(--accent);
}
.player-bar .volume-container {
	height: 28px;
}
.player-bar .volume-container::before {
	content: '';
	position: relative;
	display: inline-block;
	top: 0;
	left: 0;
	width: 28px;
	height: 24px;
	
	background-color: var(--text);
	
	mask-image: url("/naiv/assets/icons/volume.svg");
	mask-position: 60% center;
	mask-repeat: no-repeat;
	mask-size: 100%;
}


.player-bar #timeDisplay { font-family: monospace; font-size: 0.85rem; }

@media (max-width: 900px) {
	
	.player-bar .meta {
		margin:auto;
		margin-right: 15px;
	}
	.player-bar #trackSubtitle{
		display: none;
	}
	.player-bar .extra {
		display: none;
	}
}


/** AUDIO BTN **/

.nb-audio {
	position: relative;
	z-index: 10;
}

.audio-control {
	/* Reset complet */
	appearance: none;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;

	width: 50px;
	height: 50px;
	position: absolute;

	filter: invert(1);
	background-image: url("/naiv/assets/icons/micro.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto 50px;

	right: 0px;
	transition: transform .15s ease-in-out;
}

.audio-control::after {
	content: 'Écouter';
	position: absolute;
	bottom: 0;
	transform: translate(-50%,100%);
	font-style: italic;
	font-family: naivcursed;
	font-size: 110%;
	color: initial;
}

.audio-control:hover {
	transform: scale(1.2);
}