.mobile--menu {
	position: fixed;
	width: 100%;
	height: 100%;
	padding: 0;
	border: none;
	background: var(--wp--custom--default--background);
	
	&:before {
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		content: '';
		background: var(--wp--custom--default--accent);
		width: 2rem;
		
		
		
		@media (width <= 1560px) {
			width: 0.5rem;
		
		}
	}
	
	
	& ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	& .menu-item.current-menu-item > a {
		color: var(--wp--preset--color--jaune)!important;
	}
	
	& a:hover { 
		text-decoration: none;
		color: var(--wp--preset--color--jaune)!important;
	}

}

.mobile--menu--inner  {
	height: 100%;
	display: grid;
	grid-template-rows: auto 1fr;
	& > *  { 
		width: 100%;
	}
}


.mobile--menu--header {
	
	display: grid;
	grid-template-columns: min-content 1fr;
	grid-template-rows: auto auto;
	padding-block: 1rem; 
	column-gap: 1rem;
	
	& > * {
		margin-block-start: 0;
	}
	
	& a:hover  {
		text-decoration: none!important;
	}
	
	& .logo {
		min-height: 5rem;
		display: flex;
		align-items: flex-end;
		grid-column: 1 / span 1;
		grid-row: 1 / span 2;
		align-self: flex-end;
		& > a {
			display: inline-block
		}
		
		& img {
			display: block;
		}
		
		& .logo--txt  {
			margin: 0;
			filter : var(--wp--custom--filter--white);
		}
	}
	
	& .dialog-close  {
		border: none;
		align-self: flex-end;
		background : none;
		padding: 0;
		color: var(--wp--custom--default--accent);
		font-size : var(--wp--preset--font-size--x-large);
		cursor: pointer;
		z-index: 10;
		@media (width <= 1472px) {
			position: fixed;
			right: 2rem;
		
		}
	}
}


.mobile--menu--ctn  {
	flex-grow: 2;
	
	display: grid;
	height: 100%;
	max-height: 60rem;
	grid-template-columns: max-content max-content auto;
	grid-template-rows: 1fr auto;
	row-gap: 2rem;
	column-gap: 4rem;
	justify-items: start;
	align-self: center;
	margin-block:0 !important;
	padding-top: 3rem!important;
	padding-bottom: 6rem!important;
	
		
	@media (height <= 980px) {
		padding-top: 1rem!important;
		padding-bottom: 1rem!important;
	}
	
	@media (height <= 740px) {
		row-gap: 0;
		column-gap: 2rem;
		padding-top: 0!important;
	}
	@media (width <= 740px) {
		grid-template-columns: max-content max-content;
	}
	
	& .menu {
		margin: 0!important;
		grid-row: 1 / span 1;
		
		&:is(.mobile--menu--col1)  {
			grid-column: 1 / span 1;
		}
		
		&:is(.mobile--menu--col2)  {
			grid-column: 2 / span 1;
	
		}
		
		@media (height <= 520px), (width <= 720px) {
			
			&:is(.mobile--menu--col1)  {
				grid-column: 1 / span 1;
				grid-row: 1 / span 1;
			}
			
			&:is(.mobile--menu--col2)  {
				padding-block-start: 1rem!important;
				grid-column: 1 / span 1;
				grid-row: 2 / span 1;
			
			}
			
			
		}
		
		& > .menu-item  {
			& > a {
				font-size: var(--wp--preset--font-size--x-large);
				font-weight: 600;
			}
			
			& > .sub-menu  {
				& > .menu-item  {
					padding-block: 0.25rem;
					& > a {
						font-size: var(--wp--preset--font-size--medium-large);
						color: var(--wp--preset--color--white);
					}
				}
			}
			
			@media (height <= 880px) {
				
				& > a {
					font-size: var(--wp--preset--font-size--large);
				}
			
				& > .sub-menu > .menu-item  > a {
					font-size: var(--wp--preset--font-size--medium);
				}
			}
			
			@media (height <= 740px) {
			
				& > a {
					font-size: var(--wp--preset--font-size--large);
				}
			
				& > .sub-menu > .menu-item  > a {
					font-size: var(--wp--preset--font-size--medium-small);
				}
			}
	
		}
		
		
	}
	
	& .mobile--menu--footer  {
		margin: 0!important;
		grid-row: 2 / span 1;
		grid-column: 1 / span 2;

		@media (height <= 740px), (width <= 720px) {
			display: none;
		}
		
		& .tel  {
			color: var(--wp--preset--color--jaune)!important;
			font-size: 5rem;
			font-weight: 700;
			& a {
				color: inherit;
			}
			
			@media (height <= 880px) {
				font-size: var(--wp--preset--font-size--xx-large)!important;
			}
		}
		
		& .info  {
			color: var(--wp--preset--color--white);
			font-size: var(--wp--preset--font-size--medium-large);
			display: flex;
			gap: 2rem;
			
			@media (height <= 880px) {
				font-size: var(--wp--preset--font-size--medium);
			}
			
			
			& *  {
				color: inherit;
				margin: 0!important; 
				padding: 0!important;
			}
			
			& .adresse {
				display: flex;
				align-items: center;
				&:after {
					content: '';
					height: 5rem;
					padding-left: 2rem;
					border-right: 1px solid;
				}
			}
				
			
			
			& .ouverture > span  {
				color: var(--wp--custom--default--accent);
			}
		}
	}
	
	& .mobile--menu--image  {
		margin: 0!important;
		grid-row: 1 / span 2;
		grid-column: 3 / span 1;
		position: absolute;
		inset: 0;
		
		& img  {
			width: 100%;
			height: 100%;
			object-fit: contain;
			object-position: center bottom
		}
	
	}
}