/* =============================================================================
   Méga-menu produits — Literiland
   Mobile first
   ============================================================================= */

/* Masqué par défaut sur mobile.
   Les catégories sont gérées par le sub-menu natif du drawer. */
.pb-product-mega-menu {
	display: none;
}

/* -----------------------------------------------------------------------
   Mode panel-view
   ----------------------------------------------------------------------- */

.pb-product-mega-menu.is-panel-view {
	display: block;
	position: fixed;
	top: 60px;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10001;
	overflow: hidden;
}

.pb-product-mega-menu.is-panel-view .pb-product-mega-menu__inner {
	transform: none;
	opacity: 1;
}

.pb-product-mega-menu.is-panel-view .pb-product-mega-menu__tabs {
	display: none;
}

.pb-product-mega-menu.is-panel-view .pb-product-mega-menu__panels {
	display: block;
	padding: 0;
}

.pb-product-mega-menu.is-panel-view .pb-product-mega-menu__panel {
	display: block; /* override du display:none par défaut */
	position: fixed;
	top: 60px;
	right: -100%;
	width: 100%;
	height: calc(100% - 60px);
	background: var(--color-gris-vert);
	overflow-y: auto;
	transition: right 0.3s ease;
	z-index: 10002;
}

.pb-product-mega-menu.is-panel-view .pb-product-mega-menu__panel.is-active {
	right: 0;
}

.pb-product-mega-menu.is-panel-view .pb-product-mega-menu__back {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 14px 20px;
	background: none;
	border: none;
	border-bottom: 1px solid #e8e8e8;
	cursor: pointer;
	font-size: 0.9rem;
	color: #555;
	text-align: left;
}

.pb-product-mega-menu.is-panel-view .pb-product-mega-menu__back:hover,
.pb-product-mega-menu.is-panel-view .pb-product-mega-menu__back:focus {
	background: #f5f5f5;
	outline: none;
}

/* -----------------------------------------------------------------------
   Styles communs — tabs, panels, liens (desktop + panel-view mobile)
   ----------------------------------------------------------------------- */

/* Bouton tab (items avec template Dynific) */
.pb-product-mega-menu__tab {
	display: block;
	width: 100%;
	padding: 12px 20px !important;
	background: none;
	border: none;
	text-align: left;
	cursor: pointer;
	color: var(--color-blanc);
	line-height: 1.4;
	transition: all 0.3s ease;
	position: relative;
	font-weight: 700;
	border-radius: 0 !important;
}

.pb-product-mega-menu__tab:hover,
.pb-product-mega-menu__tab:focus {
	opacity: .7;
	outline: none;
}

.pb-product-mega-menu__tab.is-active {
	background: var(--color-rouge);
	opacity: 1;
}

.pb-product-mega-menu__tab::before {
	content: '';
	display: block;
	top: 0;
	height: 100%;
	position: absolute;
	right: 100%;
	width: 10vw;
	transition: all 0.3s ease;
}

.pb-product-mega-menu__tab.is-active::before {
	background: var(--color-rouge);
}

/* Lien classique (items sans template mais avec URL) */
.pb-product-mega-menu__link {
	display: block;
	width: 100%;
	padding: 12px 20px !important;
	background: none;
	border: none;
	text-align: left;
	cursor: pointer;
	color: var(--color-blanc);
	text-decoration: none;
	line-height: 1.4;
	transition: all 0.3s ease;
	position: relative;
	font-weight: 700;
	border-radius: 0 !important;
}

.pb-product-mega-menu__link:hover,
.pb-product-mega-menu__link:focus {
	opacity: .7;
	outline: none;
}

/* Panels */
.pb-product-mega-menu__panel {
	display: none;
}

.pb-product-mega-menu__panel.is-active {
	display: block;
}

/* Bouton retour — masqué par défaut, visible uniquement en is-panel-view */
.pb-product-mega-menu__back {
	display: none;
}

.mega-menu-sous-titre {
	font-weight: bold;
	line-height: 1.25;
	margin-bottom: 1rem !important;
	color: var(--color-vert-noir);
}

.mega-menu-sous-titre strong {
	font-size: 1.25em;
}

.mega-menu-bouton-matelas {
	position: absolute;
	bottom: 0;
	right: 0;
	background: var(--color-rouge) !important;
	border-radius: 2em 0 0 0 !important;
}

.mega-menu-bouton-matelas:hover {
	background: var(--color-rouge-hover) !important;
}

.pb-product-mega-menu__panel ul {
	padding-left: 15px;
	line-height: 1.2;
	font-size: .85em;
}

.pb-product-mega-menu__panel ul li {
	margin-bottom: .5rem;
}

.pb-product-mega-menu__panel ul a {
	color: var(--color-vert-noir);
}

.pb-product-mega-menu__panel ul a:hover {
	opacity: .75;
}

.mega-menu-div-center {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
}

.mega-menu-link-all {
	font-weight: bold !important;
	color: var(--color-vert-noir);
	font-size: .85em;
}

.mega-menu-link-all:hover {
	opacity: .75;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (min-width: 1025px) {

	/* Layer — masqué via transform pour conserver la place dans le flux.
	   Déplacé dans <body> via JS pour garantir la pleine largeur
	   indépendamment du container Elementor parent. */
	.pb-product-mega-menu {
		display: block;
		transform: translateY(-100vh);
		position: absolute;
		top: 0; /* écrasé dynamiquement par JS */
		left: 0;
		width: 100%;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
		z-index: 1000;
	}

	.pb-product-mega-menu.is-open {
		transform: translateY(0);
	}

	/* Conteneur flex interne */
	.pb-product-mega-menu__inner {
		display: flex;
		margin: 0 auto;
		min-height: 400px;
		transform: translateY(25px);
		transition: all .3s;
		opacity: 0;
		background: rgba(215, 217, 206, .95);
	}

	.pb-product-mega-menu.is-open .pb-product-mega-menu__inner {
		transform: translateY(0);
		opacity: 1;
	}

	/* Colonne gauche — tabs de navigation */
	.pb-product-mega-menu__tabs {
		display: flex;
		flex-direction: column;
		width: 200px;
		flex-shrink: 0;
		padding: 24px 0;
		background: var(--color-vert-logo);
		border-radius: 0 30px 30px 0;
		position: relative;
	}

	.pb-product-mega-menu__tabs::before {
		content: '';
		display: block;
		background: var(--color-vert-logo);
		position: absolute;
		top: 0;
		height: 100%;
		right: 100%;
		width: 10vw;
	}

	/* Zone droite — panels */
	.pb-product-mega-menu__panels {
		flex: 1;
		overflow: hidden;
	}

	/* Bouton retour — non pertinent sur desktop */
	.pb-product-mega-menu__back {
		display: none;
	}

}

@media (min-width: 1367px) {

	.pb-product-mega-menu__inner {
		padding-left: 5%;
	}

	.pb-product-mega-menu__tabs {
		width: 250px;
	}

}

@media (max-width: 1024px) {

	.literiland-drawer .literiland-nav__menu .menu-item--has-product-mega-menu {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.literiland-drawer .literiland-nav__menu .menu-item--has-product-mega-menu > a {
		flex: 1;
	}

	/* Override du display: none défini dans literiland-nav.css */
	.literiland-drawer .literiland-nav__menu .menu-item--has-product-mega-menu > .sub-menu {
		display: block;
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border-radius: 0;
		background: transparent;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.35s ease;
		width: 100%;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.literiland-drawer .literiland-nav__menu .menu-item--has-product-mega-menu.is-expanded > .sub-menu {
		max-height: 600px;
	}

	.literiland-drawer .literiland-nav__menu .menu-item--has-product-mega-menu .sub-menu li > a {
		display: block;
		padding: 12px 20px 12px 36px;
		color: var(--color-blanc) !important;
		font-weight: 700;
		font-size: 1.2rem;
		text-decoration: none;
		opacity: 0.85;
	}

	.literiland-drawer .literiland-nav__menu .menu-item--has-product-mega-menu .sub-menu li > a:hover {
		background: rgba(255, 255, 255, 0.1);
		opacity: 1;
	}

}

@media screen and (max-width: 767px) {

	.mega-menu-sous-titre {
		font-size: 1.25em;
	}

	.mega-menu-bouton-matelas {
		position: relative;
		border-radius: 2em !important;
	}

}