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

.page_produit {
    padding: 5px;
}

.contenu_page_produit {
    width: 290px;
    background-color: whitesmoke;
    margin: 10px auto;
    padding: 4px;
    border-radius: 6px;
}

.contenu_page_produit .div_deco {
    border-bottom: 1px solid rgb(219, 218, 218);
    margin: 20px auto;
    padding: 10px 3px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.contenu_page_produit div p,
.contenu_page_produit div p span {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}


/* ---------------------- vidéo et images -------------------------- */

.video_image {
    height: 240px;
    background-color: rgb(228, 223, 223);
    padding: 2px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    overflow-x: auto;
}

.video_image video,
.video_procedure {
    width: 250px;
    margin: 5px;
    border-radius: 4px;
    cursor: pointer;
}

.video_image video {
    aspect-ratio: 16/9;
}

.video_image .les_images {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: end;
}


/* .video_image .les_images .image_produit a {} */

.video_image .les_images .image_produit {
    width: 180px;
    height: 200px;
    -o-object-fit: cover;
       object-fit: cover;
    margin: 5px;
    border-radius: 4px;
    cursor: pointer;
}


/* ----------------------- lien produit admin ------------------- */

.lien_produit_admin {
    margin: 10px auto;
    padding: 4px;
    overflow-x: auto;
}


/* .lien_produit_admin .titre_data_div {} */


/* .lien_produit_admin .detail_data_div {} */

.lien_produit_admin .detail_data_div a {
    color: brown;
}


/* --------------- nombre de vues ------------- */

.nbre_vue p {
    color: rgb(99, 98, 98);
    font-size: 13px;
}


/* --------------------- description produit -------------------------- */

.description_produit .detail_data_div {
    font-size: 14px;
}


/* --------------------------------- affichage prix et commande minimale ------------------- */


/* .aff_prix_produit {} */

.aff_prix_produit .prix_initial {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}


/* .aff_prix_produit .prix_initial .chiffre_prix_initial {} */

.aff_prix_produit .prix_initial .commande_min {
    font-size: 12px;
    color: rgb(99, 98, 98);
}


/* ----------------------------- choix disponible / détails produit ----------------------------- */

.pour_aff_detail_couleur {
    margin: 4px auto;
    padding: 3px;
}

.les_imgs_couleur_detail {
    width: 270px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    overflow-x: auto;
    margin: 4px 2px;
    padding: 3px;
}

.cadre_affichage_couleur {
    width: 80px;
    margin: 3px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    border: 1px solid rgb(194, 193, 193);
    border-radius: 6px;
}

.cadre_affichage_couleur p {
    padding: 3px;
}

.img_couleur_detail {
    margin: auto;
    width: 70px;
    height: 80px;
    -o-object-fit: contain;
       object-fit: contain;
    background-color: white;
    cursor: pointer;
}

.choix_disponible .p_tab_titre {
    margin: 6px;
}

.choix_disponible .contenu_tab .titre_tab,
.titre_couleur_detail {
    font-size: 12px;
    color: rgb(99, 98, 98);
}

.choix_disponible .contenu_tab .description_tab {
    margin-bottom: 5px;
}


/* --------------------------------- propriété ------------------------------------ */

.propriete_produit .p_tab_titre {
    margin: 6px;
}

.propriete_produit .contenu_tab .titre_tab {
    font-size: 12px;
    color: rgb(99, 98, 98);
}

.propriete_produit .contenu_tab .description_tab {
    margin-bottom: 5px;
}


/* --------------------------------- transport chine rdc ------------------------- */


/* .tarif_transport {} */

.tarif_transport .titre_data_div {
    font-size: 12px;
    color: rgb(99, 98, 98);
}


/* --------------------------------- estimation_prix --------------------------- */


/* .estimation_prix {} */

.estimation_prix h3 {
    margin: 9px auto;
    text-align: center;
}

.estimation_prix p .titre_estimation {
    font-size: 13px;
    color: rgb(99, 98, 98);
}

.estimation_prix .quantite_commande .input_quantite_estimation {
    width: 70px;
}

.estimation_prix .prix_total_estimation {
    margin-top: 4px;
}


/* --------------------------- total estimation ----------------------------- */

.estimation_prix .total_estimation_achat {
    margin: 4px;
    margin-left: 0px;
    padding: 6px;
    background-color: rgb(197, 197, 226);
}


/* --------------------------- spéciale estimation ------------------------------ */

.estimation_special_super_div {
    margin: 4px;
    padding: 3px;
    background-color: rgb(221, 211, 211);
    /* background-color: rgb(212, 223, 231); */
}

.formulaire_estimation_speciale {
    width: 210px;
    margin: 4px;
    padding: 3px;
    background-color: #a18e9c;
    border-radius: 4px;
}

.formulaire_estimation_speciale form input[type=number] {
    margin: 3px;
    width: 115px;
    border: none;
    padding: 3px;
    /* color: rgb(233, 216, 216); */
    color: black;
    text-align: center;
    border-bottom: 1px solid black;
    background: none;
    /* background-color: #a18e9c; */
    outline: none;
    margin: 3px;
    -webkit-transition: 0.55s;
    -o-transition: 0.55s;
    transition: 0.55s;
    cursor: pointer;
}

.formulaire_estimation_speciale form input[type=number]:focus,
.formulaire_estimation_speciale form input[type=number]:hover {
    width: 120px;
    border-bottom: 1px solid whitesmoke;
}

.formulaire_estimation_speciale form input[type=submit] {
    margin: 3px;
    font-size: 12px;
    padding: 3px 9px;
    cursor: pointer;
    background: none;
    background-color: brown;
    color: white;
    border: 1px solid brown;
    border-radius: 4px;
    -webkit-transition: .25s;
    -o-transition: .25s;
    transition: .25s;
}

.formulaire_estimation_speciale form input[type=submit]:hover {
    background-color: white;
    color: brown;
}

.contain_estimation_speciale {
    padding-top: 12px;
}

.estimation_prix p .special_titre_estimation {
    color: brown;
    /* color: rgb(248, 244, 244); */
}

.estimation_prix .special_total_estimation {
    background-color: rgb(197, 197, 226);
    /* background-color: rgb(236, 125, 106); */
}


/* --------------------------------------- procédure achat --------------------------------- */


/* .procedure_achat {} */

.procedure_achat h4 {
    margin: 15px auto;
    text-align: center;
}

.procedure_achat p {
    margin: 15px auto;
    font-size: 13px;
}

.procedure_achat p .num_procedure {
    font-size: 18px;
    font-weight: 700;
}

.procedure_achat p .sous_detail_procedure {
    display: block;
    margin: 2px;
    padding: 2px;
    font-size: 12px;
    color: brown;
}

.image_exemple_whatsapp {
    margin: 2px;
    padding: 2px;
}

.procedure_achat .image_exemple_whatsapp p {
    text-align: left;
}

.procedure_achat .image_exemple_whatsapp img {
    width: 250px;
    margin: auto;
    cursor: pointer;
}


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

@media screen and (min-width:650px) {
    .contenu_page_produit {
        width: 550px;
    }
    .les_imgs_couleur_detail {
        width: 530px;
    }
}