@media (max-width: 640px) {
/* passer tous les éléments de largeur fixe en largeur automatique */
body {
   width: auto;
   margin: 0;
   padding:0;
    background:#fafafa;
 }
  /* fixer une largeur maximale  de 100 % aux éléments potentiellement problématiques */
 img, table, td, textarea, input, div {
   max-width: 100%;
 }
 
 /*h1 { padding:10px;}*/

/* conserver le ratio des images et empêcher les débordements de boîtes dûs aux border ou padding */
img {
   height: auto; width: auto;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }

#contenu { width:100%; background:none; }
#header {width:100%;height:65px; }
#header .head {width:100%; height:65px;  }

#pagediapo { width:100%; height:auto;}
#pagediapo div { width:100%;   }

#pagetop { width:100%;padding:0px; background:#fff; border:none; }
#pagetop .top { width:100%;padding:0;}
/*#pagetop .top div { margin:0; }*/

h1 {padding:0 0 10px 10px; margin:0; background:#fff;}

#titre { width:100%; border:none; background:none;}
#titre h2 { color:#80BA4A;  padding-left:10px; font-size:24px; }
#titre h2 div {  color:#000; font-size:16px;  font-weight:300; float:right; padding-right:10px; font-size:18px; padding-top:5px;}

#paveblanc {border-radius:0px;  padding:0; }
#paveleft {float:left; width:100%; text-align:justify; }

#page, #metier { width:100%; }

/*#logo { width:100%;  height:50px; text-align:center; padding:20px 0 0 0;  }*/
#logo { display:none;}
#logoSmall { display:block;margin:0px;position:absolute; top:3px; left:10px;}

#diapo-big { height: auto;}

#connectBar { background-color:#000000; width:100%; min-height:30px;  }
#connect { border-radius:0;padding:0; float:none  }
#connect a { top:6px; }

#deconnect { width:14px; height:15px; position:absolute; top:8px; right:10px;  cursor:pointer;  opacity:0.7;}
#deconnect input { background:none; border:none; z-index:100;}

#deconnect:hover  {opacity:1;}

#connectclose { position:absolute; top:5px; right:5px;}
#connectpass { margin-left:25px; margin-top:0px;}

#login { top:30px; width:200px; height:130px; z-index:100;}
#login input { width:150px; }
#login .connect {width:157px;  }

#errorid {right:65px;  }

#bienvenue { display:none;}
#bienvenueSmall { display:block;}
#bienvenueSmall input { width:14px; height:15px; padding:0; border:none; }

#moncompte  { position:absolute; top:5px; right:35px; opacity:0.7; }
#moncompte:hover  {opacity:1;}

#nav { top:0;  position:relative; float:left; width:100%;  }
#nav ul { display:inline;}
#nav ul li a {	 padding:8px 3px 8px 3px; }

#fenetre { border:none; border-top:1px solid #ccc; border-bottom:1px solid #ccc;}
.consotel { display:none;}

#offre-internet, #demi-left, #demi-right, #paveblanc, #paveleft, #paveentier, #paveintro, #c-left, #c-right { width:100%; text-align:justify; padding-bottom:30px; padding-top:0; border-top:1px solid #dfdfdf; padding-top:10px; background:#fafafa; margin:0; float:left; box-shadow:none;}
#bloc-texte { padding:0 10px 0 10px; }
#demi-left { border:none; padding:0;}
#demi-right div { text-align:center;}
#paveleft { margin:0; }
#paveintro { background:none; border:none; padding-bottom:0; }
#c-left, #c-right { margin:0; padding:0; border:none;}

#bloc-texte input, textarea { border:1px solid #dfdfdf;  color:#888; font-family:'Roboto Condensed', Arial, Helvetica, sans-serif; font-size:12px; border-radius:5px;background-color:#f7f7f7; padding:6px; margin-bottom:10px; width:90%; display:block;}

.btn { border:1px solid #80ba4a; color:#000; cursor:pointer; width:100px; font-size:14px; background:#80BA4A;}
.btn:hover {color:#fff;}
}


/*réduire de façon harmonieuse toutes les tailles de polices en orientation paysage*/
@media (max-device-width:768px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
  }
}