font-family: "Montserrat", "sans-serif"; /*400 et 600*/
font-family: "Playfair Display", "serif"; /*400 et 700*/

* {
    margin: 0;
    padding: 0;
}

body {
	margin: 0;
	padding: 0;
	background-color: #E5E5E5;
}


.wrapper {
	width: auto;
	height: auto;
	display: grid;
	grid-template-areas:
		"header"
		"nav"
		"section"
		"footer"
		;
	grid-template-rows: [header]auto [nav]auto [section]auto [footer]auto;
	grid-template-columns: auto;
}
.wrapper-m {
	width: auto;
	height: auto;
	display: grid;
	grid-template-areas:
		"header"
		"nav"
		"section"
		"footer"
		;
	grid-template-rows: [header]auto [nav]auto [section]auto [footer]auto;
	grid-template-columns: auto;
}

.header {
	grid-area: header;
	width: auto;
	height: auto;
	display: grid;
	grid-template-areas:
		"profil avatar infos"
		"presentation presentation presentation"
		;
	grid-template-rows: auto auto;
	grid-template-columns: auto auto auto;
}

.verticalalign-l {
	display: flex;
	text-align: right;
	align-items: center;
}

.verticalalign-c {
	display: flex;
	text-align: center;
	align-items: center;
}

.verticalalign-r {
	display: flex;
	text-align: left;
	align-items: center;
}

.profil {
	/*background-color: lightgreen;*/
	height: auto;
	grid-area: profil;
	text-align: right;
	width: 100%;
	padding: 0px 0px 30px 20px;
}

.profil img{
	width: 60px;
	height: 60px;
	padding-top: 40px;
	padding-right: 40px;
}

.profil h2 {
	text-align: right;
	margin-bottom: 5px;
	padding-bottom: 5px;
	vertical-align: top;
	padding-right: 40px;
}

.profil p {
	text-align: right;
	font-family: montserrat;
	font-weight: 400;
	font-size: 1;
	margin: 0px;
	padding: 0px 40px 0px 0px;
}

/*lignes des qualités*/
.line1 ul, .line2 ul, .line3 ul, .line4 ul{
	padding: 5px 40px 2px 0px;
	margin: 0px 0px 2px 0px;
}

.dg1 ul li, .dg2 ul li, .dg3 ul li, .dg4 ul li{
	list-style: none;
	list-style-type: none;
	display: inline-block;
	text-decoration-line: none;
	text-decoration: none;
	padding: 0;
	margin: 0;
}

/*couleur des cercles qualités*/
.dg {
	width: 15px;
	height: 15px;
	background-color: darkgrey;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
}

.lg {
	width: 15px;
	height: 15px;
	background-color: lightgrey;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;;
}


#avatar {
	grid-area: avatar;
	text-align: center;
	/*background-color: darkblue;*/
	height: auto;
	width: 100%;
	padding: 20px 20px 20px 20px;
}

.resize {
	min-width: 250px;
	max-width: 100%;
	max-height: 400px;
	height: auto;
}

#infos {
	/*background-color: lightgreen;*/
	height: auto;
	grid-area: infos;
	text-align: left;
	width: 100%;
	padding-right: 20px;
}

#infos img {
	width: 60px;
	height: 60px;
	padding-top: 0px;
	padding-left: 40px;
}

#infos h2 {
	text-align: left;
	margin-bottom: 5px;
	padding-bottom: 5px;
	margin-left: auto;
	margin-right: auto;
	display: block;
	padding-left: 40px;
}

#infos p {
	text-align: left;
	padding-left: 40px;
	padding-right: 0px;
	font-family: montserrat, "Arial", "sans-serif";
	font-weight: 400;
	font-size: 1;
	margin-bottom: 10px;
	padding-bottom: 10px;
	margin-top: 0px;
	padding-top: 0px;
	line-height: 2.4em;
}

#infos a {
	font-family: montserrat, "Arial", "sans-serif";
	font-weight: 400;
	font-size: 1;
	margin-bottom: 10px;
	padding-bottom: 10px;
	margin-top: 0px;
	padding-top: 0px;
	color: #727272;
	text-decoration: none;
}

#infos a:hover {
	text-decoration: underline;
	color: black;
}

#infos a:visited {
	color: black;
}

/*    //////////// Nom et petite présentation  /////////////     */

#presentation {
	grid-area: presentation;
	background-color: darkgrey;
	width: 100%;
	height: auto;
	text-align: center;
	justify-content: center;
	display: flex;
	flex-direction: column;
}

#presentation h2 {
	font-family: "Playfair Display", "Georgia", "serif";
	font-weight: 700;
	font-size: 3em;
	padding-bottom: 5px;
	padding-top: 20px;
	margin: auto;
}

#presentation p {
	font-family: "Montserrat", "Arial", "sans-serif";
	font-weight: 400;
	font-size: 1em;
	word-spacing: 0.03em;
	line-height: 1.4;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-bottom: 10px;
}

#presentation a {
	font-family: montserrat, "Arial", "sans-serif";
	font-weight: 400;
	font-size: 1.2em;
	padding: 0px 0px 0px 0px;
	color: white;
	text-decoration: none;
	line-height: 2;
}

#presentation a:hover {
	text-decoration: underline;
	color: black;
}

#presentation a:visited {
	color: #727272;
}


/*    //////////// nav bar /////////////     */
#nav-responsive {
	background-color: #727272;
	grid-area: nav;
	text-align: center;
	width: 100%;
	height: auto;
  border-bottom: 1px solid #FFF;
}

#nav-responsive {
	text-decoration-line: none;
	color: white;
	text-decoration: none;
}

#nav-responsive ul li{
	list-style: none;
	list-style-type: none;
	display: inline-block;
	padding: 10px;
	text-align: center;
	text-decoration-line: none;
	text-decoration: none;
}

#nav-responsive ul {
	padding: 0px;
  margin: 0;
}

#nav-responsive a{
	text-decoration: none;
	color: white;
	font-family: "Montserrat", "Arial", "sans-serif";
	font-weight: 400;
	font-size: 1.2em;
	word-spacing: 0.03em;
	line-height: 1.4;
	text-align: center;
}

#nav-responsive a:hover {
	text-decoration: underline;
	border: 10px none #FFF;
	border-radius: 5px;
}

.fixed-nav nav {
  position: fixed;
  top:0;
  z-index: 100;
  width: 100%;
}
/* //////////// EXPERIENCE PROFESSIONNELLES /////////////     */

hr {
	width: 400px;
	margin: auto;
	margin-bottom: 15px;
	margin-top: 15px;
	text-align: center;
	text-decoration: none;
	border: 0;
	height: 1px;
	background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
	background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
	background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
	background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
	} /* barre de séparation entre professions */


.sectiongrid {
	grid-area: section;
	width: auto;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	display: grid;
	grid-template-areas:
	"professions"
	"parcours"
	"loisirs"
	;
	grid-template-rows: auto auto auto;
	grid-template-columns: auto;
}

#professions {
	/*background-color: orange;*/
	grid-area: professions;
	width: auto;
	text-align: left;
	padding: 10px 0 10px 40px;
	margin: 0 auto 10px auto;
}

#professions img {
	width: 40px;
	height: 40px;
	padding-right: 10px;
	padding-top: 20px;
	text-align: left;
}

#professions h3 h4 p {
	position: relative;
	padding-left: 100px;
	text-align: left;
}

#professions h2 {
	font-family: "Playfair Display" , "Georgia", "serif";
	font-weight: 700;
	font-size: 1.6em;
	display: inline-block;
	vertical-align: top;
}


.text {
	padding-left: 60px;
	text-align: left;
	width: auto;
	max-width: 800px;
	padding-right: 40px;
	margin-right: 20px;
}

.text h4{
	font-family: "Montserrat", "Arial", "sans-serif";
	font-weight: 600;
	font-size: 1em;
	margin-bottom: 0px;
	margin-top: 0px;
	padding-bottom: 8px;
	padding-top: 0px;
}

.text h3{
	font-family: "Playfair Display" , "Georgia", "serif ";
	font-weight: 700;
	font-size: 1.2em;
	margin-bottom: 5px;
	margin-top: 0px;
	padding-bottom: 0px;
	padding-top: 0px;
}

.text p{
	font-family: "Montserrat", "Arial", "sans-serif";
	font-weight: 400;
	font-size: 1em;
	word-spacing: 0.03em;
	line-height: 1.4;
	padding-top: 0px;
	margin-top: 0px;
	overflow-wrap: anywhere;
}


/* css text page motivation.html */

.motivationgrid {
	grid-area: section;
	width: auto;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	display: grid;
	grid-template-areas:
	"motivation"
	;
	grid-template-rows: auto;
	grid-template-columns: auto;
}

.text-m {
	padding-left: 60px;
	text-align: center;
	width: auto;
	max-width: 800px;
	padding-right: 40px;
	margin-right: 20px;
}

.text-m  h4{
	font-family: "Montserrat", "Arial", "sans-serif";
	font-weight: 600;
	font-size: 1em;
	margin-bottom: 0px;
	margin-top: 0px;
	padding-bottom: 8px;
	padding-top: 0px;
}

.text-m  h3{
	font-family: "Playfair Display" , "Georgia", "serif ";
	font-weight: 700;
	font-size: 1.2em;
	margin-bottom: 5px;
	margin-top: 0px;
	padding-bottom: 0px;
	padding-top: 0px;
}

.text-m p{
	font-family: "Montserrat", "Arial", "sans-serif";
	font-weight: 400;
	font-size: 1em;
	word-spacing: 0.03em;
	line-height: 1.4;
	padding-top: 0px;
	margin-top: 0px;
  margin-bottom: 40px;
	overflow-wrap: anywhere;
}

.text-m li{
	font-family: "Montserrat", "Arial", "sans-serif";
	font-weight: 400;
	font-size: 1em;
	word-spacing: 0.03em;
	line-height: 1.4;
	padding-top: 0px;
	margin-top: 0px;
  margin-bottom: 40px;
	overflow-wrap: anywhere;
}


.text-m a {
  color: #727272;
}

.text-m a:hover {
  color: black;
}

/* FIN css text page motivation.html */

/* css text page projets.html */

.projetgrid {
	grid-area: section;
	width: 100%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	display: flex;
}

#projets {
  width: 100%;
  height: 100%;
  flex-direction: column;
  margin-left: 4%;
  margin-right: 4%;
}

#projets ul {
  padding-left: 0;
  list-style: none;
}

#projets li{
  padding-top: 10px;
  padding-bottom: 10px;
  width: 100%;
}

#projets img{
  flex-direction: column;
  text-align: center;
  width: 100%;
  height: auto;
  padding-bottom: 10px;
  padding-top: 20px;
  box-shadow: 0px 4px 4px 4px rgba(121, 121, 121, 0.2);
}

#projets img .img-responsive{
  width: 700px;
}

#projets h2{
  padding-top: 40px;
  padding-bottom: 20px;
}

#projets h2 a{
  color: grey;
  text-decoration: none
}

#projets h2 a:hover{
  color: darkgrey;
  text-decoration: underline;
}

#projets h2 a:visited{
  color: black;
}

#projets p{
margin: 0;
padding-top: 20px;
padding-bottom: 20px;
font-family: "Montserrat", "Arial", "sans-serif";
font-weight: 400;
font-size: 1em;
}

#projets a>img.certificats{
  width: 250px;
}

#projets>.wrapper-certificats{
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(250px, 1fr));
}

#projets>.block-certificats{

}

.text-p {
	padding-left: 60px;
	text-align: center;
	width: 100%;
	padding-right: 40px;
	margin-right: 20px;
}

.text-p  h4{
	font-family: "Montserrat", "Arial", "sans-serif";
	font-weight: 600;
	font-size: 1em;
	margin-bottom: 0px;
	margin-top: 0px;
	padding-bottom: 8px;
	padding-top: 0px;
}

.text-p  h3{
	font-family: "Playfair Display" , "Georgia", "serif ";
	font-weight: 700;
	font-size: 1.2em;
	margin-bottom: 5px;
	margin-top: 0px;
	padding-bottom: 0px;
	padding-top: 0px;
}

.text-p p{
	font-family: "Montserrat", "Arial", "sans-serif";
	font-weight: 400;
	font-size: 1em;
	word-spacing: 0.03em;
	line-height: 1.4;
	padding-top: 0px;
	margin-top: 0px;
  margin-bottom: 40px;
	overflow-wrap: anywhere;
}

.text-p li{
	font-family: "Montserrat", "Arial", "sans-serif";
	font-weight: 400;
	font-size: 1em;
	word-spacing: 0.03em;
	line-height: 1.4;
	padding-top: 0px;
	margin-top: 0px;
  margin-bottom: 40px;
	overflow-wrap: anywhere;
}


.text-p a {
  color: #727272;
}

.text-p a:hover {
  color: black;
}

/* FIN css text page projets.html */

/* //////////// PARCOURS SCOLAIRE /////////////     */

#parcours {
	/*background-color: coral;*/
	grid-area: parcours;
	width: auto;
	margin-right: auto;
	text-align: left;
	padding: 10px 0 10px 40px;
	margin-bottom: 10px;
}

#parcours img {
	width: 40px;
	height: 40px;
	padding-right: 10px;
	padding-top: 20px;
	text-align: left;
}

#parcours h3 h4 p{
	position: relative;
	padding-left: 100px;
	text-align: left;
}

#parcours h2 {
	margin-top: 15px;
	padding-top: 5px;
	font-family: "Playfair Display" , "Georgia", "serif";
	font-weight: 700;
	font-size: 1.6em;
	display: inline-block;
	vertical-align: top;
}

/* //////////// LOISIRS /////////////     */

#loisirs {
	/*background-color: coral;*/
	grid-area: loisirs;
	width: auto;
	margin-right: auto;
	text-align: left;
	padding: 10px 0 10px 40px;
	margin-bottom: 10px;
}

#loisirs img {
	width: 40px;
	height: 40px;
	padding-right: 10px;
	padding-top: 20px;
	text-align: left;
}

#loisirs h2 {
	margin-top: 15px;
	padding-top: 5px;
	font-family: "Playfair Display" , "Georgia", "serif";
	font-weight: 700;
	font-size: 1.6em;
	display: inline-block;
	vertical-align: top;
}


/*//////////// DEVELOPPEMENT PERSONNEL /////////////     */


/*//////////// REALISATIONS PROJETS /////////////     */


/*//////////// FOOTER /////////////  */
footer {
	background-color: lightgrey;
	grid-area: footer;
	width: 100%;
	height: auto;
	}

footer p {
	margin-top: 15px;
	margin-bottom: 0px;
	margin-right: 20px;
	margin-left: 20px;
	padding-top: 10px;
	padding-bottom: 30px;
	width: auto;
	font-family: "Playfair Display" , "Georgia", "serif";
	font-weight: 400;
	font-size: 1em;
	text-align: center;
	line-height: 1.3;
	overflow-wrap: anywhere;
	}

footer a{
	text-decoration: none;
	color: #727272;
	font-family: "Montserrat", "Arial", "sans-serif";
	font-weight: 400;
	word-spacing: 0.03em;
	}

footer p a {
	padding-bottom: 10px;
	}

footer a:hover {
	text-decoration: underline;
	border: 10px none #FFF;
	border-radius: 5px;
	}

footer a:visited {
	color: black;
	}