html{
    width: 100%;
}
body{
    width: initial;
    overflow-x: hidden;
}
main{
    margin: 5px;
    width: 100%; 
    background-color:var(--base-color-bac);
    position: static;
}
main .articles{
  /*  width: 1315px;*/
    height: 100%;
    display: flex;
    flex-direction: row;
    gap:5px;
    
}
input{
    color: var(--color-text-input);
    background-color:var(--color-input);
    display: flex;
    flex: 100%;
    justify-content: center;
    align-items: center;
    border: none;
    height: 30px;
}
input:hover{
    background-color: var(--base-color1);
    color: rgb(0, 0, 0);
    cursor: pointer;
}
h1{
    font-size: 30px; 
    height: fit-content;
    width: fit-content;
    margin-top: 10px;
}
.hangingshoe{
   /* width: 190px;*/
    width: fit-content;

}
.left{
    height: 100%;
    display: flex;
    flex-direction: column;
    flex:15%;
    padding-inline-start: 0px;
}
.gauche{
    display: flex;
    flex-direction: column;
    flex:35%;
    gap: 5px;
}
.droite{
    display: flex;
    flex-direction: column;
    flex:35%;
    gap: 5px;
}
.decor{
    display: flex;
    flex:15%;
}
main li {
    background-color:  var(--color-a);
    border: 0.5px solid var(--color-font2);
    display: flex;
    max-width: 100%;
    max-height: 40%;
    flex-direction: row;
    justify-content: center;
    font-size: small;
}
li .image{
    display: flex;
    flex:1 0 40%;
}
.image img{
    width: 100%;
    object-fit: cover;
}
li .item_info{
    flex: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 2px;
    padding:5px;
}
li .item_info h2{
    flex:20%;
    font-size: 30px;
}
li .item_info .description{
    font-size: 20px;
    flex: 30%;
}
li .item_info .prixstock{
    font-size: 15px;
    flex: 25%;
}
li .boutton_achat{
    flex: 10%;
    width: 98%;
    padding: 10px;
}
li .boutton_achat.smart.clicked{
    pointer-events: none;
    svg:nth-child(2){
    display: block;
}
svg:nth-child(1){
    display: none;
}
}
li .boutton_achat.clicked{
    pointer-events: none;
}
li .boutton_achat.smart{
    display: none;
}
li .boutton_achat.smart svg:nth-child(2){
    display: none;
}
.rateDiv{
    flex:15%;
    display: flex;
    flex-direction: row;
}
li .item_info .rate{
    flex: 10%;
    display: flex;
    flex-direction: row;
    
}
li .item_info .rates{
    flex: 0%;
    font-size: 15px;
}
span{
    color: var(--base-color1);
}
p,h2{
    color: var(--color-font2);
}
.star{
    width: 15px;
    height: 15px;
    display: block;
}
.star.gold{
    fill: var(--color-star);
    stroke: var(--color-star);
}
/*
span:hover,
span:checked{
    color:green;
}*/
@media (max-width:500px) {
    .left{
        display: none;
    }
    .decor{
        display: none;
    }
    .gauche{
        flex: 50%;
        width: 50%;
    }
    .droite{
        flex: 50%;
        width: 50%;
    }
    main{
        width: 98%;
    }
    .articles{
        width: 100%;
    }
    .article{
        height: 300px;
        max-height: 300px;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .image{
        flex:1 50%;
        height: 50%;
    }
    .item_info{
        flex:1 50%;
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .item_info h2{
        flex: 20%;
    }
    .description{
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

    }
    .prixstock{
        width: 100%;
        flex:50%;
        display: flex;
        flex-direction: row;
    }
    .prixstock span{
        flex: 90%;
    }
    .boutton_achat.smart{
        flex: 10%;
    }
    .star-rating{
        flex: 30%;
        display: flex;
        flex-direction: row;
        justify-content: left;
        align-items:center;
    }
    .rates{
        display: none;
    }
    .stock{
        display: none;
    }
    li .boutton_achat{
    display: none;
    }
    li .item_info h2{
        font-size: 20px;
    }
    li .prixstock{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 5px;
    }
    li .prixstock span{
        flex: 90%;
    }
    li .boutton_achat.smart{
    display: block;
    flex: 10%;
    stroke: var(--base-color1);
    border: 0.5px solid var(--base-color2);
    border-radius: 50%;
    }
    li .boutton_achat.smart:hover{
        cursor: pointer;
    }
}
@media (max-width:1330px) {
    html{
        height: 100%;
    }
    body{
        height: inherit;
    }
    main{
        width:99%;
        height: 100%;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    .articles{
        width:100%;
    }
    .decor{
        display: nonpm ne;
    }
    .left{
        flex:0 10%;
        width: 100px;
    }
    h1{
        font-size: 15px;
    }
    .gauche{
        flex:0 50%;
    }
    .droite{
        flex: 0 50%;
    }
    li .item_info h2{
        font-size: 15px;
    }
    li .item_info{
        flex-grow: 0;
        width: 95%;
        height:inherit;
    }
    li .item_info .description{
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        font-size: 12px;
    }
    span,p{
        font-size: 12px;
    }
}
@media (max-height:820px){
    main li{
        height: 400px;
        max-height: 400px;
    }
}