/*** LANDING PAGE ************************************************************************************/

/*** TYPO ****************************************************/

/* H1 */
.hs-landing-page h1 {
  color: #227836;
  font-family: "Fredoka", sans-serif;
  font-size: 32px;
  line-height: 32px;
  @media screen and (min-width: 768px) {
    font-size: 44px;
    line-height: 44px;
  }
  font-weight: 600;
}

/* H2 */
.hs-landing-page h2 {
  color: #227836;
  font-family: "Fredoka", sans-serif;
  font-size: 32px;
  line-height: 32px;
  @media screen and (min-width: 768px) {
    font-size: 44px;
    line-height: 44px;
  }
  font-weight: 600;
}

/* PARAGRAPH */
.hs-landing-page p {
  color: #292929;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
}

.hs-landing-page p a { color: inherit; }


/*** BOUTON **************************************************/
a.button {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin: 20px 0 0 0;
  padding: 0 25px;

  color: white;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;

  background-color: #A3CE16;
  border: 3px solid #A2CE15;
  border-radius: 20px;
  transition: all ease-in-out .3s;
}
a.button:hover {
  color: #A3CE16;
  background-color: white;
  border: 3px solid #A2CE15;
}

.landingBT {
  display: flex;
  flex-direction: column;
  @media screen and (min-width: 768px) {
    flex-direction: row;
    align-items: center;
  }
  gap: 10px 30px;
}
.landingBT_item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin: 0;
  padding: 0 25px;
  
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  
  border-radius: 20px;
  transition: all ease-in-out .3s;
}

/* PRIMARY */
.landingBT_item--primary {
  color: white;
  background-color: #A3CE16;
  border: 3px solid #A2CE15;
}
.landingBT_item--primary:hover {
  color: #A3CE16;
  background-color: white;
  border: 3px solid #A2CE15;
}

/* WHITE */
.landingBT_item--white {
  color: #A3CE16;
  background-color: white;
  border: 3px solid #A2CE15;
}
.landingBT_item--white:hover {
  color: white;
  background-color: #A3CE16;
}

/*** IMAGE ***/
img {
  display: block;
  margin: 0;
}



/*** HEADER **************************************************/
main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-1 {
  @media screen and (min-width: 768px) {
    background-color: white;
    box-shadow: 0px 3px 18px #00000029;
  }
}

main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-1 > .row-fluid {
  display: flex;
  flex-direction: column;
  @media screen and (min-width: 768px) {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;    
  }
}

/*** RESET ***/
main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-1 > .row-fluid > .widget-span {
  width: auto;
  margin: 0;
}


/*** MOBILE : HEADER ***/
main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-1 > .row-fluid > .widget-span:nth-child(1) {
  @media screen and (max-width: 767px) {
    position: relative;

    display: flex;
    flex-direction: row;
    align-items: center;
    height: 80px;
    background-color: white;
    border-bottom: 1px solid #d4e4d7;
  }
}

/*** MOBILE : LOGO ***/
main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-1 > .row-fluid > .widget-span:nth-child(1) > .row-depth-1.row-number-2 {
  @media screen and (max-width: 767px) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}


/*** MOBILE : BT TOGGLE ***/
.bt-menu-mobile {
  @media screen and (max-width: 767px) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    margin: 0;

    background-image: url(https://144893003.fs1.hubspotusercontent-eu1.net/hubfs/144893003/Landing/burger-black.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 30px;
  }
  @media screen and (min-width: 768px) { display: none: }
}
.menuOpen .bt-menu-mobile {
  @media screen and (max-width: 767px) {
    background-image: url(https://144893003.fs1.hubspotusercontent-eu1.net/hubfs/144893003/Landing/cross-black.svg);
  }
}


/*** HEADER : MENU ***/
main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-1 > .row-fluid > .widget-span:nth-child(2) {
  @media screen and (max-width: 767px) {
    display: none;
    
    height: calc(100vh - 80px);
    background-color: white;
    overflow: auto;
  }
}
.menuOpen main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-1 > .row-fluid > .widget-span:nth-child(2) {
  @media screen and (max-width: 767px) {
    display: block;
    height: calc(100vh - 80px);
  }  
}




/*** MENU : LISTE *****************************/
main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-1 .hs-menu-wrapper > ul {
  display: flex;
  flex-direction: column;
  @media screen and (min-width: 768px) {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  gap: 10px 40px;
  margin: 0;
  
  @media screen and (max-width: 767px) { padding: 20px; }
}
main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-1 .hs-menu-wrapper > ul > li { padding: 0; }

main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-1 .hs-menu-wrapper > ul > li > a {
  padding: 10px 0;
  color: #227836;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
}


/*** BT CONTACT ***/
main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-1 .hs-menu-wrapper .hs-menu-depth-1:nth-child(2) > a {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 40px;
  padding: 0 25px;

  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  
  background-color: #A2CE15;
  border-radius: 20px;
}


/*** BT APP ***/
main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-1 .hs-menu-wrapper .hs-menu-depth-1:nth-child(3) > a {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  @media screen and (min-width: 768px) { max-width: 210px; }
  height: 40px;
  padding: 0 25px;

  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  line-height: 16px;
  font-weight: 600;
  
  background-color: #FD6969;
  border-radius: 20px;
}


/*** DROPDOWN ***/
main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-1 .hs-menu-wrapper .hs-item-has-children { position: relative; }
main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-1 .hs-menu-wrapper .hs-item-has-children:hover .hs-menu-children-wrapper { display: block; }

main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-1 .hs-menu-children-wrapper {
  margin: 0;
  padding: 20px;
  background-color: #227837;
  border: none;
  border-radius: 6px;
  
  @media screen and (min-width: 768px) {
    display: none;
    
    position: absolute;
    top: calc(100% + 5px);
    left: -1px;
    z-index: 99;
    
    width: 200px;
  }
}

main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-1 .hs-menu-children-wrapper li { margin-top: 10px; }
main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-1 .hs-menu-children-wrapper li:first-child { margin-top: 0; }
main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-1 .hs-menu-children-wrapper a {
  margin: 0;
  padding: 0;

  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
}



/*** BAN *****************************************************/
main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-4 {
  min-height: 640px;
  padding: 40px 20px;
  @media screen and (min-width: 768px) { padding: 70px 0 180px 0; }
}

/*** CONTENT ***/
main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-4 > .row-fluid { gap: 20px 50px; }

/* COL 1 */
@media screen and (min-width: 768px) {
  main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-4 > .row-fluid > .span6:nth-child(1) { padding-top: 30px; }
}


/*** H1 ***/
main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-4 h1 { margin-bottom: 30px; }

/*** PARAGRAPH ***/
main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-4 p { margin-bottom: 20px; }

/*** LISTE ***/
main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-4 > .row-fluid > .widget-span:nth-child(1) ul {
  display: flex;
  flex-direction: column;
  gap: 8px 0;
  margin-bottom: 20px;
  
  color: #227837;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  text-align: left;
}
main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-4 > .row-fluid > .widget-span:nth-child(1) li {
  display: flex;
  flex-direction: row;
  align-items: center;
}
main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-4 > .row-fluid > .widget-span:nth-child(1) li::before {
  content: "";
  width: 25px;
  height: 25px;
  margin-right: 10px;
  
  background-image: url(https://144893003.fs1.hubspotusercontent-eu1.net/hubfs/144893003/Landing/puce-green.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-4 > .row-fluid > .widget-span:nth-child(1) li span { margin: 0; }

/*** DECO ***/
@media screen and (min-width: 768px) {
  main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-4 > .row-fluid { position: relative; }
  main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-4 > .row-fluid::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -180px;
    width: 180px;
    height: 180px;
    background-image: url(https://144893003.fs1.hubspotusercontent-eu1.net/hubfs/144893003/Landing/ban-mascotte.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    animation: hopping 2s ease-in-out infinite;
  }

  /* ANIMATION : HOPPING */
  @keyframes hopping {
    0% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-10px); }
    100% { transform: translateX(-50%) translateY(0); }
  }
}



/*** ACCORDION ***********************************************/
main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-13 > .row-fluid {
  @media screen and (max-width: 767px) { padding: 0 20px; }
  gap: 20px 80px;
}

/*** ACCORDION : ILLU ***/
main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-13 > .row-fluid img {
  display: block;
  margin: 0;
}

/*** ACCORDION : ITEM ***/
details.accordion.accordion--plus.card { margin: 20px 0 0 0; }
details.accordion.accordion--plus.card:first-child { margin: 0; }

/*** ACCORDION : TITRE ***/
details.accordion.accordion--plus.card .accordion__summary {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  
  padding: 10px 25px;

  color: #227836;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  
  background-color: white;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  
  transition: all ease-in-out .3s;
}

/* OPEN */
details.accordion.accordion--plus.card[open] .accordion__summary {
  color: white;  
  background-color: #227836;
}

/* PICTO */
details.accordion.accordion--plus.card .accordion__summary::before {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0;
  width: 30px;
  height: 30px;
}

/*** ACCORDION : CONTENT ***/
details.accordion.accordion--plus.card .accordion__content {
  padding: 20px 25px;
  background-color: white;
}
details.accordion.accordion--plus.card .accordion__content p {
  margin: 15px 0 0 0;
  color: #292929;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;  
}
details.accordion.accordion--plus.card .accordion__content p:first-child { margin: 0; }



/*** FORM ****************************************************/
main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-4 > .row-fluid > .span6:nth-child(2) {
  padding: 25px 30px;
  background: white;
  box-shadow: -4px 4px 0px #0000001A;
  border: 1px solid #D4E4D7;
  border-radius: 6px;
}

/*** TITRE FORM ***/
h3.form-title {
  margin-bottom: 10px;
  color: #227836;
  font-family: "Fredoka", sans-serif;
  font-size: 28px;
  line-height: 28px;
  font-weight: 700;
  text-align: center;
}

/*** INPUT : TEXT / MAIL / TEXAREA ***/
main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-4 > .row-fluid > .span6:nth-child(2) form input[type="text"],
main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-4 > .row-fluid > .span6:nth-child(2) form input[type="email"],
main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-4 > .row-fluid > .span6:nth-child(2) form textarea {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 0 15px;
  
  color: #292929;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;  
  
  background: #F6F8FA;
  border: 1px solid #CDD6E1;
  border-radius: 10px;
}
main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-4 > .row-fluid > .span6:nth-child(2) form textarea {
  height: 80px;
  padding: 15px;
}


/*** RESET ***/
main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-4 > .row-fluid > .span6:nth-child(2) .input { margin: 0; }


/*** DEUX PREMIERS FIELDSET : MARGE ***/
main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-4 > .row-fluid > .span6:nth-child(2) fieldset:nth-child(1),
main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-4 > .row-fluid > .span6:nth-child(2) fieldset:nth-child(2) {
  display: flex;
  flex-direction: column;
  @media screen and (min-width: 768px) { flex-direction: row; }
  gap: 0 50px;
}

/*** LABEL ***/
main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-4 > .row-fluid > .span6:nth-child(2) .hs-form-field > label {
  color: #292929;
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  line-height: 16px;
  font-weight: 400;
}


/*** RICH TEXT ***/
main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-4 > .row-fluid > .span6:nth-child(2) .hs-richtext,
main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-4 > .row-fluid > .span6:nth-child(2) .hs-richtext p {
  color: #292929;
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  line-height: 16px;
  font-weight: 400;
}

/*** CHECKBOX ***/
main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-4 > .row-fluid > .span6:nth-child(2) .hs-form-booleancheckbox label {
  display: flex;
}
main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-4 > .row-fluid > .span6:nth-child(2) .hs-form-booleancheckbox label > input[type="checkbox"] {
  width: 20px;
  height: 20px;
}
main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-4 > .row-fluid > .span6:nth-child(2) .hs-form-booleancheckbox label > span {
  color: #292929;
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  line-height: 16px;
  font-weight: 400;
}

/*** SUBMIT ***/
main > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 .row-depth-1.row-number-4 > .row-fluid > .span6:nth-child(2) input[type="submit"] {
  display: flex;
  height: 40px;
  margin: 0 auto;
  padding: 0 25px;
  
  background: #A3CE16;
  border-radius: 20px;  
}




/*** FOOTER **************************************************/
.footer {
  padding: 20px;
  background: linear-gradient(to right, #419A59, #0C3109);
}
.footer .hs-menu-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.footer .hs-menu-wrapper ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px 0;
}
.footer .hs-menu-wrapper ul a {
  display: flex;
  flex-direction: row;
  align-items: center;

  color: #ffffff80;
  font-size: 14px;
  line-height: 18px;
}
.footer .hs-menu-wrapper ul a:hover { text-decoration: underline; }

/* SEPARATEUR PUCE */
@media screen and (min-width: 768px) {
  .footer .hs-menu-wrapper ul li:not(:first-child) a::before {
    content: "";
    width: 4px;
    height: 4px;
    margin: 0 15px;
    background-color: #ffffff80;
    border-radius: 50%;
  }
}