* {
	margin : 0px;
	padding : 0px;
	box-sizing: border-box;
}

:root {
    --couleur-primaire : #292726;
    --couleur-secondaire : #fff8dc;
    --couleur-terciaire : #fff8dc;
    --heading-first : blueviolet;
    --heading-second : RebeccaPurple;
}

html {
    font-size : 62.5%;    
}

body {
	font-family: "Lato",sans-serif;
	font-size : 1.5rem;
	display:flex;
	flex-direction: column;
	min-height: 100vh;
}

@font-face {
	font-family: pixelisnotdead;
	src : url('../fonts/Pixelic_war.otf');
	font-weight: normal;
	font-style: normal;
	font-display:swap;
}

h1,li {
	color : var(--heading-first);
}

li > span {
	color : var(--couleur-primaire);
	display : block;
	margin : 5px 45px 30px 20px;
}


ol > li {
	color : var(--couleur-primaire);

}

h2 {
	font-style : italic;
}

h2,h3,strong {
	color : var(--heading-second);	
}

strong {
	font-weight : 900;
}

.siteHeader {
	/* display: flex;
	justify-content : space-between; */
	background-color : var(--heading-first);
	color : white;
}

.logo {
	border-bottom : 4px solid black;
	padding : 20px;
	font-family : 'pixelisnotdead';
	font-size : 7rem;
	display: flex;
	justify-content: center;
}

.logo img {
	margin : 0 10px;
	align-self: anchor-center;
}

.menu {
	display: flex;
	justify-content : space-around;
	/* width : 55%; */
	background-color : var(--couleur-secondaire);
}

.menu ul {
	display : flex;
	justify-content: space-around;
}

.menu li {
	list-style: none;			
}

.menu a {
	color : var(--couleur-primaire);
	text-decoration: none;
	padding: 20px;
	display:block;
}

.menu a:hover {
	 background-color:var(--heading-second); 
	 color:white;
}

.imgBan {
	max-width : 750px;
	width :100%;
	/* margin : 0 auto;
	display : block; */
}

.col-a,.col-b {
	flex:1;
}

.frontDev,
.maintenance,
.graphiste,
.accompagnement,
.referencement,
.plan,
.mentions {
	display: flex;
	justify-content: center;
}

.plan,
.mentions {
	flex:1;
}

.frontDev--content,
.maintenance--content,
.graphiste--content,
.accompagnement--content,
.referencement--content,
.plan--content,
.mentions--content {
	font-size: 2rem;
	max-width : 1200px;
	width : 100%;
	margin : 50px 0 0 0;
	text-align: justify;
	padding : 0 25px;
	display : flex;
	gap : 4.5rem;
}

.plan--content,
.mentions--content {
	margin :0px;
}

.plan--content nav,
.mentions--content nav {
	padding: 0 0 0 40px;
}

.plan--content ul,
.mentions--content ul {
	margin : 20px 0 20px 0;
	padding: 0 0 0 30px;
	list-style-image : url('../img/list-item-dead.png');
}

.mentions--content a {
	color : var(--heading-first);
	text-decoration: none;
}

.frontDev--content h2,
.maintenance--content h2,
.graphiste--content h2,
.accompagnement--content h2,
.referencement--content h2 {
	margin : 0 0 20px 0;
}

.frontDev--content ul,
.maintenance--content ul,
.graphiste--content ul,
.accompagnement--content ul,
.graphiste--content ol,
.referencement--content ul {
	padding : 0 0 0 50px;
	margin : 20px 0 20px 0;
	list-style-image : url('../img/list-item-dead.png');
}


.referencement--content ol {
	padding : 0 0 0 50px;
	margin : 20px 0 20px 0;
}

section.contact,
.boutonSubmit{
	display: flex;
	justify-content: center;
	align-items : flex-start;
	flex :1;
}

.contactBouton {
	margin : 50px 0;
	display: inline-block;
	height : 50px; 
	padding : 10px 20px ;
	background-color: blueviolet;
	color : white;
	font-size : 2rem;
	text-decoration: none;
	border : 3px solid var(--heading-second);
}

.contactBouton:hover {
	background-color: var(--heading-second);
	cursor: pointer;
	border : 3px solid var(--heading-first);
}

.pourquoi {
	border-radius :20px;
	padding : 15px 15px 0 15px;
	margin-bottom: 20px;
	background-color : #f8f8ff;
	border: 1px solid #f8f8ff;
}

.competences {
	border-radius : 20px;
	margin : 20px 0 20px 0;
	/* padding : 15px 15px 0 15px; */
	background-color: var(--couleur-terciaire);
	border : 1px solid var(--couleur-terciaire);
}

.footer--mentions a {
	text-decoration: none;
	color: white;
}


/**********/
/* Footer */
/**********/

footer.footer {
	position :relative;
	z-index : 1;
	border-top: 4px solid black;
	display: flex;
	justify-content: center;
	/* background-image: linear-gradient(90deg, silver, darkgray,gray,dimgray, gainsboro,silver ); */
	background-color : dimgray;
	font-size : 2rem;
	color:white;
}

footer.footer::before {
	content:"";
	position : absolute ;
	top : 0 ;
	left : 0;
	width : 100%;
	height : 100%;
	/* background-image : url('../img/footer-pixelisnotdead-bg.png'); */
	opacity : 0.2;
	z-index: -1;
}

.footer--inside {
	width : 1200px;
	margin : 20px 0;
	padding : 0 25px;
	display : flex;
	justify-content: space-between;
}

.footer--planSite ul {
	list-style: none;
	text-align : right;
	
}

.footer--planSite a {
	text-decoration: none;
	color : white;
}

.plan--content a {
 	text-decoration: none;	
}

.plan--content a:hover {
 	text-decoration: underline;	
}

/**********/
/* HELPER */
/**********/

.marginTop10 {
	margin-top : 10px;
}

.marginTop20 {
	margin-top : 20px;
}

.flexColumn {
	flex-direction : column;
}
/***********/
/* CONTACT */
/***********/

/*****************/
/* MEDIA QUERIES */
/*****************/
@media (max-width: 910px) {
	li > span {
		margin : 5px 20px 20px 0;
	}

	.frontDev--content ul,
	.maintenance--content ul,
	.graphiste--content ul,
	.accompagnement--content ul,
	.graphiste--content ol,
	.referencement--content ul,
	.referencement--content ol {
		padding : 0 0 0 20px;
		margin : 20px 0 20px 0;
		list-style: none;
	}

	.pourquoi ul {
		padding : 0px;
	}
}




@media (max-width: 720px) {

	.frontDev--content,
	.maintenance--content,
	.graphiste--content,
	.accompagnement--content,
	.referencement--content {
			flex-direction: column;
	}

	


}

@media (max-width: 600px) {

	.logo {
		font-size : 5rem;
		display : flex;
		flex-direction: column;
		text-align: center;
	}
	.footer--inside {
		flex-direction: column;
	}
}

@media (max-width: 550px) {

	.menu ul {
		flex-direction : column;
		text-align : center;
		flex :1;
	}

}

@media (max-width: 400px) {
	.logo {
		font-size : 4rem;
	}	

	.frontDev--content,
	.maintenance--content,
	.graphiste--content,
	.accompagnement--content,
	.referencement--content	{
		font-size : 1.8rem;
	}


}

@media (max-width: 380px) {
	.logo {
		font-size : 3rem;
	}	


}