/*
Theme Name: Hello elementor UD
Description: Theme enfant de Hello elementor. Vous pouvez maintenant effectuer vos modifications en toute sécurité.
Author: Unique Design
Author URI: https://uniquedesign.fr
Template: hello-elementor
Version: 1.0
*/


#bandeau-header{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  /*background-color: rgba(0,0,0,.8);*/
  height: 106px;

  transition: top 0.5s;
  transition-delay: 0.3s;
}

#bandeau-header.hidden {
  top: -110px !important;
}
.carre::before {
    content: "";
    display: block;
    width: 45px;
    height: 45px;
    background-color: #FA8E00;
    position: absolute;
    top: 0;
    left: 0;
}
.carre-haut-gauche::before {
    content: "";
    display: block;
    width: 45px;
    height: 45px;
    background-color: #FA8E00;
    position: absolute;
    top: -23px;
    left:-23px;
}
.carre-haut-gauche-zero::before {
    content: "";
    display: block;
    width: 45px;
    height: 45px;
    background-color: #FA8E00;
    position: absolute;
    top: 0px;
    left:-45px;
}
.carre-haut-droite::before {
    content: "";
    display: block;
    width: 45px;
    height: 45px;
    background-color: #FA8E00;
    position: absolute;
    top: -23px;
    right: -23px;
    left: auto;
}
@media (max-width:760px) {
  .carre-haut-droite::before {
      top: -23px;
      right: 0px;
      left: auto;
  }
}

.menu-item a.elementor-item::after {
	width: 0 !important;
	inset-inline-start: 0 !important;
}
.menu-item.current_page_item a.elementor-item::after,
.menu-item a.elementor-item:hover::after{
	/*border: 1px solid red;*/
	width: 100% !important;
	inset-inline-start: 0 !important;
}

.modula-item-content:hover img {
	opacity: 1 !important;
}
.modula-item-content img::before {
	content: "";
	display: block;
	background-color: #FA8E02;
	width: 100px;
	height: 100px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

.modula-item::before {
	content: "";
	display: block;
	background-color: #FA8E02;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	mix-blend-mode: color;
	opacity: .8;
	transition: all .3s ease-out;
}
.modula-item:hover::before {
	opacity: 0;
	display: none;
}
.figc-inner {
	background-color: #001112;
	backdrop-filter: blur(30px) !important;
	opacity: .8;
  height: 0;
  width: 100%;
	max-width: 33vw;
  position: absolute;
  bottom: 0;
	right: 0;
	transition: all .3s ease-out;
}
.modula-item:hover .figc-inner {
  height: 150px;
}
.jtg-title::after {
	display: none
}
.bande-gauche, .bande-droite, .bande-haut, .bande-bas, .bande-haut2, .bande-bas2  {
	/*pointer-events: auto;*/
}

.video-accueil::before{
    content:"";
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgb(43,127,180);
    background: linear-gradient(180deg, rgba(43,127,180,1) 28%, rgba(43,127,180,0) 100%);
    z-index: 1;
    mix-blend-mode: multiply;
    opacity:.2;
}
.souligne::after {
  content: "";
  display: block;
  position: relative;
  margin-top: 20px;
  height: 22px;
  width: 0%;
  background-color: #FA8E00;
}
.souligne.motion::after {
  content: "";
  display: block;
  position: relative;
  margin-top: 20px;
  height: 22px;
  width: 100%;
  background-color: #FA8E00;
  animation-name: souligne;
  animation-timing-function : cubic-bezier(0.075, 0.820, 0.165, 1.000);
	/*animation-timing-function: ease-in;*/
  animation-fill-mode: both;
  animation-delay: 0;
  animation-duration: 2s;
}

.bouton-expand {
  display: flex;
  justify-content: center;
  transition: all 1s ease-in !important;
}
.bouton-expand .elementor-button-content-wrapper {
  align-items: center;
}
.bouton-expand .elementor-button-text {
  width: 1px;
  height: 20px;
  display: block;
  overflow: hidden;
}
.bouton-expand .elementor-button-icon {
  font-size: 30px;
  margin-top: 5px;
}
.bouton-expand:hover .elementor-button-text {
  width: auto;
  overflow: hidden;
}
.bouton-expand:hover .elementor-button-icon {
  visibility: hidden;
  width: 0;
}

.bande-gauche {
  animation-name: anim-bande-gauche;
  animation-timing-function: ease-in;
  animation-fill-mode: both;
  animation-delay: .3s;
  animation-duration: 2s;
}
.bande-droite {
  animation-name: anim-bande-droite;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
  animation-delay: .4s;
  animation-duration: 2s;
}
.bande-haut {
  animation-name: anim-bande-haut;
  /*animation-timing-function : cubic-bezier(0.075, 0.820, 0.165, 1.000);*/
	animation-timing-function: ease-in;
  animation-fill-mode: both;
  animation-delay: .5s;
  animation-duration: 2s;
}
.bande-bas {
  animation-name: anim-bande-bas;
  animation-timing-function: ease-in;
  animation-fill-mode: both;
  animation-delay: .6s;
  animation-duration: 2s;
}
.bande-haut2 {
  animation-name: anim-bande-haut2;
	animation-timing-function: ease-in;
  animation-fill-mode: both;
  animation-delay: .5s;
  animation-duration: 2s;
}
.bande-bas2 {
  animation-name: anim-bande-bas2;
  animation-timing-function: ease-in;
  animation-fill-mode: both;
  animation-delay: .6s;
  animation-duration: 2s;
}

/* *** ANIMATIONS *** */
@keyframes souligne{
0%{ width: 0%;}
100%{ width: 100%;}
}
@keyframes anim-bande-gauche{
0%{ left: 0px;}
100%{ left: -500px; display:none;}
}
@keyframes anim-bande-droite{
0%{ bottom: 0vh;}
100%{ bottom: -80vh;}
}
@keyframes anim-bande-haut{
0%{ top: 0vh;}
100%{ top: -30vh;}
}
@keyframes anim-bande-bas{
0%{ bottom: 0vh;}
100%{ bottom: -80vh;}
}

@keyframes anim-bande-haut2{
0%{ left: 0vw;}
100%{ left: -100vw;}
}
@keyframes anim-bande-bas2{
0%{ left: 0vw;}
100%{ left: 100vw;}
}