#accompagnement-section {
    padding-top: 50px;
    padding-bottom: 50px;
}

.accompagnement-section-container {
    text-align: center;
}

.accompagnement-cards {
    display: flex;
    gap: 50px;
    margin: 50px auto;
    width: 80%;
}

.accompagnement-cards .card {
    width: 50%;
}

.card-subtext {
  transform: scaleY(0);
  transform-origin: top;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: transform 0.5s, opacity 0.5s, max-height 0.5s;
}

#card-01:hover #card-01-subtext {
  transform: scaleY(1);
  opacity: 1;
  max-height: 500px; /* big enough for content */
}
#card-02:hover #card-02-subtext {
  transform: scaleY(1);
  opacity: 1;
  max-height: 500px; /* big enough for content */
}
#card-03:hover #card-03-subtext {
  transform: scaleY(1);
  opacity: 1;
  max-height: 500px; /* big enough for content */
}
#card-04:hover #card-04-subtext {
  transform: scaleY(1);
  opacity: 1;
  max-height: 500px; /* big enough for content */
}
/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}
@media screen and (max-width: 736px) {
    .accompagnement-cards {
        flex-direction: column;
    }

    .accompagnement-cards .card {
        width: 100%;
    }
}