@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:wght@600&display=swap');
body{
  margin: 10px 80px;
  font-family: 'Noto Sans JP', sans-serif;
}

nav {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}
nav h1{
  font-family: 'Crimson Text', serif;
  font-size: 50px;
}
nav .onglets{
  margin-top: 20p;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
  font-family: calibri, serif;
}
nav .onglets a{
	display:block;
  text-decoration: none;
  color:white;
  font-size: 20px;
  margin-right: 10px;
  background-color : #333333 ;
} 
  nav li{
  float:left;
    width : 150px;
  height : 40px;
  border-right : 1px solid #cccccc;
    text-align  :center;
  line-height : 40px;
}

/*.info-bar{
	position: relative;
	font-size: 13p;
	background-color: #97999b;
	overflow: hidden;
	min-height: 30p;
	color:#cccccc;
}*/
.presentation{
  margin-top: 30px;
}
.presentation .h1{
	  color:#350399;
}	
.presentation .presentation{
  display: flex;
  flex-wrap:wrap;
  margin-bottom: 30px;
}
.presentation .presentation .left img{
  height: 390px;
  width: 650px;
}
.presentation .presentation .right {
  margin-left: 40px;
  max-width: 50%;
}
.articles{
  margin-top: 30px;
  background-color: #f2f2f2;
}
.articles .h1{
	  color:#350399;
}	
.articles .article{
  display: flex;
  flex-wrap:wrap;
  margin-bottom: 30px;
}
.articles .article .left img{
  height: 390px;
  width: 650px;
}
.articles .article .right {
  margin-left: 40px;
  max-width: 50%;
}
/*.middle {
  margin-left: 30px;
  max-width: 40%;
}*/

.articles .article .right p.date{
  color: #7f7e7e;
}
.articles .article .right p.description{
  color: #2d2d2d;
}

footer {
  margin-top: 30px;
  display: flex;
  flex-wrap:wrap;
  justify-content: space-between;
  color: #494949;
}
footer h2{
  font-size: 20px;
  font-family: 'Crimson Text', serif;
  margin-top: 20px;
}
footer .social-media{
  display:flex;
}
footer .social-media p{
  font-size: 18px;
  margin-right: 20px;
}

@media screen and (max-width: 640px){
  body{
    margin: 10px 20px;
  }
  nav .logo img{
	  height: 100%;
	  width: 100%;
  }
  nav .onglets{
    margin-top: -10px;
  }
  .presentation .presentation .left img{
	   height: 100%;
    width: 100%;
  }  
  .presentation .presentation .right{
    margin: 0px;
    max-width: 100%;
  }
  .articles .article .left img{
    height: 100%;
    width: 100%;
  }
  .articles .article .right{
    margin: 0px;
    max-width: 100%;
  }
  .map{
	  	   height: 100%;
    width: 100%;
  }
  .map img{
	 height: 100%;
    width: 100%;
  }	
  .map iframe{
	 height: 100%;
    width: 100%;
  }	
  footer .social-media{
    margin-top: -20px;
  }
}

/* //////////////////////////////////////////////
Plus d'informations liées à la solution  : 
//////////////////////////////////////////////

https://www.zonecss.fr/faq/description-d-un-element.html#specifier-la-taille-d-un-element-grace-aux-feuilles-de-style-css

https://www.zonecss.fr/proprietes-css/box-sizing-css.html#WJwJqZ00000.codepen
*/


input[type=text], textarea, input[type=email] {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  margin-right: 0px;
  margin-left: 0px;
  resize: vertical;
}
label{margin-right: 0px;
  margin-left: 0px;
  width: 100%;}

input[type=submit] {
  background-color: #1255a2;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #1872D9;
}

.container {
  /* Ajouter box-sizing */
  box-sizing : border-box;
  border-radius:5px;
  background-color:#f2f2f2;
  padding:20px;
  width: 100%;
  /* redéfinition 400 + 2*20 */
  max-width: 440px;
  margin:0 auto;
}