/* ==========================================================================
   BASE / LAYOUT GLOBAL
   ========================================================================== */

.flex-row {
    display: flex;
    flex-direction: row;
}

.main-container {
    background-color: white;
    color: black;
}

.padding-top {
    padding-top: 10rem;
}

.padding-bottom {
    padding-bottom: 10rem;
}


/* ==========================================================================
   TITRES / INTRODUCTIONS VISUELLES
   ========================================================================== */

.veryly-sans-alcool .flex-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.veryly-sans-alcool .flex-title img {
    width: 28vw;
}

.veryly-sans-alcool .solo-title {
    text-align: center;
}

.veryly-sans-alcool .solo-title img {
    width: 28vw;
}

.intro-very-zest {
    width: 70vw;
    text-align: center;
    font-size: 1.7em;
    margin-left: 15vw;
    padding-top: 5vw;
    padding-bottom: 5vw;
}

.title-container {
    position: relative;
}

.title-ete {
    z-index: 3;
    color: white;
    position: relative;
    font-size: 1vw;
    text-align: center;
    padding-top: 4vw;
    margin-left: auto;
    margin-right: auto;
}

.title-ete h1 {
    line-height: 1.2em;
}

.title-ete span {
    font-weight: 600;
}

.subtitle-ete {
    z-index: 3;
    color: black;
    position: relative;
    font-size: 2.2vw;
    font-weight: 500;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.txt-suspension {
    text-align: center;
}

.txt-suspension p {
    font-size: 2.8rem;
}


/* ==========================================================================
   FORMES / DÉCORATIONS
   ========================================================================== */

.forme-title {
    position: absolute;
    z-index: 1;
    margin-top: -5vw;
    margin-left: 30vw;
    width: 40vw;
    height: 30vw;
    background-color: #7FB837;
    clip-path: polygon(8% 26%, 95% 20%, 98% 50%, 0 49%);
}

.forme-subtitle {
    position: absolute;
    z-index: 0;
    margin-top: -5.5vw;
    margin-left: 34vw;
    width: 29vw;
    height: 20vw;
    background-color: #C6D30F;
    clip-path: polygon(97% 22%, 10% 21%, 10% 49%, 98% 54%);
}

.rondelle-pamp {
    position: absolute;
    margin-top: 15vw;
    width: 16vw;
}

.rondelle-pamp img {
    width: 16vw;
}

.illu-cerise-citron {
    position: absolute;
    width: 20vw;
    right: 0;
    margin-top: -20vw;
}

.illu-cerise-citron img {
    width: 100%;
}

.illu-pamplemousse {
    position: absolute;
    width: 20vw;
    left: 0;
    margin-top: -15vw;
}

.illu-pamplemousse img {
    width: 100%;
}


/* ==========================================================================
   HEADER PRODUITS
   ========================================================================== */

.veryly-sans-alcool .product-header {
    background-color: white;
}

.veryly-sans-alcool .container-products-mobile {
    display: none;
}

.veryly-sans-alcool .container-products-desk {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    height: 43vw;
}

.veryly-sans-alcool .container-products-desk .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 5vw 1vw 0 1vw;
    width: 12vw;
    height: 35vw;
}

.veryly-sans-alcool .container-products-desk .item img {
    transition: opacity 0.5s ease;
}

.veryly-sans-alcool .container-products-desk .item .color-points {
    width: 18vw;
}

.veryly-sans-alcool .container-products-desk .item .bottle {
    position: absolute;
    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%);
    width: 7vw;
}

.veryly-sans-alcool .container-products-desk .item .fruit {
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%);
    height: 10vw;
}

@media (hover: hover) {
    .veryly-sans-alcool .container-products-desk .item:hover .bottle {
        opacity: 0;
        width: 6vw;
    }

    .veryly-sans-alcool .container-products-desk .item:hover .fruit {
        opacity: 1;
    }
}


/* ==========================================================================
   SECTIONS TEXTE / IMAGE
   ========================================================================== */

.main-container h3 {
    font-size: 2em;
    font-weight: bold;
    text-transform: uppercase;
}

.txt-desc {
    font-size: 1.125em;
}


/* Première rangée */

.desc-left {
    display: flex;
    flex-direction: row;
    width: 20vw;
    margin-left: 19vw;
    margin-top: 12vw;
}

.desc-left div:nth-child(2) {
    width: 27vw;
    margin-top: 11vw;
    margin-left: -9vw;
}

.desc-right {
    display: flex;
    text-align: end;
    flex-direction: column-reverse;
    width: 47vw;
    margin-left: 4vw;
}

.bottle-veryly {
    width: 38vw;
}

.arrow-left {
    transform: rotateZ(200deg);
    width: 11vw;
    margin-left: 14vw;
    position: absolute;
}


/* Deuxième rangée */

.desc-left-2 {
    width: 36vw;
    margin-left: 8vw;
}

.desc-left-2 div:nth-child(2) {
    width: 43vw;
}

.pamp-pack {
    width: 36vw;
}

.left-part {
    width: 22vw;
    margin-left: 10vw;
}

.left-part img:first-child {
    width: 9vw;
    margin-bottom: 4em;
    transform: rotateZ(-37deg) rotateX(181deg);
    left: -10vw;
    position: relative;
    top: 22vw;
}

.arrow-right {
    width: 11vw;
    margin-top: 3vw;
    margin-bottom: 2vw;
    margin-left: -2vw;
    transform: rotateY(183deg) rotateZ(228deg);
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

footer h4,
footer h6 {
    display: none;
}

body>footer p:first-of-type {
    display: none !important;
}

body>footer nav {
    color: black;
    background-color: white;
    margin: 0px 0px;
    padding-bottom: 2vw;
}

body>footer a:hover {
    color: #EBB66F;
}

body>footer .legal {
    margin: 0em auto;
}


/* ==========================================================================
   RESPONSIVE — TABLETTE / DESKTOP INTERMÉDIAIRE
   ========================================================================== */

@media screen and (min-width: 850px) and (max-width: 1200px) {
    .rondelle-pamp {
        position: absolute;
        margin-top: 12vw;
        width: 16vw;
    }

    .rondelle-pamp img {
        width: 16vw;
    }

    .desc-left div:nth-child(2) {
        width: 35vw;
        margin-top: 11vw;
        margin-left: -17vw;
    }

    .left-part {
        width: 35vw;
        margin-left: 4vw;
    }
}


/* ==========================================================================
   RESPONSIVE — TABLETTE / MOBILE
   ========================================================================== */

@media screen and (max-width: 860px) {

    .padding-top {
        padding-top: 3rem;
    }

    .padding-bottom {
        padding-bottom: 3rem;
    }

    .veryly-sans-alcool .container-products-desk {
        padding-top: 15vw;
        height: 30rem;
    }

    .veryly-sans-alcool .container-products-desk .item .color-points {
        width: 25vw;
    }

    .veryly-sans-alcool .container-products-desk .item .bottle {
        width: 11vw;
    }

    .veryly-sans-alcool .flex-title {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 0rem;
        padding-bottom: 1rem;
    }

    .veryly-sans-alcool .flex-title img {
        width: 50vw;
    }

    .veryly-sans-alcool .flex-title img:first-of-type {
        margin-left: -50vw;
    }

    .veryly-sans-alcool .flex-title img:last-of-type {
        margin-left: 50vw;
    }

    .flex-row {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
    }

    .main-container {
        padding-top: 5rem;
    }

    .intro-very-zest {
        width: 70vw;
        font-size: 1.125em;
        margin-left: 15vw;
        padding-top: 5vw;
        padding-bottom: 5vw;
    }

    .rondelle-pamp {
        position: absolute;
        margin-top: 22vw;
        width: 8vw;
    }

    .rondelle-pamp img {
        width: 16vw;
    }

    .title-ete {
        font-size: 1.8vw;
        padding-top: 4vw;
    }

    .forme-title {
        margin-top: -7vw;
        margin-left: 20vw;
        width: 60vw;
        height: 40vw;
    }

    .subtitle-ete {
        font-size: 3vw;
    }

    .forme-subtitle {
        margin-top: -10.08vw;
        margin-left: 29vw;
        width: 40vw;
        height: 33vw;
    }

    .main-container {
        padding-top: 2rem;
    }

    .main-container h3 {
        font-size: 1.6em;
    }

    .flex-row {
        flex-direction: column;
    }

    .arrow-left {
        width: 24vw;
        margin-left: 0rem;
        margin-top: 5vw;
        transform: rotateZ(250deg);
    }

    .desc-right {
        width: 70vw;
        margin-left: 0vw;
    }

    .left-part {
        width: 60vw;
        margin-left: 0vw;
    }

    .arrow-right {
        width: 28vw;
        margin-top: 2rem;
        margin-bottom: 0vw;
        margin-left: 0vw;
        transform: rotateY(183deg) rotateZ(352deg);
    }

    .left-part img:first-child {
        width: 17vw;
        position: relative;
        right: 15vw;
        top: 5vw;
    }

    .bottle-veryly {
        width: 70vw;
        margin-top: 16vw;
    }

    .veryly-sans-alcool .solo-title img {
        width: 50vw;
    }

    .arrow-black-left {
        display: block;
        transform: rotateZ(32deg);
        width: 14vw;
        margin-left: 40vw;
    }

    .desc-left {
        display: flex;
        flex-direction: row;
        width: 70vw;
        margin-top: 10vw;
        margin-left: 0vw;
    }

    .desc-left div:nth-child(2) {
        width: 45vw;
        margin-top: 13vw;
        margin-left: 1vw;
    }

    .desc-left-2 {
        display: flex;
        flex-direction: column;
        width: 60vw;
        margin-top: 14vw;
        margin-left: -22vw;
    }

    .desc-left-2 div:nth-child(2) {
        width: 60vw;
    }

    .pamp-pack {
        width: 70vw;
        margin-top: 0vw;
    }
}


/* ==========================================================================
   RESPONSIVE — MOBILE
   ========================================================================== */

@media screen and (max-width: 568px) {
    .veryly-sans-alcool .product-header {
        overflow-x: scroll;
    }

    .veryly-sans-alcool .container-products-desk {
        padding-top: 5rem;
        height: 35rem;
        overflow-x: auto;
        overflow-y: hidden;
        width: 60rem;
    }

    .veryly-sans-alcool .container-products-desk .item {
        width: inherit;
        height: inherit;
        width: 14rem;
    }

    .veryly-sans-alcool .container-products-desk .item {
        margin: inherit;
    }

    .veryly-sans-alcool .container-products-desk .item .color-points {
        width: 20rem;
    }

    .veryly-sans-alcool .container-products-desk .item .bottle {
        width: 8rem;
    }

    .main-container {
        padding-top: 3rem;
    }

    .title-ete {
        font-size: 2.5vw;
        padding-top: 4vw;
    }

    .forme-title {
        margin-top: -13vw;
        margin-left: 7vw;
        width: 86vw;
        height: 61vw;
    }

    .subtitle-ete {
        font-size: 5vw;
        line-height: 1;
    }

    .forme-subtitle {
        margin-top: -14.3vw;
        margin-left: 17vw;
        width: 63vw;
        height: 43vw;
    }

    .left-part {
        width: 80vw;
        margin-left: 0vw;
    }

    .arrow-black-left {
        position: absolute;
        margin-top: 40vw;
        margin-left: 55vw;
        width: 17vw;
        transform: rotateZ(83deg);
    }

    .desc-left {
        flex-direction: column;
        width: 90vw;
        margin-top: 0vw;
        margin-left: 0vw;
    }

    .desc-left div:nth-child(2) {
        width: 68vw;
        margin-top: -24vw;
        margin-left: 25vw;
    }

    .solo-title {
        margin-top: 6vw;
        margin-bottom: 12vw;
    }

    .illu-pamplemousse {
        width: 22vw;
        left: 0;
        margin-top: -30vw;
    }

    .bottle-veryly {
        width: 80vw;
        margin-top: 10vw;
        margin-bottom: 10vw;
    }

    .desc-right {
        width: 80vw;
    }
}