/********************************************************/
/*
/*      BASE
/*
/********************************************************/

html, body {
	scroll-behavior: smooth;
	scroll-padding-top: 4rem; 
	width: 100%;
	height: 100%;
	margin-block-start: 0 !important;
	overflow-x: clip;
}

menu {
	padding: 0;
}

.wp-site-blocks {
	
	display: flex;
	flex-direction: column;
	min-height: 100%;
	
	& > main  {
		margin-block-start: 0;
		flex-grow: 2;
		
	}
}





/********************************************************/
/*
/*      NAV
/*
/********************************************************/

.wp-site-blocks > menu { 
	
	z-index: 12;
	padding-block: 0.5rem;
	margin-block-start: 0;
	background: var(--wp--preset--color--blanc);
	
	@media (width < 720px) {
		position: sticky;
		top: 0;
		box-shadow:  1px 1px 10px var(--wp--preset--color--vert);
	}
	
	& * { 
		margin-block-start: 0;
	}
	
	& a:hover,
	& .current-menu-item a {
			color: var(--wp--preset--color--vert-pale);
	}
	
	& .menu-inner  {
		display: grid;
		grid-template-rows: 1fr 1fr;
		grid-template-columns : 1fr max-content;
		row-gap:0.5rem;
		column-gap:  1rem;
	}
	& .menu-logo  {
		align-self: center;
		grid-row: 1 / span 2;
		grid-columns: 1 / span 1;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		& a  {
			display: inline-block;
			height: 3rem;
			
			@media (width < 720px) {
			height: 2rem;
			}
			
		}
		& svg {
			height: 100%;
			width: auto;
			fill: var(--wp--preset--color--vert);
		}
	}
	
	& nav { 
		
		display: flex;
		justify-content: flex-end; 
		align-items: center;
	
		&:is(.menu-nav-utility) {
			gap : 2rem;
			
			grid-row: 1 / span 1;
			grid-column: 2 / span 1;
			
			@media (width < 940px) {
				gap : 1rem;
				font-size: var(--wp--preset--font-size--small);
			}
			
			@media (width < 720px) {
				display: none;
			} 
		}
			
		&:is(.menu-nav-main)  {
			gap : 3rem;
			grid-row: 2 / span 1;
			grid-column: 2 / span 1;
			font-weight: 400;
			
			@media (width < 940px) {
				gap : 1rem;
				font-size: var(--wp--preset--font-size--medium-small);
			}
			
			@media (width < 720px) {
				grid-row: 1 / span 2;
				& li:not(.menu-item-burger)  { 
					display: none;
				}
			} 
		}
		
		.menu-item-burger  {
			display: none;
			
			button {
				border: none;
				background: none;
				font-size: var(--wp--preset--font-size--x-large)
			}
			
			@media (width < 720px) {
				display: block;
			}
		}
	}
				
}

.wp-site-blocks > menu + header {
	margin-block-start: 0;
}


/********************************************************/
/*
/*      DIALOG
/*
/********************************************************/

#mobilemenu {
	
	--timing : 0.3s;
	--horizontal-spacing : 10rem;
	
	box-sizing: border-box;
	border: none; 
	opacity: 0;
	transform: translateX(-80%);
	transition: opacity var(--timing) ease-in-out, transform var(--timing) ease-in-out, display var(--timing)allow-discrete, overlay var(--timing) allow-discrete;
	
	&::backdrop {
		background: rgba(0 0 0 / 0);
		transition: background-color var(--timing) ease-in-out, overlay var(--timing) allow-discrete, display var(--timing) allow-discrete;
	}
	
	&:popover-open {
		
		opacity: 1;
		transform: translateX(0); 
		
		&::backdrop {
			background-color: rgb(0 0 0 / 0.8); 
		}
	}
	
	@starting-style {
		&:popover-open {
			opacity: 0;
			transform: translateX(-80%);
			
			&::backdrop {
				background-color: rgb(0 0 0 / 0);
			}
			
		}
	}
	
	width: 100%;
	max-width: 400px;
	height: 100vh;
	padding: 0;
	margin-left: 0;
	margin-right: auto;
	background: var(--wp--preset--color--vert);

	:is(a, button)  {
		font-weight: 300;
		font-size: var(--wp--preset--font-size--x-large);
		color: var(--wp--preset--color--vert-pale);
		cursor: pointer;
	}
	button:hover,
	a:hover,
	li.current-menu-item a {
		color: var(--wp--preset--color--blanc);
	}
	
	.dialog--inner {
		padding-left: 0!important;
		padding-right: 0!important;
		position: relative;
		box-sizing: border-box;
		padding-block-start: 3rem;
		color:  var(--wp--preset--color--vert-pale);
		background: var(--wp--preset--color--vert);
		overflow: clip;
		min-height: 100%;
		
		.dialog--close {
			
			border: none;
			background: none;
			font-size: var(--wp--preset--font-size--large);
			position: absolute;
			right: 0.5rem;
			top:1rem;
		
			&:hover {
				color: var(--wp--preset--color--jaune);
				cursor: pointer;
			}
		}

		.dialog--logo  {
			border-bottom: 1px solid;
			padding-left: 2rem;
			padding-right: 2rem;
			padding-bottom: 2rem;
			margin-bottom: 0;
		}
		.dialog--nav {
			gap: 1rem;
			
			li {
				border-bottom: 1px solid;
				padding-left: 2rem;
				padding-right: 2rem;
			}
		}
	}

		
}


/********************************************************/
/*
/*      Banner
/*
/********************************************************/

/********************************************************/
/*
/*      Footer CSS
/*
/********************************************************/

.wp-site-blocks > footer {
	color: var(--wp--preset--color--vert-pale);
	background-color:  var(--wp--preset--color--vert);
	padding-block-start: var(--wp--preset--spacing--2);
	margin-block-start: 0;
	
	
	& a  { 
		color: var(--wp--preset--color--vert-pale);
	}
	
	& a:hover,
	& .current-menu-item a {
		color: var(--wp--preset--color--blanc);
	}
	
	& * {
		margin-block-start: 0!important;
	}
	
	& .footer-row  {
		
		border-top: 1px solid;
		display: flex;
		
		&:is(.footer-row-1)  {
			
		
			
			justify-content: stretch;
			
			& > *:not(:first-child)  {
				border-left: 1px solid;
			}
			
			@media (width < 880px) {
				
				flex-wrap: wrap;
				
				& .footer-col-logo {
					min-width: 100%;
					box-sizing: border-box;
					border-bottom: 1px solid;
					padding-block: 2rem;
					
					& a  {
						max-width: 280px;
					}
				}
				
				& .footer-col-nav {
					border-left: none!important;;
				}
			}
			
			@media (width < 620px) {
				display: block;
			}
		}
		
		&:is(.footer-row-2)   {
			align-items: center;
			justify-content: space-between;
			
			@media (width < 620px) {
				display: block;
			}
		}
		
		&:is(.footer-row-3)   {
			align-items: center;
			justify-content: space-between;
			
			@media (width < 620px) {
				display: block;
			}
		}
	}
	
	& .footer-col  {
		
		
		&:is(.footer-col-logo)  {
			flex-grow: 2;
		}
		
		&:is(.footer-col-nav)  {
			flex-grow: 2;
			max-width: 20rem;
		}
		
		&:is(.footer-col-ouverture) {
			
			flex-grow: 2;
			max-width: 30rem;
			
			display: flex;
			min-height: 100%;
			flex-direction: column;
			justify-items: stretch;
			align-content: stretch;
			
			@media (width < 620px) {
				border-left: none!important;
				max-width: none;
		 	}
		}
		

	}
	
	& .footer-cell {
		
		padding: var(--wp--preset--spacing--0-50) var(--wp--preset--spacing--1);
		
		display: flex;
		justify-content: center;
		align-items: center;
	
		
		
		&:is(.footer-cell-logo) {
			padding-inline: 2rem;
			
			a {
				display: block;
				width: 100%;
				max-width: 480px;	
			}
			
			img  {
				width: 100%;
			}
			
			
			
		}
		
		&:is(.footer-cell-nav) {
			
			flex-direction: column;
			align-items: flex-start;
			justify-content: space-between;
			
			font-weight: 600;
			text-transform: uppercase;
			font-size: var(--wp--preset--font-size--large);
			line-height: var(--wp--custom--line-height--large);
			
			& li a  {
				white-space: nowrap;
			}
			
			@media (width < 1080px) {
				font-size: var(--wp--preset--font-size--medium);
				line-height: var(--wp--custom--line-height--medium);
			}
			
			@media (width < 620px) {
				max-width: none!important;
				
				flex-direction: row;
				flex-wrap: wrap; 
				gap : 0.5rem;
				
				font-size: var(--wp--preset--font-size--medium-small);
				line-height: var(--wp--custom--line-height--medium-small);
				
				align-items: flex-start;
				justify-content: center;
				border-bottom : 1px solid;
			}
		}
		
		&:is(.footer-cell-horraire-title, .footer-cell-horraire-item)  {
			justify-content: flex-start;
			border-bottom: 1px solid;
		}
		
		&:is(.footer-cell-horraire-title)  {
			font-weight: 600;
			font-size: var(--wp--preset--font-size--large);
			line-height: 1.4;
			@media (width < 620px) {
				justify-content: center;
			}
	
		}
	
		&:is(.footer-cell-horraire-item)  {
			justify-content: space-between;
			gap: 1rem;
			
			& *  {
				white-space: nowrap;
			}
			
			& .footer-cell-horraire-item-val  {
				font-weight: 600;
			}
		}
		
		&:is(.footer-cell-tel)  {
			font-size: var(--wp--preset--font-size--x-large);
			justify-content: flex-end;
			flex-grow: 2;
			line-height: 1;
		}
		
		&:is(.footer-cell-adress)  {
			font-weight: 600;
		}
		
		&:is(.footer-cell-email)  {
			font-weight: 600;
		}
		
		&:is(.footer-cell-copy)  {
			font-size: var(--wp--preset--font-size--small);
		}
		
		&:is(.footer-cell-cake) {
			& svg {
				width: auto;
				height: 1.2rem;
				fill: currentColor;
				display: block;
			}
		}
			
	}
	
}