/* Bloc Contact */
.contact-normal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  transition: opacity 0.3s ease;
}

.contact-normal h2,
.contact-normal .contact-text {
  transition: opacity 0.3s ease;
}

.contact-normal .mail-icon {
  font-size: 2rem;
  transition: transform 0.3s ease;
}

/* État hover caché par défaut */
.contact-hover {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.contact-hover .mail-icon-hover,
.contact-hover .send-hover {
  font-size: 0;
  opacity: 0;
  transition: font-size 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

/* Effet au survol */
.bento-item.contact:hover .contact-normal h2,
.bento-item.contact:hover .contact-normal .contact-text {
  opacity: 0;
}

.bento-item.contact:hover .contact-normal .mail-icon {
  transform: scale(0);
}

.bento-item.contact:hover .contact-hover {
  opacity: 1;
}

.bento-item.contact:hover .contact-hover .mail-icon-hover {
  font-size: 4rem;
}

.bento-item.contact:hover .contact-hover .send-hover {
  font-size: 1rem;
  opacity: 1;
}