/*une règle CSS doit avoir un ordre, de l'intérieur vers l'extérieur* voir ex sur le h3*/
/* Balise pour écrire du commentaire*/
	/*paramètres pour un affichage responsive*/
@media (max-width:600px){
		nav,ul,div{
			width:100%;
			height:auto;
		}
	}
  /* ceci est un selecteur universel (étoile) qui va s'appliquer à tout le document*/
  * {margin:0; padding:0;}
  
  body {background-color:black;}
  img#frise {display:block; width:100%; height:30px;}
  div#titre {background-color: #303030; height:60px; position:relative;}
  #titre img {position:absolute;
			  top:5px; left:2%;
			  height:40px; width:80px;}
  #titre h1, #titre h2 {margin:0 auto; width:200px; color:#FEFEFE;}
  #titre h1 {background-color:#5A5E6B;}
  #titre h2 {position:relative; top:-15px; left:60px;}
 /*style du menu de navigation*/
  #menu_fixe { position:fixed; 
				  top: 105px; left:0;
				  width:200px; padding:20px 20px 40px 20px; 
				  background-color: #303030;
				  text-align: left;
				  color:#f5f0d7;
				 /*je dis qu'il n'y a aucune puce dans la liste*/
				  list-style:none;
				  }
		
  #menu_fixe a {
	  	font: 18px serif, Verdanna, sans-serif, Arial;
  		/*couleur du texte dans la liste
		color:white;*/
		/*texte simple, pas de soulignement de texte, de caractères barrés etc*/
		text-decoration:none;
		}
   #menu_fixe a:hover{
		/*si je survole l"element avec la souris du menuson fon se met en jaune - :hover est une pseudo-classe*/
		background:gray;
		/*si je survolel'element du menu sa bordure se met en noir*/
		border:1px solid black
	}
	#menu_fixe a:active{
		/*quand je clique sur l'element du menu ou que je reste cliqué le texte se met en jaune*/
		color:yellow;
	}
	#menu_fixe a:link {color:white;}
		/*mise forme des liens non visités*/

	#menu_fixe a:visited {color:#f2f2f2;}
	/*mise en forme des liens visité*/

  div#tuiles {position:absolute; top:90px; left:240px;}
  div#tuiles {background-color: #000000;}
  #tuiles img {margin: 20px; width:100px; height:100px;
				border: solid 2px white; float:left;}
  #tuiles a {font: 30px serif, Verdanna, sans-serif, Arial;
	  color:gray;}
  #photoaccueil img {width:25% ;margin-left:250px; padding-top:20px; padding-left:30px; border:0; float:left;}
  
/*mise en forme des liens grace aux pseudos classs link, active, visited et hover*/
	a:hover {
		text-decoration:none;
		color:orange;
	}
	/*Xmise en fomre des liens lorsque l'utilisateur garde le cic activé sur le lien*/	
	a:active {color:crimson;}
	
	footer {
		height:50px;
		font-size:10px;
		font-weight:normal;
		color:white;	
		text-align:left;
		/*annule les effets de flottement*/
		clear:both;
		}