td button[data-view=lecon-lexique]{
  color: var(--primaire);
  background-color: var(--primaire-100) !important;
}
td button[data-view=lecon-exercice]{
  color: var(--bs-black);
  background-color: var(--gray-200) !important;
}
td button[data-view=lecon-evaluation]{
  color: var(--danger);
  background-color: var(--danger-100) !important;
}
.video-container{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* flex-direction: column; */
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1rem;
  gap:1rem;
}
.video-title{
  background-color: rgba(255,255,255,.25);
  margin-bottom: 1rem;
  width: 100%;
  min-width: 14rem;
  height: 100%;
  border-radius: .5rem;
  padding: 1rem;
}
.video-title h6{
  font-size: var(--size-14);
  font-family: "AirbnbCerealBook";
  font-style: italic;
  color: var(--gray-500);
}
.video-title h1{
  color: #fff;
  font-size: var(--size-24);
  font-family: "AirbnbCerealMedium";
  margin-top: .25rem;
}
.video-container .video-play-container video{
  width: 100%;
  min-width: 47rem;
  min-width: 53rem;
  max-width: 64rem;
  border-radius: 0.25rem;
}
/*:::::::::::::::::::::::::::: Espace pub ::::::::::::::::::::::::::::*/
.container-pub{
  background-color: var(--primaire);
    color: white;
    border-radius:1rem;
    padding: 1.25rem 1.875rem;
    position: relative;
    overflow: hidden;
}
.container-pub::before {
  content: "";
  position: absolute;
  top: -3.125rem;
  right: -3.125rem;
  background: rgba(255, 255, 255, 0.2);
  width: 12.5rem;
  height: 12.5rem;
  border-radius: 50%;
  z-index: 0;
}
.container-pub::after {
  content: "";
  position: absolute;
  bottom: -3.125rem;
  left: -3.125rem;
  background: rgba(255, 255, 255, 0.1);
  width: 9.375rem;
  height: 9.375rem;
  border-radius: 50%;
  z-index: 0;
}
.container-pub h2,.container-pub h3 {
  font-size: 1.25rem;
  font-family: "AirbnbCerealBook";
  margin: .5rem 0;
}
.container-pub a {
  display: inline-flex;
  align-items: center;
  background-color: #000 !important;
  color: #fff !important;
  border-radius: 5rem !important;
  transition: all 0.3s ease;
  font-family: "AirbnbCerealBook" !important;
  margin-top: 1rem;
  padding:0.5rem 1rem 0.5rem 1.5rem!important;
}

.container-pub a i {
  margin-left: 0.625rem;
  font-size: 1rem;
  transition: transform 0.3s ease;
  background-color: #fff;
  border-radius: 100%;
  width: 1.75rem;
  height: 1.75rem;
  color: #000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.container-pub a:hover {
  background-color: #fff!important;
  /* color: white; */
}

.container-pub a:hover i {
  transform: translateX(5px);
}
/*:::::::::::::::::::::::::::: Side  ::::::::::::::::::::::::::::*/
.recap-container,.lecon-panel-section,.container-dictionnaire-item-{
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.recap-container .recap-container-item{
  color: #000;
  border:1px solid var(--primaire);
  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;
}
.recap-container .recap-container-item-dico{
  border-color:var(--danger);
}
.recap-container .recap-container-item-techniques{
  border-color:var(--primary);
}
.recap-container .recap-container-item em{
  display: block;
  font-family: "AirbnbCerealLight";
  font-size: .85rem;
}
.recap-container .recap-container-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,  .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.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 button{
  margin-left: auto;
  border: 0;
  background-color: transparent;
  color: var(--bs-gray-700);
  font-size: 1.25rem;
  padding: 0;
} */
/*:::::::::::::::::::::::::::: Lecon container ::::::::::::::::::::::::::::*/
.cours-container {
  margin-bottom: 1rem;
}
.cours-container h1 {
  font-size: 1.85rem;
  font-family: 'AirbnbCerealMedium';
  position:relative;
  display: inline-block;
  /* margin-top: 1rem; */
}
.cours-container h1 span {
  width: 2.5rem;
  height: 2.5rem;
  background-color: #677D6A;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2rem;
  position: absolute;
  top: 0.25rem;
  top: 0;
  right: 5rem;
  right: -3rem;
}
.cours-container h1 span.trophy {
  right: 3rem;
  right: -5rem;
  background-color: var(--primaire);
  border: 2px solid #fff;
  width: 2.75rem;
  height: 2.75rem;
  top: -.125rem;
}
.cours-container h1 span i {
  color: #fff;
  font-size: 1.125rem;
}
.cours-container h6 {
  font-size: .95rem;
  font-family: 'AirbnbCerealBook';
  color: var(--gray-900);
}
.akwabasign-decommpte{
    border-radius: 1rem;
    padding: .75rem .75rem;
    margin: 0 auto 1rem;
    color: var(--color-111);
    font-size: .85rem;
    font-family: 'AirbnbCerealMedium';
    background-color: var(--primaire-100);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:center;
    padding: 1rem 0;
    max-width: 36rem;
}
.akwabasign-decommpte h2 {
  font-size: 1.25rem;
  margin-bottom: .5rem;
  color: var(--bs-gray-900);
  font-family: "AirbnbCerealMedium";
}
.akwabasign-decommpte p {
  font-size: .9rem;
  font-family: 'AirbnbCerealBook';
  white-space: nowrap;
  text-align: center;
}
.akwabasign-decommpte em{
  font-size: 1.125rem;
  font-family: 'AirbnbCerealBold';
  color: var(--primaire);
}
.akwabasign-decommpte br{
  display:none;
}
/*:::::::::::::::::::::::::::: Lecon container ::::::::::::::::::::::::::::*/
.container-lecons{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 1rem;
  width: 100%;
}
.container-lecons .lecon-item {
  background-color: rgb(255, 255, 255);
  border-radius: .5rem!important;
  display: flex;
  flex-direction: column;
  padding: 1rem!important;
  position: relative;
}
.container-lecons .lecon-item .lecon-item-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
}
.container-lecons .lecon-item .lecon-item-title .lecon-img {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.container-lecons .lecon-item .lecon-item-title .lecon-img img {
  width: 100%;
}
.container-lecons .lecon-item .lecon-item-title h2 {
  color: var(--gray-900);
  color: #fff;
  text-align: left;
  font-size: 1rem;
  font-family: "AirbnbCerealMedium";
  width: 100%;
}
.container-lecons .lecon-item .lecon-item-title em {
  font-size: 1.5rem;
  font-family: 'AirbnbCerealBold';
  color: #000;
  background-color: #fff;
  border-radius: .5rem;
  width: 2.5rem;
  height: 2.5rem;
  flex-basis: 2.5rem;
  flex-grow: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container-lecons .lecon-item .lecon-capsule-count {
  display: flex;
  align-items: center;
  justify-content: center;
}
.container-lecons .lecon-item .lecon-capsule-count li {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .25rem .5rem;
  border-radius: .25rem;
  font-size: 0.8rem !important;
  text-decoration: none;
  color: rgba(0,0,0,.75);
  color: rgba(255,255,255,.75);
  position: relative;
}
.container-lecons .lecon-item .lecon-capsule-count li:not(:first-child):before{
    content: '';
    position: absolute;
    height: .5rem;
    width: .1rem;
    background-color: var(--bs-gray-800);
    background-color: var(--bs-gray-200);
    left: 0;
}
.container-lecons .lecon-item .lecon-capsule-count li b{
        font-family: 'AirbnbCerealMedium' !important;
        margin-right: .25rem;
        color: #000;
        color: #fff;
}
.container-lecons .lecon-item .overlay-menu-option {
  position: absolute;
  top: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 1rem;
  width: 100%;
  height: 100%;
  transition: .1s;
  background: rgba(0,0,0,.9);
  overflow: hidden;
  padding: 1rem 3rem;
  border-radius: .5rem !important;
}
.container-lecons .lecon-item .overlay-menu-option button{
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "AirbnbCerealBook";
  font-family: "AirbnbCerealMedium";
  font-size: .85rem;
  padding: .5rem !important;
  background: var(--gray-100) !important;
  color: var(--gray-900) !important;
}
.container-lecons .lecon-item .overlay-menu-option button.lecon-menu-close{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent !important;
  position: absolute;
  top: 0; right: 0;
  width: 2rem;
  height: 2rem;
}
.container-lecons .lecon-item .overlay-menu-option button i{
  color: #fff;
  font-size: var(--size-30);
}

.container-lecons .lecon-item.bg-lecon-3 .lecon-item-title h2,
.container-lecons .lecon-item.bg-lecon-3 .lecon-capsule-count li,
.container-lecons .lecon-item.bg-lecon-3 .lecon-capsule-count li b,
.container-lecons .lecon-item.bg-lecon-3 .progress-bar-value-container .progress-bar-value-container-value span ,
.container-lecons .lecon-item.bg-lecon-3 .progress-bar-value-container .progress-bar-value-container-value b{
  color: #000!important;
}


.progress-bar-container {
  width: 100%;
  height: .5rem;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 0.625rem;
  overflow: hidden;
  position: relative;
  margin: .75rem 0;
}
.progress-bar-container .progress-bar {
  height: 100%;
  background-color: #fff;
  transition: width 0.3s ease;
}
.container-lecons .progress-bar-value-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.container-lecons .progress-bar-value-container .progress-bar-value-container-value {
  font-size: .9rem;
}
.progress-bar-value-container .progress-bar-value-container-value span {
  font-size: .9rem;
  color: rgba(255, 255, 255, 0.8);
}
.progress-bar-value-container .progress-bar-value-container-value b {
  color: #fff;
}
.progress-bar[data-percent="0"]  { width:   0%; }
.progress-bar[data-percent="5"]  { width:   5%; }
.progress-bar[data-percent="10"] { width:  10%; }
.progress-bar[data-percent="15"] { width:  15%; }
.progress-bar[data-percent="20"] { width:  20%; }
.progress-bar[data-percent="25"] { width:  25%; }
.progress-bar[data-percent="30"] { width:  30%; }
.progress-bar[data-percent="35"] { width:  35%; }
.progress-bar[data-percent="40"] { width:  40%; }
.progress-bar[data-percent="45"] { width:  45%; }
.progress-bar[data-percent="50"] { width:  50%; }
.progress-bar[data-percent="55"] { width:  55%; }
.progress-bar[data-percent="60"] { width:  60%; }
.progress-bar[data-percent="65"] { width:  65%; }
.progress-bar[data-percent="70"] { width:  70%; }
.progress-bar[data-percent="75"] { width:  75%; }
.progress-bar[data-percent="80"] { width:  80%; }
.progress-bar[data-percent="85"] { width:  85%; }
.progress-bar[data-percent="90"] { width:  90%; }
.progress-bar[data-percent="95"] { width:  95%; }
.progress-bar[data-percent="100"] { width: 100%; }
/* Loading line scale pulse out */
.lecon-grid {
    display: flex;
    align-items: flex-start;
}
.lecon-grid-left,.lecon-grid-right{
  position: relative;
  padding: 0 3rem;
}
.lecon-grid-left{
  width: 45%;
}
.lecon-grid-left h6 {
    align-items: center;
    background-color: var(--secondaire-700);
    border-radius: .3em;
    color: #fff;
    display: inline-flex;
    font-size: var(--size-16);
    font-family: 'AirbnbCerealMedium' ;
    height: 2em;
    justify-content: center;
    line-height: 1;
    padding: 0 .8em .1em;
}
.lecon-grid-left h1 {
    color: #fff;
    font-size: var(--size-28);
    font-family: 'AirbnbCerealLight';
    max-width: 20rem;
    margin: 1rem 0;
}
.lecon-grid-right{
  width: 100%;
}
.lecon-grid-right video{
  width: 100%;
  min-width: 35rem;
  /* max-width: 61.25rem; */
  border-radius: .25rem;
}
/* video[controls] {
    opacity: 1 !important;
} */
.lecon-grid-left ul {
  gap: 1rem;
  display: flex;
  flex-direction: column;
  margin-top: 4rem;
}
.lecon-grid-left ul li button {
    background-color: #fff;
    color: var(--primary);
    color: #000;
    min-width: 5em;
    padding:.2em 1.5em !important;
    align-items: center;
    border-radius:.4rem !important;
    display: inline-flex;
    justify-content: center;
    line-height: 1.1;
    min-height: var(--size-37);
    font-family: 'AirbnbCerealMedium';
    gap: .25rem;
}
.lecon-grid-left ul li button b{
  color: var(--primaire);
}
.video-pagination{
  display: flex;
  align-items: center;
  display: flex;
  gap: .5em;
  justify-content: start;
  margin-top: 5rem;
}
.video-pagination  button {
  font-size: .95rem;
}
.video-pagination  button i{
  color:#fff;
}
.videos-list{
  display: flex;
  gap: .5rem;
  overflow: hidden;
  margin-top: 2rem;
}
.videos-list button {
  background-color: transparent !important;
  padding-left: 0 !important;
  opacity: .6;
  min-width: 2em;
  position: relative;
}
.videos-list button.current {
  opacity: 1;
}
.videos-list button:after {
    background-color: currentColor;
    content: "";
    display: block;
    height: 2px;
    left: 0;
    opacity: .5;
    position: absolute;
    right: 0;
    bottom:0;
    transition: opacity .65s 
  cubic-bezier(.215, .61, .355, 1);
}
/* Loading line scale pulse out */
.line-scale-pulse-out > div {
      background-color: var(--bs-black);
      width: 0.125rem;
      height: 2.1875rem;
      border-radius: 0.125rem;
      margin: 0.125rem;
      -webkit-animation-fill-mode: both;
              animation-fill-mode: both;
      display: inline-block;
      -webkit-animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
              animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85); 
}
.line-scale-pulse-out > div:nth-child(2), .line-scale-pulse-out > div:nth-child(4) {
  -webkit-animation-delay: -0.4s !important;
          animation-delay: -0.4s !important; 
}
.line-scale-pulse-out > div:nth-child(1), .line-scale-pulse-out > div:nth-child(5) {
    -webkit-animation-delay: -0.2s !important;
            animation-delay: -0.2s !important; 
}
@-webkit-keyframes line-scale-pulse-out {
  0% {-webkit-transform: scaley(1);transform: scaley(1); }
  50% {-webkit-transform: scaley(0.4);transform: scaley(0.4); }
  100% {-webkit-transform: scaley(1);transform: scaley(1); } 
}  
@keyframes line-scale-pulse-out {
    0% {-webkit-transform: scaley(1); transform: scaley(1);}
    50% {-webkit-transform: scaley(0.4); transform: scaley(0.4);}
    100% {-webkit-transform: scaley(1); transform: scaley(1);} 
}