html,body {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}



.h2 {
    font-family: "Signika", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
      "GRAD" 0;
  }

  .cdn {
    font-family: "Signika", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:
      "GRAD" 0;
  }


  h1 {
    font-family: "Titillium Web", sans-serif;
    font-weight: 600;
    font-style: normal;
  }

.likn{
  font-family: "Titillium Web", sans-serif;
  font-weight: 600;
  font-style: normal;
}

  .bg-image  {
    background-image: url("../images/bg.jpg");
    background-size: cover;
    object-fit: cover;
  }


  .login-image  {
    background-image: url("../images/bg2.jpg");
  }



  .arrow {
    position: relative;


  }


  .arrow::before{
    content: '';
  
    position: absolute;
    bottom: 34px;
    left: 5%;
    /* background: #772D80; */
    height: 12px;
    width: 12px;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 12px solid #772D80;

  }


  .active-link {
   background: white;
   text-decoration: none;
   box-shadow: 1px 1px 1px rgba(112, 112, 51, 0.068);
  color:#58abaf;
}


.dark .active-link {
  background:#2E265E; /* gris foncé typique du dark mode */
  color: #60f6ff; /* bleu clair ou cyan qui ressort bien sur fond foncé */
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.12);

}


.dark .dark-shadow{
 
  box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.12); /* Ombre blanche douce */
 
}





.bg-register {
  background-image: url("../images/register.jpg");

}

.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #8f59b7;
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #7a4a9e;
}


  
* {
  font-family: 'Inter', sans-serif;
}

.gradient-bg {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.accent-color {
  color: #58abaf;
}

.accent-bg {
  background-color: #58abaf;
}

.accent-border {
  border-color: #58abaf;
}

.hover-lift {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(88, 171, 175, 0.15);
}

.fade-in {
  animation: fadeIn 0.8s ease-out forwards;
  opacity: 0;
}

.slide-up {
  animation: slideUp 0.6s ease-out forwards;
  opacity: 0;
  transform: translateY(20px);
}

@keyframes fadeIn {
  to { opacity: 1; }
}

@keyframes slideUp {
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }

.text-content {
  line-height: 1.8;
}

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #58abaf, #3d8b8f);
  z-index: 1000;
  transition: width 0.1s ease;
}

.floating-share {
  position: fixed;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}

@media (max-width: 768px) {
  .floating-share {
      position: static;
      transform: none;
      right: auto;
      top: auto;
  }
}

.quote-style {
  border-left: 4px solid #58abaf;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}

.tag-pill {
  background: linear-gradient(135deg, #58abaf, #3d8b8f);
}