.side-container-menu,.lecon-panel-section,.container-dictionnaire-item{
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.side-container-menu{
  position: sticky;
  top: 0;
  padding: 1rem 0;
  z-index: 1;
}
.lecon-panel-section,.container-dictionnaire-item{
  padding: 1rem 0;
}
.side-container-menu .menu-navbar,  .lecon-panel-section a,.dico-item{
  color: #000;border: 0;
  padding: .75rem 1rem;
  border-radius: .5rem;
  font-size: .95rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
  background-color: #fff;
  font-family: "AirbnbCerealMedium";
  overflow: hidden;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.side-container-menu .menu-navbar.lecon.active,.side-container-menu .menu-navbar.lecon:hover{
  border:1px solid var(--primaire);
}
.dico-item.active,.dico-item:active,.dico-item:focus,.dico-item:hover{
  background-color: var(--primaire-300) !important;
  font-family: "AirbnbCerealMedium"!important;
}
.side-container-menu .menu-navbar.dico.active,.side-container-menu .menu-navbar.dico:hover{
  border:1px solid var(--bs-danger);
}
.side-container-menu .menu-navbar.technique.active,.side-container-menu .menu-navbar.technique:hover{
  border:1px solid var(--bs-primary);
}
.lecon-panel-section a.exercice.active,.lecon-panel-section a.exercice:hover{
  border:2px solid var(--bs-danger);
}
.side-container-menu .menu-navbar i,  .lecon-panel-section a i,.dico-item i{
  width: 3rem;
  height: 3rem;
  border-radius: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex: 0 0 auto;
}
.side-container-menu .menu-navbar em,  .lecon-panel-section a em{
  display: block;
  font-family: "AirbnbCerealLight";
  font-size: .85rem;
}
.side-container-menu .menu-navbar button{
  margin-left: auto;
  border: 0;
  background-color: transparent;
  color: var(--bs-gray-700);
  font-size: 1.25rem;
  padding: 0;
}
.side-container-menu .menu-navbar .dico-progress-container{
  border-radius: 0.625rem;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
}
.side-container-menu .menu-navbar .progress{
  background-color: rgba(0, 0, 0, 0.5);
  border-radius:0;
  overflow: hidden;
  height: 100%;
  flex-grow: 1;
}
.side-container-menu .menu-navbar .progress-bar{
  font-size: 1rem;
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--bs-dark);
}
.side-container-menu .menu-navbar .progress-bar em{
  width: 2rem;
  height: 2rem;
  border-radius: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: #000;
  color: #fff;
  margin: 0 auto;
}
.side-container-menu .menu-navbar .progress-bar[data-percent="0"] { width: 0%; }
.side-container-menu .menu-navbar .progress-bar[data-percent="1"] { width: 6.7%; }
.side-container-menu .menu-navbar .progress-bar[data-percent="2"] { width: 13.3%; }
.side-container-menu .menu-navbar .progress-bar[data-percent="3"] { width: 20% }
.side-container-menu .menu-navbar .progress-bar[data-percent="4"] { width: 26.7%; }
.side-container-menu .menu-navbar .progress-bar[data-percent="5"] { width: 33.3%; }
.side-container-menu .menu-navbar .progress-bar[data-percent="6"] { width: 40% }
.side-container-menu .menu-navbar .progress-bar[data-percent="7"] { width: 46.7%; }
.side-container-menu .menu-navbar .progress-bar[data-percent="8"] { width: 53.3%; }
.side-container-menu .menu-navbar .progress-bar[data-percent="9"] { width: 60% }
.side-container-menu .menu-navbar .progress-bar[data-percent="10"] { width: 66.7%; }
.side-container-menu .menu-navbar .progress-bar[data-percent="11"] { width: 73.3%; }
.side-container-menu .menu-navbar .progress-bar[data-percent="12"] { width: 80% }
.side-container-menu .menu-navbar .progress-bar[data-percent="13"] { width: 86.7%; }
.side-container-menu .menu-navbar .progress-bar[data-percent="14"] { width: 93.3%; }
.side-container-menu .menu-navbar .progress-bar[data-percent="15"] { width: 100%; }
.side-container{
  max-width: 21rem;
  width: 24%;
  background-color: #fff;
  border-radius: 1rem;
  padding: 1rem;
  margin: 1rem 2rem 1rem 1rem;
  margin: 1rem 0;
  height: 100%;
  position: sticky;
  top: 1rem;
}
.side-container h2{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "AirbnbCerealMedium";
  font-size: 1rem;
}
.side-container h2 i{
  font-size: 1.5rem;
}
.side-container .progress-section {
  text-align: center;
  margin-top: 3rem;
  position: relative;
}
.side-container .progress-section .circle-progress{
  height: 8.125rem;
  width:  8.125rem;
}
.side-container .progress-section .circle-progress circle {
  stroke-width: .125rem;
  stroke: var(--bs-gray-200);
}
.side-container .progress-section .circle-progress path {
  stroke-width: .125rem;
  stroke: var(--primaire);
  stroke-linecap: round;
}
.side-container .progress-section .progress-percent{
  position: absolute;
  background-color: var(--primaire);
  color: #fff;
  border-radius: .75rem;
  font-size: .8rem;
  padding: .125rem .5rem;
  left: 58%;
  top: 0;
}
.side-container .avatar {
  width: 6.25rem;
  height: 6.25rem;
  border-radius: 6.25rem;
  border: 2px solid #f2f2f2;
  background-color:#f2f2f2;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.side-container .progress-section h2 {
  margin: 0.625rem 0 0.3125rem;
  font-size: .9rem !important;
  color: #000 !important;
  text-align: center;
  justify-content: center;
  font-family: "AirbnbCerealMedium";
}
.side-container .progress-section p {
  font-size: .9rem;
  color: var(--bs-gray-700);
  line-height: 1;
  font-family: "AirbnbCerealLight";
}

.side-container .chart-section {
  margin: 1.25rem 0;
  padding: 0.625rem;
  background: var(--bs-gray-200);
  border-radius: 0.625rem;
}


/* Mentor Section */
.mentor-section h3 {
  font-size: 16px;
  margin-bottom: 10px;
  color: #333;
}

.mentor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
  padding: 10px;
  background: #f2f2f2;
  border-radius: 10px;
}

.mentor img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.mentor h4 {
  font-size: 14px;
  margin: 0;
  color: #333;
}

.mentor p {
  font-size: 12px;
  color: #777;
}

.follow-btn {
  padding: 5px 10px;
  background: #6200ee;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
}