@charset "UTF-8";
* {
  margin: 0;
  -webkit-margin-start: 0;
          margin-inline-start: 0;
  -webkit-margin-end: 0;
          margin-inline-end: 0;
  -webkit-margin-before: 0;
          margin-block-start: 0;
  -webkit-margin-after: 0;
          margin-block-end: 0;
  padding: 0;
  -webkit-padding-start: 0;
          padding-inline-start: 0;
  -webkit-padding-end: 0;
          padding-inline-end: 0;
  -webkit-padding-before: 0;
          padding-block-start: 0;
  -webkit-padding-after: 0;
          padding-block-end: 0;
}

ul {
  list-style: none;
}

button {
  cursor: pointer;
}

*, button {
  cursor: none;
}

html, body {
  scroll-behavior: smooth;
}

body {
  font-family: "Host Grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  background-color: #000519;
  color: #FFFBF5;
}

#Projets, #Apropos, #Contact {
  scroll-margin-top: 60px;
}

.p {
  line-height: 130%;
}

.customCursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #FB6B37;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

.header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 99;
  background-color: #000519;
  height: 60px;
}
.header .menu {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  z-index: 99;
  padding: 0 clamp(1rem, 0.272rem + 3.107vw, 4rem);
}
.header .menu__list {
  opacity: 0;
  width: 100dvw;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #000519;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  transform: translateX(100dvw);
  transition: transform 0.3s ease-out;
}
.header .menu__el {
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid #FB6B37;
  position: relative;
  margin-bottom: clamp(1rem, 0.272rem + 3.107vw, 4rem);
}
.header .menu__el:hover {
  background-color: #FB6B37;
  color: #000519;
}
.header .menu__el:hover > .menu__el--link {
  color: #000519;
}
.header .menu__el:hover::after {
  content: url("../assets/images/arrow--menu.svg");
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  position: absolute;
  top: clamp(1.25rem, 1.011rem + 1.018vw, 1.5rem);
  right: 16px;
  color: #000519;
}
.header .menu__el--link {
  text-decoration: none;
  color: #FFFBF5;
  font-size: clamp(1.75rem, 1.401rem + 1.489vw, 3.188rem);
  font-weight: 300;
  width: 75dvw;
  display: block;
}
.header .menu__btn {
  width: 40px;
  height: 50px;
  font-size: 42px;
  position: relative;
  background-color: transparent;
  border: none;
}
.header .menu__btn::before {
  content: "☰";
  width: 100%;
  height: 100%;
  display: block;
  color: #FFFBF5;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 99;
}
.header .menu.menu--open .menu__btn::before {
  font-size: 42px;
  content: "✕";
}
.header .menu.menu--open .menu__list {
  opacity: 1;
  transform: translateX(0dvw);
  transition: all 0.3s ease-out;
}

.landing {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.landing__h1 {
  font-size: clamp(4.188rem, 1.027rem + 13.486vw, 7.5rem);
  text-align: center;
  line-height: 100%;
}
.landing__h1 .div__img {
  display: none;
}
.landing__p--strong {
  color: #FB6B37;
  font-weight: 500;
}
.landing__p--scroll {
  position: absolute;
  bottom: 0;
  right: 23vw;
  z-index: -1;
  opacity: 0.5;
}
.landing__div--title {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.landing__div--content {
  width: 100%;
  display: flex;
  margin-top: clamp(1.5rem, 1.023rem + 2.036vw, 2rem);
}
.landing__div--column1 {
  width: clamp(10.688rem, 4.366rem + 26.972vw, 17.313rem);
  height: 70.315vh;
  border-radius: 64px 0 0 0;
  margin: 0 clamp(1rem, 0.272rem + 3.107vw, 4rem);
  background-image: url("../assets/images/landing--photo.jpg");
  background-size: cover;
  background-position: 50% 50%;
}
.landing__div--column2 {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: relative;
}
.landing__div--sun {
  width: clamp(9.375rem, 3.411rem + 25.445vw, 15.625rem);
}
.landing__div--sun .div__img {
  width: 100%;
}
.landing__div--desktopRow {
  display: none;
  padding: 0 64px;
  width: 100%;
  min-height: 50dvh;
  max-height: 55vh;
  border-radius: 64px 64px 0 0;
  background-image: url("../assets/images/landing--photo.jpg");
  background-size: cover;
  background-position: 0% 50%;
}
.landing__menu {
  align-items: normal;
  padding: 0 clamp(1rem, 0.272rem + 3.107vw, 4rem) 0 0;
}
.landing__menu .menu__list .menu__el {
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid #FB6B37;
  position: relative;
  margin-bottom: clamp(1rem, 0.272rem + 3.107vw, 4rem);
  z-index: 1;
  width: 46.67dvw;
}
.landing__menu .menu__list .menu__el:hover {
  background-color: #FB6B37;
  color: #000519;
}
.landing__menu .menu__list .menu__el:hover > .menu__el--link {
  color: #000519;
}
.landing__menu .menu__list .menu__el:hover::after {
  content: url("../assets/images/arrow--menu.svg");
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  position: absolute;
  top: clamp(1.25rem, 1.011rem + 1.018vw, 1.5rem);
  right: 16px;
  color: #000519;
}
.landing__menu .menu__list .menu__el--link {
  text-decoration: none;
  color: #FFFBF5;
  font-size: clamp(1.75rem, 1.401rem + 1.489vw, 3.188rem);
  font-weight: 300;
  width: 100%;
  display: block;
}

.section {
  margin-top: clamp(6rem, 4.667rem + 2.778vw, 8rem);
  padding: 0 clamp(1rem, 0.272rem + 3.107vw, 4rem);
}
.section__h2 {
  font-size: 51px;
  border-bottom: 1px solid #FB6B37;
  font-weight: 300;
}
.section--projets .projets--container .projets__el, .section--caseStudy .projets--container .projets__el {
  display: flex;
  flex-direction: column;
  margin-top: 4rem;
  border: 1px solid #FB6B37;
}
.section--projets .projets--container .projets__el--img, .section--caseStudy .projets--container .projets__el--img {
  width: 100%;
  height: clamp(10.688rem, 1.146rem + 19.878vw, 25rem);
  background-size: cover;
  background-position: 0% center;
}
.section--projets .projets--container .projets__el--img .el__img, .section--caseStudy .projets--container .projets__el--img .el__img {
  width: 100%;
  height: 100%;
}
.section--projets .projets--container .projets__el--imgJanus, .section--caseStudy .projets--container .projets__el--imgJanus {
  background-image: url("../assets/images/Janus--photo.jpg");
}
.section--projets .projets--container .projets__el--imgDataplay, .section--caseStudy .projets--container .projets__el--imgDataplay {
  background-image: url("../assets/images/Dataplay--photo.jpg");
}
.section--projets .projets--container .projets__el--imgRux, .section--caseStudy .projets--container .projets__el--imgRux {
  background-image: url("../assets/images/RUX--photo.jpg");
}
.section--projets .projets--container .projets__el--imgDF, .section--caseStudy .projets--container .projets__el--imgDF {
  background-image: url("../assets/images/DF--photo.jpg");
}
.section--projets .projets--container .projets__el .projets__h3, .section--caseStudy .projets--container .projets__el .projets__h3 {
  font-size: 38px;
  padding: 0 clamp(1rem, 0.272rem + 3.107vw, 4rem);
  margin: clamp(1rem, 0.272rem + 3.107vw, 4rem) 0 clamp(1.5rem, 1.167rem + 0.694vw, 2rem) 0;
}
.section--projets .projets--container .projets__el .projets__h3--link, .section--caseStudy .projets--container .projets__el .projets__h3--link {
  color: #FFFBF5;
  font-weight: 500;
  line-height: 130%;
  position: relative;
  transition: all 0.3s ease-out;
}
.section--projets .projets--container .projets__el .projets__h3--link:hover, .section--caseStudy .projets--container .projets__el .projets__h3--link:hover {
  color: #FB6B37;
}
.section--projets .projets--container .projets__el .projets__h3--link::after, .section--caseStudy .projets--container .projets__el .projets__h3--link::after {
  content: url("../assets/images/Arrow--link.svg");
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  position: absolute;
  top: -1px;
  right: -2.0625rem;
}
.section--projets .projets--container .projets__el .projets__btn, .section--caseStudy .projets--container .projets__el .projets__btn {
  align-self: flex-end;
  border: 1px solid #FB6B37;
  background-color: #000519;
  padding: clamp(0.25rem, 0.189rem + 0.259vw, 0.5rem) clamp(0.5rem, 0.379rem + 0.518vw, 1rem);
  color: #FFFBF5;
  margin: 0 -1px -1px 0;
  font-family: "Host Grotesk", sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 0.924rem + 0.324vw, 1.313rem);
  transition: all 0.3s ease-out;
}
.section--projets .projets--container .projets__el .projets__btn:hover, .section--caseStudy .projets--container .projets__el .projets__btn:hover {
  background-color: #FB6B37;
  color: #000519;
}
.section--projets .projets--container .projets__p, .section--caseStudy .projets--container .projets__p {
  font-family: "latienne-pro", serif;
  font-weight: 400;
  font-style: normal;
  line-height: 140%;
  font-size: clamp(1rem, 0.792rem + 0.434vw, 1.313rem);
  padding: 0 clamp(1rem, 0.272rem + 3.107vw, 4rem);
  margin-bottom: clamp(2rem, 0.667rem + 2.778vw, 4rem);
  min-height: 25%;
}
.section--contact {
  display: flex;
  flex-direction: column;
}
.section--caseStudy {
  overflow-y: auto;
  display: none;
  flex-direction: column;
  align-items: center;
  padding-top: 60px;
  background-color: #000519;
  margin: 0;
  padding-bottom: 8rem;
}
.section--caseStudy.open {
  display: flex;
}
.section--caseStudy .section__div--wrapper {
  align-items: flex-end;
}
.section--caseStudy .section__h2, .section--caseStudy .section__h3 {
  font-weight: 500;
  width: 100%;
}
.section--caseStudy .section__h2 {
  font-size: clamp(2.375rem, 1.935rem + 1.877vw, 4.188rem);
}
.section--caseStudy .section__h3 {
  font-size: clamp(1.75rem, 1.401rem + 1.489vw, 3.188rem);
  margin: clamp(4rem, 2.092rem + 8.142vw, 6rem) 0 0 0;
}
.section--caseStudy .section__header {
  height: 60px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  background-color: #000519;
}
.section--caseStudy .section__header .header__btn {
  width: 30px;
  height: 50px;
  font-size: 42px;
  position: relative;
  background-color: transparent;
  border: none;
}
.section--caseStudy .section__header .header__btn::before {
  content: "✕";
  width: 100%;
  height: 100%;
  display: block;
  color: #FFFBF5;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 99;
  padding-right: clamp(1rem, 0.272rem + 3.107vw, 4rem);
}
.section--caseStudy .section__div--img {
  width: 100%;
  height: 25vh;
  background-size: cover;
  background-position: 0% 50%;
}
.section--caseStudy .section__div--imgJanus {
  background-image: url("../assets/images/Janus--photo.jpg");
}
.section--caseStudy .section__div--imgDataplay {
  background-image: url("../assets/images/Dataplay--photo.jpg");
}
.section--caseStudy .section__div--imgRux {
  background-image: url("../assets/images/RUX--photo.jpg");
}
.section--caseStudy .section__div--imgDF {
  background-image: url("../assets/images/DF--photo.jpg");
}
.section--caseStudy .section__btn {
  margin: clamp(2rem, 1.515rem + 2.071vw, 4rem) 0;
}
.section--caseStudy .section__btn:last-of-type {
  margin-bottom: 6rem;
}
.section--caseStudy .section__p:first-of-type {
  margin-top: 2rem;
}
.section--credits {
  margin-top: 4rem;
}
.section--credits .section__div--wrapper {
  align-items: normal;
}
.section--credits .credits__h3 {
  font-size: 38px;
  padding: 0 clamp(1rem, 0.272rem + 3.107vw, 4rem);
  margin: clamp(1rem, 0.272rem + 3.107vw, 4rem) 0 clamp(1.5rem, 1.167rem + 0.694vw, 2rem) 0;
}
.section--credits .credits__h3--link {
  color: #FFFBF5;
  font-weight: 500;
  line-height: 130%;
  position: relative;
  transition: all 0.3s ease-out;
}
.section--credits .credits__h3--link:hover {
  color: #FB6B37;
}
.section--credits .credits__h3--link::after {
  content: url("../assets/images/Arrow--link.svg");
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  position: absolute;
  top: -1px;
  right: -2.0625rem;
}
.section__p {
  font-family: "latienne-pro", serif;
  margin-top: 2rem;
  line-height: 140%;
  font-size: clamp(1rem, 0.702rem + 1.272vw, 1.313rem);
}
.section__p--em {
  color: #FB6B37;
  font-style: normal;
}
.section__p:first-of-type {
  margin-top: clamp(4rem, 2.058rem + 8.285vw, 12rem);
}
.section__h3 {
  margin: clamp(2rem, 1.515rem + 2.071vw, 4rem) 0;
  font-size: 21px;
  font-weight: 300;
}
.section__div--icons {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.section__div--icons .div__icon {
  width: 14%;
}
.section__div--wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.section__btn {
  border: 1px solid #FB6B37;
  padding: 0.5rem 1rem;
  color: #FFFBF5;
  transition: all 0.3s ease-out;
  background-color: #000519;
  font-family: "Host Grotesk", sans-serif;
  text-decoration: none;
  font-size: 21px;
}
.section__btn:hover {
  color: #000519;
  background-color: #FB6B37;
}
.section__btn:hover img {
  filter: brightness(0) saturate(100%) invert(4%) sepia(58%) saturate(2886%) hue-rotate(214deg) brightness(94%) contrast(106%);
}
.section__btn--contact {
  align-self: center;
  margin-top: 4rem;
}

.footer {
  display: flex;
  flex-direction: column;
  padding: 0 clamp(1rem, 0.272rem + 3.107vw, 4rem);
  border-top: 1px solid #FB6B37;
  margin-top: clamp(6rem, 3.137rem + 12.214vw, 9rem);
}
.footer__list {
  margin-top: 2rem;
  display: flex;
  justify-content: space-between;
}
.footer__el {
  display: flex;
  gap: clamp(1rem, 0.757rem + 1.036vw, 2rem);
}
.footer__el--link {
  color: #FFFBF5;
  transition: all 0.3s ease-out;
  font-size: clamp(1rem, 0.924rem + 0.324vw, 1.313rem);
}
.footer__el--link:hover {
  color: #FB6B37;
}
.footer__title {
  margin: 2rem 0;
}
.footer__h2 {
  display: flex;
  align-items: center;
  font-size: clamp(1.313rem, 0.857rem + 1.942vw, 3.188rem);
}
.footer__h2--link {
  color: #FFFBF5;
  text-decoration: none;
  transition: all 0.3s ease-out;
}
.footer__h2--link:hover {
  color: #FB6B37;
}
.footer__h2--link img {
  width: clamp(2rem, 1.757rem + 1.036vw, 3rem);
  margin-left: 0.5rem;
}

@media screen and (min-width: 768px) {
  .header .menu__list .menu__el:hover::after {
    top: clamp(1.5rem, 1.083rem + 0.868vw, 2.125rem);
  }

  .landing {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .landing__div--title {
    align-self: flex-start;
    margin-left: clamp(2rem, 0.667rem + 2.778vw, 4rem);
  }
  .landing__div--column1 {
    margin: 0 clamp(2rem, -1rem + 6.25vw, 3rem);
  }
  .landing__div--column2 {
    max-width: 50%;
  }
  .landing__h1 {
    font-size: clamp(7.5rem, 5.833rem + 3.472vw, 10rem);
  }
  .landing__menu {
    align-items: normal;
    padding: 0 clamp(1rem, 0.272rem + 3.107vw, 4rem) 0 0;
  }
  .landing__menu .menu__list .menu__el:hover::after {
    top: clamp(1.5rem, 1.083rem + 0.868vw, 2.125rem);
  }

  .section--projets .projets--container, .section--caseStudy .projets--container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .section--projets .projets--container .projets__el, .section--caseStudy .projets--container .projets__el {
    max-width: 48%;
  }
  .section--projets .projets--container .projets__el .projets__h3, .section--caseStudy .projets--container .projets__el .projets__h3 {
    font-size: clamp(2.375rem, 0.208rem + 4.514vw, 5.625rem);
  }
  .section--projets .projets--container .projets__el .projets__h3--link, .section--caseStudy .projets--container .projets__el .projets__h3--link {
    text-decoration-thickness: 5%;
    text-underline-offset: 5%;
  }
  .section--caseStudy .section__h3 {
    margin: clamp(6rem, 4.667rem + 2.778vw, 8rem) 0 0 0;
  }

  .footer {
    margin-top: clamp(9rem, 7rem + 4.167vw, 12rem);
  }
}
@media screen and (min-width: 1440px) {
  .landing {
    padding: 0 64px 64px 64px;
    max-height: 100dvh;
    justify-content: space-between;
  }
  .landing__div--title {
    margin: 0;
    align-self: center;
  }
  .landing__div--title .landing__h1 {
    position: relative;
  }
  .landing__div--title .div__img {
    display: inline-block;
    height: 100%;
    position: absolute;
    top: 8px;
    margin-left: 0.5rem;
  }
  .landing__div--content {
    max-width: 30%;
  }
  .landing__div--column1 {
    display: none;
  }
  .landing__div--column2 {
    min-width: 100%;
  }
  .landing__div--sun {
    display: none;
  }
  .landing__div--desktopRow {
    display: flex;
  }
  .landing__menu {
    padding: 0;
    width: 100%;
  }
  .landing__menu .menu__list .menu__el {
    width: auto;
    margin-bottom: 12px;
  }
  .landing__p--scroll {
    right: calc(50vw - 50px);
  }

  .section--projets .projets--container .projets__p {
    min-height: 12%;
  }
  .section--Apropos {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .section--contact {
    align-items: center;
  }
  .section--contact .section__div--wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .section__div--wrapper {
    max-width: 45%;
  }
  .section__h2 {
    width: 100%;
  }
  .section--caseStudy .section__div--img {
    height: 40vh;
  }
  .section--caseStudy .projets--container .projets__el {
    width: 100%;
    max-width: none;
  }

  .footer {
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
  }
  .footer__list {
    width: 50%;
  }
}

/*# sourceMappingURL=app.css.map*/