div.pg2, div.pg3
/*unique à page 2: pour le flex qui a quelques peine sur les version mobiles*/
{
    width: 95%;



    margin-left: auto;
    margin-right: auto;
    font-family: Verdana, Arial, serif;
	padding: 3em 0 0 0;
	display: flex;/*npt*/
	/*rend les objets flexibles et donc s'adaptant à la page*/
	-webkit-display: flex;/*npt*/
	-ms-display: flex;/*npt*/
	-moz-display: flex;/*npt*/
	-webkit-display: flex;/*npt*/
	flex-wrap: wrap;/*npt*/
	/*spécifie si l'objet doit se déplacer selon la place*/
	-webkit-flex-wrap: wrap;/*npt*/
	-ms-flex-wrap: wrap;/*npt*/
	-moz-flex-wrap: wrap;/*npt*/
	-webkit-flex-wrap: wrap;/*npt*/
	justify-content: space-around;/*npt*/
	/*type d'espacement entre les objets*/
    -webkit-justify-content: space-around;/*npt*/
	-ms-justify-content: space-around;/*npt*/
	-moz-justify-content: space-around;/*npt*/
	-webkit-justify-content: space-around;/*npt*/
	align-items: flex-start;/*npt*/
	/*spécifie comment les objets doivent se suivre, ici en ligne*/
	-webkit-align-items: flex-start;/*npt*/
	-ms-align-items: flex-start;/*npt*/
	-moz-align-items: flex-start;/*npt*/
	-webkit-align-items: flex-start;/*npt*/
	margin: 10px 20px 20px 20px;/*npt*/
	/*distances entre les différents éléments du flex*/
}

div.pg2 ul, div.pg3 ul
/*objet de la liste flex*/
{
	list-style-type: none;
	/*élimine le point des objets de liste*/
	margin: 0px;/*npt*/
	/*distance entre les objets*/
	padding: 0;/*npt*/
	/*distance avec les autres sections*/
	overflow: hidden;/*npt*/
	/*empêche les objets de déborder*/
	background-color: #333;
	/*couleur de fond*/
	position: relative;/*npt*/
	/*position classique*/
	width: 207px;/*npt*/
	/*largeur prise par la liste sur la page*/
	border-radius: 12px;
	/*arrondissement des bordures*/
}

div.pg2 div, div.pg3 div {
    max-width: 200px;
    padding-bottom: 10px;
    padding-left: 10px;
}

div.pg2 ul li, div.pg3 ul li
/*éléments de la liste*/
{

	/*les éléments vont se suivre à gauche*/
	display: block;
	/*permet de rendre le tout plus joli en simplifiant utilisation bordures*/
    padding: 0px 0px;
	/*distances avec les bordures*/
	margin: 1px;
	/*distances avec les autres éléments*/

}

.ingredDesc, h2, article {
	font-size: 10px;
	border-left-style: solid;
	/*type bordure gauche*/
	border-right-style: solid;
	/*type bordure droite*/

	/*couleur de la bordure*/
	border-width: 2px;
	/*épaisseur de la bordure*/
	background-color: #333;	
	/*fond des éléments*/
	border-radius: 12px;
	/*arrondissement des*/
	padding: 10px 30px 10px 30px;
	/*distances avec les bordures*/
	border-color: #4CAF50;
	/*couleur des bordures*/
	text-align: justify;
	/*alignement du texte, justifié de préférable*/
	margin-top: 5px;
	/*distance avec élément au dessus*/
	margin-bottom: 5px;
	/*distance avec élément du dessous*/
	width: 100%;
}

h1, h2, h3 {
	text-align: center;
	font-size: 30px;
	width: 100%;
}

h3 {
	font-size: 15px;
}

h1 {
	font-size: 20px;
}

.welcominggif {
	display: block;
	/*permet le centrage de l'image*/
	margin-right: auto;
	/*distance avec bord drt: page auto pour center peut-importe taille image*/
	margin-left: auto;
	/*distance avec bord gch: page auto pour center peut-importe taille image*/
	width: 100%;
	/*largeur maximale de l'image : pour ne pas qu'elle déborde de la page*/
}