/********************************************************/
/*
/*      Header CSS
/*
/********************************************************/
.wp-site-blocks > menu  {
	position: sticky;
	top: 0;
	max-width: calc(100% - 2px);
	background: linear-gradient(45deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
	backdrop-filter: blur(.5rem);
	margin-block: 0;
	z-index: 100;
	
	& .burger {
		font-family: var(--wp--preset--font-family--fontawesome);
	}
	
	@media (width <= 960px) {
		& .wp-block-button:not(.burger)  {
			display: none;
		}
	}
	
	@media (width <= 620px) {
		& .wp-block-site-logo  {
			max-width: 220px;
		}
	}
}

#mobilemenu {
	--timing : 0.3s;
	
	position: fixed;
	width: var(--wp--custom--viewport-width);
	height: 100%;
	padding-block: 0!important;
	border: none;
	margin-top: 0;
	
	transition: display var(--timing) allow-discrete, overlay var(--timing) allow-discrete;	
	animation: popupfadeOut var(--timing) forwards;
	
	&::backdrop {
		display: none;
	}
	
	&:popover-open {
		animation: popupfadeIn var(--timing) forwards;
	}
	
	@media (width <= 960px) {
		grid-template-columns: 1fr;
	}

	& .dialog__inner  {
		display: grid;
		align-items: center;
		grid-template-columns: max-content 1fr;
		position: relative;
		min-height: 100%;
		
		@media (width <= 960px) {
			grid-template-columns: 1fr;
		}
	}
	
	& .dialog-close {
		position: absolute;
		z-index: 2;
		top: var(--wp--preset--spacing--2);
		right: var(--wp--preset--spacing--2);
		width: 48px;
		height: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--wp--preset--color--blanc);
		border-radius: 50%;
		border: 3px solid;
		background-color: var(--wp--preset--color--orange);
		cursor: pointer;
		transition: all ease-in-out .2s;
		
		&:is(:hover, :focus, :active)  {
			rotate: 90deg;
		}
	}
	
	& nav  {
		display: flex;
		flex-direction: column;
		max-height: 38rem;
		margin-block-end: 1rem;
		
		@media (width <= 960px) {
			justify-self: center;
		}
		
		@media (height <= 640px) {
			display: grid;
			grid-template-columns: auto auto;
		}
		
		grid-column: 1 / span 1;
		grid-row: 1 / span 1;
		
		& li > a {
			display: inline-block;
			text-decoration: none;
			font-family: var(--wp--preset--font-family--roc);
			font-size: var(--wp--preset--font-size--x-large);
			font-weight: 500;
			line-height: 1;
			padding-inline: var(--wp--preset--spacing--2-5);
			padding-block: var(--wp--preset--spacing--0-75) var(--wp--preset--spacing--0-50);
			color: var(--wp--preset--color--beige);
			background: transparent;
			border-radius: 64px;
			translate: calc(var(--wp--preset--spacing--2-5) * -1) 0;
			transition: all ease-in-out 0.3s;
		}
		
		& li.current-menu-item > a  {
			color: var(--wp--preset--color--orange);
		}
		
		& li:is(:hover, :focus, :active) > a  {
			translate: 0 0;
			background: var(--wp--preset--color--bleu);
			color: var(--wp--preset--color--beige);
		}
		
	}
	& .wp-block-buttons {
		margin-block-start: 2rem;
		
		& .wp-block-button  {
			max-width: 260px;
			white-space: nowrap;
		}
		
		@media (height <= 640px) {
			grid-row: 4 / span 1;
			grid-column : 1 / span 2;
			flex-wrap: nowrap;
			margin-block-start: 0.5rem;
		}
	}
	
	& figure  {
		justify-self: stretch;
		align-self: center;
		pointer-events: none;
		grid-column: 1 / -1;
		grid-row: 1 / -1;
	
		width: 100%;
		height: 100%;
		max-height: 38rem;
		position: relative;
		margin-bottom: 0;
		z-index: -1;
		
		& img  {
			position: absolute;
			top: 0;
			right: 0;
			width: 100%;
			height: 100%;
			object-fit: contain;
			object-position: center right;
		}
		
		@media (width <= 1080px) {
			& img  {
				width: 80%;
				height: 100%;
			}
		}
		
		@media (width <= 960px) {
			display:  none;
		}
	}
}

@keyframes popupfadeIn {
  from { opacity: 0; translate: 0 -25%; }
  to { opacity: 1;  translate: 0 0; }
}

@keyframes popupfadeOut {
  from { opacity: 1; translate: 0 0; }
  to { opacity: 0; translate: 0 -25%; }
}