.exam {
    text-align: center;
    overflow: hidden;
    height: 0;
    transition: height 2s cubic-bezier(0,0,.59,1.11), padding 1s ease-out;
    position: relative;
    background: #2980B9;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #FFFFFF, #6DD5FA, #2980B9);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #FFFFFF, #6DD5FA, #2980B9); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.exam.show-exam {
    height: auto;
    padding: 20px;
    border-bottom: 5px solid #903;
}
.exam img {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 80px;
    opacity: 0;  /* Caché initialement */
    transition: opacity 1s ease-in 1s; /* Apparition après 1s */
}
.exam img::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.96) 100%);
    transform: skewX(-20deg);
    animation: shine 1.5s ease-out 1.5s forwards;
}
.exam .examessage {
    font-size: 2rem;
    margin: 0 0 auto 70px;
    width: 90%;
    opacity: 0;
    transition: opacity 1s ease-in 1s;
    line-height: 2.2rem;
    padding-right: 15px;
    text-shadow: 1px 0 0 #fff;
}
.exam .exam-contact {
    font-size: 1rem;
    margin: 0 0 0 70px;
    width: 90%;
    opacity: 0;
    transition: opacity 1s ease-in 1s;
    padding: 10px 15px 0 0;
}
@keyframes shine {
    0% { left: -100%; }
    100% { left: 100%; }
}