/** Taille de police en fonction de la dimension de l ecran
  et la disposition des liens de navigation
 MASTER
Creation STO : 2014-06-21
Version : 2015-09-03
- est independant des pages : ne rien mettre qui soit lie a une page
- les fontes et dimensions dans les CSS des pages doivent etre en em.
- font-size grand ecran: 100% = 16px
- 320px telephone
- 768px : tablette iPad
- 1024px : tablette iPad
- 1200px : Ecran
*/

/*// Grand ecran de PC*/
html {
      font-size: 110%;
}

body {
      background-repeat: repeat-y;
}

nav {
      float:left;
      width:15%;
      display: block;
}
   
nav a {
      display: block;
      line-height:2em;
}

/* ne pas imprimer la navigation */
@media print {
   nav {
      display: none;
   }
}

#content {
   float: right;
/*   width: 44em;*/
     width:80%;     
     max-width:980px;
  min-height: 350px;     
}

@media screen and (max-width: 768px ){
   html {
/*      font-size: 85%;*/
      font-size: 100%;
   }   

   nav {
      float:left;
      width: 95%;
      display:inline;   
   }

   nav a {
      display: inline;
      margin-right: 1em;
      vertical-align: middle;                     
   }

  nav #secteurs {
/*      float: right;*/
   }

nav div {
   display: inline;
   vertical-align: middle;
}

   /* caler le content a gauche */   
   #content {
   float:left;
   width: 97%;
/*   width: 35em;  */
   margin-left:1em; 
   max-width: 620px;
   }   
  
}/*/mediaquery  768 */

@media screen and (max-width: 600px ){
    html {
        font-size: 100%;
   }
   #content {
   margin-right:2em; 
   width: 95%;   
   }   
}/*/mediaquery 600 */


@media screen and (max-height: 600px ){   
   #imgheader {
      display: none;
   }

   #imglogo {
     display: none;
   }
   .lienlogo {
      display: none;   
   }
}/*/mediaquery hauteur 600 */

@media screen and (max-width: 361px ){   
   html {
/*      font-size: 80%; */
      font-size: 105%;
   }
   nav {
      float:left;
/*      width: 25em;*/
      /*width: 75%;*/
      width: 97%;
      display:inline;
   }   

   nav a {
      display: inline;
   }
/*  mettre les liens et secteur meme ligne */
   nav div {
      display: inline;
   }

p {
   line-height: 1em;
}

   #imgheader {
 /*     display: none;*/
   }

   #imglogo {
     display: none;
   }

   /* caler le content a gauche */      
   #content {
   float:left;
   clear:left;
   width: 95%;
/*//   width: 25em; */
   }   

}/*/mediaquery 361 */


/* Retrecir la hauteur vide pour les tres petits ecrans */
@media screen and (max-height:360px ){   
   #content {
      min-height: 200px; 
   }
}/*/mediaquery hauteur 360 */


/* zone tactile a utiliser au doigt : espacement plus large des lignes  */
.tactile {
   line-height: 1.9em;
}

/* zone tactile a utiliser au doigt : espacement plus large des lignes  */
@media screen and (orientation: portrait ){
   .tactile {
              line-height: 2.4em; 
   }
   nav a {
          line-height: 3em; 
   }
}


/* ne pas imprimer la navigation */
@media print {
   html {
      font-size: 65%;
   }
   nav {
      display: none;
   }
   #content {
      width: 75%;   
      float:left;
   }
   .noprint {
      display:none;   
   }
}

/*  valeurs communes */
.grand {
      font-size: larger;
}