/* 
			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	/* conteneur du block média */
{
	width: 63%;
	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;
}

																				/* 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	/* conteneur du block média */
																						{
																							width: 100%;
																						}
																					}


.blocs_media	/* contient les block texte et vidéo */
{
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	border: 1px white solid;
	margin-top: 2px;
	margin-bottom: 2px;
	padding: 10px;
}
.blocs_media img
{
	width: 300px;
}

.texte_media	/* 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;
}
.texte_image	/* 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;
}

figure
{
	margin: 0px;
	text-align: center;
}
.largefigure
{
	width: 300px;	/* pour les pages de présentations des différentes vidéos */
}
video
{
	border: 2px white solid;
	box-shadow:  4px 4px 4px white;
}
.borderimage
{
	border: 2px white solid;
	box-shadow:  4px 4px 4px white;
}
figcaption
{
	color: white;
	
}
.figcaptionmoviecolor
{
	color: black;
}
.movie
{
	background-color: rgb(69,65,60);		/* fond gris video */
}

.geneanet	/* couleur de fond du block */
{
	background-color: rgb(56,150,131);	/* vert Généanet */
}
.myheritage		/* couleur de fond du block */
{
	background-color: rgb(231,111,47);	/* orange MyHeritage */
}
.informatique	/* couleur de fond du block */
{
	background-color: rgb(10,52,126);	/* bleu foncé pris sur l'image de fond "informatique" */
}
.pdf		/* couleur de fond du block */
{
	background-color: rgb(178,16,29);	/* rouge PDF */
}
.fichesbernard		/* couleur de fond du block */
{
	background-color: rgb(192,192,192);	/* gris */
}
.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;
}