@charset "utf-8";


@font-face {
    font-family: 'Signika';
    src: url('../woff2/signika-bold.woff2') format('woff2'),
        url('../woff/signika-bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Signika';
    src: url('../woff2/signika-regular.woff2') format('woff2'),
        url('../woff/signika-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Signika';
    src: url('../woff2/signika-light.woff2') format('woff2'),
        url('../woff/signika-light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Signika';
    src: url('../woff2/signika-semibold.woff2') format('woff2'),
        url('../woff/signika-semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TeXGyreAdventor';
    src: url('../woff2/texgyreadventor-bold.woff2') format('woff2'),
        url('../woff/texgyreadventor-bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}



html, body {
  scroll-behavior: smooth;
  font-size: 16px;
}

#lp-vivoptim .grid-container{
  max-width:1100px;
  margin:auto;
  padding:0;
  font-family: 'Signika', Helvetica, Roboto, Arial, sans-serif;
  font-weight:300;
  color:#4d4d4f;
}

#lp-vivoptim .container{
  max-width:882px;
  margin:auto;
}
#lp-vivoptim .maintitle h1{
  font-family: 'TeXGyreAdventor', sans-serif;
  font-size:27px;
  text-transform: uppercase;
}
#lp-vivoptim .title h3{
  font-family: 'TeXGyreAdventor', sans-serif;
  font-size:32px;
  text-transform:uppercase;
  margin-bottom:2rem;
}

#lp-vivoptim  .grey-section{
  background-color:#f3f3f3;
  padding:2rem;
}


p {
  font-size:1rem;
  line-height:1.3;
  margin:0;
}

ul {
    list-style-type: none;
}

li {
    padding-bottom:1rem;
  line-height:1.4;
  position:relative;
}
li:before {
     content:'';
  display:inline-block;
  background:url("../png/ellipse.png") no-repeat ;
  width:19px;
  height:17px;
  position:absolute;
  left: -21px;
  top: 2px;
}

#lp-vivoptim .cta .button{
  margin:2rem 0;
  font-size:1.05rem;
  font-weight:bold;
  border-radius: 2rem;
  padding: 1.1rem 2.2rem;
  background: linear-gradient(0.25turn, #07af9b, #6cb96b);
}

#lp-vivoptim .title-has-separator:after{
    content:'';
  display:block;
  background: #4cb5b8;
  width:30px;
  height:6px;
  position: relative;
  top: -15px;
  margin: 0 auto;
}

@media screen and (max-width: 39.9375em) {
  #lp-vivoptim {
    overflow: hidden;
  }
}


#lp-vivoptim .splide li:before {
  display: none;
}
#lp-vivoptim .splide li .splide__pagination__page {
  width: 14px;
  height: 14px;
  background: #babbbe;
  margin: 0 7px;
}
#lp-vivoptim .splide li .splide__pagination__page.is-active {
  background: #49aad6;
  transform: scale(1);
}

/* Header */

#lp-vivoptim #header{
  margin-bottom:4rem;
}

#lp-vivoptim #header .grey-section{
  margin-top: -62px;
  z-index: 1;
  position: relative;
}

#lp-vivoptim .maintitle {
     position:relative;
}
#lp-vivoptim .maintitle span{
    color:#6aa517;
  font-size:35px;
  line-height:1.2;
}
#lp-vivoptim .maintitle span:after{
  content:'';
  display:block;
  background: #6aa517;
  width:30px;
  height:6px;
  margin-top: 10px
}

/* Section 1 */

#lp-vivoptim #section-1 .title{
  position:relative;
  margin-bottom:6rem;
}
#lp-vivoptim #section-1 .title:before{
  content:'';
  background:url("../png/new-prog.png") no-repeat ;
  width:218px;
  height:131px;
  position:absolute;
  left: -30px;
  top: -40px;
}
#lp-vivoptim #section-1 .button {
  margin-top: 60px;
  margin-bottom: 80px;
}

#lp-vivoptim #section-1 .color-title{
  font-size:16px;
  color:#fff;
  font-weight: 500;
  text-transform:uppercase;
  padding-bottom:1rem;
}
#lp-vivoptim #section-1 .color-content-txt{
  padding:2rem;
  min-height: 250px;
}


#lp-vivoptim #section-1 .color-bloc{
  background-color:#f3f3f3;
}
#lp-vivoptim #section-1 #bloc-1 .color-title {
  background-color:#49aad6;
}
#lp-vivoptim #section-1 #bloc-1 .color-content-txt strong {
  color:#49aad6;
}
#lp-vivoptim #section-1 #bloc-2 .color-title{
  background-color:#4cb5b8;
}
#lp-vivoptim #section-1 #bloc-2 .color-content-txt strong {
  color:#4cb5b8;
}
#lp-vivoptim #section-1 #bloc-3 .color-title {
  background-color:#53b9a3;
}
#lp-vivoptim #section-1 #bloc-3 .color-content-txt strong {
  color:#53b9a3;
}
#lp-vivoptim #section-1 .color-title img{
  margin-top:-3rem;
}

@media screen and (max-width: 39.9375em) {
  #lp-vivoptim .title h3 {
    margin-bottom: 1rem;
  }
  #lp-vivoptim .title.title-has-separator h3 {
    margin-bottom: 2rem;
  }
  #lp-vivoptim #section-1 .color-bloc {
    display: flex;
    height: 100%;
    flex-direction: column;
  }
  #lp-vivoptim #section-1 .color-content-txt {
    flex-grow: 1;
    padding: 20px;
  }
  #lp-vivoptim #section-1 .title {
    margin-bottom: 1rem;
  }
  #lp-vivoptim #section-1 .splide {
    padding-bottom: 60px;
  }
  #lp-vivoptim #section-1 .splide__track {
    padding-top: 60px;
  }
  #lp-vivoptim #section-1 .splide__slide {
    padding-left: .5rem;
    padding-right: .5rem;
  }
  #lp-vivoptim #section-1 .color-content-txt{
    min-height: 200px;
  }
  #lp-vivoptim #section-1 .color-title img {
    max-width: 43%;
  }
}

/* Section 2  */

#lp-vivoptim #section-2 {
  position: relative;
  z-index: 2;
  padding-top: 100px;
  background: #f3f3f3;
}
#lp-vivoptim #section-2 .title-has-separator:after{
  background: #6bb96c;
  margin-bottom: 25px;
}
#lp-vivoptim #section-2 .title{
  position:relative;
}
#lp-vivoptim #section-2 .video {
  margin-bottom: -140px;
}
#lp-vivoptim .video {
  max-width: 620px;
  margin: 2rem auto 1rem;
  position: relative;
}
#lp-vivoptim .video.waiting-play {
  cursor: pointer;
}
#lp-vivoptim .video.waiting-play:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  border-radius: 10px;
  width: 122px;
  height: 74px;
  margin-left: -61px;
  margin-top: -37px;
  background: url('../png/video-play.png') 55% 50% no-repeat rgb(0 0 0 / 75%);
  background-size: 34px 40px;
}

/* Section 3 */

#lp-vivoptim #section-3 {
  position: relative;
  z-index: 1;
}
#lp-vivoptim #section-3 #personnas {
  background: linear-gradient(90deg, #07af9b, #6cb96b);
  min-height: 560px;
  display: flex;
  width: 100%;
  color: #fff;
  align-items: center;
  justify-content: center;
}
#lp-vivoptim #section-3 #personnas-slider {
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 154px;
}
#lp-vivoptim #section-3 #personnas-slider .image {
  max-width: 208px;
  margin: 0 auto;
  padding: 17px;
  border: 2px solid transparent;
  border-radius: 50%;
  transition: border .3s ease;
}
#lp-vivoptim #section-3 #personnas-slider .is-active .image {
  border-color: #b9e4d4;
}
#lp-vivoptim #section-3 #personnas-slider .name {
  font-weight: 500;
  font-size: 22px;
  display: block;
  height: 54px;
  padding-top: 14px;
  margin-bottom: 10px;
}
#lp-vivoptim #section-3 #personnas-slider p.desc {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease;
  height: 100px;
  max-width: 100%;
  width: 100%;
}
#lp-vivoptim #section-3 #personnas-slider .splide__arrow {
  background: none;
  font-size: 40px;
  font-weight: 100;
}
#lp-vivoptim #section-3 #personnas-slider .splide__arrow--prev {
  left: -1em;
}
#lp-vivoptim #section-3 #personnas-slider .splide__arrow--next {
  right: -1em;
}
#lp-vivoptim #section-3 #personnas-slider .is-active p.desc {
  opacity: 1;
  visibility: visible;
}
#lp-vivoptim #section-3 .title span {
  color: #4cb5b8;
  font-size: 20px;
}
#lp-vivoptim #section-3 .title:after {

}

#lp-vivoptim #section-3 #personnas-content-container {
  padding-top: 40px;
  padding-bottom: 80px;
}
#lp-vivoptim #section-3 #personnas-content-container .header {
  color: #fff;
  font-weight: 500;
  text-transform: uppercase;
  padding: 50px 15px 15px;
}

#lp-vivoptim #section-3 #personnas-content-container {
  background: #f3f3f3;
}
#lp-vivoptim #section-3 #personnas-content-container .personnas-content {
  max-width: 920px;
  margin: 0 auto;
}
#lp-vivoptim #section-3 #personnas-content-container .personnas-content .cell {
  margin-top: 70px;
}
#lp-vivoptim #section-3 #personnas-content-container .header {
  position: relative;
}
#lp-vivoptim #section-3 #personnas-content-container .header:before {
  display: block;
  content: '';
  width: 122px;
  height: 98px;
  position: absolute;
  top: -52px;
  left: 50%;
  margin-left: -61px;
}
#lp-vivoptim #section-3 #personnas-content-container .header.header-1 {
  background: #4cb5b8
}
#lp-vivoptim #section-3 #personnas-content-container .header.header-1:before {
  background: url('../png/personna-header-icon-1.png');
}
#lp-vivoptim #section-3 #personnas-content-container .header.header-2 {
  background: #53b9a3
}
#lp-vivoptim #section-3 #personnas-content-container .header.header-2:before {
  background: url('../png/personna-header-icon-2.png');
}
#lp-vivoptim #section-3 #personnas-content-container .content {
  padding: 30px 40px;
  background: #fff;
  text-align: justify;
  letter-spacing: -.01rem;
  min-height: 210px;
}

#lp-vivoptim #section-3 #personnas-parcours-container {
  padding: 80px 0;
}
#lp-vivoptim #section-3 #personnas-parcours-container .title:after {
  background: #4d4d4f
}
#lp-vivoptim #section-3 #personnas-parcours-container .personnas-parcours {
  position: relative;
}

@media screen and (min-width: 40em) {
  #lp-vivoptim #section-3 #personnas-parcours-container .personnas-parcours .title {
    margin-bottom: 50px;
  }
}

#lp-vivoptim #section-1 .splide li:nth-child(2) .splide__pagination__page.is-active {
  background: #4cb5b8;
}
#lp-vivoptim #section-1 .splide li:nth-child(3) .splide__pagination__page.is-active {
  background: #53b9a3;
}

#lp-vivoptim #personnas-content-container .splide li:nth-child(1) .splide__pagination__page.is-active {
  background: #4cb5b8;
}
#lp-vivoptim #personnas-content-container .splide li:nth-child(2) .splide__pagination__page.is-active {
  background: #53b9a3;
}

#lp-vivoptim #section-3 #personnas-parcours-container .splide li:nth-child(2) .splide__pagination__page.is-active {
  background: #6db96a;
}
#lp-vivoptim #section-3 #personnas-parcours-container .splide li:nth-child(3) .splide__pagination__page.is-active {
  background: #c6ca2e;
}
#lp-vivoptim #section-3 #personnas-parcours-container .splide li:nth-child(4) .splide__pagination__page.is-active {
  background: #4cb5b8;
}
#lp-vivoptim #section-3 #personnas-parcours-container .splide li:nth-child(5) .splide__pagination__page.is-active {
  background: #49aad6;
}
#lp-vivoptim #section-3 #personnas-parcours-container .splide li:nth-child(6) .splide__pagination__page.is-active {
  background: #c6ca2e;
}

#lp-vivoptim #section-3 #personnas-parcours-container .personna-stick {
  position: absolute;
  left: 0;
  top: 100px;
  border-radius: 0 47px 47px 0;
  padding: 5px 5px 5px 20px;
  background: linear-gradient(0.25turn, #07af9b, #6cb96b);
  transform: translateY(15px);
}
#lp-vivoptim #section-3 #personnas-parcours-container .personna-stick img {
  max-width: 85px;
}

#lp-vivoptim #section-3-bottom p {
  margin-bottom: 0;
}
#lp-vivoptim #section-3-bottom .cta .button {
  margin-bottom: 3rem;
  margin-top: 1rem;
}

#lp-vivoptim .suptitle {
  color: #6aa517;
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
  font-family: 'TeXGyreAdventor', sans-serif;
  margin-bottom: .7rem;
}

#lp-vivoptim #section-3 .parcours-content .parcours-step h3 {
  font-size: 1rem;
  font-weight: bold;
  font-family: 'TeXGyreAdventor', sans-serif;
  margin-bottom: 5px;
}
#lp-vivoptim #section-3 .parcours-content .parcours-step p {
  letter-spacing: -0.06rem;
}
#lp-vivoptim #section-3 .parcours-content .parcours-step-1 h3 {
  color: #49aad6;
}
#lp-vivoptim #section-3 .parcours-content .parcours-step-2 h3 {
  color: #6db96a;
}
#lp-vivoptim #section-3 .parcours-content .parcours-step-3 h3 {
  color: #c6ca2e;
}
#lp-vivoptim #section-3 .parcours-content .parcours-step-4 h3 {
  color: #4cb5b8;
}
#lp-vivoptim #section-3 .parcours-content .parcours-step-5 h3 {
  color: #49aad6;
}
#lp-vivoptim #section-3 .parcours-content .parcours-step-6 h3 {
  color: #c6ca2e;
}

@media screen and (min-width: 40em) {
  #lp-vivoptim #section-3 .parcours-content {
    position: relative;
    max-width: 840px;
    margin: 0 auto;
  }
  #lp-vivoptim #section-3 .parcours-content .splide__track {
    position: static;
    overflow: visible;
  }
  #lp-vivoptim #section-3 .parcours-content .splide__list {
    width: auto;
    will-change: initial;
  }
  #lp-vivoptim #section-3 .parcours-content .parcours-step {
    position: absolute;
    width: 290px;
    text-align: left;
  }
  #lp-vivoptim #section-3 .parcours-content .parcours-step-1 {
    right: 0;
    top: 0;
  }
  #lp-vivoptim #section-3 .parcours-content .parcours-step-2 {
    left: 0;
    top: 115px;
    text-align: right;
  }
  #lp-vivoptim #section-3 .parcours-content .parcours-step-3 {
    right: 0;
    top: 220px;
  }
  #lp-vivoptim #section-3 .parcours-content .parcours-step-4 {
    left: 0;
    top: 330px;
    text-align: right;
  }
  #lp-vivoptim #section-3 .parcours-content .parcours-step-5 {
    right: 0;
    top: 430px;
  }
  #lp-vivoptim #section-3 .parcours-content .parcours-step-6 {
    left: 0;
    top: 535px;
    text-align: right;
  }

  #lp-vivoptim #section-3 #personnas-parcours-2 .parcours-content .parcours-step-2 {
    top: 95px;
  }
  #lp-vivoptim #section-3 #personnas-parcours-4 .parcours-content .parcours-step-2 {
    top: 95px;
  }
  #lp-vivoptim #section-3 #personnas-parcours-4 .parcours-content .parcours-step-4 {
    top: 360px;
  }

}

@media screen and (max-width: 39.9375em) {
  html, body {
    font-size: 16px;
  }

  #lp-vivoptim #section-3 #personnas-slider {
    width: 87%;
  }
  #lp-vivoptim .maintitle {
    text-align: center;
  }
  #lp-vivoptim .maintitle h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
  }
  #lp-vivoptim .maintitle span {
    font-size: 2rem;
    margin-top: 10px;
    display: block;
  }
  #lp-vivoptim .maintitle span:after {
    margin-left: auto;
    margin-right: auto;
    margin-top: 18px;
  }

  #lp-vivoptim .suptitle {
    font-size: 16px;
    margin-bottom: 1.5rem
  }
  #lp-vivoptim #section-3 #personnas-parcours-container .personna-stick {
    display: none;
  }
  #lp-vivoptim #section-3 #personnas-content-container .personnas-content__slider {
    padding-bottom: 80px;
  }
  #lp-vivoptim #section-3 #personnas-content-container .personnas-content .splide__track {
    padding-top: 50px;
  }
  #lp-vivoptim #section-3 #personnas-content-container .personnas-content .splide__slide {
    padding-left: .5rem;
    padding-right: .5rem;
    display: flex;
    flex-direction: column;
  }
  #lp-vivoptim #section-3 #personnas-content-container .personnas-content .splide__slide.is-active {
    display: flex !important;
  }
  #lp-vivoptim #section-3 #personnas-content-container .content {
    padding: 20px;
  }
  #lp-vivoptim #section-3 #personnas-content-container .header {
    padding-top: 35px;
  }
  #lp-vivoptim #section-3 #personnas-content-container .header:before {
    transform: scale(.7);
  }
  #lp-vivoptim #section-3 #personnas-content-container .content {
    flex-grow: 1;
  }

  #lp-vivoptim #section-2 .video {
    margin-top: 0;
  }
  #lp-vivoptim #section-2 {
    padding-top: 3rem;
  }
  #lp-vivoptim #section-3 .parcours-content {
    margin: 0 auto;
  }
  #lp-vivoptim #section-3 .parcours-graphic {
    overflow: hidden;
    position: relative;
  }
  #lp-vivoptim #section-3 .parcours-graphic .parcours-v-mobile {
    width: 600vw;
    max-width: none;
    transition: transform .28s ease;
  }

  #lp-vivoptim #section-3 .parcours-content .parcours-steps {
    padding-bottom: 6rem;
  }
  #lp-vivoptim #section-3 .parcours-content .parcours-steps .splide__slide {
    padding:0 3rem;
  }


}

@media screen and (max-width: 420px) {
  html, body {
    font-size: 14px;
  }
  #lp-vivoptim #section-1 .button {
    min-width: 77%;
  }
}
@media screen and (max-width: 360px) {
  html, body {
    font-size: 13px;
  }
  #lp-vivoptim .cta .button {
    padding: .9rem 1.7rem;
  }
}
/* Section 4 */

#lp-vivoptim #section-4 .title span{
  color:#4cb5b8;
  font-size:20px;
}

#lp-vivoptim #section-4 {
  position:relative;
}

#lp-vivoptim #section-4 .title:after{
    content:'';
  display:block;
  background:url("../png/blue-stick.png") no-repeat ;
  width:37px;
  height:13px;
  position:absolute;
  left:48%;
  top:17%;
}
#lp-vivoptim #section-4 .content-text{
  margin-top:4rem;
}
#lp-vivoptim #section-4 .content-text .programm {
  text-transform: uppercase;
  margin-bottom: 10px;
}
#lp-vivoptim #section-4 .content-text li {
  padding-bottom: 10px;
  line-height: 1.3;
}

/* Mention */


#lp-vivoptim #mentions{
  padding:1rem 0;
}
#lp-vivoptim #mentions p{
    font-size:12px;
  font-weight:300;
}

@media screen and (max-width: 64em) {

}

@media screen and (max-width: 39.9375em) {

#lp-vivoptim #header {
  margin-bottom: 1rem;
}
#lp-vivoptim .title h3 {
    font-size: 25px;
}

#lp-vivoptim #section-4 .title span {
    font-size: 15px;
}

#lp-vivoptim .maintitle {
    margin-bottom: 40px;
}

#lp-vivoptim #section-1 .title:before{
  position:static;
  display: block;
  max-width:30%;
  background-size: contain;
  height: 75px;
  margin: 0;
}

#lp-vivoptim #header .grey-section {
  max-width:90%;
  margin-top: -18px;
  margin-top: -5%;
  padding:1rem;
}

#lp-vivoptim #section-1 .title::after {
    top: 108%;
}



}