.arrow-container {
    display: flex;
    align-items: center;
    width: 95%;
    margin-right: auto;
  }

  .arrow-segment {
    height: 50px;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease-in-out;
  }

  .realiser { background-color: #ccc; }
  .realiser:hover { background-color: #666; }

  .optimiser { background-color: #f90; }
  .optimiser:hover { background-color: #c60; }

  .administrer { background-color: #8D4; }
  .administrer:hover { background-color: #6A3; }

  .gerer { background-color: #39F; }
  .gerer:hover { background-color: #27C; }

  .conduire { background-color: rgb(165, 165, 230); }
  .conduire:hover { background-color: rgb(131, 131, 176); }

  .collaborer { background-color: #0CF; flex-grow: 2; position: relative; }
  .collaborer:hover { background-color: #09A; }

  .collaborer::after {
    content: '';
    position: absolute;
    right: -25px;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 25px solid #0CF;
    transition: border-left-color 0.3s ease-in-out;
  }
  .collaborer:hover::after {
    border-left-color: #09A;
  }

  .arrow-tail {
    width: 20px;
    height: 50px;
    background-color: #ccc;
  }