@media (min-width: 769px) {
  .projets {
      width: 80%;
      display: flex;
      /*flex-direction: column;*/
      flex-wrap:wrap;
      gap: 5%;
      padding-bottom: 2vh;
      justify-content: center;
  }
  
  .stage-list {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.8vw;
    background-color: #f0f0f0;
    border-radius: 10px;
    width: 40%;
  }

  /* Élément individuel du projet de stage */
  .stage-item {
      background-color: #fff;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      text-align: center;
  }

  .stage-image {
    height: 170px; /* Ajuste cette valeur selon tes préférences */
    overflow: hidden;
}


   /* Section de l'image */
  .stage-image img {
      width: 100%;
      max-width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
  }

  /* Effet de zoom au survol */
  .stage-image:hover img {
      transform: scale(1.05);
  }

  /* Contenu du texte */
  .stage-content {
      margin-bottom: 1vw;
  }

  /* Titre */
  .stage-content h3 {
      margin: 0;
      font-size: 1vw;
      color: #333;
      margin-top: 1vh;
  }

  /* Bouton */
  .stage-button {
      display: inline-block;
      text-decoration: none;
      background-color: #0179f9;
      color: white;
      padding: 12px 25px;
      border-radius: 5px;
      transition: background-color 0.3s ease;
      font-size: 1vw;
      margin-top: 1vh;
  }

  /* Effet de survol du bouton */
  .stage-button:hover {
      background-color: #0056b3;
  }

  .light-mode .projets {
    color: black;
    }

    .light-mode .stage-list {
        background-color: #222;
        color: white;
    }

    .light-mode .stage-item {
        background-color: #333;
        box-shadow: 0 4px 15px rgba(255, 255, 255, 0.8);
    }

    .light-mode .stage-content h3 {
        color: #ddd;
    }
}
  

@media (max-width: 768px) {
  .projets {
    width: 80%;
    display: flex;
    /*flex-direction: column;*/
    flex-wrap:wrap;
    justify-content: center;
    overflow-y: scroll;
  } 

  .stage-list {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.8vw;
    background-color: #f0f0f0;
    border-radius: 10px;
    width: 70%; 
    margin: 8% 0;
}

  /* Élément individuel du projet de stage */
  .stage-item {
      background-color: #fff;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      text-align: center;
  }


  /* Section de l'image */
  .stage-image img {
      width: 100%;
      max-width: 100%;
      height: auto;
      object-fit: cover;
      transition: transform 0.3s ease;
  }

  /* Effet de zoom au survol */
  .stage-image:hover img {
      transform: scale(1.05);
  }

  /* Contenu du texte */
  .stage-content {
      margin-bottom: 1vw;
  }

  /* Titre */
  .stage-content h3 {
      margin: 0;
      font-size: 3.5vw;
      color: #333;
      margin-top: 1vh;
  }


  /* Bouton */
  .stage-button {
      display: inline-block;
      text-decoration: none;
      background-color: #0179f9;
      color: white;
      padding: 10px 20px;
      border-radius: 5px;
      transition: background-color 0.3s ease;
      font-size: 3vw;
      margin-top: 1vh;
  }

  /* Effet de survol du bouton */
  .stage-button:hover {
      background-color: #0056b3;
  } 

    .light-mode .projets {
        color: black;
    }

    .light-mode .stage-list {
        background-color: #222;
        color: white;
    }

    .light-mode .stage-item {
        background-color: #333;
        box-shadow: 0 4px 15px rgba(255, 255, 255, 0.8);
    }

    .light-mode .stage-content h3 {
        color: #ddd;
    } 
}