body {
    background: url("~@/images/layout/body_bg.jpg");

    --bs-body-font-family: "Myriad Pro";

    & > header {
        & > img {
            object-fit: contain;
        }
    }

    & > main > div > div.content {
        & > div.container {
            background-color: $white;
            min-height: 10rem;
            border-radius: 0 0 1rem 1rem;
            box-shadow: -0.5rem 0px 0.4rem -0.4rem transparentize($color: $black, $amount: 0.6) inset,
                0.5rem 0px 0.4rem -0.4rem transparentize($color: $black, $amount: 0.6) inset;
            font-size: 1.2rem;

            &.oldEgg {
                background-color: inherit;
                box-shadow: inherit;
                padding-left: 0;
                padding-right: 0;

                & .container {
                    padding-left: 0;
                    padding-right: 0;
                }
            }

            & > .header {
                background-image: url("~@/images/layout/header_matter_effet.png");
                background-repeat: no-repeat;
                background-size: 100% 100%;
                min-height: 7.5rem;

                display: flex;
                justify-content: center;
                align-items: center;

                @include media-breakpoint-up(sm) {
                    min-height: 14.5rem;
                }

                &.small {
                    min-height: initial;
                    height: 4.5rem;
                }
            }
        }
        & .subpart .container {
            background-color: $white;
            min-height: 10rem;
            border-radius: 0 0 1rem 1rem;
            box-shadow: -0.5rem 0 0.4rem -0.4rem transparentize($color: $black, $amount: 0.6) inset,
                0.5rem 0 0.4rem -0.4rem transparentize($color: $black, $amount: 0.6) inset,
                0 0.4rem 0.4rem rgba(0, 0, 0, 0.3) inset;
            font-size: 1.2rem;
            padding-top: 2rem;
        }
    }
}

.text-loue-yellow {
    color: $yellow !important;
}
.text-loue-blue {
    color: $blue !important;
}
.text-loue-breeding {
    color: $breedingGreen !important;
}
.text-loue-food {
    color: $foodYellow !important;
}

.text-arial {
    font-family: Arial, Helvetica, sans-serif !important;
}
.text-serif {
    font-family: Georgia, serif !important;
}

.bg-loue-gray {
    background-color: $greyBG !important;
}
.bg-loue-blue {
    background-color: $blue !important;
}
.bg-loue-breeder {
    background-color: $breedingGreen !important;
}
.bg-loue-food {
    background-color: $foodYellow !important;
}
.bg-loue-distribution {
    background-color: $distribution !important;
}
.bg-loue-footer {
    background-color: $footer_bg !important;
}

.badge-loue-yellow,
.badge-loue-food,
.badge-loue-green,
.badge-loue-gray {
    border: none;
    text-align: center;
    outline: none;
    font-size: 1.45rem;
    border: 0.1rem solid transparent;
    padding: 0.375rem 2.75rem;
    border-radius: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
}

.badge-loue-gray {
    background-color: darken($color: $greyBG, $amount: 1);
    color: $white;
}
.badge-loue-yellow {
    background-color: darken($color: $yellow, $amount: 1);
    color: $blue;
}
.badge-loue-food {
    background-color: darken($color: $foodYellow, $amount: 1);
    color: $white;
}
.badge-loue-green {
    background-color: darken($color: $breedingGreen, $amount: 1);
    color: $white;
}

.back-char {
    position: relative;
    display: inline-block;
    width: 1.1rem;
    height: 1rem;
    background-color: $white;
    overflow: hidden;
    &:after {
        content: "";
        position: absolute;
        top: -15%;
        left: -45%;
        width: 1rem;
        height: 180%;
        background-color: $breedingGreen;
        transform: rotate(-45deg);
    }
    &:before {
        content: " ";
        position: absolute;
        top: -60%;
        left: -45%;
        width: 1rem;
        height: 180%;
        background-color: $breedingGreen;
        transform: rotate(45deg);
    }
}
.back-char.food {
    &:after {
        background-color: $foodYellow;
    }
    &:before {
        background-color: $foodYellow;
    }
}
.back-char.blueLoue {
    &:after {
        background-color: $blue;
    }
    &:before {
        background-color: $blue;
    }
}

.shade:hover {
    -webkit-filter: brightness(85%);
    filter: brightness(85%);
    -webkit-transition: all 10ms ease;
    -moz-transition: all 10ms ease;
    -o-transition: all 10ms ease;
    -ms-transition: all 10ms ease;
    transition: all 10ms ease;
}

.link-shade:hover {
    color: darken($color: $white, $amount: 15) !important;
}

.text-arrow {
    position: relative;
    display: inline-block;
    background-image: url("~@/images/layout/arrow_bg.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-color: $greyBG;
    margin-right: 2rem;
    padding: 0.1rem 1rem;
    padding-right: 3rem;
    color: $white;
    text-shadow: 0 0 0.3rem transparentize($color: $black, $amount: 0.2);
    overflow: hidden;

    &:after {
        content: "";
        position: absolute;
        top: -50%;
        right: -1rem;
        width: 2rem;
        height: 150%;
        background-color: $body-bg;
        transform: rotate(-25deg);
    }
    &:before {
        content: "";
        position: absolute;
        top: 0%;
        right: -1rem;
        width: 2rem;
        height: 150%;
        background-color: $body-bg;
        transform: rotate(25deg);
    }
    &:focus-visible {
        border: 2px solid rgb(13, 110, 253);
    }
    &:hover {
        cursor: pointer;
        color: darken($color: $white, $amount: 10);
        background-color: darken($color: $greyBG, $amount: 10);
        text-decoration: underline;
    }

    &.breeding {
        background-color: $breedingGreen;
        &:hover {
            background-color: darken($color: $breedingGreen, $amount: 10);
        }
    }
    &.bea {
        background-color: $beaGreen;
        &:hover {
            background-color: darken($color: $beaGreen, $amount: 10);
        }
    }
    &.food {
        background-color: $foodYellow;
        &:hover {
            background-color: darken($color: $foodYellow, $amount: 10);
        }
    }
}

.motus {
    position: relative;
    padding: 1rem;
    &::after {
        content: " ";
        color: $white;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        background-color: $blue;
        height: 1.8rem;
        width: 1.8rem;
        border-radius: 1.5rem;
    }
    &.A::after {
        content: "A";
    }
    &.B::after {
        content: "B";
    }
}

.btn-Loue {
    font-size: 1.4rem;
    font-weight: bold;
    color: $white;
    border-radius: 1.5rem;
    background-color: lighten($color: $blue, $amount: 1);
    border: none;
    box-shadow: -1px -1px 0.1rem transparentize($color: $white, $amount: 0.1) inset;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    &:hover {
        color: darken($color: $white, $amount: 4);
        background-color: darken($color: lighten($color: $blue, $amount: 1), $amount: 4);
    }
}

.content-max-width {
    max-width: 30rem;
}

input.searchInput {
    background-color: darken($color: $yellow, $amount: 1);
    color: $white;
    border: none;
    border-radius: 1rem;
    text-align: center;
    outline: none;
    font-size: 1.45rem;
    font-style: italic;
    border: 0.1rem solid transparent;
    &::placeholder {
        color: $white;
        opacity: 1;
    }

    &:focus {
        border: 0.1rem solid $blue;
    }
}

input.commandInput {
    background-color: darken($color: $distribution, $amount: 1);
    color: $white;
    border: none;
    border-radius: 1rem;
    text-align: center;
    outline: none;
    font-size: 1.45rem;
    font-style: italic;
    border: 0.1rem solid transparent;
    max-width: 11rem;
    &::placeholder {
        color: $white;
        opacity: 1;
    }

    &:focus {
        border: 0.1rem solid $blue;
    }
}

span.textDistriResult {
    background-color: darken($color: $white, $amount: 1);
    color: $gray-700;
    border: none;
    border-radius: 1rem;
    text-align: center;
    outline: none;
    font-style: italic;
    border: 0.1rem solid transparent;
    padding: 0.5rem 2rem;
    line-height: 2rem;
    font-size: 1rem;
    white-space: nowrap;
    padding: 0.5rem 1rem;

    @include media-breakpoint-up(sm) {
        font-size: 1.45rem;
        line-height: 2.9rem;
        padding: 0.5rem 2rem;
    }
}

// Glider
.glider-container {
    position: relative;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    &:focus-visible {
        border: 2px solid rgb(13, 110, 253);
    }

    & > .glider {
        &:focus-visible {
            border: 2px solid rgb(13, 110, 253);
        }
    }

    & > .glider-prev,
    & > .glider-next {
        top: 50%;
        transform: translateY(-50%);
        font-size: 5rem;
        color: $blue;
    }
    & .glider-slide {
        // * Pour l'accessibilité
        margin-top: 2px;
        margin-bottom: 2px;
    }
    & > .glider-prev {
        left: -1rem;
        &:focus-visible {
            border: 2px solid rgb(13, 110, 253);
        }
    }
    & > .glider-next {
        right: -1rem;
        &:focus-visible {
            border: 2px solid rgb(13, 110, 253);
        }
    }
    &.labels .glider-slide {
        position: relative;
        text-align: center;
        padding: 1rem;
        min-width: inherit;
        height: 9rem !important;
        & > img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            max-width: inherit;
            object-fit: contain;
            height: 5rem;
            max-width: 7.54rem;
            @include media-breakpoint-up(md) {
                height: 7rem;
                max-width: 8.54rem;
            }
        }
    }
    &.links .glider-slide {
        & > .blue-card {
            display: flex;
            flex-direction: column;
            justify-content: end;
            text-align: center;
            background-color: $blue;
            border-radius: 1rem;
            padding: 1rem;
            margin: 1rem;
            height: 88%;
            & > img {
                min-height: 7rem;
                object-fit: contain;
                width: auto;
                flex-grow: 1;
            }
            & > span {
                word-wrap: normal !important;
                word-break: normal !important;
                hyphens: unset;
                line-height: 1.4rem;
            }
        }
    }
}

.dot-trace {
    position: relative;
    width: 100%;
    display: block;
    height: 90%;
    &:after {
        content: " ";
        position: absolute;
        top: 1rem;
        left: 50%;
        transform: translateX(-50%);
        width: 1px;
        height: 100%;
        border: 2px dashed $greyBG;
    }
    &.breeding:after {
        border-color: $breedingGreen;
    }
    &.bea:after {
        border-color: $beaGreen;
    }
    &.food:after {
        border-color: $foodYellow;
    }
    &.distribution:after {
        border-color: $distribution;
    }
    &.contact:after {
        border-color: $contactRed;
    }
}