html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--main_font);
}

h1 {
  /* position: relative;
  left: -100vw; */
  font-size: clamp(1.5em, 4vw, 4em);
  font-weight: 600;
  line-height: 90px;
  margin: 30px 0;
  /* animation: moveH1FromLeft 1s linear 1s forwards; */
}

h2 {
  font-size: 1.5em;
  font-weight: 700;
  padding: 16px 0;
}

h3 {
  font-size: 1.8em;
  font-weight: 600;
  color: var(--importantColor);
  margin-bottom: 70px;
  line-height: 1.5em;
}

p {
  font-size: clamp(0.9rem, 1.7vw, 1.5rem);
  margin: 10px 0;
  font-weight: 500;
  line-height: 1.6em;
}

img {
  width: 100%;
}

input,
textarea {
  margin-bottom: 10px;
  box-shadow: inset -1px -1px 2px var(--importantColor);
  color: var(--color2);
  font-family: var(--main_font);
  transition: all 0.3s ease-in;
}

input:focus,
textarea:focus {
  box-shadow: inset -1px -1px 2px var(--importantColor2);
}

input {
  line-height: 50px;
}

button {
  width: 250px;
  height: 70px;
  margin: 20px 0;
  padding: 14px 40px;
  font-size: 1em;
  font-weight: 600;
  background: var(--gradient3);
  background-size: 400%;
  background-position: left;
  color: var(--color2);
  transition: all 0.3s ease-in-out;
}

button:hover {
  scale: 1.02;
  /* background: var(--gradient2); */
  background-position: right;
  border-color: var(--importantColor);
  /* animation: btnColorChange 0.5s ease-in-out forwards; */
}

.link_span {
  position: relative;
  background-color: var(--transparentColor);
  padding: 10px 0;
  font-weight: 600;
  z-index: 0;
}

.spanDiv {
  display: flex;
  margin-top: 60px;
  margin-bottom: 60px;
}

.pinkCircle {
  position: absolute;
  width: 140px;
  top: -48px;
  right: -75px;
}

.revenuein_tag {
  background-color: #000000c9;
  width: 140px;
  height: 140px;
  border: 5px solid var(--importantColor);
  border-radius: 50%;
  margin-bottom: 20px;

  color: var(--importantColor2);
  font-weight: 600;

  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.revenuein_tag :last-child {
  color: var(--color2);
  font-weight: 300;
  font-size: 0.7em;
}

/*$ ******************* HEADER ***************** */

header {
  background-color: var(--color2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  padding: 5px;
  z-index: 50;
  box-shadow: 0px 2px 20px #898989;
  overflow-x: clip;
}

.logo {
  width: 90px;
}

header nav {
  max-width: 700px;
  width: 70%;
  padding: 0 20px;
}

header > nav > ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  height: 50px;

  color: var(--fontColor1);
  font-size: 1.4em;
  font-weight: 600;
}

header li {
  padding: 0 10px;
  position: relative;
  /* color: var(--importantColor2); */
}

header li:before {
  /* opacity: 0; */
  content: '';
  width: 0%;
  height: 5px;
  position: absolute;
  bottom: -6.8px;
  left: 50%;
  background-color: var(--importantColor);
}

header li:hover::before {
  animation: menuBefore 0.3s ease-in forwards;
}

.logo {
  text-transform: uppercase;
  font-weight: 700;
  margin: 0;
  color: var(--fontColor1);
}
.logo > b {
  color: var(--importantColor2);
}

/*$ *******************SECTIONS GLOBALES***************** */

.section_main {
  display: flex;
  max-width: 1400px;
  margin: auto;
}

.leftSide,
.rightSide {
  width: 50%;
  padding: 30px;
}

.section_padding {
  padding: 90px 0;
}

/*$ ***************************** SECTION 1 ************************** -*/

.main_section-container1 {
  height: calc(100vh - 90px);
  background: url(../assets/img/bg/homePageBg.jpg) center/cover;
  background-attachment: fixed;
  overflow: hidden;
}
/* *** AUTRE VERSION *** */
/*  background-size: auto 1359px;
  background-attachment: fixed;
  background-position: center;
  *background-clip: border-box; 
  background-repeat: no-repeat; */

/*+b *** le background de la section 1 reste apparent en haut des autres pages */
/*! désactivé car rend la version mobile sacadée
/*   position: sticky;
  top: calc(-100vh + 200px);
  box-shadow: 0px 2px 20px 0px black;

  z-index: 2; */

.section1_topSide {
  height: 74%;
  width: 90%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px;

  h1 {
    color: var(--color2);
    background-color: #0c1615d6;
    border-radius: 0 1.5em 0 0;
    padding: 20px;
  }

  h2 {
    background-color: var(--whiteBg);
    padding: 20px;
    opacity: 0;
    animation: h2Opacity 1s ease-in-out 500ms forwards;
  }
}

.section1_bottomSide {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 30px;
}

/*$ ***************************** SECTION 2 ************************** -*/

.main_section-container2 {
  background-color: var(--color2);
}

.section2_leftSide {
  display: flex;
  width: 40%;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}

.imgcontainer {
  height: 100%;
  min-height: 400px;
  width: 100%;
  background: url(../assets/img/owner2-removebg-preview.png) top/contain;
  background-repeat: no-repeat;
}

.section2_rightSide {
  /* padding: 20px 100px 30px 40px; */
  display: flex;
  width: 60%;
  flex-direction: column;
  justify-content: center;
}
.section2_rightSide > div {
  justify-content: right;
  padding-right: 60px;
}

.section2_footer {
  display: flex;
  justify-content: flex-end;
  padding-right: 80px;
}

.strong_colored {
  color: var(--importantColor);
  font-weight: 700;
}

.text_colored {
  color: var(--importantColor);
  font-weight: 700;
}

/*$ ***************************** SECTION 3 ************************** -*/
.main_section-container3 {
  height: 400px;
  background: var(--gradient1);
}

/*$ ***************************** section 4 ************************** -*/

.main_section-container4 {
  h3 {
    color: var(--shadowColor);
    position: relative;
    text-align: center;
    margin: auto;
    /* text-transform: lowercase; */
    margin-bottom: 30px;
  }
}
.line {
  width: 80%;
  height: 5px;
  background-color: var(--importantColor);
  margin: auto;
}

/* .main_section-container4 h3::before {
  content: '';
  width: 500px;
  height: 5px;
  position: absolute;
  bottom: 0.2px;
  left: 0;
  background-color: var(--importantColor);
} */

.section4_header {
  display: flex;
  max-width: 1200px;
  margin: auto;
  padding: 30px;
  gap: 30px;
  justify-content: space-between;
  align-items: center;
}

.section4_header figure {
  min-width: 160px;
  height: 160px;
  /* border-radius: 20px; */
  background: url(../assets/img/bureauFusée.jpg) center/cover;
}

.section4_leftSide {
  /* padding: 40px; */
  display: flex;
  flex-direction: column;
  justify-content: center;

  & button {
    border-color: var(--shadowColor);
    color: var(--shadowColor);
    width: 230px;
    height: 70px;
  }
}

.before_round {
  background-color: var(--importantColor);
  padding: 10px;
  position: relative;
  color: var(--color2);
}

.before_round::before {
  content: '';
  width: 60px;
  height: 60px;
  background-color: var(--color2);
  position: absolute;
  bottom: -20px;
  right: -20px;
  border-radius: 50%;
}

.section4_rightSide {
  display: flex;
  flex-direction: column;
  justify-content: center;

  button {
    align-self: end;
  }
}

.imgcontainer4 {
  clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%);

  height: 100%;
  min-height: 400px;
  background: url(../assets/img/bureau2.jpg) center/cover;
}

/*$ ***************************** section 5 ************************** -*/

.main_section-container5 {
  background-color: var(--importantColor2_Dark);
  color: var(--color2);
}

.section5_main {
  display: flex;
  flex-direction: column;
  max-width: 1400px;
  padding: 30px;

  h3 {
    text-transform: lowercase;
  }
}

.section5_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 50px;
  justify-items: center;
}

.card5 {
  width: 300px;
}

.card5 p {
  font-size: 1em;
}

.card5 img {
  filter: invert(1);
  -webkit-filter: invert(1);
  width: 75px;
  margin: 10px;
}

.card5 h2 {
  color: var(--importantColor2);
}

/*$ ***************************** section 6 ************************** -*/

.main_section-container6 {
  background: url(/assets/img/bureau2.jpg) top/cover;
  background-attachment: fixed;
  overflow: hidden;
}

.section6_rightSide {
  width: 80%;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #ffffffc9;

  h4 {
    font-weight: 700;
  }
}

/*$ ***************************** section 7 ************************** -*/

.main_section-container7 {
  background-color: var(--blackBg);
}

.section7_main {
  padding: 40px 0;
  flex-direction: column;
  color: var(--color2);
}

.section7_topSide {
  margin-bottom: 80px;
  padding: 30px;
  text-align: center;

  h3 {
    color: unset;
    margin-bottom: 60px;
  }
}

.section7_bottomSide {
  padding: 30px;
  display: flex;
  justify-content: space-evenly;
}

.card7 {
  width: 330px;
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ffffff05;
  transition: all 0.2s ease-in;
  overflow: hidden;
}

.card7:hover {
  /* transform: translate(5px, -5px) scale(1.005); */
  /* animation: flipCards 2s backwards; */

  .top-card7 img {
    filter: invert(0) drop-shadow(2px 2px 1px var(--importantColor));
  }
}

.top-card7 img {
  margin: 20px;
  width: 110px;
  filter: invert(0) drop-shadow(2px 2px 1px var(--importantColor2));
}

.bottom-card7 {
  display: flex;
  width: 100%;
  min-height: 320px;
  flex-direction: column;
  padding: 20px;
  box-shadow: inset 0px 0px 200px #000000b3;

  h2 {
    font-size: 3em;
    color: var(--color2);
  }

  p {
    font-size: 1.4rem;
    /* font-weight: 800; */
    color: var(--color2);
    margin: auto;
  }
}

.custom-shape-divider-top-1717047768 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}
/* .card7:hover {
  -webkit-animation: flip-vertical-right 0.4s
    cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
  animation: flip-vertical-right 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955)
    both;
} */

.bottom-card7-1 {
  background-color: var(--card1Color);
}
.bottom-card7-2 {
  background-color: var(--card2Color);
}
.bottom-card7-3 {
  background-color: var(--card3Color);
}

/*$ ***************************** section 8 ************************** -*/

.section8_main {
  flex-direction: column;
  padding: 30px;
}

.inner {
  display: flex;
  align-items: center;

  button {
    width: 70px;
    border-radius: 50%;
    margin: 0;
    padding: 0;
  }
}

.reviews {
  position: relative;
  text-align: center;
  width: 75%;
  margin: 40px auto;
  display: none;

  & h4 {
    margin: 40px 0 20px 0;
    font-size: 1.2rem;
    font-weight: 700;
  }
  & em {
    font-style: italic;
    font-weight: 600;

    & span {
      color: var(--color5);
    }
  }
}

.active {
  display: block;
}

.reviews::after {
  position: absolute;
  content: '';
  width: 80%;
  height: 2px;
  background-color: var(--importantColor);
  left: 10%;
  bottom: -40px;
}

.reviews:last-child::after {
  display: none;
}

.nav-items_container {
  display: flex;
  justify-content: center;
}
.nav-item {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #939393;
  margin: 10px;
}

.nav-item_active {
  scale: 1.5;
  background-color: var(--importantColor);
}

/*$ ***************************** section 9 ************************** -*/

.main_section-container9 {
  padding-bottom: 0;
  /* height: 100vh; */

  justify-content: space-between;
  flex-direction: column;
  background: url(../assets/img/lignes.svg) center/cover;
  background-color: var(--blackBg);
  color: var(--color2);
}

.section9_main {
  flex-direction: column;
  padding: 30px;
}

.main9 {
  height: 80%;
  display: grid;
  gap: 50px;
  grid-template-areas:
    'd d c'
    'a b c';
  grid-template-columns: 1fr 1fr 2fr;
  align-items: center;
  justify-items: center;
  z-index: 1;
  padding-bottom: 30px;
  /* .main8 {
  height: 80%;
  display: grid;
  grid-template-areas: 'a b c';
  align-items: center;
  justify-items: center;
  z-index: 1;
  padding-bottom: 30px; */

  h4 {
    background-color: #ffffff87;
    padding: 10px;
    margin-bottom: 30px;
    font-size: 1.2rem;
    font-weight: 700;
  }

  ul {
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    font-weight: 500;

    li {
      margin: 10px 0;
    }
  }
}

.quickLinks,
.support {
  width: 100%;
  padding: 20px;
  margin-top: 20px;
}

.quickLinks {
  grid-area: a;
}

.support {
  grid-area: b;
}

.contactBg {
  grid-area: c;
  max-width: 650px;
  background: var(--gradient3);
  display: flex;
  width: 100%;
  position: relative;
  /* rotate: 0deg; */
  height: 100%;
  justify-content: center;
  flex-direction: row;
  overflow: hidden;
  align-items: center;
}

.contactBg:hover {
  background: none;
}

.contactBg:hover::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  z-index: -1;
  background: var(--gradient3);
  animation: contactBg_rotate 2s ease-in-out infinite;
}

.contact {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #000000;
  width: 99.5%;
  height: 99.5%;
  /* border: 10px inset #7b7b7b; */
  padding: 20px;
  align-self: auto;

  & h2 {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: var(--gradient3);
    padding-bottom: 30px;
  }

  & form {
    color: var(--color2);
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: auto;

    & button {
      color: var(--color2);
    }
  }
}

.main_footer {
  display: flex;
  justify-content: space-around;
}

.footInfos > p {
  font-size: 0.9rem;
}
.footInfos {
  bottom: 0;
  position: relative;
}

/* ******************************PROFIL LINKEDIN******************** */

.LI-profile-badge {
  align-self: baseline;
  grid-area: d;
  width: 100%;
}

iframe {
  width: 100%;
}
/* .profile-badge {
  border-radius: 0 !important;
  width: 530px;
} */
/*.profile-badge--dark {
  background-color: #ffffff75 !important;
  color: #000 !important;
  margin: 0 20px !important;
}

.profile-badge--width-330 {
  width: auto !important;
}
.profile-badge__header--dark {
  background-color: #373737 !important;
}
.artdeco-entity-image--ghost {
  content: url(https://media.licdn.com/dms/image/D4D03AQHDIKEl5-pooA/profile-displayphoto-shrink_200_200/0/1704382873186?e=1717632000&v=beta&t=V2Gtgtwbhymun5sBFPPWMLRY7V8_z7gvE_cg6sh0c1E) !important;
} */

/* ******************************MODALS******************** */

.modal {
  display: none;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #000000db;
}

.modalOn {
  display: block;
}

.modalContainer {
  display: flex;
  flex-direction: column;
  width: 400px;
  height: 300px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffffd1;
}

.modalContent {
  height: 255px;
  text-align: center;
  align-content: center;
  padding: 20px;

  p {
    font-size: 1.3em;
  }
}

.modalContainer > button {
  align-self: flex-end;
  width: 30px;
  margin: 0;
  margin-right: 20px;
  padding: 0;
  background-color: var(--transparentColor);
}

path {
  fill: red;
}