html.custom-menu-opened, body.custom-menu-opened {
	overflow: hidden;
}
/*Ajout fond blanc au menu scroll */
.new-menu.elementor-sticky--effects{
	background:#FFF !important;
}

/*Ajout du flou au menu*/
	.new-menu{
		box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(5.3px);
		-webkit-backdrop-filter: blur(5.3px);
	}

	.page-hero-fonce header{
		margin:0px !important;
	}
	
	.page-hero-clair .logo-blanc{
		display:none;
	}
	.page-hero-fonce .elementor-sticky--effects .logo-blanc{
		display:none;
	}
	
	.page-hero-fonce div:not(.elementor-sticky--effects) .logo-orange{
		display:none;
	}

	.new-menu .elementor-icon-list-item + .elementor-icon-list-item {
		border-top: 1px solid #E0E0E0; /* Crée la ligne de séparation */
		margin-top: 10px; /* Espace au-dessus de la ligne */
		padding-top: 10px; /* Espace en-dessous de la ligne (à l'intérieur de l'élément) */
	}

/* CUSTOM DESKTOP */
@media (min-width:1201px){
	
	/* Ajout ombre sous-menu actif */
	.e-n-menu-content.e-active > .e-con{
		box-shadow: 0 4px 35px 0 rgba(0, 0, 0, 0.15);
	}
	    /* 1. On définit l'état INITIAL du sous-menu (quand il est caché) */
    .e-n-menu-content {
        opacity: 0;
        transform: translateX(-20px);  /* On le décale de 20px sur la gauche et on le rend transparent */       
        visibility: hidden; /* On le cache pour l'accessibilité et les interactions */        
        transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0s 0.3s;  /* On définit la vitesse et le style de l'animation */
    }

    /* 2. On définit l'état FINAL du sous-menu (quand il devient actif) */
    .e-n-menu-content.e-active {
        
        opacity: 1; /* On le ramène à sa position normale et on le rend visible */
        transform: translateX(0);                
        visibility: visible; /* On le rend visible immédiatement au début de l'animation */                
        transition: opacity 0.3s ease-out, transform 0.3s ease-out; /* On restaure la transition de visibility */
    }
	
	/* bouton login mobile cacher sur mobile */
	.bouton-login .elementor-button-icon{
        display:none;
    }
	
	/* changement couleur séparateur hero fonce non sticky */
	.page-hero-fonce .new-menu:not(.elementor-sticky--effects) .elementor-widget-n-menu .e-n-menu-item:not(:last-of-type) .e-n-menu-title:after{
		border-color:#FFF;
	}
	
	.page-hero-fonce div:not(.elementor-sticky--effects) .e-n-menu-heading .e-n-menu-title-text{
		color:#FFF !important;
	}
	
	.page-hero-fonce .elementor-sticky:not(.elementor-sticky--effects) .e-n-menu-heading .e-n-menu-dropdown-icon svg , .page-hero-fonce .elementor-sticky:not(.elementor-sticky--effects) .e-n-menu-title:hover svg{
		fill:#FFF !important;
		color:#FFF !important;
}
	
	.page-hero-fonce .elementor-sticky--effects .e-n-menu-heading span.e-n-menu-title-text{
		color:inherit !important;
	}	
	
	#bottom-header-mobile{
		display:none !important;
	}
	
	/*overlay noir survol menu*/
	/*
	.e-n-menu-content.e-active::after {
    	content: '';
    	width: 100%;
    	height: calc(100vh + 250px);
    	background: #00000061;
    	position: absolute;
    	margin-top: -250px;
    	z-index: -1;
    	pointer-events: none;
	}*/

	/* on change le curseur pour le menu */
	.new-menu li.e-n-menu-item .e-n-menu-title-text{
		cursor:pointer;
	}
	
	.new-menu .elementor-icon-list-items li a:hover{
    background: rgba(239, 239, 239, 1);
    border-radius:5px;
}
/* effet de hover sous menu */
.liste-flex-secondaire li a{
    padding-top: 4px;
    padding-bottom:4px;
    padding-left:10px;
}

.liste-flex ul{
    height: 100%;
    width: 100%;
    display: inline-flex
;
    flex-direction: column;
    justify-content: space-evenly;
}

.liste-flex li a{
    padding-top: 8px;
    padding-bottom:8px;
    padding-left:10px;
}

.liste-flex-secondaire ul{
    height: 100%;
    width: 100%;
    display: inline-flex
;
    flex-direction: column;
    justify-content: space-evenly;
}
	
}
/* FIN CUSTOM DESKTOP */

/*  CUSTOM MOBILE */
@media (max-width:1200px){
	
	header .menu-flou{
		background-color:#FFF !important;
	}
	
	.e-n-menu-content.e-active div{
		height:auto !important;
	}

/* design du sous menu sur mobile*/
.e-n-menu-wrapper {
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: flex-start;
	flex-wrap: nowrap;
	align-items: center;
	margin-top:20px !important;
	}
	
.elementor-widget-n-menu .e-n-menu-heading{
	flex-direction:column !important;
	}

	
.e-n-menu-heading{
	width:calc(100% - 40px) !important;
	margin-top:12px !important;
	background:#FFF;
	border-radius:8px;
	border: 1px solid #EEE;
	margin-bottom:12px !important;
	}

	/* fond lorsque sous menu ouvert */
	body::before {
    content: '';
    position: fixed; /* Fixé à la fenêtre, derrière le menu */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(249, 249, 249, 1); 
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}

/* On déclenche le fondu quand le menu s'ouvre */
body.custom-menu-opened::before {
    opacity: 1;
    visibility: visible;
}

/* On s'assure que le menu est bien au-dessus du nouveau fond */
.custom-menu-opened header {
    z-index: 999;
    position: relative; /* Nécessaire pour que le z-index s'applique correctement */
}

	button.e-n-menu-toggle:hover {
    	border: 0px !important;
	}

li.e-n-menu-item:not(:last-child):after {
	border-bottom: 1px solid #EEE;
	content: '';
	width: calc(100% - 40px);
	display: block;
	margin: 0 auto;
}

.elementor-widget-n-menu .e-n-menu-item:not(:last-of-type) .e-n-menu-title:after{
	border-color:transparent !important;
	}

li.e-n-menu-item{
	width:100% !important;
	}
	
.e-n-menu-title{
	background-color:transparent !important;
	display: flex !important;
	flex-direction: row !important;
	justify-content: space-between !important;
	align-content: center !important;
	flex-wrap: wrap !important;
	padding:17px 20px !important;
	
}
	
.e-n-menu-content .e-active .elementor-icon-list-item{
	background-color:transparent !important;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-content: center;
	flex-wrap: wrap;
	padding:12px 14px !important;
}

/*.e-n-menu-content .e-active .elementor-icon-list-item:after {
	border-bottom: 1px solid #EEE;
	content: '';
	width: calc(100% - 40px);
	display: block;
	margin: 0 auto;
	}
*/
.new-menu #bottom-header-mobile{
	position:sticky;
	bottom:0;
	z-index:9047483620;
	margin-top:auto;
}

/*
* Style pour le bouton "Retour", qui sera maintenant en haut de l'écran.
*/

.menu-back-button {
	width:calc(100% - 40px);
	display: flex;
	align-items: center;
	font-weight: bold;
	cursor: pointer;
	color: rgba(19, 1, 1, 0.70);
	font-family: Lato;
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-top:12px;
}

.menu-back-button:before {
	content: url(https://gifteo.fr/wp-content/uploads/2025/10/icon-row-menu.svg);
	line-height: 8px;
	transform:rotate(180deg);
	margin-right:11px;
	margin-left:5px;
	}

/*
* Quand un sous-menu est actif...
*/
.e-n-menu-wrapper ul.e-n-menu-heading.submenu-is-active {
 /* Optionnel : Assure que la liste prend toute la hauteur si ce n'est pas déjà le cas */
	/*height: 100%;*/
	}

/*
* ...on masque tous les AUTRES éléments de la liste.
*/
.e-n-menu-wrapper ul.e-n-menu-heading.submenu-is-active > li.e-n-menu-item:not(.is-focused) {
	display: none !important;
	}

/*
* ...et pour l'élément actif, on masque UNIQUEMENT SON TITRE.
* Le sous-menu enfant (.e-n-menu-content) restera visible.
*/

.e-n-menu-wrapper ul.e-n-menu-heading.submenu-is-active > li.e-n-menu-item.is-focused > .e-n-menu-title {
	display: none !important;
	}

.e-n-menu-content.e-active{
	/*height:100vh;*/
	width:100% !important;
	}

.e-n-menu-content .e-active{
	padding-left: 0px;
	overflow-y:unset !important;
	/*background-color:#FFF !important;*/
	border-radius:8px;
	padding-bottom:18px;
	padding-top:18px;
	}
	
	ul.e-n-menu-heading.submenu-is-active {
    border: 0px;
    background: none;
}
	
	/*Custom dropdown sur mobile*/
	.new-menu .e-n-menu-dropdown-icon-closed svg{
		fill:white !important;
	}
	
	.new-menu .e-n-menu-dropdown-icon-closed{
		background-color:rgba(182, 182, 182, 1);
		border-radius:4px;
		padding:6px;
		transform:rotate(270deg);
	}
	
	/*Custom bouton connexion mobile*/
	.bouton-login .elementor-button-icon svg{
    width:35px !important;
    padding:0;
}

.bouton-login .elementor-button-wrapper{
    height:35px;
}

.bouton-login .elementor-button-text{
display:none;
}

.bouton-login .elementor-button:hover{
    color:#FFF !important;
}

.bouton-login .elementor-button,.bouton-login .elementor-button:hover{
    padding:0;
    margin:0;
    line-height:0;
    background-color:#FFF !important;
	opacity:0.8;
}
	
/*Ouverture sous menu on masque tout derriere*/
	/*
.e-n-menu-toggle[aria-expanded="true"] main::before{ 
    content: '';
    background: white !important;
    height: 100vh;
    width: 100%;
    z-index: 1;
    top: 0;
    position: absolute;
}
	*/
	
	.custom-menu-opened .logo-blanc{
		display:none;
	}
	
	.custom-menu-opened .logo-orange{
		display:flex !important;
	}
/*FIN CSS MOBILE*/

  }