@charset "UTF-8";
/* CSS Document */

@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,500,600,700,900,400);
@import url(https://fonts.googleapis.com/css?family=Dosis:400,200,300,500,600,700,800);
@import url(https://fonts.googleapis.com/css?family=Allura);
body{
	color: rgba(0,0,0,0.6);
	font-family: "Open Sans",Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight:500;
	background-color: rgba(198,206,208,1.00);
	}
a {
	text-decoration: none;
	color: rgba(42,41,41,1.00);
	}
.groupe{
	display: block;
	position: relative;
	width: 800px;
	border: rgba(90,106,118,0.5) thin solid;
	border-radius: 12px;
	padding: 10px;
	margin-bottom: 10px;
	background-color: rgba(255,255,255,1.00);
	}
.titre_groupe{
	display: block;
	position: relative;
	width: 100%;
	font-size: 48px;
	font-weight: 800;
	color: rgba(0,0,0,1.00);
	}
.ligne_groupe{
	display: block;
	position: relative;
	width: 100%;
	border-bottom: rgba(0,0,0,0.2) thin solid;
	min-height: 32px;
	}
.ligne_groupe_sans{
	display: block;
	position: relative;
	width: 100%;
	}
.image_groupe{
	display: block;
	position: relative;
	float: left;
	width: 50%;
	max-height: 180px;
	background-color: rgba(141,246,246,0);
	}
.formes{
	display: block;
	position: relative;
	float: left;
	width: 50%;
	background-color: rgba(144,167,211,0);
	text-align: right;
	}
.forme{
	display: block;
	position: relative;
	float: left;
	width: 32px;
	text-align: center;
	min-height: 32px;
	line-height: 32px;
	}
.border_left{
			border-left: rgba(0,0,0,0.2) thin solid;
	}
.border_right{
			border-right: rgba(0,0,0,0.2) thin solid;
	}
.border_top{
			border-top: rgba(0,0,0,0.2) thin solid;
	}
	
.applications{
	display: block;
	position: relative;
	float: left;
	width: 50%;
	background-color: rgba(141,122,246,0);
	}
.tige{
	display: block;
	position: relative;
	float: left;
	width: 50%;
	background-color: rgba(122,177,255,0);
	}
.grain{
	display: block;
	position: relative;
	float: left;
	width: 50%;
	background-color: rgba(255,158,0,0);
	min-height: 32px;
	}
.image_grain{
	display:inline-flex;
	position: relative;
	float: left;
	width: 30%;	
	min-height: 32px;
	align-content: center;
	}
.vcenter{
	margin-top: auto;
	margin-bottom: auto;
	margin-right: 0px;
	}
.image_tige{
	width: 50%;	
	opacity: 0.7;
	}
.titre_tige{
	display: block;
	position: relative;
	width: calc(100% - 4px);
	background-color: rgba(155,170,186,0.6);	
	color: rgba(255,255,255,1.00);
	/*margin-top: 10px;*/
	line-height: 24px;
	padding-left: 4px;
	}
.groupe_image{
	max-width: 80%;	
	max-height: 180px;
	}
.groupe_vignette_image{
	max-width: 80%;	
	max-height: 60px;
	}
.article_vignette_image{
	max-width: 80%;	
	max-height: 60px;
}
.case{
	width: 32px;
	height: 32px;
	line-height: 32px;
	}
.clear{
	clear: both;
	}

.appli{
	float: left;
	width: 80px;
	text-align: center;
	}
.icone{
	width: 80px;
	text-align: center;
	}
.legende{
	width: 80px;
	font-size: 10px;
	text-align: center;
	}
.forme_image{
	width: 32px;	
	}
.actif{
	background-color: rgba(198,249,222,0);
	color: rgba(0,0,0,0.6);
	border: rgba(255,255,255,1.00) thin solid;
	font-size: 12px;
	}
.actif:hover{
	background-color: rgba(0,0,0,0.8);
	color: rgba(255,255,255,1);
	border: rgba(255,255,255,1.00) thin solid;
	
	}
.inactif{
	background-color: rgba(200,200,200,0.5);
	color:rgba(189,194,195,1);
	border: rgba(255,255,255,1.00) thin solid;
	}
.min60{
		min-height: 60px;
	}	
.tableau{
	display: inline-block;
	width: auto;
	background-color: rgba(186,138,139,0);
	}
.bleu{
	background-color: rgba(188,205,252,1.00);	
	}
.jaune{
	background-color: rgba(253,245,194,1.00);	
	}
.rouge{
	background-color: rgba(249,207,207,1.00);	
	}
.vert{
	background-color: rgba(109,247,166,0.7);	
	}
.gris{
	background-color: rgba(154,167,170,0.7);	
	}
.droite{
		text-align: right;
	}
.box_reference{
	text-align: right;
	width: 100%;
	}
.case_grise{
	width:100%;
	line-height: 18px;
	background-color: rgba(200,200,200,0.5);
	font-size: 12px;
	}
.legende_info{
	position: absolute;
	left: -60px;
	width: 60px;
	text-align: left;
	line-height: 18px;
	font-size: 12px;
	}
.margetop10{
		margin-top: 10px;
	}
.margetop28{
		margin-top: 28px;
	}
.vignette_groupe{
	display: block;
	float:left;
	width:25%;
	min-height:80px;
	}
.vignette_article{
	display: block;
	float:left;
	width:25%;
	min-height: 96px;
	}
.titre_vignette_groupe{
	display: block;
	position: relative;
	width: 100%;
	font-size: 14px;
	font-weight: 800;
	
	text-align: center;
	}
.image_vignette_groupe{
	display: block;
	position: relative;
	width: 100%;
	max-height: 60px;
	background-color: rgba(141,246,246,0);
	text-align: center;
	}
.cadre_vignette{
	display: block;
	position: relative;
	margin: 3px;
	border: rgba(0,0,0,0.4) thin solid;
	border-radius: 8px;
	padding: 4px;
	color: rgba(0,0,0,1.00); 
	}
.cadre_vignette:hover{
	background-color: rgba(142,153,173,1.00);
	color: rgba(255,255,255,1.00);
	}
.retour_groupes{
		display:block;
		position: relative;
		border: rgba(0,0,0,0.5) thin solid;
		font-size: 18px;
		text-align: center;
		cursor:pointer;
		border-radius: 8px;
		width: 80px;
	padding-bottom: 4px;
	line-height: 20px;
	}
.retour_groupes:hover{
	background-color: rgba(255,0,4,1.00);
	color: rgba(255,255,255,1.00);
	}

.cadre_selection{
	display: block;
	position: relative;
	margin: 10px;
	border: rgba(0,0,0,0.4) thin solid;
	border-radius: 12px;
	padding: 8px;
	color: rgba(0,0,0,0.8); 
	background-color: rgba(255,255,255,0.8);
}
.close{
	display: block;
	position: absolute;
	top:10px;
	right:10px;
	width:32px;
	height: 32px;
	border: rgba(0,0,0,0.5) thin solid;
	border-radius: 8px;
	text-align: center;
	font-size: 24px;
	line-height: 32px;
	color:rgba(0,0,0,0.5);
	cursor: pointer;
}
.close:hover{
	background-color: rgba(255,0,4,1.00);
	color: rgba(255,255,255,1.00);
}