ldc-doux/resources/sass/frontend/_globals.scss

html {
    font-size: 100%;
}

body {
    font-size: $globalfont;
    font-family: $fontbarlow-regular;
    line-height: 1.4;
}

button {
    border: 0 none;
    background-color: transparent;
    cursor: pointer;
}

img {
    width: 100%;
    max-width: max-content;
}

.field__error{
    color: red;
}
#frise-autoscroll {
    position: absolute;
    width: 100%;
    height: 100%;

    .img-frise {
        position: relative;
        width: max-content;
        margin: 0 auto;
        display: flex;
        flex-direction: column;

        svg {
            width: 272px;
            height: 1280px;
            position: relative;
        }

        & svg:first-child {
            top: -40px;
        }
        & svg:nth-child(2) {
            top: -100px;
        }
        & svg:nth-child(3) {
            top: -160px;
        }

        .svg-mask {
            position: sticky;
            width: 100%;
            height: 100px;
            bottom: 0;
            background-image: linear-gradient(
                to top,
                #ffffff,
                #ffffff,
                #ffffff,
                transparent
            );
        }
    }
}

#backtotop {
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    background-color: $color-main;
    z-index: 99;

    .arrow {
        border: solid $color-light;
        border-width: 0 3px 3px 0;
        display: inline-block;
        padding: 3px;
        &.up {
            transform: rotate(-135deg);
        }
    }
}

#search {
    width: 24px;
    height: 24px;
    margin-left: 15px;
    cursor: pointer;
}

.product ul.more li {
    width: max-content;
    max-width: 100%;

    p:first-of-type {
        font-size: 18px;

        &::before {
            top: 50%;
            transform: translateY(-50%);
        }
    }
}
.product .img-bloc {
    position: relative;

    &::after {
        content: "";
        display: none;
        background-image: url(~@/images/picto_halal.png);
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        right: 0;
        bottom: 0;
        width: 25%;
        height: 25%;
    }
    &.view-halal::after {
        display: block;
    }
}
ul.more {
    margin-top: 50px;

    li {
        align-items: center;
        position: relative;
        padding-left: 25px;
        // margin-bottom: 30px;
        width: 100%;

        &:last-of-type {
            margin-bottom: 0;
        }
        p:first-of-type {
            position: relative;
            font-size: 26px;

            &::before {
                content: "";
                position: absolute;
                left: -2rem;
                top: 20px;
                width: 10px;
                height: 10px;
                background-color: $color-blue;
                border-radius: 50%;
            }
        }
        .label img {
            width: 100px;
        }
    }
}

ul.infos {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    li {
        width: 110px;
        padding: 10px;
        text-align: center;
        color: $color-blue;
        font-family: $fontbarlow-bold;
    }
    span {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 85px;
        height: 85px;
        padding: 20px;
        margin: 20px auto;
        background-color: $color-main;
        border-radius: 50%;
    }
}
.offset-anchor {
    position: relative;
    top: -100px;
}
.banner {
    position: absolute;
    bottom: -1px;
    height: 50px;
    width: 100%;

    svg {
        position: absolute;
        bottom: 0;
    }
}
.contact-page {
    position: relative;
    align-items: center;

    #picto-localisation {
        left: 50%;
        transform: translateX(-50%);
        top: 0;
        margin-right: 0;
    }
    & > p {
        width: 100%;
        text-align: center;
    }
    @media screen and (min-width: 768px) {
        #picto-localisation {
            top: 5%;
        }
    }
    @media screen and (min-width: 1024px) {
        & > p {
            width: unset;
            // text-align: initial;
        }
        // #picto-localisation {
        //     margin-right: 30px;
        // }
    }
}

@media screen and (min-width: 480px) {
    ul.infos {
        flex-direction: row;
        align-items: initial;
    }
}

@media screen and (min-width: 800px) {
    #search {
        width: 28px;
        height: 28px;
        margin-left: 25px;
    }
    main {
        padding-top: 100px;
    }
    ul.infos {
        li {
            flex-basis: 20%;
        }
    }
}

@media screen and (max-width: 799px) {
    main {
        padding-top: 50px;
    }
}