@charset "UTF-8";
html {
  scroll-behavior: smooth; }

body {
  background-color: #F5F7FB;
  margin: 0; }

.body-gene {
  margin: 0px 20px; }

p {
  color: #303236; }

.header {
  position: relative; }

a {
  text-decoration: none; }

.background-head {
  background-image: url("./ronds-flou.png");
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(80px);
  height: 70vh;
  width: 100%;
  max-width: 900px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  z-index: -1; }

h1 {
  color: #111928;
  text-align: center;
  font-size: 25px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; 
  font-family: "Inter";
  margin-top: 0;
}


h2.title-h2-head{
  margin-top: 10px;
}

p {
  font-family: "Inter";
  font-size: 16px; 
}

div#center-block {
  display: flex;
  margin: auto;
  z-index: 9;
  max-width: 550px;
  margin-top: auto;
  position: relative;
  margin-bottom: auto;
  flex-direction: column;
  height: 100%;
  padding-left: 15px;
  padding-right: 15px;
  justify-content: center;
}

.blue-title {
  color: #1C64F2;
  text-align: center;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; 
  letter-spacing: -0.24px;
  margin-bottom: 10px;
}

#text {
  color:#6B7280;
  text-align: center;
  font-family: 'Inter';
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; 
}

.flex {
  color: #6B7280;
  text-align: center;
  font-family: 'Inter';
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 21px */
  text-decoration-line: underline;
  display:flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
}

.flex a {
  color: #6B7280;
}

.flex a:hover {
  color: #000;
}

/* ---- BOUTON BUBBLE ---- */
* {
  box-sizing: border-box; }

.button-full {
  margin-top: 60px; }

.button {
  -webkit-font-smoothing: antialiased;
  background-color: #ED737C;
  border: none;
  color: #fff;
  display: inline-block;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  user-select: none;
  padding: 14px 24px;
  transition: all 0.1s ease-out; }
  .button:hover {
    background-color: #87CBC9;
    color: #fff; 
    cursor: pointer;
  }
  .button:active {
    transform: scale(0.95); }
  .button--bubble {
    position: relative;
    z-index: 2;
    color: white;
    background: none; }
    .button--bubble:hover {
      background: none; }
    .button--bubble:hover + .button--bubble__effect-container .circle {
      background: #52b4b1; }
    .button--bubble:hover + .button--bubble__effect-container .button {
      background: #52b4b1; }
    .button--bubble:active + .button--bubble__effect-container {
      transform: scale(0.95); }
    .button--bubble__container {
      position: relative;
      display: inline-block; }
      .button--bubble__container .effect-button {
        position: absolute;
        width: 50%;
        height: 25%;
        top: 50%;
        left: 25%;
        z-index: 1;
        transform: translateY(-50%);
        background: #ED737C;
        transition: background 0.1s ease-out; }

.button--bubble__effect-container {
  position: absolute;
  display: block;
  width: 200%;
  height: 400%;
  top: -150%;
  left: -50%;
  -webkit-filter: url("#goo");
  filter: url("#goo");
  transition: all 0.1s ease-out;
  pointer-events: none; }
  .button--bubble__effect-container .circle {
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 15px;
    background: #ED737C;
    transition: background 0.1s ease-out; }
    .button--bubble__effect-container .circle.top-left {
      top: 40%;
      left: 27%; }
    .button--bubble__effect-container .circle.bottom-right {
      bottom: 40%;
      right: 27%; }

.goo {
  position: absolute;
  visibility: hidden;
  width: 1px;
  height: 1px; }

.container .button-full .button--bubble__container {
  width: auto; }

.button--bubble__container {
  top: 50%;
  margin-top: -25px;
  width: calc(100% - 10px); }

@keyframes hue-rotate {
  from {
    -webkit-filter: hue-rotate(0);
    -moz-filter: hue-rotate(0);
    -ms-filter: hue-rotate(0);
    filter: hue-rotate(0); }
  to {
    -webkit-filter: hue-rotate(360deg);
    -moz-filter: hue-rotate(360deg);
    -ms-filter: hue-rotate(360deg);
    filter: hue-rotate(360deg); } }

.container {
  max-width: 1240px;
  display: block;
  margin: auto;
  margin-bottom: 50px; }

.header {
  margin-top: 50px; }

  img#logo-mooood{
    max-width: 140px;
  }

.container-header-2 {
  width: 100%;
  margin: auto;
  text-align: center;
  margin-top: 100px; }

h2.title-h2 {
  margin-top: 100px;
  margin-bottom: 50px;
  text-align: center; }

#container-modeles {
  display: flex;
  flex-wrap: wrap;
  column-gap: 20px;
  row-gap: 60px;
  justify-content: center; }

.container-card {
  width: calc(100% - 20px);
  background: #FFF;
  border-radius: 20px;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
  transition: transform 0.20s ease-out; }
  .container-card img {
    width: 100%;
    border-radius: 20px 20px 0 0; }

a#button-disconect {
  border: solid #51B4B1 1px;
  color: #51B4B1;
  border-radius: 8px;
  padding: 12px 24px;
  float: right;
  font-family: "Inter";
 }

a#button-disconect:hover {
  border: solid #ED737C 1px;
  color: #ED737C; }

.container-card:hover {
  transform: scale(103%);
  transition: transform 0.20s ease-out; }

.subtitle-1 {
  font-weight: 700;
  text-align: center; }

/* - FOOTER - */
.footer-gene {
  background-color: #FFF;
  padding: 20px 0px;
  width: 100%;
  text-align: center; }

.footer-gene p {
  font-size: 14px; }

.footer-gene a {
  color: #ED737C; }

.footer-gene a:hover {
  color: #87CBC9; }

/* --- RESPONSIVE MOBILE --- */
@media screen and (min-width: 650px) {
  .container-card {
    width: calc(100% / 2 - 50px); }
  #container-modeles {
    column-gap: 50px; }
  .body-gene {
    margin: 0px 100px; }
  h2 {
    font-size: 32px; }
  .container-header-2 {
    width: 600px; }
  h2.title-h2 {
    margin-bottom: 150px; }
  .container {
    margin-bottom: 100px; }
  .footer-gene {
    background-color: #FFF;
    padding: 20px 0px;
    width: 100%; }

    img#logo-mooood{
      max-width: 100%;
    }

    h1 {
      font-size: 36px;
    }
  }

@media screen and (min-width: 890px) {
  .container-card {
    width: calc(100% / 3 - 50px); } }

/* <<<<<<  PAGE LOGIN >>>>>> */
/* ---- FORMULAIRE ---- */
.box {
  padding: 30px 15px 30px 15px;
  background: #ffffffbf;
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
  margin: auto;
  width: calc(100% - 40px);
  position: relative;
  z-index: 10;
  border-radius: 16px;
  margin-top: 50vh;
  /* poussé de la moitié de hauteur de viewport */
  transform: translateY(-50%); }

.box-logo img {
  text-align: center;
  width: 60%;
  margin-bottom: 10px; }

.box-register {
  text-align: center;
  margin-bottom: 0px; }

.box-register a {
  text-decoration: none;
  font-size: 12px;
  color: #666; }

.box-input {
  font-size: 14px;
  background: #fff;
  border: 1px solid #ddd;
  margin-bottom: 20px;
  padding-left: 10px;
  border-radius: 8px;
  width: calc(100% - 10px);
  height: 50px; }

.box-input:focus {
  outline: none;
  border-color: #5c7186; }

.sucess {
  text-align: center;
  color: white; }

.sucess a {
  text-decoration: none;
  color: #07f37d; }

p.errorMessage {
  background-color: #e66262;
  border: #AA4502 1px solid;
  padding: 5px 10px;
  color: #FFFFFF;
  border-radius: 3px; }

form .button-full {
  margin-top: 50px;
  margin-bottom: 20px;
  text-align: center; }


h1.box-logo {
  text-align: center !important;
  margin-bottom: 30px !important;
  margin-top: 20px !important; }

input.box-input {
  margin-left: auto;
  margin-right: auto;
  display: flex; }

/* --- Animation Background --- */
@keyframes move {
  100% {
    transform: translate3d(0, 0, 1px) rotate(360deg); } }

.background {
  z-index: 0;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: #f5f7fb;
  overflow: hidden; }

.background span.boule {
  z-index: 1 !important;
  width: 40vmin;
  height: 40vmin;
  border-radius: 40vmin;
  backface-visibility: hidden;
  filter: blur(80px);
  position: absolute;
  animation: move;
  animation-duration: 12;
  animation-timing-function: linear;
  animation-iteration-count: infinite; }

.background span.boule:nth-child(0) {
  color: #fdda00;
  top: 50%;
  left: 31%;
  animation-duration: 145s;
  animation-delay: -294s;
  transform-origin: 7vw 6vh;
  box-shadow: -80vmin 0 10.48951128183593vmin currentColor; }

.background span.boule:nth-child(1) {
  color: #fdda00;
  top: 20%;
  left: 72%;
  animation-duration: 106s;
  animation-delay: -52s;
  transform-origin: -9vw -17vh;
  box-shadow: -80vmin 0 10.579418043590751vmin currentColor; }

.background span.boule:nth-child(2) {
  color: #fdda00;
  top: 6%;
  left: 5%;
  animation-duration: 88s;
  animation-delay: -55s;
  transform-origin: 1vw 23vh;
  box-shadow: 80vmin 0 10.559836385453698vmin currentColor; }

.background span.boule:nth-child(3) {
  color: #ed737c;
  top: 44%;
  left: 26%;
  animation-duration: 81s;
  animation-delay: -300s;
  transform-origin: -10vw -23vh;
  box-shadow: 80vmin 0 10.625956407239103vmin currentColor; }

.background span.boule:nth-child(4) {
  color: #87cbc9;
  top: 56%;
  left: 62%;
  animation-duration: 100s;
  animation-delay: -106s;
  transform-origin: -6vw 2vh;
  box-shadow: 80vmin 0 10.370495910528515vmin currentColor; }

.background span.boule:nth-child(5) {
  color: #6abb8c;
  top: 22%;
  left: 41%;
  animation-duration: 118s;
  animation-delay: -289s;
  transform-origin: 24vw -13vh;
  box-shadow: -80vmin 0 10.709580836205959vmin currentColor; }

.background span.boule:nth-child(6) {
  color: #6abb8c;
  top: 60%;
  left: 24%;
  animation-duration: 117s;
  animation-delay: -255s;
  transform-origin: 21vw -15vh;
  box-shadow: 80vmin 0 10.519154818061523vmin currentColor; }

.background span.boule:nth-child(7) {
  color: #ed737c;
  top: 5%;
  left: 18%;
  animation-duration: 74s;
  animation-delay: -295s;
  transform-origin: 13vw -8vh;
  box-shadow: -80vmin 0 10.78025809810439vmin currentColor; }

.background span.boule:nth-child(8) {
  color: #6abb8c;
  top: 68%;
  left: 41%;
  animation-duration: 202s;
  animation-delay: -313s;
  transform-origin: 14vw -24vh;
  box-shadow: -80vmin 0 10.29242855728978vmin currentColor; }

.background span.boule:nth-child(9) {
  color: #87cbc9;
  top: 3%;
  left: 87%;
  animation-duration: 208s;
  animation-delay: -40s;
  transform-origin: 16vw 19vh;
  box-shadow: 80vmin 0 10.048594474976701vmin currentColor; }

.background span.boule:nth-child(10) {
  color: #fdda00;
  top: 78%;
  left: 5%;
  animation-duration: 216s;
  animation-delay: -50s;
  transform-origin: 5vw 15vh;
  box-shadow: -80vmin 0 10.992638312051833vmin currentColor; }

.background span.boule:nth-child(11) {
  color: #87cbc9;
  top: 61%;
  left: 95%;
  animation-duration: 42s;
  animation-delay: -50s;
  transform-origin: -8vw -21vh;
  box-shadow: -80vmin 0 10.164916685106856vmin currentColor; }

/* --- RESPONSIVE MOBILE --- */
/* -- Page Login - Formulaire -- */
@media screen and (min-width: 650px) {
  .box {
    padding: 30px 25px 30px 25px;
    width: 450px; }
  .box-input {
    width: 320px; }
  .button--bubble__container {
    width: 320px; } }


    /* ---- TEXT ANIMATION COLOR ---- */

    
    .gradient-h2-1{
     
      position: relative;
      
      background-image: transparent;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      
        animation-duration: 6s;
        
        animation-name: test;
        animation-timing-function: ease;
        animation-iteration-count: infinite;
         
    }
    
    .gradient-h2-1:before {
      content:"6-10 pages";
      position: absolute;
      animation: beforeAnime;
      background: linear-gradient(90deg,#f1555f,#ED737C,#ee5c66);
      z-index:-1;
          -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .gradient-h2-2{
     
      position: relative;
      
      background-image: transparent;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      
        animation-duration: 6s;
        animation-name: test;
        animation-timing-function: ease;
        animation-iteration-count: infinite;  
    }
    
    .gradient-h2-2:before {
      content:"2-5 pages";
      position: absolute;
      animation: beforeAnime;
      background: linear-gradient(90deg,#00ca9e, #6ABB8C, #00ca9e);
      z-index:-1;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .gradient-h2-3{
     
      position: relative;
      
      background-image: transparent;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      
        animation-duration: 6s;
        animation-name: test;
        animation-timing-function: ease;
        animation-iteration-count: infinite;  
    }
    
    .gradient-h2-3:before {
      content:"One page";
      position: absolute;
      animation: beforeAnime;
      background: linear-gradient(90deg,#f1555f,#ED737C,#ee5c66);
      z-index:-1;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    
    @keyframes test {
        0%  {
          background:black;
          -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        }
        50.0%  {
          background:black;
          -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        }
      
        66.667%, 83.333% {
          background: transparent;
                -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        }
      
          100.0%  {
          background:black;
          -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        }
    /*     100.0%  {
          background:transparent;
          -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        } */
    }