@page{size:auto;margin:0mm 5mm}





@font-face{
	font-family:"font1";
	src:local("Coolvetica_Rg.otf"),
	url(Coolvetica_Rg.otf) format("opentype")
}


@font-face{
	font-family:"font2";
	src:local("Comfortaa.ttf"),
	url(Comfortaa.ttf) format("truetype")
}






body
{
	background-color:#FFF;
	color:#000;
	margin:0;
	padding:10px 10px 50px 10px;
	font-family:arial;
}

header
{
	text-align: center;
}

header img
{
	width:250px;
}



.article-wrap
{

	margin:5px auto;
	padding:10px;
	background-color: #fff;
	max-width: 600px;
    border:1px dotted #000;
}

.article-wrap.indispo
{

	color:#aaa;
	border-color:#aaa;
}

.article-wrap.indispo .article-periode-recolte
{

	display:none;
}




.article-wrap .article-infos
{
	display:flex;
	flex-direction: row;
	padding:0;
	width:100%;
}

.article-wrap .article-periode-recolte
{
	text-align: right;
	font-size:12px;
	font-family: "font2";
	font-weight: normal;
	margin:10px 0 0 0;
}

.article-wrap .article-periode-recolte span
{
	padding: 2px 3px;
	margin:1px;
}

.article-wrap .article-periode-recolte span:first-child
{
	font-weight:bolder;
}

.article-wrap .article-periode-recolte .actif
{
	background-color: #699434;
	color:#FFF;
	border-radius: 3px;
}

.article-wrap .article-stock
{
	text-align: left;
}

.article-wrap .article-stock span
{
	width: 150px;
	font-size:15px;
	display:inline-block;
	text-align: center;
	padding: 3px 0;
}
	

.article-wrap .article-stock .actif
{
	background-color: #699434;
	color:#FFF;
	border-radius: 3px;
}

.article-wrap .article-stock .indisponible
{
	background-color: #699434;
	color:#FFF;
	border-radius: 3px;
}


.article-wrap .article-description
{
	font-size:15px;
	font-family: "font2";
	font-weight: normal;
	margin:0 10px;

}

.article-wrap .article-img img
{
	width:150px;

}


h2
{
	font-size:30px;
	font-family: "font1";
	font-weight: normal;
	margin:-8px 0 8px 0;
}


@media screen and (max-width: 800px)
{


	h2
	{
		font-size:19px;
	}

	.article-wrap .article-img img
	{
		width: 100px;
	}

	.article-wrap .article-stock span
	{
		width: 100px;
		font-size:10px;
	}


	.article-wrap .article-description
	{
		font-size:12px;
	}


}