@media screen and (min-width: 768px) and (max-width:1279px) {
    * {
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
    
    /* passer body (et tous les éléments de largeur fixe) en largeur automatique */

    /* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

    img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {
        max-width: 100%;
    }
    
    /* conserver le ratio des images */

    img {
        height: auto;
    }
    
    /* gestion des mots longs */

    textarea, table, td, th,  code, pre, samp {
        -webkit-hyphens: auto; /* césure propre */
        -moz-hyphens: auto;
        hyphens: auto;
        word-wrap: break-word; /* passage à la ligne forcé */
    }
    
    code, pre, samp {
        white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
    }

    /* masquer les éléments superflus */

    .hide_mobile {
        display: none !important;
    }
    
   #page_bg {
  	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  	font-size : 10 px;
    width :100%;
    margin : 0px 0px 0px 0px ;
  }
  
  #container {
    width : 100%;
    height : 100%;
    background-image: url('../images/fondpage.jpg');
  	border-bottom: 20px solid #e3e3e3;
  }
  
  #entete {
    width:650px;
    margin-left:auto;
    margin-right:auto;
  }
  
  #bandeau {
    width : auto ;
  }
  
  #logo {
    width:50%;
    height : auto ;
    margin-top : 3px;
    margin-bottom : 3px;
    float : left;
  }
  
  #titreimg {
    display : none ;
  }
  
  #connecsearch {
    width:50%;
    height : auto;
    float : left ;
    margin-top : 5px;
  }
  
  #connexion{
    width:auto ;
    height : auto ;
    padding-top : 10px;
  }
  
  #recherche {
    width:auto ;
    height : auto;
    padding-top : 10px;
    text-align : right ;
  }
  
  #menuprincipal{
    clear:both;
  }
  
  #caroussel {
    margin:0px auto;
    padding-top:15px;
    text-align : center;
  }
  
  .promo {
    display : block;
    vertical-align: top;
    width: auto;
    text-align : left;
    height : auto;
    margin : 0px 0px 0px 0px ;
    padding : 0px 0px 0px 0px ;
  }
  
  #container2 {
    clear : both ; 
    background: linear-gradient(to bottom, #ebebeb, #ffffff);
    width : 100%;
    background-repeat: repeat-x;
  }
  
  #article { 
    width:650px;
    margin-left:auto;
    margin-right:auto;
    
  }
  
   .readmore a {
      display:block;
      width:200px;
      line-height:30px;
      text-align:center;
      vertical-align:middle;
      background:url(../images/boutonsuite.jpg) no-repeat;
      color:black;
      text-decoration:none;
  }
       
  .readmore a:hover {
      color:white;
      text-decoration:none;
  }
  
  .articleburkina {
    display : inline-block;
    vertical-align: top;
    width:33%;
    text-align : left;
    height : 200 px ;
    margin : 0px 0px 0px 0px ;
    padding : 0px 0px 0px 0px ;
  }
  
  #pieddepage1 {
    clear : both ;
    width : 100% ;
    height : 50px;
    background-color : #e3e3e3;
    text-align:center;
  }
  
  #pieddepage2 {
   display:none ;
  }
  
  .foot{
    font-size : small ;
    font-style : italic ; 
    height:50px;
    line-height:50px;   
  }
  
  .contact-form {
       width : auto ;
    }   

   .cadre {
    background: linear-gradient(to bottom, #ffffff, #f4f4f4);
    width: auto;
    margin: 0 auto 10px auto;
    padding: 10px;
    border: 3px solid #009e49;
 
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    behavior: url(border-radius.htc);
 
    background-image: -moz-linear-gradient(top, #ffffff, #f4f4f4);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f4f4f4));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff,endColorstr=#f4f4f4);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff,endColorstr=#f4f4f4)";
  }
 
  legend {
    color: #e53130;
  }
  
}

@media (min-width:768px) and (max-width:1279px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
  }
}