* {
  box-sizing: border-box;
  font-family: "Red Hat Display", sans-serif;
  color: white;
}

html, body {
  margin: 0;
  padding: 0;
  background-color: black;
  overflow-x: hidden;
}

.width95vw {
  max-width: 95vw;
  width: 100%;
  margin: auto;
}

.max1400px {
  max-width: 1400px;
  width: 100%;
  margin: auto;
}

.flexBetween {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

h2 {
  font-size: 3rem;
}
@media screen and (max-width: 1300px) {
  h2 {
    font-size: 2.5rem;
  }
}
@media screen and (max-width: 1000px) {
  h2 {
    text-align: center;
  }
}
@media screen and (max-width: 768px) {
  h2 {
    font-size: 2rem;
  }
}
@media screen and (max-width: 500px) {
  h2 {
    font-size: 1.8rem;
  }
}

a {
  text-decoration: none;
}

p {
  text-align: justify !important;
}

form input[type=email], form input[type=text], form input[type=tel], form textarea {
  padding: 0.5rem 0.75rem;
  border: 1px solid white;
  border-radius: 5px;
  background-color: transparent;
  color: white;
  font-size: 1rem;
  width: 100%;
  margin-bottom: 1.5rem;
}
form .flexForm {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
form .flexForm input {
  width: calc(50% - 0.75rem);
}
@media screen and (max-width: 768px) {
  form .flexForm {
    flex-wrap: wrap;
  }
  form .flexForm input {
    width: 100%;
  }
}
form input[type=submit] {
  background-color: #007bb6;
  font-size: 1rem;
  border: 1px solid #007bb6;
  border-radius: 5px;
  padding: 0.5rem 1rem;
  color: white;
  text-transform: uppercase;
  font-weight: bold;
  transition: 0.1s linear;
  letter-spacing: 1px;
  cursor: pointer;
}
form input[type=submit]:hover {
  background: transparent;
  color: #007bb6;
  border: 1px solid #007bb6;
}
form textarea {
  min-height: 150px;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1rem 0;
  z-index: 1000;
  transition: 0.5s;
}
header .logo {
  display: flex;
  align-items: center;
}
header .logo img {
  width: 250px;
}
header .menu a {
  margin: 0 1rem;
}
header .menu a:last-of-type {
  margin-right: 0;
}
@media screen and (max-width: 1000px) {
  header .max1400px {
    display: flex;
    justify-content: center;
  }
  header .menu {
    display: none;
  }
}

#firstSection {
  width: 100%;
  height: 120vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  background-image: url("../images/bcg_gradient.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 900px;
}
#firstSection .circuit {
  position: absolute;
  width: 120%;
  left: -10%;
  top: -15%;
}
#firstSection .circuit g {
  mix-blend-mode: overlay;
  opacity: 0.5;
}
@media screen and (max-width: 1600px) {
  #firstSection .circuit {
    width: 150%;
  }
}
@media screen and (max-width: 1300px) {
  #firstSection .circuit {
    width: 170%;
  }
}
@media screen and (max-width: 1000px) {
  #firstSection .circuit {
    width: 200%;
    left: -60%;
    top: -10%;
  }
}
@media screen and (max-width: 768px) {
  #firstSection .circuit {
    width: 250%;
    left: -10%;
    top: 0;
  }
}
#firstSection .max1400px {
  position: relative;
  margin-top: -20vh;
}
#firstSection .max1400px h1 {
  font-size: 3rem;
}
#firstSection .max1400px p {
  font-size: 1.5rem;
}
@media screen and (max-width: 1000px) {
  #firstSection {
    height: initial;
  }
  #firstSection .max1400px h1 {
    font-size: 2rem;
    text-align: center;
  }
  #firstSection .max1400px p {
    font-size: 1.2rem;
    text-align: center !important;
  }
}
@media screen and (max-width: 768px) {
  #firstSection {
    min-height: initial;
    padding: 4rem 0;
  }
  #firstSection .max1400px {
    margin-top: 0;
  }
  #firstSection .max1400px p {
    font-size: 1rem;
  }
}

#conseil {
  position: relative;
  height: 100vh;
  padding: 2rem 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
#conseil .width95vw {
  z-index: 2;
}
#conseil .gradientTransition {
  height: 20vh;
  width: 100%;
  background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
  position: absolute;
  top: -20vh;
  left: 0;
}
#conseil h2 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 4rem;
}
#conseil > img {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  #conseil {
    height: initial;
    padding: 4rem 0;
  }
  #conseil h2 {
    margin-bottom: 2rem;
  }
  #conseil .gradientTransition {
    height: 10vh;
    top: -10vh;
  }
}

.divOnglet {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.divOnglet .navOnglet {
  width: calc(29% - 1rem);
}
.divOnglet .navOnglet button {
  width: 100%;
  margin-bottom: 2rem;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  border: none;
  cursor: pointer;
}
.divOnglet .navOnglet button h3 {
  margin: 0;
  font-size: 1.5rem;
  text-align: left;
}
.divOnglet .navOnglet button img {
  width: 13px;
  margin-left: 1rem;
  margin-right: 5px;
  position: relative;
  left: 0;
  transition: left 0.2s linear;
}
.divOnglet .navOnglet button:last-of-type {
  margin-bottom: 0;
}
.divOnglet .navOnglet button:hover img {
  left: 10px;
}
.divOnglet .navOnglet .activeBtn {
  border-radius: 5px;
  padding: 1rem;
  background-color: #1a1a1a;
}
@media screen and (max-width: 1200px) {
  .divOnglet .navOnglet {
    width: calc(35% - 1rem);
  }
  .divOnglet .navOnglet button h3 {
    font-size: 1.2rem;
  }
}
.divOnglet .onglets {
  width: calc(70% - 1rem);
  position: relative;
  display: flex;
  align-items: center;
}
.divOnglet .onglets .onglet {
  display: none;
  padding: 1.5rem;
}
.divOnglet .onglets .onglet p {
  width: 100%;
  font-size: 1.2rem;
}
.divOnglet .onglets .onglet p:first-of-type {
  margin-top: 0;
}
.divOnglet .onglets .onglet p:last-of-type {
  margin-bottom: 0;
}
.divOnglet .onglets .onglet ul {
  padding: 0;
  margin-bottom: 0;
}
.divOnglet .onglets .onglet ul li {
  font-size: 1.2rem;
  margin-left: 1.2rem;
  margin-bottom: 1rem;
}
.divOnglet .onglets .onglet ul li:last-of-type {
  margin-bottom: 0;
}
.divOnglet .onglets .onglet::before {
  content: url("../images/shape.svg");
  width: 80px;
  display: block;
  position: absolute;
  left: 0;
  bottom: -10px;
  opacity: 0.3;
  z-index: 0;
}
.divOnglet .onglets .onglet::after {
  content: url("../images/shape.svg");
  width: 80px;
  display: block;
  position: absolute;
  right: 0;
  top: -5px;
  opacity: 0.3;
  z-index: 0;
  transform: rotate(180deg);
}
.divOnglet .onglets .ongletActive {
  display: block;
}
@media screen and (max-width: 768px) {
  .divOnglet {
    display: none;
  }
}

.accordeons {
  display: none;
}
.accordeons .accordeon {
  padding: 2rem;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom: 1px solid white;
}
.accordeons .accordeon .top {
  display: flex;
  align-items: center;
}
.accordeons .accordeon .top h3 {
  margin: 0;
  margin-right: 1rem;
}
.accordeons .accordeon .top img {
  transform: rotate(90deg);
  transition: 0.2s ease-in-out;
}
.accordeons .accordeon .bottom {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
}
.accordeons .accordeon .bottom p:first-of-type {
  margin-top: 0;
}
.accordeons .accordeon .bottom p:last-of-type {
  margin-bottom: 0;
}
.accordeons .accordeon .bottom ul {
  padding: 0;
  margin-bottom: 0;
}
.accordeons .accordeon .bottom ul li {
  margin-left: 1.2rem;
  margin-bottom: 1rem;
}
.accordeons .accordeon .bottom ul li:last-of-type {
  margin-bottom: 0;
}
.accordeons .activeAccordeon {
  background-color: #1a1a1a;
}
.accordeons .activeAccordeon .top img {
  transform: rotate(-90deg);
}
.accordeons .activeAccordeon .bottom {
  max-height: 500px;
  margin-top: 1rem;
}
@media screen and (max-width: 768px) {
  .accordeons {
    display: block;
  }
}

#saas {
  padding-bottom: 3rem;
  position: relative;
  z-index: 2;
}
#saas h2 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 4rem;
}
@media screen and (max-width: 768px) {
  #saas h2 {
    margin-bottom: 2rem;
  }
}
#saas .divSaas {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
#saas .divSaas .top, #saas .divSaas p {
  width: 60%;
}
@media screen and (max-width: 1200px) {
  #saas .divSaas .top, #saas .divSaas p {
    width: 75%;
  }
}
@media screen and (max-width: 768px) {
  #saas .divSaas .top, #saas .divSaas p {
    width: 100%;
  }
}
#saas .divSaas .top {
  position: relative;
}
#saas .divSaas .top h3 {
  font-size: 1.7em;
  margin-bottom: 1rem;
  z-index: 2;
  position: relative;
}
#saas .divSaas .top img {
  height: 180px;
  position: absolute;
  opacity: 0.4;
  top: 150px;
  left: -45px;
  z-index: 1;
}
@media screen and (max-width: 1550px) {
  #saas .divSaas .top img {
    left: 25px;
  }
}
@media screen and (max-width: 768px) {
  #saas .divSaas .top h3 {
    text-align: center !important;
    margin-top: 0;
    font-size: 1.5rem;
  }
  #saas .divSaas .top img {
    display: none;
  }
}
#saas .divSaas p {
  font-size: 1.2rem;
  margin-bottom: 0;
  position: relative;
  z-index: 2;
}
#saas .divSaas p:first-of-type {
  margin-top: 0;
}
@media screen and (max-width: 768px) {
  #saas .divSaas p {
    text-align: center !important;
  }
}
#saas .divSaas form {
  width: 100%;
  margin-top: 2rem;
}
#saas .divSaas form input[type=email] {
  margin-right: 1rem;
  width: 300px;
}
#saas .divSaas:nth-of-type(2n) {
  justify-content: flex-end;
}
#saas .divSaas:nth-of-type(2n) h3 {
  text-align: right;
}
#saas .divSaas:nth-of-type(2n) .top img {
  left: initial;
  right: -45px;
}
@media screen and (max-width: 1550px) {
  #saas .divSaas:nth-of-type(2n) .top img {
    right: 25px;
  }
}
#saas .divSaasCenter {
  margin-top: 4rem;
}
#saas .divSaasCenter .top, #saas .divSaasCenter p {
  width: 100%;
  text-align: center !important;
}
#saas .divSaasCenter form {
  display: flex;
  justify-content: center;
}
#saas .divSaasCenter form input {
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  #saas .divSaasCenter {
    margin-top: 0;
    margin-bottom: 0;
  }
}
@media screen and (max-width: 500px) {
  #saas .divSaasCenter form {
    flex-wrap: wrap;
  }
  #saas .divSaasCenter form input[type=email] {
    width: 100%;
    margin-right: 0;
    margin-bottom: 1rem;
  }
}

#pourquoi {
  position: relative;
  height: 100vh;
  padding: 2rem 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  z-index: 1;
}
#pourquoi .width95vw {
  z-index: 1;
}
#pourquoi h2 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 4rem;
}
#pourquoi > img {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 900px;
  z-index: 1;
  opacity: 0.7;
}
@media screen and (max-width: 768px) {
  #pourquoi {
    height: initial;
  }
  #pourquoi h2 {
    margin-bottom: 2rem;
  }
}

#confiance h2 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 4rem;
}
#confiance .partenaires {
  display: flex;
  align-items: center;
  justify-content: center;
}
#confiance .partenaires a {
  margin: 0 2rem;
}
#confiance .partenaires a:first-of-type {
  margin-left: 0;
}
#confiance .partenaires a:last-of-type {
  margin-right: 0;
}
#confiance .partenaires img {
  height: 50px;
}
@media screen and (max-width: 768px) {
  #confiance {
    padding: 2rem;
  }
  #confiance h2 {
    margin-bottom: 2rem;
  }
  #confiance .partenaires a {
    text-align: center;
  }
  #confiance .partenaires a img {
    height: initial;
    width: 70%;
  }
}

#contact {
  position: relative;
  height: 100vh;
  padding: 2rem 0;
  display: flex;
  align-items: center;
}
#contact .flexBetween > div, #contact .flexBetween form {
  width: calc(50% - 2rem);
}
#contact h2 {
  margin-top: 0;
  margin-bottom: 2rem;
}
#contact form {
  padding: 2rem;
  background-color: #1a1a1a;
  border-radius: 5px;
}
@media screen and (max-width: 1000px) {
  #contact {
    height: initial;
  }
  #contact .flexBetween {
    flex-wrap: wrap;
  }
  #contact .flexBetween > div, #contact .flexBetween form {
    width: 100%;
  }
  #contact .flexBetween > div p, #contact .flexBetween form p {
    text-align: center !important;
  }
}

footer {
  margin-top: 2rem;
}
footer .flexBetween {
  margin-bottom: 2rem;
}
footer .flexBetween > div {
  width: calc(33% - 1rem);
  display: flex;
  justify-content: center;
}
footer .flexBetween > div nav a {
  display: block;
  margin-bottom: 1rem;
}
footer .flexBetween > div nav a:last-of-type {
  margin-bottom: 0;
}
footer .flexBetween div:first-of-type img {
  width: 100%;
}
footer .subFooter {
  background-color: #1a1a1a;
  display: flex;
  justify-content: center;
  padding: 0.5rem;
}
footer .subFooter p {
  margin: 0;
}
@media screen and (max-width: 900px) {
  footer .flexBetween {
    flex-wrap: wrap;
    justify-content: space-around;
  }
  footer .flexBetween > div:first-of-type {
    width: 100%;
    margin-bottom: 4rem;
  }
}
@media screen and (max-width: 600px) {
  footer .flexBetween {
    justify-content: center;
  }
  footer .flexBetween > div {
    width: 100%;
    margin-bottom: 2rem !important;
  }
  footer .flexBetween > div a {
    text-align: center;
  }
}/*# sourceMappingURL=style.css.map */