.my-portfolio-container.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Ajuste automatiquement le nombre de colonnes */
    gap: 20px;
  }
  
  .my-portfolio-container.line {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
 .my-portfolio-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Espacement équilibré entre image, titre et bouton */
    border: 1px solid #ddd;
    /*border-radius: 10px;*/
    background: #fff;
    transition: box-shadow 0.3s, transform 0.3s ease-in-out; /* Effet au survol */
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ombre légère */
}

.my-portfolio-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Ombre accentuée au survol */
    background-color: #f9f9f9; /* Couleur de fond subtile au survol */
}
  .my-portfolio-image img {
    max-width: 100%;
    border-radius: 0px;
  }
  

.my-portfolio-content h2 {
  margin-top: 10px;
  margin-bottom: 10px; /* Ajoute un espace sous le titre */
  font-size: 1.2em; /* Taille du titre */

}

.my-portfolio-content h3 {
  margin-bottom: 10px; /* Ajoute un espace sous le titre */
  font-size: 1.5em; /* Taille du titre */
  font-weight: bold; /* Gras pour le titre */
}
.my-portfolio-content p {
  margin-top: 0 !important;
  margin-bottom: 15px !important;
  line-height: 1.6 !important;
  padding-bottom: 0 !important; /* Supprime tout padding résiduel */
  font-family: 'Roboto', Helvetica, Arial, Lucida, sans-serif;
  font-style: italic!important;;
	font-weight: 500!important;
}



  .my-portfolio-button {
    display: inline-block;
    margin-top: 10px;
    padding: 0; /* Retirer les marges internes */
    background: none; /* Supprimer le fond */
    color: #000; /* Couleur du texte */
    text-decoration: none; /* Supprimer le soulignement par défaut */
    font-weight: bold; /* Optionnel : mettre le texte en gras */
    position: relative; /* Nécessaire pour positionner le trait */
}

.my-portfolio-button::after {
    content: ""; /* Ajoute un trait */
    display: block;
    width: 100%;
    height: 2px; /* Épaisseur de la ligne */
    background-color: #ff7f50; /* Couleur du trait */
    margin-top: 5px; /* Distance entre le texte et le trait */
    transition: transform 0.3s ease; /* Animation de survol */
}

.my-portfolio-button:hover::after {
    transform: scaleX(1.2); /* Agrandit légèrement le trait au survol */
}