@font-face {
    font-family: PsbHeader;
    src: url(../fontes/header.ttf) format('truetype');
}

@font-face {
    font-family: PsbH123456;
    src: url(../fontes/titre.ttf) format('truetype');
}

:root {
    --h0: 23;
    --hsl-bg: var(--h0) 50% 98%;
    --miniature-height: 8rem;
}

* {
    font-family: Verdana, Arial, sans-serif;
    @media (width >= 900px) { font-size: 1.0rem; }
    @media (width < 900px) { font-size: 0.85rem; }
}

.i { font-style: italic; }
.b { font-weight: bold; }
.n { font-weight: normal; }
.c { text-align: center !important; }
.r { text-align: right !important; }
.l { text-align: left !important; }
.flr { float: right; }

body {
    background-color: hsl(var(--hsl-bg));
    padding: 0;
    margin: 0;
}

h1, h2, h3, h4, h5, h6 { font-family: PsbH123456, serif; }

@media (width >= 900px) {
    h1 { font-size: 250%; }
    h2 { font-size: 170%; }
}
@media (width < 900px) {
    h1 { font-size: 200%; }
    h2 { font-size: 140%; }
}

hr {
    margin: 5rem 0;
    border: 1px solid hsl(var(--h0) 50% 50%);
}

.pc-only {
    @media (width < 900px) { display: none; }
}
.tel-only {
    @media (width >= 900px) { display: none; }
}


/*********************************************************************************************************/


header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    background-color: hsl(var(--h0) 75% 25%);

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;

    @media (width >= 900px) { font-size: 2.0rem; padding: 2rem; }
    @media (width < 900px) { font-size: 1.0rem; padding: 1.1rem; }

    a {
        font-family: PsbHeader, serif;
        color: hsl(var(--h0) 75% 90%);
        text-decoration: none;
        font-size: inherit;
    }

    form {
        font-size: inherit;

        button {
            border: none;
            background: none;
            font-size: inherit;

        }
    }
}


/*********************************************************************************************************/


main {
    margin-bottom: 10rem;
    min-height: 50vh;

    @media (width >= 900px) { padding: 1rem 2rem; }
    @media (width < 900px) { padding: 1rem; }

    a {
        color: darkblue;
        font-weight: bolder;
        &:hover { color: blue; }
    }

    form {
        button {
            border: none;
            border-radius: 0.5rem;
            background-color: hsl(var(--h0) 80% 50%);
            color: hsl(var(--h0) 75% 95%);
            text-transform: uppercase;
            font-weight: bolder;

            @media (width >= 900px) { padding: 1.5rem 2rem; }
            @media (width < 900px) { padding: 1rem; }

            &:hover {
                cursor: pointer;
                background-color: hsl(var(--h0) 80% 45%);
            }
        }

        :is(input, textarea, select)::placeholder {
            font-weight: 300;
            font-style: italic;
        }

        input[type="text"], input[type="number"], input[type="datetime-local"], input[type="email"],
        textarea {
            border: 1px solid hsl(var(--h0) 50% 50%);
            border-radius: 2rem;

            @media (width >= 900px) { padding: 1rem 2rem; }
            @media (width < 900px) { padding: 1rem; }
        }

        input[type="file"] {
            margin-bottom: 1rem;
        }

        > div.parametres {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 2rem 4rem;
            align-items: flex-start;

            > div {
                img {
                    height: 15rem;
                    border: 0.4rem dotted hsl(var(--h0) 50% 70%);
                    border-radius: 2rem;
                    &.prime {
                        border-color: hsl(var(--h0) 80% 50%);
                        border-style: solid;
                    }
                }

                > div {
                    &:nth-child(1) { font-weight: bold; }
                    &:nth-child(2) { margin-top: 0.5rem; }
                    &.options {
                        text-align: center;
                        a { text-decoration: none; }
                    }
                }
            }
        }
    }

    .catalogue-ateliers {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem 5rem;

        > a {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            gap: 0.5rem;

            color: hsl(var(--h0) 10% 25%);
            text-decoration: none;

            border-radius: 100vh;
            padding-right: 4rem;
            background-color: hsl(var(--h0) 50% 90%);
            height: calc(var(--miniature-height) + 3px);
            width: 30rem;

            &:hover {
                background-color: hsl(var(--h0) 90% 80%);
            }

            > .miniature > img {
                margin-top: 4px;
                height: var(--miniature-height);
                aspect-ratio: 1;
                object-fit: cover;
                border-radius: 50%;
            }

            > .infos {
                height: calc(var(--miniature-height) - 1rem);
                display: flex;
                flex-direction: column;
                flex-wrap: nowrap;
                justify-content: space-between;

                > .date {
                    font-size: 80%;
                    font-weight: bold;
                }

                > .titre {
                    font-size: 120%;
                    font-weight: normal;
                    font-family: PsbH123456, sans-serif;
                    margin-left: 0.5rem;
                }

                > .places {
                    font-size: 80%;
                    font-weight: normal;
                }
            }
        }
    }

    .fiche-atelier {
        h2:not(:first-of-type) {
            margin-top: 2rem;
        }

        > div {
            margin-left: 2rem;

            &.illustrations {
                margin-top: 4rem;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                gap: 1rem;

                > img {
                    max-height: 20rem;
                    max-width: 95%;
                    border: 2px solid hsl(var(--h0) 80% 50%);
                    border-radius: 2rem;
                }
            }
        }
    }
}