@charset "utf-8";
/* GENERAL */
    
	/* Tous les éléments */
	*
	{
		margin: 0;
		padding: 0:
	}
	
	/* Choix de la police par défaut sur toute la page */
	body
	{
		font-family: Arial, sans-serif; 
		font-size:15px;
	}
	
	/* suppression des soulignés des liens */
	a
    {
		text-decoration: none;
		color: #444444;
	}
	
	/* vidage pour respecter les marges si elles ne sont pas utilisées */
	.clear
    {
		clear: both;
	}
	
	/* largeur utilisable par le site : concerne les 'content' */
	.miseenpage
    {
		width: 960px;
		margin: 0 auto;
		padding: 0 20px;
	}

	/* définition du style pour les liste: menu,... */
	ul
    {
		/* on enleve les boutons */
		list-style: none;
	}

	/* utilisation police linkée google pour le titre */
	h1
	{
		font-family: Rancho; 
		font-size:50px;
		color: #444444;
	}
	
	h2
	{
		font-family: Arial, sans-serif; 
		font-size:50px;
		color: #444444;
	}
	
	h3
	{
		font-family: Arial, sans-serif; 
		font-size:40px;
		color: #444444;
	}

	h4
	{
		font-family: Rancho; 
		font-size:40px;
		color: orange;
		text-align: center;
	}

	h5
	{
		font-family: Arial, sans-serif;  
		font-size:26px;
		color: blue;
		text-align: center;
	}


	p
	{
		font-family: Arial, sans-serif; 
		line-height: 20px;
		text-align:center;
		color:#777;
		text-align: justify;
	}

	small
	{
		font-family: Arial, sans-serif; 
		font-size: 12px;
		font-style: italic;
	}

	.orange
    {
		color:orange;
	}

			
	
	
			
			
			
			
			
	
/* HEADER : titre flotte à gauche et menu flotte à droite (il ira dessous si largeur réduite) */

    header
	   {
			height:120px;
		}
		
	/* flottage du H1 du Header (titre a gauche) */
    header h1
	   {
			float:left;
			margin-top:20px;
		}
	/* flottage du menu 'nav' du Header (menu a droite) */
    header nav
	   {
			float:right;
			margin-top:50px;
		}

	/* options du menu 'li' du 'nav' du Header  */
    header nav ul li 
	   {
			/* sans retour à la ligne */
			display: inline-block;
			/* espacement des options du menu */
			margin-right: 20px;
			/* chaque titre du menu est calé a gauche */
			float:left;
		}
	/* titre des options du menu : 'a' du 'li' du 'nav' du Header  */
    header nav ul li a
	   {
			/* mise en majuscule auto */
			text-transform: uppercase;
			font-size:15px;
			font-weight:bold;
		}







/* SECTION ID BANDEAU-IMAGE  */

   #bandeau-image
	   {
	/* hauteur du bandeau */
	height: 560px;
	background-color: rgba(151,104,2,1);
	background-image: url(../images/main.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	   }
		
   #bandeau-image h2
		/* specifité du H2 pour le bandeau */
	   {
           /* enlever le gras par défaut de la balise h2 */
		   font-weight: normal;
		   text-transform: uppercase;
		   text-align: center;
		   /* marges intérieures pour centrage */
		   padding: 150px 0 40px 0;
	   }
	   
		/* bouton est une classe avec . et non un ID avec # */
	   .boutoncentral
	   {
		   display: block;
		   width: 150px;
		   height: 40px;
		   background: orange;
		   color: white;
		   font-size: 20px;
		   /* 0 en haut et bas et auto (centré) droite et gauche */
		   margin: 0 auto;
		   /* hauteur de ligne idem hauteur bouton permet un centrage vertical plus simple que padding */
		   line-height: 40px;
		   text-align:center;
		   /* coins arrondis */
		   border-radius: 5px;
	   }
	   
	   
	   /* couleur bleu quand souris survole via le pseudo classe HOVER*/
	   .boutoncentral:hover
		{
 		   background: blue;
	    }
  
	   
	   
	   
	   
	   
	   /* SECTION ID ETAPES  */

   /* specificités titres H4 des etapes */
   #etapes h4
	   {
		   text-transform: uppercase;
		   margin-bottom: 20px;
	   }

	   
   /* specificités paragraphes des etapes */
   #etapes p
	   {
		   margin-bottom: 20px;
		   font-size: 14px;
	   }


   /* chaque option de la liste  */
   
   /* liste des etapes */
   #etapes ul
	   {
		   margin: 50px 0;
	   }

	   
   /* chaque option de la liste  */
   #etapes ul li
	   {
		   /* largeur de 1/3 de la miseenpage (dans général) car 3 options deduit les margin */
		   width: 280px;
		   /* on les fait flotter les une a cote des autres en fonction largeur fenetre  */
		   float: left;
		   /* marge externe  pour laisser la place entre les etapes */
		   margin-right: 20px ;
		   /* marge interne en haut pour laisser la place a l'image de fond au dessus du titre */
		   padding-top: 120px;
	   }
	   
	   
   /* etape1 depuis son ID  */
   #etape1
	   {
		background: url(../images/steps-icon-1.png) no-repeat top center;
	   }
	   
	   
   /* etape2 depuis son ID  */
   #etape2
	   {
		background: url(../images/steps-icon-2.png) no-repeat top center;
	   }
	   
	   
   /* etape3 depuis son ID  */
   #etape3
	   {
		background: url(../images/steps-icon-3.png) no-repeat top center;
	   }
	   
	   
	   
	   
	   	   
	   
	   
	   
	   
	   /* SECTION ID INFOS  */

   /* mise en forme des articles via son ID */
   #infos
	   {
           /* mise en place d'un fond gris */
		   background-color: #efefef;
		   /* marge interne de 60px en gaut et en bas */
		   padding: 60px 0;
	   }

   /* mise en forme des articles  */
   #infos article
	   {
			width: 400px;
			height: 270px;
			float: left;
		    border-radius: 20px;
	        text-align:center;
	   }

   /* mise en forme du H5 des articles pour avoir un petit trait de soulignement  */
   #infos h5
	   {
          border-bottom: 1px solid blue;
		  /* espacement du trait par rapport a son texte */
		  padding-bottom: 10px;
		  /* marge en bas sous trait avant texte infos : double de l'espace du trait (padding) pour identique */
		  margin-bottom: 20px;
	   }
	   
   /* mise en forme du texte des infos qui sont dans des paragraphes  */
   #infos p
	   {
          font-style: italic;
		  font-size:12px;
		  /* laisse une marge pour forcer le bouton a être plus bas */
		  margin-bottom: 20px;
	   }
	   
	   

   /* mise en place des images de fond :  faisable avec attribut style dans le htmk avec le ID */
   #info1
	   {
        background: url(../images/article-image-1.jpg) no-repeat top;
		/* marge a droite pour laisser espace avant info 2 */
		margin-right: 20px;
	   }
	   
   #info2
	   {
         background: url(../images/article-image-2.jpg) no-repeat top;
	   }

   .overlay
	   {
          /* mise en place d'une transparene légère via 4ème chiffre de RGBA: blanc avec 40% de transparence */
		  background-color:rgba(255,255,255,0.60) ;
		  
		  /* 85% de haut pour que le overlay  s'adapte à la hauteur de l'article mais je sais pas pourquoi */
		  height: 85%;
		  
		  width: 190px;
		  padding: 20px;
		  /* arrondi haut et droite pour faire comme image de fond */
		   border-radius: 20px 0 0 20px;
		   text-align: center;
	   }
	   
	   
	   
   /* bouton plus d'infos plus petit que bouton central de etapes  */
	   .boutoninfos
	   {
		   display: block;
		   width: 80px;
		   background: orange;
		   color: white;
		   font-size: 12px;
		   /* 0 en haut et bas et auto (centré) droite et gauche */
		   margin: 0 auto;
		   /* hauteur de ligne idem hauteur bouton permet un centrage vertical plus simple que padding */
		   text-align:center;
		   /* coins arrondis */
		   border-radius: 5px;
		   line-height: 18px;
   }
	   
	   
	   /* couleur bleu quand souris survole via le pseudo classe HOVER*/
	   .boutoninfos:hover
		{
 		   background: blue;
	    }

	   
	   
	   
	   
	   
	   
	   	   
	   
	   
	   
	   
	   /* SECTION ID CONTACT  */


   #contact
	   {
           /* mise en place marge en haut et en bas de la section */
		   padding: 60px 0;
		   /* centrage du texte pour toute la section */
		   text-align: center;
		   
	   }

   /* Titre de la section en H3  */
   #contact h3
	   {

           /* choix d'une largeur pour que le trait de soulignement prenne pas toute la page */
		   width: 320px;
		   
		   /* le choix d'une largeur fausse le centrage et il faut un margin auto pour compenser */
		   margin: 10px auto;
		   
           /* le H3 de contact est souligné */
		   border-bottom: 2px solid rgb(6,0,255);
		   
		   /* le soulignement est ecarté par une marge intérieure */
		   padding-bottom: 5px;
		   
	   }


   /* le Formulaire  */
   form
	   {
		   margin: 20px 0 20px 0;
	   }
	   
	   
   /* les label des zones du formulaire  */
   label
	   {
		   font-weight: bold;
		   font-size: 20px;
		   /* marge pour séparer à droite de la zone de saisie */
		   margin-right: 10px;
		   color: #444444;
	   }



   /* les zones du formulaire de type text car le bouton est aussi un input */
   input[type="text"]
	   {
		   font-size: 20px;
		   color: orange;
		   padding: 5px;
		   /* pour decoller les zons des labels */
   		   margin-right: 20px;
		   /* bord noir des zones de saisie */
		   border: 1px solid rgb(0,0,0);
		   /* angles arrondis des zones pour le style */
		   border-radius: 10px;
        
	   }



   /* bouton valid formulaire : on aurait pu utiliser input[type="tsubmit"] */
	   .boutonvalid
	   {
		   display: block;	   
		   background-color: blue;
		   color: white;
		   font-size: 16px;
		   /* 0 en haut et bas et auto (centré) droite et gauche obligatoire si width qui fausse le centrage*/
		   margin: 20px auto;
		   /* hauteur de ligne idem hauteur bouton permet un centrage vertical plus simple que padding */
		   text-align:center;
		   /* coins arrondis */
		   border-radius: 8px;
		   /* enlever la bordure du bouton qui y est par défaut */
		   border-style: none;
		   /* marge intérieure pour eloigner le texte des bords du bouton */
		   padding: 5px 15px;

        }
	   
	   
	   /* couleur orange a texte noir quand souris survole via le pseudo classe HOVER*/
	   .boutonvalid:hover
		{
 		   background: orange;
		   color: black;
	    }





	   /* SECTION PIED DE PAGE footer  */


   footer
	   {
           height: 200px;
		   background-color: grey;
		   text-align: center;
	   }

   /* modif pour ce H1 par rapport au général */
   footer h1
	   {
           color: white;
		   padding-top: 40px;
	   }



     .copyright

	   {
           font-weight: bold;
           font-style: italic;
		   font-size: 12px;
		   margin-top: 20px;
           color: #B7B7B7;

	   }