@font-face {
    font-family: 'elmessiri' ;
    src: url('elmessiri.ttf') ;
}

#debut{
  background-color: white;
}

body {
    background-color: #f0f8ff;
}



#cadre{
   border: navy 4px solid;
  background-image: url("wallbleu.jpg");
  /* border-color: navy; */
  /* border-width: 4px; */
}


#logo {
  width : 14%;
height : 14%;
 text-align: center;
   display: block;
   margin: auto;
}

#titre{

  color:black;
text-align: center;
font-family: 'elmessiri';
font-style: oblique;
}

#navi  {
  border: navy 3px solid;
  background-image: url("wallbleu.jpg");
  /* background-color: black; */
height:  5%;
font-size: 22px;
   text-align: center;
     padding: 1px;

}

#navi  li {
font-family: 'elmessiri';
  display: inline-block;
margin-right:4%;
 font-style:italic;
font-style: oblique;
  text-transform: uppercase;

}

#navi  li a {
  text-decoration: none;
  font-family: 'elmessiri';
  color : black;
}

#navi li:hover a {
  border: #ffebcd 2px solid;
  color:white;
}

#titre2{
  /* background-image: url("wallvert.jpg"); */
/* background-color: Azure;  */
  color:black;
text-align: center;
font-family: 'elmessiri';
/* font-style: oblique; */
text-decoration: underline;
font-weight: bold;
}



#contenu{
    border: navy 1px solid;
  /* background-image: url("fondvert.jpg"); */
  /* background-color: Azure; */
  background-size: contain;
  overflow: auto;
      padding: 5px;
    /* background-image: url("wallvert1.jpg"); */
}

#contenu1 {
padding: 6px;
  font-size: 19px;
  font-family: 'elmessiri';
  /* font-size: 100%; */
 font-style: oblique;
    /* text-transform: uppercase; */
    /* text-justify: auto; */
    font-weight: bold;
  margin: auto;
      float: left;
  text-align: justify;
   width : 49%;
  height : 80%;
/* display: block; */
    /* float: left;*/
/* text-align: left; */
       margin: auto;

}

#contenu2 {
    background-size : contain;
    text-align: right;
}

.trouble img{
  -webkit-filter: blur(8px);
	filter: blur(8px);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.trouble:hover img{
  -webkit-filter: blur(0);
	filter: blur(0);
}