@font-face {
    font-family: 'Montserrat';
    src: url(polices/Montserrat/Montserrat-SemiBold.otf);    
}

@font-face {
    font-family: 'Open sans';
    src: url(polices/open\ sans/OpenSans-Regular-webfont.ttf);    
}






/*Background de la page*/
body{
    background-color: #F7F1F1;
    font-family: 'Open sans';
}



/*titres en Montserrat*/
h1{
    font-family: 'Montserrat';
}

/*********************/
/* COLONNE DE DROITE */
/*********************/

/* Permet de ne pas coller le main au nav */
.container{
    padding-top: 3%;
}

/* Met un espace avec le haut du bloc pour ne pas que le paragraphe ne se colle en haut */
h1{
    margin-top: 2%
}

/* Fond en blanc */
.col-8{
    background-color: white;
}

/*texte si un article n'est plus en stock*/
.pasEnStock {
    color: red;
}

/* Bouton - */
.moins{
    font-size: 1.4em;
    border:none;
}
/* Bouton + */
.plus{
    font-size: 1.4em;
    border: none;
}

/* form pour controler la quantité du produit dans le panier */
.controle_quantite{
    background-color: #e9e9ed;
    height: min-content;
}
 
/* Bouton pour supprimer un produit du panier */
.bouton_supprimer{
    border: none;
    background-color: #f7f1f1;
    
    color: black;
    text-decoration: underline;
}

/* Permet a l'image de ne pas perdre ses dimensions et l'image prend la taille du bloc qui lui est alloué */
figure a img {
    object-fit: contain;
    width: 100%;
}

/* Met le titre en noir */
.titre_article{
    color: black;
    text-decoration: none;
}

/* Permet de mettre du style à la partie de payer */
#Partie_Droite{
    height: min-content;
    background-color: #FFFFFF;
    padding-top: 1%; 
    padding-bottom: 1%;
}

/* affiche les prix */
#les_prix{
    text-align: right;
}

/* Format mobile et tablette */
@media screen and (max-width: 990px){
    /* Placement des prix quand l'écran est en format mobile  */
    .prix_tva{
        order : 1;
    }

    .quantity{
        order : 2;
    }

    .divSuppr{
        order : 3;
    }

    /* ne pas coller le bouton supprimer avec a un autre champ */
    .bouton_supprimer{
        padding-top: 5%;
    }

}


/* Format mobile */
@media screen and (max-width : 576px){
    /* Permet de ne pas coller la partie payer a la partie de présentation du panier */
    #Partie_Droite{
        padding: 0 5%;
    }
}

/* met un bouton qui a le même style que tout les autres */
#bouton_passe_commande{
    background-color: #FF8605;
    border-color: #FF8605;
    color: #000;
    border-radius: 6px;
    transition: .3s ease-in-out;
}

#bouton_passe_commande:hover,#vider_panier:hover{
    transform: scale(.96);
}

/* Bloc de la poubelle pour supprimer le panier entier */
#vider_panier {
    padding-top: 10%;
    text-align: center;
    transition: .3s ease-in-out;
}


/* bouton pour supprimer le panier */
#vider_panier input{
    
    color: #000;
    background-color: #fff;
    text-decoration: none;
    border: none;  
}

/* icon de poubelle signifiant qu'on peut supprimer le panier */
#poubelle{
    background-color: #fff;
    color: #D9D9D9;
    border: none;
    display: block;
    padding-bottom: 3%;
}

/* Style pour le logo pour supprimer le panier */
#poubelle img {
    border: none;
    width : 15%; 
    height : 50%;
    justify-content: center;
} 

/* Form pour les quantité */
.counter {
    width: 150px;
    margin: auto;
    /* display: flex; */
    align-items: center;
    justify-content: center;
}


.counter .valider_quantite{
    width: 100%;
}

/* Form au niveau de la quantité a mettre dans le panier */
.counter input {
    width: 50px;
    border: 0;
    line-height: 30px;
    font-size: 20px;
    border-style: none solid;
    border-color: black;
    text-align: center;
    background: #e9e9ed;
    color: black;
    appearance: none;
    outline: 0;
}

/* Form au niveau de la quantité pour le style */
.counter span {
    display: block;
    font-size: 25px;
    padding: 0 10px;
    cursor: pointer;
    color: black;
    user-select: none;
}