/**
 * CONTENTS
 *
 * FONCTIONNEMENT GENERAL
 * Icon...................................Ajout d'icone SVG
 * General................................Positionnement general
 * Panier vide............................Comportement du panier lorsqu'il est vide
 *
 *
 * AJUSTEMENT TABLETTE ET MOBILE
 * Max width 980px........................Gestion de l'apparence du panier en dessous de 980px;
 *
 * AJUSTEMENT SMARTPHONE
 * Max width 767px........................affichage du contenu du panier en full largeur
 */



/*------------------------------------*\
    #ETAPES
\*------------------------------------*/

.compEtape {
	padding: 20px;
}
.compEtape .dataContentComposants {
	border-bottom: 1px solid #999;
}

.compEtape .span3 {
	display: inline-block;
	text-align: center;
	width: 24%;
	padding-bottom: 20px;
	position: relative;
	color: #999;
}
	.compEtape .span3 .etapeNom {
		font-family: 'latobold', sans-serif;
		font-size: 1.4em;	
	}


	/**
	* Couleur des étapes
	*/

	#pageEtape1 .compEtape .etape1 {
		color: #555;
	}
	#pageEtape2 .compEtape .etape2 {
		color: #555;
	}
	#pageEtape3 .compEtape .etape3 {
		color: #555;
	}
	#pageEtape4 .compEtape .etape4 {
		color: #555;
	}



	/**
	* Positionnement de la flèche
	*/

	#pageEtape1 .compEtape .etape1:after {
		content: "";
		border-top: 1px solid #999;
		border-left: 1px solid #999;
		background: #fff;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		display: block;
		height: 10px;
		width: 10px;
		bottom: -6px;
		position: absolute;
		left: 50%;
		margin-left: -10px;
	}

	#pageEtape2 .compEtape .etape2:after {
		content: "";
		border-top: 1px solid #999;
		border-left: 1px solid #999;
		background: #fff;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		display: block;
		height: 10px;
		width: 10px;
		bottom: -6px;
		position: absolute;
		left: 50%;
		margin-left: -10px;
	}

	#pageEtape3 .compEtape .etape3:after {
		content: "";
		border-top: 1px solid #999;
		border-left: 1px solid #999;
		background: #fff;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		display: block;
		height: 10px;
		width: 10px;
		bottom: -6px;
		position: absolute;
		left: 50%;
		margin-left: -10px;
	}

	#pageEtape4 .compEtape .etape4:after {
		content: "";
		border-top: 1px solid #999;
		border-left: 1px solid #999;
		background: #fff;
		-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
		display: block;
		height: 10px;
		width: 10px;
		bottom: -6px;
		position: absolute;
		left: 50%;
		margin-left: -10px;
	}