/* 
			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
{
	min-height: 100%;	/* pour que le footer reste collé au bas de page, même avec les pages sans beaucoup de cpntenu */
}

.titre_blocs
{
	width: 80%;
	margin: auto;
	font-weight: bold;
}


.content_blocs_archives	/* conteneur du block média */
{
	width: 80%;
	margin: auto;
	/* border: 2px grey solid; */
	padding: 5px;
	/* box-shadow: 4px 4px 4px grey; */
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	margin-bottom: 30px;
	background-color: ;
}

																				/* design responsive */
																					@media screen and (max-width: 1200px) /* pour les petits écrans */
																					{
																						
																					}
																					
																					@media screen and (max-device-width: 480px) /* pour les smartphones qui trichent */
																					{
																						.content_blocs_archives	/* conteneur du block média */
																						{
																							width: 100%;
																						}
																					}


.blocs_media_archives	/* contient les block texte et image */
{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	border: 1px white solid;
	max-width: 500px;
	margin-top: 1px;
	margin-bottom: 5px;
	padding: 5px;
	background-color: ;
}

.bloc_titre /* pour le titre des blocs */
{
	border: 2px grey solid;
	box-shadow: 4px 4px 4px grey;
	padding: 5px;
	margin-bottom: 5px;
}
.bloc_titre p /* pour le titre des blocs */
{
	font-size: 0.8em;
	margin: 5px 0;
}

.texte_media_archives	/* mise ne forme du texte explicatif du média associé */
{
	width: 300px;
	height: 206px;
	margin: 0px;
	margin-right: 5px;
	overflow: auto; /* ascenseur en cas de dépassement du texte */
	font-size: 0.7em; /* réduction de la taille du texte par rapport à 1em */
	color: white;
	background-color: ;
}
.texte_image_archives	/* mise ne forme du texte explicatif de l'image associée */
{
	width: 200px;
	height: 206px;
	margin: 0px;
	margin-right: 5px;
	overflow: auto; /* ascenseur en cas de dépassement du texte */
	font-size: 0.7em; /* réduction de la taille du texte par rapport à 1em */
	color: white;
	background-color: gray;
}

figure
{
	margin: 0px;
	padding: 0 5px;
	text-align: center;
}

figcaption
{
	color: black;
	font-size: 0.7em;
}

.reducmarginbottom	/* réduction de la marge inférieure du h1 fiches bernard pour remonter le texte du dessous */
{
	margin-bottom: 5px;
}
.reducmargintop	/* réduction de la marge supérieur du texte fiches bernard pour remonter le texte vers le h1 */
{
	margin-top: 5px;
}

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

section a 
{
	color: inherit;
}
footer
{
	
	width: 100%;
	text-align: center;
}