@font-face {
    font-family: 'Crimson Text';
    src: url('fonts/CrimsonText-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Odstemplik';
    src: url('fonts/odstemplik.ttf') format('truetype'),
         url('fonts/odstemplik.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}



.carte{
    width:auto;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: rgb(153, 105, 113);
    border-radius: 15px;
    margin-top: 20px;
}

.fiche-categorie{
    width:100%;
}

h4 {
    font-family: 'Odstemplik', sans-serif;
    font-size: 3rem;
    text-align: center;
    font-weight: lighter;
    margin-bottom: -15px;
    margin-top: 20px;
}

.des-categorie {
    font-family: 'Crimson Text', sans-serif;
    font-size: 20;
    text-align: center;
    font-weight: lighter;
    margin: 0px 30px 30px 30px;
    font-style: italic;
}

.produits-block{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    color: rgb(101, 101, 101);
}

.fiche-produit{
    font-family: 'futura';
    width:240px;
    height:auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 19px;
    margin-right: 19px;
    margin-bottom: 20px;
}

h5{ 
    font-size: 1.1rem;
    margin-top: 30px;
    text-align: center;
    font-weight: lighter;
}

.visuel-produit{
    width:240px;
    border-radius: 5px;
}

.des-produit{
    font-weight: lighter;
    text-align: center;
    font-size: 15;
    margin-bottom: 20px;
}

.trait{
    width:180px;
    border-bottom: rgb(166, 166, 166) solid 3px;
    margin-bottom: 20px;
    margin-top: 20px;
}

.rens{
    font-style: italic;
    font-size: 15;
    color: rgb(105, 99, 147);
}

.fiche-categorie, .fiche-produit {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fiche-categorie.visible, .fiche-produit.visible {
    opacity: 1;
    transform: translateY(0);
}



@media screen and (max-width: 768px) {
    .carte{
        width:90%;
    }
}