/******************************************************************************/
/*                             compPreInscription                             */
/******************************************************************************/

.compPreInscription {
    font-size: 1.1667rem;
    margin-bottom: 10px;
}

.compPreInscription .preInscription {}

.compPreInscription .preInscription-msg {
    margin: 20px 10px;
}

.compPreInscription .preInscription-msg span {
    margin-left: 0px;
}

.compPreInscription .preInscription .preInscription-mail {
    display: inline-flex;
}

.compPreInscription .preInscription  .preInscription-valide-mail {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    gap: 20px;
}

.compPreInscription .preInscription .preInscription-mail .preInscription-mail-libelle {
    line-height: 24px;
}

.compPreInscription .preInscription .preInscription-mail .preInscription-info {
    line-height: 24px;
    margin-left: 10px;
}

#emailPreInscription {
    background-color: #fff;
    margin-left: 10px;
    width: 300px;
    height: 35px;
    padding: 0 0 0 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='71' height='71' viewBox='0 0 71 71'%3E%3Cg opacity='0.3'%3E%3Cg%3E%3Cg fill='none' stroke='%23141414' stroke-width='2'%3E%3Ccircle cx='35.5' cy='35.5' r='35.5' stroke='none'/%3E%3Ccircle cx='35.5' cy='35.5' r='34.5' fill='none'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(18.422 21.838)'%3E%3Cpath d='M6.416,6H33.74a3.426,3.426,0,0,1,3.416,3.416V29.909a3.426,3.426,0,0,1-3.416,3.416H6.416A3.426,3.426,0,0,1,3,29.909V9.416A3.426,3.426,0,0,1,6.416,6Z' transform='translate(-3 -6)' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'/%3E%3Cpath d='M37.155,9,20.078,20.954,3,9' transform='translate(-3 -5.584)' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 7px center;
    background-size: 25px;
}

.compPreInscription .headerComposants .footerComposants {}

.compPreInscription .headerComposants .footerComposants .contentComposants {
    width: 100%;
    margin: 40px 0;
}

.compPreInscription .dataContentComposants .descContent {
    font-size: 21px;
    color: var(--text-secondary-color);
    font-weight: 400;
    text-align: left;
    padding: 10px 0 10px 15px;
    background-color: var(--Secondary-color);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'%3E%3Cg transform='translate(0.141)'%3E%3Cg transform='translate(-0.141)' fill='%23fff' stroke='%23fff' stroke-width='2'%3E%3Ccircle cx='35' cy='35' r='35' stroke='none'/%3E%3Ccircle cx='35' cy='35' r='34' fill='none'/%3E%3C/g%3E%3Cpath d='M15.75,36a4.5,4.5,0,0,0,4.5-4.5h-9A4.5,4.5,0,0,0,15.75,36ZM30.895,25.474c-1.358-1.46-3.9-3.656-3.9-10.849a11.1,11.1,0,0,0-9-10.91V2.25a2.249,2.249,0,1,0-4.5,0V3.715a11.1,11.1,0,0,0-9,10.91c0,7.193-2.542,9.389-3.9,10.849A2.2,2.2,0,0,0,0,27a2.252,2.252,0,0,0,2.257,2.25H29.243A2.252,2.252,0,0,0,31.5,27a2.2,2.2,0,0,0-.605-1.526Z' transform='translate(19.109 17)' fill='%23EF66B1'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 30px;
}

.compPreInscription .headerComposants .footerComposants .contentComposants .topContentComposants {}

.compPreInscription .headerComposants .footerComposants .contentComposants .topContentComposants .titleComposants {}

.compPreInscription .headerComposants .footerComposants .contentComposants .topContentComposants .titleComposants span {}

.compPreInscription .headerComposants .footerComposants .contentComposants .dataContentComposants {
    width: 500px;
    background-color: #f3f3f3;
    margin: 0 auto;
    border-radius: 10px;
}

.compPreInscription .headerComposants .footerComposants .contentComposants .bottomContentComposants {}

.compPreInscription .preInscription .preInscription-valide {
    text-align: center;
}

#validePreInscription {
    cursor: pointer;
    padding: 7px 30px;
    background: var(--Primary-color);
    border-radius: 7px;
    text-align: center;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 14px;
    border: solid 3px var(--Primary-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 15px;
}

#validePreInscription:hover {
    background: transparent;
    border: solid 3px var(--Primary-color);
    color: var(--Primary-color);
    border: solid 3px var(--Primary-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 15px;
}

#infoPreInscription {
    text-align: center;
    margin-bottom: 20px;
}

#messagePreInscription {
    color: #EF66B1;
}

#messagePreInscription,
#erreurPreInscription {
    font-weight: 700;
    margin-top: 10px;
}

@media screen and (max-width: 450px) {

    .compPreInscription .preInscription .preInscription-valide-mail {
        flex-direction: column;
    }
    .compPreInscription .headerComposants .footerComposants .contentComposants {
        padding-bottom: 20px;
    }

    .compPreInscription .headerComposants .footerComposants .contentComposants .dataContentComposants {
        width: 90%;
    }

    #emailPreInscription,
    .compPreInscription .preInscription .preInscription-mail {
        margin-left: 0px;
    }

    .compPreInscription .preInscription-msg {
        margin: 20px 10px;
    }
}