/*animation */ 


.anima_up{
    animation: slide_up 1.2s ease-out forwards;
}

.anima_up2{
    animation: slide_up2 1.2s ;
}


.anima_up3{
    animation: slide_up2 1.2s  ease-out forwards;
    animation-delay: 2s; /* démarre quand la première finit */
    opacity: 0;
}

.anima_up_apres {
    animation: slide_up 1.2s ease-out forwards;
    animation-delay: 0.9s; /* démarre quand la première finit */
    opacity: 0;
}


.anima_up_apres2 {
    animation: slide_up 1.2s ease-out forwards;
    animation-delay: 2.5s; /* démarre quand la première finit */
    opacity: 0;
}


.anima_slide_normal{
    animation: slide linear;
    animation-timeline: view();
    animation-range-start: cover 0%;
    animation-range-end: cover 30%;
}


.anima_slide_up_opacity{

    animation: slide_up_view 1.2s ease-in-out forwards ;
    animation-timeline: scroll();
    animation-range-start: cover 0%;
    animation-range-end: cover 30%;
}


.anima_translatex_gauche_view{
    animation: translateX_direct_gauche 1.2s ease-in ;
    animation-timeline: view();
    animation-range-start: cover 0%;
    animation-range-end: cover 30%;
}

.anima_translatex_droit_view{
    animation: translateX_direct_droit 1.2s ease-in ;
    animation-timeline: view();
    animation-range-start: cover 0%;
    animation-range-end: cover 30%;
}

.anima_slide_opa_normal{
    animation: slide_opa linear;
    animation-timeline: view();
    animation-range-start: cover 0%;
    animation-range-end: cover 30%;
}


.anima_width_view{

    animation: width linear;
    animation-timeline: view();
    animation-range-start: cover 0%;
    animation-range-end: cover 30%;

}

.reveal__content {
    clip-path: inset(0 100% 0 0);
   /* animation: clipReveal ease-in-out forwards;
    animation-timeline: view();
    animation-range: cover 5% cover 25%;*/
}

.anima_color{
    
    animation: color_change1 4s ease-in-out infinite;
}




@keyframes color_change1 {

    from{

        color: #0000F2;
        transition: all 1s ;
    }
    to{
        color: #01ccf4;
        transition: all 1s ;
    }
    
}


@keyframes clipReveal {
    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes width {
    
    0% {

        
        width: 0em;
    }
    15%{
        width: 5em;
    }

    45%{
        width: 10em;
    }

    75%{
        width: 15em;
    }
    
    100%{
      
      width: 20em;
    }

}


@keyframes translateX_direct_droit {

    from{
        transform: translateX(300px);
    }
    to{

        transform: translateX(0px);
    }
    
}

@keyframes translateX_direct_gauche {

    from{
        transform: translateX(-300px);
    }
    to{

        transform: translateX(0px);
    }
    
}

@keyframes slide {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
}

@keyframes slide_up_view {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    
    transform: translateY(60px);
    opacity: 0;
  }
}


@keyframes slide_up2 {
  0% {
    transform: translateY(60px);
    opacity: 0;
    backdrop-filter: blur(0px) !important;
  }

  100% {

    transform: translateY(0);
    opacity: 1;
    backdrop-filter: blur(8px) !important;

  }
}

@keyframes slide_up {
  
  0%{
    transform: translateY(60px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }

}


@keyframes slide_opa {
    from {
      transform: translateY(100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }


/*responsive tablette */

@media screen and (min-width: 768px) and (max-width: 1024px) 
{

    .anima_slide_up_opacity{

        animation:none;
    }

}




/*responisve telephone */ 
@media screen and (max-width: 767px)
{


    .anima_slide_up_opacity{

        animation:none;
    }
   
    .anima_slide_normal{

        animation:none;

        }

    .reveal__content {
         clip-path: none;
    }

}