/* ======================================================================================================
* intro home - section
* ====================================================================================================== */

#intro-home {
    position                 : relative;
    overflow                 : unset !important;
    width                    : 100%;
    height                   : 100%;
    margin-top               : -20px;
    padding-bottom           : 250px;

    --height-bottle          : 675px;
    --negative-height-bottle : -675px;
}

#intro-home__container {
    position       : relative;
    position       : relative;
    overflow       : hidden !important;
    display        : flex;
    flex-direction : column;
    margin-top     : var(--negative-height-bottle);
}

/* ===================================================
* Images background and sticky
* =================================================== */

/* =========== Bottle sticky  =========== */
.intro-home__bottle-sticky {
    position  : -webkit-sticky;
    position  : sticky;
    top       : calc((100vh - var(--height-bottle)) / 2);
    left      : 50%;
    transform : translate(-50%, 0%);
    z-index   : 20;
    width     : 212px;
    height    : var(--height-bottle);
}

.intro-home__bottle-sticky img {
    width           : 100%;
    height          : 100%;
    object-fit      : contain;
    object-position : center;
}

.intro-home__background-container {
    position      : relative;
    overflow      : hidden;
    width         : 100%;
    height        : 100%;
    margin-bottom : -30%;
}

/* =========== Hot points =========== */

.intro-home__hot-points {
    position  : absolute;
    bottom    : 0px;
    left      : 50%;
    transform : translate(-50%, 0);
    z-index   : 30;
    width     : 270px;
    height    : var(--height-bottle);
}

.intro-home__hot-points .hot-points {
    font-size       : 13px;
    color           : var(--primary-color-ponsot);
    text-align      : right;
    text-transform  : uppercase;
    opacity         : 0;
    position        : absolute;
    display         : flex;
    flex-direction  : row;
    justify-content : center;
    align-items     : center;
    gap             : 30px;
}

.intro-home__hot-points .hot-points__circle {
    width              : 60px;
    height             : 60px;
    border             : 1px solid var(--primary-color-ponsot);
    border-radius      : 50px;
    background-color   : transparent;
    -webkit-box-shadow : 0px 0px 0px 10px rgba(185, 211, 0, 0.26);
    box-shadow         : 0px 0px 0px 10px rgba(185, 211, 0, 0.26);
}

.intro-home__hot-points .hot-points:nth-child(1) {
    top  : -28px;
    left : -45px;
}

.intro-home__hot-points .hot-points:nth-child(2) {
    top  : 70px;
    left : -80px;
}

.intro-home__hot-points .hot-points:nth-child(3) {
    bottom : 62px;
    left   : -90px;
}

/* =========== Overlay  ===========*/
.intro-home__overlay {
    opacity  : 0.18;
    position : absolute;
    top      : -16%;
    right    : -25%;
    z-index  : 10;
    width    : 60vw;
}

.intro-home__overlay img {
    width           : 100%;
    height          : 100%;
    object-fit      : cover;
    object-position : center;
}

/* =========== Background  ===========*/
.intro-home__background-rock {
    position : relative;
    overflow : hidden; /* Empêche les éléments de dépasser */
    width    : 100vw;
    height   : 1920px;
}

.background-rock-before,
.background-rock-after {
    position            : absolute;
    top                 : 0;
    left                : 0;
    width               : 100%;
    height              : 100%;
    background-repeat   : no-repeat;
    background-position : center;
    background-size     : cover;
}

.background-rock-before {
    background-image : url("/wp-content/uploads/2024/11/photo-1680026548022-e76f693d0a62.jpg");
}

.background-rock-after {
    background-image : url("/wp-content/uploads/2024/11/rock-background-right.png");
}


.intro-home__background-first-plan {
    position       : absolute;
    top            : calc(10% + 6px);
    left           : calc(50% + 9px);
    transform      : translate(-50%, -50%);
    z-index        : 50;
    display        : flex;
    align-items    : center;
    width          : 434px;
    height         : 1920px;
    pointer-events : none;
}

.intro-home__image-mobile-rock {
    display : none;
}

/*.intro-home__background-first-plan img {
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(0px 0px 23px red);
}*/

/* ===================================================
* END Images background and sticky
* =================================================== */

/* ===================================================
* Partie
* =================================================== */

.intro-home__partie {
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    align-items     : flex-start;
    gap             : 15px;
}

.intro-home__partie-1::before,
.intro-home__partie-2::before {
    opacity       : 0.62;
    position      : absolute;
    top           : 0;
    left          : 0;
    z-index       : 1;
    width         : 100%;
    height        : 100%;
    content       : "";
    border-radius : 50%;
    background    : #000000 0% 0% no-repeat padding-box;
    filter        : blur(50px);
}

/* ===== Partie 1 =====*/
.intro-home__partie h2 {
    margin-bottom : 0px !important;
}

.intro-home__partie-1 {
    text-align  : center;
    position    : absolute;
    top         : 50%;
    left        : 6%;
    transform   : translate(0, -50%);
    align-items : center;
    max-width   : 650px;
}

.intro-home__partie-1 > * {
    z-index : 2;
}

.intro-home_separator-container {
    position : relative;
    overflow : hidden;
    width    : 1px;
    height   : 45px;
}

.intro-home_separator {
    position         : absolute;
    left             : 0;
    width            : 1px;
    height           : 100%;
    animation        : infinitySeparatorAnim 1.5s ease-in-out 0s infinite normal forwards;
    background-color : var(--primary-color-ponsot);
}


@keyframes infinitySeparatorAnim {
    0% {
        height : 0;
        top    : 0;
    }
    49% {

    }
    50% {
        height : 100%;
    }
    100% {
        height : 0;
        top    : 100%;
    }
}


/* ===== Partie 2 =====*/
.intro-home__partie-2 {
    position  : absolute;
    top       : 50%;
    right     : 15%;
    z-index   : 60;
    max-width : 360px;
}

.intro-home__partie-2 > * {
    z-index : 2;
}

/* ===== Partie 3 =====*/
.intro-home__partie-3 {
    position        : relative;
    display         : flex;
    justify-content : space-between;
    margin          : 0px 0 0 12%;
}

.intro-home__partie-3 .partie-3__content {
    max-width : 360px;
}

.intro-home__partie-3 .partie-3__content h2 {
    margin-bottom : 15px !important;
}

.intro-home__partie-3 .partie-3__content p {
    font-weight : 300 !important;
}

.intro-home__partie-3 .partie-3__bottles {
    position : relative;
    right    : -80px;
    width    : 100%;
    height   : var(--height-bottle);
}

.intro-home__partie-3 .partie-3__bottles img {
    z-index         : 800;
    width           : 100%;
    height          : 100%;
    object-fit      : contain;
    object-position : center;
}

/* ===================================================
* Feuilles
* =================================================== */
.intro-home_feuilles-container {
    position       : absolute;
    bottom         : 0;
    left           : 0;
    z-index        : 60;
    overflow       : hidden;
    width          : 100%;
    height         : 600px;
    pointer-events : none;
}

.intro-home__feuille-1 {
    position : absolute;
    bottom   : 0;
    left     : -45px;
    height   : 450px !important;
}

.intro-home__feuille-2 {
    position : absolute;
    top      : 0px;
    right    : -45px;
    height   : 450px !important;
    rotate   : 25deg;
}

/* ===================================================
* Fin feuilles
* =================================================== */

@media (max-width : 1650px) {
    .intro-home__background-first-plan {
        top   : calc(9% + 0px);
        left  : calc(50% + 9px);
        width : 385px;
    }
}

@media (max-width : 1400px) {
    #intro-home {
        --height-bottle : 500px;
    }

    .intro-home__partie-1 {
        left      : 2%;
        max-width : 500px;
    }

    .intro-home__partie-2 {
        top   : 45%;
        right : 2%;
    }

    .intro-home__partie-3 {
        margin : 0px 0 0 50px;
    }

    .intro-home__partie-3 .partie-3__bottles {
        right : -70px;
    }

    .intro-home__feuille-1 {
        bottom : -50px;
        height : 300px !important;
    }

    .intro-home__feuille-2 {
        height : 300px !important;
    }
}

@media (max-width : 1200px) {
    .intro-home__partie-1 {
        max-width : 400px;
    }

    .intro-home__partie-2 {
        max-width : 310px;
    }
}

@media (max-width : 764px) {
    #intro-home {
        overflow-x      : hidden;
        max-width       : 100vw;
        padding-bottom  : 160px;
        --height-bottle : 400px;
    }

    #intro-home__container {
        margin-top : calc(var(--negative-height-bottle) * 1.5);
    }

    .intro-home__hot-points {
        width : 180px;
    }

    .intro-home__hot-points .hot-points__circle {
        width  : 30px;
        height : 30px;
    }

    /* =================== Images =================== */
    .intro-home__bottle-sticky {
        top           : 110px;
        width         : 128px;
        margin-bottom : calc(var(--height-bottle) - 28px);
    }

    .intro-home__background-first-plan {
        display : none;
    }

    .intro-home__background-rock {
        height              : 800px;
        background-position : 28% 10%;
        background-size     : 1000px;
    }

    .intro-home__image-mobile-rock {
        z-index         : 50;
        display         : block;
        display         : flex;
        justify-content : flex-end;
        padding-top     : 180px;
    }

    /* =================== Partie =================== */
    .intro-home__partie-1 {
        position  : absolute;
        top       : calc(var(--height-bottle));
        left      : 50%;
        transform : translateX(-50%);
        z-index   : 99;
        width     : 100%;
        padding   : 0px 20px;
    }

    .intro-home__partie-1::before {
        opacity : 0.8;
    }

    .intro-home__partie-2 {
        text-align  : center;
        top         : 53%;
        right       : unset;
        left        : 50%;

        transform   : translate(-50%, 0);
        align-items : center;
        width       : 100%;
    }

    .intro-home__partie-3 {
        flex-direction : column-reverse;
        align-items    : center;
        gap            : 60px;
        margin         : 0;
    }

    .intro-home__partie-3 .partie-3__bottles {
        right : -210px;
    }

    .intro-home__partie-3 .partie-3__content {
        text-align  : center;
        align-items : center;
        width       : 100%;
        padding     : 0 30px;
    }

    /* ===================================================
    * Feuilles
    * =================================================== */
    .intro-home_feuilles-container {
        height : 1400px;
    }

    .intro-home__feuille-1 {
        top    : -35px;
        bottom : unset;
        left   : -70px;
        height : 200px !important;
    }

    .intro-home__feuille-2 {
        top    : unset;
        right  : -45px;
        bottom : 0px;
        height : 200px !important;
    }

    /* ===================================================
    * Fin feuilles
    * =================================================== */
}

/* ======================================================================================================
* END intro home - section
* ====================================================================================================== */