:root {
    --bg-main: linear-gradient(to top, #333333, #000000); 
}

main {
    position: relative;
    margin-top: -100vh;
    z-index: 3;
}

.sticky-wrapper {
    position: relative;
    background-color: #00000000;
    z-index: 0;
}


/* sticky container */
.sticky-container {
    position: sticky;
    top: 0;
    height: 100vh;
    background: linear-gradient(to bottom, #000000, #333333);
    z-index: 1;
}

/* positionnement des coins supérieurs */
.corner-top {
    position: absolute;
    width: 20px; 
    height: auto; /* Hauteur proportionnelle */
    background: center / cover no-repeat;
    z-index: 1;
    filter: blur(0.8px) saturate(1.2) brightness(1); /*flou(0 =>?) ,saturation(0 =>?), luminosité(0 =>1)*/
}

/* positionnement des coins inférieurs */
.corner-bottom {
    position: absolute;
    width: 20px; 
    height: auto; /* Hauteur proportionnelle */
    background: center / cover no-repeat;
    filter: blur(1.2px) saturate(1.2) brightness(1); /*flou(0 =>?) ,saturation(0 =>?), luminosité(0 =>1)*/
    z-index: 1;
}

/* image de fond */
.grape {
    background-image: url('../images/grapes.webp'); 
}

.flower {
    background-image: url('../images/flower.webp'); 
}

/* positionnement des coins */
.grape-left {
    top: 0px;
    left: 0px;
}

.grape-right {
    top: 0px;
    right: 0px;
    transform: scaleX(-1);  /* retourner l'image horizontalement */
}

.flower-left {
    bottom: 0px;
    left: 0px;
}

.flower-right {
    bottom: 0px;
    right: 0px;
    transform: scaleX(-1);  /* retourner l'image horizontalement */
}

/* Pour les écrans de 567px et plus */
@media (min-width: 567px) {
    main {
        padding: 100px;
    }

    .corner-top, .corner-bottom {
        width: 50px;
        height: 100px;
    }

    .corner-bottom {
        width: 50px;
        height: 50px;
    }

}

/* Pour les écrans de 768px et plus */
@media (min-width: 768px) {
    main {
        padding: 50px 100px;
    }

    .corner-top, .corner-bottom {
        width: 80px;
        height: 140px;
    }

    .corner-bottom {
        width: 60px;
        height: 60px;
    }
}

/* Pour les écrans de 1000px et plus */
@media (min-width: 1000px) {
    main {
        padding: 50px 150px;
    }

    .corner-top, .corner-bottom {
        width: 150px;
        height: 250px;
    }

    .corner-bottom {
        width: 80px;
        height: 80px;
    }
}