.animation-fade-in-up{
    opacity: 0 !important;
    transform: translateY(50px) !important;
    transition: 400ms 150ms ease !important;
}

.animation-fade-in-up.visible{
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.animation-fade-in-down{
    opacity: 0 !important;
    transform: translateY(-50px) !important;
    transition: 400ms 150ms ease !important;
}

.animation-fade-in-down.visible{
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* .deco-left-denx29.animation-fade-in-down {
    opacity: 0 !important;
    transform: translate(75px, -75px) !important;
    transition: 600ms 1s ease !important;
}


.deco-right-denx29.animation-fade-in-up {
    opacity: 0 !important;
    transform: translate(-75px, 75px) !important;
    transition: 600ms 1s ease !important;
}

.deco-left-denx29.animation-fade-in-down.visible,
.deco-right-denx29.animation-fade-in-up.visible {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
} */

.fade-in{
    opacity: 0 !important;
    transition: 400ms 150ms ease !important;
}

.fade-in.visible{
    opacity: 1 !important;
}

.animation-fade-in-up-children > *,
.animation-fade-in-up-children-inner > * > *{
    opacity: 0 !important;
    transform: translateY(50px) !important;
    transition: 400ms ease !important;
}

.animation-fade-in-up-children > .visible,
.animation-fade-in-up-children-inner > * > *.visible{
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.animation-fade-in-up-children-jet-listing-grid .jet-listing-grid__item{
    opacity: 0 !important;
    transform: translateY(30px) !important;
    transition: 400ms ease !important;
}

.animation-fade-in-up-children-jet-listing-grid .jet-listing-grid__item.visible{
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.animation-listing-fade-in-up-slider .slick-slide{
    opacity: 0 !important;
    transform: translateY(50px) !important;
    transition: 400ms ease !important;
}

.animation-listing-fade-in-up-slider .slick-slide.visible{
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.animation-fade-in-up-children-elementor-grid .e-loop-item{
    opacity: 0 !important;
    transform: translateY(30px) !important;
    transition: 400ms ease !important;
}

.animation-fade-in-up-children-elementor-grid .e-loop-item.visible{
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.jet-listing-grid__item .animation-listing-zoom-on-hover{
    overflow: hidden !important;
}

.jet-listing-grid__item .animation-listing-zoom-on-hover img{
    transition: 400ms;
}

.jet-listing-grid__item:hover .animation-listing-zoom-on-hover img{
    transform: scale(1.05) !important;
    transition: 400ms;
}

.has-animation-listing-item-opacity-hover .jet-listing-grid__item{
    transition: 400ms;
}

.has-animation-listing-item-opacity-hover .jet-listing-grid__item:hover{
    opacity: .87 !important;
    transition: 400ms;
}

.has-gallery-infinite-scroll-animation{
    overflow-x: hidden !important;
    flex-wrap: nowrap !important;
}

.has-gallery-infinite-scroll-animation > *{
    min-width: max-content !important;
    flex-wrap: nowrap !important;
    animation: 80s linear infinite infiniteScroll;
    position: relative !important;
}

.has-gallery-infinite-scroll-animation.inversed > *{
    animation: 80s linear infinite infiniteScrollInversed;
}

.svg-wrapper {
    overflow: hidden !important;
    height: 0 !important;
    transition: 2s 0.25s ease-out !important;
}
.svg-wrapper.revealed {
    height: 488px !important; /* Hauteur totale du SVG */
    /* transition: 2s 0.15s ease-out !important; */
}

.svg-reveal-wrapper {
    position: relative !important;
    display: inline-block !important;
}

.svg-reveal-wrapper svg {
    display: block !important;
}

.svg-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #2A2D40; /* ou couleur du fond */
    z-index: 2;
    transition: width 1s ease-out;
}

.svg-reveal-wrapper.revealed .svg-mask {
    width: 0;
}

@keyframes slide-reveal {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

/* On cache l'image à l'intérieur du widget */
.animation-mask-reveal img,
.animation-mask-reveal video,
.animation-mask-reveal iframe,
.animation-mask-reveal .elementor-custom-embed-image-overlay{
        opacity: 0;
    /* On change le masque : 0% en bas signifie qu'on masque depuis le haut vers le bas */
    clip-path: inset(0 0 100% 0); 
    /* On part d'un peu plus bas pour monter */
    transform: translateY(20px) scale(1.1); 
    transition: clip-path 1.2s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 1.4s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.8s ease;
    will-change: clip-path, transform, opacity;
}

/* Quand le JS ajoute .visible au PARENT (le widget), l'IMAGE s'anime */
.animation-mask-reveal.visible img,
.animation-mask-reveal.visible video,
.animation-mask-reveal.visible iframe,
.animation-mask-reveal.visible .elementor-custom-embed-image-overlay{
    opacity: 1;
    clip-path: inset(0 0 0 0); /* Révélation */
    transform: translateY(0) scale(1); /* Retour à la normale */
}

/* On cache l'image à l'intérieur du widget */
.animation-mask-reveal.inversed img,
.animation-mask-reveal.inversed video{
    opacity: 0;
    clip-path: inset(100% 0 0 0); /* Masqué par le bas */
    transform: translateY(10px) scale(1.1); /* Petit effet de descente + zoom */
    transition: clip-path 1.2s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 1.4s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.8s ease;
    will-change: clip-path, transform, opacity;
}

/* Quand le JS ajoute .visible au PARENT (le widget), l'IMAGE s'anime */
.animation-mask-reveal.inversed.visible img,
.animation-mask-reveal.inversed.visible video{
    opacity: 1;
    clip-path: inset(0 0 0 0); /* Révélation totale */
    transform: translateY(0) scale(1); /* Retour à la normale (remontée) */
}

/* Optionnel : évite les débordements bizarres pendant l'anim */
.animation-mask-reveal .elementor-widget-container {
    overflow: hidden;
}

.delay-children > * { transition-delay: 0.5s !important; }

.delayed { transition-delay: 0.5s !important; }

.delayed-1 { transition-delay: 1s !important; }

.delayed-2 { transition-delay: 2.7s !important; }

.hero-bg-overlay{
    transition: 1s 1s ease !important;
}

/* Le conteneur parent */
.animation-sliding-up-text {
    height: 60px !important; 
    position: relative !important;
    overflow: hidden !important;
    display: block !important;
}

/* Style de base pour TOUS les textes */
.animation-sliding-up-text .elementor-widget-text-editor {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    
    /* ÉTAT DE DÉPART (En bas, invisible) */
    opacity: 0 !important;
    /* On le descend plus bas (150%) pour bien voir la montée */
    transform: translateY(150%) !important; 
    
    /* Transition : on rend le mouvement un peu plus long (0.8s) pour bien l'apprécier */
    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1),
                opacity 0.5s ease !important;
    
    visibility: hidden !important;
}

/* ÉTAT ACTIF (Au milieu) */
.animation-sliding-up-text .elementor-widget-text-editor.active {
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
    z-index: 99 !important;
}

/* ÉTAT SORTIE (Vers le haut) */
.animation-sliding-up-text .elementor-widget-text-editor.exit {
    opacity: 0 !important;
    transform: translateY(-150%) !important;
    visibility: visible !important;
    z-index: 1 !important;
}

/* Alignement du texte */
.animation-sliding-up-text p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 60px !important;
    text-align: center; /* Optionnel : pour centrer si besoin */
}

.is-hero-title{
    transition-delay: 2s !important;
}



/* Conteneur principal */
.lpa-hero-animation-reveal-mask {
    position: relative;
    /* overflow: hidden; */
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* --- ÉTAT INITIAL --- */

/* Le titre (La Porte Académie) */
.lpa-hero-animation-reveal-mask .is-hero-title h1 {
    clip-path: inset(0 50% 0 50%); /* Masqué au centre */
    transition: clip-path 1s cubic-bezier(0.65, 0, 0.35, 1);
    will-change: clip-path;
}

/* Les deux images déco */
.lpa-hero-animation-reveal-mask .deco-left-denx29,
.lpa-hero-animation-reveal-mask .deco-right-denx29 {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    z-index: 1;
    opacity: 0;
    transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1), 
                opacity 0.8s ease;
    will-change: transform, opacity;
}

/* Point de départ spécifique : les images sont empilées au centre */
.lpa-hero-animation-reveal-mask .deco-left-denx29 {
    transform: translate(-50%, -50%) scale(0.4);
}
.lpa-hero-animation-reveal-mask .deco-right-denx29 {
    transform: translate(-50%, -50%) scale(0.4);
}

/* --- ÉTAT ANIMÉ (.is-active ajouté par le JS) --- */

/* Révélation du titre vers les côtés */
.lpa-hero-animation-reveal-mask.is-active .is-hero-title h1 {
    clip-path: inset(0 0% 0 0%);
}

/* Image Or (deco-left-denx29) -> vers le bas à gauche */
.lpa-hero-animation-reveal-mask.is-active .deco-left-denx29 {
    opacity: 1;
    /* Ajuste les % pour placer l'image exactement où tu veux */
    transform: translate(-580%, -10%) scale(1); 
}

/* Image Bleue (deco-right-denx29) -> vers le haut à droite */
.lpa-hero-animation-reveal-mask.is-active .deco-right-denx29 {
    opacity: 11;
    /* Ajuste les % pour placer l'image exactement où tu veux */
    transform: translate(580%, -100%) scale(1);
}


@media only screen and (max-width: 1240px) and (min-width: 0px){
    .deco-left-denx29 img{
        width: 100% !important;
    }

    .deco-right-denx29 img{
        width: 100% !important;
    }

    .deco-left-denx29 {
        /* left: -3em;
        bottom: -1em; */
        width: 60px !important;
    }

    .deco-right-denx29 {
        width: 50px !important;
        /* right: -3em;
        top: 0em; */
    }

    .lpa-hero-animation-reveal-mask.is-active .deco-left-denx29 {
        transform: translate(-500%, -10%) scale(1);
    }

    .lpa-hero-animation-reveal-mask.is-active .deco-right-denx29 {
        transform: translate(500%, -100%) scale(1);
    }
}

@media only screen and (max-width: 1024px) and (min-width: 0px){
    .deco-left-denx29 img{
        width: 50px !important;
    }

    .deco-right-denx29 img{
        width: 40px !important;
    }
}

@media only screen and (max-width: 767px) and (min-width: 0px){
    .has-mobile-gallery-infinite-scroll-animation{
        overflow-x: hidden !important;
        flex-wrap: nowrap !important;
    }

    .has-mobile-gallery-infinite-scroll-animation > *{
        min-width: max-content !important;
        align-items: start !important;
        flex-wrap: nowrap !important;
        animation: 20s linear infinite infiniteScroll;
        position: relative !important;
    }

    .has-mobile-gallery-infinite-scroll-animation.inversed > *{
        animation: 20s linear infinite infiniteScrollInversed;
    }

    .has-gallery-infinite-scroll-animation > *{
        animation: 10s linear infinite infiniteScroll;
    }

    .has-gallery-infinite-scroll-animation.inversed > *{
        animation: 10s linear infinite infiniteScrollInversed;
    }

    .animation-sliding-up-text > *{
        height: 40px !important; 
    }

    /* .deco-left-denx29 {
        left: -3em;
        bottom: -1em;
    }

    .deco-right-denx29 {
        right: -3em;
        top: 0em;
    } */
}

@media only screen and (max-width: 650px) and (min-width: 0px){
    .lpa-hero-animation-reveal-mask.is-active .deco-right-denx29 {
        transform: translate(250%, -150%) scale(1);
    }

    .lpa-hero-animation-reveal-mask.is-active .deco-left-denx29 {
        transform: translate(-300%, 20%) scale(1);
    }
}

@keyframes moveArrow {
    0% {
        transform: translateX(0); /* Position d'origine */
    }
    30% {
        transform: translateX(-5px); /* Recule vers la gauche */
    }
    60% {
        transform: translateX(10px); /* Avance vers la droite */
    }
    100% {
        transform: translateX(0); /* Retour à la position d'origine */
    }
}

@keyframes infiniteScroll {
    0% {
        left: 0%;
    }
    100% {
        left: -80%;
    }
}

@keyframes infiniteScrollInversed{
    0% {
        left: -80%;
    }
    100% {
        left: 0%;
    }
}