.container{ /* Container pour tout le contenu de la page*/
	position: absolute;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
	height:auto;
	width:100%;
}.container_index{ /* Premier container pour l'accueil */
    position: relative;
    height:auto;
    margin:0 0 20px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    z-index: 1;
}.firstline_contain{ /* Début du premier flex*/
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    height:100vh;
    margin-bottom:50px;
    position:relative;
}.left_part_first_contain{ /* Contient le Texte à gauche + Services bloC */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    position: relative;
    height:auto;
}.txt_first{ /* Texte h2 + p*/
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
}.title_index{
    opacity: 0;
    transform: translateX(-100%);
    transition-duration: 1.5s;
    transition: transform 0.6s ease-in-out,
    opacity 0.6s ease-in-out;
}.title_index.active{
    opacity: 1;
    transform: translateX(0%);
}.txt_first h1{ /* */
    margin-bottom:35px;
    font-size:3vw;
    color: rgb(58, 58, 58);
}.txt_first p{
    font-size: 1.2vw;
}.container_services{ /* Container pour les services*/
display: flex;
flex-direction: row;
margin-top: 50px;
justify-content: space-around;
width:100%;
}.container_services a{
text-decoration: none;
color:black;
}.services{ /* Services, tarifs, réservation*/
    border-radius: 13px;
    padding:5px;
    width:8vw;
    min-width: 130px;
    height:25vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    opacity: 0;
    transform: translateY(100%);
    transition-duration: 1.5s;
    transition: transform 0.6s ease-in-out,
    opacity 0.6s ease-in-out;
}.services.active{
    opacity: 1;
    transform: translateY(0%);
}.services h3{ /* */
    margin:15px 0;
    font-size: 3vh;
    color: rgb(51, 47, 47);
}.services img{ /* */
    height:10vh; 
    margin:10px 0 20px 0;
}.image_first_contain{ /* Container de l'Image à droite*/
    height:100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width:100%;
    opacity: 0;
    transform: translateX(100%);
    transition-duration: 1.5s;
    transition: transform 0.6s ease-in-out,
    opacity 0.6s ease-in-out;
}.image_first_contain.active{
    opacity: 1;
    transform: translateX(0%);
}.image_first_contain img{ /* Image à droite*/
    width:90vh;
    max-width:700px;
}
/* Fin du permier flex element*/
/* Début du deuxième fex element*/
.second_line_contain{ /* Début du premier flex*/
    display: flex;
    flex-direction: column;
    position:relative;
}.services_title{ /* Partie service avec le titre et la description*/
display: flex;
align-items: center;
flex-direction: column;
}.services_title h1{
    font-size:50px;
    font-weight: 900;
    color: rgb(58, 58, 58);
    margin-bottom: 25px;
}.services_title p{
    font-size: 3vh;
    font-weight: 600;
    text-align: center;
    width:90%;
    position: relative;
    left:5%;    
    margin-bottom:50px;
}.txt_index{
    opacity: 0;
    transform: translateX(-100%);
    transition-duration: 1.5s;
    transition: transform 0.6s ease-in-out,
    opacity 0.6s ease-in-out;
}.txt_index.active{
    opacity: 1;
    transform: translateX(0%);
}.service{ /* Partie Tablette et smartphone*/
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin-bottom:25px;
}.img_service img, .img_service2 img{
    height:55vh;
    max-height:367px;
}.img_service{
    opacity: 0;
    transform: translateX(-100%);
    transition-duration: 1.5s;
    transition: transform 0.6s ease-in-out,
    opacity 0.6s ease-in-out;
    z-index:1;
}.img_service.active{
    opacity: 1;
    transform: translateX(0%);
}.img_service2{
    opacity: 0;
    transform: translateX(100%);
    transition-duration: 1.5s;
    transition: transform 0.6s ease-in-out,
    opacity 0.6s ease-in-out;
    z-index:1;
}.img_service2.active{
    opacity: 1;
    transform: translateX(0%);
}.info_serv{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    z-index:2;
}.info_serv h2{
    font-size: 40px;
    font-weight: 900;
    color: rgb(58, 58, 58);
}.info_serv p{
    font-size: 18px;
    min-width: 150px;
    max-width:590px;
}
#services{
    position:absolute;
    top:98vh;
}
#accueil{
    position:absolute;
    top:0vh;
}
.price{
    color:#828282;
    font-size: 3.5vh;
    margin-top:10px;
    min-height:50px;
}.info_price p{
    font-size: 1.6vh;
}
/* Fin du deuxième flex element*/
/* Début du troisième flex element : localisation*/
.localisation, .reservation_container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.localisation,#map{
height:80vh;
}#map{
width:90vw;
}
.separator{
    margin:20px 0;
    border-top:1px solid #828282;
    width:90vw;
}.separator_container{
    display: flex;
    justify-content: center;
    align-items: center;
}.localisation h2{
    margin:10px 0 20px 0;
}.txt_localisation{
    width:90vw;
    text-align: left;
    font-size: 2vh;
    color: #828282;
    margin:5px 0;
}.reservation_container h2{
    text-align: center;
    margin-bottom:20px;
}#reservation{
    height:20px;
}#localisation{
    height:20px;
}.horaires{
    
}
/* Fin du troisième flex element : localisation*/
@media screen and (max-width: 1920px) {
    .info_serv{
        width:600px;
    }
}
@media screen and (max-width: 996px) {
    .txt_first p{
        font-size: 16px;
    }.txt_first h1{
        font-size: 35px;
    }.firstline_contain{
    height:100vh;
    }
    .image_first_contain{
        display: none;
    }
  }
@media screen and (max-width: 450px) {
    .firstline_contain{
        position:relative;
        top:5vh;
        height:95vh;
        justify-content: space-between;
    }.txt_first{
        display: flex;
        justify-content: center;
        align-items: center;
        width:94%;
    }.txt_first p{
        font-size: 4.5vw;
    }.txt_first h1{
        font-size: 8vw;
        width:100%;
    }.services{
        min-width:initial;
        width:90px;
        height:120px;
    }.services h3{ /* */
        font-size: 2vh;
    }.contact{
        display: none;
    }.menu_link{
        font-size: 4vw;
    }.img_service img{
        height:auto;
        width:60vw;
    }.img_service{
        
    }.info_serv h2{
        text-align: center;
    }.info_serv h2{
        font-size: 10vw;
        margin:5px 0;
    }.info_serv{
        display: flex;
        justify-content: center;
        align-items: center;
    }.info_serv p{
        min-width: inherit;
        width:90vw;
    }
  }