/* 
  feuille de style de toutes les pages du site sauf index.html et accueil.html
  
  This stylesheet builds up The "PAG-PIANO : pages" theme
  -------------------------------------------------------
  Copyright (c) 2006-2017 Pierre-André George - meant to be used on pag-piano.ch website only !
  -------------------------------------------------------
  "position: fixed" ne fonctionne pas dans internet explorer 6. hack CSS corrigeant ce bug par Stu Nicholls : http://www.stunicholls.myby.co.uk/
*/


/* Typographie & Couleurs */
/* les images de fond et les couleurs de fond des éléments: body, #entete, #pied : se règlent dans la page html */

body {
	font-size: 100%; /* 62.5% resets 1em to 10px, pas touche */
	text-align: justify;
	}

#entete1 {
	font-family: "Times New Roman", Times, serif;
	font-size: 62.5%;
		}
#prof {
	color: #000000;
	font-size: 172%;
	font-family: "Gaze";
	text-align: right;
	}
  #prof2 {
      color: #000000;
      font-size: 130%;
      letter-spacing: 1.2px;
      font-family: "Gaze";
      text-align: right;
      }	
#page {
	font-size: 200%;
	font-variant: small-caps;
	text-align: center;
	}
#pagedesk { 
	font-size: 200%;
    font-family: "Gaze";
	text-align: left;
	}
#menugauche {  /* styles du menu gauche en affichage desktop */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.3em;
	text-align: left; 
	}
#trait2 {text-align: left;}
#nom2 {
	font-family: "Times New Roman", Times, serif; 
	font-size: 66%;
	}
#pmenu {	/* sert uniquement en affichage desktop-style */
	font-family:  Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	color: #650019; /* couleur du texte */
	text-align: center;
	line-height: 20px;

	}
#menugauchemob { /* styles du menu en affichage Smart */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	line-height: 32px;
	text-align: left;
	}
/*#carreblanc {background-color: white;}																										*/
#messageiPad {
	font-size: 150%;
	text-align: center;
	padding-top: 5px;
	line-height: 22px;
	background-color: #fcf5e5;
	}
#contenu {
	font-family: Arial, Helvetica, sans-serif;
	color: #000;
		}
h3 { /* titres des rubriques du contenu */
	font-size: 1em;
	font-weight: normal;
	text-align: left; /* toujours aligné à gauche même quand le reste du contenu est centré */
	}
h4 { /* sous-titres des rubriques du contenu */
	font-size: 1em;
	font-weight: normal; /* sinon c'est en gras */
	color: #990000;
	text-align: left;
	}

hr {
	color: #8f8f8f; /* couleur des lignes de séparation (utilisées dans le div "contenu") */
	text-align: center;
	}

a {
	color: #650019; /* couleur des liens pour le div "contenu" */
	}
a:hover {	
	text-decoration: none; /* le soulignement des liens disparaît lors du survol de la souris */
	}
#menugauche a, #pied a, #menugauchemob a {
	text-decoration: none; /* les liens des menus et du pied de page ne sont pas soulignés */
	}
#menugauche a:hover, #pied a:hover, #menugauchemob a:hover {
	color: #990000; /* #c03e00; /* couleur des liens des menus et du pied de page lors du survol de la souris */
	}
#pied a {
	color: #650019; /* couleur des liens du pied de page */
	}

#pied { /* pied de page en format smart */
	font-family:  Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	color: #650019;
	text-align: center;
	line-height: 20px;
	}


/*fonts*/

@font-face {
    font-family: 'Gaze';
    src: url('fonts/gazen___-webfont.woff2') format('woff2'),
         url('fonts/gazen___-webfont.woff') format('woff');
    src: url('fonts/gazen___-webfont.eot');
    src: url('fonts/gazen___-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/gazen___-webfont.ttf') format('truetype'),
         url('fonts/gazen___-webfont.svg#Gaze') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*enf Fonts*/


/* end Typographie & Couleurs */

/*====================================================================================================================================================================*/
/*                                                                                        STRUCTURE*/
/*                                                                        STRUCTURE       STRUCTURE			STRUCTURE*/
/*                                                                        STRUCTURE       STRUCTURE			STRUCTURE*/
/*                                                                                        STRUCTURE*/
/*====================================================================================================================================================================*/

body {
	padding: 2px 0 -2px 0; /* marges : haut droite bas gauche */
	margin: 2px 0 0 0; /* idem */
	height: 100%; /* IE6 hack - Stu, pas touche */
	width: 100%;
	overflow-y: auto; /* IE6 hack - Stu, pas touche */
	overflow-x: hidden; /* IE6 hack - Stu, pas touche */
	}
* html #entete { 
	position: absolute; /* IE6 hack - Stu, pas touche */
} 

#image2 { /*image de fond de l'entete format smart permet défilement du menu desous et seule affichée lors de la disparition du menugauchemob */
	width: 100%;
	height: 110px;
	z-index: 30;
	position: fixed;
	top: 0;
	left: 0;
	border-bottom: #8f8f8f 1px solid;
	}
#entete1 { /* contenant de l'entête en format smart */
	position: fixed;/* position par défaut correspond à portrait */
	top: 20px; /* positionnement relatif au bord supérieur de la page */
	margin-left: 9%; /* pour centrer l'entête */
	z-index: 100;
	width: 82%;
	}
#nom {
	top: 0;
	left: 0;
}
#nom2 {
	position: fixed;
	top: 11px;
	left: 18px;
	z-index: 100;
	}
#trait {
	left: 0;
	margin-top: -6px;
	top: 24px;
	width: 100%;
	min-width: 230px;
	height: 20px;
	}
#trait2 {  /* ... au format desktop*/
	position: fixed;
	top: 29px; /* positionnement relatif au bord supérieur de la page */
	margin-left: 12.5px; /* positionnement relatif au bord gauche de la page */
	z-index: 50;
	width: 300px;
	}
#prof {
	margin-top: -14px;
	margin-left: 20%;
	}
#prof2 { /* ... au format desktop*/
	position: fixed;
	top: 22px; /* positionnement relatif au bord supérieur de la page */
	margin-left: -2px;
	width: 308px;
	z-index: 50;
	}

#entete2 {
	margin-top: -10px;
	width: 100%;
	z-index: 150;
}
#page { /* nom de la page du site format smart*/
	margin-top: -16px; /* positionnement relatif au soulignement du nom */
	left: 0px;
	width: 100%;
	z-index: 100;
	}
#pagedesk {
	top: 100px;
	left: 30px;
	width: 319px;
	z-index: 20;
	position: fixed;
}	

#contfav { /*l e menu clavier */
	margin-top: -24px;
	margin-left: 24px;
	height: 25px;
	width: 40px;
	z-index: 200;
	}
#contfav2 { /*la fleche pour remonter*/
	display: none;
	position: fixed;
	bottom:  0px;
	right: -10px;
	height: 40px;
	width: 40px;
	z-index: 100;
	}
#menugauche { /* styles du menu gauche en affichage desktop*/
	position: fixed; /* le menu reste visible au même endroit lorsqu'on fait défiler la page */
	top: 0;
	left: 0;
	padding: 0 0 20px 0;
	width: 319px; /* largeur */
	height: 100%;
	z-index: 444;
	}
#image3 { /* fond derrière le nom en affichage desktop pour cacher un défilement de manugauche */
	width: 319px;
	height: 76px;
	z-index: 30;
	position: fixed;
	top: 0;
	left: 0;	
	background-size: 370px; 
}

* html #menugauche { 
	position: absolute; /* IE6 hack - Stu, pas touche */
} 
	
/* menu deroulant */

		#drop, #drop ul { /* all lists */
		padding: 0 0 0 0;
		margin: 0;
		width: 100px;
		list-style: none;
		float : left;
	}

	
	#drop li { /* all list items */
		position : relative;
		float : left;
		line-height : 1.5em;
		width: 100px;
		padding: 0;
		margin: 0 0 -1px 27px;
	}
	
	#drop li ul { /* second-level lists */
		position : absolute;
		left: -999em;
		margin: 0;
		padding: 2px 0 0 0;
		top: 0px;
		
	}
	
	#drop li ul li { /* second-level lists items*/
		margin: 0 0 -10px 0;
		line-height: 1.25em;
		border-left: 1px solid #000000;
	}
	
	#drop li ul ul { /* third-and-above-level lists */
		left: -999em;
	}
	
	#drop li a {
		width: 7em;
		display : block;
		background-color : transparent;
		text-decoration : none;
		border: 0 solid #650019;
		padding : 0 0.5em;
	}
	
	#drop li ul li a {
		width: 11em;
	}
	
	#drop li a:hover {
		background-color : transparent;
	}
	
	#drop li:hover ul ul, #drop li:hover ul ul ul, #drop li.sfhover ul ul, #drop li.sfhover ul ul ul {
		left: auto;
	}
	
	#drop li:hover ul, #drop li li:hover ul, #drop li li li:hover ul, #drop li.sfhover ul, #drop li li.sfhover ul, #drop li li li.sfhover ul { /* lists nested under hovered list items */
		left: 120px;
	}
#menugauchemob {
	position: fixed;
	top: 0;
	left: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 40;
	}
#premier {width: 134px;}
#carreblanc {
	top: 869px;
	left: 0;
	position: fixed;
	width: 319px;
	z-index: 444;
	height: 100%;
	display: none;
	}
#pmenu { /* qui est lors de l'affichage desktop */
    background:url();															
	position: fixed;
	bottom: 2px;
	left: 0px;
	width: 320px;
	z-index: 666;
	padding: 14px 0 4px 0;
	}
#messageiPad {  /* en cas d'erreur d'affichage du menugauchemob en format desktop. Probablement inutile */
	border: ridge #650019;
	display: none;
   	width: 300px;
   	height: 50px;
   	position: fixed;
   	top: 240px;
   	left: 500px;
    }
#contenu {
	width: 70%;
	padding: 8px 8px 8px 8px;
	margin-top: 30px; /* positionnement relatif au haut de la page */
	margin-left: 10px;
	margin-bottom: 2px; /* place pour le menu de bas de page de la page */
	z-index: 0; 
	display: block;
}

h1, h2 {
	display: none; /* obsolète mais fonctionnel : les titres du site et des pages en texte n'apparaissent pas vu qu'ils se trouvaient dans l'image de fond. */
	}

h3 { /* titres des rubriques du contenu */
	border-bottom: double #000; /* style et couleur de la bordure inférieure */
	padding: 1em 0 1em 0; /* marges */
	}

h4 { /* sous-titres des rubriques du contenu */
	padding: 1em 0 1em 0; /* marges */
	}

	
hr { /* lignes de séparation (utilisées dans le div "contenu") */
	width: 50%; /* largeur */
	}


#bloc3 {
	padding: 10px;
	width: 95%;
	overflow-x: auto;
	margin-right: 10%;
}

#pied { /* pied de page format smart */
	position: fixed;
	bottom: 4px; /* positionnement relatif au bas de la page - IE6 : -1px */
	left: 0px;
	width: 100%;
	z-index: 666;
	}

* html #pied { 
	position: absolute; /* IE6 hack - Stu, pas touche */
} 
	
#menugauche ul, #menugauche li { /* liste du menu gauche */
	padding: 0;
	margin: 0 0px 0.3em 40px; /* marges: haut droite bas gauche - définit en fait la hauteur de ligne !! eh oui ! */
	list-style-type: none; /* liste sans puces */
	}
#menugauchemob ul {
	list-style-type: none; /* liste sans puces */
}

#pied ul, #pied li, #pmenu ul, #pmenu li  { /* liste (menu) des 2 pieds de page */
	padding: 0; /* marges */
	margin: 0; /* idem */
	list-style-type: none; /* liste sans puces */
	display: inline; /* pas de saut de ligne entre les éléments de la liste (html: <li>), la liste s'affiche sur une ligne*/
	}	

img {
	border: 0; /* par défaut les images n'ont pas de bordure */
	}

/*end Structure*/	

/*====================================================================================================================================================================*/
/*                                                                                        	  MEDIA QUERIES*/
/*                                                                        MEDIA QUERIES       MEDIA QUERIES			MEDIA QUERIES*/
/*                                                                        MEDIA QUERIES       MEDIA QUERIES			MEDIA QUERIES*/
/*                                                                                            MEDIA QUERIES*/
/*====================================================================================================================================================================*/


@media screen { 																									   		/* SCREEN */
	 body { background: #fcf5e5;} 																	
	 #contenu { background-color: #fcf5e5; }																			
	 #bloc3 {background-color: #FFF1D8;}
     #bloc2 {background-color: #FFF1D8;}
     #entete {display: none;}
     #menugauche{
      background: rgb(255, 255, 255) url(images/fond_bande_gauche2.jpg) fixed no-repeat;
      background-size: 370px;
    } 
}

/*======================================================================================================================== DESKTOP STYLE ===============================*/

@media screen and (min-width: 801px) {																			    		/* W > 800 */
    body {font-size: 62.5%;}
    #menugauchemob, #entete1, #image2, #contfav2, #carreblanc, #pied, .mobile {display: none;} 
    #contenu {
      font-size: 1.3em;
      margin-left: 360px;
      display: block;
     }
	#pmenu {
      left: 0px;
      z-index: 666;
      font-size: 85%;
    }
} 

@media screen and (min-width: 800px) and (max-width: 900px) {
    #contenu {width: 50%;}
}

@media screen and (min-width: 901px) and (max-width: 1000px) {
    #contenu {width: 55%;}
}

@media screen and (min-width: 1001px) and (max-width: 1150px) {
    #contenu {width: 60%;}
}

@media screen and (min-width: 1151px) and (max-width: 1280px) {
    #contenu {width: 65%;}
}

@media screen and (min-width: 1281px) {
    #contenu {width: 68%;}
}

/*====================================================================================================================== SMARTPHONE STYLE ===============================*/



@media screen and (max-width: 800px) {																						/* W <= 800 */
    #menugauche, #carreblanc, .desktop {display: none;}
    #bloc1, #bloc2, #bloc3, #pied, #image2, #menugauchemob {width: 100%;}
    #pied, #contenu {
      margin-left: auto;
      margin-right: auto;
    }
    #menugauchemob {
    	height: 100%;
    	z-index: 40;
    }

    #rep {width: 136px;}
    #contenu {
      padding: 8px 16px 8px 16px;
      width: 90%;
      line-height: 24px;
    }
  	#bloc3 {
      margin-right: 10%;
      width: 95%;
    }
    #pied {
      background:url() no-repeat;
      padding: 4px 0px 4px 0;
      font-size: 70%;
      }
}


/*=========================================================================================================================PADS PORTRAIT ================================*/


@media screen and (min-width: 601px) and (max-width: 800px) and (min-height: 601px) {										/* Pad : 600 <= W <= 800 | 600 < H */
    .horizon, #carreblanc, .smart, .SmartHorizon, .imgH {display: none;}														
	#menugauchemob {
		display: block;
		height: inherit;
	}
    #menugauchemob ul {	
	margin-top: 320px;								/* variante selon hauteur */
	margin-left: 150px;								/* variante selon hauteur */
    }   	
	#entete1 {
		position: fixed;
		top: 60px;
	}
	#entete2 {
		margin-top: 60px;
		width: 100%;
	}
  	#contfav2 {
      display: none;
      z-index: -10;
    }		
    #pied {
      position: fixed;
      background:url() no-repeat;
      font-size: 90%;
      line-height: 28px;
      padding: 4px 0px 14px 0;
      }
}


@media screen and (min-width: 601px) and (max-width: 800px) and (min-height: 621px) and (max-height: 801px) {			/* Pad ramassé: 600 < W <= 800 | 620 < H <= 800 */
    #menugauchemob ul {		
	margin-top: 230px;								/* variante selon hauteur */
	margin-left: 100px;								/* variante selon hauteur */
    }
}

@media screen and (min-width: 601px) and (max-width: 800px) and (min-height: 601px) and (max-height: 620px) {			/* Pad ramassé: 600 < W <= 800 | 600 < H <= 620 */
    #menugauchemob ul {		
	margin-top: 210px;								/* variante selon hauteur */
	margin-left: 100px;								/* variante selon hauteur */
    }
}


/*============================================================================================================================= SMARTS XL ===============================*/


@media screen and (min-width: 321px) and (max-width: 800px) and (min-height: 321px) and (max-height: 475px) {		/* M+L+XL paysage : 320 < W <= 800| 320 < H <= 475 */
	.horizon, .bougeH, .SmartHorizon, .imgH, #contfav2 {display: block;}																		
	.portrait, .pad, #contenu, .bouge, .smart, .imgV {display: none;}		
	#nom, #trait, #image2, #entete1, #menugauchemob  {position: absolute;}
  	#entete2 {margin-top: 80px;}

	#menugauchemob {height: 600px;}
	#menugauchemob ul {
		margin-top: 170px;
		margin-left: 50px;
	}
   	#contfav2 {z-index: 10;}
  	#pied {
  		position: absolute;
  		top: 550px;
    	background:url() no-repeat;
       	font-size: 80%;
    }	
   	.horizon {
  		position: absolute;
  		top: 550px;
    	background:url() no-repeat;
       	font-size: 80%;
    }
}

@media screen and (min-width: 401px) and (max-width: 800px) and (min-height: 476px) and (max-height: 600px) {		/* M+L+XL paysage : 400 < W <= 800| 475 < H <= 600 */
	.horizon, .bougeH, .SmartHorizon, .imgH, #contfav2 {display: block;}																		
	.portrait, .pad, #contenu, .bouge, .smart, .imgV {display: none;}		
	#nom, #trait, #image2, #entete1, #menugauchemob  {position: absolute;}
  	#entete2 {margin-top: 80px;}

	#menugauchemob {height: 600px;}
	#menugauchemob ul {
		margin-top: 170px;
		margin-left: 50px;
	}
   	#contfav2 {z-index: 10;}
  	#pied {
  		position: absolute;
  		top: 550px;
    	background:url() no-repeat;
       	font-size: 80%;
    }	
   	.horizon {
  		position: absolute;
  		top: 550px;
    	background:url() no-repeat;
       	font-size: 80%;
    }
}

@media screen and (min-width: 401px) and (max-width: 600px) and (min-height: 601px) {				/* XL portrait (tous y compris ramassé) : 400 < W <= 600 | 600 < H */
	.portrait, .smart, .bouge, .imgV {display: block;}																				
	.horizon, .pad, .bougeH, #contenu, .SmartHorizon, .imgH {display: none;}
	#menugauchemob ul {
		margin-top: 170px;							/* variante selon hauteur */
		margin-left: 15%;
	}
	#entete2 {margin-top: 40px;}
	#contfav {margin-left: 24px;}
   	#contfav2 {z-index: -10;}
    #pied {
      position: fixed; 
      background:url() no-repeat;
      font-size: 80%;
      line-height: 24px;
      width: 100%;
      padding: 4px 0px 12px 0;
    }
}

@media screen and (min-width: 401px) and (max-width: 600px) and (min-height: 701px) {								/* XL portrait + prolongé : 400 < W <= 600 | 700 < H */
	#menugauchemob ul {
		margin-top: 220px;							/* variante selon hauteur */
		margin-left: 15%;
	}
}

/*============================================================================================================================= SMARTS L ===============================*/




@media screen and (min-width: 361px) and (max-width: 400px) and (min-height: 476px) {   									/* L portrait : 360 < W <= 400 | 560 < H  */                                 
  .portrait, .smart, .bouge, .imgV {display: block;}																				 
  .horizon, .pad, .bougeH, #contenu, .SmartHorizon, .imgH {display: none;}
  #entete2 {margin-top: 40px;}
  #menugauchemob ul {
    margin-top: 170px;							/* variante selon hauteur */
    margin-left: 30px;
  }
  #contfav {margin-left: 24px;}
  #contfav2 {z-index: -10;}
  #pied {
    position: fixed;
    background:url() no-repeat;
    font-size: 75%;
  }
  .portrait {
    position: fixed;
    background:url() no-repeat;
    font-size: 75%;
  } 
}

@media screen and (min-width: 361px) and (max-width: 400px) and (min-height: 701px) {   							/* L portrait prolongé : 360 < W <= 400 | 700 < H */ 
  #menugauchemob ul {
    margin-top: 220px;							/* variante selon hauteur */
    margin-left: 30px;
  }
}

/*============================================================================================================================= SMARTS M ===============================*/



@media screen and (min-width: 321px) and (max-width: 360px) and (min-height: 476px) {   									/* M portrait : 320 < W <= 360 | 560 < H */                                 
  .portrait, .smart, .bouge, .imgV {display: block;} 																			
  .horizon, .pad, .bougeH, #contenu, .SmartHorizon, .imgH {display: none;}
  #entete2 {margin-top: 40px;}
  #menugauchemob ul {
    margin-top: 170px;							/* variante selon hauteur */
    margin-left: 30px;
  }
  #contfav {margin-left: 14px;}
  #contfav2 {z-index: -10;}
  #pied {
    position: fixed;
    background:url() no-repeat;
    font-size: 75%;
  }
  .portrait {
    position: fixed;
    background:url() no-repeat;
    font-size: 75%;
  } 
}

 
@media screen and (min-width: 321px) and (max-width: 360px) and (min-height: 701px){   								  /* M portrait prolongé : 320 < W <= 360 | 700 < H */ 
  #menugauchemob ul {
    margin-top: 220px;							/* variante selon hauteur */
    margin-left: 30px;
  }
}

/*============================================================================================================================= SMARTS S ===============================*/


 @media screen and (min-width: 321px) and (max-width: 800px) and (min-height: 311px) and (max-height: 320px) {					/* S paysage bande étroite (2) : */
  .horizon, .bougeH, .SmartHorizon, .imgH, #contfav2 {display: block;}																/* 320 < W <= 800 | 310 < H <= 320 */
  .portrait, .pad, #contenu, .bouge, .smart, .imgV {display: none;}    
  #nom, #trait, #image2, #entete1, #menugauchemob  {position: absolute;}
  #entete1 {top: 20px;}
  #entete2 {margin-top: 80px;}
  #contfav {margin-left: 24px;}
  #contfav2 {z-index: 10;}
  #menugauchemob {height: 600px;}
  #menugauchemob ul {
    margin-top: 170px;
  	margin-left: 50px;
  }
  #pied {
    position: absolute;
    top: 550px;
    background:url() no-repeat;
    font-size: 80%;
    line-height: 20px;
    padding: 4px 0px 10px 0;
  }
  .horizon {
    position: absolute;
    top: 550px;
    background:url() no-repeat;
    font-size: 80%;
    line-height: 20px;
    padding: 4px 0px 10px 0;
  }
}


/*========================================================================================================================= BANDE ETROITE ===============================*/



@media screen and (min-width: 311px) and (max-width: 320px) and (max-height: 475px) { 							/* W+S portrait court (1) (pied au-delà pos. absolute) : */
  .horizon, .SmartHorizon, .bougeH, .imgV, #contfav2 {display: block;} 															/*310 < W <= 320 | H <= 475 */
  .portrait, .pad, .bouge, #contenu, .smart, .imgH {display: none;}
  #page, #contfav, #entete1, #entete2, #menugauchemob, .imgV, #image2, #nom, #trait {position: absolute;}
  #entete1 {top: 20px;}
  /*#nom {text-align: center;}*/
  #entete2 {margin-top: 80px;}    
  #contfav {margin: -16.5px 0 0 14px;}                  
  #menugauchemob {
    font-size: 80%;
    line-height: 28px;
    height: 600px;
  }
  #rep {width: 105px;}
  #menugauchemob ul {margin-top: 136px;}
  #contfav2 {z-index: 10;}
  #pied {
    position: absolute;
    background:url() no-repeat;
    font-size: 70%;
    top: 550px;
    line-height: 20px;
    padding: 4px 0px 10px 0;
  }
  .horizon {
    position: absolute;
    background:url() no-repeat;
    font-size: 70%;
    top: 550px;
    line-height: 20px;
    padding: 4px 0px 10px 0;
  }
}  

@media screen and (min-width: 311px) and (max-width: 320px) and (min-height: 476px) and (max-height: 560px) {  /* S (iPhone 4) portrait : 310 < W <= 320 | 475 < H <= 560 */
  .portrait, .smart, .bouge, .imgV {display: block;} 															
  .horizon, .pad, .bougeH, #contenu, .SmartHorizon, .imgH {display: none;}
  #entete1 {top: 20px;}
  #entete2 {margin-top: 36px;}    
  #contfav {margin: -24px 0 0 24px;} 
  #contfav2 {z-index: -10;}                     
  #menugauchemob {
    font-size: 80%;
    line-height: 28px;
  }
  #rep {width: 105px;}
  #menugauchemob ul {margin-top: 136px;}
  #pied {
    position: fixed;
    background:url() no-repeat;
    font-size: 70%;
    line-height: 20px;
    padding: 4px 0px 10px 0;
  }
  .portrait {
    position: fixed;
    background:url() no-repeat;
    font-size: 70%;
    line-height: 20px;
    padding: 4px 0px 10px 0;
  }
}  

@media screen and (min-width: 311px) and (max-width: 320px) and (min-height: 561px){  						   /* S (iPhone5) portrait : 310 < W <= 320 | 500 < H */
  .portrait, .smart, .bouge, .imgV {display: block;} 															
  .horizon, .pad, .bougeH, #contenu, .SmartHorizon, .imgH {display: none;}
  #entete1 {top: 20px;}
  #entete2 {margin-top: 40px;}
  #contfav {margin-left: 24px;}
  #contfav2 {z-index: -10;}
  #menugauchemob ul {
    margin-top: 160px;
  	margin-left: 14px;
  }
  #pied {
    position: fixed;
    background:url() no-repeat;
    font-size: 70%;
    line-height: 20px;
    padding: 4px 0px 10px 0;
  }
  .portrait {
    position: fixed;
    background:url() no-repeat;
    font-size: 70%;
    line-height: 20px;
    padding: 4px 0px 10px 0;
  }
}


/*============================================================================================================================= WATCHES ===============================*/



@media screen and (max-width: 310px) and (max-height: 475px) { 								 /* W portrait court (pied au-delà pos. absolute)  : W <= 310 | H <= 475 */
  .horizon, .SmartHorizon, .bougeH, .imgH, #contfav2 {display: block;} 															
  .portrait, .smart, .bouge, .pad, #contenu, .imgV {display: none;}
  #page, #contfav, #entete1, #entete2, #menugauchemob, .imgV, #image2, #nom, #trait {position: absolute;}
  #entete1 {top: 20px;}
  #nom {
  	width: 100%;
  	text-align: center;
  }
  #prof {
	margin-left: 0;
  	text-align: center;
  }
  #entete2 {margin-top: 80px;}    
  #contfav {margin: -16.5px 0 0 14px;}                  
  #menugauchemob {
    font-size: 80%;
    line-height: 28px;
    height: 600px;
  }
  #rep {width: 105px;}
  #menugauchemob ul {margin-top: 136px;}
  #contfav2 {z-index: 10;}
  #grpiano {width: 256px;} 			/*pas dans 320x320*/
  #pied {
    position: absolute;
    background:url() no-repeat;
    font-size: 65%;
    top: 550px;
    line-height: 20px;
    padding: 4px 0px 10px 0;
  }
  .horizon {
    position: absolute;
    background:url() no-repeat;
    font-size: 65%;
    top: 550px;
    line-height: 20px;
    padding: 4px 0px 10px 0;
  }
}  

@media screen and (min-width: 321px) and (max-width: 800px) and (max-height: 310px) {  							/* S + W long paysage : 310 < W <= 800 | H <= 310 */
  .horizon, .SmartHorizon, .bougeH, .imgH, #contfav2 {display: block;} 															
  .portrait, .smart, .bouge, .pad, .bouge, #contenu, .imgV {display: none;}
  #page, #contfav, #entete1, #entete2, #menugauchemob, .imgV, #image2, #nom, #trait {position: absolute;}
  #entete1 {top: 20px;}
  #nom {}
  #prof {}
  #entete2 {margin-top: 80px;}    
  #contfav {margin: -16.5px 0 0 24px;}                  
  #menugauchemob {height: 600px;}
  #menugauchemob ul {
  	margin-top: 170px;
  	margin-left: 50px;
  }
  #contfav2 {z-index: 10;}
  #grpiano {width: 256px;} 			/*pas dans 320x320*/
  #pied {
    position: absolute;
    top: 550px;
    background:url() no-repeat;
    font-size: 80%;
    line-height: 20px;
    padding: 4px 0px 10px 0;
  }
  .horizon {
    position: absolute;
    top: 550px;
    background:url() no-repeat;
    font-size: 80%;
    line-height: 20px;
    padding: 4px 0px 10px 0;
  }
}

@media screen and (max-width: 310px) and (min-height: 476px) {              												 /* W portrait long W <= 310 | H > 475 */
	.portrait, .smart, .bouge, .imgV  {display: block;}
  	.horizon, .pad, .SmartHorizon, .bougeH, #contenu, #contfav2, .imgH  {display: none;} 
    #entete1 {top: 20px;}
	#nom {
	  	width: 100%;
	  	text-align: center;
    }
    #entete2 {margin-top: 36px;}
    #menugauchemob {
	    font-size: 80%;
	    line-height: 28px;
    	height: 100%;
    }
    #rep {width: 105px;}
	#menugauchemob ul {
		margin-left: 0;
		margin-top: 136px;
	}
    #prof {
		margin-left: 0;
    	text-align: center;
    }
    #contfav {margin: -24px 0 0 14px;}
    #grpiano {width: 256px;}
    #contfav2 {z-index: -10;}
    #contenu {width: 80%;}
    #pied {
      position: absolute;
      padding: 4px 0px 10px 0;
      background:url() no-repeat;
      font-size: 65%;
      line-height: 20px;
    }
  .portrait {
    position: absolute;
    background:url() no-repeat;
    font-size: 70%;
    line-height: 20px;
    padding: 4px 0px 10px 0;
  }
}


/*====================================================================================================================================================================*/
/*                                                                                        	  IMPRESSION*/
/*                                                                       IMPRESSION
/*                                                                      											 IMPRESSION
/*                                                                                            IMPRESSION
/*====================================================================================================================================================================*/


@media print {



#contenu {
	
	width: 100%; /* le contenu s'imprime sur toute la largeur du papier */
	/*height: 700px;*/
	padding-top: 85px;
	padding-bottom: 30px;
	top: 300px;
	left: 0;
	margin-left: 0;
	}

#pied { 
	display: block;
	text-align: center;
	width: 100%;
	left: -30px;
	margin-left: 0;}

#bloc1, #bloc2 {
	width: 100%;
	
	margin-left: 0;
}

#menugauche, #pied ul, img {
	 display: none; width: 100%;/* les images, les menus à gauche et du pied de page ne s'impriment pas (le copyright du pied de page oui) */
	}
	
h1, h2 {
	display: block; font-size: 2em;/* les titres du site et des pages en texte s'impriment vu que l'image de fond ne s'imprime pas */
	}

}

/*end Impression*/