/* SECTION CONTACT - PORTFOLIO */
#contact-section-portfolio {
  padding: 50px 20px;
  padding-bottom: 150px;
  color: #bfffc7;
  text-align: center;
}

#contact-section-portfolio .contact-title-portfolio {
  font-size: 2rem;
  margin-bottom: 30px;
  color: #bfffc7;
}

/* GRID avec wrap */
#contact-section-portfolio .contact-grid-portfolio {
  display: flex;
  flex-wrap: wrap; /* permet le passage à la ligne */
  justify-content: center; /* centre les cartes horizontalement */
  gap: 25px;
  max-width: 1000px;
  margin: 0 auto;
}

/* CARDS - largeur flexible pour s'adapter au wrap */
#contact-section-portfolio .contact-card-portfolio {
  flex: 1 1 250px; /* flex-grow | flex-shrink | flex-basis */
  max-width: 300px; /* limite la taille maximum */
  min-width: 200px;
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  transition: background 0.3s ease, transform 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

#contact-section-portfolio .contact-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease;
}

#contact-section-portfolio .contact-card-portfolio:hover .contact-card-content {
  transform: translateY(-20px); /* monte le contenu */
}

#contact-section-portfolio .contact-card-portfolio i {
  font-size: 2rem;
  margin-bottom: 10px;
  color: #00ff99;
}

#contact-section-portfolio .contact-card-title {
  font-size: 1.2rem;
  margin-bottom: 5px;
  color: #bfffc7;
}

#contact-section-portfolio .contact-card-info {
  color: #d9fbe1;
  font-size: 0.95rem;
  margin-bottom: 15px;
  text-align: center;
}

/* BUTTON ANIMÉ */
#contact-section-portfolio .contact-card-btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(150%);
  bottom: 15px;
  opacity: 0;
  background-color: #00ff99;
  color: #0a192f;
  border: none;
  border-radius: 20px;
  padding: 8px 15px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#contact-section-portfolio .contact-card-portfolio:hover .contact-card-btn {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* HOVER */
#contact-section-portfolio .contact-card-portfolio:hover {
  transform: translateY(-5px);
  background: rgba(0, 255, 150, 0.1);
}