@media (max-width:1920px) and (min-width:1568px){
/* NIVEAU : BODY */

body
{
  margin:0;
  padding:0;
  background:white url('images/bg_page.jpg');
  font-family:Tahoma, Verdana, Helvetica, Arial, sans-serif;
  font-weight:normal;
  font-size:14px;
}

/* NIVEAU : WRAPPER */

#wrapper
{
  width:1440px;
  margin:20px auto;
  background:white url('images/bg_2col.jpg') repeat-y 0 0;
  border:1px solid #00a2e8;
}

/* NIVEAU : HEADER, MAIN et RESET */

#header, #main
{
  padding:20px;
}

#header
{
  float:left;
  width:260px;
  color:white;
}

#main
{
  float:right;
  width:1100px;
}

#reset
{
  clear:both;
}

/* SECTION : LOGO et SLOGAN */

#logo-et-slogan
{
  text-align:center;
  border-bottom:1px solid white;
  margin-bottom:20px;
}

img#logo
{
  width:160px;
}

#slogan
{
  font-size:24px;
  font-weight:bold;
  letter-spacing:3px;
  word-spacing:10px;
}

/* SECTION : MENU */

#menu
{
  font-size:18px;
  font-weight:normal;
  letter-spacing:6px;
}

#menu ul
{
  margin:0;
  padding:0;
  list-style:none;
}
 
#menu ul li
{
  cursor:pointer;
  padding:5px 8px;
}
 
#menu ul li:hover
{
  background-color:#008ac5;
  color:gold;
}

/* SECTION : CONTENT */

#content
{
  text-align:justify;
}

#content img
{
  float:right;
  width:300px;
  margin:0px 0px 10px 20px; 
}

/* SECTION : FOOTER */

#footer
{
  clear:both;
  font-size:12px;
  border-top:1px solid #f0f0f0;
  margin-top:30px;
  text-align:center;
  padding:30px 0px;
  color:#c0c0c0;
}

#miseEnForme{
  display:none;
  width:100%;
  height:50px;
  text-align:center;
}
}

@media (max-width:1568px) and (min-width:1000px){
  /* NIVEAU : BODY */
  
  body
  {
    margin:0;
    padding:0;
    background:white url('images/bg_page.jpg');
    font-family:Tahoma, Verdana, Helvetica, Arial, sans-serif;
    font-weight:normal;
    font-size:14px;
  }
  
  /* NIVEAU : WRAPPER */
  
  #wrapper
  {
    width:1040px;
    margin:20px auto;
    background:white url('images/bg_2col.jpg') repeat-y 0 0;
    border:1px solid #00a2e8;
    display: flex;
   
  }
  
  /* NIVEAU : HEADER, MAIN et RESET */
  
  #header, #main
  {
    padding:20px;
  }
  
  #header
  {
    float:left;
    width:260px;
    color:white;
  }
  
  #main
  {
    float:right;
    width:1100px;
  }
  
  #reset
  {
    clear:both;
  }
  
  /* SECTION : LOGO et SLOGAN */
  
  #logo-et-slogan
  {
    text-align:center;
    border-bottom:1px solid white;
    margin-bottom:20px;
  }
  
  img#logo
  {
    width:160px;
  }
  
  #slogan
  {
    font-size:24px;
    font-weight:bold;
    letter-spacing:3px;
    word-spacing:10px;
  }
  
  /* SECTION : MENU */
  
  #menu
  {
    font-size:18px;
    font-weight:normal;
    letter-spacing:6px;
  }
  
  #menu ul
  {
    margin:0;
    padding:0;
    list-style:none;
  }
   
  #menu ul li
  {
    cursor:pointer;
    padding:5px 8px;
  }
   
  #menu ul li:hover
  {
    background-color:#008ac5;
    color:gold;
  }
  
  /* SECTION : CONTENT */
  
  #content
  {
    text-align:justify;
  }
  
  #content img
  {
    float:right;
    width:300px;
    margin:0px 0px 10px 20px; 
  }
  
  /* SECTION : FOOTER */
  
  #footer
  {
    clear:both;
    font-size:12px;
    border-top:1px solid #f0f0f0;
    margin-top:30px;
    text-align:center;
    padding:30px 0px;
    color:#c0c0c0;
  }
  
  #miseEnForme{
    display:none;
    width:100%;
    height:50px;
    text-align:center;
  }
}

@media (max-width:1000px) and (min-width:720px){
  /* NIVEAU : BODY */
  
  body
  {
    margin:0;
    padding:0;
    background:white url('images/bg_page.jpg');
    font-family:Tahoma, Verdana, Helvetica, Arial, sans-serif;
    font-weight:normal;
    font-size:14px;
  }
  
  /* NIVEAU : WRAPPER */
  
  #wrapper
  {
    width:700px;
    margin:20px auto;
    background:white url('images/bg_2col.jpg') repeat-y 0 0;
    border:1px solid #00a2e8;
  }
  
  /* NIVEAU : HEADER, MAIN et RESET */
  
  #header, #main
  {
    padding:20px;
  }
  
  #header
  {
    float:left;
    width:94.3%;
    color:white;
    background-color: #00a2e8;
  }
  
  #main
  {
    float:right;
    width:90%;
  }
  
  #reset
  {
    clear:both;
  }
  
  /* SECTION : LOGO et SLOGAN */
  
  #logo-et-slogan
  {
    text-align:center;
    border-bottom:1px solid white;
    margin-bottom:20px;
  }
  
  img#logo
  {
    width:160px;
  }
  
  #slogan
  {
    font-size:24px;
    font-weight:bold;
    letter-spacing:3px;
    word-spacing:10px;
  }
  
  /* SECTION : MENU */
  
  #menu
  {
    font-size:18px;
    font-weight:normal;
    letter-spacing:6px;
    display: block !important ;
  }
  
  #menu ul
  {
    margin:0;
    padding:0;
    list-style:none;
  }
   
  #menu ul li
  {
    cursor:pointer;
    padding:5px 8px;
  }
   
  #menu ul li:hover
  {
    background-color:#008ac5;
    color:gold;
  }
  
  /* SECTION : CONTENT */
  
  #content
  {
    text-align:justify;
  }
  
  #content img
  {
    float:right;
    width:300px;
    margin:0px 0px 10px 20px; 
  }
  
  /* SECTION : FOOTER */
  
  #footer
  {
    clear:both;
    font-size:12px;
    border-top:1px solid #f0f0f0;
    margin-top:30px;
    text-align:center;
    padding:30px 0px;
    color:#c0c0c0;
  }
 
  #miseEnForme #miseEnForme-img{
    display: none;
  } 
 
}

@media (max-width:720px) and (min-width:0px){
  /* NIVEAU : BODY */
  
  body
  {
    margin:0;
    padding:0;
    background:white url('images/bg_page.jpg');
    font-family:Tahoma, Verdana, Helvetica, Arial, sans-serif;
    font-weight:normal;
    font-size:14px;
  }
  
  /* NIVEAU : WRAPPER */
  
  #wrapper
  {
    width:80%;
    margin:20px auto;
    background:white url('images/bg_2col.jpg') repeat-y 0 0;
    border:1px solid #00a2e8;
  }
  
  /* NIVEAU : HEADER, MAIN et RESET */
  
  #header, #main
  {
    padding:20px;
  }
  
  #header
  {
    background-color: #00a2e8;
    float:left;
    width:92%;
    color:white;
  }
  
  #main
  {
    float:right;
    width:auto;
  }
  
  #reset
  {
    clear:both;
  }
  
  /* SECTION : LOGO et SLOGAN */
  
  #logo-et-slogan
  {
    text-align:center;
    border-bottom:1px solid white;
    margin-bottom:20px;
  }
  
  img#logo
  {
    width:160px;
  }
  
  #slogan
  {
    font-size:24px;
    font-weight:bold;
    letter-spacing:3px;
    word-spacing:10px;
  }
  
  /* SECTION : MENU */
  
  #menu
  {
    background-color: #00a2e8;
    width: 100%;
    font-size:18px;
    font-weight:normal;
    letter-spacing:6px;
  }
  
  #menu ul
  {
    margin:0;
    padding:0;
    list-style:none;
  }
   
  #menu ul li
  {
    cursor:pointer;
    padding:5px 8px;
  }
   
  #menu ul li:hover
  {
    background-color:#008ac5;
    color:gold;
  }
  
  /* SECTION : CONTENT */
  
  #content
  {
    text-align:justify;
  }
  
  #content img
  {
    float:right;
    width:60%;
    margin:0px 0px 10px 20px; 
  }
  
  /* SECTION : FOOTER */
  
  #footer
  {
    clear:both;
    font-size:12px;
    border-top:1px solid #f0f0f0;
    margin-top:30px;
    text-align:center;
    padding:30px 0px;
    color:#c0c0c0;
  }
  
  #miseEnForme{
    width:100%;
    height:50px;
    text-align:center;
  }
}