/** Hero section **/
.hero {
    height: calc(220svh - 70px);
    width: 100vw;
    position: relative;
    translate: 0 -70px;
}


.hero1 {
    position: sticky;
    top: 70px;
    height: 100svh;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    overflow: hidden;

    .img-bg-1,
    .img-bg-2 {
        position: absolute;
    }

    .img-bg-1 {
        top: 0;
        width: 100vw;
        object-fit: cover;
        height: 100vh;
    }

    .img-bg-2 {
        bottom: 0;
        right: -10vw;
        width: auto;
        height: 75vh;
    }

    .title-h1 {
        position: absolute;
        top: 24px;
        z-index: 102;
        translate: 0 30svh;
        scale: 10;
        font-size: 21px;
        color: #FFF;
        width: fit-content;
        font-variation-settings: 'wdth' 100, 'wght' 450;
        transition-timing-function: cubic-bezier(0.17, 0.18, 0, 1);
        transition-duration: 1500ms;
    }

    @media (max-width: 950px) {
        .title-h1 {
            left: 40px;
        }
    }

    span.title-h1 {
        color: #32281D;
        z-index: 101;
    }

    .sub-title {
        font-size: clamp(20px, 2vw, 35px);
        color: #FFF;
        font-variation-settings: 'wdth' 80, 'wght' 350;
        translate: 0 35svh;
        position: absolute;
        top: 21svh;
        transition-timing-function: cubic-bezier(0, 1, 1, 1);
        transition-duration: 1000ms;
    }

    .btn-cta {
        position: absolute;
        z-index: 105;
        bottom: min(50px, 2vw);
        text-decoration: none;
        padding: min(17px, 1.5vw) min(40px, 3vw);
        background-color: #FFF;
        border-radius: 3px;
        scale: 1;
        transition-timing-function: cubic-bezier(0, 1, 1, 1);
        transition-duration: 300ms;

        &:hover {
            scale: 0.98;
        }

        .text-content {
            color: var(--text-color-dark);
            font-variation-settings: 'wdth' 80, 'wght' 400;
            text-transform: uppercase;
            font-size: clamp(10px, 1vw, 14px);
        }
    }

    @media screen and (max-aspect-ratio: 3/5) {
        .btn-cta {
            bottom: auto;
            top: max(60vw, 35svh);
        }

        .sub-title {
            top: max(40vw, 25svh);
        }
    }

    .vertical-text {
        position: absolute;
        top: max(100svh - (50svh - 10px + (8.56vw - 0.7%)), 100svh - (80vw - 10px + (8.56vw - 0.7%)));
        z-index: 101;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        white-space: nowrap;
        font-size: min(6.67svh, 10.67vw);
        font-variation-settings: 'wdth' 80, 'wght' 400;
        color: #FFF;
        -webkit-text-stroke: #FFF 1px;
        text-transform: uppercase;

        &.strok {
            z-index: 102;
            color: #00000000;
            -webkit-text-stroke: #FFF 1px;
            padding: 0 5svh;
        }

        &.left {
            left: max(50% - 20.21svh, 50% - 32.33vw);
            translate: -50% 0;
        }

        &.right {
            left: min(50% + 19.83svh, 50% + 31.73vw);
            translate: -50% 0;
        }

        .char {
            translate: 0 5svh;
            opacity: 0;
            display: inline-block;
            transition-duration: 700ms;
            transition-timing-function: cubic-bezier(0.17, 0.18, 0, 1);
            scale: 0.8;
        }

        &.strok .char {
            transition-duration: 700ms;
            transition-timing-function: cubic-bezier(0.17, 0.18, 0, 1.5);
            rotate: 40deg;
            -webkit-text-stroke: #ffffff 1px;
        }
    }

    .etiquettes,
    .bouteilles {
        position: absolute;
        z-index: 101;
        bottom: calc(8.56vw - 0.7%);

        img {
            height: min(50svh, 80vw);
            width: auto;
        }
    }

    .etiquettes {
        z-index: 104;
    }

    .comptoir {
        position: absolute;
        bottom: 0;
        width: 100vw;
        height: 8.56vw;

        img {
            width: 100%;
        }
    }

    .block-img-decor {
        translate: 0 min(50svh + 8.56vw, 80vw + 8.56vw);
        transition-duration: 500ms;
        transition-timing-function: cubic-bezier(0, 0, 0, 1);
    }
}




/* section presentation */
.presentation {
    padding-inline: calc(100px + (100% / 12));
    background-color: var(--color-grey);
    height: auto;
    position: relative;

    h2 {
        font-size: 2.2vw;
        font-variation-settings: 'wdth' 80, 'wght' 300;
        color: var(--text-color-dark);
        text-transform: uppercase;
        margin-bottom: 0.5vw;
        translate: 0 calc(1.4vw + 100%);
        transition-duration: 1500ms;
        transition-timing-function: cubic-bezier(0, 0, 0, 1);
    }

    .container-block {
        display: flex;
        justify-content: space-between;
        padding: 1vw 0 5vh 0;
        background-color: var(--color-grey);
        position: sticky;

        .text-container {
            width: 60%;
            padding-top: 2vw;

            .block-text,
            .block-text.with-title.end {
                line-height: 1.4;
                margin-bottom: 3vw;

                .text-important {
                    color: var(--color-red);
                    font-variation-settings: 'wdth' 100, 'wght' 350;
                }
            }

            .text-content {
                font-variation-settings: 'wdth' 100, 'wght' 250;
                font-size: 1.2vw;
            }

            .with-title {
                margin-bottom: 1.5vw;
            }

            h3 {
                font-variation-settings: 'wdth' 100, 'wght' 400;
                font-size: 1vw;
                margin-bottom: 0.4vw;
            }

            .text-content-min {
                font-variation-settings: 'wdth' 100, 'wght' 250;
                font-size: 1vw;
            }

            .btn-cta {
                display: block;
                width: fit-content;
                text-decoration: none;
                padding: min(10px, 1vw) min(30px, 2vw);
                border-radius: 3px;
                border: 1px var(--text-color-dark) solid;
                scale: 1;
                transition-timing-function: cubic-bezier(0, 1, 1, 1);
                transition-duration: 300ms;

                &:hover {
                    scale: 0.98;
                }

                .text-content-btn {
                    color: var(--text-color-dark);
                    font-variation-settings: 'wdth' 80, 'wght' 400;
                    text-transform: uppercase;
                    font-size: clamp(10px, 1vw, 14px);
                }
            }
        }

        .block-img {
            width: 30%;
            overflow: hidden;

            img {
                width: 100%;
                height: auto;
                transition-duration: 1500ms;
                transition-timing-function: cubic-bezier(0, 0, 0, 1);
                scale: 1.2;
            }
        }
    }

    &.active h2 {
        translate: 0 0;
    }

    &.active {
        .block-img {
            img {
                scale: 1;
            }
        }
    }

    @media (max-width: 1600px) {
        padding-inline: 5vw;

        .container-block {
            .text-container {
                .text-content {
                    font-size: 1.5vw;
                }

                .with-title {
                    margin-bottom: 1.7vw;
                }

                h3 {
                    font-size: 1.3vw;
                    margin-bottom: 0.4vw;
                }

                .text-content-min {
                    font-size: 1.3vw;
                }

                .block-text,
                .block-text.with-title.end {
                    margin-bottom: 4vw;
                }
            }
        }
    }

    @media (max-width: 950px) {
        text-align: center;

        h2 {
            font-size: 20px;
            margin-bottom: 1vw;
            width: 100%;
        }

        .container-block {
            .text-container {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 100%;

                .text-content {
                    font-size: 13px;
                }

                .with-title {
                    margin-bottom: 16vw;
                }

                h3 {
                    font-size: 15px;
                    margin-bottom: 0.6vw;
                }

                .text-content-min {
                    font-size: 14px;
                }

                .block-text,
                .block-text.with-title.end {
                    margin-bottom: 5vw;
                }
            }

            .block-img {
                display: none;
            }
        }
    }
}




/* section category */

.categories {
    padding: 100px;
    background-color: #ffffff;

    h2 {
        font-size: 33px;
        font-variation-settings: 'wdth' 80, 'wght' 350;
        color: var(--text-color-dark);
        text-transform: uppercase;
        margin-bottom: 80px;
        text-align: center;
    }

    .block-link {
        text-decoration: none;
    }

    .list-categories {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 20px;


        .category-block {
            grid-column: span 4;
            margin-bottom: 70px;

            .block-img {
                width: 100%;
                height: fit-content;

                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 3px;
                }
            }

            .text-content {
                padding: 25px 0 10px 0;

                .category-title {
                    color: var(--text-color-dark);
                    font-variation-settings: 'wdth' 80, 'wght' 350;
                    text-transform: capitalize;
                    font-size: clamp(10px, 0.9vw, 16px);
                    text-align: center;
                }
            }
        }
    }

    .block-cta {
        display: flex;
        justify-content: center;

        .btn-cta {
            text-decoration: none;
            padding: min(10px, 1vw) min(40px, 3vw);
            border-radius: 3px;
            border: 1px var(--text-color-dark) solid;
            transition-timing-function: cubic-bezier(0, 1, 1, 1);
            transition-duration: 300ms;

            &:hover {
                scale: 0.98;
            }

            .text-content-btn {
                color: var(--text-color-dark);
                font-variation-settings: 'wdth' 80, 'wght' 400;
                text-transform: uppercase;
                font-size: clamp(10px, 1vw, 12px);
            }
        }
    }

    @media (max-width: 1200px) {
        padding: 10vh 5vw;

        .list-categories {
            .category-block {
                grid-column: span 6;
                margin-bottom: 5vw;

                .text-content {
                    .category-title {
                        font-size: clamp(20px, 2vw, 30px);
                    }
                }
            }
        }
    }

    @media (max-width: 630px) {
        h2 {
            font-size: 20px;
        }

        .list-categories {
            .category-block {
                grid-column: span 12;

                .text-content {
                    .category-title {
                        font-size: clamp(20px, 2vw, 30px);
                    }
                }
            }
        }
    }
}

.images-separation {
    overflow: hidden;
    height: calc((1632 / 2912) * 100vw);
    position: relative;

    .list-image-slider {
        position: relative;
        width: 100vw;
        height: 100vw;

        .image-slider {
            position: absolute;
            z-index: 3;
            overflow: hidden;
            width: 100vw;
            height: calc((1632 / 2912) * 100vw);
            transform-origin: center center;
            /* Explicitement défini */
            transition-duration: 2000ms;
            transition-timing-function: cubic-bezier(0, 0, 0, 1);
            display: flex;
            justify-content: center;
            align-items: center;

            &.move-r {
                rotate: 90deg;
                animation-timing-function: cubic-bezier(0, 1, 1, 1);
                animation-name: slide-n-2;

                .block-img {
                    rotate: -90deg;
                    animation-timing-function: cubic-bezier(0, 1, 1, 1);

                    img {
                        animation-timing-function: cubic-bezier(0, 1, 1, 1);
                        animation-name: slide-n;
                    }
                }
            }

            &.move-t-o {
                translate: 0 -100vw;

                img {
                    translate: 0 100vw;
                    opacity: 0;
                }
            }

            .block-img {
                width: 100vw;
                height: 100vw;
                overflow: hidden;
                display: flex;
                justify-content: center;
                align-items: center;
                transform-origin: center center;
                /* Explicitement défini */
                transition-duration: 2000ms;
                transition-timing-function: cubic-bezier(0, 0, 0, 1);
            }

            img {
                transition-duration: 2000ms;
                transition-timing-function: cubic-bezier(0, 0, 0, 1);
                transform-origin: center center;
                /* Même point d'origine */
                width: 100vw;
                height: calc((1632 / 2912) * 100vw);
            }
        }
    }

    .bg-shad {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #000000;
        z-index: 10;
        top: 0;
        opacity: .2;
    }

    .container-text {
        position: absolute;
        bottom: 3vw;
        z-index: 10;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        .text-content {
            font-size: 16px;
            color: #FFF;
            font-variation-settings: 'wdth' 80, 'wght' 250;
            line-height: 1.4;
            text-align: center;
            margin-bottom: 15px;
        }

        a.cta {
            font-size: 16px;
            color: #FFF;
            font-variation-settings: 'wdth' 80, 'wght' 250;
            line-height: 1.4;
            text-align: center;
            text-decoration: none;
            position: relative;
        }

        a.cta:after {
            position: absolute;
            content: "";
            bottom: -3px;
            width: 100%;
            height: 1px;
            left: 0;
            background-color: #FFF;
        }
    }
}

@keyframes slide-n-2 {
    0% {
        translate: 0 -100vw;
    }

    25% {
        translate: 0 -100vw;
    }

    75% {
        translate: 0 0;
    }

    100% {

        translate: 0 0;
    }
}

@keyframes slide-n {
    0% {
        translate: 0 100vw;
        opacity: 0;
    }

    25% {
        opacity: 0;
        translate: 0 100vw;
    }

    75% {
        opacity: 1;
        translate: 0 0;
    }

    100% {
        translate: 0 0;
        opacity: 1;
    }
}