/**
 * 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 var(--line-Primary-color);
}

.compEtape .span3 {
	display: inline-block;
	text-align: center;
	width: 24%;
	padding-bottom: 20px;
	position: relative;
	color: var(--text-Quaternary-color);
}

.compEtape .span3 .etapeNom {
	font-weight: 400;
	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-weight: 400;
	font-size: 1.4em;
}

/**
	* Couleur des etapes
	*/

#pageEtape1 .compEtape .etape1,
#pageEtape2 .compEtape .etape2,
#pageEtape3 .compEtape .etape3,
#pageEtape4 .compEtape .etape4 {
	color: var(--Primary-color);
}

#pageEtape1 .compEtape .etape1 .etapeDesc,
#pageEtape2 .compEtape .etape2 .etapeDesc,
#pageEtape3 .compEtape .etape3 .etapeDesc,
#pageEtape4 .compEtape .etape4 .etapeDesc,
#pageEtape1 .compEtape .etape1 .etapeNom,
#pageEtape2 .compEtape .etape2 .etapeNom,
#pageEtape3 .compEtape .etape3 .etapeNom,
#pageEtape4 .compEtape .etape4 .etapeNom {
	font-weight: 700;
}

/**
	* Positionnement de la fleche
	*/

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

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

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

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

#pageReservation .compEtape .etape4:after {
	content: "";
	border-top: 1px solid var(--Primary-color);
	border-left: 1px solid var(--Primary-color);
	background: var(--Primary-color);
	border-radius: 50%;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	display: block;
	height: 15px;
	width: 15px;
	bottom: -8px;
	position: absolute;
	left: 53%;
	margin-left: -10px;
}

@media screen and (min-width: 768px) {
	.etapeNom {
		display: none;
	}

	.etapeDesc {
		font-size: 1.1667rem;
	}
}

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

	.compEtape .etapeDesc {
		display: none;
	}
}

/* fin max width 767px*/