body {
  margin: 0px;
  background-image: url("image/body_02.png");
  background-size: cover;
	background-attachment: fixed;
}
* {
  font-family: "Titillium Web", sans-serif;
  font-size: 12pt;
}

/**************nav*****************/

nav {
  display: flex;
}
nav > a {
  display: block;
  width: 400px;
  background-color: rgba(0, 0, 0, 0.6);
  text-align: center;
  box-sizing: border-box;
  padding: 20px;
  color: #fff;
  margin: 1px;
  text-decoration: none;
  transition: all 0.3s ease;
}
nav > a:hover {
  background-color: rgba(9, 22, 95);
  color: #fff;
  transition: all 0.3s ease;
}
#ch{
  display: none;
}
#lab{
  width: 30px;
  height: 30px;
  background-image: url("image/menu.png");
  margin: 4px;
  display: none;
}
main{
  margin: 0;
  padding: 20px;
  background-image: url("image/beige024.gif");
  text-align: center;
}
/************** offres******************/                           
.offres{
background-size: cover;
font-size:16px;
text-align: center;
}
.offres a{
color:blue;
font-size:16px;
}
.offres img{
  border:none;
}

.offres a:hover{
color:#1E8449;
border-bottom:1px solid blue;
font-size:16px;
}

.offres{
padding:30px; 
background-size: cover;
background-position:center;
}

.offres h1{
text-align: center;
}
.offres h2{
  font-size:16px;
  text-align: center;
  padding:20px;
  margin: 10px;
  background-image: url("image/ruban006.jpg");
  }

.offres p{
text-align: center;
font-weight: bold;
font-size:16px;
}
.offres .offres-cartes{
margin-top: 30px;
display: flex;
flex-wrap: wrap;
align-items:center;
justify-content:center;
}
/**************offres offres-cartes cartes*********/
.offres .offres-cartes .carte{
position: relative;
opacity: 1;
padding:20px;
margin-bottom: 20px;
margin-right:20px;
background-image: url("image/beige024.gif");
border: 2px solid black;
}

.offres .offres-cartes .carte h2{
  font-size: 20px ;
}

.offres .offres-cartes .carte img{
height:100px;
border: none;
}
/**************pied de page*******************/

.pied {
	padding:0;
	width: 500px;
	margin: auto;
	margin-bottom: 20px;
	margin-top: 20px;
	background-image: url("image/beige024.gif");
	text-align: center;	
	border: 2px solid black;
}


/*************média query********************/

@media all and (max-width: 800px) {
  nav {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    transform: translate(-850px, 0);
  }
  nav > a {
    width: auto;
  }
  #ch:checked + nav {
    transform: translate(0, 0);
    transition: all 0.5s ease;
  }
  #lab{
    display: block;
  }
}