html{
scroll-behavior: smooth;
}

.page_etiquette{
background-color: #f7f7f7;
padding-bottom: 70px;
}

.content_etiquette{
margin: 70px 0;
background-color: white;
padding: 50px;
}

.container{
max-width: 1600px;
margin: 0 auto;
}

.page_etiquette strong{
font-weight: 700;
}

.content_etiquette p{
color: #333;
line-height: normal;
}

/*HEADER*/
.header_style{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

}

.header_style video{
object-fit: cover;
height: calc(100vh - 75px);
width: 100%;
margin: 75px 0 0 0;
}

.text_header{
position: absolute;
color: white;
font-family: 'Hanken Grotesk', sans-serif;
font-weight: bold;
line-height: normal;
text-align : center;
}

@media (max-width: 798px){
.header_style video{
margin: 0;
height: calc(100vh);
}
}

/*BARRE BLANCHE DE SEPARATION*/
.white_space{
width: 200px;
height: 5px;
background-color: white;
margin: 2% auto;
display: block;
}

.title_page{
font-size: 90px;
font-weight: 700;
}

.subtitle_page{
font-size: 40px;
font-weight: 400;
color: white;
}

@media (max-width: 798px) {
.title_page{
font-size: 50px;
}
.subtitle_page{
font-size: 20px;
}
}

/*INTRODUCTION*/
.intro_etiquette{
display: flex;
align-items: center;
justify-content: center;
}

.intro_etiquette div:first-child{
font-size: 50px;
font-weight: 700;
width: 30%;
line-height: normal;
color: #333;
}


.intro_etiquette div:nth-child(2){
padding: 18px;
font-weight: 300;
line-height: 30px;
}

.intro_etiquette div:last-child{
width: 70%;
}

.intro_etiquette div:last-child p{
text-align: left;
font-size: 18px;
margin-left: 40px;
font-family: 'Hanken Grotesk', sans-serif;
line-height: 30px;
}

.text_intro{
font-family: 'Hanken Grotesk', sans-serif;
font-size: 21px;
text-align: center;
}

/*PREMIERE ETAPE*/
.first_step .header_step{
display: flex;
flex-direction: column;
}

.first_step .title_step{
background-color: #E0E0E0;
padding: 20px 0;
}

.first_step .name_step{
font-size: 30px;
font-family: 'Hanken Grotesk', sans-serif;
text-align: center;
color: #333;
font-weight: 700;
line-height: normal;

}

.first_step .number_step{
font-size: 20px;
font-family: 'Hanken Grotesk', sans-serif;
font-weight: 400;
text-align: center;
color: #333;
line-height: normal;
}

.first_step .text_step{
text-align: left;
font-size: 18px;
font-family: 'Hanken Grotesk', sans-serif;
color: #333;
font-weight: 300;
line-height: 28px;
text-align: justify;
}

.first_step .content_step{
display: flex;
margin: 30px 0;
}

.tag_line{
font-size: 20px;
font-family: 'Hanken Grotesk', sans-serif;
color: #333;
font-weight: 700;
font-family: 'Hanken Grotesk', sans-serif;
line-height: 30px;
text-align: center;
margin-top: 30px;
}

.first_step .subcontent_step{
width: 40%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding-right: 40px;
}

.first_step .video_step{
width: 60%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
position: relative;
overflow: hidden;
}

.first_step .video_step video{
height: 100%;
width: auto;
margin: 0 auto;
display: block;
width: auto;
object-fit: contain;
position: absolute;
}

.first_step .subcontent_step a{
color: black;
padding: 10px 20px;
font-size: 15px;
border-radius: 10px;
font-family: 'Hanken Grotesk', sans-serif;
font-weight: 500;
color: white;
background-color: #333;
}

.first_step .subcontent_step a:hover{
text-decoration: none;
background-color: #E0E0E0;
color: #333;
}

.more_info{
color: black;
padding: 10px 20px;
font-size: 15px;
border-radius: 10px;
font-family: 'Hanken Grotesk', sans-serif;
font-weight: 500;
color: white;
background-color: #333;
margin-top: 40px;
}

.more_info:hover{
font-family: 'Hanken Grotesk', sans-serif;
font-weight: 500;
color: white;
background-color: #333;
text-decoration: none;
}

.more_info2{
color: black;
padding: 10px 20px;
font-size: 15px;
border-radius: 10px;
font-family: 'Hanken Grotesk', sans-serif;
font-weight: 500;
color: white;
background-color: #333;
}

.more_info2:hover{
font-family: 'Hanken Grotesk', sans-serif;
font-weight: 500;
color:#333;
background-color: #E0E0E0;
text-decoration: none;
}

/*DEUXIÈME PARTIE*/
.second_step .header_step{
display: flex;
flex-direction: column;
margin-top: 100px;
}

.second_step .title_step{
background-color: #E0E0E0;
padding: 20px 0;
margin-bottom: 40px;
}

.second_step .name_step{
font-size: 30px;
font-family: 'Hanken Grotesk', sans-serif;
text-align: center;
color: #333;
font-weight: 700;
line-height: normal;

}

.second_step .number_step{
font-size: 20px;
font-family: "Raleway";
font-weight: 400;
text-align: center;
color: #333;
line-height: normal;
}

.second_step .text_step{
margin-top: 40px;
font-weight: 300;
margin-bottom: 40px;
}

.second_step .text_step p{
text-align: left;
font-size: 18px;
font-family: 'Hanken Grotesk', sans-serif;
line-height: 28px;
color: #333;
}

.second_step .content_step{
display: flex;
background-color: white;
padding: 20px;
}

.second_step .subcontent_step{
width: 40%;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.number_savoir{
font-family: 'Arial';
font-size: 70px;
text-align: center;
font-weight: 700;
vertical-align: top;
line-height: 50px;
color: #333;
}

.text_savoir{
font-family: 'Raleway';
font-size: 30px;
font-weight: 700;
color: #333;
line-height: normal;
}

.second_step .video_step{
width: 60%;
}

.second_step a{
color: black;
padding: 10px 20px;
margin-top: 50px;
font-size: 15px;
border-radius: 10px;
font-family: 'Hanken Grotesk', sans-serif;
font-weight: 500;
color: white;
background-color: #333;
}

.second_step a:hover{
text-decoration: none;
background-color: #E0E0E0;
color: #333;
}

.space_savoir_faire{
margin-top: 100px;
}

.savoir_faire{
display: flex;
justify-content: space-between;
align-items: center;
}

.savoir_faire_reverse{
display: flex;
justify-content: space-between;
align-items: center;
}

.info_video{
text-align: right;
}

.info_video_reverse{
text-align: left;
}

.info_video p, .info_video_reverse p {
font-size: 15px;
font-family: 'Raleway';
color: #333;
line-height: 28px;
}
.second_step .video_step video{
margin: 0 auto;
display: block;
width: 100%;
object-fit: contain;
padding: 0 30px;
}

.space_header{
margin-top: 70px;
}

.title_savoir_faire{
text-align: left;
font-size: 25px;
font-family: 'Raleway';
font-weight: 700;
color: #333;
}

.button_link a{
display: block;
margin: 0 20%;
text-align: center;
}

.arrow{
width: 50px;
position: absolute;
top: 85vh;
animation: bounce 2.9s ease infinite;
}

.align_left{
text-align: left;
margin-right: 40px;
}

.align_right{
text-align: right;
margin-left: 40px;
}

.space_left{
padding-left: 40px;
}

.space_right{
padding-right: 40px;
}

.align_button{
display: flex;
justify-content: center;
}

@media (max-width: 780px){
.first_step .content_step{
flex-direction: column;
}
.first_step .subcontent_step{
width: 100%;
margin-bottom: 40px;
}
.first_step .title_step, .second_step .title_step{
padding: 10px;
width: 100%;
}
.video_step video{
width: 170%;
}
.first_step .name_step, .second_step .name_step{
font-size: 30px;
}
.title_savoir_faire{
font-size: 20px;
text-align: center;
margin: 30px 0;
}
.first_step .subcontent_step{
padding: 10px;
}
.space_header{
margin: 50px 0;
}
.second_step .content_step{
flex-direction: column;
}
.second_step .video_step{
order: 2;
}
.second_step .subcontent_step{
width: 100%;
}
.first_step .subcontent_step{
margin: 0;
}
.button_link a{
margin :20px 30%;
}
.savoir_faire, .savoir_faire_reverse{
margin: 0;
padding: 10px;
}
.info_video, .info_video_reverse{
padding: 10px;
text-align: center;
}
.first_step .subcontent_step a{
margin: 20px 0;
}
.text_intro{
padding-top: 50px;
font-size: 20px;
}
.first_step .video_step{
width: 100%;
}
.first_step .video_step video{
position: inherit;
width: 100%;
height: auto;
}
.second_step .video_step video{
padding: 0;
}
.first_step .content_step{
flex-direction: column;
margin: 30px 0;
}
.first_step .subcontent_step{
width: 100%;
}
.second_step .text_step{
margin: 0;
}
.second_step .video_step video {
width: 170%;
}
}

@media (max-width: 1200px){
.intro_etiquette div:first-child{
font-size: 40px;
width: 100%;
text-align: center;
margin-bottom: 40px;
}
.intro_etiquette div:last-child{
width: 100%;
}
.intro_etiquette{
flex-direction: column;
}
.intro_etiquette div:last-child p{
margin-left: 0;
font-size: 15px;
}
.intro_etiquette div:nth-child(2){
text-align: center;
padding: 10px;
}
.content_etiquette{
padding: 20px;
margin-bottom: 60px;
}
.space_left{
padding: 0;
}
.space_right{
padding: 0;
}
.first_step .text_step{
font-size: 15px;
}
.second_step .text_step p{
margin-bottom: 30px;
}
.second_step .header_step{
margin-top: 0;
}
}