/************************************************************/
/*DOCTYPE css 2.1 avec recommandation //W3C//DTD XHTML 1.0 */
/*Refonte du 01/10/2020									  */
/*Styles de la zone des menus principaux 			     */
/********************************************************/

/*****************************************************/
/* Définition des marqueurs de police sur les liens */
/**1************************************************/
a:link {
	text-decoration: none;
}

a:visited {
	text-decoration: none;
}

a:active {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

/*2*************************************************/
#menu_TextS {
	color: #F7AF00;
}
/*3*************************************************/
#menu_TextNSP {
	color: #996600;
}
/*4*************************************************/
#menu_TextNSP:hover {
	color: #2f2b21;
}
/*5*************************************************/
#menu_TextNSG {
	color: #352f23;
}
/*6*************************************************/
#menu_Bar {
	color: #2F2B21;
}

/*******************************************************/
/* Définition du menu principal présentation à gauche */
/* Contenu dans Body Gauche - visible en phase 2     */
/*1**************************************************/
#BGmenu_p2 {
	margin-top: 70px;
	width: 166px;
	text-align: left;
	letter-spacing: 3pt;
	font-size: 14pt;
	font-family: MyriadPro, MyriadPro-Regular;
	font-style: normal;
	font-weight: normal;
}
@media screen and (min-width: 410px) {
	#BGmenu_p2 {
		margin-top: 80px;
	}
}
@media screen and (min-width: 650px) {
	#BGmenu_p2 {
		margin-top: 100px;
	}
}
@media screen and (min-width: 800px) {
	#BGmenu_p2 {
		margin-top: 125px;
	}
}
@media screen and (min-width: 950px){
	#BGmenu_p2 {
		display: none;
	}
}

/****************************************************/
/* Définition du menu principal présentation haute */
/* Container dans Body Droit 						  */
/*1***********************************************/
.BDmenup {
	background-color: white;
	width: auto;
}
	
/*2*************************************************/
.menugv {
	background-color: #2F2B21;
    text-align: left;
}

/****************************************************/
/* Définition du menu principal présentation haute */
/* Visible en phase 1                             */
/*1***********************************************/
#BDmenu_p1 	{
	width: 100%;
	text-align: center;
	letter-spacing: 3pt;
	font-size: 14pt;	
	font-family: MyriadPro, MyriadPro-Regular;
	font-style: normal;
	font-weight: normal;
	min-width: 950px;
}
@media screen and (max-width: 950px) {
	#BDmenu_p1 {
		height: 30px;
		width:30px;
		display: none;
	}
}

/****************************************************/
/* Définition du menu principal présentation haute */
/* Visible en phase 2                             */
/*1***********************************************/
#BDmenu_p2 {
	height: 30px;
	width: 30px;
	text-align: left;
}
@media screen and (min-width: 950px) {
	#BDmenu_p2 {
		display: none;
	}
}

/*2***********************************************/
#BDmenup_img-menup2 {
	text-align: left;
	width: 30px;
	border: 0px;
	margin-top: -2px;
	margin-bottom: -8px;
	margin-left: 4px;
	margin-right: 4px;
}

.menu-icon{
    position: relative;
    top: -14px;
    left:-7px;
	width: 54px;
    height: 54px;
    transition: transform 0.5s;
}

.menu-icon span{
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 28px;
	height: 3px;
	background-color: black;
    transform: translateX(-50%) translateY(-50%);
    transition: background 0.5s, transform 0.5s;
}
/*pseudo élément before*/
.menu-icon span::before {
	content:'';
	position: absolute;
	top: 0;
    left: 0;
	display: block;
	width: 28px;
	height: 3px;
	background-color: black;
	transform: translateY(-7px);
	transition: transform 0.5s;
}
/*pseudo élément after*/
.menu-icon span::after{
	content:'';
	position: absolute;
	top: 0;
    left: 0;
	display: block;
	width: 28px;
	height: 3px;
	background-color: black;
	transform: translateY(7px);
	transition: transform 0.5s;
}

.menu-icon:hover span::before{
	transform: translateY(-9px);
}

.menu-icon:hover span::after{
	transform: translateY(9px);
}

.menu-icon.is-opened {
    transform: rotate(180deg);
}

.menu-icon.is-opened span{
    background: transparent;
}
.menu-icon.is-opened span::before{
    transform-origin: 50% 50%;
    transform: translateY(0) rotate(45deg);
}
.menu-icon.is-opened span::after{
    transform-origin: 50% 50%;
    transform: translateY(0) rotate(-45deg);
}