.nav{
  background-color: var(--bg);
  padding: 5px;
}
.nav-group {
    display: flex;
    gap:4px;
}
.nav-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius :10px 10px 0 0;
    background-color: #cccccc;
    color: var(--gris);
    cursor: default;
    transition: 0.2s;
    cursor: pointer;
}
.nav-item.active{
    background-color:var(--nav-color, #c6c6c6);
    color: #fff;   
    
}
.nav-item.active i{
    color: #fff;        
}
.nav-item::before,
.nav-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 20px;
  height: 20px;
  background: white; /* couleur du fond derrière */
  border-radius: 50%;
  z-index: 1;
}
.nav-item::before {
  left: -10px;
}

.nav-item::after {
  right: -10px;
}

/* Masque de correction (pour que la couleur du fond reste propre) */
.nav-item span,
.nav-item i {
  position: relative;
  z-index: 2;
}