* {/*proprieter taille de boite trés utile notament pour le responssive*/
  box-sizing: border-box;
}


body{
  background-image: url(../img/fond.png);
  width: 100%;
}
/* En tete */
header{
  background-color: rgb(87, 214, 176);
  text-align: center;
}
header h1{
  color:rgb(48, 104, 85);
  font-size: 45px;
  /*Telecharger font est copier coller link*/
  font-family: "Anton", sans-serif;
  letter-spacing: 1px;
  /* Pour enlever la marge du titre*/
  margin:0 auto;
  text-align: center; 
}
header img{
  width: 10%;
}

nav{
  background-color: rgb(48, 104, 85);
  display: flex;
  justify-content: space-around;
}

nav a {
  border: 2px solid rgb(172, 251, 148);
  background: rgb(87, 214, 176);
  color: rgb(48, 104, 85);
  margin: 10px;
  padding: 2px 10px;
  border-radius: 10px 0px;
  text-decoration: none;
  font-size: 20px;
}

/* Corp de page  */
body{
  background-image: url(../img/fond.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}

/* En tete */
header{
  background-color:rgb(87, 214, 176);
  text-align: center;
}
header h1{
  margin: 0px;
}
header img{
  width: 10%;
}

#activ_nav{
  background-color: rgb(48, 104, 85);
  display: flex;
  justify-content: space-around;
}
/* .sticky{
  position: sticky;
  top: 1px;
} */

nav a {
  border: 2px solid rgb(172, 251, 148);
  background: rgb(87, 214, 176);
  color: rgb(48, 104, 85);
  margin: 10px;
  padding: 2px 10px;
  border-radius: 10px 0px;
  text-decoration: none;
  font-size: 20px;
}

/* Corp de page  */
main{
  background-color: rgb(87, 214, 176);;
  margin: 0 auto;
  text-align: center;
  width: 50%;
}
/***********************FLEXBOX*************************/

/*  */
.flex {
display:flex;
justify-content: space-around;

}
#zoning1 {
background: #ffd6d6;
width: 800px;
text-align: center;
text-shadow: 1px 1px 2px darkgrey;
margin: auto;
}

#zoning1 header {
height: 70px;
background: #f7f39a;
}

#zoning1 aside {
height: 525px;
background: #a3de83;
}

#zoning1 section {

background: #38817a;
height: 525px;
width: 100%;
margin: 0;
padding: 0;
}
#zoning1 .footer{
background: #5037bd;
color:white;
height: 70px;
}
/*zonning2*/
#zoning2 {
background: #ffd6d6;
width: 800px;
text-align: center;
text-shadow: 1px 1px 2px darkgrey;
margin: auto;
}
#zoning2 header {
height: 70px;
background: #f8f5e4;
}

#zoning2 aside {
height: 525px;
float: left;
width: 20%;
background: #10828c;
color: white;
}

#zoning2 .middle {
float: left;
background: #0e3047;
height: 525px;
width: 60%;
margin: 0;
padding: 0;
color: white;
}
/**********************Zoning 3************************/
#zoning3Body{
display: flex;
flex-direction: column;
height: 75vh;
width: 30vw;
margin: 0 auto;
}

#zoning3Header{
background-color: plum;
height: 15%;
}
#zoning3Nav{
background-color: yellow;
height: 5%;
}
#zoning3Main{
display: flex;
flex-wrap: wrap;
height: 100%;
width: 100%;
}
#zoning3Main section{
width: 20%;
}
#zoning3Main section.a{
background-color: red;
}
#zoning3Main section.b{
background-color:blue;
}
#zoning3Main section.c{
background-color: green;
}
#zoning3Main section.d{
background-color: purple;
}
#zoning3Main section.e{
background-color: yellow;
}
#zoning3Main section.f{
background-color: black;
}
#zoning3Main section.g{
background-color: grey;
}
#zoning3Main section.h{
background-color: plum;
}
#zoning3Main section.i{
background-color: aquamarine;
}
#zoning3Main section.j{
background-color: orangered;
}
#zoning3Main section.k{
background-color: teal;
}
#zoning3Main section.l{
background-color: limegreen;
}
#zoning3Main section.m{
background-color:fuchsia;
}
#zoning3Main section.n{
background-color: khaki;
}
#zoning3Main section.o{
background-color: navy;
}
#zoning3Main section.p{
background-color: maroon;
}
#zoning3Main section.q{
background-color: hotpink;
}
#zoning3Main section.r{
background-color: oldlace;
}
#zoning3Main section.s{
background-color: gold;
}
#zoning3Main section.t{
background-color: rgb(123, 123, 233);
}
#zoning3Footer{
background-color: red;
height: 15vh;
}

/***********************FIN ZONING**********************/

/* La zone de pied de page */

footer{
  background-color:rgb(48, 104, 85);
  color:antiquewhite;
  text-align: center;
}