/* 
  feuille de style de la page accueil.html
  
  This stylesheet builds up The "PAG-PIANO : accueil" theme
  ---------------------------------------------------------
  Copyright (c) 2017 Pierre-André George - meant to be used on pag-piano.ch website only !
*/


/* Typographie & Couleurs */

body {
	font-size: 62.5%; /* resets 1em to 10px, pas touche */
	font-family: "Times New Roman", Times, serif; /* police de caractère de la page */
	color: #808080; /* couleur du texte de la page */
	}
	
#invisible {
	display: none; /* le titre et la description du site en texte n'apparaissent pas vu qu'ils se trouvent dans l'image de fond */
	}

#coordonneesmob, #coordonnees, #credits, #tel, #telbis, #telmob, #telbismob {
	font-size: 1.3em; /* taille du texte des div "coordonnees" et "credits") */
	}

#prof {
      color: #000000;
      font-size: 172%;
      font-family: "Gaze";
      text-align: right;
      }
#prof2 {
      color: #000000;
      font-size: 172%;
      font-family: "Gaze";
      text-align: right;
      }		
#menumob {
      font-size: 1.6em;
     }
#menu {
	font-size: 1.6em; /* taille du texte du menu (html: <div id="menu"> ) */
	font-weight: bold; /* en gras */
	}
/*#annonces2 {font-size: 12pt;}*/

a {
	color: #808080; /* couleur des liens */
	text-decoration: none; /* les liens ne sont pas soulignés */
	}

a:hover {
	color: #650019; /* #993300; /* couleur des liens lors du survol de la souris */
	}


/*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*/
/*====================================================================================================================================================================*/


html, body {
	padding: 0; /* la page n'a pas de marges */
	margin: 0; /* idem */
	text-align: left; /* alignement des éléments par défaut dans la page */

	}
#corps {
	margin-left: auto;
    margin-right: auto;
    top: 0; /* positionnement relatif au bord supérieur de la page */
    width: 100%;
    /*padding-left: 82px;*/
    position: absolute;
    height: 506px;
    z-index: 10;
	}
#entetemob { /* styles du contenu (html: <div id="entetemob"> ) */
	position: fixed;/* l'entete reste visible au même endroit lorsqu'on fait défiler la page */
	top: 20px; /* positionnement relatif au bord supérieur de la page */
	left: 30px; /* positionnement relatif au bord gauche de la page */
	z-index: 50; /* l'entete par-dessus le contenu */
	}
#entete2 { /* styles du contenu (html: <div id="entete"> ) */
	position: fixed;/* l'entete reste visible au même endroit lorsqu'on fait défiler la page */
	/*position: center;*/
	top: 20px; /* positionnement relatif au bord supérieur de la page */
	left: 200px; /* positionnement relatif au bord gauche de la page */
	z-index: 50; /* l'entete par-dessus le contenu */
	}
#trait {
	position: fixed;/* l'entete reste visible au même endroit lorsqu'on fait défiler la page */
	top: 40px; /* positionnement relatif au bord supérieur de la page */
	left: 30px; /* positionnement relatif au bord gauche de la page */
	z-index: 50; /* l'entete par-dessus le contenu */
	max-width: 90%;
	min-width: 83%;
	}
#trait2 {
	position: fixed;/* l'entete reste visible au même endroit lorsqu'on fait défiler la page */
	top: 37px; /* positionnement relatif au bord supérieur de la page */
	margin-left: 30px; /* positionnement relatif au bord gauche de la page */
	z-index: 50; /* l'entete par-dessus le contenu */
	width: 740px;

	}
#nom {position: fixed;}
#prof {
	position: fixed;/* l'entete reste visible au même endroit lorsqu'on fait défiler la page */
	top: 34px; /* positionnement relatif au bord supérieur de la page */
	left: 30px;
	width: 89.8%; /* positionnement relatif au bord gauche de la page */
	z-index: 50; /* l'entete par-dessus le contenu */
	}
#prof2 {
	position: fixed;/* l'entete reste visible au même endroit lorsqu'on fait défiler la page */
	top: 28px; /* positionnement relatif au bord supérieur de la page */
	margin-left: 460px;
	width: 308px; /* positionnement relatif au bord gauche de la page */
	z-index: 50; /* l'entete par-dessus le contenu */
	}
#entete { /* styles du contenu (html: <div id="entete"> ) */
	padding: 0; /* la page n'a pas de marges */
	margin-left: auto;
    margin-right: auto;
	margin-top: 0; /* positionnement relatif au bord supérieur de la page */
	text-align: left; /* alignement des éléments par défaut dans la page */
	z-index: 50; /* l'entete par-dessus le contenu */
	width: 900px; /* largeur */
	height: 100%;
	/*position: absolute; /* pas touche */
	}
.image3 {
	position: fixed;
	background-size: fixed;
	margin-left: auto;
    margin-right: auto;
	width: 900px;
	height: 100%;
	z-index: 10;
	top: 0;
	}
.image4 {
	background-size: fixed;
	margin-left: auto;
    margin-right: auto;
	width: 900px;
	height: 80px;
	z-index: 40;
	top: 0;
	position: fixed;
	}
.image {
	background-size: fixed;
	width: 100%;
	height: 80px;
	z-index: 40;
	top: 0;
	position: fixed;
	}
.image2 {
	background-size: fixed;
	width: 100%;
	height: 100%;
	z-index: 10;
	top: 0;
	position: fixed;
	}
#coordonnees { /* styles des coordonnées (html: <div id="coordonnees"> ) */
	/*position: absolute; /* pas touche */
	/*top: 133px; /* positionnement relatif au haut de la page */
	padding-left: 55px; /* positionnement relatif au bord gauche de la page */
	padding-top: 150px;
	}
#tel, #telbis { /* styles des coordonnées (html: <div id="coordonnees"> ) */
	/*position: absolute; /* pas touche */
	/*top: 133px; /* positionnement relatif au haut de la page */
	padding-left: 55px; /* positionnement relatif au bord gauche de la page */
	padding-top: 0;
	}	
#menu { /* styles du menu (html: <div id="menu"> ) */
	/*position: absolute; /* pas touche */
	padding-top: 70px; /* positionnement relatif au haut de la page */
	padding-left: 270px; /* positionnement relatif au bord gauche de la page */
	z-index: 400;
	}
#menumob {
	position: relative;;
   top: 265px;
   max-width: 305px;
   margin-left: auto; 
   margin-right: auto;
   z-index: 10;
  }	
#credits { /* styles des crédits (copyright) (html: <div id="credits"> ) */
	position: fixed; /* pas touche */
	bottom: 10px; /* positionnement relatif au haut de la page */
	padding-left: 508px; /* positionnement relatif au bord gauche de la page */
	text-align: right; /* texte aligné à droite */
	width: 300px; /* largeur, il faut la définir vu l'alignement à droite */
	z-index: 50;
	}

ul, li { /* liste du menu */
	padding: 0; /* marges */
	margin: 0 0 0.3em 0; /* marges: haut droite bas gauche - définit en fait la hauteur de ligne */
	list-style-type: none; /* liste sans puces */
	}
	
img {
	border: 0; /* par défaut les images n'ont pas de bordure */
	}
img, table, td, blockquote, code, pre, textarea, input, iframe, object, video {
    max-width: 100%;
}
	
/*end Structure*/	


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


@media screen { 																									   		/* SCREEN */
    html, body {overflow-x: hidden;}
body  { background: #fcf5e5;}    

    .image3, .image2 {background: url(images/fond_simple.jpg) #FFF no-repeat;}
}

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

@media screen and (min-width: 801px) {																			    		/* W > 800 */
     
    #entetemob, #trait, #prof, #entete2, #coordonneesmob, #telmob, #telbismob, .mobile {display: none;} 
    #entete, .desktop {
      margin-left: auto;
      margin-right: auto;
      display: block;}
    #nom {
      font-size: 100%;
      padding-left: 30px;
      /*padding-top: 20px;*/
      z-index: 100;
    }

} 

@media screen and (max-width: 851px){
     #credits {
      right: 5%;
    }
}

@media screen and (min-width: 801px) and (min-height: 571px) { /* largeur provisoire */
	html, body {
	      overflow-y: hidden; 
	    }
}

@media screen and (min-width: 801px) and (max-height: 570px) { /* largeur provisoire */
	 body {
	      overflow-y: hidden;
	    }
	#credits {
		position: absolute;
		top: 520px;
		height: 46px;
	}
}




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


@media screen and (max-width: 800px) {																									/* W <= 800 */
	 html, body {
      height: 100%;
      overflow-x: hidden;
    }
    #entete, .desktop, #prof2, #trait2 {display: none;}
    .mobile, #trait, #prof {display: block;}

}

@media screen and (max-width: 800px) and (min-height: 601px) {
    #entete, .desktop, #prof2, #trait2 {display: none;}
    .mobile, #trait, #prof {display: block;}
    #trait {min-width: 90%;}
    #coordonneesmob, #telmob, #telbismob { 
      position: absolute;
      top: 160px;
      left: 55px; /* positionnement relatif au bord gauche de la page */
      z-index: 10; /* l'entete par-dessus le contenu */
    }
    #telbismob {top: 234px;}
    #telmob { top: 204px;}
	#credits {
		position: fixed;
		bottom: 0;
		height: 46px;
	}
	#menumob {top: 345px;}
}



@media screen and (max-width: 800px) and (min-height: 601px) and (max-height: 960px) {
    #coordonneesmob, #telmob, #telbismob { 
      position: absolute;
	  top: 120px;
      left: 55px; /* positionnement relatif au bord gauche de la page */
      z-index: 10; /* l'entete par-dessus le contenu */
    }
    #telbismob {top: 194px;}
    #telmob { top: 164px;}
	#menumob {top: 325px;}
}

/*@media screen and (max-width: 800px) and (min-height: 601px) and (max-height: 700px) {
    #coordonneesmob, #telmob, #telbismob { 
      position: absolute;
	  top: 100px;
      left: 55px; 
      z-index: 10;
    }
    #telbismob {top: 174px;}
    #telmob { top: 144px;}
    #menumob {margin-top: 265px;}
}*/

@media screen and (max-width: 800px) and (max-height: 600px) {
	#entete, .desktop, #prof2 {display: none;}
    .mobile, #trait, #prof {display: block;}
    #trait {min-width: 90%;}
    #coordonneesmob, #telmob, #telbismob { 
      position: absolute;
	  top: 100px;
      left: 55px; /* positionnement relatif au bord gauche de la page */
      z-index: 10; /* l'entete par-dessus le contenu */
    }
    #telbismob {top: 174px;}
    #telmob { top: 144px;}
    #credits {
      max-height: 50px;
   }

}

@media screen and (min-width: 600px) and (max-width: 800px) and (max-height: 550px) { /* largeur provisoire */
	/*html, body {
	   overflow-y: hidden; 
	}*/
	#menumob {
		position: absolute;
	  	margin: auto;
	  	top: 265px;
	    left: 55px;
	}
}

@media screen and (min-width: 600px) and (max-width: 800px) and (max-height: 430px) { /* largeur provisoire */

	 body {
	 	height: 490px;
	    overflow-x: hidden;
	 }
	#coordonneesmob {display: block;}
	#menumob {
		position: absolute;
	  	margin: auto;
	  	top: 295px;
	  	/*sans annonces : menumob top 265px*/
	    left: 55px;
	}
	#credits {
		position: fixed;
		bottom: 0;
		height: 46px;
	}
}


	

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


@media screen and (max-width: 599px) {
    #coordonneesmob, #telmob, #telbismob { 
      position: absolute;
	  top: 80px;
      left: 35px;
      z-index: 10;
    }
    #telbismob {top: 154px;}
    #telmob { top: 124px;}
  #prof {
  	width: 83%;
    font-size: 172%;
  }
  #trait {
  	max-width: 83%;
    min-width: 83%;
  }
	#menumob {
		position: relative;
	}
}



@media screen and (max-width: 599px) and (max-height: 750px) {
	#menumob {
		position: absolute;
	  	margin: auto;
	  	top: 280px;
	    left: 55px;
	}
}

@media screen and (max-width: 599px) and (max-height: 529px) {
	body {overflow-y: hidden;}

	#credits {
		position: absolute;
		top: 485px;
		height: 46px;
	}
}
@media screen and (max-width: 400px) {
	#menumob {
		position: absolute;
	  	margin: auto;
	  	top: 280px;
	    left: 35px;
	}
}

@media screen and (max-width: 360px) {
	#menumob {
		width: auto;
	    max-width: 300px;
	    min-width: 200px;
	  	top: 280px;
	    left: 35px;	    
	}
}



@media screen and (max-width: 300px) {
	#menumob {
	    max-width: 240px;    
	}

}
@media screen and (max-width: 280px) {
	#prof {text-align: center;}

}


/*test Chrome
@media screen { /* largeur provisoire 

	 body {
	 	height: 490px;
	    overflow-x: hidden;
	 }
	#coordonneesmob {display: block;
		top: 80px;}
	#menumob {
		color: green;
		position: absolute;
	  	margin: auto;
	  	top: 295px;
	  	/*sans annonces : menumob top 265px
	    left: 55px;
	}
	#credits {
		position: fixed;
		bottom: 0;
		height: 46px;
	}
}


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

@media print {

#invisible {
	position: absolute;
	top: 0;
	visibility: visible; /* le titre et la description du site en texte s'impriment vu que l'image ne s'imprime pas */
	font-size: 1.3em; /* taille du texte */
	}

img {
	 display: none;
	}

h3 {
	display: none; /* les mots-clés ne s'impriment pas */
	}

#coordonnees, #tel, #telbis {
	left: 20px}

#menu {
	left: 177px;}

#credits { /* styles des crédits (copyright) (html: <div id="credits"> ) */
	position: absolute; /* pas touche */
	bottom: 10px; /* positionnement relatif au haut de la page */
	right: 10px; /* positionnement relatif au bord gauche de la page */
	text-align: right; /* texte aligné à droite */
	/*width: 1260px; /* largeur, il faut la définir vu l'alignement à droite */
	}
}
/*end Impression*/