@font-face {
    font-family: 'gotham-regular';
    src: url('../fonts/gothamregular.eot');
    src: url('../fonts/gothamregular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/gothamregular.woff2') format('woff2'),
         url('../fonts/gothamregular.woff') format('woff'),
         url('../fonts/gothamregular.ttf') format('truetype'),
         url('../fonts/gothamregular.svg#gothamregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'gotham-book';
    src: url('../fonts/gothambook.eot');
    src: url('../fonts/gothambook.eot?#iefix') format('embedded-opentype'),
         url('../fonts/gothambook.woff2') format('woff2'),
         url('../fonts/gothambook.woff') format('woff'),
         url('../fonts/gothambook.ttf') format('truetype'),
         url('../fonts/gothambook.svg#gothammedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'gotham-medium';
    src: url('../fonts/gothammedium.eot');
    src: url('../fonts/gothammedium.eot?#iefix') format('embedded-opentype'),
         url('../fonts/gothammedium.woff2') format('woff2'),
         url('../fonts/gothammedium.woff') format('woff'),
         url('../fonts/gothammedium.ttf') format('truetype'),
         url('../fonts/gothammedium.svg#gothammedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'gotham-light';
    src: url('../fonts/gothamlight.eot');
    src: url('../fonts/gothamlight.eot?#iefix') format('embedded-opentype'),
         url('../fonts/gothamlight.woff2') format('woff2'),
         url('../fonts/gothamlight.woff') format('woff'),
         url('../fonts/gothamlight.ttf') format('truetype'),
         url('../fonts/gothamlight.svg#gothamlight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'gotham-bold';
    src: url('../fonts/gothambold.eot');
    src: url('../fonts/gothambold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/gothambold.woff2') format('woff2'),
         url('../fonts/gothambold.woff') format('woff'),
         url('../fonts/gothambold.ttf') format('truetype'),
         url('../fonts/gothambold.svg#gothambold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'gotham-black';
    src: url('../fonts/gothamblack.eot');
    src: url('../fonts/gothamblack.eot?#iefix') format('embedded-opentype'),
         url('../fonts/gothamblack.woff2') format('woff2'),
         url('../fonts/gothamblack.woff') format('woff'),
         url('../fonts/gothamblack.ttf') format('truetype'),
         url('../fonts/gothamblack.svg#gotham_narrowblack') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bernadette';
    src: url('../fonts/bernadette.eot');
    src: url('../fonts/bernadette.eot?#iefix') format('embedded-opentype'),
         url('../fonts/bernadette.woff2') format('woff2'),
         url('../fonts/bernadette.woff') format('woff'),
         url('../fonts/bernadette.ttf') format('truetype'),
         url('../fonts/bernadette.svg#bernadette') format('svg');
    font-weight: normal;
    font-style: normal;
}

.is-regular { font-family: 'gotham-regular'; }
.is-book { font-family: 'gotham-book'; }
.is-medium { font-family: 'gotham-medium'; }
.is-light { font-family: 'gotham-light'; }
.is-bold { font-family: 'gotham-bold'; }
.is-black { font-family: 'gotham-black'; }
.is-script { font-family: 'bernadette'; }

.smaller { font-size: 90% !important; }
.bigger { font-size: 110% !important; }
.bigger-plus { font-size: 120% !important; }
.weight-normal { font-weight: normal !important; }

html {
    /* set base font-size to equiv "10px", which is adapted to rem unit */
    font-size: 62.5%;
    font-size: calc(1em * 0.625);
    overflow-y: scroll;
    -webkit-font-smoothing: antialiased;
}

body {
    background: #fff;
    color: #000;
    font-size: 1.2rem;
    /* size: 11px */
    font-family: 'gotham-light', Arial, Helvetica, sans-serif;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    text-align: left;
}
@media screen and (min-width: 769px) {
  line-height: 1.25;
}

* {
  box-sizing: border-box;
}

div {
  display: block;
}

p {
  margin: 0;
  padding: 0;
}
span {
  font-style: inherit;
  font-weight: inherit;
}

a {
    text-decoration: none;
    color: #fff;
}

div#page-wrapper {
  width: 100%;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  padding: 0;
  margin: 0;
}
.inner-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto !important;
}

@media screen and (max-width: 769px) {
  .is-desktop {
    display: none;
  }
}

.columns {
  margin-inline-start: calc(-1 * 0.75rem);
  margin-inline-end: calc(-1 * 0.75rem);
  margin-top: calc(-1 * 0.75rem);
}
@media screen and (min-width: 769px) {
  .columns:not(.is-desktop) {
    display: flex;
  }
}
@media screen and (max-width: 769px) {
  .columns:not(.is-desktop) .column {
    width: 100% !important;
  }
}

.columns .column {
  display: block;
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
  padding: 0.75rem;
}
@media screen and (min-width: 769px) {
  .column.is-6,
  .column.is-6-tablet {
    flex: none;
    flex-grow: 0;
    width: 50%;
  }
}

h1, .h1 {
  font-family: 'gotham-bold';
  margin-top: 0;
  font-size: 2.3rem;
  color: #fbb900;
  font-weight: normal;
}
@media screen and (max-width: 769px) {
  h1, .h1 {
    font-size: 1.8rem;
  }
}

.tel {
  white-space: nowrap;
}

.atc {
  cursor: pointer;
}

.is-portable {
  display: none;
}
@media screen and (max-width: 769px) {
  .is-portable {
    display: block
  }
}

/*--- header ---*/
header {
    background-color: transparent;
    color: inherit;
}
header #top-head {
  background-color: #000;
}
header #top-head-wrapper {
  width: 800px;
  max-width: 100%;
  margin: 0 auto;
}
header #top-head-wrapper .columns {
  align-items: top;
}
header #top-head-wrapper .columns .column:nth-of-type(1),
header #top-head-wrapper .columns .column:nth-of-type(3) {
  flex: 1;
}
header #top-head-wrapper .columns .column:nth-of-type(2) {
  flex: 5;
}
header #top-head-wrapper .columns .column:nth-of-type(1) figure,
header #top-head-wrapper .columns .column:nth-of-type(3) figure {
  margin: 1em 0;
}
header #top-head-wrapper .columns .column:nth-of-type(1) figure {
  text-align: left;
}
header #top-head-wrapper .columns .column:nth-of-type(3) figure {
  text-align: right;
}
header #top-head-wrapper .columns .column:nth-of-type(2) p {
  padding-top: 2.5rem;
  text-align: center;
  font-size: 2.5rem;
  color: #fff;
}
header #top-head-wrapper .columns .column:nth-of-type(2) p span.tel{
  font-size: 120%;
  font-weight: bold;
}

header #content-head .columns {
  align-items: center;
}
header #content-head .columns .column:nth-of-type(1),
header .columns .column:nth-of-type(3) {
  width: 24%;
}
header #content-head .columns .column:nth-of-type(2) {
  width: 52%;
}
header #content-head .columns .column:nth-of-type(1) figure {
  margin: 0;
  padding: 0;
  max-width: 100%;
  text-align: center;
}
header #content-head .columns .column:nth-of-type(1) figure img {
  max-width: 100%;
  width: 50%;
}
header #content-head .columns .column:nth-of-type(2) figure {
  margin: 1em 15px;
}
header #content-head .columns .column:nth-of-type(2) p {
    padding-bottom: 12px;
    padding-top: 0;
    text-align: center;
    font-size: 1.9rem;
}
header #content-head .columns .column:nth-of-type(3) p {
  text-align: center;
}
header #content-head .columns .column:nth-of-type(3) a {
    display: inline-block;
    width: 36px;
    height:36px;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
  }
header #content-head .columns .column:nth-of-type(3) a#lnk-facebook {
  margin-right: 5px;
  background-image: url(../images/logo-FACEBOOK.webp);
}
header #content-head .columns .column:nth-of-type(3) a#lnk-linkedin {
  background-image: url(../images/logo-LINKEDIN.webp);
}

@media screen and (max-width: 769px) {
  header #top-head-wrapper .columns .column:nth-of-type(1),
  header #top-head-wrapper .columns .column:nth-of-type(3) {
    width: 100% !important;
  }
  header #top-head-wrapper .columns .column:nth-of-type(1) {
    margin-bottom: 0;
  }
  header #top-head-wrapper .columns .column:nth-of-type(3) {
    margin-top: 0;
  }
  header #top-head-wrapper .columns .column:nth-of-type(1) figure,
  header #top-head-wrapper .columns .column:nth-of-type(3) figure {
    text-align: center;
  }
  header #top-head-wrapper .columns .column:nth-of-type(2) p {
    font-size: 2rem;
    padding: 0 15px;
  }

  header #content-head .columns .column:nth-of-type(1) figure img {
    max-width: 100%;
    width: 25%;
  }
  header #content-head .columns .column:nth-of-type(2) figure img {
    max-width: 100%;
  }
  header #content-head .columns .column:nth-of-type(2) p {
      font-size: 1.7rem;
  }
}

/*--- page accueil ---*/
#page-banner {
  width: 100%;
  height: 0;
  padding-bottom: 14%;
  overflow: hidden;
}
#page-banner .column {
  margin: 0;
  padding: 0;
  flex: 1;
}
#page-banner .column figure {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
#page-banner .column figure img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
}

#page-content {
  background-color: #000;
  color: #fff;
}
#intro-section,
#assets-section {
  padding: 25px 15px 30px 15px;
  text-align: center;
}
#intro-section h1 {
  margin-bottom: 0;
}
#intro-section p,
#assets-section p {
  font-size: 2rem;
}
@media screen and (max-width: 769px) {
  #intro-section p,
  #assets-section p {
    font-size: 1.7rem;
    hyphens: auto;
  }
}

#features-section,
#picture-section {
  position: relative;
  padding: 0;
  font-size: 1.5rem;
}
#features-section:before,
#picture-section:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 50%;
  bottom: 0;
  background-color: #50d6f7;
  z-index: 1;
}
#features-section:after,
#picture-section:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #ffed7e;
  z-index: 1;
}
#features-section div.inner-container,
#picture-section div.inner-container {
  position: relative;
  z-index: 10;
}
#features-section div.inner-container > .columns .column,
#picture-section div.inner-container .columns .column {
  padding: 20px;
  color: #000;
}
#features-section div.inner-container > .columns > .column .columns figure {
  margin: 1em 0;
  text-align: center;
}
#features-section div.inner-container > .columns > .column .columns h2 {
  margin-bottom: 0;
  font-size: 2.3rem !important;
  font-weight: normal;
}
#features-section p {
  text-align: justify;
  hyphens: auto;
}
#features-section ul {
  padding-left: 0;
  margin: 0;
  list-style-type: none;
}
#features-section ul li {
  margin-left: 10px;
  text-indent: -10px;
  font-weight: normal;
}
#features-section div.inner-container > .columns > .column:nth-of-type(1) {
  background-color: #50d6f7;
}
#features-section div.inner-container > .columns > .column:nth-of-type(2) {
  padding-bottom: 0;
  background-color: #f680c6;
  overflow: hidden;
}
#features-section div.inner-container > .columns > .column:nth-of-type(2) > .columns > .column:nth-of-type(2) h2 {
  margin-top: 0;
}
#features-section div.inner-container > .columns > .column:nth-of-type(2) > .columns > .column:nth-of-type(3) {
  margin-top: 20px;
  margin-left:-20px;
  margin-right: -20px;
  width: calc( 100% + 40px ) !important;
  background-color: #f033a3;
}
#features-section div.inner-container > .columns > .column:nth-of-type(2) > .columns > .column:nth-of-type(3) * {
  text-align: center;
  font-size: 105%;
  font-weight: normal;
}
#features-section div.inner-container > .columns > .column:nth-of-type(2) > .columns > .column:nth-of-type(3) figure {
  margin-top: -30px;
  margin-bottom: 0;
}
#features-section div.inner-container > .columns > .column:nth-of-type(2) > .columns > .column:nth-of-type(3) figure img {
  padding: 20px 10px 0 10px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  background-color: #f033a3;
}
#features-section div.inner-container > .columns > .column:nth-of-type(2) > .columns > .column:nth-of-type(3) h2 {
  margin-top: 0;
  color: #fff;
  letter-spacing: 0.5rem;
}
#features-section div.inner-container > .columns > .column:nth-of-type(2) > .columns > .column:nth-of-type(3) p span:last-child {
  color: #fff;
}
#features-section div.inner-container > .columns > .column:nth-of-type(3) {
  background-color: #ffed7e;
}
#features-section div.inner-container > .columns > .column:nth-of-type(3) p {
  margin-top: 1rem;
}
#features-section div.inner-container > .columns > .column:nth-of-type(3) p span {
  font-weight: normal;
}
#features-section div.inner-container > .columns > .column .columns {
  flex-direction: column;
}
#features-section div.inner-container > .columns > .column .columns > .column:first-child {
  padding-bottom: 0;
}
#features-section div.inner-container > .columns > .column .columns > .column:last-child {
  padding-top: 0;
}

#picture-section div.inner-container > .columns > .column:nth-of-type(1) {
  background-color: #50d6f7;
}
#picture-section div.inner-container > .columns > .column:nth-of-type(2) {
  background-color: #ffed7e;
}
#picture-section div.inner-container > .columns > .column figure {
  margin: 0;
  text-align: center;
}
#picture-section div.inner-container > .columns > .column:nth-of-type(2) figure img {
  margin-right: 5%;
}

#assets-section .columns {
  width: 90%;
  margin: 0 auto;
}
#assets-section .columns > .column:first-child {
  flex: 1;
}
#assets-section .columns > .column:first-child figure {
  margin: 0;
}
#assets-section .columns > .column:first-child figure img {
  max-width: 100%;
}
#assets-section .columns > .column:last-child {
  flex: 6;
}
#assets-section .columns > .column:last-child p {
  margin-right: 0;
}
@media screen and (max-width: 769px) {
  #assets-section .columns {
    width: 100%;
  }
  #assets-section .columns > .column:first-child figure img {
    width: 35%;
  }
}
/*--- footer ---*/
footer {
    position: relative;
    background-color: #000;
    color: #fff;
}

footer #footer-title {
  text-align: center;
  font-size: 3.5rem;
  color: #fbb900;
  padding-top: 1.5rem;
}

footer #footer-content {
  width: 1010px;
  margin: 0 auto;
  max-width: 52.60%;
}
footer #footer-content > .columns .column:first-child #footer-text {
  margin-top: 15px;
  font-size: 2.25rem;
  text-align: justify;
  word-wrap: break-word;
  hyphens: auto;
}
footer #footer-content > .columns .column:first-child #footer-logo {
  margin-top: 30px;
  margin-left: 0;
}
footer #footer-content > .columns .column:first-child #footer-logo img {
  max-width: 100%;
}
footer #footer-content > .columns .column:first-child #footer-adresse {
  font-size: 1.8rem;
}
footer #footer-content > .columns .column:first-child #footer-adresse #tel-mobile {
  font-size: 2.5rem;
  font-weight: normal;
}
@media screen and (max-width: 769px) {
  footer #footer-content {
    max-width: calc( 100% - 20px );
  }
  footer #footer-content > .columns .column:first-child #footer-text {
    font-size: 1.7rem;
  }
  footer #footer-content > .columns .column:first-child #footer-adresse {
    font-size: 1.7rem;
  }
}

.frm-contact-wrapper {
  position: relative;
  padding: 10px 15px;
  margin-bottom: 2%;
  margin-top: 2%;
}
.frm-contact-wrapper input,
.frm-contact-wrapper textarea,
.frm-contact-wrapper select {
  width: 100%;
}
.frm-contact-wrapper input {
  padding-left: 8px;
  padding-right: 8px;
}
.frm-contact-wrapper textarea {
  padding: 8px;
  max-width: 100%;
}
.frm-contact-wrapper .floating-labels .columns {
  margin-bottom: 0 !important;
}
.frm-contact-wrapper .floating-labels .columns .column {
  padding-bottom: 0 !important;
}
.frm-contact-wrapper .floating-labels .control {
  position: relative;
  margin-bottom: 20px;
}
.frm-contact-wrapper .floating-labels .control.has-floating-label .label {
  position: absolute;
  top: 6px;
  left: 12px;
  margin-top: 0;
  font-size: 1.4rem;
  cursor: text;
  color: #000;
  -webkit-transition: top 0.2s, left 0.2s, font-size 0.2s;
  -moz-transition: top 0.2s, left 0.2s, font-size 0.2s;
  transition: top 0.2s, left 0.2s, font-size 0.2s;
  z-index: 10;
}
.frm-contact-wrapper .floating-labels .control.has-floating-label .label.float {
  font-size: 1rem;
  top: -6px !important;
  left: 10px !important;
  color: #000;
  background-color: #fff;
  padding: 0 5px;
}
.frm-contact-wrapper .floating-labels .control input,
.frm-contact-wrapper .floating-labels .control select {
  height: 34px;
}
.frm-contact-wrapper .floating-labels .control .validationMessage {
  display: block;
  color: #f00;
  font-size: 1.7rem;
  animation: clignotant 1.5s linear infinite;
  font-family: 'gotham-regular';
}
@keyframes clignotant {
  0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.5; }
}
.frm-contact-wrapper .floating-labels .field-plus {
  height: 0;
  overflow: hidden;
}
.frm-contact-wrapper .floating-labels #control-legal {
  margin-bottom: 0;
}
.frm-contact-wrapper .floating-labels #control-legal > div:first-child {
  width: 100%;
}
.frm-contact-wrapper .floating-labels #control-legal > div:first-child div {
  width: 1px;
  height: 100px;
}
.frm-contact-wrapper .floating-labels #control-legal > div:first-child input[type="checkbox"] {
  position: absolute;
  top: 0;
  width: 18px !important;
  height: 18px;
}
.frm-contact-wrapper .floating-labels #control-legal > div:last-child {
  position: absolute;
  top: 0;
  left: 30px;
  font-size: 1.4rem;
}
.frm-contact-wrapper .floating-labels .required-fields {
  font-size: 1.5rem;
}
.frm-contact-wrapper input[type="submit"] {
  float: right;
  color: #fff;
  background-color: #c89c6b;
  width: auto;
  text-align: center;
  border: none;
  padding: 6px 12px;
  font-size: 2rem;
  cursor: pointer;
  font-family: "gotham-medium", "Arial", "Helvitica", "sans-serif";
}
.js-snackbar-container { width: 95% !important; }
.js-snackbar { background-color: #ddd; color: #000 !important; }
@media screen and (max-width: 769px) {
  .frm-contact-wrapper .floating-labels #control-legal > div:first-child div {
    height: 150px;
  }
  .frm-contact-wrapper .floating-labels #btn-actions {
    display: flex;
    flex-direction: row;
  }
  .frm-contact-wrapper .floating-labels #btn-actions .column:first-child {
    flex: 2;
  }
  .frm-contact-wrapper .floating-labels #btn-actions .column:last-child {
    flex: 1;
  }
}

footer > .columns > .column:nth-of-type(1) {
  flex-grow: 1 !important;
}

#footer-menu {
  text-align: center;
  font-size: 1.5rem;
  padding-bottom: 20px;
}
@media screen and (max-width: 769px) {
  #footer-menu {
    pargin-bottom: 20px;
  }
}