/* needs styles.css */

#menu {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-shadow: none;
	position: relative;
	z-index: 1000;
	margin: 3px  0px  0px  0px;
	left: 0px;
	background-color: #202020;
	min-height: calc((var(--big-text-height)+var(--huge-text-height))*3/2);
	width: 80vw;
}

#menu, #menu * {
    text-shadow: none !important;
}

#menu li, .submenu li {
	font-size: var(--normal-text-height);
}

#menu ul {
	padding: 0;
	margin: 0;
	list-style-type: none; /* suppression des puces */
}

#menu li {
	display: inline; /* suppression des puces */
	float: left;
	background-color: #202020;
	margin: auto;

	position: relative;
}

#menu li a, #menu li .menu_item {
	display: block;
	color: #C0C0BB;
	text-decoration: none;
	padding: 3px;
	transition: 0.5s ease;
}

#menu li a:hover, #menu li:hover .menu_item {
	color: #FFD733;
}

.chevron {
	display: inline-block;
    transition: 0.5s ease;
	transform: rotate(180deg);
}

#menu li:hover .menu_item .chevron,
#menu li:hover .submenu ~ .menu_item .chevron {
    transition: 0.5s ease;
	transform: rotate(90deg);
}

/*----- Menu principal -----*/

#menu > ul {
	text-align: center; /* alignement du texte du menu */
	/*left: 50%;
	position: relative;*/ /* enlevé dans le cas d'un positionnement in flow */
}

#menu > ul > li {
	padding: 15px;
	background-color: #202020;
}

#menu > ul > li:first-child {
	float: left;
}

#menu > ul > li:last-child {
	float: right;
}

/*----- Menu secondaire -----*/

.submenu {
    display: flex;
    flex-direction: column;
	opacity: 0;
	max-height: 0;
    overflow: hidden;
	background-color: #202020;
	text-align: left;
	padding-left: 0;
	z-index: 10001;
	transition: 
        opacity 0.3s ease 0.1s,
        max-height 0.5s ease;

	position: absolute;
    left: 0;
    top: 100%;
    width: auto;
    min-width: 100%;
    white-space: nowrap;
	padding: 0;
	align-items: flex-start;
}

#menu li:hover .submenu {
    opacity: 1;
    max-height: 300px;
    transition-delay: 0s;
}

#menu > ul > li:hover > ul, .submenu.visible {
    max-height: 20em;
}

.submenu > li {
	float: none ;
	display: block;
	text-align: left;
	padding: 10px 15px;
	margin: 0;
	width: 100%;
}

.submenu > li:last-child {
    padding-bottom: 15px;
}

.submenu > li > a {
	margin : 0;
	padding: 5px 15px;
	display: block;
	width: 100%;
	box-sizing: border-box;
}