/**
 * 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;	
	}
.compEtape .span4 {
	display: inline-block;
	text-align: center;
	width: 32%;
	padding-bottom: 20px;
	position: relative;
	color: #999;
}
	.compEtape .span4 .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;
	}

	#pageReservation .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: 53%;
		margin-left: -10px;
	}

/*----------------------------------------------------*\
    #COMPORTEMENT COMMUN AUX TABLETTES ET MOBILES
\*----------------------------------------------------*/

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

} /* Fin max width 980px */






/*----------------------------------------------------*\
    #OPTIMISATION SMARTPHONE
\*----------------------------------------------------*/


@media screen  and (max-width: 767px){
	.compEtape .span3 .etapeNom,
	.compEtape .span4 .etapeNom {
		font-size: 1.2em;	
	}

}/* fin max width 767px*/


@media screen  and (max-width: 640px){
	.compEtape .etapeDesc {
		display: none;
	}
}/* fin max width 767px