@font-face {
  font-family: "Univ";
  src: url("../font/UniversLTStd-BoldCn.otf") format("opentype");
}
@font-face {
  font-family: "Helve";
  src: url("../font/HelveticaLight.ttf") format("opentype");
}
@font-face {
  font-family: "Basel";
  src: url("../font/Basel-31.otf") format("opentype");
}

.block {
  overflow-y: hidden !important;
}
a {
  text-decoration: none;
}
body,
html {
  margin: 0;
  padding: 0;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent; /* for removing the highlight */
  font-size: 16px;
  scrollbar-width: none;
}
.fade-fast {
  transition: 150ms cubic-bezier(0.43, 0, 0, 1.01) !important;
  opacity: 0 !important;
}

html::-webkit-scrollbar {
  display: none;
}

::selection {
  color: black;
  /* background-color: #e6ff28f4; */
}

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

.carousel-wrapper {
  opacity: 0;
  z-index: 100;
  /* mix-blend-mode: differenc
  e; */
  pointer-events: none;
  position: absolute;
  color: white;
  opacity: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

.yellow-margin {
  background: linear-gradient(
    to top,
    rgba(219, 247, 12, 0.957) 30%,
    transparent 100%
  );
  width: 100%;
  height: 10rem;
  position: absolute;
  bottom: 0;
}

.img-wrapper {
  position: absolute;
  width: 5rem;
}
#infinite-scroll-container {
  scrollbar-width: none;
  /* transition: 2000ms cubic-bezier(0.43, 0, 0, 1.01); */
  /* transition: 2000ms cubic-bezier(0, 1.09, 0, 1); */
  transform: translateY(3500%);
  -webkit-transform: translateY(3500%);
  overflow-y: visible;
  z-index: 1;
  position: relative;
  width: 95vw;
  height: 100vh;
  font-family: Basel;
  text-align: center;
  font-weight: 500;
  letter-spacing: -0.2rem;
  letter-spacing: -0.15rem;
  color: white;
  text-align: justify;
  font-size: 4vw;
  line-height: 4.1vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  will-change: transform;
}
#infinite-scroll-container > div {
  /* transform: translateY(-50%); */
}

.loading {
  /* transform: translateY(2000%) !important; */
}
#infinite-scroll-container::-webkit-scrollbar {
  display: none;
}
.about-content::-webkit-scrollbar {
  display: none;
}

#infinite-scroll-container p {
  display: inline;
  margin: 0;
  padding-right: 1rem;
  color: rgb(245, 245, 245);
}

.verb {
  /* color: black;  */
  transition: 500ms cubic-bezier(0.43, 0, 0, 1.01);
  text-shadow: #e6ff28f4;

  /* font-family: Univ; */
}

.highlight {
  color: black !important; /* Force la couleur noire pour la phrase en surbrillance */
}

a#typewriter-trigger {
  position: absolute;
  font-family: Univ;
  /* color: #e7ff28; */
  /* font-size: 8.25rem; */
  font-size: 6.5vw;
  opacity: 0.95;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
  z-index: 200;
}
a:hover {
  cursor: pointer;
  opacity: 1;
}

.credits {
  position: absolute;
  right: 0rem;
  bottom: 8rem;
  transform: rotate(-90deg);
  pointer-events: auto;
  opacity: 0;
  display: none;
  transition: 1000ms cubic-bezier(0.43, 0, 0, 1.01);
}

.no-transi {
  transition: 0ms ease !important;
}
.about-container {
  transform-origin: center;
  -webkit-transform-origin: center;
  opacity: 0;
  width: 77.5%;
  height: 7vw;
  position: fixed;
  top: 50%;
  left: 50%;
  overflow: hidden;
  transform: translate(-50%, -50%) matrix(0.95, 0, 0, 0.95, 0, 0);
  -webkit-transform: translate(-50%, -50%) matrix(0.95, 0, 0, 0.95, 0, 0);
  z-index: 999999;
  transition: 1000ms cubic-bezier(0.43, 0, 0, 1.01);
  /* pointer-events: none; */
  background-color: #e6ff28f4;
  font-family: Basel;
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* clip-path: inset(19.75rem 35.75rem); */
  /* -webkit-clip-path: inset(19.75rem 35.75rem); */
  /* -webkit-clip-path: inset(20rem -0.5rem);
  clip-path: inset(20rem -0.5rem); */
  /* clip-path: polygon(0% 0%, 50% 0%, 50% 50%, 0% 50%); */
  pointer-events: none;
}
.normal-clip {
  width: 17%;
  height: 7vw;
}
.transi {
  /* transition: 1000ms cubic-bezier(0.43, 0, 0, 1.01) !important; */
}
.button-hover {
  /* transform: translate(-50%, -50%) matrix(0.9, 0, 0, 0.9, 0, 0);
  -webkit-transform: translate(-50%, -50%) matrix(0.9, 0, 0, 0.9, 0, 0) !important;
  transition: 333ms cubic-bezier(0.43, 0, 0, 1.01); */
  /* transform: translate(-50%, -50%) scale(0.97);
  -webkit-transform: translate(-50%, -50%) scale(0.97); */
  /* -webkit-transform-origin: center; */
}
.button-hover-2 {
  /* transform: translate(-50%, -50%) matrix(0.945, 0, 0, 0.945, 0, 0);
  -webkit-transform: translate(-50%, -50%) matrix(0.945, 0, 0, 0.945, 0, 0) !important;
  transition: 333ms cubic-bezier(0.43, 0, 0, 1.01); */
  /* transition: 333ms cubic-bezier(0.43, 0, 0, 1.01); */
  /* transform: translate(-50%, -50%) scale(0.99);
  -webkit-transform: translate(-50%, -50%) scale(0.99); */
  /* -webkit-transform-origin: center; */
}

.close-button:hover span {
  opacity: 0.6;
}
.close-button {
  transition: 1000ms cubic-bezier(0.43, 0, 0, 1.01);
  display: none;
}
.about-container.expanded {
  -webkit-transform-origin: center;

  width: 102.5vw;
  height: 101.5vh;
  /* height: 90%;
  width: 90%; */
  /* width: 50rem;
  height: 75rem; */
  /* -webkit-clip-path: inset(0% 0% 0% 0%); */
}

.opa {
  transition: 250ms cubic-bezier(0.43, 0, 0, 1.01) !important;
  opacity: 0 !important;
}
.credits {
  font-size: 0.6rem;
}
.text-container {
  display: none;
}
footer a {
  color: black;
  cursor: alias;
}
.text-container {
  width: 95%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0.5rem;
}
.text-desc {
  margin-top: 0.5rem;
}
footer > div:nth-child(1) {
  display: flex;
  flex-direction: column;
}
footer > div:nth-child(2) {
  display: flex;
  align-items: flex-end;
}
footer {
  display: flex;
  width: 99%;
  color: black;
  bottom: 0.4rem;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  position: absolute;
  left: 50%;
  justify-content: space-between;
}
.about-container.closed {
  transition: 500ms cubic-bezier(0.43, 0, 0, 1.01) !important;
  clip-path: inset(23rem 46rem) !important;
  /* clip-path: inset(46rem) !important; */
  /* clip-path: inset(19rem 48rem) !important; */
  /* opacity: 0 !important; */
}
.section-t-1 {
  display: flex;
  width: 100%;
  justify-content: start;
  padding: 0.75rem;
}

.section-t-1 sup {
  /* font-size: 100%; */
}

.col-mob {
  display: flex;
}

.section-t-1 div:nth-child(1) {
  width: 35ch;
}
.section-t-1 > div > div:nth-child(1) {
  margin-left: 28.5rem;
}
.section-t-1 > div > div:nth-child(2) {
  margin-left: 14rem;
}

.section-t-2 {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 0.75rem;
}

.section-t-2 div:nth-child(3) {
  margin-right: 1.75rem;
}
ul,
li {
  text-decoration: none;
  list-style: none;
  margin: 0;
}
.contact div:hover {
  opacity: 0.6;
  cursor: pointer !important;
}
img {
  /* position: absolute;
  z-index: 100;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50, -50%);
  opacity: 0.95;
  width: 35rem; */
  position: absolute;
  z-index: 100;
  right: 1rem;
  top: 1rem;
  transform: 0;
  opacity: 0.95;
  width: 35vw;
}

.image-overlay.small img {
  width: 50%; /* Taille réduite pour les petites images */
  height: auto;
}

.image-overlay.medium img {
  width: 75%; /* Taille moyenne pour les images moyennes */
  height: auto;
}

.image-overlay.large img {
  width: 100%; /* Pleine largeur pour les grandes images */
  height: auto;
}

@keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
.close-button {
  position: fixed;
  background-color: white;
  right: 0.5rem;
  top: 0.5rem;
  padding: 2px 3px;
  z-index: 20000;
  opacity: 0;
}
.close-button:hover {
  cursor: pointer;
}
#typewriter-trigger {
  transition: 850ms cubic-bezier(0.43, 0, 0, 1.01); /* transition: 250ms cubic-bezier(0.43, 0, 0, 1.01) !important; */
}
#typewriter-trigger:hover {
  /* margin-top: 5px; */
}
.descale {
  transform: translate(-50%, -40%) scale(0.875) !important;
  -webkit-transform: translate(-50%, -40%) scale(0.875) !important;
  /* transform: translate(-50%, -40%) scale(0.6) !important;
  -webkit-transform: translate(-50%, -40%) scale(0.6) !important; */
}
#typewriter-text {
  position: relative;
  transition: 222ms ease-in-out;
  color: rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  min-height: 20px; /* Ajustez cette valeur en fonction de la taille de votre texte */
  display: inline-block; /* Peut aider à maintenir la structure pendant l'animation */
  vertical-align: bottom;
}

sup {
  font-size: 45%;
  vertical-align: 3.1vw;
}

.about-content {
  font-family: "Basel";
  padding: 0.5rem;
  width: 50%;
  line-height: 1rem;
  overflow: scroll;
  padding-bottom: 7.5rem;
  opacity: 0;
  transition: 1000ms cubic-bezier(0.43, 0, 0, 1.01);
  display: none;
}

.accordion-header {
  justify-content: flex-start;
  display: flex;
}
.symbol,
.symbol-service {
  width: 1rem;
}
.works,
.intro,
.clients {
  margin-bottom: 1rem;
  width: 60%;
}
.scroll-indicator {
  border-radius: 1px;
  display: flex;
  justify-content: center;
  position: fixed;
  bottom: -4rem;
  width: 2.5rem;
  height: 2.5rem;
  background-color: #e6ff28f4;
  z-index: 2;
  animation: float 1.5s linear infinite;
  box-shadow: 0 80px 96px rgba(0, 0, 0, 0.08), 0 52px 64px rgba(0, 0, 0, 0.26);
  transition: 444ms ease;
  opacity: 1;
}
.scroll-indicator svg {
  width: 35%;
}

.services {
  margin-bottom: 1rem;
}
.service-item {
  display: flex;
}

.go-onbottom {
  font-size: 9.75vw !important;
  top: 93.5% !important;
}

.top-onscroll {
  top: 10%;
  /* transform: translate(-50%, -50%) scale(0.7); */
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.5rem);
  }
}
.accordion-item:hover {
  cursor: pointer;
}
.accordion-header:hover {
  opacity: 0.6;
}
.accordion-content {
  display: none;
}
.accordion-item.inactive {
  opacity: 0.3;
}

.image-overlay {
  position: fixed;
  top: 0%;
  right: 0%;
  width: 100%;
  /* transform: translate(-50%, -50%); */
  /* -webkit-transform: translate(-50%, -50%); */
  display: none;
  z-index: 1000;
  width: 50%;
  height: 100%;
  padding: 0px;
  margin: 0;
  border-radius: 10px;
}

.image-overlay img {
  filter: grayscale(1);
  display: block;
  margin: 0 auto;
}

.footer {
  display: flex;
  position: fixed;
  justify-content: space-between;
  bottom: 0.5rem;
  width: 98.5%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}
.footer a {
  color: black;
}
.footer div {
  display: flex;
  flex-direction: column;
}

.footer > div:nth-child(2) {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  font-size: 0.65rem;
}

#image-overlay {
  cursor: pointer;
}

.about-content a {
  text-decoration: underline;
  color: black;
  cursor: alias;
}

@media only screen and (min-width: 1920px) {
  .go-onbottom {
    top: 92% !important;
  }
}