/* Pour toutes les pages / structure de la mise en page */

*{
	font-family: 'open_sansregular';
	text-decoration: none;
	color: white;
}

body{
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:  "header"
	"accueil"
	"services"
	"formules"
	"contact"
	"localisation"
	"footer";
}

body > *{
	padding-left: 250px;
	padding-right: 250px;
}

body > div, footer{
	padding-top: 50px;
	padding-bottom: 50px;
}

h1{
	font-family: 'museo500';
	font-size: 35pt;
	text-align: center;
	margin-top: 0;
	margin-bottom: 50px;
}


/* Header et menu de navigation */

header{
  grid-area: header;
	background-color: #212121;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-areas: "logo logo logo . . . navaccueil navaccueil navaccueil navaccueil navaccueil navaccueil";
	grid-gap: 20px;
}

header > a{
	grid-area: logo;
	display: flex;
	align-self: center;
}

header > a > img{
	width: 100%;
}

header > nav{
	display: flex;
	align-items: center;
	grid-area: navaccueil;
}

header > nav > div{
	display: flex;
	justify-content: space-between;
	width: 100%;
	list-style: none;
}

.dropbtn {
	background-color: #212121;
	color: white;
	padding: 16px;
	font-size: 20px;
	border: none;
	cursor: pointer;
}

.dropdown {
	position: relative;
	display: inline-block;
}

.dropdown-content {
	display: none;
	position: absolute;
	right: 0;
	background-color: #212121;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
	font-size: 20px;
}

.dropdown-content a {
	color: white;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

.dropdown-content a:hover {background-color: #212121}

.dropdown:hover .dropdown-content {
	display: block;
}

.dropdown:hover .dropbtn {
	background-color: #212121;
}

nav > ul{
	padding: 0;
	margin: 0;
}

/* Section accueil */

#accueil{
  grid-area: accueil;
	background-color: white;
}

/* Section nos services */

#nosservices{
  grid-area: services;
	background-color: #334960;
}

h3{
	font-family: 'museo500';
	font-size: 20pt;
	margin-top: 0px;
	margin-bottom: 5px;
	text-align: center;
}


.webdev{
	grid-area: dev;
}

.webdes{
	grid-area: des;
}

.webmar{
	grid-area: mar;
}

.heberg{
	grid-area: heb;
}

.supp{
	grid-area: sup;
}

.ecom{
	grid-area: com;
}

#servicesbox{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-areas:	"dev dev dev dev des des des des mar mar mar mar"
	"heb heb heb heb sup sup sup sup com com com com";
	grid-gap: 20px;
}

.box > img{
	width: 190px;
	height: 190px;
}

.box{
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Section formules */

#formules{
  grid-area: formules;
	background-color: #DF4949;
}

.basique{
	grid-area: bas;
}

.normale{
	grid-area: nor;
}

.premium{
	grid-area: pre;
}

#formulesbox{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-areas: "bas bas bas bas nor nor nor nor pre pre pre pre";
	grid-gap: 20px;
}

.choix{
	background-color: #C94343;
	border: 2px solid white;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

h2{
	font-family: "museo500";
	text-align: center;
	font-size: 30pt;
}

.choix > p, ul{
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 0;
	font-size: 15pt;
}

.commander{
	margin-left: 30px;
	margin-right: 30px;
	margin-bottom: 30px;
	border: 2px solid white;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 15pt;
}

.boxtitre{
	border-bottom: 2px solid white;
}

.descriptionformules{
	padding-top: 10px;
}

/* Section contact */

#contact{
  grid-area: contact;
	background-color: #08585C;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#prenom{
	grid-area: pre;
}

#nom{
	grid-area: nom;
}

#email{
	grid-area: mai;
}

#sujet{
	grid-area: sub;
}

#message{
	grid-area: mes;
}

#envoyer{
	grid-area: env;
}

#contact > h1{
	grid-area: cont;
}

form{

	/*
	grid-area: form;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-areas:	". . . pre pre pre nom nom nom . . ."
	". . . mai mai mai mai mai mai . . ."
	". . . sub sub sub sub sub sub . . ."
	". . . mes mes mes mes mes mes . . ."
	". . . env env env . . . . . .";
	grid-gap: 20px;
	*/

	width: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.nomprenom{
	width: calc(100% + 20px);
	display: flex;
	justify-content: space-between;
}

.form{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.nomprenom > input{
	width: 50%;
}

.nomprenom > #prenom{
	margin-right: 20px;
}

.form > *{
	width: 100%;
}

textarea, input{
	background-color: #063F3F;
	border: 0px;
	color: white;
	margin: 10px 0 10px 0;
	font-size: 15pt;
}

input, textarea{
	padding: 10px 10px 10px 10px;
}

::placeholder {
	color: white;
	font-size: 15pt;
}

#envoyer{
	font-size: 20pt;
	width: calc(100% + 20px);
}

#localisation{
  grid-area: localisation;
	background-color: #E67E22;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:	"loc"
												"boxloc";
}

#map {
	height: 400px;
	width: 100%;
	grid-area: map;
}

#localisation > h1{
	grid-area: loc;
}

#boxloc{
	grid-area: boxloc;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-areas: "map map map map map map map . adr adr adr adr";
}

.adresse{
	grid-area: adr;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.adresse > p{
	margin: 0;
	font-size: 23pt;
}

/* Footer */

footer{
  grid-area: footer;
	background-color: #212121;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-areas:	"nac nac nac nre nre nre nap nap nap nrs nrs nrs";
}

footer > nav{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.navaccueil{
	grid-area: nac;
}

.navrealisations{
	grid-area: nre;
}

.navapropos{
	grid-area: nap;
}

.navrs{
	grid-area: nrs;
}

footer > nav > ul{
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	flex-direction: column;
}
 footer > nav > p{
	 font-size: 20pt;
	 text-align: center;
 }

footer > nav > ul > li{
	margin-bottom: 5px;
}


/* Page réalisation */


.h1real{
	color: black;
	grid-area: titr;
}

.img1{
	grid-area: img1;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 2px solid black;
}

.img2{
	grid-area: img2;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 2px solid black;
}

/* Section portfolio */

#portfolio > a > img{
	width: 100%;
	height: 100%;
}

#portfolio{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-areas: 	"titr titr titr titr titr titr titr titr titr titr titr titr"
												". img1 img1 img1 img1 . . img2 img2 img2 img2 .";
}

#partenaires{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-areas: 	"titr titr titr titr titr titr titr titr titr titr titr titr"
												". img1 img1 img1 img1 . . img2 img2 img2 img2 .";
}

#partenaires > div{
	padding: 5px 5px 5px 5px;
}

#partenaires > div > a > img{
	width: 100%;
	height: 100%;
}

/* Page à propos */

/* Section entreprise*/

#entreprise > p{
	color: black;
	font-size: 25px;
	border: 1px solid black;
	padding: 5px 5px 5px 5px;
}

.nom{
	font-family: "museo500";
	font-size: 20pt;
	margin-top: 5px;
	margin-bottom: 5px;
}

.h1aprop{
	color: black;
	grid-area: h1a;
}

/* Section notre équipe*/

#notreequipe{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-areas:	"h1a h1a h1a h1a h1a h1a h1a h1a h1a h1a h1a h1a"
	"tuc tuc tuc rus rus rus plo plo plo fou fou fou";
	grid-gap: 20px;
}

.boxequipe{
	display: flex;
	flex-direction: column;
	align-items: center;
	border: 1px solid black;
	padding: 10px 10px 10px 10px;
}

.boxequipe > *{
	color: black;
	text-align: center;
}

.boxequipe > img{
	width: 95px;
	height: 95px;
}

.tucker{
	grid-area: tuc;
}

.rustam{
	grid-area: rus;
}

.plouffe{
	grid-area: plo;
}

.fouquet{
	grid-area: fou;
}

/* Animations et interactions avec le site*/

a:hover{
	text-decoration: underline;
}

a:active{
	color: #27ae60;
	text-decoration: none;
}

/* Responsive pour les écrans moyens (jusqu'à 1245px de large) */

@media screen and (max-width: 1245px){

	/* Pour toutes les pages*/

	body > *{
		padding-left: 150px;
		padding-right: 150px;
	}

	footer{
		grid-template-columns: 1fr 1fr;
		grid-template-areas: 	"nac nre"
													"nap nrs";
	}

	/*Accueil*/

	#servicesbox{
		grid-template-columns: 1fr 1fr;
		grid-template-areas:	"dev des"
													"mar heb"
													"sup com";
	}

	.description{
		text-align: justify;
	}

	#formulesbox{
		grid-template-columns: 1fr;
		grid-template-areas:	"bas"
													"nor"
													"pre";
	}

	form{
		width: 80%;
	}

	#boxloc{
		grid-template-columns: 1fr;
		grid-template-areas:	"map"
													"adr";
	}

	.adresse{
		padding-top: 20px;
	}

	.adresse > p{
		text-align: center;
	}

	/*Réalisation*/

	#portfolio, #partenaires{
		grid-template-columns: repeat(12, 1fr);
		grid-template-areas: 	"titr titr titr titr titr titr titr titr titr titr titr titr"
													". . . img1 img1 img1 img1 img1 img1 . . ."
													". . . img2 img2 img2 img2 img2 img2 . . .";
	}

	.img2{
		margin-top: 75px;
	}

}

/* Responsive pour les écrans petits (jusqu'à 770px de large) */

@media screen and (max-width: 770px){
	/* Pour toutes les pages*/

	body > *{
		padding-left: 100px;
		padding-right: 100px;
	}

	.dropbtn, .dropdown-content{
		font-size: 10pt;
	}

	/*Accueil*/

	#servicesbox{
		grid-template-columns: 1fr;
		grid-template-areas:	"dev"
													"des"
													"mar"
													"heb"
													"sup"
													"com";
	}

	/*Notre équipe*/

	#notreequipe{
		grid-template-columns: 1fr;
		grid-template-areas:	"h1a"
													"tuc"
													"rus"
													"plo"
													"fou";
	}

}