body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
  }
  
  header {
    background-color: #333;
    padding: 40px 0;
    position: fixed;
    top: 0;
    width: 100%;
    transition: all 0.3s;
  }
  
  header.shrink {
    padding: 0px 0;
  }
  
  header .container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
  }
  
  header .logo {
    margin-right: 20px;
  }
  
  header .logo img {
    height: 70px;
  }
  
  header h1 {
    margin-right: auto;
    color: #fff;
  }
  
  header nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  
  header nav ul li {
    display: inline;
    margin-right: 20px;
  }
  
  header nav ul li a {
    color: #fff;
    text-decoration: none;
  }

  section {
    padding: 80px 0;
    text-align: center;
    margin-top: 100px; /* Ajoute cette ligne */
  }
  
  .container {
    max-width: 80%;
    margin: 0 auto;
  }

  .titrePartie {
    font-size: 400%;
  }

  .titreHeader {
    font-size: 300%;
    align-items: center;
    display: flex;
  }

a[href="#accueil"],a[href="#a-propos"],a[href="#projets"],a[href="#contact"] {
  color: white;
  transition: color 0.3s ease;
}

a[href="#accueil"]:hover,a[href="#a-propos"]:hover,a[href="#projets"]:hover,a[href="#contact"]:hover {
  color: #e55d42;
}
  
  h1, h2, h3 {
    margin-bottom: 39px;
  }
  
  .project {
    margin-bottom: 40px;
  }
  
  form input,
  form textarea {
    width: 100%;
    margin-bottom: 20px;
    padding: 10px;
  }
  
  form button {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
  }
  
  /* Ajoute des styles et des animations selon tes préférences */
  
/* Ajoute ces styles pour les descriptions */
.description {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
  }
  
  .project.active .description {
    opacity: 1;
  max-height: 500px; /* Ajustez cette valeur selon vos besoins */
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
  }
  

  /*CSS ICONS CONTACTE ME*/
  .social-icons {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center; /* Optionnel : centrer les icônes horizontalement */
  }
  
  .social-icons li {
    display: inline-block;
  }
  
  .social-icon {
    display: inline-block;
    font-size: 60px; /* Ajustez la taille souhaitée */
    /*color: #000;*/
    transition: color 0.3s ease;
    margin: 20px 50px; /* Espacement horizontal entre les icônes */
  }

  .linkedin.social-icon {
    color: rgb(0, 0, 0);
  }

  .instagram.social-icon {
    color: rgb(0, 0, 0);
  }

  .discord.social-icon {
    color: rgb(0, 0, 0);
  }
  
  .social-icon:hover {
    transition: transform 0.3s ease;
    transform: scale(1.2);
  }

  .linkedin:hover.social-icon {
    color: #0e76a8;
  }
  
  .instagram:hover.social-icon {
    color: #C13584 ;
  }

  .discord:hover.social-icon {
    color: #7289da;
  }

  
/*MODE NUIT*/

#mode-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
}

#mode-toggle input[type="checkbox"] {
  display: none;
}

#mode-toggle label {
  display: block;
  width: 40px;
  height: 20px;
  background-color: #888;
  border-radius: 10px;
  position: relative;
  cursor: pointer;
}

#mode-toggle label:after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.3s ease;
}

#mode-toggle input[type="checkbox"]:checked + label {
  background-color: #5b94f0;
}

#mode-toggle input[type="checkbox"]:checked + label:after {
  transform: translateX(20px);
}

/* Styles pour le mode nuit */
.dark-mode {
  background-color: #222;
  color: #fff;
  transition: background-color 0.3s ease;
}

.dark-mode header {
  background-color: #111;
}

.dark-mode header a {
  color: #fff;
}

.dark-mode .social-icon {
  color: #fff;
}

.underline-link {
  position: relative;
}

.underline-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 3px;
  background-color: #e55d42;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.underline-link:hover::after {
  transform: scaleX(1);
}


footer {
  background-color: #333333;
  color: white;
  padding: 2% 0;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  font-size: 150%;
}