.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 5rem;
  padding: 2rem 1rem;
  background-color: #f8f9fa;
  z-index: 1050;
  transition: width 0.3s ease-in-out;
  box-shadow: 4px 0 8px rgba(0, 0, 0, 0.1); /* Ombre à droite */
}


/* when the user hovers on the sidebar, expand it */
.sidebar:hover {
  width: 200px !important;
  box-shadow: 6px 0 12px rgba(0, 0, 0, 0.2); /* Ombre plus prononcée au survol */
}

/* make sure the contents of the navlink don't wrap when navbar collapses */
.sidebar .nav-link {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

/* fix the width of the icons */
.sidebar .nav-link i {
  width: 1rem;
}

/* hide the navlink labels by default */
.sidebar .nav-link span {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.1s ease-in-out;
}

/* when the sidebar is hovered, reveal the labels */
.sidebar:hover .nav-link span {
  visibility: visible;
  opacity: 1;
}

/* container for the sidebar header. make sure the contents don't wrap when
 * the sidebar is collapsed.
 */
.sidebar-header {
  display: flex !important;
  justify-content: left !important;
  align-items: center !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  transition: transform 0.2s ease-in-out;
  cursor: pointer !important; /* Indique qu'il est cliquable */
}

.sidebar-header img:last-child:hover {
  margin-left: auto !important;
  margin-right: auto !important;
  transform: scale(1.1) !important;
}

/* position the header relative to the logo and hide by default */
.sidebar-header h4 {
  opacity: 0 !important;
  margin-left: 1rem !important;
  margin-right: 1rem !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  font-size: 18px !important;
  /* transition: opacity 0.1s ease-in-out !important; */
}

.nav-link.active{
  background-color: var(--ffbad-blue, #101F69) !important;
  color: var(--ffbad-white) !important;
  box-shadow: 0 2px 4px 0 rgba(32, 121, 255, 0.308) !important;
}

.nav-link.active span {
    color: var(--ffbad-white) !important;
}

.nav-link.disabled{
  color: var(--ffbad-red) !important;
  text-decoration: line-through;
}

.nav-link.disabled span {
  color: var(--ffbad-red) !important;
}

.nav-link:hover {
  color:  var(--ffbad-blue, #101F69) !important;
  transform: scale(1.03);
  text-shadow: 0 0 0 rgba(0,0,0,0);
}

.nav-link.active:hover {
    color: var(--ffbad-white) !important;
}

.nav-link.active:hover span {
    color: var(--ffbad-white) !important;
}

.fs-sm{
  font-size: 0.7rem !important;
}

.nav .nav-item,
.nav .nav-link,
.tab-pane,
.tab-pane .card-body {
  outline: none !important;
}

.nav-tabs .nav-item .nav-link {
  color: #566a7f;
  border: 0;
  border-radius: 0;
}
.nav-tabs .nav-item .nav-link:hover, .nav-tabs .nav-item .nav-link:focus {
  color: #566a7f;
}
.nav-tabs .nav-item .nav-link:not(.active) {
  background-color: #eceef1;
}
.nav-tabs .nav-item .nav-link.disabled {
  color: #c7cdd4;
}

.nav-tabs:not(.nav-fill):not(.nav-justified) .nav-link,
.nav-pills:not(.nav-fill):not(.nav-justified) .nav-link {
  width: 100% !important;
}

.nav-pills .nav-link:not(.active, .disabled) {
  color: #566a7f;
}

/* Applique des transitions fluides à toutes les images */
.sidebar-header img {
  position: absolute !important; /* Superpose les images */
  top: 0;
  left: 0;
  width: auto;
  height: auto; /* Ajuste en fonction du contenu */
}

/* Par défaut : première image visible, deuxième image masquée */
.sidebar-header img:first-child {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
  left:1rem;
  top:2rem;
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0.2s ease-in-out !important;
}

.sidebar-header img:last-child {
  opacity: 0;
  transform: scale(0);
  visibility: hidden;
  left:1rem;
  top:1rem ;
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0.2s ease-in-out !important;
}

/* Survol : la première image réduit son opacité et sa taille */
.sidebar:hover .sidebar-header img:first-child {
  opacity: 0;
  transform: scale(0);
  visibility: hidden;
}

/* Survol : la deuxième image apparaît progressivement et grandit */
.sidebar:hover .sidebar-header img:last-child {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
  left: 50% !important;
  translate: -50% 0;   /* offset by half its own width to truly center */
}

.sidebar hr {
  margin-top: 42px !important; /* Marges par défaut */
  margin-bottom: 2rem !important;
  transition: margin-top 0.2s ease-in-out, margin-bottom 0.2s ease-in-out !important; /* Transition fluide */
}

/* Survol de la sidebar : ajuster les marges */
.sidebar:hover hr {
  margin-top: 60px !important; /* Augmente la marge supérieure */
  margin-bottom: 2rem !important; /* Augmente la marge inférieure */
}

.sidebar-caa {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 5rem;
  padding: 2rem 1rem;
  background-color: #f8f9fa;
  z-index: 1050;
  transition: width 0.3s ease-in-out;
}


/* when the user hovers on the sidebar, expand it */
.sidebar-caa:hover {
  width: 300px !important;
}

/* make sure the contents of the navlink don't wrap when navbar collapses */
.sidebar-caa .nav-link {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

/* fix the width of the icons */
.sidebar-caa .nav-link i {
  width: 1rem;
}

/* hide the navlink labels by default */
.sidebar-caa .nav-link span {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.1s ease-in-out;
}

/* when the sidebar is hovered, reveal the labels */
.sidebar-caa:hover .nav-link span {
  visibility: visible;
  opacity: 1;
}


/* reveal the header when the sidebar is toggled */
.sidebar-caa:hover .sidebar-header h4 {
  opacity: 1 !important;
}