body
{
	box-sizing: border-box;
	font-size: 15px;
	display: block;
	margin: 0;
	padding: 0;
	color: #5968a9;
	font-family: IosevkaCharon-Regular;
}
/*Couleurs du logo et déclinaisons 
#97d9f0
#67bed9
#ebf1f7
#2596BE
#5968a9
#929dc7
#62c6e8*/

@font-face 
{
	font-family: IosevkaCharon-Regular;
	src: url(https://lacorrespondance-communication.fr/fonts/Iosevka_Charon/IosevkaCharon-Regular.ttf);
}
@font-face 
{
	font-family: IosevkaCharon-Bold;
	src: url(https://lacorrespondance-communication.fr/fonts/Iosevka_Charon/IosevkaCharon-Bold.ttf);
}
@font-face 
{
	font-family: KenyanCoffeeRg;
	src: url(https://lacorrespondance-communication.fr/fonts/kenyan_coffee/KenyanCoffeeRg.otf);
}
@font-face 
{
	font-family: MindMeld-One;
	src: url(https://lacorrespondance-communication.fr/fonts/mind_meld/MindMeld-One.ttf);
}
@font-face 
{
	font-family: BricolageGrotesque-Regular;
	src: url(https://lacorrespondance-communication.fr/fonts/Bricolage_Grotesque/static/BricolageGrotesque-Regular.ttf);
}
body a
{
	color: #97c3f0;
	text-decoration: none;
}
body a:hover
{
	text-decoration: underline;
}
header
{
	
}
header img
{
	width: 40%;
	margin-left: 30%;
	margin-top: 40px;
}
	@media screen and (max-width: 456px)
	{
		header img
		{
			width: 400px;
			margin: 15px;
		}
	}
	@media screen and (min-width: 456px) and (max-width: 1007px)
	{
		header img
		{
			width: 70%;
			margin-left: 10%;
		}
	}
#navigation_principale
{
	background-color: #929dc7;
	color: white;
	font-family: KenyanCoffeeRg;
	text-align: center;
	height: 70px;
	margin-bottom: 40px;
}
#navigation_principale li
{
	list-style-type: none;
	display: inline-block;
	padding: 5px;
	font-size: 25px;
	margin: 15px 15px 15px 5px;
	text-align: center;
	background-color: white;
	color: #929dc7;
	border-radius: 3px;
}
#navigation_principale li a
{
	color: #929dc7;
}
#navigation_principale li.page_en_cours
{
	font-size: 60px;
	vertical-align: -50px;
	background-color: #97d9f0;
	color: white;
	margin: 10px 40px 10px 40px;
}
	@media screen and (max-width: 640px)
	{
		#navigation_principale li.page_en_cours
		{
			padding: 5px;
			font-size: 25px;
			margin: 15px 5px 15px 5px;
			text-align: center;
			background-color: white;
			color: #97d9f0;
			border-radius: 3px;
			vertical-align: -20px;
		}
	}
#projets, #Prestations
{
	width: 80%;
	border: solid 2px #929dc7;
	margin: auto;
}
#projets ul, #Prestations ul
{
	text-align: center;
}
#projets li, #Prestations li
{
	width: 200px;
	list-style-type: none;
	display: inline-block;
	padding: 10px;
	background-color: #5968a9;
	border-radius: 10px;
	text-align: center;
	margin-right: 5px;
	color: white;
}
#projets li a, #Prestations li a
{
	color: white;
}
#Centre
{
	background-color: #ebf1f7;
	font-size: 20px;
	width: 100%;
	box-sizing: border-box;
	padding: 1%;
	margin-top: 30px;
	line-height: 200%;	
}
#Catégorie
{
	background-color: white;
	color: #bde7f6;
	width: 400px;
	font-size: 34px;
	padding: 10px;
	margin: 15px 15px 15px 80px;
	font-family: KenyanCoffeeRg;
	text-align: center;
}
	@media screen and (max-width: 456px)
	{
		#Catégorie
		{
			margin: 15px;
		}
	}
#Bouton
{
	width: 100px;
	height: 50px;
	position: sticky;
	top: 400px;
	left: 85%;
	font-family: KenyanCoffeeRg;
	font-size: 12px;
	background-color: white;
	border-radius: 5px;
	text-align: center;
}
#Bouton a
{
	color: #929dc7;
}
#Presentation_projet, #Analyse_besoins, #Visuels, #Dessins, #Presentation, #Liste, #Exemples
{
	background-color: white;
	border-radius: 5px;
	width: 70%;
	margin: auto;
	padding: 3%;
	font-size: 17px;
	margin-top: 5px;
	text-align: justify;
}
	@media screen and (max-width: 640px)
	{
		#Presentation_projet, #Analyse_besoins, #Visuels, #Dessins, #Presentation, #Liste, #Exemples
		{
			width: 80%;
			padding: 8%;
		}
		#Analyse_besoins 
		{
			text-align: center;
		}
		#Analyse_besoins h2
		{
			width: 200px;
		}
		ul
		{
			margin-left: -20px;
		}
	}
				/*Pages Prestations*/
#citation
{
	width: 40%;
	margin-left: 40%;
	font-size: 15px;	
	background-color: #ebf1f7;
	border: 1px solid #929dc7;
	margin-top: 30px;
	padding: 20px;
}
	@media screen and (max-width: 640px)
	{
		#citation
		{
			width: 70%;
			margin-left: 20%;
			padding: 10px;
		}
	}
#Liste, #Exemples
{
	text-align: left;
}
#Liste ul
{
	padding: 20px;
}
#Liste li
{
	width: 80%;
	margin: auto;
}
#Liste h2
{
	font-size: 19px;
}
#Liste p
{
	margin-left: 10%;
	width: 70%;
	font-size: 15px;
}
	@media screen and (max-width: 456px)
	{
		#Liste p
		{
			width: 100%;
		}
	}
#Exemples h2
{
	font-family: KenyanCoffeeRg;
	font-size: 14px;
}
#Exemples img
{
	width: 250px;
}
#Exemples ul
{
	text-align: center;
	width: 60%;
	margin: auto;
	margin-top: 20px;
}
	@media screen and (max-width: 640px)
	{
		#Exemples ul
		{
			width: 85%;
			margin-left: -20px;
		}
	}
#Exemples li
{
	background-color: #ebf1f7;
	list-style-type: none;
	text-align: center;
	padding: 10px;
	margin-bottom: 5px;
}
#Dessins h1, #Presentation h1, #Liste h1, #Exemples h1
{
	font-family: KenyanCoffeeRg;
	font-size: 30px;
	margin: auto;
	text-align: center;
	padding: 20px 0px 30px 0px;
}
#Dessins h1:first-letter, #Presentation h1:first-letter, #Liste h1:first-letter, #Exemples h1:first-letter
{
	font-family: MindMeld-One;
	color: #c1c7df;
	font-size: 60px;
	vertical-align: -10px;
}
#Dessins li
{
	list-style-type: none;
	display: inline-block;
	padding: 20px;
	border: 1px solid #c1c7df;
	vertical-align: top;
	margin: 5px;
}
#Dessins img
{
	width: 400px;
}
	@media screen and (max-width: 640px)
	{
		#Dessins img
		{
			width: 300px;
		}
	}
#Dessins legend
{
	text-align: center;
	font-size: 14px;
	font-style: italic;
}
#Presentation p
{
	width: 90%;
	margin: auto;
}

						/*Pages Projets*/

iframe
{
	width: 450px;
	margin-top: 20px;
	margin-left: 20%;
}
	@media screen and (max-width: 456px)
	{
		iframe
		{
			width: 280px;
			margin-left: 20px;
		}
	}
#Presentation_projet p
{
	width: 90%;
	margin: auto;
}
#Presentation_projet a
{
	color: #97c3f0;
}
#Presentation_projet img
{
	max-width: 250px;
	max-height: 200px;
}	
#Presentation_projet ul
{
	text-align: center;
	margin: auto;
}
#Presentation_projet li
{
	list-style-type: none;
	display: inline-block;
	padding: 20px;
}
#Presentation_projet h1
{
	font-family: KenyanCoffeeRg;
	font-size: 30px;
	width: 60%;
	margin: auto;
	text-align: center;
	padding-bottom: 30px;
}
#Presentation_projet h2
{
	font-family: IosevkaCharon-Bold;
	font-size: 19px;
}

#Analyse_besoins, #Liste
{
	background-color: #929dc7;
	color: white;
	text-align: justify;
	padding: 3%;
}
	@media screen and (max-width: 640px)
	{
		#Analyse_besoins, #Liste
		{
			padding: 7%;
		}
	}
#Analyse_besoins h1
{
	font-family: KenyanCoffeeRg;
	font-size: 30px;
	color: white;	
	text-align: center;
}
#Analyse_besoins p
{
	width: 90%;
	margin: auto;
}
#Analyse_besoins h2
{
	font-size: 20px;
	border: 1px solid;
	padding: 5px;
	width: fit-content;
}
#Analyse_besoins ul
{
	border: 1px solid #2596be;
	width: 65%;
	margin: auto;
	background-color: white;
	color: #5968a9;
	padding: 20px;
	border-radius: 10px;
}
	@media screen and (max-width: 640px)
	{
		#Analyse_besoins ul
		{
			width: 90%;
		}
	}
#Analyse_besoins li
{
	list-style-type: disc;
	margin-left: 30px;
}
#Visuels h1
{
	font-family: KenyanCoffeeRg;
	font-size: 30px;
	text-align: center;
	padding: 30px 0px 10px 0px;
}
#Visuels img
{
	max-width: 300px;
	max-height: 300px;
}
	@media screen and (max-width: 456px)
	{
		#Visuels img
		{
			max-width: 250px;
			max-height: 250px;
		}
	}
#Visuels li
{
	width: 70%;
	background-color: #ebf1f7;
	list-style-type: none;
	margin: auto;
	margin-bottom: 5px;
	text-align: center;
	padding: 10px;
}
	@media screen and (max-width: 640px)
	{
		#Visuels li
		{
			width: 90%;
		}
	}
#Visuels li a
{ 
	color: #929dc7;
}
#Presentation_projets h1:first-letter, #Analyse_besoins h1:first-letter, #Visuels h1:first-letter
{
	font-family: MindMeld-One;
	color: #c1c7df;
	font-size: 60px;
	vertical-align: -10px;
}

										/*BAS DE PAGE*/

footer
{
	background-color: #929dc7;
	color: white;
	font-weight: bold;
	text-align: center;
}
footer a 
{
	color: white;	
}
footer li
{
	display: inline-block;
	padding: 50px;
}
footer img
{
	width: 20px;
}
	@media screen and (max-width: 640px)
	{
		footer li
		{
			display: block;
			padding: 10px;
		}
	}