<ul class="nav nav-tabs" id="productInfo" role="tablist">
	<li class="nav-item active">
		<a href="#description" class="nav-link active" data-toggle="tab">DESCRIPTION</a>
	</li>

	<li class="nav-item">
		<a href="#specifications" class="nav-link" data-toggle="tab">CARACTÉRISTIQUES</a>
	</li>

	<li class="nav-item">
		<a href="#maintenance" class="nav-link" data-toggle="tab">ENTRETIEN</a>
	</li>

	<li class="nav-item">
		<a href="#environment" class="nav-link" data-toggle="tab">ENVIRONNEMENT</a>
	</li>
</ul>

<div class="tab-content" id="tabContent">
	<div class="tab-pane fade show active" id="description">
		<p> onglet desc</p>
	</div>

	<div class="tab-pane fade" id="specifications">
		<p>onglet specifications</p>
	</div>

	<div class="tab-pane fade" id="maintenance">
		<p>onglet maintenance</p>
	</div>

	<div class="tab-pane fade" id="environment">
		<p>onglet environment</p>
	</div>
</div>



// JS

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
	$(this).closest('.nav-item').addClass('active');
});
$('a[data-toggle="tab"]').on('hidden.bs.tab', function(e){
	$(this).closest('.nav-item').removeClass('active');
});


// LESS

@orange-dark: #ff9900;
@bordeaux-light: #bf000;

.nav-tabs {
	border: 0;

	.nav-item.show .nav-link,
	.nav-link.active {
	}

	.nav-item {
		position: relative;
		&:not(:first-child) {
			margin-left: 2rem;
			margin-right: 2rem;
		}
		&:after {
			height: 2px;
			position: relative;
			content: '';
			display: block;
			left: 0;
			top: 0px;
			width: 0%;
			.transition(.6, width, ease); // soulignement
		}
		&:hover:after, &.active:after {
			width: 100%;
			background-color: @orange-dark;
		}
		.nav-link {
			border: 0;
			padding: .3rem .8rem;
			border-radius: 0;
			text-transform: uppercase;
			color: @grey-dark !important;
			&.active {
				border: 0;
				//border-bottom: 2px solid @bordeaux-light;
				color: @orange-dark !important;
				background-color: transparent;
			}
		}
	}
}
.tab-content {
	.tab-pane {
		font-size: .9rem;
		padding: 1rem .7rem;
	}
}