:root {
    --bleu: #001a62;
    --vert: #336000;
    --rouge: #940022;
    --jaune: #ffe30a;
    --orange: #e15106;
    --rose: #f48f93;
}

[bleu] {
    --color: var(--bleu);
}

[vert] {
    --color: var(--vert);
}

[rouge] {
    --color: var(--rouge);
}

[jaune] {
    --color: var(--jaune);
}

[orange] {
    --color: var(--orange);
}

[rose] {
    --color: var(--rose);
}

item-catalogue {
    display: grid;
    grid-template-columns: auto 1fr;

    gap: 4rem;

    & > div {
        white-space: nowrap;

        & > p {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
    }

    & > ul {
        display: flex;

        margin: 1rem 0;
        padding: 0 .2rem;
        gap: 2rem 1rem;
        flex-wrap: wrap;

        > li {
            display: block;

            > header {
                margin-bottom: .2rem;

                > * {
                    display: inline-block;
                }
            }

            > img {
                width: 7rem;
                height: 7rem;
                object-fit: cover;
            }
        }
    }

    img {
        margin: 0;
    }
}

@media (max-width: 600px) {
    item-catalogue {
        grid-template-columns: 1fr;
        gap: 1rem;

        &>ul {
            display: grid;
            grid-template-columns: repeat(auto-fill, 6rem);
            justify-content: center;

            margin: 0;
            margin-bottom: 1rem;
        }
    }
}

swatch-color {
    display: inline-block;
    height: 1em;
    width: 1em;
    border-radius: 1em;
    background-color: var(--color);
}

missing-image {
    display: grid;
    place-content: center;
    background: repeating-linear-gradient(
        -45deg,
        white,
        white 10px,
        rgb(237, 237, 237) 10px,
        rgb(237, 237, 237) 20px
    );

    &::before {
        content: "pas d'image";
        color: grey;
        text-align: center;
    }
}