.nav-bar { display: none;} /* background-color: rgba(000, 000, 000, 0.7);*/
header nav {line-height:1.5;background-color: ;z-index: 999999;width: 100%;max-width:850px;margin: auto;}
/*header nav ul li a {font-size:2.2rem;}*/
header nav ul { list-style: none; }
header nav ul li {float: left;position: relative;  margin: auto;}
header nav:after {content: "";display: block;clear: both;}
header nav ul li a {font-size: 2.rem ;color: #fff;display: block;padding: 20px 18px;text-decoration: none;}
header nav ul li:hover { background: ##939597; }
header nav ul li:hover i, header nav ul li a:hover { color:#F5DF4D }
header nav ul li i { margin-right: 10px; }
header nav ul li:hover .children { display: block; }
header nav ul li .children { overflow:auto;display: none;background: #32628A;position: absolute;width: 150%;z-index: 1000;}
header nav ul li .children span { display: none; }
header nav ul li .children li {display: block;width: 100%; border-bottom: 1px solid #ffffff99;}
header nav ul li .children li a { text-align:center; padding: 8px 0;}
header nav ul li .fa-angle-down {position: relative;top: 3px;font-size:2.rem;}
.current{color:yellow}

/* == ACCESSIBILITÉ CLAVIER MENU == */

header nav ul li:focus-within > .children { display: block;}
/* Focus visible propre */
header nav a:focus-visible {outline: 2px dashed darkorange;outline-offset: 3px;}

/*====================
	responsive nav style
====================*/

@media all and (max-width: 960px) {
	.nav-bar {display: block;width: 100%;position: fixed;top: 0;background: #32628A;height:68px;}
	.nav-bar span {float: left;font-size: 20px;padding: 20px;color: #fff;}
	.nav-bar .fa-bars {display: block;padding: 26px;color: #fff;overflow: hidden;font-size: 26px;font-weight: bold;text-decoration: none;float: right;
	 -webkit-transition: 0.5s ease-in-out;-moz-transition: 0.5s ease-in-out;-o-transition: 0.5s ease-in-out;}
	.nav-bar .fa-bars:hover { 
	 -ms-transform: rotate(90deg); /* IE 9 */
	 transform: rotate(90deg);}

	header nav {width: 50%;height: auto;position: fixed;right: 100%;top : 63px;overflow: auto;height: 100%;background-color: #32628A; -webkit-backdrop-filter: blur(5px);backdrop-filter: blur(5px);}
	header nav ul li {display: block;border-bottom: 1px solid #bbbbbb;width: 100%;}
	header nav ul li a {  font-size: 1.8rem ; display: block;   padding: 10px 8px;}
	header nav ul li .children {background:#4c79ff;width: 100%;position: relative;overflow: hidden;display: none;}
	header nav ul li:hover .children { display: none; }
	header nav ul li ul li:first-child { border-top: 1px solid #ffffff99; }
	header nav ul li .children span {display: inline-block;margin-right: 10px;}
	header nav ul li .children li a { text-align:left;margin-left: 5px;  padding: 10px; font-size: 1.8rem ; }
	header nav ul li .fa-angle-down {position: relative;top: 3px;}
}