:root{
    /* colors */
    --new-main-color: #2f4e9e/*#212121*/;
    --new-text-color: #ffffff;
    --new-header-color : hsl(223, 51%, 25%);

    /* compte */
    --nb-per-row: 3;
    --custom-column-gab: 50px;
}

/* MOD-MS 06.02.2023 : Changement du style des boutons */
.button, button, input[type='button'], input[type='reset'], input[type='submit']{
    background-color: var(--new-main-color);
    box-shadow: none;
    border-radius: 0%;
}
.button:hover, button:hover, input[type='button']:hover, input[type='reset']:hover, input[type='submit']:hover{
    transform: scale(1.05);
}
/* MOD-MS 06.02.2023 : Modification des inputs en général */
input, select, textarea, .selection span{
    border-radius: 0px !important;
}
/* MOD-MS 06.02.2023 : Modification des boutons radio par des carrés */
input[type=radio] {
    padding: 0.5em;
    -webkit-appearance: none;
    outline: 0.1em solid black;
    outline-offset: 0.1em;
}
input[type=radio]:checked {
    display: inline-block;
    background-color: var(--new-main-color);
}
/* MOD-MS 06.02.2023 : Modification des checkboxs par des carrés */
input[type=checkbox] {
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--new-text-color);
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 1.15em;
    height: 1.15em;
    border: 1.5px solid var(--new-main-color);
    border-radius: 0pxm;
    transform: translateY(-0.075em);
    vertical-align: middle;
}
input[type="checkbox"]::before {
    content: "";
    width: 10px;
    height: 10px;
    transform: scale(0);
    /* transition: 120ms transform ease-in-out; */
    box-shadow: inset 1em 1em var(--new-main-color);
    position: absolute;
    top: 50%;
    left: 50%;
  }
  input[type="checkbox"]:checked::before {
    transform: scale(1);
    transform: translate(-50%, -50%);
  }
  input[type="checkbox"]:disabled{
    opacity: 0.5;
  }

/* MOD-MS 06.02.2023 : Changement de l'aperçu de la page du compte */
.page-id-208 .bouton-compte{
    width: 100%;
}
.card-form-submit, .card-activation-button, .compte-button, .card-validation-submit, .contact-submit{
    width: auto;
}
.page-id-208 .content{
    display: grid;
    grid-template-columns: repeat(var(--nb-per-row), 1fr);
    column-gap: var(--custom-column-gab);
    row-gap: 1em;
}
.page-id-208 .content .validation-bouton{
    grid-column: span var(--nb-per-row);
}
.page-id-208 .validation-bouton .bouton-compte{
    width: calc((100% / var(--nb-per-row)) - var(--custom-column-gab) + var(--custom-column-gab) / var(--nb-per-row));
}
/* MOD-MS 06.02.2023 : Modification du style pour le bouton retour */
.return-button{
    background-color: var(--new-main-color) !important;
}

/* MOD-MS 06.02.2023 : Changement du style du header */
.page-header{
    padding: 14rem 0 4rem;
}
.page-header:before{
    background-color: var(--new-header-color);
}
.site-header a, .page-header{
    color: var(--new-text-color);
}
.menu-item a span:after{
    background-color: var(--new-text-color);
}
.page-header .wrap{
    max-width: 100%;
}
.site-header .nav-primary{
    width: 100%;
}
.site-header .nav-primary .menu{
    width: 100%;
    display: inline-block;
    text-align: center;
}
.nav-primary .menu-item a{
    font-size: 20px;
    padding: 1em 1em;
}
.site-header .nav-primary .menu .menu-item:last-of-type{
    position: absolute;
    right: 0;
}
.site-header .title-area{
    display: inline-block;
    width: 100%;
    margin: 0;
    /* margin-top: -2rem; */
    margin-top: 2rem;
}
.site-header .wrap{
    display: flex;
    /* flex-direction: column-reverse; */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* margin-top: 10px; */
}

/* MOD-MS 06.02.2023 : Changement du style des messages de retour */
#returnMessage span, .returnMessage span{
    background-color: var(--new-main-color) !important;
    border-radius: 0% !important;
}
.message_modi_container font{
    background-color: var(--new-main-color) !important;
    border-radius: 0% !important;
}

/* MOD-MS 06.02.2023 : Modification visuel du self-checking */
.choix-self-checking-container{
    margin-top: 15px;
}

/* MOD-MS 06.02.2023 : Modification du style pour la validation */
.validation{
    margin: auto !important;
    width: auto !important;
}

/* MOD-MS 06.02.2023 : Modification de la génération de BAE */
#baeActions input{
    margin-left: 10px;
    margin-right: 10px;
}
#returnMessage{
    margin-bottom: 30px !important;
}

/* Modification des ACF Form */
.acf-form-submit{
    text-align: center;
}


/*  ======================================================
    MOD-MS 06.02.2023 : Modification visuel mobile et app
    ====================================================== */
/* MOD-MS 06.02.2023 : Modification app */
body.wpappninja .site-header a, body.wpappninja .page-header, body.wpappninja .page-header .entry-title{
    color: var(--new-text-color);
}
body.wpappninja .page-id-208 .content{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 0px;
    margin-top: 10px;
}
body.wpappninja .card-form-submit, .card-activation-button, .compte-button, .card-validation-submit, .contact-submit{

}
/* MOD-MS 06.02.2023 : Changement du style du header et du menu */
body.wpappninja .site-header a, body.wpappninja .page-header, body.wpappninja .page-header .entry-title{
    color: var(--new-text-color);
}
body.wpappninja .menu-toggle span, body.wpappninja .menu-toggle span::before, body.wpappninja .menu-toggle span::after{
    background: var(--new-text-color);
}
body.wpappninja .nav-primary{
    background-color: var(--new-main-color);
}
body.wpappninja .menu-toggle.activated span::before, body.wpappninja .menu-toggle.activated span::after{
    background-color: var(--new-text-color);
}
body.wpappninja .navbar, body.wpappninja .tabbar, body.wpappninja .toolbar{
    background-color: var(--new-main-color) !important;
}
html.wpappninja body.theme-wpappninja .toolbar-inner a, .navbar i.icon, .navbar .center{
    color: var(--new-text-color) !important;
}
body.wpappninja .wpmobile-login-action, body.wpappninja .wpmobile-login-action a{
    color: var(--new-text-color) !important;
}
/* MOd-MS 06.02.2023 : Modification des paddings sur toutes les pages sauf la page compte */
body.wpappninja:not(.page-id-208) .content-sidebar-wrap, .wrap{
    padding-left: 6vw;
    padding-right: 6vw;
}
/* MOD-MS 06.02.2023 : modification du bouton retour */
body.wpappninja .return-button{
    margin-top: 10px;
    background-color: var(--new-main-color) !important;
}
/* MOD-MS 06.02.2023 : Changement du style des boutons en général */
body.wpappninja .button, body.wpappninja button, body.wpappninja input[type='button'], body.wpappninja input[type='reset'], body.wpappninja input[type='submit']{
    width: 100%;
    background-color: var(--new-main-color) !important;
    box-shadow: none;
    border-radius: 0%;
    font-size: 1.3rem;
}
/* MOD-MS 06.02.2023 : Changement visuel page compte */
body.wpappninja .page-id-208 .content{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 0px;
    margin-top: 10px;
}
body.wpappninja .card-form-submit, body.wpappninja .card-activation-button, body.wpappninja .compte-button, body.wpappninja .card-validation-submit, body.wpappninja .contact-submit{
    width: 100%;
}
body.wpappninja .page-id-208 .content .validation-bouton, body.wpappninja .page-id-208 .validation-bouton .bouton-compte{
    width: 100%;
}
body.wpappninja .page-id-208 .content .validation-bouton .compte-button, body.wpappninja .page-id-208 .content .validation-bouton .compte-button span{
    width: 100%;
}
/* MOD-MS 06.02.2023 : Changement visuel pour la validation */
body.wpappninja .card-form{
    width: 100%;
    margin: 0px;
    margin-bottom: 20px;
    padding: 0px;
    border-radius: 0px;
    font-size: 2rem;
}
body.wpappninja .card-validation-submit input{
    background-color: var(--new-main-color) !important;
    color: var(--new-text-color) !important;
    border: none;
}
body.wpappninja .message{
    width: 100%;
    max-width: 100%;
}

@media screen and (max-width: 870px) {
    /* MOD-MS 06.02.2023 : Changement du style du header et du menu */
    .page-header{
        padding: 11rem 0 7rem;
    }
    .site-header a, .page-header, .page-header .entry-title{
        color: var(--new-text-color);
    }
    .menu-toggle span, .menu-toggle span::before, .menu-toggle span::after{
        background: var(--new-text-color);
    }
    .nav-primary{
        background-color: var(--new-main-color);
    }
    .menu-toggle.activated span::before, .menu-toggle.activated span::after{
        background-color: var(--new-text-color);
    }
    .site-header .nav-primary .menu{
        width: 100%;
        display: flex;
    }
    .nav-primary .menu-item a{
        padding: 0.5em 0;
    }
    .site-header .nav-primary .menu .menu-item:last-of-type{
        position: initial
    }
    .site-header .title-area{
        margin-top: 1rem;
    }
    /* MOd-MS 06.02.2023 : Modification des paddings sur toutes les pages sauf la page compte */
    body:not(.page-id-208) .content-sidebar-wrap, .wrap{
        padding-left: 0px;
        padding-right: 0px;
    }
    /* MOD-MS 06.02.2023 : modification du bouton retour */
    .return-button{
        margin-top: 10px;
    }
    /* MOD-MS 06.02.2023 : Changement du style des boutons en général */
    .button, button, input[type='button'], input[type='reset'], input[type='submit']{
        width: 100%;
        background-color: var(--new-main-color) !important;
        box-shadow: none;
        border-radius: 0%;
    }
    /* MOD-MS 06.02.2023 : Changement visuel page compte */
    .page-id-208 .content{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        row-gap: 0px;
        margin-top: 10px;
    }
    .card-form-submit, .card-activation-button, .compte-button, .card-validation-submit, .contact-submit{
        width: 100%;
    }
    .page-id-208 .content .validation-bouton, .page-id-208 .validation-bouton .bouton-compte{
        width: 100%;
    }
    .page-id-208 .content .validation-bouton .compte-button, .page-id-208 .content .validation-bouton .compte-button span{
        width: 100%;
    }
    /* MOD-MS 06.02.2023 : Changement visuel pour la validation */
    .card-form{
        width: 100%;
        margin: 0px;
        padding: 0px;
        border-radius: 0px;
        font-size: 2rem;
    }
}