/*===== Fiche morceau =====*/
article#FicheMedia { display: block; position: relative; width: 100%; /*background-color: #F5F527;*/} 

	h1.titreMorceau {
		display: block;
		position: relative;
		width: 90%;
		font-size: 2.7em;
		font-family: 'Cantarell',sans-serif;
		color: #f6490f;
		text-align: center;
		font-weight: bold;
		margin: 0 0 1em 0;
		padding: 0 5% 0 5%;
		/*background-color: #D7E6F5;*/
	}
	
	div#FicheImgButton {display: block; position: relative; width: 50%; margin: 0 auto 2em auto; text-align: center; /*background-color: #2AF527;*/}

		div#FicheImgButton img.imgFiche {display: block; position: relative; width: 80%; margin: 0 auto 1em auto;}

		div#zBoutonFiche {
			position: relative;
			display: flex; 
			display: -webkit-flex; /* Safari */
			justify-content: space-between;
			width: 100%; 
			/*background-color: #F527EE;*/
		}

			div#zBoutonFiche button {
				position:relative;
				display: flex;
				display: -webkit-flex; /* Safari */
				justify-content: space-between;
				align-items: center;
				width: 45%;
				padding: 0.25em;
				margin: 0;				
				border: none;
				background-color: #4363ff;
			}
			
			div#zBoutonFiche button:hover {background-color: #16C809;}
			div#zBoutonFiche button:hover span {letter-spacing: 0.2em; transition: 0.5s linear letter-spacing;}
			
			button.btSongLongContent img {display: block; position: relative; margin: 0; width:30%; /*background-color: #0B21E5;*/}
			button.btSongLongContent span {display: block; position: relative; width: 60%; font-size: 1.2em; font-style: italic; color:#ffffff; text-align: center; /*background-color: #D60BE5;*/ }

	div#FicheCadreCarac {display: block; position: relative; width: 100%; margin: 0 auto 2em auto; border: 1px solid #ffffff;}

	div.FicheSousCadre {display: block; position: relative; width: 100%; margin: 0 auto 2em auto; border: 1px solid #ffffff;}
		
		h3.h3DetailMedia { display: block; position: relative; margin: 0; padding:0.5em 0 0.5em 0.5em; background-color: #FFFFFF; color: #000000;}

/*============= GRILLE ACCOMPAGNEMENT =============*/

#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;}


@media screen and (max-width: 992px)
{
	/*Fiche morceau*/
	h1.titreMorceau {

		font-size: 2.1em;

		margin: 0 0 1em 0;

		/*background-color: #D7E6F5;*/
	}
	div#FicheImgButton {width: 75%;}
	
	button.btSongLongContent { flex-direction: column; border-radius: 1em;}
	button.btSongLongContent span {width: 100%;}
	
	/*Grille*/
	#zGrille table.tabGrilleAccomp td {
		width: 20%;
		font-size: 1.5em;
		/*background-color: #95904a;*/	
	}
	
}