.style1 {
}
.style2 {
    max-height: 150px
}
.style3 {
    float: left
}
.style4 {
}
.style5 {
    padding-top: 3px;
    padding-bottom: 3px
}
.wappler-temp {
}
.wappler-temp {
}
.wappler-temp {
}
.wappler-temp {
}
.wappler-temp {
}
.wappler-temp {
}
.style6 {
    max-width: 100px;
    max-height: 100px
}
.style7 {
    background-repeat: no-repeat;
    background-attachment: local;
    background-size: cover
}
a{
    text-decoration: none;
}
.btn:hover{
    color: white;
}
/* Par défaut : LTR */
body {
    direction: ltr;
    text-align: left;
}

/* Quand arabe détecté */
body.rtl,
#main_wrapper.rtl {
    direction: rtl;
    text-align: right;
}

/* Exemple : inverser marges Bootstrap */
body.rtl .me-3 {
    margin-left: 1rem !important;
    margin-right: 0 !important;
}
body.rtl .ms-3 {
    margin-right: 1rem !important;
    margin-left: 0 !important;
}
@media (max-width: 767.98px) {
  .responsive-sidebar {
    height: auto !important;
  }
}
.style8 {
    text-align: center
}
.style9 {
    text-align: justify
}
.style10 {
}
.wappler-temp {
}
.wappler-temp {
}
.wappler-temp {
}
.wappler-temp {
}
.wappler-temp {
}
.wappler-temp {
}
.wappler-temp {
}
.wappler-temp {
}
.wappler-temp {
}
.wappler-temp {
}
.wappler-temp {
}
.wappler-temp {
}
.wappler-temp {
}
.wappler-temp {
}
.style11 {
    background-image: url("../assets/images/backgound_cybersadiver.png");
    background-size: contain;
    background-attachment: fixed
}
.style12 {
    background-size: contain;
    background-attachment: fixed;
    background-image: url("../assets/images/backgound_cybersadiver.png")
}
@media (min-width: 768px) {
  .scroll-sync {
    height: calc(100vh - 70px);
    overflow-y: auto;
  }
}
.wappler-temp {
}
.style13 {
    margin-top: 10px
}
.style14 {
    background-size: contain
}
.style15 {
}
.style16 {
    margin-left: .5rem
}
.style17 {
    margin-left: .5rem
}
.style18 {
    margin-left: .5rem
}
.style19 {
    margin-left: .5rem
}
.style20 {
    margin-left: .5rem
}
.style21 {
    margin-left: .5rem
}
.style22 {
    margin-right: .5rem
}
.style23 {
    margin-right: .5rem
}
.style24 {
    margin-left: .5rem;
    margin-right: .5rem
}
.style25 {
    margin-left: .5rem
}

/* Wrapper autour de la vidéo (contient aussi le watermark et le bouton FS) */
.video-wrapper { position: relative; }

/* Watermark : lisible, discret, résistant aux fonds variables */
.wm{
  position:absolute;
  top:10%;
  left:5%;
  font-size:clamp(12px,1.6vw,18px);
  font-weight:700;
  line-height:1.2;
  color:rgba(255,255,255,.85);
  text-shadow:0 1px 2px rgba(0,0,0,.55),0 0 12px rgba(0,0,0,.35);
  mix-blend-mode:lighten;
  opacity:.75;
  -webkit-user-select:none;
     -moz-user-select:none;
      -ms-user-select:none;
          user-select:none;
  pointer-events:none;
  padding:.25rem .5rem;
  border-radius:.5rem;
  -webkit-backdrop-filter:blur(1px) saturate(110%);
          backdrop-filter:blur(1px) saturate(110%);
  -webkit-transform:translateZ(0);
          transform:translateZ(0);
  will-change:transform,top,left;
}

/* Micro-animation pour éviter un crop statique parfait */
@-webkit-keyframes wm-breathe{
  0%{-webkit-transform:translateY(0) rotate(0deg);transform:translateY(0) rotate(0deg)}
  50%{-webkit-transform:translateY(-2px) rotate(-0.5deg);transform:translateY(-2px) rotate(-0.5deg)}
  100%{-webkit-transform:translateY(0) rotate(0deg);transform:translateY(0) rotate(0deg)}
}
@keyframes wm-breathe{
  0%{-webkit-transform:translateY(0) rotate(0deg);transform:translateY(0) rotate(0deg)}
  50%{-webkit-transform:translateY(-2px) rotate(-0.5deg);transform:translateY(-2px) rotate(-0.5deg)}
  100%{-webkit-transform:translateY(0) rotate(0deg);transform:translateY(0) rotate(0deg)}
}
.wm{ -webkit-animation: wm-breathe 4s ease-in-out infinite; animation: wm-breathe 4s ease-in-out infinite; }

.no-pointer{ pointer-events:none; }

/* Plein écran contrôlé (si Fullscreen API indispo → pseudo plein écran) */
.video-wrapper.pseudo-fs {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 999999 !important;
  background: #000;
  border-radius: 0 !important;
}
.video-wrapper.pseudo-fs > video {
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: contain;
     object-fit: contain;
}
.video-wrapper.pseudo-fs #wm { z-index: 2; }
/* 1) Cacher le bouton plein écran natif (Chromium / Safari) */
#video_hls::-webkit-media-controls-fullscreen-button {
  display: none !important;
}

/* 2) Empêcher qu'un overlay interfère avec les clics video */
#wm { pointer-events: none; }       /* déjà le cas, je le rappelle ici */
#btn_fs { pointer-events: auto; z-index: 5; } /* bouton au-dessus, cliquable */
.video-wrapper { position: relative; }
.style26 {
    float: right
}
.style27 {
}
/* Conteneur de la liste */
.modules-list {
  /* optionnel : léger fond pour détacher du reste */
  /* background-color: #f8f9fa; */
}

/* Chaque lien de module */
.modules-list .module-link {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

/* Séparation nette entre les modules */
.modules-list .nav-item:not(:last-child) .module-link {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

/* État actif : on laisse Bootstrap gérer la couleur, on renforce juste un peu le contour */
.modules-list .module-link.active {
  border-color: #212529;
}

/* Titre : un peu plus propre et compact */
.modules-list .module-title {
  font-size: 0.95rem;
  line-height: 1.35;
}

/* (Optionnel) léger effet hover pour le confort visuel */
.modules-list .module-link:hover {
  background-color: #cfcfcf;
}
.course-index {
    position: absolute;
    top: -12px;
    left: -12px;
    background: #1298b1;
    color: white;
    font-weight: 600;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    border: 3px solid #fff;
}
.module-list {
    border-left: 3px solid #1298b1;
    padding-left: 1rem;
    margin-bottom: 1rem;
}

.module-item {
    padding: 0.6rem 0;
    border-bottom: 1px solid #eaeaea;
}

.module-item:last-child {
    border-bottom: none;
}

.module-name {
    font-size: 0.95rem;
    line-height: 1.3;
}
.course-card {
    border-left: 4px solid #1298b1;
    transition: transform .1s ease, box-shadow .2s ease;
}

.course-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* --- Header du cours --- */
.course-header .course-img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    flex-shrink: 0;
}

.course-header .difficulty-icon {
    height: 22px;
    margin-left: 6px;
}


/* --- Ajustement global card --- */
.course-card .card-body {
    padding: 1.5rem 1.5rem 1.5rem 1.8rem;
}

.course-card .card-title {
    font-size: 1.15rem;
    font-weight: 600;
}

 .star-wrap{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    cursor: pointer;
  }

  .star-base,
  .star-full{
    font-size: 1.4rem;
    line-height: 1;
  }

  .star-base{
    color: #6c757d; /* gris */
  }

  .star-full{
    color: #ffc107; /* jaune */
  }

  /* demi-étoile */
  .star-half{
    position:absolute;
    top:0;
    left:0;
    width:50%;
    height:100%;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  /* zones cliquables */
  .hit{
    position:absolute;
    top:0;
    bottom:0;
    width:50%;
    z-index:5;
  }

  .hit.left{ left:0; }
  .hit.right{ right:0; }

.star-wrap i{
  transition: color 0.15s ease;
}


/* === Activity grid === */
.activity-grid-35{
  display: grid;
  grid-template-columns: repeat(auto-fill, 14px);
  grid-auto-rows: 14px;
  gap: 1px;
  padding: 6px;
  width: 100%;
  background: #e9edf3;
  border-radius: 12px;
  border: 1px solid #eef0f4;
}

/* === Cellules === */
.activity-cell{
  width: 14px;
  height: 14px;
  border-radius: 2px;
  background: #e0e3e8 !important;   /* valeur par défaut */
}

/* === Couleurs FORCEES === */
.activity-cell.lvl-1{
  background: rgba(25,135,84,.25) !important;
}
.activity-cell.lvl-2{
  background: rgba(25,135,84,.55) !important;
}
.activity-cell.lvl-3{
  background: rgba(25,135,84,.85) !important;
}