@charset "UTF-8";
@font-face {
  font-family: "TWK-Regular";
  src: url("../fonts/TWK/woff2/TWKEverett-Regular.woff2") format("woff2"), url("../fonts/TWK/woff/TWKEverett-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "TWK-Medium";
  src: url("../fonts/TWK/woff2/TWKEverett-Medium.woff2") format("woff2"), url("../fonts/TWK/woff/TWKEverett-Medium.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
/*@font-face {
  font-family: 'SF-Regular';
  src: url('../fonts/SF/woff2/SF-Pro-Display-Regular.woff2') format('woff2'),
       url('../fonts/SF/woff/SF-Pro-Display-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SF-Medium';
  src: url('../fonts/SF/woff2/SF-Pro-Display-Medium.woff2') format('woff2'),
       url('../fonts/SF/woff/SF-Pro-Display-Medium.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SF-Semibold';
  src: url('../fonts/SF/woff2/SF-Pro-Display-Semibold.woff2') format('woff2'),
       url('../fonts/SF/woff/SF-Pro-Display-Semibold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}*/
/*$main-font-regular: 'SF-Regular', sans-serif;
$main-font-medium: 'SF-Medium', sans-serif;
$main-font-semibold: 'SF-Semibold', sans-serif;*/
.title {
  font-family: "Inter", sans-serif;
  font-weight: 600;
}

.subtitle {
  font-family: "Inter", sans-serif;
  font-weight: 500;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

*:focus {
  outline: none;
}

.reset-button-style {
  border-width: 0;
  padding: 0;
  background: none;
}

h1 {
  color: #04010B;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 110%;
  letter-spacing: -0.36px;
  margin: 0;
}

h2 {
  font-family: "TWK-Regular", sans-serif;
  font-size: 52px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -2.08px;
  margin: 0;
}

h3 {
  color: #04010B;
  font-family: "TWK-Medium", sans-serif;
  font-size: 30px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 30px */
  letter-spacing: -1.2px;
  margin: 0;
}

h4 {
  color: #F8F4FB;
  font-family: "TWK-Regular", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%; /* 20.8px */
  letter-spacing: 0.32px;
  text-transform: uppercase;
  margin: 0;
}

p {
  margin: 0;
  font-style: normal;
}

a {
  color: #04010B;
  /*font-family: $main-font-medium;*/
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%; /* 21.6px */
  text-decoration: none;
}
a.inactive {
  opacity: 40%;
  cursor: default;
  pointer-events: none;
}

.linkedin, .mail {
  color: #04010B;
  font-family: "TWK-Medium", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%; /* 19.2px */
}

/*.rainbow {
  background: var(--HorzGradGrnToPrp, linear-gradient(90deg, var(--green, #1ED75F) 0%, var(--indigo, #5012CF) 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}*/
.rainbow {
  background: linear-gradient(90deg, var(--green, #1ED75F), var(--purple-light, #FAD5FF), var(--green, #1ED75F));
  background-size: 200% auto; /* plus large pour permettre l'animation */
  background-position: 0% center;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 2s ease-in-out infinite alternate;
  mix-blend-mode: exclusion;
}

.rainbow2 {
  background: linear-gradient(90deg, var(--green, #1ED75F), var(--purple-light, #FAD5FF), var(--green, #1ED75F));
  background-size: 200% auto; /* plus large pour permettre l'animation */
  background-position: 0% center;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 2s ease-in-out infinite alternate;
  mix-blend-mode: exclusion;
}

@keyframes gradientShift {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 100% center;
  }
}
/*@keyframes gradientShift2 {
  0% {
    background-position: 0% 100%;
  }
  50% {
    background-position: 50% 50%;
  }
  100% {
    background-position: 100% 0%;
  }
}

.container-two {
  a:hover {
      background: linear-gradient(
        90deg,
        var(--green, #1ED75F),
        var(--purple-light, #FAD5FF),
        var(--green, #1ED75F)
      );
      background-size: 4px auto;
      background-position: 0% center;
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: gradientShift2 1s infinite;
      mix-blend-mode: exclusion;
  }
}*/
.wGradient {
  background: linear-gradient(180deg, var(--purple-lighter, #F8F4FB) 0%, var(--purple-light, #FAD5FF) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.3;
  transition: opacity 0.3s ease;
  cursor: default;
}

.wGradient.active {
  opacity: 1;
}

/* Styliser la sélection du texte de manière globale */
::selection {
  background-color: rgba(255, 255, 255, 0.15);
  color: blue;
}

/* Styliser la sélection du big title seulement */
.bigtitle::selection {
  background-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.primary-button {
  position: relative;
  overflow: hidden;
  z-index: 1;
  display: flex;
  height: 50px;
  padding: 20px 30px;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background: var(--VertGradBluToPrp, linear-gradient(180deg, var(--blue-electric, #3553E9) 0%, var(--purple, #7132F5) 100%));
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: #F8F4FB;
  text-align: center;
  /*font-family: $main-font-medium;*/
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 18px */
  letter-spacing: -0.9px;
  transition: box-shadow 0.4s ease;
}

.primary-button:hover {
  box-shadow: 0 0 8px rgba(113, 50, 245, 0.25), 0 0 16px rgba(113, 50, 245, 0.2), 0 0 32px rgba(113, 50, 245, 0.15);
}

.primary-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--purple, #7132F5), var(--blue-electric, #3553E9)); /* inversé */
  opacity: 0;
  transition: opacity 0.8s ease;
}

.primary-button:hover::before {
  opacity: 1;
  transition: opacity 0.8s ease;
}

.secondary-button {
  display: flex;
  height: 50px;
  padding: 0px 32px;
  align-items: center;
  border-radius: 18px;
  border: 1px solid rgba(248, 244, 251, 0.3);
  color: #F8F4FB;
  /*font-family: $main-font-semibold;*/
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%; /* 16.8px */
  letter-spacing: -0.7px;
}

/*.rainbow-button {
  display: flex;
  height: 50px;
  padding: 0px 32px;
  align-items: center;

  border-radius: 14px;
  border: 1px solid $green;

  color: $indigo;
  font-family: $main-font-medium;
  @include font(500);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%; /* 19.2px
}*/
.rainbow-button {
  position: relative;
  height: 50px;
  padding: 0px 32px;
  border: none;
  background-color: transparent;
  transition: background-color 0.8s ease;
  color: #5012CF;
  /*font-family: $main-font-medium;*/
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 50px;
  letter-spacing: -0.8px;
  border-radius: 14px;
  cursor: pointer;
  z-index: 0;
  isolation: isolate; /* évite les fuites de z-index */
}
.rainbow-button:hover {
  background-color: rgba(204, 189, 246, 0.6);
  transition: background-color 0.8s ease;
}

.rainbow-button::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px; /* Épaisseur de la bordure */
  background: linear-gradient(180deg, #1ED75F, #5012CF);
  border-radius: inherit;
  z-index: -1;
  /* Masque pour ne montrer que le contour */
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
}

.availability {
  display: flex;
  padding: 4px 8px 4px 4px;
  align-items: center;
  gap: 8px;
  border-radius: 13px;
  background: #1ED75F;
}
.availability p {
  color: #5012CF;
  font-family: "TWK-Medium", sans-serif;
  font-size: 10px;
  font-weight: 500;
  line-height: 120%; /* 12px */
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.coming-soon {
  display: flex;
  padding: 4px 8px;
  align-items: center;
  border-radius: 13px;
  background: #FF7439;
}
.coming-soon p {
  color: #5012CF;
  font-family: "TWK-Medium", sans-serif;
  font-size: 10px;
  font-weight: 500;
  line-height: 120%; /* 12px */
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.check {
  display: flex;
  width: 18px;
  height: 18px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;
  border-radius: 10px;
  background: #F8F4FB;
}
.check svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
}

/* Global responsive rules */
@media (min-width: 1024px) {
  .desktop-hide {
    display: none;
  }
}
@media (max-width: 1024px) {
  .tablet-only {
    display: block;
  }
}
@media (max-width: 767px) {
  .mobile-only {
    display: block;
  }
}
body {
  /*font-family: $main-font-regular;*/
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  font-style: normal;
  color: #04010B;
  background-color: #fff;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.6px;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: transparent;
  pointer-events: none;
  padding: 30px 20px;
  pointer-events: auto;
  transition: transform 0.1s ease;
  mask-image: linear-gradient(to bottom, black 80%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent);
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
  /*.container-two .header-item:nth-child(1)     { transition-delay: 0.1s; }
  .container-two .header-item:nth-child(2)     { transition-delay: 0.15s; }
  .container-two .header-item:nth-child(3)     { transition-delay: 0.2s; }
  .container-two .header-item:nth-child(4)     { transition-delay: 0.25s; }*/
}
.header.header--hidden {
  pointer-events: none;
}
.header .header-item {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.header.header--hidden .header-item {
  opacity: 0;
  transform: translateY(-20px);
}
.header .container-one .header-item:nth-child(1) {
  transition-delay: 0s;
}
.header .container-one .header-item:nth-child(2) {
  transition-delay: 0.05s;
}
.header .container-three .header-item:nth-child(1) {
  transition-delay: 0.1s;
}
.header .container-three .header-item:nth-child(2) {
  transition-delay: 0.15s;
}
.header h1 {
  /*font-family: $main-font-medium;*/
  font-family: "Inter", sans-serif;
  font-weight: 500;
  color: #F8F4FB;
  letter-spacing: -0.8px;
}
.header a {
  color: #F8F4FB;
}
.header .container-header {
  display: flex;
  width: 100%;
  padding: 16px 30px;
  align-items: center;
  gap: 60px;
  border-radius: 10px;
}
.header .container-one {
  display: flex;
  align-items: center;
  gap: 160px;
  flex: 1 0 0;
  align-self: stretch;
}
.header .container-two {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 30px;
  flex: 1 0 0;
}
.header .container-three {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.header .container-three .linkedin {
  display: flex;
  height: 40px;
  padding: 0px 30px;
  align-items: center;
  border-right: 1px solid transparent;
  border-image: linear-gradient(to bottom, rgba(248, 244, 251, 0) 0%, rgba(248, 244, 251, 0.2) 20%, rgba(248, 244, 251, 0.2) 80%, rgba(248, 244, 251, 0) 100%);
  border-image-slice: 1;
}
.header .container-three .mail {
  display: flex;
  height: 40px;
  padding-left: 30px;
  align-items: center;
}
.header .burger-menu {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.header .burger-menu svg {
  width: 24px;
  height: 24px;
}
@media (max-width: 1024px) {
  .header {
    width: 100%;
    padding: 16px;
  }
  .header .container-one {
    gap: 60px;
  }
  .header .container-two {
    display: none;
  }
}
@media (max-width: 767px) {
  .header {
    padding: 20px 16px;
  }
  .header .container-header {
    padding: 16px;
    height: 56px;
    gap: 0px;
  }
  .header .container-one {
    gap: 30px;
  }
  .header .container-two {
    display: none;
  }
  .header .container-three {
    display: none;
  }
}

.profil-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.profil-content .client-name {
  /*font-family: $main-font-medium;*/
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 14px;
  font-weight: 500;
  line-height: 120%; /* 16.8px */
  letter-spacing: 0.28px;
}
.profil-content .job-title {
  font-size: 13px;
  font-weight: 400;
  line-height: 120%; /* 15.6px */
  letter-spacing: 0.26px;
}

#intro-big {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

#intro-canvas {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: hard-light;
  opacity: 0.5;
}

#noise-layer {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/*
#gradient-layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: revealGradient 6s ease-in-out forwards;
  background: radial-gradient(at 20% 30%, #3a28e0, transparent 50%),
              radial-gradient(at 60% 60%, #8636f4, transparent 60%),
              radial-gradient(at 80% 70%, #eb8ce4, transparent 70%);
  background-blend-mode: screen;
  background-size: 200% 200%;
  animation-delay: 0.5s;
}

@keyframes revealGradient {
  0% {
    opacity: 0;
    filter: blur(100px);
    transform: scale(1.1);
  }
  50% {
    opacity: 0.4;
    filter: blur(60px);
  }
  100% {
    opacity: 1;
    filter: blur(30px);
    transform: scale(1);
  }
}

@keyframes animateGradientShift {
  0%, 100% {
    background-position: 30% 30%, 60% 60%, 80% 70%;
  }
  50% {
    background-position: 35% 25%, 55% 65%, 85% 75%;
  }
}

#gradient-layer {
  animation: 
    revealGradient 6s ease-in-out forwards,
    animateGradientShift 25s ease-in-out infinite alternate;
}*/
.hero-section {
  display: flex;
  width: 100vw;
  height: 100vh;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  z-index: 0;
  position: relative;
  overflow: hidden;
  background-color: #04010B;
  background-image: url(../medias/img/bg-hero-purpleflow.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: hard-light;
  /*canvas#intro-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  > *:not(canvas) {
    position: relative;
    z-index: 1;
  }*/
  /*.ghost {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    flex: 1 0 0;
    align-self: stretch;
    z-index: 2;

    position: absolute;
    right: 60px;
    bottom: 0;

    .availability {
      position: absolute;
      right: 37px;
      bottom: 30px;
    }

    img {
      width: 180px;
      height: 240px;
    }
  }*/
}
.hero-section .bigtitle-wrapper {
  display: flex;
  padding: 0px 240px 0px 60px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex: 1 0 0;
  align-self: stretch;
  z-index: 1;
}
.hero-section .bigtitle {
  align-self: stretch;
  max-width: 1100px;
  color: rgba(228, 225, 250, 0.5);
  font-family: "TWK-Regular", sans-serif;
  font-size: 96px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 96px */
  letter-spacing: -3.84px;
}
.hero-section .bigtitle .exerg {
  color: #E4E1FA;
  font-family: "TWK-Regular", sans-serif;
  font-size: 96px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: -3.84px;
}
.hero-section .ghost-container {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  flex: 1 0 0;
  align-self: stretch;
  z-index: 2;
  position: absolute;
  right: 60px;
  bottom: 0;
}
.hero-section .ghost {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 180px;
  height: 240px;
}
.hero-section .ghost .availability {
  position: absolute;
  right: 37px;
  bottom: 30px;
}
.hero-section .ghost .base {
  display: block;
  width: 100%;
  height: auto;
}
.hero-section .ghost canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}
.hero-section .shape-container {
  position: absolute;
  right: -400px;
  bottom: -600px;
  z-index: 0;
}
.hero-section .shape-container img {
  width: 1440px;
  height: 1440px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
}
@media (max-width: 1181px) {
  .hero-section #intro-canvas {
    display: none;
  }
}
@media (max-width: 1279px) {
  .hero-section .bigtitle-wrapper {
    padding: 0px 240px 0px 60px;
  }
}
@media (max-width: 1024px) {
  .hero-section #intro-canvas {
    display: none;
  }
  .hero-section .bigtitle-wrapper {
    padding: 220px 60px 0px 40px;
    justify-content: flex-start;
  }
  .hero-section .ghost-container {
    right: 30px;
  }
}
@media (max-width: 767px) {
  .hero-section {
    /*.ghost-container {
      right: 30px;
    }*/
  }
  .hero-section #intro-canvas {
    display: none;
  }
  .hero-section .bigtitle-wrapper {
    padding: 130px 30px 0px 16px;
    justify-content: flex-start;
  }
  .hero-section .bigtitle {
    font-size: 52px;
    letter-spacing: -2.08px;
  }
  .hero-section .bigtitle .exerg {
    font-size: 52px;
    letter-spacing: -2.08px;
  }
  .hero-section .ghost {
    width: 135px;
    height: 180px;
  }
  .hero-section .ghost .availability {
    right: 14px;
    bottom: 20px;
  }
  .hero-section .shape-container {
    top: 320px;
    right: auto;
    bottom: auto;
    left: 30px;
  }
  .hero-section .shape-container img {
    width: 480px;
    height: 480px;
  }
}

#presentation-section {
  width: 100%;
  display: flex;
  padding: 100px 0px;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  align-self: stretch;
  position: relative;
  z-index: 2;
  background: #04010B;
  /* gradient d’entrée/sortie */
}
#presentation-section .presentation-inline {
  display: flex;
  padding: 0px 150px 0px 30px;
  align-items: flex-start;
  align-self: stretch;
}
#presentation-section .big-text {
  font-family: "TWK-Regular", sans-serif;
  font-size: 60px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%; /* 66px */
  letter-spacing: -3.6px;
  background: linear-gradient(180deg, var(--purple-lighter, #F8F4FB) 0%, var(--purple-light, #FAD5FF) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#presentation-section .client-logos-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #04010B;
}
#presentation-section .client-logos-slider::before,
#presentation-section .client-logos-slider::after {
  content: "";
  position: absolute;
  top: 0;
  width: 120px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
#presentation-section .client-logos-slider::before {
  left: 0;
  background: linear-gradient(to right, #04010B, transparent);
}
#presentation-section .client-logos-slider::after {
  right: 0;
  background: linear-gradient(to left, #04010B, transparent);
}
#presentation-section .client-logos-inner {
  overflow: hidden;
  width: 100%;
}
#presentation-section .client-logos-track {
  display: flex;
  padding: 20px 0;
  will-change: transform;
}
#presentation-section .client-logo-container {
  flex: 0 0 173px;
  height: 52px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin-right: 80px;
  /*&.margin-logo-salomon {
    margin-right: 80px;
  }*/
}
#presentation-section .client-logo-container.margin-logo-ge {
  margin-right: 72px;
}
#presentation-section .client-logo-container.margin-logo-cb {
  margin-right: 19px;
}
#presentation-section .client-logo-container.margin-logo-orange {
  margin-right: 28px;
}
#presentation-section .client-logo-container.margin-logo-lafee {
  margin-right: 75px;
}
#presentation-section .client-logo-container.margin-logo-millet {
  margin-right: 76px;
}
#presentation-section .client-logo-container:last-child {
  margin-right: 0;
}
#presentation-section .client-logo-container img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}
@media (max-width: 1024px) {
  #presentation-section {
    padding: 80px 0px;
    gap: 60px;
  }
  #presentation-section .presentation-inline {
    padding: 0px 60px 0px 30px;
  }
  #presentation-section .big-text {
    font-size: 46px;
    letter-spacing: -1.84px;
  }
  #presentation-section .client-logo-container {
    margin-right: 60px;
    /*&.margin-logo-salomon {
      margin-right: 80px;
    }*/
  }
  #presentation-section .client-logo-container.margin-logo-ge {
    margin-right: 52px;
  }
  #presentation-section .client-logo-container.margin-logo-cb {
    margin-right: -1px;
  }
  #presentation-section .client-logo-container.margin-logo-orange {
    margin-right: 8px;
  }
  #presentation-section .client-logo-container.margin-logo-lafee {
    margin-right: 55px;
  }
  #presentation-section .client-logo-container.margin-logo-millet {
    margin-right: 56px;
  }
}
@media (max-width: 767px) {
  #presentation-section {
    padding: 60px 0px;
    gap: 40px;
  }
  #presentation-section .presentation-inline {
    padding: 0px 32px 0px 16px;
  }
  #presentation-section .big-text {
    font-size: 36px;
    letter-spacing: -1.44px;
  }
  #presentation-section .client-logo-container {
    margin-right: 40px;
    /*&.margin-logo-salomon {
      margin-right: 80px;
    }*/
  }
  #presentation-section .client-logo-container img {
    height: 40px;
  }
  #presentation-section .client-logo-container.margin-logo-ge {
    margin-right: 32px;
  }
  #presentation-section .client-logo-container.margin-logo-cb {
    margin-right: -21px;
  }
  #presentation-section .client-logo-container.margin-logo-orange {
    margin-right: -12px;
  }
  #presentation-section .client-logo-container.margin-logo-lafee {
    margin-right: 35px;
  }
  #presentation-section .client-logo-container.margin-logo-millet {
    margin-right: 36px;
  }
}

.title-inline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}
.title-inline h3 {
  align-self: stretch;
}
.title-inline p {
  align-self: stretch;
  font-family: "TWK-Regular", sans-serif;
  font-size: 46px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 46px */
  letter-spacing: -1.84px;
}
@media (max-width: 1024px) {
  .title-inline p {
    font-size: 36px;
    letter-spacing: -1.44px;
  }
}
.and-desc {
  padding: 0px 240px 30px 0px;
  gap: 30px;
}
@media (max-width: 1024px) {
  .and-desc {
    padding: 0px;
  }
}
@media (max-width: 767px) {
  .and-desc {
    padding: 0px;
  }
}

.cta-inline {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
}

#capabilities-section {
  display: flex;
  padding: 100px 30px;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  position: relative;
  z-index: 2;
  border-top: 1px solid transparent;
  border-image: linear-gradient(to right, rgba(248, 244, 251, 0) 0%, rgba(248, 244, 251, 0.2) 20%, rgba(248, 244, 251, 0.2) 80%, rgba(248, 244, 251, 0) 100%);
  border-image-slice: 1;
  background: #04010B;
}
#capabilities-section .capabilities-table {
  display: flex;
  padding: 80px 60px 0px 60px;
  align-items: flex-start;
  gap: 60px;
  align-self: stretch;
}
#capabilities-section .col {
  display: flex;
  align-items: flex-start;
}
#capabilities-section .col-1 {
  flex-direction: column;
  width: 100%;
  gap: 10px;
}
#capabilities-section .col-1 h2 {
  align-self: stretch;
  text-transform: uppercase;
}
#capabilities-section .col-2 {
  padding-top: 30px;
  gap: 30px;
  flex: 1 0 0;
}
#capabilities-section .rainbow-line {
  width: 100px;
  margin: 12px 0px 0px 0px;
  height: 1px;
  align-self: stretch;
  background: linear-gradient(90deg, var(--green, #1ED75F), var(--indigo, #5012CF), var(--green, #1ED75F));
  background-size: 200% auto; /* double la taille pour l'effet */
  background-position: 0% center;
  transform-origin: left center;
  opacity: 1;
}
#capabilities-section .content {
  width: 214px;
}
#capabilities-section .short-content {
  width: 214px;
  font-family: "TWK-Regular", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 20px */
  letter-spacing: -0.8px;
  background: linear-gradient(180deg, var(--purple-lighter, #F8F4FB) 0%, var(--purple-light, #FAD5FF) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#capabilities-section .col-3 {
  width: 300px;
  height: 400px;
  flex-direction: column;
  gap: 40px;
  overflow: hidden;
  border-radius: 10px;
  background: url(../medias/img/noisy-gradient-purpletogreen.webp) lightgray 50%/cover no-repeat;
}
#capabilities-section .col-3 img {
  width: 200%;
}
@media (max-width: 1024px) {
  #capabilities-section {
    padding: 80px 30px;
  }
  #capabilities-section .capabilities-table {
    padding: 60px 16px 0px 16px;
    flex-direction: column;
  }
  #capabilities-section .col-3 {
    width: 100%;
  }
}
@media (max-width: 767px) {
  #capabilities-section {
    padding: 60px 16px;
  }
  #capabilities-section .capabilities-table {
    padding: 60px 16px 0px 16px;
    flex-direction: column;
  }
  #capabilities-section h2 {
    font-size: 36px;
    letter-spacing: -1.44px;
  }
  #capabilities-section .col-2 {
    display: none;
  }
  #capabilities-section .short-content {
    width: 100%;
  }
  #capabilities-section .col-3 {
    width: 100%;
  }
}

#capabilities-secondary-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  position: relative;
  z-index: 2;
  background: var(--purple-darker, #04010B);
}
#capabilities-secondary-section > :last-child {
  border-bottom: 1px solid transparent;
}
#capabilities-secondary-section .capabilities-secondary-line {
  display: flex;
  height: 160px;
  align-items: flex-start;
  align-self: stretch;
  border-top: 1px solid transparent;
  border-image: linear-gradient(to right, rgba(248, 244, 251, 0) 0%, rgba(248, 244, 251, 0.2) 20%, rgba(248, 244, 251, 0.2) 80%, rgba(248, 244, 251, 0) 100%);
  border-image-slice: 1;
}
#capabilities-secondary-section .capabilities-secondary-doublecontainer .first-card {
  padding: 50px 30px 50px 90px;
}
#capabilities-secondary-section .capabilities-secondary-doublecontainer .last-card {
  padding: 50px 90px 50px 30px;
  border-right: 0;
}
#capabilities-secondary-section .capabilities-secondary-doublecontainer {
  display: flex;
  width: 50%;
  height: 160px;
  align-items: flex-start;
  align-self: stretch;
}
#capabilities-secondary-section .capabilities-secondary-card {
  display: flex;
  padding: 50px 30px;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
  flex: 1 0 0;
  align-self: stretch;
  position: relative;
  overflow: hidden;
  border-right: 1px solid transparent;
  border-image: linear-gradient(to bottom, rgba(248, 244, 251, 0) 0%, rgba(248, 244, 251, 0.2) 20%, rgba(248, 244, 251, 0.2) 80%, rgba(248, 244, 251, 0) 100%);
  border-image-slice: 1;
  /* Pseudo-élément pour le spotlight */
}
#capabilities-secondary-section .capabilities-secondary-card h2 {
  font-size: 26px;
  letter-spacing: -1.04px;
}
#capabilities-secondary-section .capabilities-secondary-card::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  bottom: -100px;
  right: -100px;
  background: radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.4), transparent 60%);
  filter: blur(80px);
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
#capabilities-secondary-section .capabilities-secondary-card:hover::after {
  opacity: 1;
  transform: scale(1.1);
}
#capabilities-secondary-section .capabilities-secondary-card.third-card::after {
  left: -100px;
  background: radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.4), transparent 60%);
  filter: blur(80px);
}
#capabilities-secondary-section .capabilities-secondary-card.last-card::after {
  left: -100px;
  background: radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.4), transparent 60%);
  filter: blur(80px);
}
@media (max-width: 1279px) {
  #capabilities-secondary-section .capabilities-secondary-card.second-card::after {
    left: -100px;
    background: radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.4), transparent 60%);
    filter: blur(80px);
  }
  #capabilities-secondary-section .capabilities-secondary-card.third-card::after {
    left: auto;
    right: -100px;
    background: radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.4), transparent 60%);
    filter: blur(80px);
  }
}
@media (max-width: 1024px) {
  #capabilities-secondary-section .capabilities-secondary-line {
    flex-direction: column;
    height: auto;
  }
  #capabilities-secondary-section .capabilities-secondary-line > :first-child {
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(to right, rgba(248, 244, 251, 0) 0%, rgba(248, 244, 251, 0.2) 20%, rgba(248, 244, 251, 0.2) 80%, rgba(248, 244, 251, 0) 100%);
    border-image-slice: 1;
  }
  #capabilities-secondary-section .capabilities-secondary-doublecontainer {
    width: 100%;
    height: 140px;
  }
  #capabilities-secondary-section .capabilities-secondary-doublecontainer .first-card {
    padding: 40px 32px;
  }
  #capabilities-secondary-section .capabilities-secondary-doublecontainer .third-card {
    padding: 40px 32px;
  }
  #capabilities-secondary-section .capabilities-secondary-doublecontainer .second-card {
    padding: 40px 32px;
    border-right: 0;
  }
  #capabilities-secondary-section .capabilities-secondary-doublecontainer .last-card {
    padding: 40px 32px;
  }
  #capabilities-secondary-section .capabilities-secondary-card {
    width: 50%;
    max-width: 50%;
    padding: 40px 16px;
  }
}
@media (max-width: 767px) {
  #capabilities-secondary-section .capabilities-secondary-line {
    flex-direction: column;
    height: auto;
  }
  #capabilities-secondary-section .capabilities-secondary-line > :first-child {
    border-bottom: 1px solid rgba(248, 244, 251, 0.1);
  }
  #capabilities-secondary-section .capabilities-secondary-doublecontainer {
    width: 100%;
    height: 140px;
  }
  #capabilities-secondary-section .capabilities-secondary-doublecontainer .first-card {
    padding: 40px 16px;
  }
  #capabilities-secondary-section .capabilities-secondary-doublecontainer .third-card {
    padding: 40px 16px;
  }
  #capabilities-secondary-section .capabilities-secondary-doublecontainer .second-card {
    padding: 40px 16px;
    border-right: 0;
  }
  #capabilities-secondary-section .capabilities-secondary-doublecontainer .last-card {
    padding: 40px 16px;
  }
  #capabilities-secondary-section .capabilities-secondary-card {
    width: 50%;
    max-width: 50%;
    padding: 40px 16px;
  }
}

#projects-section {
  display: flex;
  padding: 100px 30px;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  align-self: stretch;
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(250, 213, 255, 0);
  border-bottom: 1px solid rgba(250, 213, 255, 0);
  background: #04010B;
}
#projects-section .latest-work {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
}
#projects-section .latest-work a:hover {
  cursor: default;
}
#projects-section .latest-work a:hover .bg-blur, #projects-section .latest-work a:hover .bg-blur-dark, #projects-section .latest-work a:hover .bg-blur-skin {
  opacity: 1;
  transition: opacity 0.8s ease;
}
#projects-section .project-card-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  position: relative;
}
#projects-section .project-card-container-50 {
  width: 100%;
  position: relative;
}
#projects-section .project-double-card {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 10px;
}
#projects-section .project-card {
  padding: 30px 30px 70px 30px;
  display: flex;
  width: 100%;
  max-height: 680px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  z-index: 1;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}
#projects-section .project-card .content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
#projects-section .project-card .jobtype {
  color: #F8F4FB;
  font-family: "TWK-Regular", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 15.6px */
  letter-spacing: 0.24px;
  text-transform: uppercase;
  z-index: 1;
  mix-blend-mode: exclusion;
}
#projects-section .project-card .project-name {
  font-family: "TWK-Medium", sans-serif;
  color: #F8F4FB;
  font-size: 100px;
  font-weight: 500;
  letter-spacing: -6px;
  z-index: 1;
  mix-blend-mode: exclusion;
}
#projects-section .project-card-big {
  aspect-ratio: 4/2.03;
  background: url(../medias/img/projects/cb-first-original.webp) lightgray 50%/cover no-repeat;
  /*.content {
    position: relative;
    z-index: 1;
  }*/
}
#projects-section .project-card-big::before {
  content: "";
  position: absolute;
  inset: 0;
  aspect-ratio: 4/2.03;
  background: url(../medias/img/projects/cb-first-original.webp) lightgray 50%/cover no-repeat;
  z-index: 0;
  width: 100%;
  max-height: 680px;
  opacity: 0.8;
  transition: filter 0.5s ease, opacity 0.5s ease;
  filter: blur(0px);
}
#projects-section .project-card-big:hover::before {
  filter: blur(2px);
}
#projects-section .project-card-big .coming-soon {
  position: relative;
  z-index: 1;
}
#projects-section .project-card-left {
  aspect-ratio: 1/1;
  flex: 1 0 0;
  background: url(../medias/img/projects/ge-first-original.webp) lightgray 50%/cover no-repeat;
  /*.content {
    position: relative;
    z-index: 1;
  }*/
}
#projects-section .project-card-left::before {
  content: "";
  position: absolute;
  inset: 0;
  aspect-ratio: 1/1;
  background: url(../medias/img/projects/ge-first-original.webp) lightgray 50%/cover no-repeat;
  z-index: 0;
  width: 100%;
  max-height: 680px;
  opacity: 0.8;
  transition: filter 0.5s ease, opacity 0.5s ease;
  filter: blur(0px);
}
#projects-section .project-card-left:hover::before {
  filter: blur(2px);
}
#projects-section .project-card-left .coming-soon {
  position: relative;
  z-index: 1;
}
#projects-section .project-card-right {
  aspect-ratio: 1/1;
  flex: 1 0 0;
  background: url(../medias/img/projects/tvm-first-original.webp) lightgray 50%/cover no-repeat;
  /*.content {
    position: relative;
    z-index: 1;
  }*/
}
#projects-section .project-card-right::before {
  content: "";
  position: absolute;
  inset: 0;
  aspect-ratio: 1/1;
  background: url(../medias/img/projects/tvm-first-original.webp) lightgray 50%/cover no-repeat;
  z-index: 0;
  width: 100%;
  max-height: 680px;
  opacity: 0.8;
  transition: filter 0.5s ease, opacity 0.5s ease;
  filter: blur(0px);
}
#projects-section .project-card-right:hover::before {
  filter: blur(2px);
}
#projects-section .project-card-right .coming-soon {
  position: relative;
  z-index: 1;
}
#projects-section .bg-blur {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(4, 1, 11, 0) 0%, rgba(4, 1, 11, 0) 60%, rgba(4, 1, 11, 0.6) 100%);
}
#projects-section .bg-blur-dark {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(38, 38, 38, 0) 0%, rgba(38, 38, 38, 0) 60%, rgba(38, 38, 38, 0.6) 100%);
  backdrop-filter: blur(2px);
}
#projects-section .bg-blur-skin {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(224, 209, 198, 0) 0%, rgba(224, 209, 198, 0) 60%, rgba(224, 209, 198, 0.6) 100%);
  backdrop-filter: blur(2px);
}
#projects-section .grad-mask-cb {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(246, 243, 250, 0) 0%, rgba(246, 243, 250, 0.7) 100%);
}
#projects-section .grad-mask-ge {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(38, 38, 38, 0) 0%, #262626 100%);
}
#projects-section .grad-mask-tvm {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(240, 237, 234, 0) 0%, rgba(240, 237, 234, 0.3) 100%);
}
@media (max-width: 1279px) {
  #projects-section {
    padding: 80px 30px;
  }
  #projects-section .project-card .project-name {
    font-size: 80px;
    letter-spacing: -4.8px;
  }
}
@media (max-width: 1024px) {
  #projects-section .project-card-big {
    aspect-ratio: 1/1.22;
  }
  #projects-section .project-card-big::before {
    aspect-ratio: 1/1.22;
  }
  #projects-section .project-double-card {
    flex-direction: column;
  }
}
@media (max-width: 767px) {
  #projects-section {
    padding: 60px 16px;
  }
  #projects-section .project-card {
    padding: 20px 20px 50px 16px;
  }
  #projects-section .project-card .project-name {
    font-size: 60px;
    letter-spacing: -3.6px;
  }
  #projects-section .project-card-big {
    aspect-ratio: 1/1.22;
  }
  #projects-section .project-card-big::before {
    aspect-ratio: 1/1.22;
  }
  #projects-section .project-double-card {
    flex-direction: column;
  }
}

#collab-section {
  display: flex;
  padding: 100px 30px;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  align-self: stretch;
  position: relative;
  z-index: 2;
  background-color: #5012CF;
  background-image: url(../medias/img/bg-hero-purpleflow.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: overlay;
}
#collab-section .clients-columns {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
}
#collab-section .clients-card {
  display: flex;
  padding: 50px 60px 50px 30px;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--white, rgba(255, 255, 255, 0.85)) 0%, var(--purple-lighter, rgba(248, 244, 251, 0.75)) 100%);
  backdrop-filter: blur(10px);
}
#collab-section .clients-card h3 {
  margin: 0;
}
#collab-section .clients-card .target-intro {
  color: #5012CF;
  /*font-family: $title-font-regular;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: 0.24px;
  text-transform: uppercase;*/
}
#collab-section .clients-card .what-list {
  display: flex;
  padding: 15px 0px 25px 0px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  flex: 1 0 0;
}
#collab-section .clients-card .what-list p {
  /*font-family: $main-font-medium;*/
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 18px;
  font-weight: 500;
  line-height: 130%; /* 23.4px */
  letter-spacing: -0.8px;
}
@media (max-width: 1279px) {
  #collab-section {
    padding: 80px 30px;
  }
}
@media (min-width: 767px) and (max-width: 1024px) {
  #collab-section .clients-card {
    padding: 40px 16px 40px 16px;
    align-items: center;
    gap: 30px;
  }
  #collab-section .clients-card .what-list {
    align-items: center;
  }
  #collab-section .what-list p {
    text-align: center;
  }
}
@media (max-width: 1024px) {
  #collab-section .clients-columns {
    flex-direction: column;
  }
}
@media (max-width: 767px) {
  #collab-section {
    display: flex;
    padding: 60px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 50px;
    align-self: stretch;
  }
  #collab-section .clients-columns {
    gap: 10px;
    flex-direction: column;
  }
  #collab-section .clients-card {
    padding: 40px 20px;
    gap: 20px;
  }
}

#feed-section {
  display: flex;
  width: 100%;
  padding: 100px 0px 80px 0px;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  align-self: stretch;
  overflow: hidden;
  position: relative;
  z-index: 2;
  background: #04010B;
}
#feed-section .title-inline {
  padding: 0px 30px;
}
#feed-section .legend {
  align-self: stretch;
  color: #F8F4FB;
  font-size: 14px;
  font-weight: 400;
  line-height: 130%; /* 18.2px */
  mix-blend-mode: exclusion;
}
#feed-section .number {
  align-self: stretch;
  color: #1ED75F;
  text-align: center;
  font-family: "TWK-Medium", sans-serif;
  font-size: 52px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 52px */
  letter-spacing: -2.08px;
  white-space: normal;
  word-break: break-word;
}
#feed-section .yellow {
  color: #F2FF43;
}
#feed-section .orange {
  color: #FF7439;
}
#feed-section .details {
  align-self: stretch;
  color: #F8F4FB;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 130%; /* 20.8px */
  white-space: normal;
  word-break: break-word;
}
#feed-section .bg-noise {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../medias/img/gif/noise.gif") repeat;
  background-size: 128px 128px;
  mix-blend-mode: overlay;
  opacity: 0.5;
  pointer-events: none;
  z-index: 2;
}
#feed-section .bg-strange {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../medias/img/gif/strange.gif") repeat;
  background-size: 128px 128px;
  mix-blend-mode: overlay;
  opacity: 0.5;
  pointer-events: none;
  z-index: 2;
}
#feed-section .feed-wrapper {
  position: relative;
  overflow: hidden;
}
#feed-section .feed-track {
  display: flex;
  height: 610px;
  flex-wrap: nowrap;
  will-change: transform;
  gap: 10px;
}
#feed-section .card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  border-radius: 10px;
  background: #1F1D23;
}
#feed-section .card-1x1 {
  width: 500px;
  padding: 50px 60px 50px 30px;
  align-items: flex-start;
  gap: 40px;
  align-self: stretch;
  aspect-ratio: 50/61;
}
#feed-section .card-stack {
  display: flex;
  width: 300px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
}
#feed-section .card-1x2 {
  height: 300px;
  padding: 14px;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 40px;
  align-self: stretch;
  aspect-ratio: 1/1;
}
#feed-section .gif-card-01 {
  background: url(../medias/img/gif/clairobscur.gif) lightgray -203.379px -52.055px/235.586% 134.703% no-repeat;
}
#feed-section .gif-card-02 {
  background: url(../medias/img/gif/NESLegoGIFbyalexibexi.gif) lightgray -203.379px -52.055px/235.586% 134.703% no-repeat;
}
#feed-section .gif-card-03 {
  background: url(../medias/img/gif/deathstrand.gif) lightgray -203.379px -52.055px/235.586% 134.703% no-repeat;
}
#feed-section .details-card {
  padding: 40px 30px;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
#feed-section .card-1w2h {
  width: 300px;
  padding: 50px 30px 50px 30px;
  justify-content: center;
  align-items: center;
  gap: 40px;
  align-self: stretch;
  aspect-ratio: 30/61;
  background: url(../medias/img/noisy-gradient-purpletogreen.webp) lightgray 50%/cover no-repeat;
}
#feed-section .deco-rectangle {
  width: 40px;
  height: 240px;
  transform: rotate(30deg);
  background: #FF7439;
  mix-blend-mode: color-burn;
}
#feed-section .quote-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 0 0;
  align-self: stretch;
  z-index: 1;
}
#feed-section .quote-container .quote {
  align-self: stretch;
  font-family: "TWK-Medium", sans-serif;
  font-size: 52px;
  font-weight: 500;
  line-height: 100%; /* 52px */
  letter-spacing: -2.08px;
  white-space: normal;
  word-break: break-word;
}
#feed-section .quote-container .vertGradBluToPrp {
  background: linear-gradient(180deg, #3553E9 0%, #7132F5 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#feed-section .quote-container .vertGradGrnToPrpLt {
  background: linear-gradient(180deg, #1ED75F 0%, #FAD5FF 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#feed-section .quote-container .vertGradPrpToPrpLt {
  background: linear-gradient(180deg, #7132F5 0%, #FAD5FF 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#feed-section .quote-container .vertGradGrnToPrp {
  background: linear-gradient(180deg, #1ED75F 0%, #7132F5 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#feed-section .quote-container .vertGradPrpTrToGrn {
  background: linear-gradient(180deg, #9E53F8 0%, #1ED75F 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#feed-section .theysaidit-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  z-index: 2;
}
#feed-section .theysaidit-picture {
  width: 40px;
  height: 40px;
  aspect-ratio: 1/1;
  border-radius: 20px;
}
#feed-section .jcolson {
  background: url(../medias/img/profil/jcolson.jpeg) lightgray 50%/cover no-repeat;
}
#feed-section .mclavel {
  background: url(../medias/img/profil/mclavel.jpeg) lightgray 50%/cover no-repeat;
}
#feed-section .shadjeras {
  background: url(../medias/img/profil/shadjeras.jpeg) lightgray 50%/cover no-repeat;
}
#feed-section .shulard {
  background: url(../medias/img/profil/shulard.jpeg) lightgray 50%/cover no-repeat;
}
#feed-section .cmartourey {
  background: url(../medias/img/profil/cmartourey.jpg) lightgray 50%/cover no-repeat;
}
#feed-section .alaroche {
  background: url(../medias/img/profil/alaroche.jpeg) lightgray 50%/cover no-repeat;
}
#feed-section .lferreira {
  background: url(../medias/img/profil/profil-particles-man.webp) lightgray 50%/cover no-repeat;
}
#feed-section .theysaidit-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
#feed-section .theysaidit-content .name {
  color: #F8F4FB;
  /*font-family: $main-font-medium;*/
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-weight: 500;
  line-height: 120%; /* 16.8px */
}
#feed-section .theysaidit-content .role {
  color: #F8F4FB;
  font-size: 13px;
  font-weight: 400;
  line-height: 120%; /* 16.8px */
}
@media (max-width: 1279px) {
  #feed-section {
    padding: 80px 0px;
  }
}
footer {
  display: flex;
  padding-top: 160px;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  position: relative;
  z-index: 2;
  background: #04010B;
}
footer .main-section {
  display: flex;
  padding: 0px 30px;
  align-items: flex-start;
  gap: 30px;
  align-self: stretch;
}
footer .left-part-66 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex: 1 0 0;
}
footer .contact-push {
  display: flex;
  padding: 30px 20%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  align-self: stretch;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}
footer .contact-push p {
  align-self: stretch;
  color: #F8F4FB;
  text-align: center;
  font-family: "TWK-Medium", sans-serif;
  font-size: 26px;
  font-weight: 500;
  line-height: 100%; /* 26px */
  letter-spacing: -1.04px;
}
footer .services-container {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  align-self: stretch;
}
footer .services-container .col-left {
  display: flex;
  padding: 60px 0px 50px 0px;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  flex: 1 0 0;
  align-self: stretch;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
footer .services-container .col-right {
  display: flex;
  padding: 60px 0px 50px 0px;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  flex: 1 0 0;
  align-self: stretch;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
footer .services-container h3 {
  color: #F8F4FB;
  font-size: 26px;
  letter-spacing: -1.04px;
}
footer .services-container .what-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
footer .services-container .what-list p {
  color: #E4E1FA;
  line-height: 130%; /* 20.8px */
}
footer .right-part-33 {
  display: flex;
  max-width: 440px;
  padding-top: 30px;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  flex: 1 0 0;
  align-self: stretch;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
footer .apropos-container {
  display: flex;
  padding-left: 60px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
}
footer .apropos-container p {
  align-self: stretch;
  color: #E4E1FA;
  font-weight: 400;
  line-height: 130%; /* 20.8px */
}
footer .ghost {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  flex: 1 0 0;
  align-self: stretch;
}
footer .ghost img {
  width: 180px;
  height: 240px;
}
footer .bottom-section {
  display: flex;
  height: 80px;
  padding: 10px 30px;
  align-items: center;
  gap: 30px;
  align-self: stretch;
}
footer .left-container-66 {
  display: flex;
  align-items: center;
  gap: 60px;
  flex: 1 0 0;
}
footer .copyright {
  display: flex;
  align-items: center;
  flex: 1 0 0;
}
footer .copyright > p {
  flex: 1 0 0;
  color: #F8F4FB;
  font-weight: 400;
  line-height: 100%; /* 16px */
  opacity: 0.6;
}
footer .little-menu {
  display: flex;
  height: 17px;
  align-items: center;
  gap: 50px;
  flex: 1 0 0;
}
footer .little-menu a {
  color: #F8F4FB;
  /*font-family: $main-font-regular;*/
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  font-weight: 400;
  line-height: 100%; /* 16px */
  opacity: 0.6;
  transition: opacity 0.8s ease;
}
footer .little-menu a.inactive {
  opacity: 0.3;
}
footer .little-menu a:hover {
  opacity: 1;
  transition: opacity 0.8s ease;
}
footer .right-container-33 {
  display: flex;
  max-width: 440px;
  justify-content: flex-end;
  align-items: center;
  flex: 1 0 0;
}
footer .right-container-33 .linkedin, footer .right-container-33 .mail {
  color: #F8F4FB;
  display: flex;
  height: 40px;
  padding-left: 30px;
  align-items: center;
}
footer .right-container-33 .linkedin {
  padding: 0px 30px;
  border-right: 1px solid rgba(248, 244, 251, 0.12);
}
footer .right-container-33 .mail {
  padding-left: 30px;
}
footer .right-container-33 .burger-button {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  background-color: white;
}
@media (max-width: 1279px) {
  footer .little-menu {
    gap: 25px;
  }
}
@media (max-width: 1024px) {
  footer {
    padding-top: 80px;
    /*.mobile-menu {
      display: flex;
      align-self: stretch;
      width: 100%;
      justify-content: center;
    }*/
  }
  footer .main-section {
    flex-direction: column;
  }
  footer .left-part-66 {
    align-self: stretch;
  }
  footer .services-container {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
  footer .services-container .col-left {
    border-bottom: none;
  }
  footer .services-container .col-right {
    border-bottom: none;
  }
  footer .right-part-33 {
    max-width: 100%;
    display: none;
  }
  footer .bottom-section {
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 30px 30px 30px;
  }
  footer .right-container-33 {
    align-self: stretch;
  }
  footer .left-container-66 {
    align-self: stretch;
    flex-direction: column;
    padding: 30px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
  footer .copyright {
    align-self: stretch;
  }
  footer .right-container-33 {
    max-width: 100%;
  }
  footer .right-container-33 .linkedin {
    width: 100%;
    height: 60px;
    align-self: stretch;
    justify-content: center;
  }
  footer .right-container-33 .mail {
    width: 100%;
    height: 60px;
    align-self: stretch;
    justify-content: center;
  }
  footer .little-menu {
    display: none;
  }
}
@media (max-width: 767px) {
  footer {
    overflow: hidden;
    padding-top: 120px;
    /*.mobile-menu {
      display: flex;
      align-self: stretch;
      width: 100%;
      justify-content: center;
    }*/
  }
  footer .main-section {
    padding: 0px 16px;
    flex-direction: column;
    gap: 0px;
  }
  footer .contact-push {
    padding: 30px 20px;
  }
  footer .services-container {
    flex-direction: column;
    gap: 0px;
  }
  footer .services-container .col-left {
    padding: 60px 0 40px 0;
  }
  footer .services-container .col-right {
    padding: 40px 0;
    border-bottom: none;
  }
  footer .right-part-33 {
    padding: 30px 0px;
    gap: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
  footer .bottom-section {
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    padding: 0 16px 30px 16px;
  }
  footer .left-container-66 {
    align-self: stretch;
    flex-direction: column;
  }
  footer .copyright {
    align-self: stretch;
  }
  footer .right-container-33 {
    align-self: stretch;
  }
  footer .little-menu {
    display: none;
  }
  footer .right-container-33 .linkedin {
    height: 60px;
    align-self: stretch;
  }
  footer .right-container-33 .mail {
    height: 60px;
    padding: 0px 30px;
    align-self: stretch;
  }
}

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