body {
 background-color: #FFFFFF;
 margin: 0;
}
p {
 margin-top: 0;
 margin-bottom: 0;
}
@media screen and (max-width: 999px) {
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 25px;
    margin-bottom: 15px;
    }
.page {
 background-color: #CECECE;
 min-width: 300px;
 border: 5px solid orange;
}
.conteneur {
  background-color: #FFFFFF;
  border-top:10px solid orange;
}
.style2 {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 20px;
 text-align: center;
}
h1, h2, h3, h4, h5, h6 {
 font-family : Arial, Helvetica, sans-serif;
 font-size : 20px;
 text-align : center;
 margin-left : 5px;
 margin-right : 5px;
}
.btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
        height: 50px;
        cursor: pointer;
        transition: 0.5s ease-in-out;
        position: relative;
        background-color: orange;
        border: 1px solid black;
        border-radius: 5px;
        margin-left: 15px;
        } 
.hamburger  {
        width: 40px;
        height: 4px;
        background-color: black;
        transition: 0.25s ease-in-out;
        border-radius: 5px;
        }
 .hamburger::before,
 .hamburger::after  {
        content: "";
        position: absolute;
        width: 40px;
        height: 4px;
        background-color: black;
        transition: 0.5s ease-in-out;
        border-radius: 5px;
        }
 .hamburger::before {
        transform: translateY(-15px);
        }
 .hamburger::after {
         transform: translateY(15px);
        }
.open .hamburger {
      background-color: transparent; 
     }
.open .hamburger::before {
       transform: rotate(-135deg);
       }
.open .hamburger::after {
       transform: rotate(135deg);
       }
.menu {
        background-color: #CECECE;
        border: 3px solid black;
        border-radius: 10px;
        width: 150px;
        position: fixed;
        display : flex;
        opacity: 0;
        transition: 0.3s ease-in-out;
        transform: translateX(-150px);
        pointer-events: none; 
        }
 .menu ul .scroll {
         position: absolute;
         display: flex;
         overflow-y: scroll;
         }
.menu ul {
       margin: 0;
       padding: 0;
       font: bold 1em Arial, Helvetica, sans-serif;
       list-style: none;
       width:150px;
}
.menu a {
        display:block;
        margin: 5px 0;
        color: black;
        text-decoration: none;
        line-height: 20px;
        width: 150px;
        text-align:center;
        background: #FFFFFF;
        border-top:1px solid black;
        border-bottom:1px solid black;
}
.menu a:hover {
        background-color: orange;
        border:none;
}
.menu a.active {
       background-color: orange;
 }
.sous-titre {
       text-align:center;
       display:block;
       margin: 5px 0;
       color: black;
       text-decoration: none;
       line-height: 18px;
       width: 150px;
       background: #FFD700;
       border-top:1px solid black;
       border-bottom:1px solid black;
}
.titre {
      text-align:center;
      display:block;
      margin: 5px 0;
      color: black;
      text-decoration: none;
      line-height: 26px;
      width: 150px;
      background: #FFFF00;
       border-top: 2px solid black;
       border-bottom: 2px solid black;
}
.menu-open {
        z-index:10;
        opacity:1;
        transition: 0.3s;
        transform: translateX(10px); 
        pointer-events: all; 
        }
.wide {
       display: none;
       }
}
@media screen and (min-width: 1000px) {
header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
    margin-bottom: 5px;
    }
.style7 {
 font-family : Arial, Helvetica, sans serif;
 font-size : 20px;
 text-align : justify;
 margin-left : 5%;
 margin-right : 5%;
}
.menu {
 float: left;
 width: 150px;
 position: relative;
 background: #CECECE;
}
.menu ul {
 margin: 0;
 padding: 0;
 font: bold 1em Arial, Helvetica, sans-serif;
 list-style: none;
 width:150px;
}
.menu ul{
 position:relative;
}
.menu a {
 display:block;
 margin: 5px 0;
 color: black;
 text-decoration: none;
 line-height: 20px;
 width: 150px;
 text-align:center;
 background: #FFFFFF;
 border-top:1px solid black;
 border-bottom:1px solid black;
}
.menu a:hover {
 background: orange;
 border:none;
 color:#0066FF;
}
.menu a.active {
 background-color: orange;
}
.style1 {
 font: bold 1em Arial, Helvetica, sans serif;
 text-align:left;
 margin-left:10px;
}
.style2 {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 20px;
 text-align: center;
}
.style3 {
 font-family: Arial, Helvetica, sans serif;
 font-size: 20px;
 color: #0066FF;
 text-align: center;
}
h1, h2, h3, h4, h5, h6 {
 font-family : Arial, Helvetica, sans-serif;
 font-size : 20px;
 text-align : center;
 margin-left : 5px;
 margin-right : 5px;
}
.page {
 background-color: #CECECE;
 max-width: 1600px;
 margin-left: auto;
 margin-right: auto;
 margin-top: 5px;
 margin-bottom: 15px;
 border:10px solid orange;
  border-radius: 30px;
}
.annonce { 
 margin-left:10px;
 margin-right:10px;
 border:3px solid red;
 background:black;
 position: relative;
}
.conteneur {
 background-color: #FFFFFF;
 margin-left: 150px;
 border-left: 10px solid orange;
 border-top:10px solid orange;
 position: relative;
}
.conteneur img{
 border: none;
}
.sous-titre {
 text-align:center;
 display:block;
 margin: 5px 0;
 color: black;
 text-decoration: none;
 line-height: 18px;
 width: 150px;
 background: #FFD700;
 border-top:1px solid black;
 border-bottom:1px solid black;
}
.titre {
 text-align:center;
 display:block;
 margin: 5px 0;
 color: black;
 text-decoration: none;
 line-height: 26px;
 width: 150px;
 background: #FFFF00;
 border-top: 2px solid black;
 border-bottom: 2px solid black;
}
.slim {
     display: none;
     }
}
@viewport { 
    width: device-width; 
    zoom: 1; 
}