/************************************************************************************************************************/
/************************************************************************************************************************/
/**                                                                    									   			   **/
/**  Page d'accueil (index)                                                       									   **/
/**                                                                    									   			   **/
/************************************************************************************************************************/
/************************************************************************************************************************/

/* ==================================================================================================================== */
/*																														*/
/*  I. Définitions générales (root)              		  																*/
/*																														*/
/* ==================================================================================================================== */


/* ==================================================================================================================== */
/*																														*/
/*  II. Définitions adaptées à une petite fenêtre              [media queries]                  						*/
/*																														*/
/* ==================================================================================================================== */
@media (max-width: 480px) 
{

/* ==================================================================================================================== */
/*  II.1. Barre de titre	                      																		*/
/* ==================================================================================================================== */
		
/* small -------------------------------------------------------------------------------------------------------------- */
	
.indexTitleBarArea	/* Barre de titre : Conteneur principal */
	{
	background:			var(--white);	
	color:				var(--blue05);	 
	height:				40px;
	width:				auto;
	padding-left:		0px;
	
	display: 			flex;		
	flex-direction:		row;			/* Présentation linéaire */	
	flex-wrap: 			no-wrap;		/* Pas de retour à la ligne des blocs */
	justify-content: 	space-between;	/* 3 blocs espacés et répartis sur toute la largeur */
	align-items: 		center;			/* blocs centrés verticalement (en mode ligne) */
	}
		
/* small -------------------------------------------------------------------------------------------------------------- */

.indexTitleBarLogoPic 	/* Barre de titre : Logo du site	*/
	{
	background-image:	url('img/LogoRG200.png');
	background-repeat:	no-repeat;
	background-size:	30px 30px;
	height:				30px;
	width:				30px;
	margin:				10px 10px 10px 10px;
	
	display: 			flex;	
	flex-grow:			0;				/* Pas d'agrandissement auto du bloc */
	flex-shrink:		0;				/* Réduction auto des blocs	: mettre 0 sans quoi écrasement progressif de l'image !!! */
	}
/*.indexTitleBarLogoPic:hover{background-size: 40px 40px; height:40px; width:40px;} */
	
.indexTitleBarText		/* Barre de titre : Texte du titre */
	{
	height:				auto;
	font-size:	 		16px;
	font-weight:		500;
	padding:			10px 10px 10px 10px;
		
	display: 			flex;	
	flex-grow:			0;				/* Pas d'agrandissement auto du bloc */
	flex-shrink:		0;				/* Réduction auto des blocs	*/
	}

.indexTitleBarButton	/* Barre de titre : Bouton de droite	*/
	{
	width:				30px;
	height:				30px;
	margin:				5px;
	padding:			5px;
	border:				none;
	outline:			none;			/* Fait disparaitre le cadre lors du focus */
	background-color:	var(--transparent);
	cursor:				pointer;
		
	display: 			flex;	
	flex-grow:			0;				/* Pas d'agrandissement auto du bloc */
	flex-shrink:		0;				/* Réduction auto des blocs */
	}
.indexTitleBarButton:hover{background-color:	var(--grey03Tr);}
	
/* small -------------------------------------------------------------------------------------------------------------- */
		
	
/* ==================================================================================================================== */
/*  II.2. Corps de l'écran	                      																		*/
/* ==================================================================================================================== */

#indexBodyArea		/* Corps de l'écran : Conteneur principal */
	{
	background-color:	var(yellow);
	height:				auto;		
	overflow:			auto;
	margin-top:			40px;

	display: 			flex;		
	flex-direction:		row;			/* 2 blocs : Volet et Corps en ligne */	
	flex-wrap: 			no-wrap;		
	justify-content: 	flex-start;		/* Blocs cadrés à gauche */
	align-items: 		stretch;		/* Blocs collés en haut et à gauche */
	}

/* small -------------------------------------------------------------------------------------------------------------- */
#indexMenuArea			/* Bloc Menu (volet de navigation) : Conteneur principal */
	{
	width:				300px;
	min-width:			130px;
	height:				auto;
	margin:				10px;
	overflow-y:			auto;		/* Ascenseur vertical ssi fenêtre navigateur pas assez haute */

	display: 			flex;		
	flex-direction:		column;		/* n blocs indexMenuHeaderArea & indexMenuLineArea en colonne*/
	flex-wrap: 			no-wrap;		
	justify-content: 	flex-start;	
	align-items: 		stretch;
	}
	
/* small -------------------------------------------------------------------------------------------------------------- */

.indexMenuHeaderArea	/* En-tête de groupe d'entrées : Conteneur	*/
	{
	height:				auto;
	width:				auto;
	background-color:	var(--white);
	padding:			10px 0px 10px 0px;
	cursor:				pointer;
	border:				1px solid var(--grey02);

	display: 			flex;		
	flex-direction:		row;
	justify-content:	space-between;		/* flex-start center flex-end space-between space-around space-evenly */
	flex-wrap: 			no-wrap;		
	align-items: 		center;	
	}
	
.indexMenuHeaderLeftButton	/* En-tête de groupe d'entrées : Bouton gauche	*/
	{
	width:				24px;
	height:				auto;
	margin:				0px 10px 0px 10px;
	border:				none;		/* Important car valeur par défaut = outset */
	background-color:	inherit;	/* Important car valeur par défaut = gris	*/
	outline:			none;		/* Evite le vilain cadre noir autour de l'icône */

	display: 			flex;			
	flex-grow: 			0;			
	flex-shrink: 		1;	
	}

.indexMenuHeaderLabel		/* En-tête de groupe d'entrées : Libellé	*/
	{
	height:				auto;
	width:				auto;
	color:				var(--grey03);
	font-size:	 		12px;
	margin:				0px 0px 0px 0px;

	display: 			flex;
	flex-direction:		row;	
	flex-wrap: 			no-wrap;		
	flex-grow: 			1;			
	flex-shrink: 		1;
	}

.indexMenuHeaderRightButton	/* En-tête de groupe d'entrées : Bouton droit	*/
	{
	width:				22px;
	height:				auto;
	margin:				0px 10px 0px 0px;
	border:				none;		/* Important car valeur par défaut = outset */
	background-color:	inherit;	/* Important car valeur par défaut = gris	*/
	outline:			none;		/* Evite le vilain cadre noir autour de l'icône */
	
	display: 			flex;		
	flex-grow: 			0;			
	flex-shrink:		1;	
	}
	
/* small -------------------------------------------------------------------------------------------------------------------- */

.indexMenuContentArea		/* Conteneur des entrées menu */
	{
	height:				auto;
	width:				auto;
	font-size:	 		12px;
	cursor:				pointer;

	display: 			flex;		
	flex-direction:		column;	
	flex-wrap: 			no-wrap;		
	justify-content: 	flex-start;	
	align-items: 		stretch;
	flex-grow: 			0;			
	flex-shrink: 		0;			
	}
	
.indexMenuLineArea			/* Conteneur d'une entrée menu */
	{
	height:				auto;
	width:				auto;
	padding:			10px 0px 10px 44px;
	border-style:		solid;
	border-color:		var(--grey02);
	border-width:		0px 1px 1px 1px;
		
	display: 			flex;		
	flex-direction:		row;	
	flex-wrap: 			wrap;		
	justify-content: 	flex-start;	
	align-items: 		center;		
	flex-grow: 			0;			
	flex-shrink: 		0;	
	}

.indexMenuLineLabel			/* Libellé d'une entrée menu */
	{
	color:				var(--grey03);	
	font-size:	 		12px;
	font-weight:		500;
	text-align:			left;

	display: 			flex;		
	flex-grow: 			0;			
	flex-shrink: 		1;	
	}
	
.indexMenuLineGreyLabel		/* Libellé alternatif ("Progress in work") d'une entrée menu */
	{
	color:				var(--grey03);	
	font-size:	 		12px;
	font-weight:		300;
	font-style:			italic;
	text-align:			left;

	display: 			flex;		
	flex-grow: 			0;
	flex-shrink: 		1;	
	}

/* small -------------------------------------------------------------------------------------------------------------------- */

#indexMainArea			/* Bloc "page d'accueil" : Conteneur principal */
	{
	background-color:	var(--white);
	height:				auto;
	width:				100%;
	padding:			10px;
	
	display: 			flex;		
	flex-direction:		column;	
	flex-wrap: 			no-wrap;		
	justify-content: 	center;	
	align-items: 		center;		
	}
	
/* small -------------------------------------------------------------------------------------------------------------------- */

#indexMainPicture 	/* Photo de la page d'accueil	*/
	{
	background-image:	url('img/photoAccueil_01_600.jpg');
	background-repeat:	no-repeat;
	background-size:	120px 120px;
	height:				120px;
	width:				120px;
		
	display: 			flex;		
	flex-grow: 			0;
	flex-shrink: 		0;
	}
	
	
}
/* ==================================================================================================================== */
/*																														*/
/*  III. Définitions adaptées à une grande fenêtre                              										*/
/*																														*/
/* ==================================================================================================================== */
@media (min-width: 480px) 
{
/* ==================================================================================================================== */
/*  III.1. Barre de titre	                      																		*/
/* ==================================================================================================================== */

/* LARGE -------------------------------------------------------------------------------------------------------------------- */

.indexTitleBarArea		/* Barre de titre : Conteneur principal */
	{
	background:			var(--white);	
	color:				var(--grey03);	 
	height:				60px;
	width:				auto;
	padding-left:		10px;
	
	display: 			flex;		
	flex-direction:		row;			/* Présentation linéaire */	
	flex-wrap: 			no-wrap;		/* Pas de retour à la ligne des blocs */
	justify-content: 	space-between;	/* 3 blocs espacés et répartis sur toute la largeur */
	align-items: 		center;			/* blocs centrés verticalement (sur l'axe perpendiculaire) */
/*  align-content		sans objet : pas d'empilement vertical des blocs */
	}
	
/* LARGE -------------------------------------------------------------------------------------------------------------------- */

.indexTitleBarLogoPic 	/* Barre de titre : Logo du site	*/
	{
	background-image:	url('img/LogoRG200.png');
	background-repeat:	no-repeat;
	background-size:	48px 48px;
	height:				48px;
	width:				48px;
	
	display: 			flex;	
	flex-grow:			0;				/* Pas d'agrandissement auto du bloc */
	flex-shrink:		0;				/* Réduction auto des blocs	*/
	}
/*#indexTitleBarLogoPic:hover{background-size: 60px 60px; height:60px; width:60px;} */
	
.indexTitleBarText		/* Barre de titre : Texte du titre */
	{
	height:				auto;
	font-size:	 		20px;
	font-weight:		700;
	padding:			20px 20px 20px 20px;

/*	color:				blue;	
*/
	
	display: 			flex;	
	flex-grow:			0;				/* Pas d'agrandissement auto du bloc */
	flex-shrink:		0;				/* Réduction auto des blocs	*/
	}

.indexTitleBarButton	/* Barre de titre : Bouton de droite	*/
	{
	width:				40px;
	height:				40px;
	margin:				5px;
	padding:			8px;
	border:				none;
	outline:			none;	/* Fait disparaitre le cadre lors du focus */
	background-color:	var(--transparent);
	cursor:				pointer;
			
	display: 			flex;	
	flex-grow:			0;				/* Pas d'agrandissement auto du bloc */
	flex-shrink:		0;				/* Réduction auto des blocs */
	}
.indexTitleBarButton:hover{background-color:	var(--grey03Tr);}

	
/* ==================================================================================================================== */
/*  III.2. Corps de l'écran	                      																		*/
/* ==================================================================================================================== */

#indexBodyArea		/* Corps de l'écran : Conteneur principal */
	{
	background-color:	var(yellow);
	height:				auto;		
	overflow:			auto;
	margin-top:			40px;

	display: 			flex;		
	flex-direction:		row;			/* 2 blocs : Volet et Corps en ligne */	
	flex-wrap: 			no-wrap;		
	justify-content: 	flex-start;		/* Blocs cadrés à gauche */
	align-items: 		stretch;		/* Blocs collés en haut et à gauche */
	}

/* LARGE -------------------------------------------------------------------------------------------------------------------- */
#indexMenuArea			/* Bloc Menu (volet de navigation) : Conteneur principal */
	{
	width:				300px;
	min-width:			130px;
	height:				auto;
	margin:				10px;
	overflow-y:			auto;		/* Ascenseur vertical ssi fenêtre navigateur pas assez haute */

	display: 			flex;		
	flex-direction:		column;		/* n blocs indexMenuHeaderArea & indexMenuLineArea en colonne*/
	flex-wrap: 			no-wrap;		
	justify-content: 	flex-start;	
	align-items: 		stretch;
	}
	
/* LARGE -------------------------------------------------------------------------------------------------------------------- */

.indexMenuHeaderArea	/* En-tête de groupe d'entrées : Conteneur	*/
	{
	height:				auto;
	width:				auto;
	background-color:	var(--white);
	padding:			10px 0px 10px 0px;
	cursor:				pointer;
	border:				1px solid var(--grey02);

	display: 			flex;		
	flex-direction:		row;
	justify-content:	space-between;		/* flex-start center flex-end space-between space-around space-evenly */
	flex-wrap: 			no-wrap;		
	align-items: 		center;	
	}
	
.indexMenuHeaderLeftButton	/* En-tête de groupe d'entrées : Bouton gauche	*/
	{
	width:				24px;
	height:				auto;
	margin:				0px 10px 0px 10px;
	border:				none;		/* Important car valeur par défaut = outset */
	background-color:	inherit;	/* Important car valeur par défaut = gris	*/
	outline:			none;		/* Evite le vilain cadre noir autour de l'icône */

	display: 			flex;			
	flex-grow: 			0;			
	flex-shrink: 		1;	
	}

.indexMenuHeaderLabel		/* En-tête de groupe d'entrées : Libellé	*/
	{
	height:				auto;
	width:				auto;
	color:				var(--grey03);
	margin:				0px 0px 0px 0px;

	display: 			flex;
	flex-direction:		row;	
	flex-wrap: 			no-wrap;		
	flex-grow: 			1;			
	flex-shrink: 		1;
	}

.indexMenuHeaderRightButton	/* En-tête de groupe d'entrées : Bouton droit	*/
	{
	width:				22px;
	height:				auto;
	margin:				0px 10px 0px 0px;
	border:				none;		/* Important car valeur par défaut = outset */
	background-color:	inherit;	/* Important car valeur par défaut = gris	*/
	outline:			none;		/* Evite le vilain cadre noir autour de l'icône */
	
	display: 			flex;		
	flex-grow: 			0;			
	flex-shrink:		1;	
	}
	
/* LARGE -------------------------------------------------------------------------------------------------------------------- */

.indexMenuContentArea		/* Conteneur des entrées menu */
	{
	height:				auto;
	width:				auto;
	font-size:	 		12px;
	cursor:				pointer;

	display: 			flex;		
	flex-direction:		column;	
	flex-wrap: 			no-wrap;		
	justify-content: 	flex-start;	
	align-items: 		stretch;
	flex-grow: 			0;			
	flex-shrink: 		0;			
	}
	
.indexMenuLineArea			/* Conteneur d'une entrée menu */
	{
	height:				auto;
	width:				auto;
	padding:			10px 0px 10px 44px;
	border-style:		solid;
	border-color:		var(--grey02);
	border-width:		0px 1px 1px 1px;
		
	display: 			flex;		
	flex-direction:		row;	
	flex-wrap: 			wrap;		
	justify-content: 	flex-start;	
	align-items: 		center;		
	flex-grow: 			0;			
	flex-shrink: 		0;	
	}

.indexMenuLineLabel			/* Libellé d'une entrée menu */
	{
	color:				var(--grey03);	
	font-size:	 		14px;
	font-weight:		700;
	text-align:			left;

	display: 			flex;		
	flex-grow: 			0;			
	flex-shrink: 		1;	
	}
	
.indexMenuLineGreyLabel		/* Libellé alternatif ("Progress in work") d'une entrée menu */
	{
	color:				var(--grey03);	
	font-size:	 		14px;
	font-weight:		300;
	font-style:			italic;
	text-align:			left;

	display: 			flex;		
	flex-grow: 			0;
	flex-shrink: 		1;	
	}

/* LARGE -------------------------------------------------------------------------------------------------------------------- */

#indexMainArea			/* Bloc "page d'accueil" : Conteneur principal */
	{
	background-color:	var(--white);
	height:				auto;
	width:				100%;
	padding:			10px;
	
	display: 			flex;		
	flex-direction:		column;	
	flex-wrap: 			no-wrap;		
	justify-content: 	center;	
	align-items: 		center;		
	}
	
/* LARGE -------------------------------------------------------------------------------------------------------------------- */
	
#indexMainPicture 	/* Photo de la page d'accueil	*/
	{
	background-image:	url('img/photoAccueil_01_600.jpg');
	background-repeat:	no-repeat;
	background-size:	300px 300px;
	height:				300px;
	width:				300px;
		
	display: 			flex;		
	flex-grow: 			1;
	flex-shrink: 		1;
	}

}