*
{	box-sizing:border-box;
	margin:0px
}
html
{	font-family: Oswald, Arial;
	font-weight: normal;
	font-style: normal;
	font-size: 16px;
	color : rgb(140, 145, 155);
	letter-spacing: 3.6px;
	font-weight:400;
	text-transform:uppercase;
	z-index: 1;
}
a
{	text-decoration:none;
}
body
{	
	padding:8px;
	text-align:center;
}
/*Mise en forme du Call to action*/
#call_to_action
{
	position: fixed;
	z-index: 2;
	top: 3%;
	right: 5%;
	padding: 8px;
	background-color: #0ba3d1;
	text-transform: none;
	font-family: Lato;
	letter-spacing: 1.25px;
}
#call_to_action p
{
	width: 140px;
	margin-left: auto;
	margin-right: auto;
	font-size: 0.95rem;
	color:white;
}
#call_to_action a
{
	width: 170px;
	display:block;
	font-size: 0.9rem;
	color:#0ba3d1;
	background-color: white;
	border-radius: 3px;
	margin: 5px 0px;
	padding: 0px 5px;
}
/*Mise en forme du bloc principal*/
#bloc_principal
{	width:1050px;
	margin:0 auto;
}
/*Mise en forme de l'entête : image et slogan*/
header img
{	width:100%;
	height:auto;
}
header h1
{	text-align:center;
	font-size:1.05rem;
	
}
#bloc_principal > nav 
{	height:50px;
	margin-top:20px;
	border-top : 1px solid black;
	border-bottom:3px solid black;
	text-align:center;
	
}
#bloc_principal > nav img
{	height:18px;
	width:auto;
}
#bloc_principal > nav a
{	height: 50px;
	line-height: 50px;
	padding-left: 15px;
	padding-right: 15px;
	font-size:1.05rem;
	color : rgb(51, 51, 51);
	font-weight:200;
}
/*Mise en forme de la section alaune*/
#alaune
{	margin-top: 20px;
	position : relative;
}
#alaune img
{	width:100%;
	height:auto;
}
#alaune div
{	position : absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	display : flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}
#alaune div:hover
{	background:rgba(0,0,0,0.5);
}
#alaune p:first-child
{	font-size:0.8rem;
	letter-spacing: 2.6px;
	color:white;
}
	
#alaune p:nth-child(2)
{	font-size:2.5rem;
	color:white;
	font-weight:bold;
	
}
#alaune a
{	padding : 10px 20px;
	border:3px solid white;
	font-size:1.15rem;
	letter-spacing:2px;
	text-transform:uppercase;
	color:white;
	margin-top : 25px;
}
/* Mise en forme du titre d'une section et de la marge haute d'une section */
.titre_section
{	background: url("./../images/technique/section-header.png") repeat-x 0 50%;
	text-align:center;
}
.titre_section h2
{	font-size:2.5rem;
	letter-spacing:2px;
	background-color:white;
	display:inline-block;
}

section
{	margin-top:20px;
}
/* Mise en forme de la section présentant les 3 derniers articles */

#articles div:nth-child(2)
{	display:flex;
	justify-content:space-around;
	align-items:start;
	margin-top:20px;
}
#articles figure
{	width:300px;
	height:250px;
}
#articles figure div
{	width:100%;
	height:200px;
	object-fit:cover;
}
#articles figure img
{	height:100%;
	width:100%;
}
#articles a
{	letter-spacing:0.9px;
	color:black;
	font-weight:normal;
	
}  
#articles figure  h2
{	font-size:18px;
	font-weight:normal;
}
#articles figure p
{	font-size:14px;
	color:RGB(68,68,68);
}

/*Mise en forme de la section dédiée à un témoignage*/

#temoignage div:nth-child(2)
{	margin-top:20px;
	text-transform:none;
	font-family:lato;
	letter-spacing:normal;
}
#temoignage blockquote::before
{	quotes: "\201C""\201D""\2018""\2019";
	content: open-quote;
	font-size: 4em;
	line-height: 0.1em;
	margin-right: .15em;
	vertical-align: -.4em;
}
#temoignage blockquote::after
{	content: close-quote;
	font-size: 4em;
	line-height: .1em;
	margin-left: .15em;
	vertical-align: -.7em;
}
#temoignage blockquote
{	font-family: Georgia,"Times New Roman",Times,serif;
	color: #000;
	font-size: 1.2rem;
	line-height: 1.5em;
	quotes: "\201C""\201D""\2018""\2019";
	font-style:italic;
}
.texte_paragraphe
{	font-size:1.0rem;
	color:rgb(68,68,68);
	line-height:24px;
	text-align:justify;
}
#temoignage img
{	width:50%;
	height:auto;
	margin:10px;
} 
/*Mise en forme de la section Instagram */
#instagram div:nth-child(2) a
{	width:145px;
	height:145px;
	
}
#instagram div:nth-child(2)
{	display:grid;
	grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
	grid-gap: 3px;
	margin-top:20px;
}

#instagram #btnInsta a:last-child
{	padding : 10px 20px;
	background-color:#0ba3d1;
	color:white;
	display:inline-block;
	margin-top:20px;
	border-radius:5px;	
}
#instagram div:nth-child(3) a:hover
{
	background-color: #097596;
}
/*Mise en forme du pied de page*/
footer
{	margin-top:30px;
	background-color:#222222;
	display : flex;
	justify-content:space-between;
	align-items:center;
	height:70px;
	padding:0px 40px;
	color:white;
	font-size:0.8rem;
	text-transform:none;
	letter-spacing:0.9px;
}
footer a
{	color:white;
}


	
/*Mise en forme de la section liste_marathons - page : marathons.html*/

.titre_page_secondaire
{	text-align:center;
	margin : 30px 0px;
	color : rgb(13, 164, 211);
}

#liste_marathons table
{	width:100%;
	border-collapse:collapse;
	text-transform:none;
	font-size:1.5rem;
}
#liste_marathons td, th
{	
	border : 1px solid black;
}
#liste_marathons th
{	background-color:rgb(13, 164, 211);
	color:white;
}
#liste_marathons table th:nth-child(1), th:nth-child(3)
{	width:30%;
	background-color:rgb(13, 164, 211);
	
}



/*Page : alimentation.html*/

#alimentation h1
{
	font-family: Oswald;
	font-size: 1.8rem;
	letter-spacing: 3.6px;
	text-transform: uppercase;
	color:rgb(13,164,211)
}
#alimentation > nav
{	background: url("./../images/technique/section-header.png") repeat-x 0 50%;
	text-align:center;
	margin: 20px auto;
}
#alimentation > nav > p
{
	letter-spacing:2px;
	font-size: 1.5rem;
	background-color:white;
	display:inline-block;
	color:#d3d3d3;
	cursor: pointer;
	margin: auto 5%;
}
#alimentation > nav > p:hover
{
	color: rgb(140,145,155);
}
#alimentation > nav > p:first-child
{
	color: rgb(140,145,155);
}
#alimentation > article
{
	text-transform: none;
}
#alimentation > article > h2
{
	font-family: lato;
	font-size: 1.5rem;
	letter-spacing: 2px;
	color: #0ba3d1;
	text-align: left;
}
#alimentation > article > p
{
	letter-spacing: normal;
}



/*Page : calculette.html*/


#calculette > div
{
	display: inline-flex;
	flex-direction: column;
}
#calculette > div > *
{
	margin-bottom: 20px;
}
#calculette > h1
{
	margin: 20px auto;
	color: #0ba3d1;
}
#calculette a
{
	font-size: 20px;
	background-color: #0ba3d1;
	color: white;
	border: none;
	border-radius: 7px;
	cursor:pointer;
}
#calculette p
{
	text-align: center;
	margin-bottom: 20px;
	width: 50%;
	margin-left: auto;
	margin-right: auto;
}
.macaron
{
	width: 100px;
	position:absolute;
	top:-100px;
	left:15%;
}



/*Page : auteurs.html*/
#auteurs
{
	height: 100vh;
	width: 100%;
	font-family: 'Bebas Neue', sans-serif;
	font-size: 50px;
}
#auteurs > a
{
	display: inline-flex;
	width: 50%;
	height: 100%;
	justify-content: center;
	vertical-align: top;
}
#evan
{
	background:url(../images/auteurs/evan.jpg) top/cover;
}
#fabian
{
	background:url(../images/auteurs/fabian.JPG) bottom/cover;
	display: flex;
	align-items: end;
}
#auteurs > a > div
{
	height: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color:lightgray;
}


/*Page : fabian.html*/
#page_fab
{
	height:100vh;
	color: #53585F;
}
.col_left
{
	height:100%;
	width:50%;
	display: inline-flex;
	flex-direction: column;
}
[id^="fab_projet"]
{
	height:33.33%;
	background-size: cover;
	position:relative;
	z-index: 0;
}
#fab_projet1
{
	background-image: url("../images/fabian/affiche.jpg");
	background-position-y: 38%;
}
#fab_projet2
{
	background-image: url("../images/fabian/emotes.jpg");
}
#fab_projet3
{
	background-image: url("../images/fabian/video.png");
	background-position-y: 20%;
}
.fa-plus, .fa-minus
{
	position:absolute;
	bottom:10px;
	right:20px;
	color:white;
	font-size: 20px;
	cursor:pointer;
}
.col_right
{
	vertical-align: top;
	height: 100%;
	width:50%;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.col_right > div
{
	width:75%;
	text-align:justify;
}
.col_right > div h1
{
	text-align: center;
	margin-bottom: 20px;
}

/*Page : evan.html*/
#page_evan
{
	height:100vh;
	color: #53585F;
}
[id^="evan_projet"]
{
	height:33.33%;
	background-size: cover;
	position:relative;
	z-index: 0;
}
#evan_projet1
{
	background-image: url("../images/evan/photo.jpg");
	background-position-y: 38%;
}
#evan_projet2
{
	background-image: url("../images/evan/3d.png");
}
#evan_projet3
{
	background-image: url("../images/evan/tiktok.png");
}