.nav__theme {
    position: relative;
    width: 60px;
    height: 30px;
    background-color: #678cd1;
    border-radius: 30px;
    cursor: pointer;
    padding: 0;
    border: 2px solid transparent;
    overflow: hidden;
    transition: 0.3s ease all;
    border: 1px solid rgb(138, 136, 136);
  }
  
  .nav__theme::before {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: 0.3s ease all;
    background-color: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  }
  
  .nav__theme::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #87CEEB;
    z-index: -1;
    transition: 0.3s ease all;
  }
  
  .theme-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  }
  
  .sun-icon {
    position: absolute;
    top: 50%;
    right: 60%; 
    transform: translateY(-50%) scale(0); 
    font-size: 1.2rem;
    color: #ffd43b;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  
  
  .moon-icon {
    position: absolute;
    top: 50%;
    left: 30%; 
    transform: translateY(-50%) scale(0); 
    font-size: 1.2rem;
    color: #ffffff;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  
  
  body.light-theme .sun-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  
  body.dark-mode .moon-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  
  .dark-mode .nav__theme {
    background-color: #1a1a1a;
  }
  
  .dark-mode .nav__theme::before {
    left: calc(100% - 26px);
    background-color: #ffffff;
  }
  
  .dark-mode .nav__theme::after {
    background: #2c3e50;
  }
  
  @keyframes rotating {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
/*Adaptation du thème*/
  
.light-theme .timeline-content {
    background-color: var(--container-color);
    border-color: var(--first-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  
.light-theme .timeline-content h3,
.light-theme .timeline-content p{
    color: black;
  }
  
.light-theme .timeline-dot {
    box-shadow: 0 0 15px var(--first-color);
  }
  
.light-theme .services__card{
    border: 1px solid var(--first-color);
  }

.light-theme .nav__list {
    background-color: hsl(var(--hue), 100%, 75%);
  }

  @media screen and (max-width:1023px) {
    .light-theme .nav__list {
      background-color: white;
    }
  
    .light-theme .nav__item a {
      background-color: white;
      color: black;
    }
  
    .light-theme .nav__link{
      color: black;
    }
  }

  .light-theme .nav__link,
  .light-theme .nav__logo{
    color: white;
  }

  .light-theme .nav__logo span{
    color: hsl(228, 15%, 20%);
  }
  
  .light-theme .header,
  .light-theme .blur-header::after{
    background-color: hsl(var(--hue), 100%, 75%);
  }
  
.light-theme .home__social-link {
    background-color: var(--first-color);
  }
  
.light-theme .button:hover {
    box-shadow: 0 8px 24px hsla(var(--hue), 100%, 40%, 0.25);
  }

.light-theme .genealogie{
    background-color: white;
    border: 1px solid var(--first-color)
  }

.light-theme .mission{
    background-color: white;
  }

.light-theme .mission::after {
    background: linear-gradient(to top, rgb(255, 255, 255), rgba(11, 50, 224, 0)); /* Dégradé de la couleur de fond à transparent */

  }

.light-theme .toggle-btn {
    background-color: white;
}

.light-theme .section-ent{
    background-color: white;
  }

  .light-theme .content-section p,
  .light-theme .content-section h1,
  .light-theme .content-section h2,
  .light-theme .subtitle-project-details,
  .light-theme .no-link{
    color: black;
  }

  .light-theme .projects__card{
    border: 2px solid var(--first-color);
  }

  .light-theme .filter-button{
    color: black;
    border: 1px solid var(--first-color);
  }

  .light-theme .veille__description{
    background-color: white;
    border: 1px solid var(--first-color);
  }

  .light-theme .filter-controls{
    border: 1px solid var(--first-color);
  }

.light-theme .block_infos{
    background-color: white;
    border: 1px solid var(--first-color);
}

.light-theme .title-project{
  color: black;
  font-weight: 700;
}

.light-theme .context-project{
  border-color: black;
}

.light-theme .title-section-project{
  color: black;
}

.light-theme .list-etapes,
.light-theme .list-etapes span,
.light-theme .result-number,
.light-theme .result-label,
.light-theme .tool-content span,
.light-theme .performance-section h2,
.light-theme .subtitle-infos,
.light-theme .subtitle-infos i,
.light-theme .data-statistics i,
.light-theme .performance-section .statistics .data-statistics,
.light-theme .tool-header i,
.light-theme .tool-header h3,
.light-theme .card-realisation h3,
.light-theme .title-devperso{
  color: black;
}

.light-theme .list-etapes{
  border-color: black;
}

.light-theme .social-media-details .nav__list{
  background-color: white;
}

.light-theme .social-media-details{
  border-color: black;
}

.light-theme .tool-card{
  box-shadow: 0 4px 20px #b9b9b9;
}

.light-theme .section-bilan,
.light-theme .skills-title,
.light-theme .project-title,
.light-theme .conclusion h2{
  color: black;
}

.project-detail-item {
  border-color: black;
}

.light-theme .step-card h3,
.light-theme .step-card p{
  color: black;
}