/**
 * 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;
	}

/*----------------------------------------------------*\
    #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 {
		font-size: 1.2em;	
	}

}/* fin max width 767px*/


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



/*------------------------------------------------------------------------------------------------------------*\
    #Gestions des etapes lorsque la billetterie n'est pas déployée depuis un thème
\*------------------------------------------------------------------------------------------------------------*/
.compEtape .dataContentComposants {
      height: 50px;
}

.ligneEtapeNom .etape1,
.ligneEtapeNom .etape2,
.ligneEtapeNom .etape3,
.ligneEtapeNom .etape4,
.ligneEtapeDesc .etape1,
.ligneEtapeDesc .etape2,
.ligneEtapeDesc .etape3,
.ligneEtapeDesc .etape4 {
	float: left;
	width: 25%;
	text-align: center;
	color: #999;
}
.ligneEtapeNom .etape1,
.ligneEtapeNom .etape2,
.ligneEtapeNom .etape3,
.ligneEtapeNom .etape4 {
  font-family: 'latobold', sans-serif;
  font-size: 1.4em;
}
.ligneEtapeDesc .etape1,
.ligneEtapeDesc .etape2,
.ligneEtapeDesc .etape3,
.ligneEtapeDesc .etape4 {
	position: relative;
}

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

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

	#pageEtape1 .ligneEtapeDesc .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: -24px;
		position: absolute;
		left: 50%;
		margin-left: -10px;
	}

	#pageEtape2 .ligneEtapeDesc .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: -24px;
		position: absolute;
		left: 50%;
		margin-left: -10px;
	}

	#pageEtape3 .ligneEtapeDesc .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: -24px;
		position: absolute;
		left: 50%;
		margin-left: -10px;
	}

	#pageEtape4 .ligneEtapeDesc .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: -24px;
		position: absolute;
		left: 50%;
		margin-left: -10px;
	}
/**
* surcharge héritage flèche 
**/
.ligneEtapeNom .etape1:after,
.ligneEtapeNom .etape2:after,
.ligneEtapeNom .etape3:after,
.ligneEtapeNom .etape4:after {
	display: none !important;
}

@media screen  and (max-width: 767px){
	.ligneEtapeNom .etape1,
	.ligneEtapeNom .etape2,
	.ligneEtapeNom .etape3,
	.ligneEtapeNom .etape4 {
		font-size: 1.2em;	
	}

	#pageEtape1 .ligneEtapeDesc .etape1:after {
		bottom: -27px;
	}

	#pageEtape2 .ligneEtapeDesc .etape2:after {
		bottom: -27px;
	}

	#pageEtape3 .ligneEtapeDesc .etape3:after {
		bottom: -27px;
	}

	#pageEtape4 .ligneEtapeDesc .etape4:after {
		bottom: -27px;
	}

}

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