/*
 *  wpm-menu - CSS pou wpm_nav_menu() - avec navbar flexible
 */
 
 /*
:root{
	
--menu-color:white;
--menu-bgcolor:#585858;
--menu-a-hover-color:red;
--menu-a-hover-bgcolor:#888;
--menu-border-color:white;

--menu-color:white;
--menu-bgcolor:#cc1e1e;
--menu-a-hover-color:black;
--menu-a-hover-bgcolor:pink;
--menu-border-color:white;
}
*/
/* les blocs ----------------------------------------------------------- */
#navigation {}
#navbar {display:block; width:100%;}
#icon-menu-ouvrir, #icon-menu-fermer {display:none;position:absolute; z-index:1001; right:40px;}
 
 /* ---------- COSMETIQUE ----------------------------------------------- */
.navigation { background-color:var(--menu-bgcolor);}
.navigation, .navigation a, .navigation a:hover, .navigation a:active {font-family:arial; font-size:14px; color:var(--menu-color); font-weight:normal; text-decoration:none; display:inline-block;}
.navigation a:hover {color:var(--menu-a-hover-color); background-color:var(--menu-a-hover-bgcolor);}
.navigation, .icon, .navbar .submenu, .navbar .dropdown-content {background-color:var(--menu-bgcolor);}

/* peut-être : display:flex; justify-content:center ou flex-end; s'il n'est pas déjà dans un container flex */
.navigation {display:flex; justify-content:center; width:100%; max-width:100%; min-height:30px; padding:0 20px;}
.navigation ul {margin:0; padding:0 10px; list-style-type:none;}
.navigation .icon {float:left; border:var(--menu-border-color) 1px solid; height:26px; width:26px; text-align:center; padding:3px; margin:2px; border-radius:2px; font-weight:bold;}

.navbar {display:flex; padding:0; align-items:center; justify-content:center; flex-grow:1; flex-wrap:wrap; width:100%; max-width:100%;}
.navbar .menu-item {padding:0 5px; text-align:center; }
.navbar a, .navbar .dropdown .dropbtn {padding:3px 3px; background-color:transparent; margin:3px 3px;}
.navbar a, .navbar .dropdown, .navbar .submenu a, .navbar .submenu .dropdown {text-align:left;}
.navbar .dropdown, .navbar .submenu a, .navbar .submenu .dropdown {min-width:120px;}
.navbar .dropdown-content a {width:100%; border-bottom:var(--menu-border-color) 1px solid;}

/* -menu dropdown --------------------- */
.navbar {overflow:hidden;}
.navbar .dropdown {overflow:hidden; padding:0; margin:0; text-align:center;}
.navbar .dropdown .dropbtn {border:none; outline:none; margin:0; padding:0; text-transform:none; font-weight:inherit;}
.navbar .dropdown-content {display:none; position:absolute; z-index:1001; min-width: 150px; border:var(--menu-border-color) 1px solid; border-bottom:var(--menu-border-color) 3px solid; border-right:var(--menu-border-color) 2px solid; padding-bottom:30px;-box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}

/* -gestion du 2ème niveau de submenu -- */
.navbar .submenu .dropdown {min-width:150px;}
.navbar .dropdown-content .submenu {position:relative; margin-left:5px;  width:auto; height:auto;}
.navbar .dropdown .dropdown-content, .navbar .dropdown .dropdown-content .submenu .dropdown .dropdown-content {display:none;}
.navbar .dropdown:hover .dropdown-content, .navbar .dropdown .dropdown-content .submenu .dropdown:hover .dropdown-content {display:block;}

/* --- le menu colonne ------------------------------------------------- */
@media ( max-width:700px ) {  
	#navbar {display:none;}
	.navigation {position:relative;}
	.navbar {display:block; position:absolute; z-index:1001; top:30px; left:0; padding-left:20px; width:100%; height:500px; background-color:var(--menu-bgcolor);}
	.navbar .dropdown-content {position:relative; border:0; padding-bottom:0;}
	.navbar .menu-item, .navbar .menu-item .dropdown, .navbar .menu-item .dropdown .dropbtn {text-align:left; width:100%;}
	.navbar .menu-item{border-top:var(--menu-border-color) 1px solid;}
	.navbar .dropdown, .navbar .submenu a, .navbar .submenu .dropdown { min-width:160px;}	
	.navbar a, .navbar .dropdown-content a {width:100%; border-bottom:none;}
	.navbar .dropdown .dropdown-content, .navbar .icon  {margin-left:20px;}
	#icon-menu-ouvrir {display:block;}
	#icon-menu-fermer {display:none;}
}