/*Page pour les couleurs: https://en.wikipedia.org/wiki/List_of_colors:_A%E2%80%93F*/

@charset "UTF-8";
*{margin:0;padding:0;}
	
header{
width: 100%;
background-color:lightgrey;}

header img{
margin: 5px 0 5px 8%;
border-style: none;
background-color:lightgrey;}

body{
width: 100%;
font-size: 100%;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;}

@media only screen and (max-device-width:1024px) {
 body {
 width: 100%;
 font-size: 100%;
 font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;}
}

#DIVpage{
width: 75%;
margin: 5px 0 0 15%;
color: black;
background-color: white;}

#DIVdecale{
width: 100%;
margin: 5px 0 5px 2%;
padding: 0;
color: black;
background-color: white;}

#DIVdecale img{
margin: 10px 5px 0 0;
background-color: white;
border-style: none;}
/*------------------------------------------------------------*/
H1{
width: 100%;
font-size: 130%;
margin: 10px 0 0 0;}

H2{
width: 100%;
font-size: 110%;
font-style: italic;
margin: 5px 0 0 0;}

H3{
width: 100%;
font-size: 90%;
margin: 5px 0 0 0;}
/*------------------------------------------------------------*/
ul {
margin: 5px 0px 5px 30px;
list-style: square inside;
/*Taille fonte par rapport au div*/
font-size: 100%;
/*Type fonte, épaisse, fine*/
font-weight: normal;
/*Type fonte italique, normale*/
font-style: normal;
}
/*------------------------------------------------------------*/
#table {
margin: 5px 0 2px 0;
}

#table th{
padding: 0 10px 2px 0;
text-align: left;
vertical-align: top;
color: black;
background-color: white;
/*Taille fonte par rapport au div*/
font-size: 100%;
/*Type fonte, épaisse, fine*/
font-weight: normal;
/*Type fonte italique, normale*/
font-style: normal;}

#table img{
padding: 0;
border-style: none;}
/*-----     Menu flottant     --------------------------------*/
#menuflottant{
/*Position et taille du div*/
width: 7%;
height: 30px;
position: fixed;
left: 0px;
top: 20px;
/*Taille fonte du div*/
font-size: 120%;
/*Type fonte du div*/
font-weight: bold;
/*Couleur fonte du div*/
color: black;
/*Couleur arrière plan du div*/
background-color: #BFFF00;
/*Cadre du div*/
border-style: ridge;
border-radius: 0px 90px 90px 0px;
border-width: 1px;
border-color: grey;
/*Opacité du div*/
opacity: 0.8;
padding: 6px 6px 5px 8px;}

#menuflottant ul{
/*Position des sous-menus par rapport au div*/
position: fixed;
left: 0px;
top: 50px;
/*Cache les sous-menus*/
display: none;
/*Couleur arrière plan des sous-menus*/
background-color: #FFFAF0 ;
/*Cadre des sous-menus*/
border-style: ridge;
border-radius: 10px;
border-width: 1px;
border-color: grey;}


#menuflottant li{
/*Couleur de la pastille LI*/
color: #BFFF00;
padding: 2px 10px 6px 10px;
/*Taille fonte par rapport au div*/
font-size: 100%;
/*Type fonte, épaisse, fine*/
font-weight: normal;
/*Type fonte italique, normale*/
font-style: normal;}

#menuflottant label{
/*Position et taille du label*/
position: fixed;
left: 0px;
top: 24px;
/*Taille fonte du label*/
font-size: 120%;
/*Type fonte du label*/
font-weight: bold;
/*Couleur fonte du label*/
color: black;
margin:0 0 0 10px}

/*Survol du menu flottant. Opacité devient nulle*/
#menuflottant:hover {opacity: 1;}
/*Survol de la balise UL. On montre les sous-menus avec display. Opacité des UL nulle*/
#menuflottant:hover ul{display: block;opacity: 1;}
/*Survol de la balise LI. On change la couleur de la pastille LI devant le lien*/
#menuflottant li:hover{color: red;}
/*Lien une fois visité*/
#menuflottant a:visited {text-decoration: none;color: black;}
/*Lien normal*/
#menuflottant a:link {text-decoration: none;color: black;}
/*Survol du lien*/
#menuflottant a:hover {text-decoration: none;color: red;}

/*-----     Lien top     --------------------------------*/
#menutop a{
/*Position et taille du lien*/
position: fixed;
left: 10px;
bottom: 10%;
/*Taille fonte du lien*/
font-size: 140%;
/*Type fonte du label*/
font-weight: bold;}

/*Lien une fois visité*/
#menutop a:visited {text-decoration: none;color: black;}
/*Lien normal*/
#menutop a:link {text-decoration: none;color: black;}
/*Survol du lien*/
#menutop a:hover {text-decoration: none;color: black;}
/*-----     Fioriture     --------------------------------*/
/* Page index.php */
#tourne a:hover img{ 
transform: rotate(180deg);}
/*------------------------------------------------------------*/

/*Non utilisé : Zoom pour survol d'une image*/
.zoom:hover img {
transform-origin: bottom left;
transform: scale(1.2);}

/*Non utilisé*/
pre {
font-size: 1.1em;
margin: 0px;
padding: 0;}