.containercadre {
    display: flex;
    justify-content: center;
}

.containercadre .cardre1,
.cardre2,
.cardre3,
.cardre4,
.cardre5,
.cardre6,
.cardre7,
.cardre8,
.cardre9,
.cardre10,
.cardre11,
.cardre12 {
    display: flex;
    flex-direction: column;
    /* align-items: flex-start; */
    justify-content: space-between;
    width: 300px;
    padding: 10px;
    cursor: pointer;
    min-height: 18rem; 
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(128, 128, 128, 0.3);
}




.cardre1 .head h4,
.cardre2 .head h4,
.cardre3 .head h4,
.cardre4 .head h4,
.cardre5 .head h4,
.cardre6 .head h4,
.cardre6 .head h4,
.cardre7 .head h4,
.cardre8 .head h4,
.cardre9 .head h4,
.cardre10 .head h4,
.cardre11 .head h4,
.cardre12 .head h4 {
    font-size: 2em;
    margin: 20px 0px 10px 0px;
}


/* .cardre1 .body {} */

.cardre1 .body p,
.cardre2 .body p,
.cardre3 .body p,
.cardre4 .body p,
.cardre5 .body p,
.cardre6 .body p,
.cardre7 .body p,
.cardre8 .body p,
.cardre9 .body p,
.cardre10 .body p,
.cardre11 .body p,
.cardre12 .body p {
    /* display: none; */
    height: 10px;
    opacity: 0;
    visibility: hidden;
    transition: 1s ease-in .2s;
}

.cardre1 .body p.active,
.cardre2 .body p .active,
.cardre3 .body p.active,
.cardre4 .body p .active,
.cardre5 .body p.active,
.cardre6 .body p .active,
.cardre7 .body p.active,
.cardre8 .body p .active,
.cardre9 .body p.active,
.cardre10 .body p .active,
.cardre11 .body p.active,
.cardre12 .body p .active {
    display: block;
    opacity: 1;
    visibility: visible;
    height: 170px;
}

.cardre1 .foot button,
.cardre2 .foot button,
.cardre3 .foot button,
.cardre4 .foot button,
.cardre5 .foot button,
.cardre6 .foot button,
.cardre7 .foot button,
.cardre8 .foot button,
.cardre9 .foot button,
.cardre10 .foot button,
.cardre11 .foot button,
.cardre12 .foot button {
    width: 100%;
    padding: 10px;
    font-weight: bold;
    font-size: 1em;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    color: white;
    background: #49E1F2;
    text-align: center;
}