.page_wrapper {
    height: 100vh;
    background: linear-gradient(to bottom, #008f6d, #85C9B9);
    position: relative;
    display: flex;
    padding: 30px 10% 70px 10%;
}

.flashbag_container {
    font-weight: 600;
    font-size: 1.1rem;
}

.flashbag_error {
    color: #c43737;
}

.flashbag_success {
    color: white;
}

/************************** LEFT **************************/

.page_wrapper .left_side {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
}

.page_wrapper .left_side .logo_baseline {
    width: 100%;
    max-width: 675px;
}

.page_wrapper .left_side .logo_baseline svg {
    height: 125px;
    padding-left: 2px;
}

.page_wrapper .left_side .punchline {
    width: 100%;
    max-width: 675px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}
.page_wrapper .left_side .punchline h1 {
    font-size: 2.7rem;
    margin: 0;
    font-family: Montserrat_Bold, sans-serif;
}

.page_wrapper .left_side .coming_soon {
    max-width: 450px;
    width: 60%;
}

.page_wrapper .left_side .keep_in_touch {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 290px;
    max-width: 330px;
}

.page_wrapper .left_side .keep_in_touch h2 {
    font-size: 2.7rem;
    margin: 0;
    font-family: Montserrat_Bold, sans-serif;
    text-align: center;
}

.page_wrapper .left_side .keep_in_touch .input {
    display: flex;
    justify-content: start;
    align-items: center;
    position: relative;
}

.page_wrapper .left_side .keep_in_touch .input .input_inner {
    width: 100%;
    background: linear-gradient(to bottom, #ffffff, #eaeaea);
    border: 4px solid white;
    border-radius: 11px;
    padding: 5px;
}

.page_wrapper .left_side .keep_in_touch .input .input_inner input {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 1.1rem;
    outline: none;
}

.page_wrapper .left_side .keep_in_touch .input button {
    position: absolute;
    right: 0;
    border: 4px solid #43ac93;
    background: linear-gradient(to bottom, #008f6d, #85C9B9);
    border-radius: 13px;
    height: 62px;
    width: 62px;
    padding: 0;
}

.page_wrapper .left_side .keep_in_touch .input button img {
    height: 100%;
    width: 100%;
}

#flashbag {
    margin: 0;
}

.page_wrapper .left_side .social_medias {
    display: flex;
    justify-content: space-between;
}

.page_wrapper .left_side .social_medias a {
    display: block;
    height: 35px;
}

.page_wrapper .left_side .social_medias a img {
    width: unset;
    height: 100%;
}

/************************** RIGHT **************************/

.page_wrapper .right_side {
    flex: 1;
    z-index: 1;
    margin: auto;
}

.page_wrapper .right_side h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.phone_carousel {
    display: flex;
    justify-content: center;
    align-items: center;
}

.phone_carousel .right_arrow svg,
.phone_carousel .left_arrow svg {
    height: 50px;
    cursor: pointer;
}

.phone_carousel .carousel_content {
    position: relative;
    display: flex;
    justify-content: center;
    background-image: url("../images/JPG/fond_flou_4.jpg");
    background-size: contain;
    border-radius: 60px;
}

.phone_carousel .phone_frame {
    width: 300px;
    position: relative;
    z-index: 2;
}

.phone_carousel .videos {
    position: absolute;
    top: 2%;
    height: 96%;
    width: 91%;
    border-radius: 20px;
    z-index: 6;
    overflow: hidden;
    display: flex;
}

.phone_carousel .videos video {
    position: absolute;
    top: calc(50% - 222px);
    left: calc(50% - 125px);
    height: 444px;
    width: 250px;
    border-radius: 20px;
    box-shadow: 0 0 20px #00000070;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.phone_carousel .videos .controls {
    transition: opacity 0.2s ease-in-out;
}

.phone_carousel .videos .controls svg {
    height: 100%;
    cursor: pointer;
    fill: white;
}

.phone_carousel #play,
.phone_carousel #pause,
.phone_carousel #mute,
.phone_carousel #unmute{
    display: inline-block;
    position: absolute;
    border: none;
    background: unset;
    transition: opacity 0.2s ease-in-out;
    padding: 0;
}

.phone_carousel #play,
.phone_carousel #pause {
    height: 40px;
    top: calc(50% - 20px);
    left: calc(50% - 20px);
}

.phone_carousel #mute,
.phone_carousel #unmute {
    height: 30px;
    bottom: 97px;
    right: 19px;
}

.phone_carousel #unmute, .phone_carousel #pause {
    opacity: 0;
}



/************************** BACKGROUND **************************/

.page_wrapper .background-city {
    position: fixed;
    bottom: -25%;
    left: -80%;
    width: 270%;
    z-index: 0;
    opacity: 0.2;
}

/************************** MEDIA QUERIES **************************/
@media screen and (max-width: 1700px) {
    .page_wrapper {
        padding: 30px 5% 70px 5%;
    }

    .page_wrapper .background-city {
        bottom: -20%;
        left: -90%;
        width: 300%;
    }

    .page_wrapper .left_side .coming_soon {
        width: 65%;
    }
}

@media screen and (max-width: 1500px) {
    .page_wrapper {
        padding: 30px 3% 60px 3%;
    }

    .page_wrapper .background-city {
        bottom: -20%;
        left: -100%;
        width: 320%;
    }

    .page_wrapper .left_side .logo_baseline {
        max-width: 600px;
    }

    .page_wrapper .left_side .logo_baseline svg {
        height: 120px;
    }

    .page_wrapper .left_side .punchline {
        max-width: 600px;
    }

    .page_wrapper .left_side .punchline h1 {
        font-size: 2.4rem;
        text-wrap: nowrap;
    }

    .page_wrapper .left_side .coming_soon {
        width: 60%;
    }

    .page_wrapper .left_side .keep_in_touch h2 {
        font-size: 2.5rem;
    }

    .page_wrapper .left_side .keep_in_touch .input .input_inner input {
        font-size: 1rem;
    }

    .page_wrapper .left_side .keep_in_touch .input button {
        height: 55px;
        width: 55px;
    }

    .page_wrapper .left_side .social_medias a {
        height: 30px;
    }

    .phone_carousel .phone_frame {
        width: 270px;
    }

    .page_wrapper .left_side .keep_in_touch {
        gap: 15px;
    }

    .phone_carousel .videos video {
        top: calc(50% - 200px);
        left: calc(50% - 112.5px);
        height: 400px;
        width: 225px;
    }

    .phone_carousel #mute, .phone_carousel #unmute {
        height: 30px;
        bottom: 85px;
        right: 17px;
    }
}

@media screen and (max-width: 1300px) {
    .page_wrapper .left_side .keep_in_touch h2 {
        line-height: 2.5rem;
    }

    .phone_carousel .phone_frame {
        width: 230px;
        position: relative;
        z-index: 2;
    }

    .phone_carousel .videos video {
        top: calc(50% - 170px);
        left: calc(50% - 93px);
        height: 330px;
        width: 186px;
    }

    .page_wrapper .left_side .coming_soon {
        width: 50%;
    }

    .page_wrapper .background-city {
        bottom: -15%;
        left: -106%;
        width: 340%;
    }

    .phone_carousel #mute, .phone_carousel #unmute {
        height: 25px;
        bottom: 87px;
        right: 18px;
    }

    .phone_carousel #play, .phone_carousel #pause {
        height: 30px;
        top: calc(50% - 15px);
        left: calc(50% - 15px);
    }
}

@media screen and (max-width: 1440px) and (max-height: 750px) {
    .page_wrapper .left_side .logo_baseline {
        max-width: 550px;
    }

    .page_wrapper .left_side .coming_soon {
        width: 50%;
    }

    .page_wrapper .left_side .punchline {
        max-width: 550px;
    }

    .page_wrapper .left_side .punchline h1 {
        font-size: 2.2rem;
    }

    .page_wrapper .left_side .keep_in_touch {
        gap: 12px;
    }

    .page_wrapper .left_side .coming_soon {
        width: 50%;
    }

    .phone_carousel .phone_frame {
        width: 230px;
        position: relative;
        z-index: 2;
    }

    .phone_carousel .videos video {
        top: calc(50% - 170px);
        left: calc(50% - 93px);
        height: 330px;
        width: 186px;
    }

    .phone_carousel #play, .phone_carousel #pause {
        height: 30px;
        top: calc(50% - 15px);
        left: calc(50% - 15px);
    }

    .phone_carousel #mute, .phone_carousel #unmute {
        height: 25px;
        bottom: 87px;
        right: 18px;
    }
}

@media screen and (max-width: 1100px) {
    .page_wrapper .right_side h2 {
        font-size: 2rem;
    }

    .page_wrapper .left_side .punchline h1 {
        font-size: 2.1rem;
    }

    .page_wrapper .left_side .keep_in_touch h2 {
        font-size: 2.3rem;
        line-height: 2.3rem;
    }

    .page_wrapper .left_side .keep_in_touch .input .input_inner input {
        font-size: 0.85rem;
    }

    .page_wrapper .left_side .logo_baseline svg {
        height: 100px;
    }

    .phone_carousel .phone_frame {
        width: 200px;
    }

    .phone_carousel .videos video {
        top: calc(50% - 142px);
        left: calc(50% - 80px);
        height: 284px;
        width: 160px;
    }

    .phone_carousel .carousel_content {
        border-radius: 50px;
    }

    .phone_carousel #play, .phone_carousel #pause {
        height: 30px;
        top: calc(50% - 15px);
        left: calc(50% - 15px);
    }

    .phone_carousel #mute, .phone_carousel #unmute {
        height: 25px;
        bottom: 75px;
        right: 17px;
    }
}

@media screen and (max-width: 1100px) and (max-height: 600px) {
    .page_wrapper .left_side .logo_baseline {
        max-width: 475px;
    }

    .page_wrapper .left_side .punchline {
        max-width: 475px;
    }

    .page_wrapper .left_side .punchline h1 {
        font-size: 1.9rem;
    }

    .page_wrapper .left_side .coming_soon {
        width: 45%;
    }

    .page_wrapper .left_side .keep_in_touch h2 {
        font-size: 2rem;
        line-height: 2rem;
    }

    .page_wrapper .left_side .social_medias a {
        height: 25px;
    }

    .page_wrapper .right_side h2 {
        font-size: 1.7rem;
        margin-bottom: 1rem;
    }

    .phone_carousel .phone_frame {
        width: 180px;
    }

    .phone_carousel .videos video {
        top: calc(50% - 130px);
        left: calc(50% - 72px);
        height: 260px;
        width: 146px;
    }

    .phone_carousel #play, .phone_carousel #pause {
        height: 24px;
        top: calc(50% - 12px);
        left: calc(50% - 12px);
    }

    .phone_carousel #mute, .phone_carousel #unmute {
        height: 20px;
        bottom: 69px;
        right: 17px;
    }

}


@media screen and (max-width: 992px) {
    .page_wrapper {
        height: unset;
        padding: 30px 3% 60px 3%;
        position: relative;
    }

    .page_wrapper .left_side {
        gap: 50px;
    }

    .page_wrapper .left_side .logo_baseline {
        width: unset;
    }

    .page_wrapper .left_side .logo_baseline svg {
        padding-left: 0;
    }

    .page_wrapper .left_side .punchline {
        margin-bottom: 530px;
    }

    .page_wrapper .right_side {
        position: absolute;
        top: 24%;
        left: calc(50% - 191px);
        width: 381px;
        height: 500px;
        z-index: 1;
    }

    .page_wrapper .right_side h2 {
        display: none;
    }

    .phone_carousel {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 100%;
    }

    .phone_carousel .right_arrow svg, .phone_carousel .left_arrow svg {
        z-index: 2;
    }

    .phone_carousel .phone_frame {
        display: none;
    }

    .phone_carousel .carousel_content {
        height: 100%;
        width: 100%;
        display: flex;
        margin: auto;
        background-image: none;
        overflow: hidden;
        border-radius: unset;
    }

    .phone_carousel .videos {
        position: absolute;
        top: unset;
        width: 100%;
        height: 100%;
        display: flex;
    }

    .phone_carousel .videos video {
        position: absolute;
        top: unset;
        left: unset;
        height: 100%;
        width: 100%;
        border-radius: 20px;
    }

    .page_wrapper .background-city {
        bottom: 0;
        left: -140%;
        width: 400%;
    }

    .phone_carousel #mute, .phone_carousel #unmute {
        height: 30px;
        bottom: 15px;
        right: 15px;
    }

}

@media screen and (max-width: 475px) {
    .page_wrapper .left_side .keep_in_touch h2 {
        font-size: 1.7rem;
        line-height: 1.7rem;
    }

    .page_wrapper .left_side .punchline h1 {
        font-size: 1.8rem;
    }

    .page_wrapper .left_side .social_medias a {
        height: 25px;
    }

    .page_wrapper .left_side .keep_in_touch {
        min-width: 250px;
    }

    .page_wrapper .left_side .keep_in_touch .input .input_inner input {
        font-size: 0.7rem;
    }
}

@media screen and (max-width: 425px) {
    .page_wrapper .left_side .punchline h1 {
        font-size: 1.4rem;
    }
}

@media screen and (max-width: 375px) {
    .page_wrapper .right_side {
        left: calc(50% - 175px);
        width: 350px;
        height: 444px;
    }

    .page_wrapper .left_side .keep_in_touch h2 {
        font-size: 1.5rem;
        line-height: 1.5rem;
    }

    .phone_carousel .carousel_content {
        border-radius: unset;
    }

    .page_wrapper .left_side .punchline h1 {
        font-size: 1.3rem;
    }

    .page_wrapper .left_side .social_medias a {
        height: 25px;
    }

    .page_wrapper .left_side .keep_in_touch {
        min-width: 250px;
    }

    .page_wrapper .left_side .keep_in_touch .input .input_inner input {
        font-size: 0.7rem;
    }

    .page_wrapper .left_side .punchline {
        margin-bottom: 470px;
    }
}

@media screen and (max-width: 375px) {
    .page_wrapper .left_side .punchline h1 {
        font-size: 1.2rem;
    }

    .page_wrapper .right_side {
        left: calc(50% - 160px);
        width: 320px;
        height: 391px;
        top: 26%;
    }

    .page_wrapper .left_side .punchline {
        margin-bottom: 410px;
    }

    .phone_carousel .videos video {
        box-shadow: none;
    }
}




/*!************************** MENU **************************!*/
/*.loupe-icone {*/
/*    height: 17px;*/
/*    width: 17px;*/
/*}*/


/*!************************** HEADER **************************!*/
/*.mobile-header {*/
/*    display: none;*/
/*}*/
/*.desktop-header {*/
/*    display: block;*/
/*}*/
/*.desktop-header img{*/
/*    top: -300px;*/
/*    left: -10px;*/
/*}*/
/*.banner_shape1 {*/
/*    left: -9% !important;*/
/*}*/
/*.banner_image {*/
/*    width: 117% !important;*/
/*}*/


/*!************************** PUNCHLINE **************************!*/
/*.punchline {*/
/*    width: 100%;*/
/*    height: 45vh;*/
/*}*/
/*.punchline-pink {*/
/*    background-color: #FFE9ED;*/
/*}*/
/*.punchline-yellow {*/
/*    background-color: #FFF3E5;*/
/*}*/
/*.punchline-inner {*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    width: 50%;*/
/*    height: 100%;*/
/*    text-align: center;*/
/*}*/
/*.punchline-sentence {*/
/*    color: #008F6D;*/
/*    font-weight: 600;*/
/*    z-index: 1;*/
/*}*/


/*!************************** ASTUCE **************************!*/
/*.astuce {*/
/*    width: 100%;*/
/*    background-color: #028664;*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*}*/
/*.desktop-astuce {*/
/*    display: block;*/
/*}*/
/*.desktop-astuce img{*/
/*    left: -100px;*/
/*}*/
/*.mobile-astuce {*/
/*    display: none;*/
/*}*/
/*.astuce-inner {*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    margin: 20px auto;*/
/*}*/
/*.astuce-content-inner {*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*}*/
/*.astuce-img {*/
/*    width: 650px !important;*/
/*    height: 650px;*/
/*}*/
/*.astuce-img img {*/
/*    width: 650px;*/
/*    max-height: 650px;*/
/*    max-width: 650px;*/
/*    top: 0;*/
/*}*/
/*.astuce-img:not(.desktop-astuce) img {*/
/*    left: 0;*/
/*}*/
/*.astuce-content {*/
/*    max-width: 550px;*/
/*}*/
/*.astuce-title {*/
/*    font-weight: 600;*/
/*}*/
/*.astuce-sentence {*/
/*    font-weight: 700;*/
/*    font-size: 1.1rem;*/
/*    line-height: 1.7;*/
/*}*/
/*#block-deal::before, #block-bounty::before, #block-6-degrees::before {*/
/*    content: "";*/
/*    display: block;*/
/*    height: 75px;*/
/*    margin-top: -75px;*/
/*    visibility: hidden;*/
/*}*/


/*!************************** FOOTER **************************!*/
/*.bottom-city {*/
/*    width: 1700px;*/
/*    background-color: #FEE9ED;*/
/*}*/
/*.top_footer .banner_shape2 {*/
/*    right: -10%;*/
/*}*/
/*.footer-links-right {*/
/*    display: flex;*/
/*    justify-content: right;*/
/*}*/
/*.footer-links-left {*/
/*    display: flex;*/
/*    justify-content: left;*/
/*}*/


/*!************************** CONTACT **************************!*/
/*.contact-title {*/
/*    font-family: "Montserrat_Alternate_Bold", sans-serif !important;*/
/*}*/


/*!************************** MEDIA QUERIES **************************!*/
/*@media screen and (max-width: 5000px) {*/
/*    .bottom-city {*/
/*        margin-right: 70px;*/
/*    }*/
/*    .punchline-bottom {*/
/*        padding: 250px 0 160px 0;*/
/*        height: unset;*/
/*    }*/
/*}*/
/*@media screen and (max-width: 1200px) {*/
/*    .astuce-img img {*/
/*        width: 500px;*/
/*        top: 75px;*/
/*    }*/
/*    .astuce-img:not(.desktop-astuce) img {*/
/*        left: -20px;*/
/*    }*/
/*    .bottom-city {*/
/*        width: 1600px;*/
/*        margin-right: 110px;*/
/*    }*/
/*    .punchline-bottom {*/
/*        padding: 270px 0 160px 0;*/
/*        height: unset;*/
/*    }*/
/*    .desktop-astuce img {*/
/*        left: -30px;*/
/*    }*/
/*}*/
/*@media screen and (max-width: 992px) {*/
/*    .punchline-inner {*/
/*        width: 80%;*/
/*    }*/
/*    .mobile-header {*/
/*        display: block;*/
/*    }*/
/*    .desktop-header {*/
/*        display: none;*/
/*    }*/
/*    .banner_image {*/
/*        width: 100% !important;*/
/*    }*/
/*    .desktop-astuce {*/
/*        display: none;*/
/*    }*/
/*    .mobile-astuce {*/
/*        display: block;*/
/*    }*/
/*    .header_container .cta_block {*/
/*        margin-top: 0 !important;*/
/*    }*/
/*    .mobile-moving-animation > div > img {*/
/*        margin-bottom: 30px !important;*/
/*    }*/
/*    .mobile-moving-animation > div {*/
/*        margin-top: 30px !important;*/
/*    }*/
/*    .banner_shape1 {*/
/*        left: -11% !important;*/
/*    }*/
/*    .header_container {*/
/*        margin-top: 80px !important;*/
/*    }*/
/*    .contact_icon {*/
/*        margin: 0 auto !important;*/
/*    }*/
/*    .section_title p {*/
/*        text-align: center;*/
/*    }*/
/*    .astuce {*/
/*        padding-top: 50px;*/
/*    }*/
/*    .astuce-img img {*/
/*        width: 650px;*/
/*        top: 0;*/
/*    }*/
/*    .astuce-img:not(.desktop-astuce) img {*/
/*        left: 0;*/
/*    }*/
/*    .astuce-title, .astuce-sentence {*/
/*        text-align: center;*/
/*    }*/
/*    .bottom-city {*/
/*        width: 1400px;*/
/*    }*/
/*}*/
/*@media screen and (max-width: 767px) {*/
/*    .astuce-img {*/
/*        height: 500px;*/
/*    }*/
/*    .astuce-img img {*/
/*        position: relative !important;*/
/*        width: 500px;*/
/*    }*/
/*    .mobile-moving-animation > div > img*/
/*    {*/
/*        height: 400px !important;*/
/*        width: 400px !important;*/
/*    }*/
/*    .mobile-moving-animation > div {*/
/*        margin-top: 45px !important;*/
/*    }*/
/*    .bottom-city {*/
/*        width: 1000px;*/
/*        margin-right: 70px;*/
/*    }*/
/*    .punchline-bottom {*/
/*        padding: 200px 0 150px 0;*/
/*        height: unset;*/
/*    }*/
/*    .footer-links-right, .footer-links-left {*/
/*        display: block;*/
/*    }*/
/*}*/
/*@media screen and (max-width: 500px) {*/
/*    .punchline {*/
/*        height: 50vh;*/
/*    }*/
/*    .punchline-inner {*/
/*        width: 100%;*/
/*    }*/
/*    .punchline-sentence {*/
/*        font-size: 20px;*/
/*    }*/
/*    .astuce-inner {*/
/*        margin: 50px auto !important;*/
/*    }*/
/*    .astuce-sentence {*/
/*        font-weight: normal;*/
/*        font-size: 1rem;*/
/*        line-height: 1.4;*/
/*    }*/
/*    .astuce-content {*/
/*        max-width: 360px;*/
/*        padding: 0;*/
/*    }*/
/*    .astuce-img {*/
/*        height: 320px;*/
/*        max-width: 320px !important;*/
/*        padding: 0 !important;*/
/*    }*/
/*    .astuce-img img {*/
/*        width: 320px;*/
/*    }*/
/*    .mobile-moving-animation > div > img {*/
/*        height: 300px !important;*/
/*        width: 300px !important;*/
/*        margin-bottom: 0 !important;*/
/*    }*/
/*    .bottom-city {*/
/*        margin-right: 40px;*/
/*        width: 700px;*/
/*    }*/
/*    .front-footer {*/
/*        padding-top: 30px*/
/*    }*/

/*}*/
/*@media screen and (max-width: 425px) {*/
/*    .contact_icon {*/
/*        width: 200px;*/
/*        height: 200px;*/
/*    }*/
/*}*/
/*@media screen and (max-width: 375px) {*/
/*    .astuce-content {*/
/*        max-width: 325px;*/
/*    }*/
/*}*/
/*@media screen and (max-width: 320px) {*/
/*    .astuce-content {*/
/*        max-width: 250px;*/
/*    }*/
/*}*/

/*.rocket {*/
/*    max-width: 100px;*/
/*}*/