/******************************/
/* Mobile menu
/******************************/


#mobilemenu {
	
	--wp--custom--color--default--background : var(--wp--preset--color--bleu);
	--wp--custom--color--default--text : var(--wp--preset--color--blanc); 
	--wp--custom--color--default--accent : var(--wp--preset--color--blanc);
	--wp--custom--color--default--reverse : var(--wp--preset--color--bleu);
	--wp--custom--color--default--text-filter : var(--wp--custom--filter--blanc);
	--wp--custom--color--default--accent-filter : var(--wp--custom--filter--blanc);
	--wp--custom--color--default--reverse-filter: var(--wp--custom--filter--bleu);
	--timing : 0.3s;
	--horizontal-spacing : 10rem;
	
	box-sizing: border-box;
	border: none; 
	background: none;
	position: relative;
	
	
	padding-right: var(--wp--style--root--padding-right);
	padding-left: var(--wp--style--root--padding-left);
	padding-block: 2rem;
	width: 100%;
	max-width: 1920px;
	height: 100%;
	max-height: 48rem;
	
	color: var(--wp--custom--color--default--text);
	
	&::backdrop {
		background: rgba(255,255,255,0.8);
	}
	
	& .dialog-close {
		position: absolute;
		top: 2rem;
		right: 2rem;
		border: none;
		background: none;
		color: var(--wp--preset--color--rouge);
		font-size:  var(--wp--preset--font-size--medium-large);
		cursor: pointer;
		&:hover {
			color: var(--wp--preset--color--jaune);
		}
	}
	
	& .mobile-inner {
		overflow: clip;
		display: grid;
		gap : var(--horizontal-spacing);
		background-color: var(--wp--custom--color--default--background);
		padding-inline-end : var(--horizontal-spacing);
		height: 100%;
		
		border-radius: 2rem 20rem  2rem 20rem;
		grid-template-columns: auto 22rem max-content;
		
		& > figure {
			width: 100%;
			height: 100%;
			position: relative;
			& img {
				position: absolute;
				inset: 0;
				object-fit: cover;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				width: 100%;
				height: 100%;
			}
		}
		
	}
	
	& :is(nav, .sub-menu)  {
		list-style: none; 
		padding-inline-start: 0; 
		line-height: 1.1;
		display: flex;
		flex-direction: column;
		gap: .75rem;
		
	}
	
	& :is( nav )  {
		padding-block: 2rem;
		align-self: center;
	}
	& :is(.sub-menu) { 
		margin-block-start: 1rem;
	}
	

	
	
	&  .menu-item:is(:hover, .current-menu-item, .current_page_ancestor) > a  {
		text-decoration: none;
		color: var(--wp--preset--color--jaune)!important; 
	}
	

	& .mobile-main  {
	
		gap: 2rem;
	
		&  > .menu-item > a {
	
			font-size: var(--wp--preset--font-size--x-large);
			font-weight: 700;
			font-family: var(--wp--preset--font-family--altivo);
		}
	
		& .sub-menu .menu-item > a {
		
			font-size: var(--wp--preset--font-size--medium);
			font-weight: 600;
		}
	}
	
	& .mobile-utility  {
		
		&  > .menu-item > a {
		
			font-size: var(--wp--preset--font-size--medium-large);
			font-weight: 600;
		}
		
		
	}
	
	/*
	transition: display var(--timing) allow-discrete, overlay var(--timing) allow-discrete;	
	animation: fadeOut var(--timing) forwards;

	&::backdrop {
		animation: backdropFadeOut var(--timing) forwards;
	}
	
	&:popover-open {
		animation: fadeIn var(--timing) forwards;
		&::backdrop {
			animation: backdropFadeIn var(--timing) forwards;
		}
	}
	*/
}

body.single-cke_activites #mobilemenu .menu-item:is(.cke_activites) > a  {color: var(--wp--preset--color--jaune)!important; }
body.single-cke_carrieres #mobilemenu .menu-item:is(.cke_carrieres) > a  {color: var(--wp--preset--color--jaune)!important; }
body.single-cke_actualites #mobilemenu  .menu-item:is(.cke_actualites) > a  {color: var(--wp--preset--color--jaune)!important; }

/*
.mobile-nav  {
	padding: 0;
	list-style: none;
}
.mobile-nav .menu-item  {
	margin-block-end: 0.5em;
}
.mobile-nav .menu-item a {
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--swirl-brown);
}
.mobile-nav .menu-item a:after {
	display: inline-block;
	content: '';
	width: 40px;
	height: auto;
	aspect-ratio: 3 / 2;
	background: url(../images/arrow.svg) no-repeat center;
	background-size: 30px auto;
	filter: var(--wp--custom--color--filter--pampas-white);
	opacity: 1;
	translate: 0 2px;
	opacity: 0;
	transition: all ease-in-out 0.3s;
}
	
.mobile-nav .menu-item:hover a,
.mobile-nav .current-menu-item a ,
body.single-cke_blog .mobile-nav .menu-item.cke_blog a  {
	color: var(--wp--preset--color--pampas-white);
}



.mobile-nav .menu-item:hover a:after  {
	opacity: 1;
}

.dialog-close  {
	position: absolute;
	top : 2rem;
	right: 2rem;
	background: none;
	border: none;
	font-size : var(--wp--preset--font-size--large);
	cursor: pointer;
}

*/
/* Keyframes for dialog and popover elements */
@keyframes fadeIn {
  from { opacity: 0; translate: 100% 0}
  to { opacity: 1; translate: 0 0 }
}
@keyframes fadeOut {
  from { opacity: 1; translate: 0 0 }
  to { opacity: 0; translate: 100% 0 }
}

/* Keyframes for the backdrop pseudo-element */
@keyframes backdropFadeIn {
  from { background: hsl(0 0% 0% / 0%) }
  to { background: hsl(0 0% 0% / 50%) }
}
@keyframes backdropFadeOut {
  from { background: hsl(0 0% 0% / 50%) }
  to { background: hsl(0 0% 0% / 0%) }
}


@media (width <= 1800px) {
	#mobilemenu {
		--horizontal-spacing : 6rem;
	}
}

@media (width <= 1460px) {
	#mobilemenu {
		--horizontal-spacing : 3rem;
	}
}

@media (width <= 1180px) {
	#mobilemenu {
		--horizontal-spacing : 4rem;
		& .mobile-inner  {
			border-radius: 2rem 20rem  2rem 20rem;
			grid-template-columns: 22rem auto;
			padding-inline: 12rem;
		}
		& .mobile-inner  > figure {
			display: none;
		}
	}
}

@media (width <= 1040px) {
	#mobilemenu {
		--horizontal-spacing : 4rem;
		& .mobile-inner  {
			border-radius: 2rem 12rem  2rem 12rem;
			grid-template-columns: 1fr 1fr;
			padding-inline: var(--horizontal-spacing);
		}
		& .mobile-inner  > figure {
			display: none;
		}
	}
}

@media (width <= 940px) {
	#mobilemenu {
		& .mobile-main  > .menu-item > a {
	
				font-size: var(--wp--preset--font-size--medium-large);
				font-weight: 700;
				font-family: var(--wp--preset--font-family--altivo);
		
	
		}	
		& .mobile-utility  > .menu-item > a {
		
			font-size: var(--wp--preset--font-size--medium-large);
			font-weight: 600;
		
		
		}
	}
}

@media (width <= 740px) {
	#mobilemenu {
	
		--horizontal-spacing : 4rem;
	max-height: none;
		& .mobile-inner  {
			border-radius: 2rem;
			display: flex;
			flex-direction: column;
			gap: 1rem;
			padding-block: 3rem;
		
			& nav {
				padding-block: 0;
				width: 100%;
				gap: 1rem;
			}	
	}
	& .mobile-inner  > figure {
		display: none;
	}
	
	& .mobile-utility  > .menu-item > a {
	
		font-family: var(--wp--preset--font-family--altivo);
		font-weight: 600;
	
	
	}
}
}

@media (height <= 740px) {

	#mobilemenu {
		

	
		& :is(nav, .sub-menu)  {
			gap: .5rem;
		}
	
		& :is( nav )  {
			padding-block: 1rem;
		}

		& .mobile-main  {
	
			gap: 1rem;
	
			&  > .menu-item > a {
	
			font-size: var(--wp--preset--font-size--medium-large);
			font-weight: 700;
			font-family: var(--wp--preset--font-family--altivo);
		}
	
		& .sub-menu .menu-item > a {
		
			font-size: var(--wp--preset--font-size--medium);
			font-weight: 600;
		}
	}
	
	& .mobile-utility  {
		
		&  > .menu-item > a {
		
			font-size: var(--wp--preset--font-size--medium-large);
			font-weight: 600;
		}
		
		
	}

}

}
	
/*

@media (height <= 1024px) {
	:is(.site-header) r :is(.utility-nav, .main-nav)  {
		gap: var(--wp--preset--spacing--10)!important;
	}
}

@media (width <= 960px) {
	:is(.site-header)  .utility-nav {
		display: none;
	}

	:is(.site-header)  .main-nav .menu-item {
		display: none;
	}
	
	:is(.site-header)  .main-nav label {
		display: initial;
	}
	
	:is(.site-header)  .main-nav  {
		font-size: var(--wp--preset--font-size--x-large);
	}
}

:is(.mobilemenu, .mobilemenu--overlay)  {
	display: none;
}



:is(.mobilemenu) {
	position: fixed;
	right: 0;
	top:var(--wp--style--block-gap);
	bottom: var(--wp--style--block-gap);

	z-index: 12;
	margin: 0;
	overflow-y: auto;
	overflow-x: clip;
	border-radius: var(--wp--custom--radius) 0 0 var(--wp--custom--radius);
	translate: 100% 0;
	transition: all ease-in-out 0.3s;
}

:is(.mobilemenu) nav  {
	position: relative;
}
:is(.mobilemenu) nav label  {
	position: absolute;
	top: -1rem;
	right:0;
}

:is(.mobilemenu) nav a  {
	font-weight: 700;
	text-decoration: none;
}

:is(.mobilemenu) nav :is(.menu-item, label)  {
	color: var(--wp--preset--color--sib-bleu);
}








:is(.mobilemenu--overlay)  {
	cursor: pointer;
	margin: 0;
	padding: 0;
	position: fixed;
	inset: 0;
	z-index: 11;
	background: rgba(0,0,0,.5);
	pointer-events: none;
	opacity: 0;
	transition: all ease-in-out 0.3s;
}

@media (width <= 960px) {
	:is(.mobilemenu, .mobilemenu--overlay) {
		display: initial;
	}

	#menu-toggle:checked ~ .mobilemenu  {
		translate: 0 0;
	}
	
	#menu-toggle:checked ~ .mobilemenu--overlay  {
		pointer-events: all;
		opacity: 1;
	}
}
*/