@charset "UTF-8";

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    padding: 0;
    position: relative;
    text-align: left;
    background: linear-gradient(to bottom, rgb(from var(--brand-primary-dark) r g b / 0.375), rgb(from var(--brand-primary-dark) r g b / 0.1));
}

.site-header {
    position: relative;

    img {
        &.logo, &.nav-logo {
            width: 100%;
            height: auto;
        }
    }

    .header-logo-wrapper {
        flex: auto;
        background: var(--brand-light-color);
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: center;

        .col {
            flex: unset;

            @media screen and (min-width: 992px) {
                padding-block: 1.75rem;
            }
        }
        .logo-img {
            width: 150px;

            @media screen and (min-width: 768px) {
                width: clamp(13.75rem, calc(-1.8056rem + 32.4074vw), 22.5rem);
            }
        }
    }

    .header-img-wrapper {
        height: clamp(12.5rem, 6.9444rem + 27.7778vw, 31.25rem);
        border-top: 1px solid rgb(from var(--brand-gray-color) r g b / 0.5);

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;

            &.index-header {
                object-position: 0% 50%;
            }
            &.legal-header {
                object-position: 50% 50%;
            }
        }

    }
}


.content {
    background: var(--brand-light-color);

    .sticky-sentinel {
        height: 1px;
        background: var(--brand-primary-color);
    }

    .nav {
        background: var(--brand-primary-color);
        flex-flow: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;

        position: sticky;
        z-index: 100;
        top: 0;

        .col-logo {
            padding: 0;
        }

        .nav-logo-img {
            width: 0;
            margin-bottom: -1rem;
        }

        &.is-sticky {
            justify-content: space-between;

            &::after {
                content: '';
                position: absolute;
                inset: 0;
                box-shadow: rgb(from var(--brand-dark-color) r g b / 0.25) 0 2px 4px;
                pointer-events: none;
            }

            .col-logo {
                padding: 1rem;
            }

            .nav-logo-img {
                width: 120px;
            }
        }

        @media screen and (min-width: 768px) {
            flex-flow: row;

            .nav-logo-img {
                margin-bottom: 0;
            }

            &.is-sticky {
                .nav-logo-img {
                    width: 150px;
                }
            }
        }

        @media screen and (min-width: 992px) {
            &.is-sticky {
                .nav-logo-img {
                    width: 180px;
                }
            }
        }

        .col {
            flex: unset;

            a {
                transition: background 0.25s ease, color 0.25s ease;
                text-decoration: none;
                line-height: 1;
                text-transform: uppercase;
                display: inline-block;
                padding-inline: 0.5rem ;
                font-size: clamp(0.7625rem, calc(0.2606rem + 1.3942vw), 1.125rem);
                @media screen and (min-width: 544px) {
                    padding-inline: 1rem;
                }
                &:first-child {
                    padding-left: 0;
                }
                &:last-child {
                    padding-right: 0;
                }
                color: var(--brand-light-color);
                &:hover {
                    color: var(--brand-primary-dark);
                }
            }
        }
    }
}

.site-footer {
    color: var(--brand-light-color);
    background:  var(--brand-dark-color);

    .row-copy {

        > .col p {
            border-top: 1px solid rgb(from var(--brand-gray-color) r g b / 0.5);
        }
    }

    .contact-box {
        padding: 1rem;
        border: 1px solid rgb(from var(--brand-gray-color) r g b / 0.5);
    }

    .datev-logo-wrapper {
        background: var(--brand-light-color);
        padding: 0.375rem;
        width: 4rem;
        img {
            width: 100%;
            height: auto;
        }
    }

    .petit {
        color: rgb(from var(--brand-light-color) r g b / 0.5);
        line-height: 1.35;
    }

    h4, h5 {
        color: var(--brand-light-color);
    }

    h4 {
        text-transform: uppercase;
        margin-bottom: 1.25rem;
    }

    .footer-navigation {
        .menu-item {
            display: block;
            text-decoration: none;
            text-transform: uppercase;
            font-weight: var(--brand-font-lght);
            color: var(--brand-light-color);
            &:hover {
                color: var(--brand-primary-color);
            }
            &:not(:last-child) {
                margin-bottom: 0.5rem;
            }
        }
    }

    .footer-contact {
        a {
            text-decoration: none;
            color: rgb(from var(--brand-light-color) r g b / 0.75);
            &:hover {
                color: var(--brand-primary-color);
            }
        }
    }
}

.btt-wrapper {
    position: fixed;
    z-index: 1000;
    left: 0;
    right: 0;
    bottom: 3.5rem;

    @media screen and (min-width: 576px) {
        bottom: 2.75rem;
    }

    .top-btn {
        margin-left: auto;
        line-height: 1;
        display: block;
        width: 2.25rem;
        height: 2.25rem;
        padding: 0.5rem;
        border-radius: 50%;
        border: 1px solid var(--brand-light-color);
        background: var(--brand-gray-color);
        opacity: 0;
        pointer-events: none;

        &.btn-show {
            opacity: 0.5;
            pointer-events: auto;
        }

        &:hover {
            opacity: 1;
        }

        svg {
            transform: rotate(-90deg);
            fill: var(--brand-light-color);

            path {
                stroke: var(--brand-light-color);
                stroke-width: 2;
            }
        }
    }
}