.card-flip {
    perspective: 1000px;
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    aspect-ratio: 1 / 1;
}

.card-front, 
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    aspect-ratio: 1 / 1;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.card-back {
    transform: rotateY(180deg);
    background-color: #FFFFFF; /* Couleur de fond Bootstrap light */
}

.card-flip:hover {
    transform: rotateY(180deg);
    cursor : pointer;
}


.bp-card-violet-medium {
  color: var(--bp-color-violet_medium);
  border-color: var(--bp-color-violet_medium);
}

.bp-card-orange {
  color: var(--bp-color-orange);
  border-color: var(--bp-color-orange);
}