:root {
	--krea3-fullscreen-bg: var(--couleur-principale, #748168);
	--krea3-fullscreen-text: var(--couleur-texte-sur-principale, #192535);
}

.toggleMenu {
	appearance: none;
	background: #fff;
	border: 2px solid currentColor;
	box-sizing: border-box;
	color: #111;
	cursor: pointer;
	height: 52px;
	position: relative;
	width: 52px;
	z-index: 30020;
}

.toggleMenu .visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

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

#nav[hidden],
#nav ul[hidden] {
	display: none !important;
}

#nav button.menu-item {
	appearance: none;
	background: transparent;
	border: 0;
	cursor: pointer;
	font: inherit;
}

#nav a:focus-visible,
#nav button:focus-visible,
.toggleMenu:focus-visible {
	outline: 3px solid #000;
	outline-offset: 4px;
}

@media (min-width: 1218px) {
	.toggleMenu {
		display: none !important;
	}

	#nav {
		display: flex;
		justify-content: flex-end;
	}

	#nav > li > a,
	#nav > li > button.menu-item {
		background: transparent;
		box-sizing: border-box;
		color: inherit;
		display: block;
		font-size: 1.1rem;
		font-weight: 600;
		line-height: 1.25;
		padding: 24px 20px;
		text-decoration: none;
	}

	#nav > li > ul:not([hidden]) {
		background: var(--krea3-fullscreen-bg);
		box-sizing: border-box;
		color: var(--krea3-fullscreen-text);
		column-count: 3;
		column-fill: balance;
		column-width: auto;
		column-gap: clamp(36px, 5vw, 84px);
		display: block !important;
		height: 100vh !important;
		inset: 0 !important;
		overflow-x: hidden;
		overflow-y: auto;
		padding: clamp(72px, 10vh, 120px) clamp(48px, 9vw, 160px);
		position: fixed !important;
		width: 100vw !important;
		z-index: 30000 !important;
	}

	#nav > li > ul > li {
		break-inside: avoid;
		display: inline-block;
		margin: 0 0 10px;
		width: 100%;
	}

	#nav > li > ul a,
	#nav > li > ul button.menu-item {
		box-sizing: border-box;
		color: var(--krea3-fullscreen-text);
		display: block;
		font-size: 1.25rem;
		font-weight: 700;
		line-height: 1.25;
		padding: 6px 8px;
		text-align: left;
		text-decoration: none;
		width: 100%;
	}

	#nav > li > ul > li > ul {
		display: block;
		padding: 6px 0 0 18px;
	}

	#nav > li > ul > li > ul a,
	#nav > li > ul > li > ul button.menu-item {
		font-size: 1rem;
		font-weight: 400;
		padding: 6px 8px;
	}

	.krea3-mega-close {
		appearance: none;
		background: #fff;
		border: 2px solid #000;
		color: #000;
		cursor: pointer;
		font-size: 2rem;
		height: 54px;
		line-height: 1;
		position: fixed;
		right: 24px;
		top: 24px;
		width: 54px;
		z-index: 30010;
	}
}

@media (max-width: 1217px) {
	body.menu-open {
		overflow: hidden;
	}

	.toggleMenu {
		display: flex !important;
	}

	body.menu-open .toggleMenu {
		position: fixed;
		right: 16px;
		top: 16px;
		z-index: 30030;
	}

	#nav {
		background: var(--krea3-fullscreen-bg);
		box-sizing: border-box;
		color: var(--krea3-fullscreen-text);
		height: 100vh !important;
		inset: 0 !important;
		overflow-x: hidden;
		overflow-y: auto;
		padding: 88px 24px 32px;
		position: fixed !important;
		width: 100vw !important;
		z-index: 30000 !important;
	}

	#nav[hidden] {
		display: none !important;
	}

	#nav li {
		display: block;
		width: 100%;
	}

	#nav a,
	#nav button.menu-item {
		box-sizing: border-box;
		color: var(--krea3-fullscreen-text);
		display: block;
		font-size: 1.1rem;
		font-weight: 600;
		line-height: 1.3;
		padding: 15px 12px;
		text-align: left;
		text-decoration: none;
		width: 100%;
	}

	#nav li > ul {
		padding: 0 0 0 18px;
		position: static;
	}

	#nav button.menu-item[aria-controls]::after {
		content: "▾";
		float: right;
	}

	#nav button.menu-item[aria-expanded="true"]::after {
		content: "▴";
	}
}

/* =====================================================
   Contrat RGAA Krea3 - commun, sans palette imposee
===================================================== */
a.toggleMenu {
	display: none !important;
}

.visually-hidden,
#menu-principal .visually-hidden {
	border: 0 !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	white-space: nowrap !important;
	width: 1px !important;
}

#menu-principal #nav[hidden],
#header #menu #nav[hidden],
#menu-principal #nav ul[hidden],
#header #menu #nav ul[hidden] {
	display: none !important;
}

#menu-principal button,
#header #menu button {
	cursor: pointer;
}

#menu-principal button.toggleMenu,
#header #menu button.toggleMenu,
#menu-principal #nav button.menu-item,
#menu-principal #nav a {
	min-height: 44px;
}

#menu-principal a:focus-visible,
#menu-principal button:focus-visible,
#header #menu a:focus-visible,
#header #menu button:focus-visible {
	outline: 3px solid var(--couleur-secondaire, #ffbf47) !important;
	outline-offset: 4px !important;
}

#menu-principal .krea3-mega-close {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	min-height: 48px;
	min-width: 48px;
}

@media (min-width: 1218px) {
	button.toggleMenu {
		display: none !important;
	}
}

@media (max-width: 1217px) {
	button.toggleMenu {
		min-height: 48px !important;
		min-width: 48px !important;
	}

	body.menu-open {
		overflow: hidden !important;
	}
}

/* Conserver une liste HTML valide sans ajouter une colonne au mega-menu. */
html body #menu-principal #nav > li > ul:not([hidden]) > li.krea3-mega-close-item,
html body #header #menu #nav > li > ul:not([hidden]) > li.krea3-mega-close-item,
html body #top-bandeau #menu #nav > li > ul:not([hidden]) > li.krea3-mega-close-item {
	display: contents !important;
}


/* Menu RGAA desktop : le panneau commence sous le header qui porte la navigation. */
@media (min-width: 1218px) {
	html body #header #top-bandeau #menu #nav > li > button.menu-item[aria-expanded="true"] + ul:not([hidden]),
	html body #header #top-bandeau #menu #nav > li > ul:not([hidden]) {
		bottom: 0 !important;
		height: auto !important;
		inset: var(--krea3-menu-header-bottom, var(--krea3-menu-header-height, 149px)) 0 0 !important;
		max-height: calc(100vh - var(--krea3-menu-header-bottom, var(--krea3-menu-header-height, 149px))) !important;
		max-height: calc(100dvh - var(--krea3-menu-header-bottom, var(--krea3-menu-header-height, 149px))) !important;
		min-height: 0 !important;
	}

	html body #header #top-bandeau #menu #nav .krea3-mega-close {
		position: fixed !important;
		top: calc(var(--krea3-menu-header-bottom, var(--krea3-menu-header-height, 149px)) + 24px) !important;
	}
}

/* Catalogue 2026 : la page de rubrique est deja portee par son bouton. */
@media (min-width: 1218px) {
	#menu-principal #nav .menu-see-all,
	#menu #nav .menu-see-all {
		display: none !important;
	}

	#menu-principal #nav > li > ul > li > button.menu-item::after,
	#menu #nav > li > ul > li > button.menu-item::after {
		content: none !important;
		display: none !important;
		margin: 0 !important;
	}
}