ul.etapes {
  list-style: none;
  margin: 0 0 15px 0;
  padding: 0;
  text-align: left;
  display: table;
  height: 3rem; }

ul.etapes li {
  line-height: 1em;
  margin: 0;
  color: #fff;
  padding: 0 25px 0 70px;
  position: relative;
  display: table-cell;
  vertical-align: middle;
  width: 10%;
  background-color: #666;
  background-image: url(../img/navigation-etape-default.svg);
  background-position: left center;
  background-repeat: no-repeat; }
  ul.etapes li.active {
    background-image: url(../img/navigation-etape-active.svg); }
  ul.etapes li.select {
    background-image: url(../img/navigation-etape-select.svg); }
  ul.etapes li a {
    display: block;
    color: #fff; }
    ul.etapes li a:hover {
      text-decoration: none; }

ul.etapes li:first-child {
  padding-left: 70px; }

ul.etapes span:before {
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  border-color: transparent;
  border-left-color: #666;
  border-radius: 0px;
  top: 0; }

ul.etapes li:after {
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  top: 0;
  right: -3rem;
  z-index: 5;
  border: solid transparent;
  border-color: transparent;
  border-width: 1.5rem;
  border-left-color: #666;
  border-radius: 0px; }

ul.etapes li:last-child:after {
  display: none; }

ul.etapes li {
  background-color: #666; }
  ul.etapes li a {
    color: #fff; }
  ul.etapes li:after {
    border-left-color: #666; }

ul.etapes li.select {
  background-color: #0062ac; }
  ul.etapes li.select a {
    color: #fff; }
  ul.etapes li.select:after {
    border-left-color: #0062ac; }

ul.etapes li.active {
  background-color: #B7CBD6; }
  ul.etapes li.active a {
    color: #000; }
  ul.etapes li.active:after {
    border-left-color: #B7CBD6; }
  ul.etapes li.active:hover, ul.etapes li.active:focus {
    background-color: #e4bebd;
    background-image: url(../img/navigation-etape-hover.svg); }
    ul.etapes li.active:hover:after, ul.etapes li.active:focus:after {
      border-left-color: #e4bebd; }