/* Header — Figma Frame 261 (node 933:871)
   Tokens : var(--wp--preset--color--*), var(--wp--preset--font-size--*),
            var(--wp--preset--spacing--*), var(--wp--preset--border-radius--*)
*/

.main-header {
	position: sticky;
	inset-inline: 0;
	inset-block-start: var(--wp-admin--admin-bar--height, 0);
	z-index: 50;
	padding-block: var(--wp--preset--spacing--m);
	font-family: var(--wp--preset--font-family--text);
	color: var(--wp--preset--color--cafe);
	background-color: var(--wp--preset--color--beige-2);

	.wrapper {
		width: min(100% - 2 * var(--wp--preset--spacing--gutter), var(--wp--style--global--content-size, 88.75rem));
		margin-inline: auto;
	}

	.logo img {
		display: block;
		width: 13.5rem;
		height: auto;
		border-radius: 0;

		@media (width <= 70em) {
			width: 8.5rem;
		}
	}

	li {
		margin-block-start: 0;
		/* margin-block-end: 0; */
	}

	a {
		color: inherit;
		text-decoration: none;
		transition: color 0.25s ease;
		cursor: pointer;

		&:hover,
		&:focus-visible {
			color: var(--wp--preset--color--administration);
		}
	}

	ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
}

.main-header__content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--wp--preset--spacing--m);
}

.navigations {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	column-gap: var(--wp--preset--spacing--m);
}

/* Rangée secondaire — Urbanist 400 16px/1.1 Café, gap 24 */
.navigation-top {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: var(--wp--preset--spacing--m);
	font-size: var(--wp--preset--font-size--step-minus-1);
	font-weight: 400;
	line-height: 1.1;
	color: var(--wp--preset--color--cafe);

	& > .menu-item {
		position: relative;
	}

	& > .menu-item > a {
		display: inline-flex;
		align-items: center;
		gap: var(--wp--preset--spacing--2-xs);
		padding-block: var(--wp--preset--spacing--xs);
	}

	.menu-item-has-children > a::after {
		content: "";
		display: block;
		flex-shrink: 0;
		width: 0.625rem;
		height: 0.5rem;
		background-color: currentColor;
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9' fill='none'%3E%3Cpath d='M10.75.75 5.75 7.8' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M5.75 7.8.75.75' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
		mask-size: contain;
		mask-repeat: no-repeat;
		mask-position: center;
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9' fill='none'%3E%3Cpath d='M10.75.75 5.75 7.8' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M5.75 7.8.75.75' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
		-webkit-mask-size: contain;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-position: center;
	}

	/* Panneau déroulant — 213×120, rayon 10, filet Café */
	.sub-menu {
		display: none;
		position: absolute;
		inset-inline-start: 0;
		overflow: clip;
		z-index: 3;
		min-width: 13.3125rem;
		flex-direction: column;
		gap: var(--wp--preset--spacing--18);
		padding-inline: 0;
		border: 1px solid var(--wp--preset--color--cafe);
		border-radius: var(--wp--preset--border-radius--10);
		background-color: var(--wp--preset--color--beige-2);
		list-style: none;
		max-height: 80svh;
		overflow-y: auto;
		padding-top: 12px;
	}

	& > .menu-item:hover > .sub-menu,
	& > .menu-item:focus-within > .sub-menu {
		display: flex;
	}

	.sub-menu > .menu-item > a {
		display: block;
		padding-inline: var(--wp--preset--spacing--s);
		font-size: var(--wp--preset--font-size--step-minus-1);
		font-weight: 700;
		line-height: 1.1;
		color: var(--wp--preset--color--cafe);
		margin-block-start: calc(var(--wp--preset--spacing--xs) * -1);
		padding-block: var(--wp--preset--spacing--xs);
	}

	.sub-menu > .menu-item:hover > a {
		background-color: var(--wp--preset--color--bleu-poudre);
	}

	.sub-menu > .menu-item > a:hover,
	.sub-menu > .menu-item > a:focus-visible {
		color: var(--wp--preset--color--administration);
	}

	/* État actif — identique au survol */
	& > .current-menu-item > a,
	& > .current-menu-ancestor > a {
		color: var(--wp--preset--color--administration);
	}

	.sub-menu > .current-menu-item > a {
		color: var(--wp--preset--color--administration);
		background-color: var(--wp--preset--color--bleu-poudre);
	}
}

/* Rangée primaire — Urbanist 700 18px/1.5 Orange, gap 40 */
.navigation-primary {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--step-0);
	font-weight: 700;
	line-height: 1.5;
	color: var(--wp--preset--color--orange);

	& > .menu-item {
		position: relative;
	}

	& > .menu-item > a {
		display: block;
		padding-block: var(--wp--preset--spacing--xs);
	}

	/* État actif — identique au survol */
	& > .current-menu-item > a,
	& > .current-menu-ancestor > a,
	.sub-menu > .current-menu-item > a {
		color: var(--wp--preset--color--administration);
	}

	.sub-menu {
		display: none;
		position: absolute;
		inset-block-start: 100%;
		inset-inline-start: 0;
		z-index: 3;
		min-width: 13.3125rem;
		flex-direction: column;
		gap: var(--wp--preset--spacing--18);
		padding-block: var(--wp--preset--spacing--s);
		border: 1px solid var(--wp--preset--color--cafe);
		border-radius: var(--wp--preset--border-radius--10);
		background-color: var(--wp--preset--color--beige);
		list-style: none;
	}

	& > .menu-item:hover > .sub-menu,
	& > .menu-item:focus-within > .sub-menu {
		display: flex;
	}

	.sub-menu > .menu-item > a {
		display: block;
		padding-inline: var(--wp--preset--spacing--s);
		font-size: var(--wp--preset--font-size--step-minus-1);
		font-weight: 700;
		line-height: 1.1;
		color: var(--wp--preset--color--cafe);
	}

	.sub-menu > .menu-item > a:hover,
	.sub-menu > .menu-item > a:focus-visible {
		color: var(--wp--preset--color--administration);
	}
}

/* Menu mobile — panneau plein écran sous l'en-tête.
   Ordre : sections principales (Orange, gros caractères), liens utilitaires (Café),
   puis « Mon compte » en bouton pilule épinglé au bas. */
@media (width < 70em) {
	.main-header .logo {
		position: relative;
		z-index: 2;
	}

	.navigations {
		position: fixed;
		inset: calc(var(--wp-admin--admin-bar--height, 0px) + var(--reactif-header-height, 0px)) 0 0 0;
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--xl);
		padding-block: var(--wp--preset--spacing--m) max(var(--wp--preset--spacing--l), env(safe-area-inset-bottom));
		padding-inline: var(--wp--preset--spacing--gutter);
		overflow-y: auto;
		overscroll-behavior: contain;
		border-block-start: 1px solid color-mix(in srgb, var(--wp--preset--color--cafe) 15%, transparent);
		background-color: var(--wp--preset--color--beige-2);
		clip-path: inset(0 0 100% 0);
		visibility: hidden;
		transition:
			clip-path 0.45s cubic-bezier(0.65, 0, 0.35, 1),
			visibility 0s linear 0.45s;

		&.active {
			clip-path: inset(0 0 0 0);
			visibility: visible;
			transition: clip-path 0.45s cubic-bezier(0.65, 0, 0.35, 1);
		}

		& > ul {
			opacity: 0;
			translate: 0 var(--wp--preset--spacing--s);
			transition:
				opacity 0.3s ease,
				translate 0.3s ease;
		}

		&.active > ul {
			opacity: 1;
			translate: 0 0;
			transition-delay: 0.15s;
		}

		&.active > .navigation-top {
			transition-delay: 0.25s;
		}

		.menu-item > a {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: var(--wp--preset--spacing--s);
			min-height: 2.75rem;
		}

		.sub-menu {
			position: static;
			display: none;
			min-width: 0;
			max-height: none;
			padding: 0;
			border: 0;
			border-radius: 0;
			background: none;
		}

		.menu-item:hover > .sub-menu,
		.menu-item:focus-within > .sub-menu {
			display: none;
		}

		.menu-item > .sub-menu.active {
			display: flex;
		}
	}

	/* Sections principales */
	.navigation-primary {
		order: -1;
		flex-direction: column;
		align-items: stretch;
		flex-wrap: nowrap;
		gap: 0;
		font-size: var(--wp--preset--font-size--step-2);
		line-height: 1.2;

		& > .menu-item {
			border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--cafe) 15%, transparent);
		}

		& > .menu-item > a {
			padding-block: var(--wp--preset--spacing--s);
		}

		/* Flèche → */
		& > .menu-item > a::after {
			content: "";
			flex-shrink: 0;
			width: 1.25rem;
			height: 1.25rem;
			background-color: currentColor;
			mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M3 10h14M11 4l6 6-6 6' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
			transition: translate 0.25s ease;
		}

		& > .menu-item > a:hover::after,
		& > .menu-item > a:focus-visible::after {
			translate: 0.25rem 0;
		}
	}

	/* Liens utilitaires */
	.navigation-top {
		flex-grow: 1;
		flex-direction: column;
		align-items: stretch;
		flex-wrap: nowrap;
		gap: 0;
		font-size: var(--wp--preset--font-size--step-0);
		font-weight: 500;

		& > .menu-item > a {
			display: flex;
			padding-block: var(--wp--preset--spacing--2-xs);
		}

		.menu-item-has-children > a {
			justify-content: flex-start;
			gap: var(--wp--preset--spacing--xs);
		}

		.menu-item-has-children > a::after {
			width: 0.75rem;
			height: 0.625rem;
			transition: rotate 0.25s ease;
		}

		.menu-item-has-children:has(> .sub-menu.active) > a::after {
			rotate: 180deg;
		}

		.sub-menu {
			flex-direction: column;
			gap: 0;
			margin-block: var(--wp--preset--spacing--4-xs) var(--wp--preset--spacing--xs);
			padding-inline-start: var(--wp--preset--spacing--s);
			border-inline-start: 2px solid var(--wp--preset--color--administration);
		}

		.sub-menu > .menu-item > a {
			margin: 0;
			padding: var(--wp--preset--spacing--2-xs) 0;
			font-size: var(--wp--preset--font-size--step-0);
			font-weight: 500;
		}

		.sub-menu > .menu-item:hover > a,
		.sub-menu > .current-menu-item > a {
			background: none;
		}

		/* « Mon compte » — bouton pilule épinglé au bas du panneau */
		& > .menu-item:has(> a[href$="/mon-compte/"]) {
			order: 99;
			margin-block-start: auto;
			padding-block-start: var(--wp--preset--spacing--l);
		}

		& > .menu-item > a[href$="/mon-compte/"] {
			justify-content: center;
			padding-inline: var(--wp--preset--spacing--m);
			border: 1px solid var(--wp--preset--color--cafe);
			border-radius: var(--wp--preset--border-radius--pill);
			font-weight: 600;
			color: var(--wp--preset--color--beige-2);
			background-color: var(--wp--preset--color--cafe);
			transition:
				background-color 0.25s ease,
				color 0.25s ease;

			&:hover,
			&:focus-visible {
				color: var(--wp--preset--color--cafe);
				background-color: transparent;
			}
		}
	}
}

@media (width < 70em) and (prefers-reduced-motion: reduce) {
	.navigations,
	.navigations > ul {
		transition: none !important;
	}
}

.menu-button {
	position: relative;
	z-index: 10;
	padding: 0;
	color: var(--wp--preset--color--cafe);
	background-color: transparent;

	svg {
		vertical-align: bottom;
	}

	.menu-button-open,
	.menu-button-close {
		transition: opacity 0.25s ease;
	}

	.menu-button-open {
		opacity: 1;
	}

	.menu-button-close {
		opacity: 0;
	}

	&[aria-expanded="true"] {
		.menu-button-open {
			opacity: 0;
		}

		.menu-button-close {
			opacity: 1;
		}
	}

	@media (width >= 70em) {
		display: none;
	}
}

.headroom {
	transition:
		translate 0.5s ease,
		padding-block 0.5s ease,
		background-color 0.5s ease;

	.logo img {
		transition: width 0.5s ease;
	}
}

.headroom--unpinned {
	translate: 0 -100%;
}

.headroom--not-top {
	padding-block: var(--wp--preset--spacing--s);
	background-color: var(--wp--preset--color--beige);
}