#projects h2 {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 50px;
    -webkit-text-stroke: 2px #E76F51; /* largeur et couleur du contour pour Chrome/Safari */
    color: transparent; 
    font-size: 9.5rem; 
    font-weight: bold; 
}

@media (max-width: 768px) {
    #projects h2 {
        font-size: 4rem; 
    }
}

.project-gallery {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Alignez les éléments à gauche */
}

.project-item {
  display: flex;
  flex-direction: column; /* Empile les éléments verticalement */
  align-items: flex-start; /* Alignez les éléments à gauche */
  position: relative; /* Pour le positionnement absolu des enfants */
  width: 60%; /* S'adapte à la largeur du conteneur */
  margin-bottom: 40px; /* Espacement entre les projets */
  padding-left: 300px;
}

.project-item h3 {
  font-size: 40px;
  color: #264653;
  margin-bottom: 0;
}

.project-item p {
  font-size: 20px;
  color: #F0F3BD;
  margin: 5px;
}

.project-item .project-year {
  color: #F0F3BD;
}

.project-item .project-technologies {
  color: #E76F51;
}

.project-details {
  position: relative; /* Pour le positionnement de la ligne de séparation */
  width: fit-content; /* La largeur s'adapte au contenu */
}

.project-details::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -10px; /* Ajustez la position selon votre besoin */
  width: 100%; /* La largeur s'adapte à celle des détails */
  height: 1px;
  background-color: #cccccc;
}

.project-media {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  width: 300px; /* Ou la largeur souhaitée */
  right: 0; /* Aligné à droite */
  top: 50%;
  transform: translate(150%, -50%); /* Centré et un peu à droite */
  transition: visibility 0.3s, opacity 0.3s ease-in-out;
}

.project-item:hover .project-media {
  visibility: visible;
  opacity: 1;
}

.project-media img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

@media (max-width: 768px) {
  .project-gallery {
      align-items: center; /* Centrer les éléments dans la galerie pour éviter qu'ils ne débordent */
      padding: 20px;
  }
  .project-item h3 {
    font-size: 30px;
  }

  .project-item p {
    font-size: 20px;
    line-height: 1.2rem;
  }

  .project-item {
      width: 100%; /* Utilise toute la largeur disponible, ajustant la largeur du conteneur du projet */
      padding-left: 0; /* Supprime le padding à gauche qui poussait l'image vers la droite */
      margin-bottom: 16px; /* Maintient un espace entre les projets */
  }

  .project-details {
      width: 100%; /* Assure que les détails du projet utilisent toute la largeur disponible */
  }

  .project-details::after {
      content: '';
      display: block;
      margin-top: 20px; /* Espace au-dessus de la ligne */
      width: 100%; /* Assure que la ligne de séparation s'étend sur toute la largeur */
      height: 1px;
      background-color: #cccccc;
  }

  .project-media {
      position: static; /* Remet l'image dans le flux normal du document */
      visibility: visible;
      opacity: 1;
      width: auto; /* Ajuste la largeur de l'image pour qu'elle s'adapte dans son conteneur */
      max-width: 90%; /* Empêche l'image de déborder du conteneur */
      height: auto; /* Hauteur automatique pour maintenir le ratio */
      margin-top: 20px; /* Espace entre le texte et l'image */
      margin-bottom: 20px; /* Espace entre l'image et la ligne de séparation */
      transform: none; /* Supprime toute transformation appliquée précédemment */
  }
}



.mentrat{
  margin-top: 300px;
}

.mentrat p{
  font-size: 22px;
  font-weight: bold;
  margin: 0 0 0 30px;
  line-height: 1.2rem;
}

.mentrat .mentrat-c{
  color: #E76F51;
}

@media (max-width: 768px) {
  .mentrat p {
      font-size: 2rem;
      line-height: 2rem; 
  }
}