/* Définition des polices personnalisées */



/* Navigation */

.color{

	color: #ff8906;

	color: hsl(234, 44%, 24%);

	color: hsl(256, 8%, 70%);

	color: hsl(256, 3%, 92%);

	color: #1D2424;

}

.navbar

{

    position: fixed;

    padding: 30px;

    display: flex;

    justify-content: space-between;

    width: 100%;

    box-sizing: border-box;

    align-items: center;

	top: 0px;

	height: 8vh;

	z-index: 999;

	background-color: rgba(0, 0, 0, 0.459);

}



.navbar .nav-links ul

{

    display: flex;

}

.navbar .nav-links ul li

{

    margin: 0 10px;

    transition: 0.3s ease;

}



.navbar a{

    color: white;

    padding: 10px;

    border-radius: 20px;

}

.navLink::after{

	content: "";

	display: block;

	position: absolute;

	width: 6vw;

	height: 4px;

	background: #ff8906;

	transform: scale(0);

	transition: transform 0.2s ease-in-out;

}

.navLink:hover::after{

	transform: scale(1);

}

.navbar .menu-hamburger{

    display: none;

    width: 5vw;

    position: absolute;

    right: 2.5vw;

    top: 2.5vh;

}

.logo_title{

	font-weight: bold;

	font-size: 2vw;

	font-style: italic;

}

.navbar a.link_menu_hamb{

	display: none;

}

/* Header */

#header

{

	position: relative;

	top: 0px;

	height: 100vh;

	background-image: url(image/fitness_banner.webp);

	background-size: cover;

	background-position: center;

}



/* Bannière */

header .banner_content .banner_text{

	text-align: center;

	margin-bottom: 30px;

	color: #f1f1f1;

	width: 80vw;

}



.banner{

	height: 100%;

	width: 100%;

	display: flex;

	align-items: center;

	justify-content: center;

	background-color: #1d2424ad;

}

.coach_name{

	display: flex;

	position: relative;

	color: #f1f1f1;

	bottom: -20vh;

	left: 0;

}

.coach_name p::after{

	content: '';

	display: block;

	height: 5px;

	width: 50px;

	background-color: #f1f1f1;

}

.content_button{

	color: #1D2424;

	background-color: #ff8906;

	font-size: 4vw;

	border-radius: 20px;

	text-align: center;

	margin-left: auto;

	margin-right: auto;

	transition: 0.3s ease;

	width: auto;

	height: auto;

	cursor: pointer;

}

.content_button.title{

	padding: 10px;

}

.content_button.title.tarif{

	color: #000000;

	width: 20vw;

	margin: 6vh auto;

	padding: 10px;

}



header .banner_content {

	display: flex;

	flex-direction: column;

	justify-content: center;

	height: 100%;

}

.content_button:hover{

	transform: scale(1.05);

}

/* Corps */



.title{

	font-style: italic;

	font-weight: bold;

	display: flex;

	justify-content: center;

	font-size: 2vw;

	padding: 15px 0;

}

.icone{

	width: 3vw;

	margin-right: 20px;

	margin-top: 10px;

}

.title_banner{

	font-style: italic;

	font-weight: bold;

	width: 100%;

	display: flex;

	justify-content: center;

	flex-direction: column;

	font-size: 4.0vw;

}

.secondTitle{

	font-style: italic;

	font-weight: bold;

	width: 100%;

	display: flex;

	justify-content: center;

	flex-direction: column;

	font-size: 3.0vw;

}

.firstTitle::before{

    background-color: #ff8906;

    content: '';

    display: block;

    height: 6px;

    width: 30vw;

    margin-bottom: 5px;

}

.secondTitle::after{

    background-color: #ff8906;

    content: '';

    display: flex;

	position:relative;

	margin-left: 50vw;

    height: 5px;

    width: 20vw;

    margin-bottom: 5px;

}

.underLineBefore, .underLineAfter{

	display: flex;

	flex-direction: column;

	width: 100%;

	text-align: center;

}

.underLineAfter::after{

	background-color: #ff8906;

    content: '';

    display: flex;

	position:relative;

	margin-left: 40vw;

    height: 5px;

    width: 20vw;

    margin-bottom: 5px;

}



.underLineBefore::before{

	background-color: #ff8906;

    content: '';

    display: flex;

	position:relative;

	margin-left: 20vw;

    height: 5px;

    width: 20vw;

    margin-bottom: 5px;

}



.container

{

	width: auto;

	background-color: #1D2424;

	color: hsl(256, 3%, 92%);

	padding: 10px;

	text-align: left;

	display: flex;

	justify-content: center;

	flex-direction: column;

	opacity: 1;

}



#about

{

	width: 100%;

	justify-content: center;

	background-color: hsl(204, 3%, 92%);

	padding-top: 8vh;

}

#prestation, #tarif, #contact{

	padding-top: 8vh;

}



.mosaique{

	width: 100%;

	height: 500px;

	overflow: hidden;

}

.image{

	display: flex;

	flex-direction: row;

	animation-duration: 15s;

	animation-name: imgMosa;

	animation-iteration-count: infinite;

	box-sizing: border-box;

}

.img_mosa{

	height: 500px;

}

@keyframes imgMosa {

	0%{

		transform: translateX(0);

	}

	25%{

		transform: translateX(-889px);

	}

	50%{

		transform: translateX(-1650px);

	}

	75%{

		transform: translateX(-2050px);

	}

	100%{

		transform: translateX(0);

	}

}

.contenu_div

{

	width: auto;

	display: flex;

	flex-direction: row;

	padding: 20px;

}

#first_container

{

	display: flex;

	flex-direction: column;

	background-color: white;

	width: auto;

	left: 0px;

	right: 0px;

	border-radius: 5px;

	box-sizing: border-box;

}

.first_body

{

	display: flex;

	flex-direction: column;

	justify-content: space-around;

	left: 0px;

	right: 0px;

}

.objectifs{

	display: flex;

	flex-direction: row;

}

.doss_div

{

	display: flex;

	padding: 20px;

	align-items: center;

	justify-content: space-evenly;

}




#portrait
{
	width: 100%;
	position: relative;
	height: auto;
	display: flex;
	flex-direction: column;
	background-size: 100%;
	border-radius: 10px;
}

.img_responsive{

	display: none;

	width: 25vw;

	border-radius: 10px;

}

.portrait_img
{
	
	width: 300px;
	height: 300px;
	border-radius: 50%;
	object-fit: cover;
	float: left;
	shape-outside: margin-box;
	margin: 0 40px 5px 0;
}

.imgwtext{
	width: 900px;
	margin: 0 auto;
}

.sportFirst h3{

	margin-bottom: 3vh;

}

ul.sportFirst li{

	margin-bottom: 2vh;

}

.textPort

{

	opacity: 0;

	height: auto;

	padding: 3px;

	background-color: rgba(0, 0, 0, 0.5);

	border-radius: 20px;

	text-align: center;

	color: white;

}


.text.coach{

	width: 40vw;

}



.methode{

	width: 100%;

	padding-top: 20px;

}

.methode_title

{

	width: 100%;

	text-align: center;

	color: #000000;

}

.methode_card{

	display: flex;

	flex-direction: row;

	align-items: center;

	justify-content: center;

	padding: 30px;

}

.methode_card p{

	text-align: left;

}

.container_card

{

	display: flex;

	justify-content: space-evenly;

	align-items: center;

	width: auto;

	height: auto;

}



.card

{

    position: relative;

    width: auto;

    height: auto;

    margin-top: 100px;

    margin: 20px;

    background: #f1f1f1;

    border-radius: 5px;

    transition: 0.3s;

	align-items: center;

	text-align: center;

	box-shadow: 2px 5px 16px 0px #1D2424;

}

.arrow

{

	position: relative;

	width: 40px;

	height: 40px;

	color: #f1f1f1;

}

.arrow_down{

	display: none;

	position: relative;

	width: 40px;

	height: 40px;

}



.card_price

{

    display: flex;

    justify-content: center;

}

.card_title

{

	background-image: url(image/stretch.webp);

	background-size: cover;

	background-position: center;

    display: flex;

	height: 100%;

    justify-content: center;

	align-items: center;

	text-align: center;

	font-size: 2vw;

	font-weight: 600;

	border-radius: 5px;

	color: #f1f1f1;

	

}

.card_title h2{

	border-radius: 5px;

	width: 100%;

	background-color: #1d2424ab;

	padding: 3vh 0;

}

.card_content

{

    display: flex;

    justify-content: center;

	padding: 20px;

}

.card_tab

{

    list-style-type: none;

    padding-left: 0%;

}

.card_tab li

{

	margin-top: 2vh;

    margin-bottom: 2vh;

    text-align: center;

}



.valid{

	width: 2vw;

}

.euro_sign{

	width: 30px;

}

.why_me{

	display: flex;

	justify-content: center;

	flex-direction: column;

	text-align: left;

	padding-left: 15%;

	padding-top: 20px;

	padding-bottom: 20px;

}

.why_me li , .where li{

	list-style-type: circle;

	font-size: 1.5vw;

}

.recoScroll{

	overflow-y: scroll;

	scrollbar-width: 5px;

	width: 20vw;

	height: 20vh;

	padding: 15px;

	font-size: 1.5vw;

}

.reco_card{

	width: auto;

	height: auto;

	box-sizing: border-box;

	margin-bottom: 50px;

	}



	#style-2::-webkit-scrollbar-track

	{

		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

		border-radius: 10px;

		background-color: #F5F5F5;

	}

	

	#style-2::-webkit-scrollbar

	{

		width: 12px;

		background-color: #F5F5F5;

	}

	

	#style-2::-webkit-scrollbar-thumb

	{

		border-radius: 10px;

		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);

		background-color: #1d24249a;

	}

	.rating{

		display: flex;

		flex-direction: row;

		width: 100%;

		justify-content: center;

		align-items: center;

	}



	.fa-star{

		color: #ff8906;

		padding: 20px 5px;

		width: 2vw;

	}



/*Form contact*/

.form_contact{

	width: 100%;

	display: flex;

	justify-content: center;

	align-items: center;

}

.form_contact form{

	display: flex;

	flex-direction: column;

	width: 80vw;

	justify-content: center;

	align-items: center;

}

.form_contact form input{

	width: 60vw;

	height: 4vh;

	font-size: 2vh;

	border-radius: 10px;

	padding-left: 20px;

	padding: 10px;

	padding-top: 10px;

	padding-bottom: 10px;

}

.form_contact form textarea{

	width: 60vw;

	border-radius: 10px;

	padding-left: 20px;

	padding-top: 10px;

	font-size: 2vh;



}

.form_contact form label {

	padding-bottom: 10px;

	padding-top: 20px;

	font-size: 2vw;

}

.form_contact form button{

	margin-top: 20px;

	width: 30vw;

	height: auto;

	border-radius: 20px;

	background-color: #ff8906;

	font-size: 3vw;

	margin-bottom: 20px;

	cursor: pointer;

	transition: 0.3s ease;

	padding: 20px 0;

	font-style: italic;

	color: #000000;

	font-weight: bold;

}

.form_contact form button:hover{

	transform: scale(1.05);

}

/* Footer */

footer{

	width: 100%;

	display: flex;

	flex-direction: column;

	justify-content: center;

	align-items: center;

	padding: 25px 0;

	line-height: 6vh;

	background: rgb(255,137,6);

	background: linear-gradient(0deg, rgba(255,137,6,1) 0%, rgba(29,36,36,1) 30%);

	font-size: 1.5vw;

}

.list-inline{

	text-align: center;

}

.list-inline-item a{

	color: #f1f1f1;

	transition: 0.3s ease;

}

.list-inline-item a:hover{

	text-decoration: underline 3px orange;

	transition: 0.3s ease;

}

.legal_mention{

	padding-top:8vh;

	padding-left: 2vw;

	padding-right: 2vw;

}
.ArticleCGU{
	width: 80%;
	padding-bottom: 40px;
}
.focus{
	color: #ff8906;
}