/****************************************************
*	    Définition des éléments partagés
*				- couleurs
*				- polices
*				- positionnement des principaux conteneurs par défaut
******************************************************/

/* Si en mode paysage, on invite l'utilisateur a se mettre en portrait */
#sitePortrait { display: none; 
				text-align : center;}


#warning-msg{	padding : 10px;
				font-size : 19px;
				color : red;
}
	
#browserHS	{
		font-size : 20px;
		color : red;
		font-weight : bold;
		display : block;
		width : 900px;
}


 p.big				{	font-size : 25px;}  /* Texte plus grand en gras */ 
 
.absolute {		position : absolute;
}

.bold	{ font-weight : bold;	}

.border	{
	border : 2px solid red;
}

a.inactive	{
	pointer-events: none;
   cursor: default;
}

 a:hover	{
	text-decoration: underline;	/* les liens sont soulignés */
 }
 
 
/* Tags HTML */
html, body 	{
				font-family: "Trebuchet MS", Helvetica, sans-serif;
				font-size : 13px;
				text-align : justify;
				color : #5E5E5E;	 /* couleur principale du texte */
				max-height:99999px; /* POur nexus 5 sinon le texte dans <p> s'auto grandi */

				}

body 		{	width : 100%;
				min-width : 820px;  /* taille mini du site - Début de l'ascensseur horizontal... */
			}
figcaption		{	text-align : center;
				font-size : 10px;	}
/* Gros titre principal */		
h1, h2, h3, h4, h5	{	display : block;
				font-weight : normal;
				text-align : left; 
				color : #3e0b4e;	/* titre foncé */
				
				}				
h1			{	font-size : 42px;
				padding : 30px 0px 25px 0px;	}
h2			{	font-size : 34px;	}
h3			{	font-size : 22px;
				margin : 0px 0px 20px 0px;	}
h4			{	font-size : 21px;	
				font-variant:small-caps;}
h5			{	font-size : 16px;	
				font-weight : bold;
				padding : 10px 0px	5px 0px;
				font-variant:small-caps;
			}
a			{	text-align : left; }
hr			{	clear : both;
				display : block;		}

															
/* Différents effets simples */
.caps		{	font-variant:small-caps;}
.left		{	float:left; }
.right		{	float:right; }
.center		{	display : block;
				margin : auto;
				position : relative;}
.clear 		{  	clear: both;
				height: 0; 
				overflow: hidden; /* Précaution pour IE 7 */} 
.inline		{	display : inline-block;
				width : 100%;					}	
.liensColonne > a	{ display : block;	}				
/* Conteneur principal, centré, 90% */
.mainContainer			{	width : 90%;
							min-width : 800px;		/* container - idéalement un peu moins que le body pour se garder des marges... */
							max-width : 950px;  	
							margin : auto;
						}

						
.paddingleft	{ padding-left : 10px;
}

						
/* Sous conteneurs plus petit adapté aux DIV */
.container100		{	width:100%;  }
.container90		{	width:90%;  }
.container75		{	width:75%;  }
.container60		{	width:60%;  }
.container50		{	width:50%;  }
.container55		{	width:55%;  }
.container45		{	width:45%; }
.container40		{	width:40%; }
.container35		{	width:35%; }
.container30		{	width:30%; }
.container25		{	width:25%; }
.container22		{	width:22%; }
/*********
* Conteneurs simple avec que du texte
*********************/
div.texte 			{	padding : 25px;	}
/*********
* Conteneurs avec 1 image ou une zone qui float a gauche
*********************/
/*=> reinit les marges */
div.imageEtTexte 			{	padding : 15px 0px;
								display : inline-block;	
							}

div.imageEtTexte  > span,
div.imageEtTexte  > img,
div.imageEtTexte  p				{	float : left;}	
								
div.span100 > span				{	width : 100px;
									text-align : center ;									
								}
div.span75 > span					{	width : 75px;
									text-align : center ;
								}
.container40 div.span100 p		{	width : 68%;		/* = 100 par rapport à 40% minWidth main */
									min-width : 220px;	 /* = 40% minWidth main - 100*/
								}

.container55 div.span100 p		{	width : 78%;		/* = 100 par rapport à 40% minWidth main */
									min-width : 220px;	 /* = 40% minWidth main - 100*/
								}
								
.container40 div.span75 p			{	width : 77%;		/* = 100 par rapport à 40% minWidth main */
									min-width : 245px;	 /* = 40% minWidth main - 100*/
								}	
								
								
.container45 div.span75  p		{	width : 78%;
									min-width : 285px;
								}
.container50 div.span100 p		{	width : 75%;		/* = 100 par rapport à 50% minWidth main */
									min-width : 300px;	 /* = 50% minWidth main - 100*/
								}	
								
p	{   max-height:99999px;	/* pour corriger le prob sur page d'accueil ou le texte est sur dimensionné avec chrome mobile nexus 5 */
}

/* Définition des propriétés d'une zone à fond clair */
.whiteBack						{	color : #3e0b4e;	/* foncé */	
}
								
/* Définition des propriétés d'une zone à fond clair */
.lightBack			{	color : #5E5E5E;   /* couleur de texte standard = gris */}

.lightBack b			{	color : #3e0b4e;	/* gras =  foncé */	}
.lightBack a			{	color : #B19CC9;	/* lien  clair */
						font-weight : bold;	}
.lightBack a:hover	{	color : #3e0b4e;	/* survol foncé */	}
.lightBack	hr		{	color : #F5E0FF;   /* séparateur clair */}

/* Définition des propriétés d'une zone à fond clair */
.mediumBack			{	color : #3e0b4e;   /* couleur de texte foncé */
						background-color : #F5E0FF;	}	/* Gris tres clair */
.mediumBack b		{	font-weight : bold;	/* gras   */	}
.mediumBack a		{	color : #3e0b4e; /* lien foncé */						
						text-decoration: underline;	/* souligné */	}
.mediumBack a:hover	{	font-weight : bold;	/* survol normal */	
						text-decoration: none;	/* souligné */}
.mediumBack	hr		{	color : #3e0b4e;   /* séparateur foncé */}

/* Définition des propriétés d'une zone à fond foncé */
.greyBack	{

}

.darkBack			{	color : white;
						background-color : #3e0b4e;	}
.darkBack h1,
.darkBack h2,
.darkBack h3			{	color : white;	/* titre darkback */}

.darkBack a			{	color : white;	/* lien darkback */
						font-weight : bold;
						text-decoration:underline;	}
.darkBack a:hover	{	color : #B19CC9;	/* survol blanc */
						text-decoration:none;}	
					
/* Images standardisées -> a une influence sur les container > div p dans base.css */
.tinyPic			{	width : 29px;	}
.smallPic 			{	width : 35px;	} 
.normalPic			{	width : 60px;	}
/* Bouton standard */
.circle	{
	background : red;
	padding : 18px;
	border-radius: 30px;
}
/* bouton de chaque slogan */
a.commonButton 		{		/* transition on mouse out */
						background:#3e0b4e;
	
						color : white;	/* texte violet foncé */
						font-size : 13px;
						font-weight : bold;
						border-radius: 4px;	
						padding : 10px;
						border-top : 1px solid #B19CC9;	/* bordure claire */
						border-bottom : 1px solid #B19CC9;	
						font-variant:small-caps;
}
a.commonButton:hover {
	background:linear-gradient(to bottom, #B19CC9, #3e0b4e 50%,  #B19CC9);
						
	//transition: background .3s ease-in .0s;
}						

a.commonButton 	> img	{  width : 20px;
							float : right;
							margin-left : 10px;

}
a.commonButton.big	{
	font-size : 18px;
	padding : 10px 30px;
}