* {/*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  */
main{
  background-color: rgb(87, 214, 176);
  margin: 0 auto;
  text-align: center;
  width: 75%;
}
h2{
  color: rgb(34, 105, 31);
  padding: 20px;
  font-size:35px;
  text-shadow: 1px 1px 2px #aaa;
/* 4 valeurs : ombre horizontale, verticale, zone de flou, couleur de l'ombre */
}
h3{
  color: rgb(14, 131, 86);
  padding: 15px;
  font-size:22px;
}
.colonne{
  display: flex;
  flex-direction: column;
}
section .triomphe{
  margin: 0 auto;
  width: 30%;
}
section .triomphe1{
  margin: 0 auto;
  width: 50%;
}
.imageFond {
    background-image: url(../img/fond1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
       
  }

 .imageFond p {
    color: rgb(209, 196, 178);
    width:15%;
    margin: 0 auto;
    background: rgb(48, 104, 85);
    padding: 50px;
    font-size: 1em;
    border-radius: 10px;
  }

.image {
    margin: 0 auto;
    border: 5px solid #eee;
    /*couleur en rgba utilisé pour créer une ombre à mon image*/
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
    transition: 3s;
    width: 22%;
  }
  
/* image avec effet de rotation sur un effet hover(passe de souris sur element) */
.image:hover {
    transform: rotate(-7deg);
    border: 15px solid #eee;
  }
  
.rotation360:hover {
    transform: rotate(-360deg);
  }
/* La zone de pied de page */

footer{
  background-color:rgb(48, 104, 85);
  color:antiquewhite;
  text-align: center;
}
@media screen and (max-width:768px) {
  body{
      /* display: flex; */
      height: 100vh;
      width: 100vw;
  }

  .container{
      display: flex;
  }
  header{
      display: flex;
      flex-direction: column;
      width: 30%;
  }
  header img{
      width: 85%;
      margin: 0 auto;
  }
  header nav{
      display: flex;
      flex-direction: column;

  }
  header nav{
    position: sticky;
    top:1px;
  }
  header nav a{
      margin-top: 7%;
  }
  main{
      width: 69%;
  }
  .imageFond{
    display: none;
  }
  section .eiffel{
    margin: 0 auto;
    width: 100%;
  }
  section .eiffel1{
    margin: 0 auto;
    width: 100%;
  }
  footer h3{
      margin-top: 0;
  }
}