/*****************************************************************************************************************************/
/*													 	VARIABLES 															 */
/*****************************************************************************************************************************/
@colorBase: #116699;
@backgroundColor: #DDDDDD;

.numEtape( @color: #FFFFFF ) {
	font-weight: bold;
	color: @color;
	display: inline;
}

.blockAriane( @width: 20% ) {
	display: inline-block;
    float: left;
    margin: 0;
    width: @width;
}

.num-etape-non-active, .num-etape-non-active-4 {
	.numEtape(@colorBase)
}

.num-etape-active, .num-etape-active-4 {
	.numEtape;
}

@listName: -one-2, -one, -one-3, -one-4, -one-5, -one-6;
@listSize: 50%, 33%, 33%, 25%, 20%, 16.6%;

/*****************************************************************************************************************************/
/* 												FIL D'ARIANNE 2, 3, 4, 5 et 6 étapes										 */
/*****************************************************************************************************************************/
.arianeStyle(6);
.arianeStyle(@n, @i: 1) when (@i =< @n) {
	@tmp: extract(@listName, @i);	
 	#breadcrumbs@{tmp} {
		background: @backgroundColor;
		border-width: 1px;
		border-color: #F5F5F5 #E5E5E5 #CCCCCC;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		-moz-box-shadow: 0 0 2px rgba(0,0,0,.2);
		-webkit-box-shadow: 0 0 2px rgba(0,0,0,.2);
		overflow: hidden;
		width: 99.9%;
		padding-bottom: 0px;
		margin-left: 0;
		
		li {
			.blockAriane( extract(@listSize, @i) );
			
			&:first-child span {
				width: 100%;
				padding-left: 0;
				padding-right: 0;
				text-align: center;
				-moz-border-radius: 5px 0 0 5px;
				-webkit-border-radius: 5px 0 0 5px;
				border-radius: 5px 0 0 5px;
			}
		}
		
		span {
			float: left;
			padding: 0.7em 0px 0.7em 0;
			text-decoration: none;
			color: #444;
			position: relative;
			background: @backgroundColor;
			font-size: 12px;
			text-align: center;
			width: 100%;
			
			&:after, &:before {
				content: "";
				position: absolute;
				top: 50%;
				margin-top: -1.5em;
				border-top: 1.6em solid transparent;
				border-bottom: 1.5em solid transparent;
				border-left: 13px solid;
				right: -1em;
			}
			&:after {
				z-index: 2;
				border-left-color: @backgroundColor;
			}
			&:before {
				border-left-color: #A2A2A2;  
				right: -1.1em;
				z-index: 1; 
			}
		}
		
		.active-4, .active {
			float: left;
			text-decoration: none;
			color: white;
			position: relative;
			background: @colorBase;
			
			&:after {
				z-index: 2;
				border-left-color: @colorBase;
			}
		}
		
		.final {
			padding-right: 15px;
			&:after, &:before {
				content: normal;  
			}
		}
	}
	
	.arianeStyle(@n, (@i + 1));
}