/* HEADER */

.logo_circle {
	height: 56px;
	width: 56px;
	background-image: url("img/logo.webp");
	background-size: cover;
	border-radius: 50%;
}

.Nom {
	color: #111;
	font-weight: bold;
}


.Navigation {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 64px;
	height: 56px;

}


.Logo a {
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

.menu a {
	display: block;
	justify-content: space-between;
	color: #111;
	border-bottom: 2px solid transparent;
}

.menu a:hover,
.menu a.actif {
	border-bottom: 2px solid #111;
}

.menu {
	display: flex;
	justify-content: space-between;
	gap: 32px;
	height: 32px;

}


/* FOOTER */

.reseaux_sociaux a {
	display: block;
	justify-content: space-between;
}


.reseaux_sociaux {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	gap: 15px;
}
footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 80px;
	height: 24px;
}



/* GLOBAL */

body {
	padding: 48px 80px 80px 80px;
	font-family: Arial;
	color: #777;
	font-size: 16px;
	line-height: 125%;



}

h1 {
	font-size: 32px;
	color: #111;
}

article img {
	width: 100%;
	height: auto;
	object-fit: cover;
	aspect-ratio:  2 / 1;
	border-radius: 8px;
	margin-bottom: 8px;
}

* a {
	text-decoration: none;
	color: #777;
}

div h2 {
	font-size: 16px;
	color: #111;
	
}








/* LISTE PAGE D'ACCUEIL */

.index a { 
	display: block;
	width: calc(50% - 16px);
 }

.index {
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: space-between;
 }

  .index img{
 	border: 2px solid transparent;
 }

 .index img:hover {
 	border: 2px solid #111;
 }

 article{
 	position: relative;
 }

.new {
  position: absolute;
  top: 3px;
  right: 3px;
  color: white;
  background: #111;
  padding: 4px 8px 4px;
  margin-top: 16px;
  margin-right: 16px;
  border-radius: 4px;

}

 .Introduction {
 	max-width: 728px;
 	line-height: 24px;
 }

 main header {
 	margin-bottom: 64px;
 }

.Titre {
	font-size: 32px;
}

.titre_de_la_page {
	margin-bottom: 32px;
}

article div {
	margin-bottom: 40px;
	margin-top: 16px;
	line-height: 7px;
}





/* Index Projet */
.Projets a {
	display: block;
	width:  calc((100% / 3) - (64px / 3));

}


.Projets {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.Tous_mes_projets {
	font-size: 32px;
}


.Projets img{
 	border: 2px solid transparent;
 }

.Projets img:hover {
 	border: 2px solid #111;
 }




/* PAGE PROJET 1 */

.Images figure img {
	width: 100%;
	height: auto;
	object-fit: cover;
	aspect-ratio:  2 / 1;
	border-radius: 8px;

}



.Images figure { 
	display: block;
	width: calc(50% - 16px);
	margin: 0;
 }

 .Images {
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: space-between;
 	gap: 32px;

 }


 .Images figure:first-child {
 	width: 100%;
 }

 .Texte {
 	max-width: 480px;
 	display: flex;


 }

 .Infos {
 	justify-content: space-between;
 	display: flex;
 	margin-bottom: 64px;
 	align-items: top;
 }

 .Retour_projets {
 	font-size: 32px;
 }

 .Retour_projets:hover {
 	border-bottom: 2px solid #777;
 }

 .Meta {
 	font-size: 14px;
 	line-height: 24px;
 	letter-spacing: 0,05em;
 }






/* À PROPOS */

.Name {
	font-size: 28px;
}

.Contain figure img {
	width: 100%;
	height: auto;
	object-fit: cover;
	aspect-ratio:  2 / 1;
	border-radius: 8px;
}


.Contain figure {
  display: block;
  min-width: calc(50% - 16px);
  margin: 0;
  max-width: 100%;
}

.Contain {
 	display: flex;
 	justify-content: space-between;
 	gap: 64px;
 	font-size: 15px ; 
 	align-items: center;

}

.infos_a_propos a {
	display: block ;
	justify-content: space-between;
	text-decoration: underline;
}

.infos_a_propos {
	line-height: 24px;

}

.mail {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 6px;
}


/* Tablette */
@media screen and (max-width: 1079PX) {
	body {
		padding: 40px 40px 80px 40px;
	}

.Projets a {
	width:  calc((100% / 2) - 16px);
 }


}
	


/* Mobile */
@media screen and (max-width: 640px) {
	body {
		padding: 24px 24px 80px 24px;
	}

	.Nom {
		display: none;
	}

	.Projets_List_index {
		flex-direction: column;
	}

	.Projets {
		flex-direction: column;

	}

		.Projets a {
		width: 100%;

	}

	.Projets_List_index a {
		width: 100%;
	}

	.Contain{
		flex-direction: column;
	}

	.Infos {
 	flex-direction: column;
 }

 .Images{
 	flex-direction: column;
 }

 .Images figure { 
	width: 100%;
 }
}