/* menuder.css */
:root {
	--menuder-bg: #4747ba;
	--menuder-border-color: #8585d1;
	--menuder-border-width: 2px 0; /* GG initialement 2px */
	/* GG #4747ba #aeaee1 #aeaee1 #aeaee1*/
	--menuder-child-first-border-color: #4747ba #aeaee1 #aeaee1 #aeaee1; 
	--menuder-child-first-border-width: 2px 2px 2px 2px;
	--menuder-child-first-bg: #8585d1;

	--menuder-child-next-border-color: #aeaee1;
	--menuder-child-next-border-width: 2px;
	--menuder-child-next-bg: #aeaee1;

	--menuder-caret-color: currentColor;
	--menuder-link-padding-y: 0.25em;
	--menuder-link-padding-x: 0.75em;
	--menuder-caret-bottom-img:url('img/chevron-bottom-xx.svg');
	--menuder-caret-right-img:url('img/chevron-right-xx.svg');
	--menuder-caret-width:1em;
	--menuder-caret-height:1.5em;
}

.menuder-container {}
.menuder {
	background-color: var(--menuder-bg,#4747ba);
	/* border: solid var(--menuder-border-color, #8585d1); */
	/* border-width: var(--menuder-border-width,1px 0); */
}

.menuder ul,
.menu-items.menuder,
.menuder .menu-items {
	width: 90%; /* GG 100%  */
	
	margin: 0;
	padding: 0;
	list-style: none;
	display: inline-flex; /* GG + EG */
	flex-wrap: nowrap; 
	border: none;
	/* justify-content: flex-start; GG */
	align-items: stretch;
	flex-direction: row; /* GG initialement row */
	font-weight: bold;
}

.menuder li,
.menuder .menu-items__item {
	min-width: 10vw; /* EG GG 15vw*/
	text-align: left;
	padding: 0;
	position: relative;
}

.menuder a,
.menuder .menu-items__lien  {
	display: flex; /* GG */
	/* flex-wrap: wrap; */
	height: 100%;
	padding-top: var(--menuder-link-padding-y, 0.25em);
	padding-bottom: var(--menuder-link-padding-y, 0.25em);
	padding-left: var(--menuder-link-padding-x, 0.75em);
	padding-right: var(--menuder-link-padding-x, 0.75em);
	text-decoration: none;
}

.menuder a.daddy,
.menuder .menu-items__lien:not(:last-child){
	padding-right: 1.5em;
}
.menuder a.daddy:before,
.menuder .menu-items__lien:not(:last-child):before  {
	content:'';
	display: block; /* GG initialement block */
	position: absolute;
	top:var(--menuder-link-padding-y, 0.25em);
	right: var(--menuder-link-padding-x, 0.75em);
	width: var(--menuder-caret-width,1em);
	height: var(--menuder-caret-height,1.5em);

	background-color:var(--menuder-caret-color,currentColor);
	-webkit-mask-image: var(--menuder-caret-bottom-img);
	mask-image: var(--menuder-caret-bottom-img);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;

	transition: transform ease 0.25s;
}

.menuder li li a.daddy:before,
.menuder .menu-items__item .menu-items__item .menu-items__lien:before {
	-webkit-mask-image: var(--menuder-caret-right-img);
	mask-image: var(--menuder-caret-right-img);
}

 .menuder li,
.menuder .menu-items__item {
	min-width: 10vw; /*  EG GG 15vw*/
	text-align: left;
	padding: 0;
	position: relative;
} 

.menuder li ul,
.menuder .menu-items__item .menu-items {
	flex-direction: column;

	position: absolute;
	left: -999rem;
	height: auto;
	width: auto;
	min-width: 100%;
	max-width: 20em;
	margin: 0;
	font-weight: normal;
	z-index:100;

	border-style:solid;
	background-color: var(--menuder-child-first-bg,#4747ba);
	border-color: var(--menuder-child-first-border-color, #aeaee1);
	border-width: var(--menuder-child-first-border-width, 2px);
}

.menuder li li ul,
.menuder .menu-items__item .menu-items__item .menu-items {
	background-color: var(--menuder-child-next-bg,#4747ba);
	border-color: var(--menuder-child-next-border-color, #aeaee1);
	border-width: var(--menuder-child-next-border-width, 2px);
}


.menuder li:hover>ul,
.menuder li:focus-within>ul,
.menuder .menu-items__item:hover>.menu-items,
.menuder .menu-items__item:focus-within>.menu-items {
	left: auto;
}

.menuder li:hover>a:before,
.menuder li:focus-within>a:before,
.menuder .menu-items__item:hover>.menu-items__lien:before,
.menuder .menu-items__item:focus-within>.menu-items__lien:before {
	transform: rotate(180deg);
	opacity: 0.5;
}


.menuder li li:hover>ul,
.menuder li li:focus-within>ul,
.menuder .menu-items__item .menu-items__item:hover>.menu-items,
.menuder .menu-items__item .menu-items__item:focus-within>.menu-items {
	left: 100%;
	top:0;
}