#lecteur_accomp {display: block; position: relative; width: 100%; padding:0; margin: 0; /*background-color: #f6490f;*/}
#lecteur_accomp button {cursor: pointer;}
#lecteur_accomp button:hover {background-color: #000000;}

button.btfullscreen {display: block; position: absolute; border: none; border-radius: 0 0 0.5em 0.5em; padding: 0.5em; background-color: #4363ff; color: #FFFFFF;}

#zSelecteur {
	position: relative;
	width: 100%;
	padding: 0;
	margin:0;
}

#zSelecteur h2 {
	margin: 0 0 0.5em 0;
	font-weight: normal;
	font-style: italic;
	padding: 0.25em 5% 0.25em 5%;
	border-bottom: 5px double #b2ab57;
}

#zAccomp {
	position: relative;
	width: 80%;
}



#zAudio {
	position: fixed;
	top:0;
	right:0;
	
	display: block; 
	width: 25%; 
	margin: 0;
	padding: 0.5em;
	background-color: rgb(21,21,21);
	overflow: hidden;
	z-index: 2;
}



/*============= audioTitleFrame =============*/

#audioTitleFrame h3 {display: none; text-align: center; font-family: 'Aaargh',"Comic Sans MS",cursive;}

#audioTitleFrame h4 {
	display: block;
	position: relative;
	width: 90%;
	margin: 0.5em 0 0.5em 0;
	padding: 0 2% 0 0;
	color: #FFFFFF;
	/*line-height: 1.5em;*/
	/*min-height: 3em;*/
	
	text-align: left;
	font-style: italic;
	font-size: 1.1em;
	border: none;
	text-shadow: 2px 2px 3px #f6490f;
	/*background-color: #555655;*/
}

#audioTitleFrame p.songInfo{
	margin: 0;
	padding: 0 0 0 0.3em;
	color: #FFFFFF;
	text-align: left;
	font-size: 1.15em;
}

/*============= audioCoverFrame =============*/

#audioCoverFrame { display: none; position: relative; text-align: center; }
#audioCoverFrame img#imgPlayerCover {display: block; position: relative; width: 35%; height: auto; margin: 0 auto 1.5em auto; border-radius: 20px;}

/*============= Commande et défilement =============*/

#audioCommand {
	width: 100%;
	/*background-color: #ed40fb;*/
	padding: 0;
	margin: 0;
}



div.zoneButtonDuree {position: relative; display: flex; justify-content: left; align-items: center; height: 3em; width: 100%; padding: 0; margin: 0; /*background-color: #b2ab57;*/}
div.zbtPlayStop {position:relative; display: flex; justify-content: space-between; width: 20%; margin-right: 2%}

div#BarTimers {display: block; position: relative; width: 78%;}

#cadreProgress {position: relative; width: 96%; height: 0.5em; margin: 0.5em 1% 0.5em 1%; background-color: #555655; border-radius: 0.25em; overflow: hidden;}
#progressBar {position: absolute; height: 1em; background-color: #4363ff; width: 0;}

div.cadreDuree {display: flex; position: relative; justify-content: space-between; width: 98%; margin:0 1% 0 1%; line-height: 2em; color: #FFFFFF;}
span#infoProgress{display: block; position: relative; width: 20%; margin: 0; text-align: left; font-size: 0.8em; /*background-color: #CF3E21;*/}
span#infoProgressTotale{display: none; position: relative; width: 20%; margin: 0; text-align: right; font-size: 0.8em; /*background-color: #2152CF;*/}



#zoneCommandProgress {
	display: flex; 
	position: relative; 
	width: 100%; 
	margin: 0;
	padding:0; 
	justify-content: left;
	align-items: center;
	flex-direction: row;
    flex-wrap: wrap;
	/*background-color: #FFFFFF;*/
}

#zAudio button {
	display: block;
	position: relative;
	width: 48%;
	font-size: 1.3em;
	border-radius: 15%;
	background-color: #4363ff;
	border: none;
	color: #FFFFFF;
	padding: 0.25em;
}

#zAudio button#btplay:hover {color: #000000; background-color:#2cfe2f;}

#zAudio button#btstop:hover {color: #000000; background-color:rgb(255,0,0);}

#zAudio button.CtrlPause {background-color: #fc8d09;}
#zAudio button.CtrlPlay {background-color: #2cfe2f; color: #000000;}

#zAudio img {
	display: block;
	margin: 0;
	padding: 0;
	height: 5em;
}

#zAudio audio {
	width: 100%;
	line-height: 50px;
	margin: auto;
	background: transparent;
}

#zGrille {
	position: relative;
	/*background-color: #e2fc05;*/
	padding: 1em 0 1em 0;
}

#zGrille {
	
}

h2.titre_accompagnement { text-align: center; margin-top: 1.5em; font-size: 3.2em; text-shadow: 0.075em 0.075em 0.2em #4363ff;  }
p.comHarmoni {font-weight: bold; font-size: 1em;}

h3.sstitreAccomp {
	text-align: center;
	width: 60%;
	margin: auto;
	font-size: 1.5em;
	padding: 0.5em 0 0.5em 0;
	border-bottom: 1px solid #95904a;
}

#zGrille table.tabGrilleAccomp {
	position: relative;
	width: 90%;
	border: none;
	
	
}
#zGrille table.tabGrilleAccomp tr {

}

#zGrille table.tabGrilleAccomp td, #zGrille table.tabGrilleAccomp th { border: 1px solid #4363ff;}

#zGrille table.tabGrilleAccomp td {
	width: 20%;
	font-size: 3em;
	/*background-color: #95904a;*/	
}

#zGrille table.tabGrilleAccomp th {
	width: 20%;
	font-size: 1em;	
	color: #FFFFFF;
	background-color: #4363ff;
}


#zGrille table.tabGrilleAccomp td.selected {color: #FFFFFF; background-color: #000000;}

						
#zdetail {
	position: relative;

}

span.repetition {color: #000000; font-size: 1.5em;}


/*========= Format playlist =========*/
img#ChevronSongList {display: block; position: absolute; top: 0; right: 0; height: 2em; cursor: pointer; transform: rotate(180deg); /*background-color: #2cfe2f;*/}			
img#ChevronSongList.rotate {transform: rotate(0deg);}			


div#SongList {display: none; position: relative; margin: 1em 0 0 0;}

div#SongList.visible {display: block;}

div#SongList p {display: block; position: relative; margin: 0; padding: 0;}

div#SongList  p.SongListTitle { display: block; position: relative; width: 100%; font-size: 1.2em; margin: 0; border-bottom: 2px solid #FFFF00; /*background-color: #F527E4;*/ }

div#SlidePlaylist {display: block; position: relative; width: 100%;  max-height: 16em; margin: 0; padding: 0; overflow-y: scroll; border-bottom: 2px solid #FFFF00;}

div#SlidePlaylist.visible {display: block;}

div#SlidePlaylist p.PLSongTitle { padding: 0 0 0 2%; margin: 0; line-height: 2em; cursor: pointer; }

div#SlidePlaylist p.PLSongTitle:hover { color: #000000; background-color:#FFFF00; }

div#SlidePlaylist p.PLSongTitleActive { color: #000000; background-color:#2cfe2f; }









@media screen and (max-width: 992px)
{
	/*Lecteur*/
	div#zAudio {width: 96%; padding-left: 2%; padding-right: 2%; top: auto; bottom: 0; border-top: 2px solid #f6490f; z-index: 10;}
			
	div#zAudio.maxi {
		position: fixed;
		top:0;
		left:0;
		width: 100%; 
		height: 100dvh;
		min-height: 100dvh;
		max-height: 100dvh;
		overflow: hidden;
		margin: 0;
		padding: 0;
		border-bottom: 5px solid #4363ff;
		box-sizing: border-box;
		z-index: 10;
	}
	
	div#zAudio.maxi div#CadrePlayer {display: block; position: relative; min-height: 43dvh; height: 43dvh; max-height: 43dvh; overflow: hidden; }
	
	/*===== Cadre de titre =====*/
	div#audioTitleFrame {display: block; position: relative;}
		/*Title frame mini*/
		div#zAudio #audioTitleFrame h3 {display: none;}
		div#zAudio #audioTitleFrame h4 {margin: 0.5em 0 1em 0; text-align: left;}
		
		/*Title frame maxi*/
		div#zAudio.maxi #audioTitleFrame h3 {display: block;}
		div#zAudio.maxi #audioTitleFrame h4 {
			width: 90%;
			margin: 2em auto 0.5em auto;
			padding: 0;
			color: #FFFFFF;			
			text-align: center;
			font-size: 1.1em;
			line-height: 1.2em;
			border: none;
			text-shadow: none;
			/*background-color: #555655;*/
		}
	/*===== Cadre image =====*/	
	div#zAudio.maxi div#audioCoverFrame {display: block; position: relative; margin-top: 1.5em;}
	/*===== Cadre command et defilement =====*/
	div#audioCommand {}
		
	/*===== Cadre playlist =====*/
	div#SongList {
		display: none;
		position: relative;
	}
	
	div#SongList.visible {
		display: block;
		position: relative;
		height: 57dvh;
		min-height: 57dvh;
		max-height: 57dvh;
		margin: 0;
		padding: 0;
	}
	div#SlidePlaylist {border: none; min-height: 50dvh;}
	div#SlidePlaylist p.PLSongTitle:hover { color: #FFFFFF; background-color:rgb(21,21,21); }
	div#SlidePlaylist p.PLSongTitle:active, div#SlidePlaylist p.PLSongTitle:visited { color: #FFFFFF; background-color:#2cfe2f; }
	
	
}