.bkg-gradient {
    background: linear-gradient(180deg, rgba(37, 6, 119, 1) 0%, rgba(17, 1, 76, 1) 42%);

    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 0;
    top: 0;
    opacity: 0;
    transition: opacity 3000ms ease-in-out;
    transform:translateZ(-100px) scale(2) translateY(-10%)
}

/*
.reveal
 {
    background: linear-gradient(180deg, rgba(22, 3, 79, 1) 0%, rgba(47, 15, 144, 1) 100%);
    opacity: 0;
}
*/

.reveal-stars {
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
}

.big-stars {
    width: 100%;
}

.current-step-1 .bkg-gradient,
.current-step-2 .bkg-gradient,
.current-step-3 .bkg-gradient,
.current-step-4 .bkg-gradient {
    opacity: 1;
}


.flowers {
    background: linear-gradient(180deg, rgba(14, 1, 56, 1) 0%, rgba(41, 25, 138, 1) 100%);
    border: 1px solid #251874;

    border-top-left-radius: calc(100vw / 12);
    border-bottom-right-radius: calc(100vw / 12);
    position: relative;

}


.flowers-mask {
    border-top-left-radius: calc(100vw / 12);
    border-bottom-right-radius: calc(100vw / 12);
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.flowers-mask.off {
    overflow: visible;
}




.star {
    transform-origin: center;
}

.stars {
    padding: 1vw 3vw;
    overflow: hidden;
}


.big-stars .star.turn,
.stars .star.turn {
    animation: spin 5s linear infinite;
    transform-box: fill-box;
    /*transform-origin: center;*/
}

.big-stars .star.switch,
.stars .star.switch {
    animation: spinBack 5s linear infinite;
    transform-box: fill-box;
}

.big-stars .star:not(.turn),
.stars .star:not(.turn) {
    animation: shine 2s linear infinite;
}


.star polygon{
        animation: shine 2s linear infinite;
}

@keyframes bounce {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}



@keyframes shine {
    0% {
        opacity: 1
    }

    25% {
        opacity: 1
    }

    50% {
        opacity: .15
    }

    75% {
        opacity: 1
    }

    100% {
        opacity: 1
    }
}


@keyframes shineBack {
    0% {
        opacity: 1
    }

    45% {
        opacity: 1
    }

    60% {
        opacity: 1
    }

    80% {
        opacity: .15
    }

    100% {
        opacity: 1
    }
}



@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes spinBack {
    100% {
        transform: rotate(-360deg);
    }
}

/************************/

.flowers-content {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}


.hibiscus {
    bottom: -3vw;
    right: -.5vw;
    height: 18vw;
    position: absolute;
    transform-origin: bottom;
    animation: wind 5s infinite alternate ease-in-out;
}


.paradis {
    bottom: -14vw;
    right: -3.5vw;
    height: 32vw;
    position: absolute;
    transform-origin: bottom;
    animation: wind 5s infinite alternate ease-in-out;
}


.marguerite {
    bottom: -1.5vw;
    right: -1vw;
    height: 16vw;
    position: absolute;
    transform-origin: bottom;
    animation: wind 5s infinite alternate ease-in-out;
}

.tournesol {
    bottom: -4.5vw;
    left: -3.5vw;
    height: 23vw;
    position: absolute;
    transform-origin: bottom;
    animation: wind 5s infinite -1s alternate ease-in-out;
}


.rose {
    bottom: -3vw;
    left: -3vw;
    height: 20vw;
    position: absolute;
    transform-origin: bottom;
    animation: wind 5s infinite -1s alternate ease-in-out;
}


.pensee {
    bottom: -1vw;
    left: -1vw;
    height: 15vw;
    position: absolute;
    transform-origin: bottom;
    animation: wind 5s infinite -1s alternate ease-in-out;
}


.pensee-top {
    top: -3.3vw;
    right: -1.8vw;
    height: 22vw;
    position: absolute;
    transform-origin: top;
    animation: wind 5s infinite -2s alternate ease-in-out;
}

.tournesol-top {
    top: -8.5vw;
    right: -3vw;
    height: 29vw;
    position: absolute;
    transform-origin: top;
    animation: wind 5s infinite -2s alternate ease-in-out;
}

.rose-top {
    top: -5vw;
    right: -5vw;
    height: 23vw;
    position: absolute;
    transform-origin: top;
    animation: wind 5s infinite -2s alternate ease-in-out;
}


.flowers-reveal-container svg,
.flowers-mask svg {
    height: 100%;
}


.tournesol-mask {
    z-index: 5;
}

.rose-mask {
    z-index: 4;
}


.pensee-mask,
.tournesol-top-mask,
.marguerite-top-mask,
.marguerite-mask,
.hibiscus-top-mask,
.hibiscus-mask {
    z-index: 3;
}

.pensee-tige-mask {
    z-index: 2;
}

.hibiscus-top {
    top: -8vw;
    left: -2vw;
    height: 23vw;
    position: absolute;
    transform-origin: top;
    background-position: 0 0;
    background-size: contain;
    background-repeat: no-repeat;
    animation: wind 5s infinite alternate ease-in-out;
}

.paradis-top {
    top: -14.5vw;
    left: -4vw;
    height: 34vw;
    position: absolute;
    transform-origin: top;
    background-position: 0 0;
    background-size: contain;
    background-repeat: no-repeat;
    animation: wind 5s infinite alternate ease-in-out;
}

.marguerite-top {
    top: -3vw;
    left: -1.5vw;
    height: 18vw;
    position: absolute;
    transform-origin: top;
    background-position: 0 0;
    background-size: contain;
    background-repeat: no-repeat;
    animation: wind 5s infinite -4s alternate ease-in-out;

}


.crocus {
    bottom: -2vw;
    left: 5.5vw;
    height: 30vw;
    position: absolute;
    transform-origin: bottom;
    background-position: 0 0;
    background-size: contain;
    background-repeat: no-repeat;
    animation: wind 5s infinite -3s alternate ease-in-out;
}

.hemero {
    bottom: -6vw;
    left: 5vw;
    height: 31vw;
    position: absolute;
    transform-origin: bottom;
    background-position: 0 0;
    background-size: contain;
    background-repeat: no-repeat;
    animation: wind 5s infinite -3s alternate ease-in-out;
}


.iris {
    bottom: -7vw;
    left: 3vw;
    height: 36vw;
    position: absolute;
    transform-origin: bottom;
    background-position: 0 0;
    background-size: contain;
    background-repeat: no-repeat;
    animation: wind 5s infinite -3s alternate ease-in-out;

}


.flowers-reveal-container {
    overflow: hidden;
}


/****************/


.reveal  .crocus {
    bottom: -23vw;
    left: 32vw;
    height: 50vw;
}


.reveal  .tournesol {
    bottom: -11vw;
    left: 6vw;
    height: 38vw;
}

 .reveal .tournesol-anim-tige,
 .reveal .tournesol-anim{
    transform: rotate(20deg);
}


.reveal  .tournesol-top {
    top: -15vw;
    right: 7vw;
    height: 40vw;
}
.reveal  .tournesol-top-anim-tige,
.reveal  .tournesol-top-anim{
    transform: rotate(-10deg);
}

.reveal  .marguerite-top {
    top: -6vw;
    left: 14px;
    height: 36vw;
}

.reveal  .marguerite-top-anim-tige,
.reveal .marguerite-top-anim{
    transform: rotate(15deg);
}

.reveal  .marguerite {
    bottom: -10vw;
    right: 7vw;
    height: 32vw;
}
.reveal  .marguerite-anim-tige,
.reveal  .marguerite-anim{
    transform: rotate(-10deg);
}


.reveal  .hibiscus-top {
    top: -8vw;
    left: 2vw;
    height: 34vw;

}

.reveal  .hibiscus {
    bottom: -7vw;
    right: 4vw;
    height: 32vw;
}

.reveal  .hibiscus-top-anim-tige,
.reveal  .hibiscus-top-anim{
    transform: rotate(-10deg);
}


.reveal  .hemero {
    bottom: -34vw;
    left: 31vw;
    height: 55vw;
}

.reveal .paradis-top {
    top: -20vw;
    left: 3vw;
    height: 50vw;
}

.reveal  .paradis-top-anim-tige,
.reveal  .paradis-top-anim{
    transform: rotate(15deg);
}


.reveal  .paradis {
    bottom: -23vw;
    right: 4vw;
    height: 48vw;
}


.reveal  .rose-top {
    top: -17vw;
    right: 0vw;
    height: 42vw;
}

.reveal  .rose-top-anim-tige,
.reveal  .rose-top-anim{
    transform: rotate(20deg);
}


.reveal  .rose {
    bottom: -9vw;
    left: 2vw;
    height: 38vw;
}


.reveal  .iris {
    bottom: -46vw;
    left: 26vw;
    height: 71vw;
}

.reveal  .iris-anim{
    transform: rotate(-10deg);
}


.reveal  .pensee {
    bottom: -5vw;
    left: 5vw;
    height: 32vw;
}

.reveal  .pensee-anim-tige,
.reveal  .pensee-anim {
    transform: rotate(00deg);
}


.reveal  .pensee-top {
    top: -10vw;
    right: 2vw;
    height: 39vw;
}

.reveal  .pensee-top-anim-tige,
.reveal  .pensee-top-anim {
    transform: rotate(30deg);
}

.reveal-pensee,
.reveal-rose,
.reveal-paradis,
.reveal-hibiscus,
.reveal-marguerite,
.reveal-tournesol {
    z-index: 4;
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.reveal-pensee-tige,
.reveal-rose-tige,
.reveal-paradis-tige,
.reveal-hibiscus-tige,
.reveal-marguerite-tige,
.reveal-tournesol-tige{
    z-index: 2;
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}



.reveal-rose-top,
.reveal-pensee-top,
.reveal-paradis-top,
.reveal-hibiscus-top,
.reveal-marguerite-top,
.reveal-tournesol-top {
    z-index: 2;
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}


.reveal-pensee-top-tige,
.reveal-rose-top-tige,
.reveal-paradis-top-tige,
.reveal-hibiscus-top-tige,
.reveal-marguerite-top-tige,
.reveal-tournesol-top-tige {
    z-index: 1;
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}


@keyframes wind {
    0% {
        transform: skewX(3deg);
    }

    100% {
        transform: skewX(-3deg);
    }
}






/* ****** */

.sound-control {
    grid-area: g12;
    grid-column-end: span 1;
    grid-row-end: span 1;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: all 1s ease;
}


#sound-icon {
    transition: all .4s ease;
}

.sound-line {
    transition: opacity .4s ease;
}

#sound-icon {
    transform: translate(29%, 28%) !important;
}

.active #sound-icon {
    transform: translate(22%, 28%) !important;
}


.sound-control.visible {
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
}

.sound-control:active #sound-round {
    stroke: #B3C3FF;
}

.sound-control:hover #sound-icon {
    fill: #B3C3FF;
}

.sound_btn {
    width: 3vw;
}

.sound-line {
    opacity: 0;
}


.active .sound-line {
    opacity: 1;
}



.current-step-4 .flower-animation.active,
.current-step-5 .flower-animation {
    pointer-events: auto;
    cursor: pointer;
}


@media screen and (min-aspect-ratio: 1000/583) {


    .sound_btn {
        width: 5.14vh;
    }


    .flowers-mask,
    .flowers {
        border-top-left-radius: calc(100vh / 7);
        border-bottom-right-radius: calc(100vh / 7);
    }



    .hibiscus {
        bottom: -5.14vh;
        right: -.86vh;
        height: 30.86vh;

    }

    .marguerite {
        bottom: 2.57vh;
        right: -1.71vh;
        height: 27.43vh;
    }

    .tournesol {
        bottom: -7.71vh;
        left: -6vh;
        height: 39.43vh;
    }


    .tournesol-top {
        top: -14.57vh;
        right: -5.14vh;
        height: 49.71vh;
    }


    .hibiscus-top {
        top: -13.71vh;
        left: -3.43vh;
        height: 39.43vh;
    }


    .marguerite-top {
        top: -5.14vh;
        left: -2.57vh;
        height: 30.86vh;
    }


    .crocus {
        bottom: -3.43vh;
        left: 9.43vh;
        height: 51.43vh;
    }


    .hemero {
        bottom: -10.29vh;
        left: 8.57vh;
        height: 53.14vh;
    }


    .rose {
        bottom: -5.14vh;
        left: -5.14vh;
        height: 34.29vh;

    }


    .pensee {
        bottom: -1.71vh;
        left: -1.71vh;
        height: 25.71vh;

    }


    .pensee-top {
        top: -5.66vh;
        right: -3.09vh;
        height: 37.71vh;

    }


    .rose-top {
        top: -8.57vh;
        right: -8.57vh;
        height: 39.43vh;
    }

    .paradis {
        bottom: -24vh;
        right: -6vh;
        height: 54.86vh;

    }


    .paradis-top {
        top: -24.86vh;
        left: -6.86vh;
        height: 58.29vh;

    }


    .iris {
        bottom: -12vh;
        left: 5.14vh;
        height: 61.71vh;
    }


}



/***********************/


.js-choice.active {
    color: #878ff6;
}

.js-choice.active .cta-bg {
    background-color: transparent;
    border: 1px solid #878ff6;
    transform: scale(1);
}


.js-choice.active svg {
    fill: #B3C3FF;
}


.js-choice .text {
    transition: color 1200ms cubic-bezier(0.75, 0, 0.25, 1);
}

.js-choice:hover .text {
    color: #B3C3FF;
}


.vip-name {
    color: #B3C3FF;
    text-transform: capitalize;
}

@media screen and (max-aspect-ratio: 1/1) {
    .sound-control {
        grid-area: j6;
    }

    .sound_btn {
        width: 10vw;
    }

    #sound-round {
        display: none;
    }

    .flowers {
        border: 0;
        border-top-left-radius: 0;
        border-bottom-right-radius: 0;
        overflow: hidden;
    }

.crocus {
    bottom: -17vw;
    left: 31vw;
    height: 57vw;
}

 .tournesol {
    bottom: -11vw;
    left: 6vw;
    height: 36vw;
}

 .tournesol-anim-tige,
 .tournesol-anim{
    transform: rotate(20deg);
}


 .tournesol-top {
    top: -15vw;
    right: 7vw;
    height: 40vw;
}
 .tournesol-top-anim-tige,
 .tournesol-top-anim{
    transform: rotate(-10deg);
}

 .marguerite-top {
    top: -8vw;
    left: 14px;
    height: 36vw;
}

 .marguerite-top-anim-tige,
 .marguerite-top-anim{
    transform: rotate(15deg);
}

.marguerite {
    bottom: -11vw;
    right: 5vw;
    height: 32vw;
}

 .marguerite-anim-tige,
 .marguerite-anim{
    transform: rotate(-10deg);
}


.hibiscus-top {
    top: -11vw;
    left: 3vw;
    height: 34vw;
}

 .hibiscus {
    bottom: -7vw;
    right: 4vw;
    height: 32vw;
}

 .hibiscus-top-anim-tige,
 .hibiscus-top-anim{
    transform: rotate(-10deg);
}


.hemero {
    bottom: -19vw;
    left: 30vw;
    height: 57vw;
}

 .paradis-top {
    top: -20vw;
    left: 3vw;
    height: 50vw;
}
 .paradis-top-anim-tige,
 .paradis-top-anim{
    transform: rotate(15deg);
}


.paradis {
    bottom: -30vw;
    right: 4vw;
    height: 52vw;
}

 .rose-top {
    top: -17vw;
    right: 0vw;
    height: 42vw;
}

 .rose-top-anim-tige,
 .rose-top-anim{
    transform: rotate(20deg);
}

 .rose {
    bottom: -11vw;
    left: 2vw;
    height: 37vw;
}

.iris {
    bottom: -30vw;
    left: 28vw;
    height: 67vw;
}

 .iris-anim{
    transform: rotate(-10deg);
}


 .pensee {
    bottom: -5vw;
    left: 5vw;
    height: 32vw;
}

 .pensee-anim-tige,
 .pensee-anim {
    transform: rotate(00deg);
}


.pensee-top {
    top: -12vw;
    right: 4vw;
    height: 39vw;
}

 .pensee-top-anim-tige,
 .pensee-top-anim {
    transform: rotate(30deg);
}

/*************/

.reveal .crocus {
    bottom: -34vw;
    left: 17vw;
    height: 100vw;
}

.reveal .tournesol {
    bottom: 7vw;
    left: -14vw;
    height: 68vw;
}

  .reveal .tournesol-anim-tige,
  .reveal .tournesol-anim{
    transform: rotate(20deg);
}


.reveal .tournesol-top {
    top: -18vw;
    right: -13vw;
    height: 80vw;
}

 .reveal  .tournesol-top-anim-tige,
.reveal .tournesol-top-anim{
    transform: rotate(0deg);
}

.reveal .marguerite-top {
    top: -10vw;
    left: 5px;
    height: 58vw;
}

 .reveal .marguerite-top-anim-tige,
 .reveal .marguerite-top-anim{
    transform: rotate(0deg);
}

.reveal  .marguerite {
    bottom: 18vw;
    right: -10vw;
    height: 47vw;
}
.reveal  .marguerite-anim-tige,
 .reveal .marguerite-anim{
    transform: rotate(-10deg);
}


.reveal .hibiscus-top {
    top: -20vw;
    left: -14vw;
    height: 77vw;
}

.reveal  .hibiscus {
    bottom: 11vw;
    right: -13vw;
    height: 60vw;
}

.reveal  .hibiscus-top-anim-tige,
.reveal  .hibiscus-top-anim{
    transform: rotate(0deg);
}


.reveal  .hibiscus-anim-tige,
.reveal  .hibiscus-anim{
    transform: rotate(-30deg);
}


.reveal .hemero {
    bottom: -45vw;
    left: 19vw;
    height: 100vw;
}

.reveal .crocus {
    bottom: -34vw;
    left: 17vw;
    height: 100vw;
}

.reveal .paradis-top {
    top: -38vw;
    left: -12vw;
    height: 102vw;
}

.reveal  .paradis-top-anim-tige,
.reveal  .paradis-top-anim{
    transform: rotate(0deg);
}


.reveal  .paradis {
    bottom: -7vw;
    right: -27vw;
    height: 93vw;
}

.reveal  .paradis-anim-tige,
.reveal  .paradis-anim{
    transform: rotate(-40deg);
}

.reveal  .rose-top {
    top: -27vw;
    right: -36vw;
    height: 87vw;
}

.reveal  .rose-top-anim-tige,
.reveal  .rose-top-anim{
    transform: rotate(0deg);
}


.reveal  .rose {
    bottom: 20vw;
    left: -11vw;
    height: 58vw;
}


.reveal  .rose-anim-tige,
.reveal  .rose-anim{
    transform: rotate(15deg);
}

.reveal .iris {
    bottom: -63vw;
    left: 11vw;
    height: 114vw;
}
.reveal  .iris-anim{
    transform: rotate(0deg);
}

.reveal  .pensee {
    bottom: 30vw;
    left: -11vw;
    height: 55vw;
}


.reveal  .pensee-anim-tige,
.reveal  .pensee-anim {
    transform: rotate(10deg);
}


.reveal  .pensee-top {
    top: -17vw;
    right: -18vw;
    height: 77vw;
}

.reveal  .pensee-top-anim-tige,
.reveal  .pensee-top-anim {
    transform: rotate(20deg);
}

}


/* ipad */

@media screen and (max-aspect-ratio: 1/1) and (min-width: 481px) {

.paragraph-default {
    font-size: 2.8vh;
    line-height: 4.7vh;
}


.crocus {
    bottom: -10.2vh; 
    left: 19.2vh;
    height: 34.2vh;
}

 .tournesol {
    bottom: -6.6vh;
    left:3.6vh;
    height: 21.6vh;
}


 .tournesol-top {
    top: -9vh;
    right: 4.2vh;
    height: 24vh;
}

 .marguerite-top {
    top: -4.8vh;
    left: 14px;
    height: 21.6vh;
}


.marguerite {
    bottom: -6.6vh;
    right:3vh;
    height: 19.2vh;
}

.hibiscus-top {
    top: -6.6vh;
    left: 1.8vh;
    height: 20.4vh;
}

 .hibiscus {
    bottom: -4.2vh;
    right: 2.4vh;
    height: 19.2vh;
}



.hemero {
    bottom: -11.4vh;
    left: 18vh;
    height: 34.2vh;
}

 .paradis-top {
    top: -12vh;
    left: 1.8vh;
    height: 30vh;
}


.paradis {
    bottom: -18vh;
    right: 2.4vh;
    height: 31.2vh;
}

 .rose-top {
    top: -10.2vh;;
    right: 0vw;
    height: 25.2vh;
}



 .rose {
    bottom: -6.6vh;
    left: 1.2vh;
    height: 22.2vh;
}

.iris {
    bottom: -18vh;
    left:16.8vh;
    height: 40.2vh;
}



 .pensee {
    bottom:-3vh;
    left: 3vh;
    height: 32vw;
}


.pensee-top {
    top:-7.2vh;
    right:2.4vh;
    height: 23.4vh;
}

.overlay-cta .cta-text {
    font-size: 2.8vw;
    line-height: 3.4vw;
}

.overlay-cta {
    width: 26vw;
    height: 26vw;
}

    }