body.menuOpen{
	overflow: hidden;
}


.header .item-left{
	flex:0 0 17%;
}
.header .item-center{
	flex:0 0 66%;
}
.header .item-right{
	flex:0 0 17%;
	display: flex;
	justify-content: flex-end;
}
.header .item-right a{ 
     text-decoration: none;
     font-size: 16px;
     color:white;
     display: inline-block;
     margin-left: 10px;
     transition: color 0.3s ease;
}
.header .menu > ul > li{
	display: inline-block;
	line-height: 50px;
	margin-right: 1.7rem;
}
.header .menu > ul > li:last-child{
	margin-right: 0;
}
.header .menu > ul > li > a{
	font-size:clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.333), 1.1rem);
	font-weight: 500;
	position: relative;
	text-transform: capitalize;
	transition: color 0.3s ease;
}

.header .menu > ul > li > a:where(:not(.wp-element-button)){
	color: white;
}
.header .menu > ul > li .sub-menu{
	position: absolute;
	height: 0;
	padding: 0;
	z-index: 500;
	background-color:var(--wp--preset--color--base);
	box-shadow: -2px 2px 70px -25px rgba(0,0,0,0.3); 
/* 	padding: 20px 30px; */
	transition: all 0.35s ease-in-out;
	margin-top:-1px;
	opacity:0.9;
	visibility: hidden;
	overflow: hidden;
}
.header .menu > ul > li .menu-header > a, .sub-menu a{
	transition: all 0.35s ease-in-out;
	font-weight: bold;
	color: white;
}
.header .menu > ul{
	margin: 0;
	padding: 0;
}

.mobile-menu-trigger, .desktop-menu-trigger	{
		display: flex;
		height: 30px;
		width: 30px;
		margin-left: 15px;
		cursor: pointer;
		align-items: center;
		justify-content: center;
	}
	.mobile-menu-trigger span, .desktop-menu-trigger span{
		display: block;
		height: 2px;
		background-color: #ffffff;
		width: 24px;
		position: relative;
	}
	.mobile-menu-trigger span:before,
	.mobile-menu-trigger span:after,
	.desktop-menu-trigger span:before,
	.desktop-menu-trigger span:after{
		content: '';
		position: absolute;
		left:0;
		width: 100%;
		height: 100%;
		background-color: #ffffff;
	}
	.mobile-menu-trigger span:before,
	.desktop-menu-trigger span:before{
		top:-6px;
	}
	.mobile-menu-trigger span:after,
	.desktop-menu-trigger span:after{
		top:6px;
	}

.mobile-menu-trigger span, .mobile-menu-trigger span::before, .mobile-menu-trigger span::after,
.desktop-menu-trigger span, .desktop-menu-trigger span::before, .desktop-menu-trigger span::after   {
	transition: all 200ms linear;
}

/* Transformation en croix lorsque la classe active est ajoutée */
.mobile-menu-trigger.active span, 
.desktop-menu-trigger.active span {
    background-color: transparent; /* Cache la bande du milieu */
}

.mobile-menu-trigger.active span::before,
.desktop-menu-trigger.active span::before {
    top: 0;
    transform: rotate(45deg);
}

.mobile-menu-trigger.active span::after,
.desktop-menu-trigger.active span::after {
    top: 1px;
    transform: rotate(-45deg);
}

	


@media(min-width: 996px){



	.header .menu > ul > li .sub-menu > ul > li{
		line-height: 1;
	}
	.header .menu > ul > li .sub-menu > ul > li > a{
		display: inline-block;
		padding: 10px 0;
		font-size: 15px;
		color: #555555;
		transition: color 0.3s ease;
		text-decoration: none;
		text-transform: capitalize;
	}
	.header .menu > ul > li .single-column-menu{
		min-width: 280px;
		max-width: 350px;
	}
	.header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li{
	   line-height: 1;
	   display: block; 
	}
	.header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a {
		padding:10px 0;
		display: inline-block;
		font-size: 15px;
		color:#555555;
		transition: color 0.3s ease;
	}
	.header .menu > ul > li .sub-menu.mega-menu{ 
	    left: 50%;
	    transform: translateX(-50%);	
	}
	
	.header .menu > ul > li .sub-menu.mega-menu-column-4{
	/*   max-width: 1100px; */
	  width: 100%; 	
	/*   display: flex; */
	  flex-wrap: wrap;
	
	}
	.header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item{
	  flex:0 0 25%;
	  padding:0 15px;
	}
	.header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item .title{
		font-size: 16px;
		color:#ea4636;
		font-weight: 500;
		line-height: 1;
		padding:10px 0;
	}
	.header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item.text-center .title{
		text-align: center;
	}
	.header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item img{
		max-width: 100%;
		width: 100%;
		vertical-align: middle;
		margin-top: 10px;
		height: 300px;
		object-fit: cover;
	}
	.header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a:hover,
	.header .menu > ul > li .sub-menu > ul > li .menu-header  > a:hover,
	.header .item-right a:hover,
	.header .menu > ul > li:hover .menu-header > a{
		color:var(--wp--preset--color--contrast);
	}
	.mobile-menu-head,
	.mobile-menu-trigger:not(.desktop), .mobile-search{
		display: none;
	}
	
	.mega-menu.active .menu-main{
		overflow-y: scroll;
	}
	.header .menu > ul > li.menu-item-has-children:hover .sub-menu{
	margin-top: 0;
	height: auto;
	visibility: visible;
	opacity: 1;
	}

	.header .menu > ul > li.menu-item-has-children:hover .sub-menu.formations, .header .menu > ul > li.menu-item-has-children:hover .sub-menu.parcours{
		height: 190%;
	}

}






	.header .menu.menuLeft {
		  position: fixed;
		  width: 100%;
		  background-color: var(--wp--preset--color--base);
		  left: 0;
		  height: 0;
		  opacity: 0;
		  transition: all 0.5s ease;
		  z-index: 1099;
		  padding-top: 0; /* <-- clé ici */
		  width: 400px;
	}

	.header .menu.menuLeft.active{
		  height: 100%;
		  overflow: hidden;
		  opacity: 1;
		   min-height: 100vh;
	}
	
	/* Le conteneur qui scrolle est ici */
	.header .menu.menuLeft ul.menu-main {
	  height: 100%;
	  min-height: 100vh;
	  overflow-y: auto;
	  padding: 20px !important;
	  margin: 0 !important;
	}
	
	.header .menu.menuLeft ul > li .sub-menu{
		line-height: 1;
		margin:10px !important;
		display: block;
	}
	.header .menu.menuLeft > ul > li > a{
		line-height: 50px;
		height: 50px;
		padding:0 50px 0 15px;
		display: block;
		border-bottom: 1px solid rgba(0,0,0,0.1);
	}
	.header .menu.menuLeft > ul > li > a i{
		position: absolute;
		height: 50px;
		width: 50px;
		top:0;
		right: 0;
		text-align: center;
		line-height: 50px;
		transform: rotate(-90deg);
	}
	.header .menu.menuLeft .mobile-menu-head{
		
		height: 60px;
		border-bottom: 1px solid rgba(0,0,0,0.1);
		justify-content: space-between;
		align-items: center;
		position: absolute;
		z-index: 800;
		background-color:var(--wp--preset--color--base);
		top:80px;
		width: 350px;
		left: 20px;
	}
	.header .menu.menuLeft .mobile-menu-head.active{
		display: flex;
		
	}
	
	.header .menu.menuLeft.active .mobile-search{
			position: absolute;
			top: 30px;
			width: 350px;
			left: 20px;
	}

		
	.header .menu.menuLeft .mobile-menu-head .go-back{
		border-right: 1px solid rgba(0,0,0,0.1);
		cursor: pointer;
		line-height: 50px;
		text-align: center;
		color:var(--wp--preset--color--contrast);
		font-size: 16px;
		display: none;
	}
	.header .menu.menuLeft .mobile-menu-head.active .go-back{
		display: block !important;
	}
	.header .menu.menuLeft .mobile-menu-head .current-menu-title{
		font-size: 15px;
		font-weight: 500;
		color:white;
	}
	.header .menu.menuLeft .mobile-menu-head .mobile-menu-close{
	    height: 50px;
		width: 50px;
		border-left: 1px solid rgba(0,0,0,0.1);
		cursor: pointer;
		line-height: 50px;
		text-align: center;
		color:var(--wp--preset--color--contrast);	
		font-size: 25px;
		display: none !important;
	}
	.header .menu.menuLeft ul.menu-main{
		height: 100%;
		padding: 20px !important;
		margin: 0 !important;
		overflow-x: hidden;
		overflow-y: auto;
	}
	.header .menu.menuLeft > ul > li .sub-menu.mega-menu,
	.header .menu.menuLeft > ul > li .sub-menu{
		visibility: visible;
		opacity: 1;
		position: absolute;
		box-shadow: none;
		margin:0 !important;
		padding:5px !important;
		top:-10px;
		left:0;
		width: 100%;
		height: 100%;
		padding-top: 65px;
		max-width: none;
		min-width: auto;
		display: none;
		transform: translateX(0%);
		overflow-y: auto;
	}
	.header .menu.menuLeft > ul > li .sub-menu.active{
		 display: block;
		  position: sitcky;
		  top: 0;
		  left: 0;
		  height: 100%;
		  width: 100%;
		  overflow-y: auto;
		  padding-top: 60px; /* ou ce qu’il faut pour décaler sous le header mobile */
		  z-index: 600;
	}
	
	.header .menu.menuLeft > ul > li .sub-menu.active .is-layout-grid{
		display: block !important;
	} 
	.header .menu.menuLeft > ul > li .sub-menu.active > .wp-block-group {
		padding: 0 !important;
	}		
	
	


	body.mobile-menu-active .scrolled .header .menu:not(.menuLeft) {
        position: fixed;
        width: 30%;
        background-color: var(--wp--preset--color--base);
        left: 0;
        height: 100%;
        opacity: 1;
        z-index: 1099;
        transform: translate(0%);;
    }

    body.mobile-menu-active .scrolled .header .menu > ul {
        display: block;
    }

    body.mobile-menu-active .scrolled .header .menu > ul > li {
        line-height: 1;
        margin: 30px;
        display: block;
    }

    body.mobile-menu-active .scrolled .header .menu > ul > li > a {
        line-height: 50px;
        height: 50px;
        padding: 0 50px 0 15px;
        display: block;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }



/*responsive*/



@media(max-width: 995px){
	
	
	
	
	
	.header .item-right{
		align-items: center;
	}

	.header .menu{
		position: fixed;
		width: 100%;
		background-color:var(--wp--preset--color--base);
		left:0;
		
		height: 0;
/* 		overflow: hidden; */
/* 		transform: translate(100%); */
		opacity: 0;
		transition: all 0.5s ease;
		z-index: 1099;
	}
	.header .menu.active{
	   transform: translate(0%);
	   opacity: 1;
	   height: 100%;
	}
	.header .menu > ul > li{
		line-height: 1;
		margin:30px;
		display: block;
	}
	.header .menu > ul > li > a{
		line-height: 50px;
		height: 50px;
		padding:0 50px 0 15px;
		display: block;
		border-bottom: 1px solid rgba(0,0,0,0.1);
	}
	.header .menu > ul > li > a i{
		position: absolute;
		height: 50px;
		width: 50px; 
		top:0;
		right: 0;
		text-align: center;
		line-height: 50px;
		transform: rotate(-90deg);
	}
	.header .menu .mobile-menu-head{
		display: flex;
		height: 20px;
		border-bottom: 1px solid rgba(0,0,0,0.1);
		justify-content: space-between;
		align-items: center;
		position: relative;
		z-index: 600;
		position: sticky;
		background-color:var(--wp--preset--color--base);
		top:0;
	}
	.header .menu .mobile-menu-head .go-back{
		border-right: 1px solid rgba(0,0,0,0.1);
		cursor: pointer;
		line-height: 50px;
		text-align: center;
		color:var(--wp--preset--color--contrast);
		font-size: 16px;
		display: none;
	}
	.header .menu .mobile-menu-head.active .go-back{
		display: block;
	}
	.header .menu .mobile-menu-head .current-menu-title{
		font-size: 15px;
		font-weight: 500;
		color:#000000;
	}
	.header .menu .mobile-menu-head .mobile-menu-close{
	    height: 50px;
		width: 50px;
		border-left: 1px solid rgba(0,0,0,0.1);
		cursor: pointer;
		line-height: 50px;
		text-align: center;
		color:var(--wp--preset--color--contrast);	
		font-size: 25px;
		display: none !important;
	}
	.header .menu ul.menu-main{
		height: 100%;
		padding: 20px !important;
		margin: 0 !important;
		overflow-x: hidden;
		overflow-y: auto;
	}
	.header .menu.menuLeft.active > ul > li, body.mobile-menu-active .scrolled .header .menu > ul > li{
		margin: 0 !important;	
	}
	.header .menu > ul > li .sub-menu.mega-menu,
	.header .menu > ul > li .sub-menu{
		visibility: visible;
		opacity: 1;
		position: absolute;
		box-shadow: none;
		margin:0;
		padding:15px;
		top:0;
		left:0;
		width: 100%;
		height: 100%;
		padding-top: 65px;
		max-width: none;
		min-width: auto;
		display: none;
		transform: translateX(0%);
		overflow-y: auto;
	}
	.header .menu > ul > li .sub-menu.active{
		display: block;
	}

	
	
	.desktop-menu-trigger{
		display: none;
	}
	.mobile-search{
		display: block;
	}

	.border{ display: none;}
	.header .item-center{
		order:3;
		flex:0 0 100%;
	}
	.header .item-left,
	.header .item-right{
		flex:0 0 auto;
	}
	.v-center{
		justify-content: space-between;
	}
}


@keyframes slideLeft{
	0%{
		opacity:0;
		transform: translateX(100%);
	}
	100%{
	    opacity:1;
		transform: translateX(0%);	
	}
}
@keyframes slideRight{
	0%{
		opacity:1;
		transform: translateX(0%);
	}
	100%{
	    opacity:0;
		transform: translateX(100%);	
	}
}
	.header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item img{
		margin-top:0;
	}
	.header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item.text-center .title{
		margin-bottom: 20px;
	}
	.header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item.text-center:last-child .title{
		margin-bottom:0px;
	}
	.header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item{
		flex: 0 0 100%;
        padding: 0px;
	}
	.header .menu > ul > li .sub-menu > ul > li > a,
	.header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a{
		display: block;
	}
	.header .menu > ul > li .sub-menu.mega-menu > .list-item > ul {
		margin-bottom: 15px;
	}
	.menu-overlay{
		position: fixed;
		background-color: rgba(0,0,0,0.5);
		left:0;
		top:100px;
		width: 100%;
		height: 100vh;
		z-index: 1098;
		visibility: hidden;
		opacity:0; 
		transition: all 0.5s ease;
	}
	.menu-overlay.active{
	  visibility: visible;
	  opacity:1;	
	}
}


/* ==== Desktop trigger for mobile menu ==== */
@media (min-width: 996px) {
  .header .mobile-menu-trigger {
    display: flex !important;
  }
  /* Allow mobile-active styles on desktop */
  .header .menu.active {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translate(0%);
    opacity: 1;
  }
}

/* ==== Override des overflows parents éventuels ==== */
.header,
.header .item-center,
.header .menu {
  overflow: visible !important;
}

/* ==== 1. Fullscreen fixe du menuLeft ==== */
.header .menu.menuLeft {
  position: fixed !important;
  top: 180px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  overflow: hidden !important;      /* Pas de scroll ici */
  z-index: 1099 !important;
  height: auto !important;          /* plus de height:0 ou height:100vh */
  opacity: 0;                       /* on garde la transition d’apparition */
  transition: opacity .3s ease !important;
   box-sizing: border-box;
}

/* ==== 2. Affichage quand on ouvre ==== */
.header .menu.menuLeft.active {
  opacity: 1 !important;
}

.header .menu.menuLeft ul.menu-main{
	top: 80px;
}	

/* ==== 3. Zone scrollable du menu principal ==== */
.header .menu.menuLeft.active ul.menu-main {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  padding: 1rem !important;
  overflow-y: auto !important;      /* Le scroll vertical se fait ici */
  -webkit-overflow-scrolling: touch !important;
}

/* ==== 4. Zone scrollable du sous-menu ==== */
.header .menu.menuLeft.active > ul > li .sub-menu.active {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  overflow-y: auto !important;      /* Scroll vertical en sous-menu */
  -webkit-overflow-scrolling: touch !important;
}