@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700&display=swap');


.menu-container {
	width: 100%;
	/*height:80px;    */
	background: none;
	color:#ffffff;
}

.menu-mobile {
	display: none;
	padding: 20px;
}

.menu-mobile:after {
	content: "\f394";
	font-family: "Ionicons";
	font-size: 2.5rem;
	padding: 0;
	float: right;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-25%);
	-ms-transform: translateY(-25%);
	transform: translateY(-25%);
}

.menu-dropdown-icon:before {
	content: "\f489";
	font-family: "Ionicons";
	display: none;
	cursor: pointer;
	float: right;
	padding: 0em 2em 0em 2em;
	background: #fff;
	color: #333;
}

nav.menu> ul {
	font-family: 'Roboto','open_sanslight",Arial,sans-serif;
	font-size: 20px;
	font-weight: 600;
	margin: 0 auto;
	list-style: none;
	padding: 0;
	position: relative;
	height:80px;
	display: inline-block;
	/* IF nav.menuposition=relative -> ul = container width, ELSE ul = 100% width */
	box-sizing: border-box;
}

nav.menu> ul:before,
nav.menu> ul:after {
	content: "";
	display: table;
}

nav.menu> ul:after {
	clear: both;
}

nav.menu> ul > li {   float: left;    background: none;    height:94px;    padding: 0px 1px 0px 1px;    margin: 0;    display:block;    line-height:94px;     border-right:0px solid #ffffff;    position:relative;    font-size:20px;    letter-spacing:1px;}
nav.menu> ul > li.sep { display:none;  float: left;    background: none;    height:60px;    padding: 15px 0px 0px 0px;    margin: 0;       line-height:80px;     border-right:0px solid #ffffff;    position:relative;    font-size:15px;    letter-spacing:1px;}


nav.menu> ul > li > span {
	text-decoration: none;
	/*padding: 1.5em 3em;*/
	padding: 0px 8px 0px 8px;
	vertical-align:middle;
	display:inline-block;
	line-height:1em;
	text-align:center;
}

nav.menu> ul > li > span.fl {
	padding: 0px 0px 0px 20px;
}
.flbas0 {position:relative;padding:0px 20px 0px 10px;}

nav.menu> ul > li > span a, nav.menu> ul > li > span a:visited {
	color: #ffffff;
	text-decoration: none;
	line-height:20px;
	font-weight: 100;
	font-style:normal;
	font-size:18px;
}


nav.menu> ul > li:hover {
	background: none ;
}
nav.menu> ul > li:hover a, nav.menu> ul > li:hover a:visited, nav.menu> ul > li.actif a, nav.menu> ul > li.actif a:visited {color:#fe8503;font-weight: 100;font-style:normal;}

nav.menu> ul > li > ul {
	display: none;
	background: #ffffff;
	min-width:200px;
	/*width:700px;*/
	box-shadow: 1px 1px 12px #555;
	padding: 10px;
	position: absolute;
	z-index: 99;
	left: 0;
	margin:0;
	list-style: none;
	/*box-sizing: border-box;*/
	border: 0px solid #18c4ff;
	top: 70px;
}
nav.menu> ul > li > ul .col {
	/*width:32%;*/
	width:350px;
}

nav.menu> ul > li > ul:before,
nav.menu> ul > li > ul:after {
	content: "";
	display: table;
}

nav.menu> ul > li > ul:after {
	clear: both;
}

nav.menu> ul > li > ul > li {
	line-height:normal;
	margin: 0;
	list-style: none;

	background: none;
	float: left;
	padding: 0px 0px 0px 0px;
}

nav.menu> ul > li > ul > li:hover {
	background: #ffffff;
}

nav.menu> ul > li > ul > li a {
	color: #000000;
	padding: .2em 0;
	width: 95%;
	display: block;
	border-bottom: 0px solid #ccc;
	font-style:normal;
	text-align: left;
}

nav.menu> ul > li > ul > li > ul {
	display: block;
	padding: 0;
	margin: 10px 0 0;
	list-style: none;
	box-sizing: border-box;
}

nav.menu> ul > li > ul > li > ul:before,
nav.menu> ul > li > ul > li > ul:after {
	content: "";
	display: table;
}

nav.menu> ul > li > ul > li > ul:after {
	clear: both;
}

nav.menu> ul > li > ul > li > ul > li {
	list-style: none;
	/*background:url('/picts/css/pucesmenu.png') no-repeat;*/
	background:none;
	background-position:0px 0px;
	float: left;
	width: 100%;
	padding: 0px 0px 0px 10px ;
	margin: 0;
	font-size: .8em;
}

nav.menu> ul > li > ul > li > ul > li a {
}

nav.menu> ul > li:hover > ul > li > ul > li a,nav.menu> ul > li:hover > ul > li > ul > li a:visited {
	border: 0;
	color:black;
	text-align: left;
}

nav.menu> ul > li:hover > ul > li > ul > li a:hover{
	border: 0;
	color:#003f58;
	text-align: left;
}

nav.menu> ul > li:hover > ul > li > ul > li.niv2 a,nav.menu> ul > li:hover > ul > li > ul > li.niv2 a:visited {
	border: 0;
	font-weight:normal;
}

nav.menu> ul > li > ul.normal-sub {
	width: 200px;
	left: auto;
	padding: 0px 0px;
}

nav.menu> ul > li > ul.normal-sub > li {
	width: 100%;
}

nav.menu> ul > li > ul.normal-sub > li a {
	border: 0;
	padding: 5px 0px 5px 20px;
}


/* ��������������������������������������������������
Mobile style's
�������������������������������������������������� */

@media only screen and (max-width: 700px) {
	.menu-container {
		width: 0%;
		height: 100%;
		position:fixed;
		top:0px;
	}
	.menu-mobile {
		display: block;
	}
	.menu-dropdown-icon:before {
		display: block;
	}

	nav.menu{position:relative;height:100%;}
	nav.menu> ul {
		overflow-y:auto;
		overflow-x:hidden;
		width:100%;
		height:100%;
		position:absolute;
		display: none;
	}
	nav.menu> ul > li {
		background:#000001;

		width: 95%;
		float: none;
		display: block;
		height:auto;
	}
	nav.menu> ul > li a {
		/*padding: 1.5em;*/
		width: 100%;
		display: block;
	}
	nav.menu> ul > li span a, nav.menu> ul > li span a:visited {
		color:#ffffff;
	 }
	nav.menu> ul > li > ul {
		position: relative;
	}
	nav.menu> ul > li > ul.normal-sub {
		position: relative;
		width: 100%;
		top:0px;
	}
	nav.menu> ul > li > ul > li {
		float: none;
		width: 100%;
		margin-top: 20px;
	}
	nav.menu> ul > li > ul > li:first-child {
		margin: 0;
	}
	nav.menu> ul > li > ul > li > ul {
		position: relative;
	}
	nav.menu> ul > li > ul > li > ul > li {
		float: none;
	}
	nav.menu.show-on-mobile {
		display: block;
		z-index:2000;
	}

	nav.menu> ul > li > ul {top: 1px;}

	nav.menu> ul > li:hover {
		background:#000001;
	}
	nav.menu> ul > li:hover a, nav.menu> ul > li:hover a:visited{
		color:white;
		text-align: left;
	}

	/* pp221114 - gestion du lien racine */
	nav.menu > ul > li#racine {
		width: fit-content;
		margin: 0 35%;
	}
}



/* ��������������������������������������������������
Mobile style's
�������������������������������������������������� */

@media only screen and (max-width: 700px) {
	.menu-container {
		width: 0%;
		height: 100%;
		position:fixed;
		top:0px;
	}
	.menu-mobile {
		display: block;
	}
	.menu-dropdown-icon:before {
		display: block;
	}

	nav.menu {position:relative;height:100%;z-index:3000;}
	nav.menu > ul {
		overflow-y:auto;
		overflow-x:hidden;
		width:100%;
		height:100%;
		position:absolute;
		display: none;
		background:#000000;
	}
	nav.menu > ul > li {
		background:#000000;
		text-align:left;
		width: 95%;
		float: none;
		display: block;
		height:auto;
		line-height:40px;
	}
	nav.menu > ul > li a {
		/*padding: 1.5em;*/
		width: 100%;
		display: block;
	}
	nav.menu > ul > li span a, .menu > ul > li span a:visited {
		color:#ffffff;
	}
	nav.menu > ul > li > ul {
		position: relative;
	}
	nav.menu > ul > li > ul.normal-sub {
		position: relative;
		width: 100%;
		top:0px;
	}
	nav.menu > ul > li > ul > li {
		float: none;
		width: 100%;
		margin-top: 20px;
	}
	nav.menu > ul > li > ul > li:first-child {
		margin: 0;
	}
	nav.menu > ul > li > ul > li > ul {
		position: relative;
	}
	nav.menu > ul > li > ul > li > ul > li {
		float: none;
	}
	nav.menu .show-on-mobile {
		display: block;
		z-index:2000;
	}

	nav.menu > ul > li > ul {top: 1px;}

	nav.menu > ul > li:hover {
		background:#000000;
	}
	nav.menu > ul > li:hover a, .menu > ul > li:hover a:visited{color:white;}

	/* profil */
	nav.menu > ul > #profil {width:inherit;margin-top:10px;}
}