/*----- Onglet basique -----*/
ul.onglet, ul.sous-onglet  {
  display: flex;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--couleur-principale-5);
  border-top: 15px solid var(--couleur-blanc);
}

ul.onglet {
  background-color: var(--couleur-secondaire-3);
  padding: 26px 8px 0 8px;
}

ul.sous-onglet {
  background-color: var(--couleur-blanc);
}

.onglet .onglet-item,
.sous-onglet .onglet-item {
  display: inline-flex;
  background-color: var(--couleur-secondaire-4);
  color: #5e5e5e;
  border: 1px solid var(--couleur-secondaire-4);
  margin: 0 3px;
  border-bottom: none;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}

.onglet .onglet-item:first-of-type,
.sous-onglet .onglet-item:first-of-type {
  margin-left: 0;
}

a.onglet:link,
.active.onglet-item span.onglet-link,
.disabled.onglet-item span.onglet-link {
  text-decoration: none;
  display: inline-flex;
  padding: 8px 6px;
}

/* ----- Onglet actif ----- */
.onglet .active.onglet-item,
.sous-onglet .active.onglet-item {
  background-color: var(--couleur-blanc);
  color: var(--couleur-secondaire-9);
  border: 1px solid var(--couleur-principale-5);
  border-bottom: none;
  margin-bottom: -1px;
}

/* ----- Onglets désactivé ----- */
.onglet .onglet-item.disabled {
  color: var(--couleur-blanc);
  cursor: default;
}

.onglet-item.inactif > span > a {
  color: #5e5e5e;
}

/* ----- Onglet détail ----- */
.onglet-item.detail > span.onglet-link > a.onglet::after {
  content: "";
  display: inline-block;
  margin-left: 10px;
  width: 16px;
  background-image: url(../images/onglet/ongletDetail.gif);
  background-repeat: no-repeat;
}

/* ----- Onglets dans menu général ----- */
.menuGeneral .onglet {
  border: 0;
  margin: 0;
  background-color: var(--couleur-haut-principal);
}

.menuGeneral .onglet .onglet-item{
  background-color: var(--couleur-haut-principal);
  border-color: transparent;
}

.menuGeneral .onglet .onglet-item.active{
  background-color: var(--couleur-blanc);
  color: var(--couleur-haut-principal);
 }

.menuGeneral a.onglet:link,
.menuGeneral a.onglet {
  color: var(--couleur-blanc);
}

/* ----- Sous-onglets dans le menu général ----- */
.menuGeneral ul.sous-onglet {
  background-color: var(--couleur-blanc);
  padding: 15px 8px 0 8px;
  border-bottom: 2px solid var(--couleur-haut-principal);
  margin-left: 20px;
}

.menuGeneral ul.sous-onglet .onglet-item,
.menuGeneral ul.sous-onglet .onglet-item .onglet {
  background-color: var(--couleur-blanc);
  margin: 0 0 0 1px;
  border-color: transparent;
  color: var(--couleur-haut-principal);
}

.menuGeneral ul.sous-onglet .onglet-item.active {
  background-color: var(--couleur-haut-principal);
  border-bottom: none;
  margin-bottom: -1px;
}

.menuGeneral .sous-onglet .onglet-item.active .onglet-link {
  color: var(--couleur-blanc);
}