/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/* ----------- Disposition de la page ----------- */

.container {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    /* grid-template-rows: 0.8fr 6fr 0.2fr; */
    -ms-grid-rows: auto 2px auto 2px auto;
        grid-template-areas: "p1" "p2" "p3";
    gap: 2px;
}

.p1 {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: p1;
}

.p2 {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    grid-area: p2;
}

.p3 {
    -ms-grid-row: 5;
    -ms-grid-column: 1;
    /* ------------------- pied de page (footer) ----------------- */
    grid-area: p3;
    margin-top: 200px;
    position: relative;
    bottom: 0;
    width: 100%;
    /* background-color: rgb(245, 245, 245); */
}


/* ------------ fin disposition --------------- */

.page_jweb {
    padding: 9px 3px;
}

.contenu_page_jweb {
    margin: 3px 0px;
}


/* ----------------------------- partie 1 ---------------------------------- */

.partie_1 {
    /* width: 290px; */
    padding: 5px;
    margin: 8px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: aliceblue;
    border-radius: 8px;
}

.partie_1 span {
    margin: 18px 4px;
    padding: 4px;
    color: brown;
    font-size: 25px;
}

.partie_1 p {
    margin: 8px 4px;
    padding: 4px;
    font-size: 29px;
    font-weight: 500;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}


/* ----------------------------- partie_2_benefices --------------------------- */

.partie_2_benefices {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin: 10px 5px;
    padding: 5px;
}

.partie_2_benefices .bloc_benefice {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 3px;
    padding: 4px 7px;
    background-color: whitesmoke;
    border-radius: 4px;
}

.partie_2_benefices .bloc_benefice .numero_bloc_benefice {
    margin-right: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    color: whitesmoke;
    font-size: 26px;
    background-color: #051937;
}

.partie_2_benefices .bloc_benefice .detail_bloc_benefice {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    font-weight: 600;
}


/* ----------------------------- vidéo jweb ---------------------------------- */

h3 {
    text-align: center;
    margin-bottom: 25px;
    font-size: 25px;
}

.video_jweb {
    /* width: 300px; */
    margin: 10px auto;
    padding: 4px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}


/* .video_jweb p {
    padding: 4px;
    font-size: 24px;
    text-align: left;
} */

.les_videos_jweb {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: end;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.video_jweb .les_videos_jweb .une_video {
    width: 290px;
    padding: 5px;
    margin: 8px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: aliceblue;
    border-radius: 8px;
}

.video_jweb .les_videos_jweb .une_video span {
    margin: 8px 4px;
    padding: 4px;
    color: brown;
    font-size: 15px;
}

.video_jweb .les_videos_jweb .une_video p {
    margin: 8px 4px;
    padding: 4px;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.video_jweb .les_videos_jweb .une_video video {
    width: 280px;
    border-radius: 4px;
}


/* --------------------------------- preuve solution ------------------------- */

.preuve_solution {
    margin: 10px auto;
    padding: 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.client_satisfait {
    width: 290px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 5px;
    margin: 8px auto;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: aliceblue;
    border-radius: 8px;
}


/* 
.client_satisfait img {
    width: 290px;
    object-fit: cover;
    border-radius: 4px;
} */

.client_satisfait p {
    margin: 35px auto;
    padding: 10px;
    font-size: 16px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-bottom: 1px solid #051937;
}

.client_satisfait .adresse_saidi_kinshasa {
    font-size: 12px;
    color: #051937;
    font-weight: 600;
}

.preuve_solution .p_client_satisfait_1 {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 20px;
    text-align: center;
    margin-top: 50px;
}

.preuve_solution .les_images_retrait_colis {
    width: 300px;
    margin: 2px auto;
    padding: 4px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow-x: auto;
}

.preuve_solution .les_images_retrait_colis .une_image {
    border-top: 2px solid #6C63FF;
    background-color: whitesmoke;
    width: 120px;
    border-radius: 4px;
    margin: 4px;
    margin-left: 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.preuve_solution .les_images_retrait_colis .une_image .colis_retire {
    font-size: 14px;
    text-align: center;
    padding: 6px 2px;
}

.preuve_solution .les_images_retrait_colis .une_image img {
    width: 120px;
    height: 120px;
    -o-object-fit: fill;
       object-fit: fill;
    margin: auto;
    border-radius: 4px;
}


/* -------------------------------- agence saidi ---------------------------- */

.agence_saidi_express {
    margin: 10px auto;
    padding: 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.agence_saidi_express img {
    width: 290px;
    -o-object-fit: cover;
       object-fit: cover;
    margin: 5px;
    border-radius: 4px;
}

.agence_saidi_express .detail_agence {
    width: 290px;
    padding: 5px;
    margin: 8px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: aliceblue;
    border-radius: 8px;
}

.agence_saidi_express .detail_agence .titre_detail {
    color: brown;
    font-size: 19px;
    font-weight: 600;
    padding: 5px;
    margin: 8px;
}

.agence_saidi_express .detail_agence .description_detail {
    font-size: 17px;
    padding: 5px;
    margin: 8px;
}


/* ---------------------------- histoire jweb ------------------------------------------- */

.histoire_jweb {
    margin: 50px auto;
    padding: 5px;
}

.histoire_jweb .intro_div {
    margin: 4px;
    font-size: 22px;
    font-weight: 600;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-align: center;
}

.histoire_jweb .membres_jweb {
    margin: 4px auto;
    padding: 3px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.histoire_jweb .membres_jweb .un_membre {
    margin: 4px;
    border-radius: 4px;
    width: 200px;
    background-color: aliceblue;
    border-bottom: 2px solid #6C63FF;
}

.histoire_jweb .membres_jweb .un_membre img {
    width: 200px;
    height: 230px;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
}

.histoire_jweb .membres_jweb .un_membre .identite_membre {
    padding: 2px;
    font-size: 12px;
}

.histoire_jweb .membres_jweb .un_membre .fonction_membre {
    padding: 2px;
    font-size: 18px;
}

.histoire_jweb .membres_jweb .un_membre .detail_membre {
    padding: 3px;
    font-size: 12px;
    color: #051937;
}

.histoire_jweb .message_jweb {
    width: 290px;
    margin: 10px auto;
    padding: 4px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    /* justify-content: center; */
}

.histoire_jweb .message_jweb p {
    font-size: 15px;
    margin: 8px;
    padding: 4px;
    text-align: left;
}

.histoire_jweb .message_jweb .condition_importante_remboursement {
    padding: 8px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: aliceblue;
    border-radius: 8px;
}

.histoire_jweb .message_jweb .condition_importante_remboursement span {
    color: brown;
    font-size: 15px;
}

.histoire_jweb .message_jweb .condition_importante_remboursement .formule_calcul_commission {
    font-size: 12px;
    color: #051937;
}


/* ----------------------------- responsive design --------------------------------- */

@media screen and (min-width:350px) {
    .preuve_solution .les_images_retrait_colis {
        width: 340px;
    }
    .histoire_jweb .message_jweb p {
        font-size: 19px;
    }
    .histoire_jweb .message_jweb {
        width: 340px;
    }
}

@media screen and (min-width:500px) {
    .preuve_solution .les_images_retrait_colis {
        width: 490px;
    }
    .histoire_jweb .message_jweb p {
        font-size: 19px;
    }
    .histoire_jweb .message_jweb {
        width: 340px;
    }
}

@media screen and (min-width:550px) {
    .preuve_solution .les_images_retrait_colis {
        width: 540px;
    }
    .histoire_jweb .message_jweb {
        width: 450px;
    }
    .client_satisfait {
        width: 450px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        padding: 5px;
        margin: 8px auto;
        margin-top: 10px;
        margin-bottom: 10px;
        background-color: aliceblue;
        border-radius: 8px;
    }
    .client_satisfait p {
        margin: 35px auto;
        padding: 10px;
        font-size: 24px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        border-bottom: 1px solid #051937;
    }
    .agence_saidi_express .detail_agence {
        width: 500px;
        padding: 5px;
        margin: 8px;
        margin-top: 10px;
        margin-bottom: 10px;
        background-color: aliceblue;
        border-radius: 8px;
    }
    .agence_saidi_express .detail_agence .titre_detail {
        color: brown;
        font-size: 19px;
        font-weight: 600;
        margin-bottom: 5px;
    }
}