/*VARIABLES*/
 
  

/*------------------------------*/

/*SHARED RULES */
em{font-style: normal;}

/*pointer*/
.pointer,
.remove-class,
.remove-all-class,
.nav-bottom__button{
    cursor:pointer;
}
.no-pointer{cursor:default!important;}

.hide{display: none!important;}

/*download prez*/
.btn-download{cursor: pointer;}
.bd-transparent-again{opacity: 0;}

/*alert*/
.alert{opacity:0;}
.transition-arrive-play .alert{
    opacity:1;
    transition : all 1s cubic-bezier(0, .99, .725, .967) 0.8s;
}

/*theme color body*/
/*.logo-color {opacity:1;transition : all 1s cubic-bezier(0, .99, .725, .967);}
.logo-white {opacity:0;transition : all 1s cubic-bezier(0, .99, .725, .967);}
.body--dark .logo-color {opacity:0;}
.body--dark .logo-white {opacity:1;}*/


/*------------------------------*/

/*TRANSITION PAGE*/

/*BG transition*/
.bg-transition-arrive{
	display: block!important;
}
.transition-arrive-play .bg-transition-arrive{
	top: -140%;
}
.transition-leave-play.transition-leave{
	bottom: 0%;
}

/*Home*/
.home .section.current-screen .wrap-bg {
	transition-delay: 0.2s;
	transition-duration: 1s;
}
/*from*/
.home h1{
	transition : all 0.8s cubic-bezier(.17,.67,.37,.96) 0.8s;
	opacity: 0;
	transform: translateY(20px);
}
/*to*/
.transition-arrive-play.home h1{
	opacity: 1;
	transform: translateY(0px);
}



/*MENU*/
.wrap-menu-2024, .header--for-menu,.wrap-menu-2024 .all-tabs-trigger, .wrap-menu-2024 .all-tab-content {
	transition : all 0.8s cubic-bezier(.17,.67,.37,.96);
	opacity: 0;
}
.wrap-menu-2024{
	transition : 	opacity 0.8s cubic-bezier(.17,.67,.37,.96) 0s,
					left 0s cubic-bezier(.17,.67,.37,.96) 0.8s;
}
.wrap-menu-2024.open{
	transition : 	opacity 0.8s cubic-bezier(.17,.67,.37,.96) 0s,
					left 0s cubic-bezier(.17,.67,.37,.96) 0s;
}
.wrap-menu-2024.open, .wrap-menu-2024.open .header--for-menu, .wrap-menu-2024.open  .all-tabs-trigger, .wrap-menu-2024.open  .all-tab-content{
	opacity: 1;
}
.wrap-menu-2024.open .header--for-menu{
	transition-delay: 0.4s;
	
}
.wrap-menu-2024.open .all-tabs-trigger{
	transition-delay: 0.6s;
}
.wrap-menu-2024.open .all-tab-content{
	transition-delay: 0.8s;
}
.menu-2024__card{
	transition : all 0.8s cubic-bezier(.17,.67,.37,.96);
	transform: scale(0.6);
	opacity:0;
}
.tab-open .menu-2024__card{
	transform: scale(1);
	opacity:1;
}
.menu-2024__card .bg{
	transition : all 0.8s cubic-bezier(.17,.67,.37,.96);
	transform: scale(3.6);
}
.tab-open .menu-2024__card .bg{
	transform: scale(1);
}
.menu-2024__card p{
	transition : all 0.8s cubic-bezier(.17,.67,.37,.96);
	transform: translateY(110%);
}
.tab-open .menu-2024__card p{
	transform: translateY(1%);
}
.menu-2024__card{overflow: hidden;}


.tab-open .menu-2024__card:hover img{
	transform: scale(1.2);
	opacity: 0.4;
}

.tab-open .menu-2024__card:hover p{
	background-color:#000e36; ;
	color: white;
}

/*------------------------------*/

/*SLIDER*/
.slider-arrow{cursor: pointer;}
/*nav dot*/
.wrapper-nav-dot > div{
	width: 15px;
	height:15px;
	border-radius: 50%;
	background: var(--main-1);
	transition : all 1s cubic-bezier(0, .99, .725, .967);
	margin:0 5px;
	opacity:0.6;
	cursor: pointer;
	z-index: 1;
}
.wrapper-nav-dot > div.active-dot{
	opacity:1;
	transform: scale(1.4);
}
.wrapper-nav-dot > div:hover{
	transform: scale(1.2);
}

/*------------------------------*/

/*FILTER*/
.filtre-item .cercle{
	transform: scale(0);
}
.filtre-item.active-filter .cercle{
	transform: scale(1);
}

/*------------------------------*/

/*TAB*/
.tab__item.clicked .div-selected,
.tab__item:hover .div-selected{
	transform: scaleY(1);
}
.tab__item .div-selected{
	transition : all 1s cubic-bezier(0, .99, .725, .967);
	transform: scaleY(0);
    transform-origin: bottom center;
}

/*------------------------------*/





/*------------------------------*/

/*MENU*/

/*Menu card*/
.menu [class^="card"] {
	transition : all 1s cubic-bezier(0, .99, .725, .967);
	transform: scale(0.7); 
	opacity: 0;
}
/*Si menu tab :.open.menu .tab-open [class^="card"]*/
.open.menu [class^="card"] {
	transform: scale(1); 
	opacity: 1;
}

/*------------------------------*/

/*CARD*/
[class^="card"] {
	transition : all 1s cubic-bezier(0, .99, .725, .967);
}
[class^="card"]:hover .bg{
    opacity: 0.6;
	transform: scale(1.5);
}
/*card +*/
[class^="card"]:hover .plus-wave{
	height:150px;
	width:150px;
	opacity: 0;
}
[class^="card"]:hover .plus{
	background: var(--main-2);
}

.halo{
	animation: 1s ease-in infinite    haloAnim;
}
@keyframes haloAnim 
{ 
	0% { 
		opacity: 0.3;
		transform: scale(0); 
	} 
	65% {
		opacity: 0.3;
		transform: scale(2.5); 
	} 
	85% {
		opacity: 0;
		transform: scale(3); 
	} 
	100% {
		opacity: 0;
		transform: scale(3); 
	} 
	 
}
/*POPUP*/
.menu, .popup{
	opacity:0;
	transition : 	left 0s cubic-bezier(.63,.18,.52,.72) 0.6s,
					opacity 0.6s cubic-bezier(.63,.18,.52,.72) 0s;
}

.menu.open, .popup.open{
	left:0%;
	opacity:1;
	transition : 	left 0s cubic-bezier(.63,.18,.52,.72) 0s,
					opacity 0.4s cubic-bezier(.63,.18,.52,.72) 0s;
}

/*popup bg*/
.popup .wrap-bg {
    filter: blur(40px);
    opacity: 0;
    transform: scale(1.4);
    transition : all 0.6s cubic-bezier(0.020, 0.360, 0.335, 0.995) 0s;
}
.popup.open .wrap-bg{
    filter: blur(0px);
    opacity: 1;
    transform: scale(1);
}

/*------------------------------*/


/*ANIMATION WAVE*/
.wave-dot{animation: 2s ease-in infinite  both running roundanim;}
.plus-wave::after {
	width:100%;
	height:100%;
	position: absolute;
	top:0;
	left:0;
	content: "";
	background: var(--main-1);
	transform-origin: center;
	transform: scale(1.5);
	animation: 1s ease-in infinite  both running roundanim;
	border-radius: 50%;
	z-index: -1;
}
@keyframes roundanim 
{ 
	0% { 
		opacity: 1;
		transform: scale(0); 
	} 
	95% {
		opacity: 0;
		transform: scale(1.5); 
	} 
	100% {
		opacity: 0;
		transform: scale(1); 
	}  
}


/************************************************************************/
                                    /*DESKTOP ONLY*/
/************************************************************************/
p {
	transition : all 1s cubic-bezier(0, .99, .725, .967);
}
@media screen and (min-width: 1024px) {
	.alert.open{left:0%;}


	/*NAV BOTTOM*/
	/*apparatition chargement page*/
	.nav-buttom__wrap-button{
		height:0px;
		transition : all 1s cubic-bezier(0, .99, .725, .967) 0.3s;
		overflow: hidden;
		padding-top: 0;
		padding-bottom: 0;
	}

	.transition-arrive-play .nav-buttom__wrap-button{
		height:80px;
	}
	/*.nav-bottom__button {
	transform: translateY(100%);
	transform-origin: left center;
		transition : all 1s cubic-bezier(0, .99, .725, .967) 1s;
	}
	.transition-arrive-play .nav-bottom__button {
		transform: translateY(0%);
	}*/
/*
	.nav-bottom__button p{
		transform: translateX(-30%);
		opacity: 0;
		transform-origin: center center;
		transition : all 1s cubic-bezier(0, .99, .725, .967) 1.8s;
	}
	.transition-arrive-play .nav-bottom__button p{
		transform: translateX(0%);
		opacity: 1;
	}*/
}


/*pour la border en span d un mot*/
.span {
    transition : all 1s cubic-bezier(0, .99, .725, .967);
    border-bottom: 0px solid #af2fce;
}
[class*="open"] .span,
[class*="open"].span,
.active-slide  .span,
.active-slide.span{
    border-bottom: 5px solid #af2fce;
}


/*opacity*/
.opacity{
    opacity: 0!important;
    transition: all 1s cubic-bezier(0, .99, .725, .967)
}
[class*="open"] .opacity,
[class*="open"].opacity,
.active-slide .opacity,
.active-slide.opacity {
    opacity: 1!important;
}

/*scaleUp*/
.scale-up{
    transform: scale(0.75)!important;
    transform-origin: center center!important;
    transition: all 1s cubic-bezier(0, .99, .725, .967)
}
[class*="open"] .scale-up, 
[class*="open"].scale-up,
.active-slide .scale-up,
.active-slide.scale-up
{
    transform: scale(1)!important;
}
/*scaleDown*/
.scale-down{
    transform: scale(1.5)!important;
    transform-origin: center center!important;
    transition: all 1s cubic-bezier(0, .99, .725, .967)
}
[class*="open"] .scale-down, 
[class*="open"].scale-down,
.active-slide .scale-down,
.active-slide.scale-down
{
    transform: scale(1)!important;
}
/*scaleYtop*/
.scale-y-top{
    transform: scaleY(1.5)!important;
    transform-origin: top center!important;
    transition: all 1s cubic-bezier(0, .99, .725, .967)
}
[class*="open"] .scale-y-top, 
[class*="open"].scale-y-top,
.active-slide .scale-y-top,
.active-slide.scale-y-top
{
    transform: scaleY(1)!important;
}
/*scaleYbottom0*/
.scale-y-bottom0{
    transform: scaleY(0)!important;
    transform-origin: bottom center!important;
    transition: all 1s cubic-bezier(0, .99, .725, .967)
}
[class*="open"] .scale-y-bottom0, 
[class*="open"].scale-y-bottom0,
.active-slide .scale-y-bottom0,
.active-slide.scale-y-bottom0
{
    transform: scaleY(1)!important;
}
/*scaleYtop0*/
.scale-y-top0{
    transform: scaleY(0)!important;
    transform-origin: top center!important;
    transition: all 1s cubic-bezier(0, .99, .725, .967)
}
[class*="open"] .scale-y-top0, 
[class*="open"].scale-y-top0,
.active-slide .scale-y-top0,
.active-slide.scale-y-top0
{
    transform: scaleY(1)!important;
}
/*scaleXleft0*/
.scale-x-left0{
    transform: scaleX(0)!important;
    transform-origin: left center!important;
    transition: all 1s cubic-bezier(0, .99, .725, .967)
}
[class*="open"] .scale-x-left0, 
[class*="open"].scale-x-left0,
.active-slide .scale-x-left0,
.active-slide.scale-x-left0
{
    transform: scaleX(1)!important;
}
/*scaleXright0*/
.scale-x-right0{
    transform: scaleX(0)!important;
    transform-origin: right center!important;
    transition: all 1s cubic-bezier(0, .99, .725, .967)
}
[class*="open"] .scale-x-right0, 
[class*="open"].scale-x-right0,
.active-slide .scale-x-right0,
.active-slide.scale-x-right0
{
    transform: scaleX(1)!important;
}
/*fromLeft*/
.from-left{
    transform: translateX(-20%)!important;
    opacity: 0!important;
    transform-origin: center center!important;
    transition: all 1s cubic-bezier(0, .99, .725, .967)
}
[class*="open"] .from-left, 
[class*="open"].from-left,
.active-slide .from-left,
.active-slide.from-left{
    transform: translateX(0%)!important;
    opacity: 1!important;
}
/*fromright*/
.from-right{
    transform: translateX(20%)!important;
    opacity: 0!important;
    transform-origin: center center!important;
    transition: all 1s cubic-bezier(0, .99, .725, .967)
}
[class*="open"] .from-right, 
[class*="open"].from-right,
.active-slide .from-right,
.active-slide.from-right{
    transform: translateX(0%)!important;
    opacity: 1!important;
}
/*blur*/
.blur{
    filter: blur(40px)!important;
    transition: all 1s cubic-bezier(0, .99, .725, .967)
}
[class*="open"] .blur, 
[class*="open"].blur,
.active-slide .blur,
.active-slide.blur{
    filter: blur(0px)!important;
}