:root {
	--clr-hover: hsl(39, 97%, 59%);
	--height: 3rem;
/*	--shadow: 0 0 1em hsl(0, 0%, 66%);*/
}

#menu {
	z-index: 1;

	margin: 0;
	padding: 10px;
	display: flex;
	gap: 1.2em;
	justify-content: center;
	list-style-type: none;
	/*background: var(--clr);*/
	background: hsl(205, 53%, 50%);
	 opacity : 0.9;
	box-shadow: var(--shadow);
}

#menu > li {
	position: relative;
	font-family: sans-serif;
	
}

#menu button:hover {
	color: var(--clr-hover);
	border-bottom-color: var(--clr-hover);
}

#menu button {
	color: white;
	background: transparent;
	border: none;
	border-bottom: 3px solid transparent;
	height: var(--height);
	cursor: pointer;
	font-size: 2em;
	/*font-weight: bold;*/
	transition: all .1s;
}

#menu > li:hover ul {
	display: flex;
	flex-direction: column;
	position: absolute;
	top: var(--height);
	box-shadow: var(--shadow);
	font-size: 1.5em;
}

#menu ul {
	display: none;
	z-index: 1020;
	padding: 0;
	margin: 0;
	min-width: 15em;
	list-style-type: none;
	/*background: linear-gradient(0deg, hsl(from var(--clr) h 61% 41% / .68), var(--clr));
	backdrop-filter: blur(1px);*/
	background: hsl(205, 53%, 50%);
	border-radius: 0 0 5px 5px;
}

#menu ul li:last-child {
	padding-bottom: .1em;
}

#menu ul li {
	border-left: 3px solid transparent;
	padding: .3em 1em;
	transition: all .1s;
}

#menu ul li:hover {
	border-left-color: var(--clr-hover);
}

#menu ul li:hover a {
	color: var(--clr-hover);
}

#menu .highlight a {
	/**/text-shadow: 0 0 10px yellow;
	font-weight: bold;


}

#menu a:visited,
#menu a:link {
	color: white;
	text-decoration: none;
	transition: all .1s;
}

#submenu {
	display: flex;
	justify-content: space-between;
}

#submenu * {
	border: none;
	font-weight: bold;
}

#submenu *::before {
	vertical-align: text-top;
	padding-right: .5em;
	font-size: 1.4em;
}

#submenu a:link {
	text-decoration: none;
}

#add_view.add::before {
	content: '\e145';
}

#add_view.view::before {
	content: '\e8b6';
}

#login::before {
	content: '\e0da';
}
#bouton_menu
{
    display: none;
	
}

 /* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
} 

 /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 1430px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
  #menu {
	z-index: 1;
	/*position: absolute;*/
	top: 10px;
} 
  
  
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  
  #menu {
	z-index: 1;
	position: absolute;
	top: 10px;
} 


/* Style the header with a grey background and some padding */
.header {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 20px 10px;
}

/* Style the header links */
.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

/* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
.header a.logo {
  font-size: 25px;
  font-weight: bold;
 
}

/* Change the background color on mouse-over */
.header a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active/current link*/
.header a.active {
  background-color: dodgerblue;
  color: white;
}

/* Float the link section to the right */
.header-right {
  float: right;
}

/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */
@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  .header-right {
    float: none;
  }
  
    #menu {
	z-index: 1;
	position: absolute;
	top: 10px;
} 

}