#container-details {
    display:block;
}

#conteneur-details {
    max-width: 1200px;
    margin: auto;
    border: 0px solid red;
}  



#haut_produit {
    margin-top:25px;
    display:flex;
    border:0px solid green;
    gap: 20px;
}

#photo {
    max-width: 550px;
    min-width: 500px;
}

.container_photo {
    border-radius: 27px;
    background-color:#f9f9f9;
}

#photo IMG {
    width:100%;
    border-radius: 27px;
    mix-blend-mode: darken;
}

#illustrations {
    display: flex;
    flex-direction: column;
    width:90px;
    border:0px solid brown;
    gap:30px;
}

.zero_px {
    width:0px;  
}


.images_illustration {
    width:90px;
    border-radius: 7px;
    background-color:#f9f9f9;
    cursor: pointer;
}

.images_illustration IMG {
    width:100%;
    border-radius: 7px;
    mix-blend-mode: darken;
}

#details_produit {
    /*max-width:510px;*/
    border: 0px solid black;
    width:100%;
}

.illus_present {
    max-width:510px;
}

#details_produit H1 {
    font-size:1.4em;
    font-weight: 600;
    margin-top: 0px;
}

#details_produit H2 {
    font-size:1.2em;
    font-weight: 400;
}



#texte_presentation_produit STRONG {
    font-weight:600;
}

#couleurs-modeles {
    max-width:500px;
}

#couleurs_dispo {
    margin-top : 20px;
    display: flex;
    gap: 5px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    flex-direction: column;
    
}

.couleurs_promo {
    display: flex;
    gap: 20px 4px;
    position:relative;
    flex-wrap: wrap;
}

.bandeau_nouveau {
    transform: rotate(344deg);
    position: absolute;
    background: rgb(237 9 9);
    color: white;
    padding: 3px 16px;
    box-sizing: border-box;
    top: 11px;
    text-transform: uppercase;
    left: -7px;
    font-size: 22px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
    border-radius: 4px;
}

.couleurs_hors_promo {
    display: flex; 
    gap: 20px 4px;
    position:relative;
    flex-wrap: wrap;
    margin-top: 20px;
}

.pastille_new {
    position: absolute;
    background : #b2229c;
    color:white;
    font-weight: 400;
    font-size:0.7em;
    padding :2px 7px;
    border-radius: 8px;
    margin-top:-5px;
    /* top:30px; */
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.couleur_produit {
    width:44px;
    height:44px;
    cursor: pointer;
    border-radius: 44px;
    border:1px solid #cdcdcd;
}

.couleur_produit:hover  {
    width:44px;
    height:44px;
    cursor: pointer;
    border-radius: 44px;
    border:1px solid #9f9f9f;
}

.couleur_produit IMG {
    width:100%;
    width:42px;
    height:42px;
    border-radius: 42px;
    box-sizing: border-box;
    transition: border 0.3s linear;
    border:0px solid white;
 
}
.couleur_produit IMG:hover {
    border:0px solid black;
}






#details-ref {
    margin-top:20px;
    line-height: 30px;
}

#details_commerce {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap:20px;
}

#details-quantite {
    margin-top: 20px;
}

.details-nb-prod {
    border:0px;
    font-size:1.2em;
    box-shadow: rgba(0, 0, 0, 0.10) 0px 2px 4px 0px inset;
    border-radius: 7px;
    line-height: 50px;
    padding-left:15px;
    width: 50px;
}

#block-prix {
    font-size: 1.4em;
    font-weight: 600;
    min-height: 1.2em;
}

.btn-ajout-panier {
    display: flex;
    background-color: black;
    color: white;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    border: 0px;
    font-family: Raleway, 'open sans';
    font-size: 1.1em;
    font-weight: 200;
    padding:12px 38px;
    gap:15px;
    border-radius: 7px;
    margin-top:15px;  
    transition: all 0.3s ease-out; 
    position: relative;
    cursor: pointer;
}
.btn-ajout-panier:hover {
    background-color: var(--coul_hover_achat);
    
}

.btn-ajout-panier-revendeur {
    display: flex;
    background-color: black;
    color: white;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    border: 0px;
    font-family: Raleway, 'open sans';
    font-size: 0.9em;
    font-weight: 600;
    text-transform: uppercase;
    padding:12px 30px;
    gap:15px;
    border-radius: 7px;
    margin-top:15px;  
    transition: all 0.3s ease-out; 
    position: relative;
    cursor: pointer;
}
.btn-ajout-panier-revendeur:hover {
    background-color: var(--coul_hover_achat);
    
}






#bas_produit {
    margin-top:30px;
    display: flex;
    gap:20px;
    justify-content: space-between;
}



#conteneur_infos {
    min-width: 350px;
    max-width: 550px;
    width:100%;
    background-color:#f9f9f9;
    border-radius: 27px;
    padding:25px;
    box-sizing: border-box;
}

#conteneur_infos H2 {
    font-size: 1.1em;
    font-weight:700;
}

#conteneur_infos STRONG {
    font-weight:600;
}

#infos_illustrations {
    min-width: 350px;
    max-width: 615px;
    text-align: right;  
}


#infos_illustrations IMG {
    border-radius: 27px;
    width:100%;
}






#titre_produits_lies {
    
    text-align: center;
    padding:20px 0px;
    font-size:1.2em;
}

#separ_produits_lies {
    border-bottom:1px solid #959595;
    width:25%;
    margin:auto;
    margin-bottom:25px;
}

#produits_lies {
    margin-top:50px;
}


#conteneur_produits_lies {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}

.block_produit {
    width:30%;
    margin-bottom: 30px;
}

.image_lie {
    width:300px;
    height:400px;
    margin:auto;
    text-align: center;
    background-position: top center;
    background-repeat:no-repeat;
    background-size: contain;
    background-color: #f9f9f9;
    background-blend-mode:darken ;
    border-radius: 18px;
}

.image_lie IMG {
    mix-blend-mode: darken;
    width:100%;
    height:80%;
    object-fit: cover;
    margin-top:40px;
}

.nom_lie {
    font-size:1.1em;
    font-weight: 600;
    text-align: center;
    margin-top:10px;
}

.prix_lie {
    font-size:1.1em;
    text-align: center;
    margin-top:10px;
}

.bouton_lie {
    text-align: center;
    margin-top:15px;
}

.bouton_lie A {
    background-color: black;
    color: #fff;
    text-decoration: none;
    padding:5px 40px;
    border-radius: 6px;
}










.w_100pourcent {
    max-width:100%;
    width:100%;
}


.ingredients {
    font-size:0.9em;
    line-height: 1.3em;
    text-transform: uppercase;
}

#descriptif_portable {
    display: none;
}


.prix_revente {
    font-size:0.6em;
    color:#696969;
    margin-top:15px;
    font-style: italic;
}
.multiple_revente {
    font-size:0.6em;
    color:#696969;
    font-style: italic;
}


.pourcentage {
    width:60px;
    height:60px;
    border-radius: 60px;
    background-color: firebrick;
    color: white;
    line-height: 60px;
    font-size: 0.9em;
    text-align: center;
}
.text_promo {
    color: firebrick;
    font-size: 0.6em;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 8px;
}

.old_prix {
    color: #696969;
    text-decoration:line-through;
    font-size: 0.7em;
    margin-top: 8px;
}
.prix_promo {
    color: firebrick;
    font-size: 1.1em;
    font-weight: 600;
}


@media only screen and (max-width:1024px) {
    
    #conteneur-details {
        max-width: 1200px;
        margin: auto;
        border: 0px solid red;
        margin-top: 80px;
    }


    #photo {
        max-width: 350px;
        min-width: 200px;
    }

    #illustrations {
        display: flex;
        flex-direction: column;
        width: 50px;
        border: 0px solid brown;
        gap: 30px;
    }

    .images_illustration {
        width: 50px;
        border-radius: 7px;
        background-color: #f9f9f9;
        cursor: pointer;
    }

    #details_commerce {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0px;
    }


}


@media only screen and (max-width:640px) {
    
    #container-details {
        width:100%;
        margin:0px;
        border:0px solid green;
    }

    #conteneur-details {
        max-width: auto;
        width:95%;
        margin: 0px;
        border: 0px solid red;
        margin:auto;
    }  

    #haut_produit {
        flex-direction: column;
        gap: 10px;
    }


    #photo {
        width: 100%;
        border:0px solid blue;
        min-width: unset;
        max-width: unset;
        box-sizing: border-box;
    }
    
    #photo IMG {
        width:99%;
        background-color:#f9f9f9;
        border-radius: 27px;
        mix-blend-mode: darken;
    }

    #illustrations {
        flex-direction: row;
        width: 100%;
        gap: 10px;
    }
    
    .images_illustration {
        width:60px;
        height:60px;
        border-radius: 7px;
        background-color:#f9f9f9;
    }


    #couleurs_dispo {
        margin-top: 20px;
        display: flex;
        gap: 5px;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow: hidden;
        overflow: scroll;
    }



    #details_produit {
        width:95%;
        margin:auto;
        border: 0px solid black;
    }

    #conteneur_infos {
        min-width: auto;
        max-width: auto;
        background-color: #f9f9f9;
        border-radius: 27px;
        padding: 15px;
        box-sizing: border-box;
        width:100%;
    }

    #details_produit H2 {
        font-size:1.1em;
    }



    #details_commerce {
        position:fixed;
        left:0px;
        bottom:0px;
        background-color: #fff;
        width:100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
        gap: 0px;
        border-top: 1px solid #959595;
        z-index: 10;
    }
    .details-nb-prod {
        width:30px;
    }
    .btn-ajout-panier {
        padding: 12px 20px;
    }
    .btn-ajout-panier-revendeur {
        padding: 12px 20px;
        font-size: 0.6em;
        text-transform: uppercase;
        font-weight: 600;
    }

    #bas_produit {
        flex-direction: column;
        width:100%;
        margin:auto;
        margin-top:30px;
        
    }


    #conteneur_produits_lies {
        flex-direction: column;
        gap:50px;
    }

    .block_produit {
        width: 80%;
        margin:auto;
        
    }

    .image_lie {
        height:300px;
    }

    #descriptif_portable {
        display: block;
    }

    .ingredients {
        font-size:0.8em;
        line-height: auto;
    }
    
}