/* Importation de polices via googlefont */
@import url('https://fonts.googleapis.com/css?family=Baloo+Chettan|Poppins');

/* Reset */ 
*{
	margin: 0;
	padding: 0;
}

body{
	background-color: #d1aac9;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
}

h1,h2,h3{
	font-family: 'Baloo Chettan', cursive;
	
	color: #333333;
}

/*Selectionne les enfants de body */
body > *{
	display: grid;
	
	/*Utilisation de colonne de largeur auto pour centrer la grille*/
	grid-template-columns: auto 225px 225px 225px 225px auto; 
	
	grid-gap: 20px;	
}

header{
	background-color: black;
	/*rien dans les colonnes auto, titre pour les deux colonnes gauches et nav pour les droites*/
	grid-template-areas: ". tit tit nav nav .";
	align-items: center;
	/*Utilisation de border pour sur ou sous-ligner */
	border-top: 5px solid #40aed7;
	height: 120px;
}

/*Selectionne le h1 qui est dans header*/
header h1{
	grid-area: tit;
	color: white;
	font-size: 28px;
	
}

header nav{
	grid-area: nav;
	display: flex;

	justify-content: space-between;
	
}

header nav a{
	color: white;
	
	/*Enlève le soulignement*/
	text-decoration: none;
	padding: 10px;
	border-radius: 7px;
}

header nav a:hover{
	background-color: #40aed7;
	
	
}

/**** Section présentation du métier *****/
#metier{
	grid-template-areas: 
		". med med med med ."
		". com gra web mar .";		
}


#metier h2{
	grid-area: med;
	
	font-size: 124px;
}

#metier article{
	background-color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px;
	text-align: center;
	
}

#metier h3{
	padding: 20px;
	font-size: 24px;
}

#metier article:hover{
	background-color: #40aed7;
	
}

/* sélectionne les enfants dans un article survolé dans la zone d'id metier */
#metier article:hover > *{
	/* augmente le contrast pour que le gris deviennent noir, puis inverse la couleur en négatif, pour devenir blanc. */
	filter: contrast(1000%) invert(100%);
}
#communication{
	grid-area: com;
}

#graphisme{
	grid-area: gra;
}

#web{
	grid-area: web;
}

#marketing{
	grid-area: mar;
}

/**** Section présentation de travaux *****/
#travaux{
	grid-template-areas: 
		". tit tit tit tit ."
		". sit pro aff vid .";
	
	padding-bottom: 60px;
}

#travaux h2{
	grid-area: tit;
	text-align: center;
	font-size: 72px;
}

#travaux article div{
	height: 225px;
	width: 225px;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 50px;
}

#travaux article > p{
	padding: 15px 0px;
	border-top: 1px solid #e4e4e4;
}
#site{
	grid-area: sit;
}

#site div{
	background-color: #636fe6;
}

#projet{
	grid-area: pro;
}

#affiche{
	grid-area: aff;
}
#affiche div{
	background-color: #e6bf63;
}

#video{
	grid-area: vid;
}

#video div{
	background-color: #a1253a;
}
footer{
	grid-template-areas: ". cop cop aut aut ."; 
	background-color: #2b2b2b;
	color: #979797;
	padding: 25px;
}

/* Sélectionne le premier p enfant de footer */
footer > p:nth-child(1){
	grid-area: cop;
}

footer > p:nth-child(2){
	grid-area: aut;
	text-align: right;
}