/* 
			Page "style_page_index.css" regles de codification generales et comportement de base
			pour le site "Les tutos de tonton Eric"
			nouvelle version HTML5/CSS3 et version responsive design
			octobre 2019
			webmaster Eric BURETTE
 */


html
{
	height: 100%;	/* pour que le footer reste collé au bas de page, même avec les pages sans beaucoup de cpntenu */
	
}

#texte_accueil	/* texte de la page index */
{
	width: 45%;
	margin: auto;
	margin-top: 0;
	padding: 0 5px;
	margin-bottom: 10px;
	display: ;
	text-shadow: 6px 6px 10px black;
	font-size: 0.7em;
}

																						/* design responsive */
																							@media screen and (max-width: 1200px) /* pour les petits écrans */
																							{
																								
																							}
																							
																							@media screen and (max-device-width: 480px) /* pour les smartphones qui trichent */
																							{
																								#texte_accueil	/* texte de la page index */
																								{
																									width: 100%;
																								}
																							}

.imageflottante	/* pour l'image du texte d'accueil */
{
	float: left;
	margin-right: 5px
}
.image_centre
{
	margin: auto; /* centre image */
}
.bloc_menu_images	/* pour le menu en images de l'index */
{
	width: 45%;
	margin: auto;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	box-shadow: 6px 6px 12px black;
}
.bloc_menu_images img	/* format des images du menu en images de l'index */
{
	border: 2px grey solid;
	box-shadow: 4px 4px 4px grey;
	width: 125px;	/* largeur images de l'index */
}



section
{
	margin-top: 20px;
	margin-bottom: 100px;
}

section a 
{
	color: inherit;
}
footer	/* footer de la page d'accueil */
{
	position: absolute;
	bottom: 0;
	width: 100%;
	text-align: center;
}

																						/* design responsive */
																							@media screen and (max-width: 1600px) /* pour les  écrans en dessous de 1600 px */
																							{
																								footer	/* footer de la page d'accueil */
																								{
																									position: static;
																								}
																							}
																							
																							@media screen and (max-device-width: 480px) /* pour les smartphones qui trichent */
																							{
																								.bloc_menu_images	/* pour le menu en images de l'index */
																								{
																									width: 100%;
																								}
																								footer	/* footer de la page d'accueil */
																								{
																									position: static;
																								}
																							}

.footerstatic
{
	position: static;
}