header {
	width: 100vw;
	height: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

header .en-tete {
	width: 100vw;
	height: 30vh;
	background-image: url(../img/pf.jpeg);
	background-size: 100vw;
	background-position: center;
	transition: 300ms;
}

header .en-tete:hover {
	background-size: 110vw;
}

/* Corps */

.corps {
	width: 100vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 5vw 0;
	background-color: #000;
}

.corps .titre {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.corps h1 {
	margin: 0;
	padding: 0;
	font-size: 3vw;
	color: #fefefe;
	font-family: 'Josefin Sans', sans-serif;
}

.corps p {
	color: rgba(255,255,255,.4);
}

.colonne1, .colonne2, .colonne3, .colonne4 {
	width: 100vw;
	height: auto;
	padding: 5vw 0;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
}

.colonne1 img,p {
	width: 90vw;
}

.colonne2 img,p {
	width: 90%;
}

.colonne3 img,p {
	width: 90%
}

.colonne4 img,p {
	width: 90%
}

.colonne1 div , .colonne2 div, .colonne3 div, .colonne4 div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.colonne1 a , .colonne2 a, .colonne3 a, .colonne4 a {
	padding: .5vw 1vw;
	background-color: #ECC852;
	color: #fefefe;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 1vw;
	align-self: baseline;
	margin-left: 5%;
	text-decoration: none;
	transition: 300ms;
}

.colonne1 a:hover , .colonne2 a:hover, .colonne3 a:hover, .colonne4 a:hover{
	background-color: #e83c3e;
}

.colonne1-1 {
	width: 100vw;
	height: auto;
}

.colonne2-1, .colonne2-2 {
	width: calc(100vw/2);
	height: auto;
}

.colonne3-1, .colonne3-2, .colonne3-3 {
	width: calc(100vw/3);
	height: auto;
}

.colonne4-1, .colonne4-2, .colonne4-3, .colonne4-4 {
	width: calc(100vw/4);
	height: auto;
}

h2 {
	text-align: center;
	color: #fefefe;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 2vw;
}

h3 {
	text-align: center;
	color: #fefefe;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 1.5vw;
}

@media screen and (max-width: 1024px) {
	.corps h1 {
		font-size: 5vw;
	}

	.cercle {
		width: 4vw;
		height: 4vw;
		border-radius: 4vw;
	}

	h2 {
		font-size: 4vw;
	}

	h3 {
		font-size: 3vw;
	}

	p {
		font-size: 1.5vw;
		line-height: 3vw;
	}

	.colonne1 a , .colonne2 a, .colonne3 a, .colonne4 a {
		font-size: 1.5vw;
	}

	.colonne3-1, .colonne3-2 {
		width: calc(100vw/2);
		height: auto;
		margin: 1vw 0;
	}

	.colonne3-3 {
		width: 100vw;
		height: auto;
		margin-top: 3vw;
	}

	.colonne4-1, .colonne4-2, .colonne4-3, .colonne4-4 {
		width: calc(100vw/2);
		height: auto;
		margin: 1vw 0;
	}
}

@media screen and (max-width: 740px) {
	.corps h1 {
		font-size: 7vw;
	}

	.cercle {
		width: 4vw;
		height: 4vw;
		border-radius: 4vw;
	}

	h2 {
		font-size: 6vw;
	}

	h3 {
		font-size: 5vw;
	}

	p {
		font-size: 2vw;
		line-height: 4vw;
	}

	.colonne1 a , .colonne2 a, .colonne3 a, .colonne4 a {
		font-size: 4vw;
	}

	.colonne1-1 {
		margin: 2vw 0;
	}

	.colonne2-1, .colonne2-2{
		width: calc(100vw);
		height: auto;
		margin: 2vw 0;
	}

	.colonne3-1, .colonne3-2, .colonne3-3 {
		width: calc(100vw);
		height: auto;
		margin: 2vw 0;
	}

	.colonne4-1, .colonne4-2, .colonne4-3, .colonne4-4 {
		width: calc(100vw);
		height: auto;
		margin: 2vw 0;
	}
}

@media screen and (max-width: 480px) {
	.corps h1 {
		font-size: 10vw;
	}

	.cercle {
		width: 4vw;
		height: 4vw;
		border-radius: 4vw;
	}

	h2 {
		font-size: 9vw;
	}

	h3 {
		font-size: 8vw;
	}

	p {
		font-size: 3.5vw;
		line-height: 6vw;
	}

	.colonne1 a , .colonne2 a, .colonne3 a, .colonne4 a {
		font-size: 4vw;
	}

	.colonne1-1 {
		margin: 2vw 0;
	}

	.colonne2-1, .colonne2-2{
		width: calc(100vw);
		height: auto;
		margin: 2vw 0;
	}

	.colonne3-1, .colonne3-2, .colonne3-3 {
		width: calc(100vw);
		height: auto;
		margin: 2vw 0;
	}

	.colonne4-1, .colonne4-2, .colonne4-3, .colonne4-4 {
		width: calc(100vw);
		height: auto;
		margin: 2vw 0;
	}	
}