/* SLIDER  */
  .slider,.slider_home{
    height: calc(100vh - 150px);
}
.slider h1,.slider_home h1{
    font-size: 5rem;
    padding: 60px 0 0 5px; 
}
#ctn_title_cta h1,#ctn_title_cta h2{
    /* text-shadow: -5px 1px 0px #51123236; */
    text-align: center;
}
.slider h1,.slider_home h1,#ctn_title_cta h2{
    line-height: 80px;

}
#ctn_title_cta h2{
    text-align: center;
    font-size: 3rem;
    margin: 60px 0;
    
}
.slider video{
    height: 100vh;
    object-fit: cover;
}
#ctn_cta{
    bottom: 150px;
    z-index: 1;
}
#ctn_cta .btn{
   width: max-content;
}
#ctn_cta{
    bottom: 150px;
    z-index: 1;
}
#ctn_fleche{
    bottom: 30px;
    z-index: 1;
    width: 100%;
}
#ctn_fleche img{
    width: 50px;
    transform: rotate(90deg);
}
#ctn_fleche>a{   
display: inline-block;
padding: 15px;
}
div[role=button]:active, input[type=submit]:active{
    transform: scale(.90);
}
/* FIN SLIDER  */

/* slider mobile*/
.img_slider .darkened_image img{
    object-fit: cover;
    object-position: center;
    height: 100vh;
    width: 100%;
}
.darkened_image,video.darkened_image{/*pour assombrir l'image sans mettre le titre dans avec un z-index qui affiche le titre sur tout les slides*/
    background: url(img/filtre.webp) no-repeat center;
    background-size: 100%;
}
.darkened_image{/*pour assombrir l'image sans mettre le titre dans avec un z-index qui affiche le titre sur tout les slides*/
    filter: brightness(60%); 
}
video.darkened_image{
 
    filter: brightness(95%)
}
.img_slider .darkened_image {
    height: 100%;
    width: 100%;
}
.img_slider:not([class*="active"]) .title_slider {
    opacity: 0;
}
.img_slider div:last-child{
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
}
.img_slider div[role="button"]{
    height: max-content;
    position: absolute;
}
.img_slider div[role="button"] a{
    bottom:60px;
    margin-left: -150px;
    font-size: 3rem;   
}
.title_slider{
    transition: all ease-in-out .5s;
}
.img_slider{
    height: 100%;
    width: 100%; 
    top: 0;
    left: 0;  
    opacity: 0;
    transition: opacity 2s; 
}
.img_slider.active{
    opacity: 1; 
}
.active .title_slider{
    opacity: 1;
} 
.slider_home .img_slider{
    width: 100%;
    height: 100%;
}
.slider_home div[role="button"],.slider div[role="button"]{
    top: 80%;
    z-index: 3;
    padding: 30px 50px;
}
.slider_home div[role="button"]>a,.slider div[role="button"]>a{
    padding: 10px;
    display: inline-block;
    background: var(--color3);
    color: var(--color1);
    font-size: 1.5rem;
}
.slider_home div[role="button"]>a:hover,.slider div[role="button"]>a:hover{
    /* background: var(--color3); */
    color: var(--color1);
}
.precedent,.suivant{
    background: url(../img/next_fleche.webp) no-repeat center ;
    background-position: center;
    background-size: 50%;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    background-color:var(--color3) ;
    cursor: pointer;
    padding: 24px;
    opacity: 0;
    transition: all ease-in-out .3s;
}
/* div qui contient les commandes  */
.ctn_cmd_slider_suivant,.ctn_cmd_slider_precedent{
    height: 100%;
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center; 
    z-index: 3;
}
.ctn_cmd_slider_suivant{
    top: 0;
    right: 0;
}
.ctn_cmd_slider_precedent{
    top: 0;
    left: 0;
}
.suivant{
    right: 5vh;
} 
.precedent{
    transform: rotate(180deg);   
} 
.ctn_cmd_slider:hover>div{
    opacity: 1;
}
/*  fin div qui contient les commandes  */

/* fin slider mobile */ 

/* les CTA */
#ctn_title_cta{
    height:calc(100vh - 354px); 
    top:50px;
    z-index: 1;
}
#ctn_fleche a {
    height: auto;
    width: 50px;
    border-radius: 96px;
    background: var(--color3);
}
/* fin les CTA */

@keyframes annimate_scrall{

    0%{
      opacity: 0;
      transform: translateY(-50px) rotate3d(0,1,0, 0deg);
    }

    100%{
      opacity: 1;
    transform: translateY(70px)rotate3d(0,1,0, 360deg);
    }
}
@media screen and (max-width: 979px) {

    .slider h1{
        font-size: 3.5rem;
    }
    #ctn_title_cta{
        transform: translateY(60px);
    }

    #ctn_title_cta h2 {
        font-size: 2.5rem;
    }
}
@media screen and (max-width: 767px) {

    #ctn_cta{
        flex-direction: column ;
        padding: 5px 50px;
        align-items: center;
    }
    #ctn_cta div[role="button"]{
        padding: 5px 50px;
    }
    #ctn_title_cta div > h2 {
        padding-bottom: 0px;
        font-size: 1.5rem;
        line-height: 40px;
    }
    #ctn_title_cta div > h1 {
        transform: translateY(30px);
    }
}
@media screen and (max-width: 350px) {

  
    #ctn_title_cta div > h2 {
    
        line-height: 30px;
       
    }
    #ctn_title_cta div > h1 {
       font-size: 2.5rem;
       line-height: 50px;
    }
}