@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
/* https://fonts.google.com/selection/embed */

#liste-puzzles {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
    /* background-color: violet; */
}

.card-produit {
    max-width: 300px;
    border: 1px solid var(--bordure-card);
    border-radius: 0.5rem;
    padding: 1rem;

    img {
        max-width: 100%;
        display: block;
        margin: auto;
        padding: 1rem;
        cursor: pointer;
        transition: all 0.3s ease-in-out;

        &:hover {
            transform: scale(1.1);
        }
    }

    span {
        display: block;
    }

    .fabricant {
        text-align: right;
        font-style: italic;
    }

    .prix {
        font-size: 1.25rem;
        margin-bottom: 0.5rem;
        font-weight: 300;
    }

    .nom {
        font-weight: bold;
        height:2em;
    }

    a {
        display: block;
        margin: auto;
        margin-top: 1.5rem;
        padding: 0.75rem 3rem;
        border-radius: 20px;
        background-color: var(--fourth-color);
        color: var(--second-color);
        border: 1px solid var(--second-color);
        font-size: 1rem;
        cursor: pointer;
        text-decoration: none;
        text-align: center;

        &:hover {
            background-color: var(--second-color);
            color: var(--fourth-color);
        }
    }

}

.prix {
    font-family: "Roboto Mono", monospace;
}

.fiche-produit {
    p { text-align: justify; }
}

.nouveau {
    box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
}