/* ═══════════════════════════════════════════════════════════════
   marq-sidebar-menu.css — transforme le menu popup en sidebar droite
   avec push effect du contenu vers la gauche
   ═══════════════════════════════════════════════════════════════ */

:root{
	--marq-sb-width: 420px;
	--marq-sb-ease: cubic-bezier(.7,0,.18,1);
	--marq-sb-dur: .55s;
}

html, body{overflow-x:clip}

/* Override Billey : .site a overflow:hidden qui casse position:sticky des descendants.
   On retire pour laisser sticky/fixed fonctionner. Le clipping horizontal est déjà géré par overflow-x:clip sur html/body. */
#page.site{overflow:visible !important}

/* Push effect : tous les enfants directs du body sauf le popup */
body > *:not(#popup-canvas-menu):not(.never-translate){
	transition: transform var(--marq-sb-dur) var(--marq-sb-ease);
	will-change: transform;
}
body.page-popup-open > *:not(#popup-canvas-menu){
	transform: translateX(calc(var(--marq-sb-width) * -1));
}

/* ═══ Sidebar : reset complet du popup full-screen Billey ═══ */
#popup-canvas-menu{
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	left: auto !important;
	bottom: 0 !important;
	width: var(--marq-sb-width) !important;
	max-width: 92vw !important;
	height: 100vh !important;
	height: 100dvh !important;
	background: #fafaf7 !important;
	transform: translateX(100%) !important;
	transition: transform var(--marq-sb-dur) var(--marq-sb-ease) !important;
	z-index: 9999 !important;
	overflow-y: auto !important;
	overflow-x: clip !important;
	-webkit-overflow-scrolling: touch;
	padding: clamp(2rem,3.5vw,3rem) clamp(2rem,3.5vw,3rem) clamp(2rem,3.5vw,3rem);
	display: flex !important;
	flex-direction: column !important;
	gap: 0;
	box-shadow: -28px 0 60px -28px rgba(0,0,0,.18), -8px 0 24px -8px rgba(0,0,0,.06);
	font-family: 'Satoshi','Helvetica Neue',Helvetica,Arial,sans-serif;
}
#popup-canvas-menu.open{
	transform: translateX(0) !important;
}

/* Backdrop sur le contenu poussé : assombrissement léger + capture du clic */
body::before{
	content: "";
	position: fixed;
	inset: 0;
	background: rgba(15,14,13,.18);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--marq-sb-dur) var(--marq-sb-ease);
	z-index: 9000;
}
body.page-popup-open::before{
	opacity: 1;
	pointer-events: auto;
	cursor: pointer;
}

/* ═══ Bouton fermeture ═══ */
#popup-canvas-menu #page-close-main-menu,
#popup-canvas-menu .page-close-main-menu{
	position: absolute !important;
	top: clamp(1.4rem,2.5vw,2rem) !important;
	right: clamp(1.4rem,2.5vw,2rem) !important;
	left: auto !important;
	width: 24px !important;
	height: 24px !important;
	border-radius: 0 !important;
	background: transparent !important;
	border: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: transform .25s ease, opacity .2s ease !important;
	cursor: pointer !important;
	margin: 0 !important;
	padding: 0 !important;
	opacity: .8 !important;
}
#popup-canvas-menu #page-close-main-menu:hover,
#popup-canvas-menu .page-close-main-menu:hover{
	opacity: 1 !important;
	transform: rotate(90deg);
}
/* Burger → croix fine */
#popup-canvas-menu .burger-icon{
	position: relative !important;
	width: 18px !important;
	height: 18px !important;
	display: block !important;
}
#popup-canvas-menu .burger-icon span{
	position: absolute !important;
	left: 0 !important;
	top: 50% !important;
	width: 18px !important;
	height: 1px !important;
	background: #0f0e0d !important;
	border-radius: 0 !important;
	transition: transform .3s var(--marq-sb-ease) !important;
}
#popup-canvas-menu .burger-icon-top{transform: translateY(-50%) rotate(45deg) !important}
#popup-canvas-menu .burger-icon-bottom{transform: translateY(-50%) rotate(-45deg) !important}

/* ═══ Logo (option : ajouter un titre en haut) ═══ */
#popup-canvas-menu::before{
	content: "Menu";
	display: block;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #9a958c;
	margin-bottom: clamp(2rem,4vw,2.8rem);
}

/* ═══ Navigation ═══ */
#popup-canvas-menu #page-navigation{
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	position: static !important;
	transform: none !important;
}
#popup-canvas-menu .menu__container,
#popup-canvas-menu #off-canvas-menu-primary{
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0;
	width: 100% !important;
}
#popup-canvas-menu .menu__container > li{
	border-bottom: 1px solid rgba(0,0,0,.06) !important;
	padding: 0 !important;
	margin: 0 !important;
}
#popup-canvas-menu .menu__container > li:last-child{border-bottom: none !important}
#popup-canvas-menu .menu__container > li > a,
#popup-canvas-menu .menu-item-title{
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 1.1rem 0 !important;
	font-size: clamp(1.1rem, 1.4vw, 1.35rem) !important;
	font-weight: 500 !important;
	color: #0f0e0d !important;
	letter-spacing: -0.018em !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	text-transform: none !important;
	transition: opacity .2s ease, transform .25s var(--marq-sb-ease) !important;
	font-family: 'Satoshi','Helvetica Neue',Helvetica,Arial,sans-serif !important;
}
#popup-canvas-menu .menu__container > li > a:hover .menu-item-title,
#popup-canvas-menu .menu__container > li:hover > a{
	color: #0f0e0d !important;
}
#popup-canvas-menu .menu__container > li > a:hover::after{
	opacity: 1 !important;
	color: #0f0e0d;
}
#popup-canvas-menu .menu__container > li > a::after{
	content: "→";
	font-size: 1.1em;
	opacity: .3;
	transition: opacity .2s ease, transform .25s var(--marq-sb-ease);
	margin-left: 1rem;
}
#popup-canvas-menu .menu__container > li > a:hover::after,
#popup-canvas-menu .menu__container > li.opened > a::after{
	opacity: .9;
}
/* Toggle sub-menu indicator (override Billey) */
#popup-canvas-menu .toggle-sub-menu{display: none !important}

/* Active item */
#popup-canvas-menu .current-menu-item > a .menu-item-title,
#popup-canvas-menu .current-menu-ancestor > a .menu-item-title{
	color: #0f0e0d !important;
}
#popup-canvas-menu .current-menu-item > a::before,
#popup-canvas-menu .current-menu-ancestor > a::before{
	content: "";
	width: 18px;
	height: 1.5px;
	background: #ff6839;
	margin-right: .9rem;
	border-radius: 2px;
	flex-shrink: 0;
}

/* ═══ Sous-menus ═══ */
#popup-canvas-menu .sub-menu,
#popup-canvas-menu .children{
	list-style: none !important;
	margin: 0 0 .8rem !important;
	padding: 0 0 0 1rem !important;
	display: none;
	border-left: 1px solid rgba(0,0,0,.08);
}
#popup-canvas-menu li.opened > .sub-menu,
#popup-canvas-menu li.opened > .children{
	display: block !important;
}
#popup-canvas-menu .sub-menu li,
#popup-canvas-menu .children li{
	border-bottom: none !important;
	padding: 0 !important;
}
#popup-canvas-menu .sub-menu li a,
#popup-canvas-menu .children li a{
	display: block !important;
	padding: .55rem 0 !important;
	font-size: .95rem !important;
	color: #6b6760 !important;
	text-decoration: none !important;
	font-weight: 400 !important;
	transition: color .15s ease, transform .2s var(--marq-sb-ease) !important;
	letter-spacing: -0.003em !important;
}
#popup-canvas-menu .sub-menu li a:hover,
#popup-canvas-menu .children li a:hover{
	color: #0f0e0d !important;
	transform: translateX(3px);
}
#popup-canvas-menu .sub-menu li .menu-item-wrap,
#popup-canvas-menu .children li .menu-item-wrap{padding: 0 !important; margin: 0 !important}
#popup-canvas-menu .sub-menu .menu-item-title,
#popup-canvas-menu .children .menu-item-title{
	font-size: .95rem !important;
	font-weight: 400 !important;
	color: #6b6760 !important;
	padding: 0 !important;
}

/* ═══ Mobile ═══ */
@media (max-width: 600px){
	:root{ --marq-sb-width: 88vw; }
	#popup-canvas-menu{padding: 4.5rem 1.6rem 2rem !important}
	#popup-canvas-menu::before{margin-bottom: 1.6rem}
}

/* Safety : empêche le scroll body quand sidebar ouverte */
body.page-popup-open{overflow: hidden !important}


/* Mobile : on force le bouton "Menu" desktop (qui ouvre notre sidebar custom)
   et on cache le bouton mobile Billey (qui ouvrait l'ancien menu mobile) */
@media (max-width:1024px){
	#page-open-mobile-menu{display:none !important}
	#page-open-main-menu{
		display:inline-flex !important;
		align-items:center !important;
		gap:10px;
	}
	/* Alignement précis du burger-icon (29×10px) avec le texte "Menu" :
	   Billey utilise align-items:center mais le burger-icon a un height très petit (10px)
	   alors que le texte avec line-height par défaut prend ~18px. On normalise. */
	#page-open-main-menu .burger-icon{
		width:22px !important;
		height:14px !important;
		display:flex !important;
		flex-direction:column !important;
		justify-content:space-between !important;
		flex-shrink:0 !important;
	}
	#page-open-main-menu .burger-icon span{
		position:static !important;
		width:100% !important;
		height:2px !important;
	}
	#page-open-main-menu .burger-title{
		margin:0 !important;
		line-height:1 !important;
		font-size:12px !important;
		letter-spacing:1px !important;
	}
}


/* Nav sidebar : items vers Giga avec picto + flèche */
/* Giga items dans la nav : ferré à gauche comme les autres items (sub-menu) */
#popup-canvas-menu .sub-menu li.nav-giga-item,
#popup-canvas-menu .children li.nav-giga-item{text-align:left !important}
#popup-canvas-menu .sub-menu li.nav-giga-item > a,
#popup-canvas-menu .children li.nav-giga-item > a{display:flex !important;align-items:center !important;justify-content:flex-start !important;width:100% !important;text-align:left !important}
#popup-canvas-menu .sub-menu li.nav-giga-item .menu-item-wrap,
#popup-canvas-menu .children li.nav-giga-item .menu-item-wrap{flex:1;min-width:0;text-align:left}
#popup-canvas-menu .sub-menu li.nav-giga-item .menu-item-title,
#popup-canvas-menu .children li.nav-giga-item .menu-item-title{display:inline-flex !important;align-items:center !important;gap:.55rem !important;justify-content:flex-start !important;text-align:left !important;width:100%}
/* Annule la flèche → standard sur les items giga (on garde notre svg flèche externe ↗) */
#popup-canvas-menu .nav-giga-item > a::after{content:"" !important;display:none !important}
#popup-canvas-menu .nav-giga-ico{width:16px;height:16px;flex-shrink:0;border-radius:3px;display:inline-block}
#popup-canvas-menu .nav-giga-arrow{width:12px;height:12px;opacity:.5;flex-shrink:0;margin-left:.15rem;transition:opacity .2s ease,transform .2s ease}
#popup-canvas-menu .nav-giga-item:hover .nav-giga-arrow{opacity:1;transform:translate(2px,-2px)}