.mega-menu {
	position: fixed;
	top: var(--header-height);
	left: 50%;
	z-index: 50;
	width: 100%;
	max-width: var(--wp--style--global--wide-size) !important;
	height: auto;
	max-height: 0;
	padding: 0 var(--wp--preset--spacing--40);
	overflow: hidden;
	border: 0 solid var(--wp--preset--color--custom-gris-clair);
	border-radius: 16px;
	background-color: white;
	opacity: 0;
	transition:
		opacity 0.2s ease,
		top 0.5s ease,
		padding 0.3s ease,
		max-height 0.4s ease,
		border-width 0.3s ease;
	transform: translateX(-50%);
}

.mega-menu--admin {
	position: relative;
	top: unset;
	left: unset;
	z-index: unset;
	width: 100%;
	height: auto;
	max-height: unset !important;
	margin: auto;
	opacity: 1;
	transform: unset;
}

.mega-menu--active {
	z-index: 60;
	max-height: calc(100svh - 200px);
	padding: var(--wp--preset--spacing--40);
	border-width: 1px;
	opacity: 1;
}

.mega-menu--animated {
	overflow: auto !important;
}

.toggle-mega-menu {
	padding: 2px var(--wp--preset--spacing--30);
	transition: 0.3s all ease-in-out;
}

.toggle-mega-menu:hover {
	border-radius: 128px;
	background-color: var(--wp--preset--color--custom-bleu-tr-s-clair);
}

.listing-default-cat {
	display: block !important;
	gap: var(--wp--preset--spacing--60) !important;
	columns: auto 280px;
}

.listing-default-cat a {
	text-decoration: none;
	color: var(--wp--preset--color--custom-bleu-fonc);
}

.listing-default-cat > li {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	padding-bottom: var(--wp--preset--spacing--40);
	break-inside: avoid;
}

.listing-default-cat .children {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	padding-left: 0 !important;
}

.listing-default-cat .children .children {
	display: none;
}

.listing-default-cat > .cat-item a {
	font-size: var(--wp--preset--font-size--regular);
	font-weight: 500;
}

.listing-default-cat .children > .cat-item a {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
}

.mega-menu .outils-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.mega-menu .outils-grid > *,
.mega-menu .outils-grid .has-border-color {
	border-radius: 16px !important;
}

.mega-menu .outils-grid .tw-stretched-link .wp-block-columns-is-layout-flex {
	flex-direction: column !important;
	gap: 0;
}

.wp-block-column:has(.wp-block-categories-list.mobilites),
.mega-menu .wp-block-categories-list.mobilites {
	flex: none;
	width: fit-content;
}

@media screen and (width <= 468px) {
	.outils-grid .tw-stretched-link .wp-block-columns-is-layout-flex {
		flex-direction: column !important;
	}
}

@container header-container (width <= 1420px) {
	.mega-menu-toggle {
		position: fixed;
		top: var(--header-height) !important;
		left: 0;
		z-index: 50;
		flex-direction: column;
		align-items: start;
		gap: 0 !important;
		width: 350px;
		height: calc(100svh - var(--header-height)) !important;
		min-height: calc(100svh - var(--header-height));
		padding: 0;
		border-right: 1px solid var(--wp--preset--color--custom-gris-clair);
		background-color: white;
		opacity: 0;
		transition: 0.3s all ease-in-out;
		transform: translateX(-100%);
		visibility: hidden;
	}

	.toggle-mega-menu {
		position: relative;
		width: 100%;
		padding: var(--wp--preset--spacing--40) !important;
		border-bottom: 1px solid var(--wp--preset--color--custom-gris-clair);
		border-radius: 0 !important;
	}

	.toggle-mega-menu::after {
		position: absolute;
		top: 50%;
		right: var(--wp--preset--spacing--40);
		width: 24px;
		height: 24px;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23172087' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-size: 100%;
		background-position: center;
		transform: translateY(-50%);
		pointer-events: none;
		content: '';
	}

	.toggle-mega-menu::before {
		position: absolute;
		top: 50%;
		right: 0;
		z-index: 2;
		width: 58px;
		height: 58px;
		transform: translateY(-50%);
		cursor: pointer;
		content: '';
	}

	body:has(.burger-menu--active) .mega-menu-toggle {
		opacity: 1;
		transform: translateX(0);
		visibility: visible;
	}

	.mega-menu:not(.mega-menu--admin) {
		left: 0 !important;
		width: 340px !important;
		min-height: calc(100svh - var(--header-height));
		max-height: calc(100svh - var(--header-height)) !important;
		padding-top: 70px !important;
		border-width: 0 !important;
		border-radius: 0 !important;
		opacity: 1 !important;
		transition: all 0.3s ease-in-out !important;
		transform: translateX(-100%);
		border-right-width: 1px !important;
	}

	.mega-menu:not(.mega-menu--admin)::after {
		position: absolute;
		top: 16px;
		left: 16px;
		z-index: 10;
		display: block;
		padding: 8px 12px;
		border-radius: 6px;
		background-color: #f2f2f2;
		font-size: 14px;
		font-weight: 500;
		color: var(--wp--preset--color--custom-bleu-fonc);
		cursor: pointer;
		content: 'Retour';
	}

	.mega-menu:not(.mega-menu--admin)::before {
		position: absolute;
		top: 16px;
		left: 16px;
		z-index: 20;
		width: 70px;
		height: 37px;
		cursor: pointer;
		content: '';
	}

	.mega-menu--active {
		transform: translateX(0) !important;
	}

	.mega-menu:not(.mega-menu--admin) .wp-block-columns {
		flex-direction: column !important;
	}

	.mega-menu:not(.mega-menu--admin) .outils-grid {
		display: flex !important;
	}

	.mega-menu:not(.mega-menu--admin) * {
		max-width: 100% !important;
	}
}

@supports (height: 100dvh) {
	@container header-container (width <= 1420px) {
		.mega-menu:not(.mega-menu--admin) {
			height: calc(100dvh - var(--header-height)) !important;
			min-height: calc(100dvh - var(--header-height));
			max-height: calc(100dvh - var(--header-height)) !important;
		}
	}
}