/* Nerosyn Agency - Styles CSS */

/* ========================================
   GLOBAL RESET
   ======================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* ========================================
   NAVIGATION BAR STYLES
   ======================================== */
.nav-bar,
.nav-bar * {
  box-sizing: border-box;
}
.nav-bar {
  background: rgba(255, 255, 255, 0.2);
  padding: 15px 0px 15px 0px;
  display: flex;
  flex-direction: row;
  gap: 250px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  height: 106px;
  position: relative;
  overflow: hidden;
}
.group-9 {
  flex-shrink: 0;
  width: auto;
  height: 40px;
  position: relative;
  overflow: visible;
}
.menu {
  display: flex;
  flex-direction: row;
  gap: 7px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 463px;
  position: relative;
}
.frame-1707480427 {
  background: #0b0b0b;
  border-radius: 18px;
  flex-shrink: 0;
  width: 91px;
  height: 32px;
  position: relative;
  overflow: hidden;
}
.home {
  color: #ffffff;
  text-align: left;
  font-family: "Outfit-Medium", sans-serif;
  font-size: 16px;
  font-weight: 500;
  position: absolute;
  left: 24px;
  top: 10px;
}
.pricing {
  padding: 4.58px 3.67px 4.58px 7.33px;
  display: flex;
  flex-direction: row;
  gap: 3.67px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.webdesign {
  color: #000000;
  text-align: left;
  font-family: "Outfit-Medium", sans-serif;
  font-size: 16px;
  font-weight: 500;
  position: relative;
}
.seo {
  padding: 4.58px 3.67px 4.58px 7.33px;
  display: flex;
  flex-direction: row;
  gap: 3.67px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.geo {
  color: #000000;
  text-align: left;
  font-family: "Outfit-Medium", sans-serif;
  font-size: 16px;
  font-weight: 500;
  position: relative;
}
.automatisations {
  padding: 4.58px 3.67px 4.58px 7.33px;
  display: flex;
  flex-direction: row;
  gap: 3.67px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.automations {
  color: #000000;
  text-align: left;
  font-family: "Outfit-Medium", sans-serif;
  font-size: 16px;
  font-weight: 500;
  position: relative;
}
.audit {
  padding: 10.08px 8.25px 10.08px 11px;
  display: flex;
  flex-direction: row;
  gap: 3.67px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 85px;
  position: relative;
  overflow: hidden;
}
.portfolio {
  color: #000000;
  text-align: left;
  font-family: "Outfit-Medium", sans-serif;
  font-size: 16px;
  font-weight: 500;
  position: relative;
}
.contact-button {
  background: #0b0b0b;
  border-radius: 37px;
  padding: 5.5px 28.42px 5.5px 28.42px;
  display: flex;
  flex-direction: row;
  gap: 9.17px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 106px;
  height: 31px;
  position: relative;
}
.contact {
  color: #ffffff;
  text-align: right;
  font-family: "Outfit-SemiBold", sans-serif;
  font-size: 16.500041961669922px;
  line-height: 158.7%;
  letter-spacing: -0.03em;
  font-weight: 600;
  position: relative;
}
/* FIN NAVIGATION BAR STYLES */

/* ========================================
   HERO SECTION STYLES
   ======================================== */
.hero-section,
.hero-section * {
  box-sizing: border-box;
}
.hero-section {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 85px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  height: 1419px;
  position: relative;
}
.frame-1707480507 {
  padding: 50px 0px 45px 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 1436px;
  height: 923px;
  position: relative;
}
.frame-1707480496 {
  padding: 8.88px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 851.27px;
  position: relative;
  z-index: 10;
}
.construit-pour-commencer-pens-pour-voluer-design-technologie-ia-impact {
  text-align: center;
  position: relative;
  width: 852px;
}
.construit-pour-commencer-pens-pour-voluer-design-technologie-ia-impact-span {
  color: var(--big-texts-color, #1f1d1d);
  font-family: "Outfit-ExtraBold", sans-serif;
  font-size: 48px;
  line-height: 105%;
  letter-spacing: -0.03em;
  font-weight: 800;
  text-transform: uppercase;
}
.construit-pour-commencer-pens-pour-voluer-design-technologie-ia-impact-span2 {
  background: var(
    --brand-color,
    linear-gradient(89.14deg, rgba(255, 89, 0, 1) 0%, rgba(255, 0, 229, 1) 100%)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Outfit-Regular", sans-serif;
  font-size: 36px;
  line-height: 105%;
  letter-spacing: -0.03em;
  font-weight: 400;
}
.frame-1707480522 {
  margin: -89px 0 0 0;
  border-radius: 37.92px;
  padding: 55px 337px 55px 337px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  flex-shrink: 0;
  width: 1393px;
  height: 793px;
  position: relative;
  overflow: visible;
}
.frame-1707480638 {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
  overflow: visible;
}
.frame-1707480634 {
  flex-shrink: 0;
  width: 357px;
  height: 727px;
  position: relative;
  overflow: visible;
}
.frame-1707480544 {
  border-radius: 14px;
  width: 366px;
  height: 489px;
  position: absolute;
  left: 0px;
  top: 0px;
  transform-origin: center;
  transform: rotateZ(-17deg) skewX(1deg) skewY(17deg);
  overflow: hidden;
}
.intro {
  background: #ffffff;
  border-radius: 5px;
  width: 341.89px;
  height: 192.31px;
  position: absolute;
  left: 12px;
  top: 31px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.07);
  overflow: hidden;
}
.grid {
  width: 130.36%;
  height: 100%;
  position: absolute;
  right: -15.16%;
  left: -15.21%;
  bottom: 0%;
  top: 0%;
  overflow: visible;
  mix-blend-mode: multiply;
}
.frame-22 {
  display: flex;
  flex-direction: column;
  gap: 25.59px;
  align-items: flex-start;
  justify-content: center;
  width: 285.62px;
  position: absolute;
  left: 18.55px;
  top: 21.32px;
}
.brand-introduction {
  color: #000000;
  text-align: left;
  font-family: "Outfit-SemiBold", sans-serif;
  font-size: 8.584362983703613px;
  line-height: 7.36px;
  font-weight: 600;
  position: relative;
  align-self: stretch;
  height: 18.09px;
}
.a-community-driven-memecoin-that-goes-beyond-the-ordinary-with-a-100-apy-on-staking-we-reward-our-members-for-their-loyalty-our-curated-community-ensures-a-genuine-and-spam-free-environment-fostering-strong-connections-and-collaboration {
  color: var(--big-texts-color, #1f1d1d);
  text-align: left;
  font-family: "Outfit-Regular", sans-serif;
  font-size: 11.393074035644531px;
  line-height: 12.82px;
  letter-spacing: -0.03em;
  font-weight: 400;
  position: relative;
  align-self: stretch;
}
.gradients {
  background: #222222;
  border-radius: 3.56px;
  width: 167.11px;
  height: 94px;
  position: absolute;
  left: 186.89px;
  top: 229px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.left-side-text {
  position: absolute;
  inset: 0;
}
.brand-gradient {
  text-align: left;
  font-family: "Outfit-SemiBold", sans-serif;
  font-size: 4.195886135101318px;
  line-height: 3.6px;
  font-weight: 600;
  position: absolute;
  right: 77.67%;
  left: 3.85%;
  width: 18.47%;
  bottom: 83%;
  top: 7.59%;
  height: 9.41%;
}
.brand-gradient-span {
  color: var(--04-grayscale-color, #9da2b3);
}
.brand-gradient-span2 {
  color: #ffffff;
}
._01-rectangle {
  background: var(
    --brand-color,
    linear-gradient(89.14deg, rgba(255, 89, 0, 1) 0%, rgba(255, 0, 229, 1) 100%)
  );
  border-radius: 1.91px;
  border-style: solid;
  border-color: rgba(157, 159, 169, 0.2);
  border-width: 0.17px;
  width: 93.07%;
  height: 36.3%;
  position: absolute;
  right: 3.07%;
  left: 3.85%;
  bottom: 43.33%;
  top: 20.37%;
}
.frame-20 {
  display: flex;
  flex-direction: column;
  gap: 1.35px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 23.97px;
  height: 27.51px;
  position: absolute;
  left: 121.21px;
  top: 22.41px;
}
.primary-color-03 {
  color: #ffffff;
  text-align: left;
  font-family: "Outfit-SemiBold", sans-serif;
  font-size: 1.3925926685333252px;
  line-height: 1.39px;
  font-weight: 600;
  position: relative;
  align-self: stretch;
  height: 1.57px;
}
.midnight {
  color: #ffffff;
  text-align: left;
  font-family: "Outfit-SemiBold", sans-serif;
  font-size: 4.689905166625977px;
  line-height: 4.18px;
  font-weight: 600;
  position: relative;
  align-self: stretch;
  height: 4.44px;
}
.hex-14141-a-rgb-20-20-26-cmyk-76-70-62-82 {
  color: #ffffff;
  text-align: left;
  font-family: "Outfit-SemiBold", sans-serif;
  font-size: 1.3925926685333252px;
  line-height: 1.39px;
  font-weight: 600;
  position: relative;
  align-self: stretch;
  height: 55.18px;
}
._05-rectangle {
  background: var(
    --brand-color-2,
    linear-gradient(
      252.66deg,
      rgba(255, 204, 0, 1) 0%,
      rgba(255, 89, 0, 1) 100%
    )
  );
  border-radius: 1.91px;
  border-style: solid;
  border-color: rgba(157, 159, 169, 0.2);
  border-width: 0.17px;
  width: 93.07%;
  height: 36.3%;
  position: absolute;
  right: 3.07%;
  left: 3.85%;
  bottom: 5.65%;
  top: 58.06%;
}
._05-secondary-color {
  display: flex;
  flex-direction: column;
  gap: 1.77px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 35.85px;
  position: absolute;
  left: 121.21px;
  top: 58.88px;
}
.secondary-color-05 {
  color: #ffffff;
  text-align: left;
  font-family: "Manrope-SemiBold", sans-serif;
  font-size: 1.3925926685333252px;
  line-height: 1.39px;
  font-weight: 600;
  position: relative;
  align-self: stretch;
  height: 1.56px;
}
.lightning-yellow {
  color: #ffffff;
  text-align: left;
  font-family: "Outfit-SemiBold", sans-serif;
  font-size: 4.874074935913086px;
  line-height: 4.18px;
  font-weight: 600;
  position: relative;
  align-self: stretch;
}
.hex-ffc-919-rgb-255-201-25-cmyk-0-21-90-0 {
  color: #ffffff;
  text-align: left;
  font-family: "Manrope-SemiBold", sans-serif;
  font-size: 1.3925926685333252px;
  line-height: 1.39px;
  font-weight: 600;
  position: relative;
  width: 23.94px;
  height: 16.1px;
}
.frame-19 {
  display: flex;
  flex-direction: column;
  gap: 1.25px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 28.14px;
  height: 26.99px;
  position: absolute;
  left: 12.19px;
  top: 22.82px;
}
.primary-color-02 {
  color: #ffffff;
  text-align: left;
  font-family: "Outfit-SemiBold", sans-serif;
  font-size: 1.3925926685333252px;
  line-height: 1.39px;
  font-weight: 600;
  position: relative;
  align-self: stretch;
  height: 1.57px;
}
.yellow {
  color: #ffffff;
  text-align: left;
  font-family: "Outfit-SemiBold", sans-serif;
  font-size: 4.689905166625977px;
  line-height: 4.18px;
  font-weight: 600;
  position: relative;
  align-self: stretch;
  height: 4.48px;
}
.hex-ffc-919-rgb-255-201-25-cmyk-72-76-0-0 {
  color: #ffffff;
  text-align: left;
  font-family: "Outfit-SemiBold", sans-serif;
  font-size: 1.3925926685333252px;
  line-height: 1.39px;
  font-weight: 600;
  position: relative;
  width: 23.94px;
  height: 55.18px;
}
.frame-21 {
  display: flex;
  flex-direction: column;
  gap: 1.25px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 28.14px;
  height: 26.99px;
  position: absolute;
  left: 12.19px;
  top: 58.05px;
}
.logo-dimensions {
  border-radius: 3.15px;
  width: 166.95px;
  height: 93.77px;
  position: absolute;
  left: 12px;
  top: 229px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
._01-rectangle2 {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0%;
  left: 0%;
  bottom: 0%;
  top: 0%;
  overflow: visible;
}
.logo {
  width: 42.83px;
  height: 38.99px;
  position: absolute;
  left: 62.06px;
  top: 27.34px;
  overflow: visible;
}
.group-23 {
  opacity: 0.75;
  height: auto;
  position: absolute;
  left: -8.32px;
  top: -35.45px;
  overflow: visible;
}
._03-rectangle {
  height: auto;
  position: absolute;
  left: -12.11px;
  top: 345px;
  overflow: visible;
}
.frame-1707480633 {
  margin: 0 0 0 -99px;
  flex-shrink: 0;
  width: 416px;
  height: 502px;
  position: relative;
}
.frame-1707480543 {
  background: #f5f5f5;
  border-radius: 20px;
  width: 366px;
  height: 489px;
  position: absolute;
  left: 0px;
  top: 0px;
  transform-origin: center;
  transform: rotateZ(-5deg) skewX(6deg) skewY(5deg);
  overflow: hidden;
}
.frame-47267-1 {
  width: 421.62px;
  height: 747.63px;
  position: absolute;
  left: 48px;
  top: -118px;
  object-fit: cover;
}
.frame-1707480545 {
  width: 149px;
  height: 156.33px;
  position: absolute;
  left: 19px;
  top: -10px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.13);
  overflow: hidden;
  object-fit: cover;
}
.frame-1707480637 {
  margin: 0 0 0 -86px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.frame-1707480636 {
  flex-shrink: 0;
  width: 414.39px;
  height: 530.93px;
  position: relative;
}
.frame-1707480541 {
  background: #f5f5f5;
  border-radius: 20px;
  width: 366px;
  height: 489px;
  position: absolute;
  left: 51.11px;
  top: 0px;
  transform-origin: center;
  transform: rotateZ(-7deg) skewX(6deg) skewY(7deg);
  overflow: hidden;
}
.design {
  background: var(
    --brand-color,
    linear-gradient(89.14deg, rgba(255, 89, 0, 1) 0%, rgba(255, 0, 229, 1) 100%)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: left;
  font-family: "Inter-Bold", sans-serif;
  font-size: 82.58064270019531px;
  font-weight: 700;
  text-transform: uppercase;
  position: absolute;
  left: 21px;
  top: 114px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.browser-google-chrome-light {
  background: #ffffff;
  border-radius: 0.75px;
  width: 469.78px;
  height: 341px;
  position: absolute;
  left: 21px;
  top: 182px;
  box-shadow: 0px 1.5px 7.48px 0px rgba(0, 0, 0, 0.2),
    0px 2.99px 4.49px 0px rgba(0, 0, 0, 0.3),
    0px 0px 0.15px 0px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}
.body {
  width: 100%;
  position: absolute;
  right: 0%;
  left: 0%;
  bottom: 0px;
  top: 11.81078052520752px;
  object-fit: cover;
}
.core-google-chrome-toolbar-light {
  height: 11.81px;
  position: absolute;
  right: 0.3px;
  left: 0px;
  top: 0px;
}
.tabs-bar {
  position: absolute;
  inset: 0;
}
.background {
  background: linear-gradient(
    180deg,
    rgba(223, 225, 229, 1) 0.5952381063252687%,
    rgba(223, 225, 229, 1) 99.40476417541504%
  );
  width: 100%;
  height: 53.16%;
  position: absolute;
  right: 0%;
  left: 0%;
  bottom: 46.84%;
  top: 0%;
}
.new-tab-icon {
  width: 1.79px;
  height: 1.79px;
  position: absolute;
  left: 49.93px;
  top: 2.84px;
  overflow: visible;
}
.core-traffic-lights-catalina {
  width: 7.77px;
  height: 1.79px;
  position: absolute;
  left: 1.94px;
  top: 2.39px;
  overflow: visible;
}
.tab {
  width: 38.27px;
  height: 5.08px;
  position: static;
}
.tab2 {
  width: 38.27px;
  height: 5.08px;
  position: absolute;
  left: 10.47px;
  top: 1.2px;
  overflow: visible;
}
.tab-title {
  width: 26.46px;
  height: 2.99px;
  position: absolute;
  left: 17.04px;
  top: 2.24px;
  overflow: visible;
}
.tab-close-icon {
  width: 1.19px;
  height: 1.19px;
  position: absolute;
  left: 44.56px;
  top: 3.15px;
  overflow: visible;
}
.favicon-replace-me {
  width: 2.69px;
  height: 2.39px;
  position: absolute;
  left: 13.31px;
  top: 2.54px;
  overflow: hidden;
  object-fit: cover;
}
.toolbar {
  position: absolute;
  inset: 0;
}
.background2 {
  width: 469.49px;
  height: 5.53px;
  position: static;
}
.background3 {
  background: #ffffff;
  width: 100%;
  height: 46.84%;
  position: absolute;
  right: 0%;
  left: 0%;
  bottom: 0%;
  top: 53.16%;
}
.separator {
  background: #b6b6b6;
  width: 100%;
  height: 0.63%;
  position: absolute;
  right: 0%;
  left: 0%;
  bottom: 0%;
  top: 99.37%;
}
.actions {
  width: 11.59px;
  height: 1.94px;
  position: absolute;
  left: 2.32px;
  top: 8px;
  overflow: visible;
}
.address-bar {
  width: 459.87px;
  height: 4.19px;
  position: static;
}
.address-bar-background {
  background: #f1f3f4;
  border-radius: 2.09px;
  height: 4.19px;
  position: absolute;
  right: 7.06px;
  left: 16.146381583763286px;
  top: 6.88px;
}
.secure-icon {
  width: 1.2px;
  height: 1.57px;
  position: absolute;
  left: 18.24px;
  top: 8.22px;
  overflow: visible;
}
.url {
  text-align: left;
  font-family: "Outfit-Regular", sans-serif;
  font-size: 3px;
  font-weight: 400;
  position: absolute;
  right: -6.54px;
  left: 44.69541358947754px;
  top: 6.88px;
  height: 4.19px;
  transform-origin: 0 0;
  transform: rotate(0deg) scale(1, 1);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.url-span {
  color: #767676;
}
.url-span2 {
  color: #202124;
}
.menu-icon {
  width: 0.45px;
  height: 1.94px;
  position: absolute;
  right: 3.55px;
  top: 8.01px;
  overflow: visible;
}
.clean-shot-2020-02-25-at-15-02-1 {
  width: 10.17px;
  height: 7.77px;
  position: absolute;
  left: 11.06px;
  top: 0.3px;
}
.whenever-possible-the-brand-will-be-applied-in-its-main-version-with-its-respective-colors-in-case-it-is-not-possible-for-technical-reasons-the-positive-or-negative-version-will-be-used {
  color: #a3a3a3;
  text-align: left;
  font-family: "Inter-Regular", sans-serif;
  font-size: 13px;
  line-height: 16px;
  font-weight: 400;
  position: absolute;
  left: 26px;
  top: 53px;
  width: 297px;
  height: 103px;
}
.frame-1707480635 {
  margin: 0 0 0 -109px;
  flex-shrink: 0;
  width: 372px;
  height: 738px;
  position: relative;
}
.frame-17074805452 {
  background: #f5f5f5;
  border-radius: 20px;
  width: 366px;
  height: 489px;
  position: absolute;
  left: 25.59px;
  top: 119.16px;
  transform-origin: center;
  transform: rotateZ(-7deg) skewX(3deg) skewY(19deg);
  overflow: hidden;
}
.frame-1707480546 {
  background: #2d2d2d;
  border-radius: 16.94px;
  width: 235px;
  height: 142.64px;
  position: absolute;
  left: 25px;
  top: 23px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.area-charts {
  width: 267.24px;
  height: 96.73px;
  position: absolute;
  left: -32.24px;
  top: 52.47px;
  overflow: visible;
}
._4-543 {
  color: #ffffff;
  text-align: left;
  font-family: "Inter-ExtraBold", sans-serif;
  font-size: 18.170730590820312px;
  font-weight: 800;
  position: absolute;
  left: 15px;
  top: 22px;
  width: 108.12px;
  height: 20.9px;
}
.visitors {
  color: #cecece;
  text-align: left;
  font-family: "Inter-Regular", sans-serif;
  font-size: 10px;
  font-weight: 400;
  position: absolute;
  left: 15px;
  top: 9px;
  width: 99px;
  height: 20px;
}
.arrow-13 {
  width: 11.31px;
  height: 0px;
  position: absolute;
  left: 74px;
  top: 39px;
  transform: translate(-0.32px, -11.12px);
  overflow: visible;
}
.frame-1707480547 {
  background: #2d2d2d;
  border-radius: 17.7px;
  width: 245.48px;
  height: 149px;
  position: absolute;
  left: 183px;
  top: 196px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.area-charts2 {
  width: 279.16px;
  height: 101.05px;
  position: absolute;
  left: -33.68px;
  top: 54.8px;
}
.area-charts3 {
  width: 248.03px;
  height: 121.61px;
  position: absolute;
  left: -2.73px;
  top: 27.45px;
  overflow: visible;
}
._37-863-00 {
  color: #ffffff;
  text-align: left;
  font-family: "Inter-ExtraBold", sans-serif;
  font-size: 18.170730590820312px;
  font-weight: 800;
  position: absolute;
  left: 16.35px;
  top: 16.35px;
  width: 108.12px;
  height: 20.9px;
}
.arrow-132 {
  width: 11.31px;
  height: 0px;
  position: absolute;
  left: 126px;
  top: 34px;
  transform: translate(-0.32px, -11.12px);
  overflow: visible;
}
.donut {
  width: 120px;
  height: 120px;
  position: absolute;
  left: 25px;
  top: 212px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
  transform-origin: 0 0;
  transform: rotate(0deg) scale(1, 1);
}
.ellipse-34 {
  background: var(--light-green, #56ca00);
  border-radius: 50%;
  width: 120px;
  height: 120px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.ellipse-38 {
  background: var(--light-blue, #16b1ff);
  border-radius: 50%;
  width: 120px;
  height: 120px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.frame-504 {
  display: flex;
  flex-direction: column;
  gap: 3.49px;
  align-items: center;
  justify-content: flex-start;
  position: absolute;
  left: 22.67px;
  top: 40.81px;
}
.user {
  color: var(--light-content-3, #949596);
  text-align: left;
  font-family: "Poppins-Medium", sans-serif;
  font-size: 9.76744270324707px;
  line-height: 110%;
  font-weight: 500;
  position: relative;
}
._32-455 {
  color: var(--light-content-2, #585757);
  text-align: left;
  font-family: "Poppins-Medium", sans-serif;
  font-size: 22.32558250427246px;
  line-height: 110%;
  font-weight: 500;
  position: relative;
}
.frame-1707480548 {
  padding: 10px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  left: -15px;
  top: 377px;
  overflow: hidden;
}
.frame-1707480549 {
  border-radius: 11px;
  flex-shrink: 0;
  width: 67px;
  height: 61px;
  position: relative;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  object-fit: cover;
}
.frame-1707480550 {
  border-radius: 11px;
  flex-shrink: 0;
  width: 67px;
  height: 61px;
  position: relative;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  object-fit: cover;
}
.frame-1707480552 {
  flex-shrink: 0;
  width: 67px;
  height: 61px;
  position: relative;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  object-fit: cover;
}
.frame-1707480551 {
  border-radius: 11px;
  flex-shrink: 0;
  width: 67px;
  height: 61px;
  position: relative;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  object-fit: cover;
}
.frame-1707480553 {
  border-radius: 11px;
  flex-shrink: 0;
  width: 67px;
  height: 61px;
  position: relative;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.09);
  overflow: hidden;
  object-fit: cover;
}
.logos-partenaires-seo {
  padding: 0px 125px 0px 125px;
  display: flex;
  flex-direction: row;
  gap: 40px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1440px;
  height: 133px;
  position: relative;
}
.elementor {
  flex-shrink: 0;
  width: 192.91px;
  height: 32.27px;
  position: relative;
  object-fit: cover;
}
.n-8-n {
  flex-shrink: 0;
  width: 128.36px;
  height: 43.27px;
  position: relative;
  object-fit: cover;
}
.figma {
  flex-shrink: 0;
  width: 100.74px;
  height: 48.66px;
  position: relative;
  object-fit: cover;
}
.shopify {
  flex-shrink: 0;
  width: 121.32px;
  height: 46px;
  position: relative;
  object-fit: cover;
}
.wordpress {
  flex-shrink: 0;
  width: 107.66px;
  height: 51.09px;
  position: relative;
  object-fit: cover;
}
.webflow {
  flex-shrink: 0;
  width: 151.18px;
  height: 40px;
  position: relative;
  object-fit: cover;
}
/* FIN HERO SECTION STYLES */

/* ========================================
   SECTION 2 - CARROUSEL DE SERVICES STYLES
   ======================================== */
.section-2,
.section-2 * {
  box-sizing: border-box;
}
.section-2 {
  background: #ffffff;
  padding: 100px 0px 100px 0px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.content {
  display: flex;
  flex-direction: row;
  gap: 22px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 50px 0 80px;
  height: 300px;
  position: relative;
}
.subtitle-container {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  min-width: 0;
  position: relative;
}
.subtitle {
  color: #000000;
  text-align: left;
  font-family: "Outfit-Bold", sans-serif;
  font-size: 48px;
  line-height: 60px;
  font-weight: 700;
  position: relative;
  white-space: nowrap;
}
.text-container {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: center;
  flex: 1;
  min-width: 0;
  height: 300px;
  position: relative;
  overflow: hidden;
}
.text-group {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(-120px);
}
.text-line {
  color: #000000;
  text-align: left;
  font-family: "Outfit-Regular", sans-serif;
  font-size: 48px;
  line-height: 1.25;
  font-weight: 400;
  align-self: stretch;
  flex-shrink: 0;
  opacity: 0.3;
  transition: opacity 0.6s ease, transform 0.3s ease;
  white-space: nowrap;
  overflow: visible;
}
.text-line-1 {
  font-family: "Outfit-Regular", sans-serif;
  font-weight: 400;
}
.text-line-2 {
  font-family: "Outfit-Regular", sans-serif;
  font-weight: 400;
}
.text-line-3 {
  font-family: "Outfit-Regular", sans-serif;
  font-weight: 400;
}
.text-line-4 {
  font-family: "Outfit-Regular", sans-serif;
  font-weight: 400;
}
.text-line-5 {
  background: var(
    --brand-color,
    linear-gradient(89.14deg, rgba(255, 89, 0, 1) 0%, rgba(255, 0, 229, 1) 100%)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Outfit-Regular", sans-serif;
  font-weight: 400;
}
/* Active state - doit être après les classes spécifiques pour avoir la priorité */
.text-line.active {
  opacity: 1 !important;
  font-weight: 600 !important;
  font-family: "Outfit-SemiBold", sans-serif !important;
}
.text-line-5.active {
  background: var(
    --brand-color,
    linear-gradient(89.14deg, rgba(255, 89, 0, 1) 0%, rgba(255, 0, 229, 1) 100%)
  ) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-family: "Outfit-SemiBold", sans-serif !important;
  font-weight: 600 !important;
}
.blur {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 77.88461446762085%
  );
  flex-shrink: 0;
  width: 665px;
  height: 80px;
  position: absolute;
  left: 0px;
  bottom: 0px;
  pointer-events: none;
  z-index: 2;
}
.blur2 {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 77.88461446762085%
  );
  flex-shrink: 0;
  width: 665px;
  height: 80px;
  position: absolute;
  left: 0px;
  top: 0px;
  transform: rotate(180deg);
  pointer-events: none;
  z-index: 2;
}
/* FIN SECTION 2 STYLES */



/* ========================================
   SECTION 3 - IMAGE ET TEXTE + CARROUSEL LOGOS STYLES
   ======================================== */
.section-3,
.section-3 * {
  box-sizing: border-box;
}
.section-3 {
  background: #ffffff;
  padding: 100px 115px 100px 115px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.main-container {
  display: flex;
  flex-direction: column;
  gap: 50px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.top-section {
  display: flex;
  flex-direction: row;
  gap: 50px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.left-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.left-content {
  border-radius: 20px;
  flex-shrink: 0;
  width: 560px;
  height: 520px;
  position: relative;
  overflow: hidden;
}
.left-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

/* Mac Menu Bar */
.mac-menu-bar {
  padding: 0px 5.9px 0px 5.9px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 799px;
  position: absolute;
  left: 0.44px;
  top: 0px;
  overflow: hidden;
}
.left-icons-group {
  flex-shrink: 0;
  width: 242.95px;
  height: 17.69px;
  position: static;
}
.ic-baseline-apple {
  width: 9.43px;
  height: 9.43px;
  position: absolute;
  left: 5.9px;
  top: 3.54px;
  overflow: visible;
  aspect-ratio: 1;
}
.safari {
  color: #ffffff;
  text-align: center;
  font-family: "Inter-SemiBold", sans-serif;
  font-size: 6.486422538757324px;
  font-weight: 600;
  position: absolute;
  left: 18.28px;
  top: 0px;
  width: 31.84px;
  height: 17.69px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.file {
  color: #ffffff;
  text-align: center;
  font-family: "Inter-Regular", sans-serif;
  font-size: 6.486422538757324px;
  font-weight: 400;
  position: absolute;
  left: 50.12px;
  top: 0px;
  width: 23.59px;
  height: 17.69px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.edit {
  color: #ffffff;
  text-align: center;
  font-family: "Inter-Regular", sans-serif;
  font-size: 6.486422538757324px;
  font-weight: 400;
  position: absolute;
  left: 73.71px;
  top: 0px;
  width: 21.82px;
  height: 17.69px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.view {
  color: #ffffff;
  text-align: center;
  font-family: "Inter-Regular", sans-serif;
  font-size: 6.486422538757324px;
  font-weight: 400;
  position: absolute;
  left: 95.53px;
  top: 0px;
  width: 23px;
  height: 17.69px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.history {
  color: #ffffff;
  text-align: center;
  font-family: "Inter-Regular", sans-serif;
  font-size: 6.486422538757324px;
  font-weight: 400;
  position: absolute;
  left: 118.52px;
  top: 0px;
  width: 26.54px;
  height: 17.69px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bookmarks {
  color: #ffffff;
  text-align: center;
  font-family: "Inter-Regular", sans-serif;
  font-size: 6.486422538757324px;
  font-weight: 400;
  position: absolute;
  left: 145.06px;
  top: 0px;
  width: 43.64px;
  height: 17.69px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.window {
  color: #ffffff;
  text-align: center;
  font-family: "Inter-Regular", sans-serif;
  font-size: 6.486422538757324px;
  font-weight: 400;
  position: absolute;
  left: 188.7px;
  top: 0px;
  width: 35.97px;
  height: 17.69px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.help {
  color: #ffffff;
  text-align: center;
  font-family: "Inter-Regular", sans-serif;
  font-size: 6.486422538757324px;
  font-weight: 400;
  position: absolute;
  left: 224.67px;
  top: 0px;
  width: 24.18px;
  height: 17.69px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.right-icons-group {
  flex-shrink: 0;
  width: 200.49px;
  height: 17.69px;
  position: static;
}
.mon-6-jan-1-36-00-pm {
  color: #ffffff;
  text-align: center;
  font-family: "Inter-Regular", sans-serif;
  font-size: 6.486422538757324px;
  font-weight: 400;
  position: absolute;
  left: 711.73px;
  top: 0px;
  width: 81.38px;
  height: 17.69px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.material-symbols-search-rounded {
  width: 9.43px;
  height: 9.43px;
  position: absolute;
  left: 702.29px;
  top: 4.13px;
  overflow: visible;
  aspect-ratio: 1;
}
.material-symbols-wifi-sharp {
  width: 9.43px;
  height: 9.43px;
  position: absolute;
  left: 684.01px;
  top: 4.13px;
  overflow: visible;
  aspect-ratio: 1;
}
.group-12 {
  width: 27.71px;
  height: 17.69px;
  position: static;
}
._97 {
  color: #ffffff;
  text-align: center;
  font-family: "Inter-Regular", sans-serif;
  font-size: 6.486422538757324px;
  font-weight: 400;
  position: absolute;
  left: 647.45px;
  top: 0px;
  width: 14.15px;
  height: 17.69px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.heroicons-battery-50-solid {
  width: 11.2px;
  height: 8.85px;
  position: absolute;
  left: 663.96px;
  top: 4.72px;
}
.group {
  width: 95%;
  height: 62.5%;
  position: absolute;
  right: 5%;
  left: 0%;
  bottom: 20.83%;
  top: 16.67%;
  overflow: visible;
}
.mingcute-airdrop-line {
  width: 9.43px;
  height: 9.43px;
  position: absolute;
  left: 629.17px;
  top: 4.13px;
  aspect-ratio: 1;
}
.group2 {
  width: 83.33%;
  height: 90.9%;
  position: absolute;
  right: 8.33%;
  left: 8.33%;
  bottom: 0.77%;
  top: 8.33%;
  overflow: visible;
}
.material-symbols-bluetooth-rounded {
  width: 9.43px;
  height: 9.43px;
  position: absolute;
  left: 610.89px;
  top: 4.13px;
  overflow: visible;
  aspect-ratio: 1;
}
.f-7-light-max {
  width: 9.43px;
  height: 9.43px;
  position: absolute;
  left: 592.61px;
  top: 2.95px;
  overflow: visible;
  aspect-ratio: 1;
}

/* Browser Content */
.browser-content {
  border-radius: 6.98px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 700.16px;
  position: absolute;
  left: -160.56px;
  top: 43.99px;
  overflow: hidden;
}
.browser-bar {
  background: #ebebeb;
  padding: 2.74px 8.21px 2.74px 8.21px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  flex-shrink: 0;
  height: 21.88px;
  position: relative;
}
.close-buttons {
  flex-shrink: 0;
  width: 90.25px;
  height: 16.41px;
  position: static;
}
.navigation-buttons {
  width: 31.73px;
  height: 16.41px;
  position: static;
}
.browser-bg {
  opacity: 0.3;
  height: 16.41px;
  position: absolute;
  right: 601.7px;
  left: 66.73326969146729px;
  top: 50%;
  translate: 0 -50%;
}
.browser-blur {
  opacity: 0.67;
  height: auto;
  position: absolute;
  right: -14.5px;
  left: -14.222024917602539px;
  bottom: -13.81px;
  top: -14.222024917602539px;
  overflow: visible;
}
.browser-fill {
  background: linear-gradient(to left, #000000, #000000),
    linear-gradient(to left, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
    linear-gradient(to left, #333333, #333333);
  border-radius: 161.91px;
  position: absolute;
  right: -0.27px;
  left: 0px;
  bottom: 0.41px;
  top: 0px;
}
.browser-glass-effect {
  background: rgba(0, 0, 0, 0);
  border-radius: 161.91px;
  position: absolute;
  right: -0.27px;
  left: 0px;
  bottom: 0.41px;
  top: 0px;
}
.forward-button {
  width: 8.75px;
  height: 8.75px;
  position: absolute;
  left: 71.66px;
  top: 6.56px;
  overflow: visible;
  aspect-ratio: 1;
}
.line-5 {
  width: 8.75px;
  height: 0px;
  position: absolute;
  left: 82.6px;
  top: 6.56px;
  overflow: visible;
}
.back-button {
  width: 8.75px;
  height: 8.75px;
  position: absolute;
  left: 93.54px;
  top: 6.56px;
  overflow: visible;
  aspect-ratio: 1;
}
.minimize-button {
  width: 20.24px;
  height: 16.41px;
  position: static;
}
.browser-bg2 {
  opacity: 0.3;
  height: 16.41px;
  position: absolute;
  right: 638.9px;
  left: 41.024450789558614px;
  top: 50%;
  translate: 0 -50%;
}
.browser-blur2 {
  opacity: 0.67;
  height: auto;
  position: absolute;
  right: -13.98px;
  left: -14.222024917602539px;
  bottom: -13.81px;
  top: -14.222024917602539px;
  overflow: visible;
}
.browser-fill2 {
  background: linear-gradient(to left, #000000, #000000),
    linear-gradient(to left, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
    linear-gradient(to left, #333333, #333333);
  border-radius: 161.91px;
  position: absolute;
  right: 0.24px;
  left: 0px;
  bottom: 0.41px;
  top: 0px;
}
.browser-glass-effect2 {
  background: rgba(0, 0, 0, 0);
  border-radius: 161.91px;
  position: absolute;
  right: 0.24px;
  left: 0px;
  bottom: 0.41px;
  top: 0px;
}
.minimize-icon {
  background: rgba(217, 217, 217, 0);
  border-radius: 1.64px;
  border-style: solid;
  border-color: #000000;
  border-width: 0.55px;
  width: 9.3px;
  height: 7.66px;
  position: absolute;
  left: 46.49px;
  top: 7.11px;
}
.line-1 {
  margin-top: -0.55px;
  border-style: solid;
  border-color: #000000;
  border-width: 0.55px 0 0 0;
  width: 7.66px;
  height: 0px;
  position: absolute;
  left: 49.23px;
  top: 7.11px;
  transform-origin: 0 0;
  transform: rotate(90deg) scale(1, 1);
}
.line-2 {
  margin-top: -0.55px;
  border-style: solid;
  border-color: #000000;
  border-width: 0.55px 0 0 0;
  width: 1.64px;
  height: 0px;
  position: absolute;
  left: 47.04px;
  top: 9.3px;
}
.line-3 {
  margin-top: -0.55px;
  border-style: solid;
  border-color: #000000;
  border-width: 0.55px 0 0 0;
  width: 1.64px;
  height: 0px;
  position: absolute;
  left: 47.04px;
  top: 10.39px;
}
.line-4 {
  margin-top: -0.55px;
  border-style: solid;
  border-color: #000000;
  border-width: 0.55px 0 0 0;
  width: 1.64px;
  height: 0px;
  position: absolute;
  left: 47.04px;
  top: 11.49px;
}
.close-buttons2 {
  width: 27.35px;
  height: 6.56px;
  position: static;
}
.ellipse-1 {
  background: #ff5c60;
  border-radius: 50%;
  width: 6.56px;
  height: 6.56px;
  position: absolute;
  left: 8.21px;
  top: 7.66px;
}
.ellipse-2 {
  background: #464a4d;
  border-radius: 50%;
  width: 6.56px;
  height: 6.56px;
  position: absolute;
  left: 18.6px;
  top: 7.66px;
}
.ellipse-3 {
  background: #35c759;
  border-radius: 50%;
  width: 6.56px;
  height: 6.56px;
  position: absolute;
  left: 28.99px;
  top: 7.66px;
}
.search-bar {
  flex-shrink: 0;
  width: 287.72px;
  height: 16.41px;
  position: static;
}
.bg3 {
  opacity: 0.3;
  height: 16.41px;
  position: absolute;
  right: 188.79px;
  left: 223.64734268182656px;
  top: 50%;
  translate: 0 -50%;
}
.blur3 {
  opacity: 0.67;
  height: auto;
  position: absolute;
  right: -14.2px;
  left: -14.222704887390137px;
  bottom: -14.34px;
  top: -14.221827507019043px;
  overflow: visible;
}
.fill3 {
  background: linear-gradient(to left, #000000, #000000),
    linear-gradient(to left, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
    linear-gradient(to left, #333333, #333333);
  border-radius: 161.91px;
  position: absolute;
  right: 0.02px;
  left: -0.0008384634274989367px;
  bottom: -0.12px;
  top: 0.00043359011760912836px;
}
.glass-effect3 {
  background: rgba(0, 0, 0, 0);
  border-radius: 161.91px;
  position: absolute;
  right: 0.02px;
  left: -0.0008384634274989367px;
  bottom: -0.12px;
  top: 0.00043359011760912836px;
}
.url-text {
  color: #000000;
  text-align: center;
  font-family: "Inter-Regular", sans-serif;
  font-size: 6.01701021194458px;
  font-weight: 400;
  position: absolute;
  left: 225.29px;
  top: 6.29px;
  width: 257.64px;
  height: 9.3px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pepicons-pencil-arrow-spin {
  width: 9.96px;
  height: 9.96px;
  position: absolute;
  left: 504.23px;
  top: 17.7px;
  transform-origin: 0 0;
  transform: rotate(61.144deg) scale(1, -1);
  aspect-ratio: 1;
}
.group3 {
  width: 69.92%;
  height: 60%;
  position: absolute;
  right: 10.07%;
  left: 20.01%;
  bottom: 20.02%;
  top: 19.98%;
  overflow: visible;
}
.right-buttons {
  flex-shrink: 0;
  width: 55.4px;
  height: 16.2px;
  position: static;
}
.bg4 {
  background: rgba(0, 0, 0, 0);
  border-radius: 23.28px;
  padding: 3.72px 6.98px 3.72px 6.98px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 55.4px;
  position: absolute;
  left: 636.56px;
  top: 2.84px;
}
.right-button {
  flex-shrink: 0;
  width: 7.66px;
  height: 8.75px;
  position: relative;
  overflow: visible;
}
.right-button-icon {
  flex-shrink: 0;
  width: 8.75px;
  height: 8.75px;
  position: relative;
  overflow: visible;
}
.right-button-icon2 {
  flex-shrink: 0;
  width: 8.75px;
  height: 8.75px;
  position: static;
}
.right-button-icon3 {
  border-radius: 1.09px;
  border-style: solid;
  border-color: #000000;
  border-width: 0.55px;
  width: 7px;
  height: 7px;
  position: absolute;
  left: 39.66px;
  top: 3.72px;
}
.right-button-icon4 {
  border-radius: 1.09px;
  border-style: solid;
  border-color: #000000;
  border-width: 0.55px;
  width: 7px;
  height: 7px;
  position: absolute;
  left: 41.41px;
  top: 5.47px;
}
.capture-d-cran-2025-11-12-132523-1 {
  align-self: stretch;
  flex-shrink: 0;
  height: 475.06px;
  position: relative;
  object-fit: cover;
  aspect-ratio: 700.16/475.06;
}

/* Comments/Cursor overlays */
.comment-cursor {
  flex-shrink: 0;
  width: 45.33px;
  height: 18.71px;
  position: static;
}
.cursor {
  width: 6.16px;
  height: 6.16px;
  position: absolute;
  left: 576px;
  top: 116.01px;
  overflow: visible;
}
.comment {
  background: #12b76a;
  border-radius: 0.62px 7.39px 7.39px 7.39px;
  border-style: solid;
  border-color: #039855;
  border-width: 0.62px;
  padding: 2.46px 6.16px 2.46px 4.93px;
  display: flex;
  flex-direction: row;
  gap: 2.46px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 40.22px;
  height: 12.93px;
  position: absolute;
  left: 581.11px;
  top: 121.79px;
  box-shadow: 1.23px 1.23px 3.08px 0px rgba(18, 183, 106, 0.16);
}
.comment-text {
  color: #ffffff;
  text-align: left;
  font-family: "Inter-Medium", sans-serif;
  font-size: 4.929169654846191px;
  line-height: 7.39px;
  font-weight: 500;
  position: relative;
}
.rectangle-30 {
  flex-shrink: 0;
  width: 57px;
  height: 15px;
  position: absolute;
  left: 444px;
  top: 268.01px;
  overflow: visible;
}
.rectangle-31 {
  flex-shrink: 0;
  width: 25px;
  height: 23px;
  position: absolute;
  left: 533px;
  top: 58.01px;
  overflow: visible;
}
.comment-cursor2 {
  flex-shrink: 0;
  width: 44.28px;
  height: 18.67px;
  position: static;
}
.cursor2 {
  width: 6.05px;
  height: 6.05px;
  position: absolute;
  left: 496.72px;
  top: 277.92px;
  overflow: visible;
}
.comment2 {
  background: #ee46bc;
  border-radius: 0.61px 7.26px 7.26px 7.26px;
  border-style: solid;
  border-color: #dd2590;
  border-width: 0.61px;
  padding: 2.42px 6.05px 2.42px 4.84px;
  display: flex;
  flex-direction: row;
  gap: 2.42px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 38.79px;
  height: 12.93px;
  position: absolute;
  left: 502.22px;
  top: 283.66px;
  box-shadow: 1.21px 1.21px 3.03px 0px rgba(238, 70, 188, 0.16);
}
.comment-text2 {
  color: #ffffff;
  text-align: left;
  font-family: "Inter-Medium", sans-serif;
  font-size: 4.841567039489746px;
  line-height: 7.26px;
  font-weight: 500;
  position: relative;
}

/* Carte grise superposée */
.right-section {
  margin: 0 0 0 -249px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  width: 364px;
  height: 324px;
  position: relative;
}
.right-content {
  border-radius: 20px;
  align-self: stretch;
  flex-shrink: 0;
  height: 297px;
  position: relative;
  overflow: hidden;
}
.right-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

/* Section texte à droite */
.right-section2 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 466px;
  position: relative;
}
.title-text {
  color: #000000;
  text-align: left;
  font-family: "Outfit-SemiBold", sans-serif;
  font-size: 36px;
  font-weight: 600;
  position: relative;
  align-self: stretch;
  height: 45px;
}
.description-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.description-text {
  color: #000000;
  text-align: left;
  font-family: "Outfit-Light", sans-serif;
  font-size: 24px;
  font-weight: 300;
  position: relative;
  align-self: stretch;
}
.discover-text {
  color: #539500;
  text-align: left;
  font-family: "Outfit-Light", sans-serif;
  font-size: 24px;
  font-weight: 300;
  text-decoration: underline;
  position: relative;
  align-self: stretch;
  height: 34px;
}

/* Marquee de logos en bas - défilement infini */
.bottom-section {
  flex-shrink: 0;
  height: 85px;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.marquee-wrapper {
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.marquee-content {
  display: flex;
  gap: 52px;
  will-change: transform;
}

.logo-item {
  flex-shrink: 0;
  height: 65px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.5);
  transition: filter 0.3s ease;
}

.logo-item:hover {
  filter: grayscale(0%) opacity(1);
}

/* Gradients blancs sur les bords */
.marquee-fade-left {
  position: absolute;
  left: 0;
  top: 0;
  width: 150px;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
  z-index: 10;
}

.marquee-fade-right {
  position: absolute;
  right: 0;
  top: 0;
  width: 150px;
  height: 100%;
  background: linear-gradient(
    270deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
  z-index: 10;
}
/* FIN SECTION 3 STYLES */

/* ========================================
   SECTION 4 - IMAGE ET TEXTE INVERSÉ + MARQUEE LOGOS STYLES
   ======================================== */
.section-4,
.section-4 * {
  box-sizing: border-box;
}
.section-4 {
  background: #ffffff;
  padding: 100px 115px 100px 115px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.main-container-4 {
  display: flex;
  flex-direction: column;
  gap: 50px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.top-section-4 {
  display: flex;
  flex-direction: row;
  gap: 50px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}

/* Section texte à GAUCHE (inversé de section 3) */
.left-section-4 {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 466px;
  position: relative;
}
.title-text-4 {
  color: #000000;
  text-align: left;
  font-family: "Outfit-SemiBold", sans-serif;
  font-size: 36px;
  font-weight: 600;
  position: relative;
  align-self: stretch;
  height: 45px;
}
.description-container-4 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.description-text-4 {
  color: #000000;
  text-align: left;
  font-family: "Outfit-Light", sans-serif;
  font-size: 24px;
  font-weight: 300;
  position: relative;
  align-self: stretch;
}
.discover-text-4 {
  color: #539500;
  text-align: left;
  font-family: "Outfit-Light", sans-serif;
  font-size: 24px;
  font-weight: 300;
  text-decoration: underline;
  position: relative;
  align-self: stretch;
  height: 34px;
}

/* Section à DROITE - Architecture complète iMac + Terminal */
.frame-1707480573,
.frame-1707480573 * {
  box-sizing: border-box;
}
.frame-1707480573 {
  padding: 14px 15px 14px 15px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  height: 564px;
  position: relative;
  overflow: hidden;
}
.frame-1707480645 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  width: 361px;
  height: 402px;
  position: relative;
}
.container {
  background: #fafafa;
  border-radius: 21.05px;
  padding: 76.5px 10.53px 10.53px 10.53px;
  display: flex;
  flex-direction: row;
  gap: 10.53px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 361.04px;
  height: 292px;
  position: relative;
  overflow: hidden;
}
.i-mac-front {
  flex-shrink: 0;
  width: 318.12px;
  height: 268px;
  position: relative;
}
.screen {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: visible;
  object-fit: contain;
}
.frame-1707480686 {
  flex-shrink: 0;
  width: 257px;
  height: 89.91px;
  position: relative;
  overflow: hidden;
  object-fit: cover;
}
.frame-1707480558 {
  background: #000000;
  border-radius: 20px;
  padding: 10px;
  flex-shrink: 0;
  width: 265px;
  height: 534px;
  position: relative;
  overflow: hidden;
}
.frame-1707480594 {
  border-radius: 20px;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(29, 29, 29, 0.5);
  width: 254px;
  height: 489px;
  position: absolute;
  left: 7px;
  top: 33px;
}
.frame-1707480662 {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  position: absolute;
  left: 13px;
  top: 6px;
}
.frame-1707480663 {
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.frame-1707480590 {
  background: #131313;
  border-radius: 4px;
  flex-shrink: 0;
  width: 28px;
  height: 22px;
  position: relative;
  overflow: hidden;
}
.frame-1707480592 {
  background: #131313;
  border-radius: 4px;
  flex-shrink: 0;
  width: 28px;
  height: 22px;
  position: relative;
  overflow: hidden;
}
.frame-1707480593 {
  background: #131313;
  border-radius: 4px;
  flex-shrink: 0;
  width: 52px;
  height: 22px;
  position: relative;
  overflow: hidden;
}

/* Marquee de logos en bas - identique à section 3 */
.bottom-section-4 {
  flex-shrink: 0;
  height: 85px;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.marquee-wrapper-4 {
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.marquee-content-4 {
  display: flex;
  gap: 52px;
  will-change: transform;
}

.logo-item-4 {
  flex-shrink: 0;
  height: 65px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.5);
  transition: filter 0.3s ease;
}

.logo-item-4:hover {
  filter: grayscale(0%) opacity(1);
}

/* Gradients blancs sur les bords */
.marquee-fade-left-4 {
  position: absolute;
  left: 0;
  top: 0;
  width: 150px;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
  z-index: 10;
}

.marquee-fade-right-4 {
  position: absolute;
  right: 0;
  top: 0;
  width: 150px;
  height: 100%;
  background: linear-gradient(
    270deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
  z-index: 10;
}
/* FIN SECTION 4 STYLES */

/* ========================================
   SECTION 5 - STRUCTURATION ET AUTOMATISATION + MARQUEE
   ======================================== */
.section-5,
.section-5 * {
  box-sizing: border-box;
}
.section-5 {
  background: #ffffff;
  padding: 100px 115px 100px 115px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.main-container-5 {
  display: flex;
  flex-direction: column;
  gap: 50px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.top-section-5 {
  display: flex;
  flex-direction: row;
  gap: 50px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1210px;
  position: relative;
  overflow: hidden;
}

/* Section contenu à GAUCHE */
.left-section-5 {
  padding: 14px 15px 14px 15px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 658px;
  position: relative;
}
.notification-container-5 {
  background: #fefefe;
  border-radius: 20px;
  padding: 655px 10px 10px 21px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 464px;
  height: 265px;
  position: relative;
  overflow: hidden;
}
.i-phone-14-pro-5 {
  flex-shrink: 0;
  width: 433px;
  height: 883px;
  position: relative;
  overflow: visible;
}
.device-5 {
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.diagram-image-5 {
  background: url(../ASSETS/images/section5/diagram.svg) top left;
  background-size: 10%;
  background-repeat: repeat;
  border-radius: 20px;
  border-style: solid;
  border-color: #d6d6d6;
  border-width: 1px;
  padding: 10px;
  flex-shrink: 0;
  width: 558px;
  height: 237px;
  position: relative;
  overflow: visible;
}
.vector-5-5 {
  border-radius: 0px;
  width: 112.5px;
  height: 21px;
  position: absolute;
  left: 108px;
  top: 112px;
  transform: translate(0px, -24.54px);
  overflow: visible;
}
.vector-9-5 {
  border-radius: 0px;
  width: 102px;
  height: 33px;
  position: absolute;
  left: 343px;
  top: 94px;
  transform: translate(-4.07px, -36.82px);
  overflow: visible;
}
.vector-10-5 {
  border-radius: 0px;
  width: 102px;
  height: 33.5px;
  position: absolute;
  left: 343px;
  top: 126px;
  transform: translate(-0.02px, -33.55px);
  overflow: visible;
}
.vector-6-5 {
  border-radius: 0px;
  width: 37.08px;
  height: 25.44px;
  position: absolute;
  left: 251.38px;
  top: 115px;
  transform: translate(-25.7px, -0.25px);
  overflow: visible;
}
.vector-8-5 {
  border-radius: 0px;
  width: 9.95px;
  height: 46.29px;
  position: absolute;
  left: 327.77px;
  top: 111.94px;
  transform: translate(-7.01px, 2.95px);
  overflow: visible;
}
.vector-7-5 {
  border-radius: 0px;
  width: 17.34px;
  height: 36.05px;
  position: absolute;
  left: 287.41px;
  top: 115px;
  transform: translate(-3.82px, 0px);
  overflow: visible;
}
.icon-container-5 {
  background: #ffffff;
  border-radius: 8px;
  border-style: solid;
  border-color: #b3b3b3;
  border-width: 1px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 58px;
  position: absolute;
  left: 33px;
  top: 83px;
  overflow: hidden;
}
.icon-5 {
  flex-shrink: 0;
  width: 55.91px;
  height: 74px;
  position: relative;
  overflow: hidden;
  object-fit: cover;
}
.icon-container2-5 {
  background: #ffffff;
  border-radius: 7.06px;
  border-style: solid;
  border-color: #b3b3b3;
  border-width: 0.88px;
  display: flex;
  flex-direction: column;
  gap: 8.82px;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 51.18px;
  position: absolute;
  left: 447.97px;
  top: 38px;
  overflow: hidden;
}
.icon2-5 {
  flex-shrink: 0;
  width: 27.11px;
  height: 28.24px;
  position: relative;
  overflow: hidden;
  object-fit: cover;
}
.ai-agent-container-5 {
  background: #ffffff;
  border-radius: 8px;
  border-style: solid;
  border-color: #d6d6d6;
  border-width: 1px;
  width: 121px;
  height: 48px;
  position: absolute;
  left: 222px;
  top: 67px;
  overflow: hidden;
}
.ai-agent-text-5 {
  color: #535459;
  text-align: left;
  font-family: "Inter-Medium", sans-serif;
  font-size: 10px;
  font-weight: 500;
  position: absolute;
  left: 46px;
  top: 19px;
  width: 58px;
  height: 10px;
}
.icon-container3-5 {
  width: 39.58px;
  height: 30.06px;
  position: absolute;
  left: 229px;
  top: 76px;
  overflow: hidden;
}
.icon-container4-5 {
  background: #535459;
  border-radius: 3.12px;
  width: 18.75px;
  height: 15.18px;
  position: absolute;
  left: 10.86px;
  top: 8.63px;
  overflow: hidden;
}
.ellipse-9-5 {
  background: #ffffff;
  border-radius: 50%;
  width: 3.12px;
  height: 3.12px;
  position: absolute;
  left: 4.46px;
  top: 4.02px;
}
.ellipse-10-5 {
  background: #ffffff;
  border-radius: 50%;
  width: 3.12px;
  height: 3.12px;
  position: absolute;
  left: 10.86px;
  top: 4.02px;
}
.icon3-5 {
  background: #ffffff;
  width: 3.27px;
  height: 1.04px;
  position: absolute;
  left: 3.72px;
  top: 10.71px;
}
.icon4-5 {
  background: #ffffff;
  width: 3.27px;
  height: 1.04px;
  position: absolute;
  left: 7.74px;
  top: 10.71px;
}
.icon5-5 {
  background: #ffffff;
  width: 3.27px;
  height: 1.04px;
  position: absolute;
  left: 11.75px;
  top: 10.71px;
}
.icon6-5 {
  background: #535459;
  border-radius: 1.19px 0px 0px 1.19px;
  width: 2.83px;
  height: 6.1px;
  position: absolute;
  left: 7.44px;
  top: 12.94px;
  overflow: hidden;
}
.icon7-5 {
  background: #535459;
  border-radius: 1.19px 0px 0px 1.19px;
  width: 2.83px;
  height: 6.1px;
  position: absolute;
  left: 33.03px;
  top: 19.05px;
  transform-origin: 0 0;
  transform: rotate(-180deg) scale(1, 1);
  overflow: hidden;
}
.icon8-5 {
  background: #535459;
  border-radius: 0.3px;
  width: 2.08px;
  height: 2.38px;
  position: absolute;
  left: 19.19px;
  top: 6.7px;
}
.ellipse-11-5 {
  background: #ffffff;
  border-radius: 50%;
  border-style: solid;
  border-color: #d6d6d6;
  border-width: 1px;
  width: 45px;
  height: 45px;
  position: absolute;
  left: 206px;
  top: 157px;
}
.ellipse-12-5 {
  background: #ffffff;
  border-radius: 50%;
  border-style: solid;
  border-color: #d6d6d6;
  border-width: 1px;
  width: 45px;
  height: 45px;
  position: absolute;
  left: 265px;
  top: 157px;
}
.ellipse-13-5 {
  background: #ffffff;
  border-radius: 50%;
  border-style: solid;
  border-color: #d6d6d6;
  border-width: 1px;
  width: 45px;
  height: 45px;
  position: absolute;
  left: 321px;
  top: 157px;
}
.icon-container5-5 {
  width: 29px;
  height: 22px;
  position: absolute;
  left: 214px;
  top: 169px;
  overflow: hidden;
}
.icon9-5 {
  width: 26px;
  height: 19.5px;
  position: absolute;
  left: 1px;
  top: 0px;
  overflow: hidden;
  object-fit: cover;
}
.icon10-5 {
  border-radius: 3px;
  width: 21px;
  height: 26px;
  position: absolute;
  left: 277px;
  top: 166px;
  overflow: hidden;
  object-fit: cover;
}
.icon11-5 {
  border-radius: 6px;
  width: 27px;
  height: 26px;
  position: absolute;
  left: 330px;
  top: 166px;
  overflow: hidden;
  object-fit: cover;
}
.icon-container6-5 {
  background: #ffffff;
  border-radius: 7.17px;
  border-style: solid;
  border-color: #b3b3b3;
  border-width: 0.9px;
  display: flex;
  flex-direction: column;
  gap: 8.97px;
  align-items: center;
  justify-content: center;
  width: 60.97px;
  height: 52px;
  position: absolute;
  left: 447px;
  top: 97px;
  overflow: hidden;
}
.icon12-5 {
  flex-shrink: 0;
  width: 50.13px;
  height: 66.34px;
  position: relative;
  overflow: hidden;
  object-fit: cover;
}

/* Section texte à DROITE */
.right-section-5 {
  padding: 5px 0px 5px 0px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 471px;
  position: relative;
  overflow: hidden;
}
.title-5 {
  color: #000000;
  text-align: left;
  font-family: "Outfit-SemiBold", sans-serif;
  font-size: 36px;
  font-weight: 600;
  position: relative;
  align-self: stretch;
  height: 91px;
}
.description-container-5 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.description-text-5 {
  color: #000000;
  text-align: left;
  font-family: "Outfit-Light", sans-serif;
  font-size: 24px;
  font-weight: 300;
  position: relative;
  align-self: stretch;
}
.discover-text-5 {
  background: var(
    --brand-color-2,
    linear-gradient(
      252.66deg,
      rgba(255, 204, 0, 1) 0%,
      rgba(255, 89, 0, 1) 100%
    )
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: left;
  font-family: "Outfit-Light", sans-serif;
  font-size: 24px;
  font-weight: 300;
  text-decoration: underline;
  position: relative;
  align-self: stretch;
  height: 34px;
}

/* Marquee de logos en bas */
.bottom-section-5 {
  flex-shrink: 0;
  height: 85px;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.marquee-wrapper-5 {
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.marquee-content-5 {
  display: flex;
  gap: 52px;
  will-change: transform;
}

.logo-item-5 {
  flex-shrink: 0;
  height: 65px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.5);
  transition: filter 0.3s ease;
}

.logo-item-5:hover {
  filter: grayscale(0%) opacity(1);
}

/* Gradients blancs sur les bords */
.marquee-fade-left-5 {
  position: absolute;
  left: 0;
  top: 0;
  width: 150px;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
  z-index: 10;
}

.marquee-fade-right-5 {
  position: absolute;
  right: 0;
  top: 0;
  width: 150px;
  height: 100%;
  background: linear-gradient(
    270deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
  z-index: 10;
}
/* FIN SECTION 5 STYLES */

/* ========================================
   SECTION 6 - COMPÉTENCES STYLES
   ======================================== */
.section-6,
.section-6 * {
  box-sizing: border-box;
}
.section-6 {
  background: #000000;
  padding: 100px 0px;
  display: flex;
  flex-direction: column;
  gap: 100px;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 1840px;
  position: relative;
  overflow: hidden;
}
.main-container-6 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  height: 1600px;
  position: relative;
}
.main-container2-6 {
  display: flex;
  flex-direction: column;
  gap: 100px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.section-container-6 {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 400px;
  position: relative;
}
.section-title-6 {
  color: #ffffff;
  text-align: center;
  font-family: "GeistMono-Regular", sans-serif;
  font-size: 24px;
  font-weight: 400;
  position: relative;
}
.section-subtitle-6 {
  text-align: center;
  font-family: "Outfit-SemiBold", sans-serif;
  font-size: 48px;
  font-weight: 600;
  position: relative;
  width: 704px;
  height: 121px;
}
.section-subtitle-span-6 {
  background: var(
    --brand-color,
    linear-gradient(89.14deg, rgba(255, 89, 0, 1) 0%, rgba(255, 0, 229, 1) 100%)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.section-subtitle-span2-6 {
  color: #ffffff;
}
.section-description-6 {
  color: #d1d1d1;
  text-align: center;
  font-family: "Outfit-Regular", sans-serif;
  font-size: 24px;
  font-weight: 400;
  position: relative;
  width: 703px;
}
.tabs-container-6 {
  background: #222222;
  border-radius: 20px;
  padding: 0px 25px 0px 25px;
  display: flex;
  flex-direction: row;
  gap: 11px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 719px;
  position: relative;
  overflow: hidden;
}
.tab-6 {
  border-radius: 20px;
  padding: 15px 30px 15px 30px;
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: background 0.3s ease;
}
.tab-6.active {
  background: #444444;
}
.tab-label-6 {
  color: #ffffff;
  text-align: center;
  font-family: "Outfit-Medium", sans-serif;
  font-size: 16px;
  font-weight: 500;
  position: relative;
}
.tab2-6 {
  padding: 15px 30px 15px 30px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  border-radius: 20px;
  transition: background 0.3s ease;
}
.tab2-6.active {
  background: #444444;
}
.content-container-6 {
  display: flex;
  flex-direction: row;
  gap: 30px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1311px;
  position: relative;
}
.left-column-6 {
  background: #222222;
  border-radius: 30px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 441px;
  height: 762px;
  position: relative;
  overflow: hidden;
}
.left-column-content-6 {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  width: 405px;
  position: relative;
}
.component-3-6 {
  border-radius: 15px;
  border-style: solid;
  border-color: #6e6e73;
  border-width: 3px;
  flex-shrink: 0;
  width: 405px;
  height: 342px;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('assets/images/section6/Dev-Web.png');
  transition: background-image 0.3s ease;
}

/* Images pour chaque compétence - METTEZ VOS CHEMINS D'IMAGES ICI */
.component-3-6.web {
  background-image: url('assets/images/section6/Dev-Web.png');
}
.component-3-6.design {
  background-image: url('assets/images/section6/Figma.png');
}
.component-3-6.automation {
  background-image: url('assets/images/section6/n8n.png');
}
.component-3-6.seo {
  background-image: url('assets/images/section6/Ahrefs.png');
}
.right-column-6 {
  display: flex;
  flex-direction: column;
  gap: 99px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.right-column-content-6 {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.right-column-title-6 {
  color: #ffffff;
  text-align: left;
  font-family: "Outfit-SemiBold", sans-serif;
  font-size: 40px;
  font-weight: 600;
  position: relative;
  align-self: stretch;
  height: 50px;
}
.right-column-description-6 {
  text-align: left;
  font-family: "Outfit-Regular", sans-serif;
  font-size: 20px;
  font-weight: 400;
  opacity: 0.75;
  position: relative;
  width: 391px;
}
.right-column-description-span-6 {
  color: #cecece;
}
.right-column-description-span2-6 {
  background: var(
    --brand-color,
    linear-gradient(89.14deg, rgba(255, 89, 0, 1) 0%, rgba(255, 0, 229, 1) 100%)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  cursor: pointer;
}
.tags-container-6 {
  display: flex;
  flex-direction: row;
  gap: 12px;
  row-gap: 14px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
  flex-shrink: 0;
  width: 377px;
  position: relative;
}
.tag-6 {
  border-radius: 20px;
  border-style: solid;
  border-color: #ffffff;
  border-width: 1px;
  flex-shrink: 0;
  width: 127px;
  height: 35px;
  position: relative;
  overflow: hidden;
}
.tag-label-6-text {
  color: #cecece;
  text-align: center;
  font-family: "Outfit-Regular", sans-serif;
  font-size: 24px;
  font-weight: 400;
  position: absolute;
  left: 10px;
  top: 2px;
  width: 110px;
  height: 24px;
}
.tag2-6 {
  border-radius: 20px;
  border-style: solid;
  border-color: #ffffff;
  border-width: 1px;
  flex-shrink: 0;
  width: 99px;
  height: 35px;
  position: relative;
  overflow: hidden;
}
.tag-label2-6 {
  color: #cecece;
  text-align: center;
  font-family: "Outfit-Regular", sans-serif;
  font-size: 24px;
  font-weight: 400;
  position: absolute;
  left: -6px;
  top: 2px;
  width: 110px;
  height: 24px;
}
.tag3-6 {
  border-radius: 20px;
  border-style: solid;
  border-color: #ffffff;
  border-width: 1px;
  flex-shrink: 0;
  width: 139px;
  height: 35px;
  position: relative;
  overflow: hidden;
}
.tag-label3-6 {
  color: #cecece;
  text-align: center;
  font-family: "Outfit-Regular", sans-serif;
  font-size: 24px;
  font-weight: 400;
  position: absolute;
  left: 8px;
  top: 3px;
  width: 122px;
  height: 24px;
}
.dock-prototype-6 {
  border-radius: 30px;
  padding: 38px 40px 38px 40px;
  display: flex;
  flex-direction: column;
  gap: 76px;
  align-items: flex-end;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 843px;
  position: relative;
  overflow: hidden;
}
.code-container-6 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.browser-bar-container-6 {
  border-radius: 9.6px 9.6px 0px 0px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  height: 21px;
  position: relative;
  overflow: hidden;
}
.browser-bar-6 {
  background: #252525;
  padding: 2.62px 7.88px 2.62px 7.88px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  flex-shrink: 0;
  height: 21px;
  position: relative;
}
.browser-buttons-container-6 {
  flex-shrink: 0;
  width: 86.62px;
  height: 15.75px;
  position: static;
}
.browser-button-6 {
  width: 30.45px;
  height: 15.75px;
  position: static;
}
.bg-6 {
  opacity: 0.3;
  height: 15.75px;
  position: absolute;
  right: 668.5px;
  left: 64.04931306838989px;
  top: 50%;
  translate: 0 -50%;
}
.browser-button-icon-6 {
  width: 8.4px;
  height: 8.4px;
  position: absolute;
  left: 68.77px;
  top: 6.3px;
  overflow: visible;
  aspect-ratio: 1;
}
.line-5-6 {
  width: 8.4px;
  height: 0px;
  position: absolute;
  left: 79.28px;
  top: 6.3px;
  overflow: visible;
}
.browser-button-icon2-6 {
  width: 8.4px;
  height: 8.4px;
  position: absolute;
  left: 89.78px;
  top: 6.3px;
  overflow: visible;
  aspect-ratio: 1;
}
.browser-button2-6 {
  width: 8.92px;
  height: 7.35px;
  position: absolute;
  left: 44.62px;
  top: 6.83px;
  overflow: visible;
}
.close-buttons-6 {
  width: 26.25px;
  height: 6.3px;
  position: static;
}
.ellipse-1-6 {
  background: #ff5c60;
  border-radius: 50%;
  width: 6.3px;
  height: 6.3px;
  position: absolute;
  left: 7.88px;
  top: 7.35px;
}
.ellipse-2-6 {
  background: #464a4d;
  border-radius: 50%;
  width: 6.3px;
  height: 6.3px;
  position: absolute;
  left: 17.85px;
  top: 7.35px;
}
.ellipse-3-6 {
  background: #35c759;
  border-radius: 50%;
  width: 6.3px;
  height: 6.3px;
  position: absolute;
  left: 27.83px;
  top: 7.35px;
}
.search-bar-6 {
  background: rgba(0, 0, 0, 0);
  border-radius: 100px;
  flex-shrink: 0;
  width: 272.34px;
  height: 12.99px;
  position: relative;
}
.search-bar-text-6 {
  color: #ffffff;
  text-align: center;
  font-family: "Inter-Regular", sans-serif;
  font-size: 5.775000095367432px;
  font-weight: 400;
  position: absolute;
  left: 0px;
  top: 2.03px;
  width: 247.27px;
  height: 8.92px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pepicons-pencil-arrow-spin-6 {
  width: 9.56px;
  height: 9.56px;
  position: absolute;
  left: 267.72px;
  top: 12.99px;
  transform-origin: 0 0;
  transform: rotate(61.144deg) scale(1, -1);
  aspect-ratio: 1;
}
.group-6 {
  width: 69.92%;
  height: 60%;
  position: absolute;
  right: 10.07%;
  left: 20%;
  bottom: 20.02%;
  top: 19.98%;
  transform: translate(-5.02px, -8.62px);
  overflow: visible;
}
.browser-button3-6 {
  flex-shrink: 0;
  width: 53.17px;
  height: 15.55px;
  position: static;
}
.bg2-6 {
  background: rgba(0, 0, 0, 0);
  border-radius: 22.34px;
  padding: 3.57px 6.7px 3.57px 6.7px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 53.17px;
  position: absolute;
  left: 701.95px;
  top: 2.73px;
}
.browser-button-icon3-6 {
  flex-shrink: 0;
  width: 7.35px;
  height: 8.4px;
  position: relative;
  overflow: visible;
}
.browser-button-icon4-6 {
  flex-shrink: 0;
  width: 8.4px;
  height: 8.4px;
  position: relative;
  overflow: visible;
}
.browser-button-icon5-6 {
  flex-shrink: 0;
  width: 8.4px;
  height: 8.4px;
  position: static;
}
.browser-button-background-6 {
  border-radius: 1.05px;
  border-style: solid;
  border-color: #ffffff;
  border-width: 0.53px;
  width: 6.72px;
  height: 6.72px;
  position: absolute;
  left: 38.07px;
  top: 3.57px;
}
.browser-button-background2-6 {
  border-radius: 1.05px;
  border-style: solid;
  border-color: #ffffff;
  border-width: 0.53px;
  width: 6.72px;
  height: 6.72px;
  position: absolute;
  left: 39.75px;
  top: 5.25px;
}
.code-background-6 {
  margin: -1px 0 0 0;
  border-radius: 0px 0px 9.6px 9.6px;
  align-self: stretch;
  flex-shrink: 0;
  height: 416.72px;
  position: relative;
  aspect-ratio: 763/416.72;
}
.dock-6 {
  background: var(
    --blur-background-fill,
    linear-gradient(
      129.48deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.43) 100%
    )
  );
  border-radius: 40.1px;
  border-width: 2.72px;
  border-style: solid;
  border-image: linear-gradient(
    106.75deg,
    rgba(255, 255, 255, 0.54) 0%,
    rgba(28, 52, 89, 0.09) 100%
  );
  border-image-slice: 1;
  padding: 0px 18px 0px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  height: 153px;
  position: relative;
  backdrop-filter: blur(152.35px);
}
.dock-container-6 {
  display: flex;
  flex-direction: row;
  gap: 41px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.code-icon-6 {
  padding: 3px 19px 3px 19px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 150.79px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.code-icon-6:hover {
  transform: scale(1.1);
}
.code2-6 {
  flex-shrink: 0;
  width: 112.29px;
  height: 112.29px;
  position: relative;
  overflow: visible;
}
.figma-icon-6 {
  padding: 18px 19px 18px 19px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.figma-icon-6:hover {
  transform: scale(1.1);
}
.figma2-6 {
  flex-shrink: 0;
  width: 112.29px;
  height: 112.29px;
  position: relative;
  overflow: visible;
}
.n-8-n-icon-6 {
  padding: 18px 19px 18px 19px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.n-8-n-icon-6:hover {
  transform: scale(1.1);
}
.n-8-n2-6 {
  flex-shrink: 0;
  width: 112.29px;
  height: 112.29px;
  position: relative;
  overflow: visible;
}
.ahrefs-icon-6 {
  padding: 18px 19px 18px 19px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.ahrefs-icon-6:hover {
  transform: scale(1.1);
}
.ahrefs2-6 {
  flex-shrink: 0;
  width: 112.29px;
  height: 112.29px;
  position: relative;
  overflow: visible;
}
.ellipse-407-6 {
  background: #ffffff;
  border-radius: 50%;
  flex-shrink: 0;
  width: 4.81px;
  height: 4.81px;
  position: relative;
}
/* FIN SECTION 6 STYLES */
/* ========================================
   SECTION 7 - RÉSULTATS CHIFFRÉS STYLES
   ======================================== */
.section-7,
.section-7 * {
  box-sizing: border-box;
}
.section-7 {
  background: #ffffff;
  padding: 100px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.container-7 {
  display: flex;
  flex-direction: column;
  gap: 77px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.header-7 {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 297px;
  position: relative;
  overflow: hidden;
}
.title-7 {
  color: #000000;
  text-align: center;
  font-family: "GeistMono-Regular", sans-serif;
  font-size: 24px;
  font-weight: 400;
  position: relative;
  align-self: stretch;
  height: 27px;
}
.subtitle-7 {
  color: #000000;
  text-align: center;
  font-family: "Outfit-SemiBold", sans-serif;
  font-size: 48px;
  font-weight: 600;
  position: relative;
  align-self: stretch;
  height: 60px;
}
.content-7 {
  background: #fbfbfb;
  border-radius: 20px;
  flex-shrink: 0;
  width: 1197px;
  height: 515px;
  position: relative;
  overflow: hidden;
}
.stats-container-7 {
  padding: 4px 26px 4px 26px;
  display: flex;
  flex-direction: row;
  gap: 85px;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 51px;
  top: 86px;
  overflow: hidden;
}
.stat-7 {
  padding: 2px 7px 2px 7px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 233px;
  position: relative;
  overflow: hidden;
}
.stat-value-7 {
  background: linear-gradient(
    267.54deg,
    rgba(255, 15, 196, 1) 0%,
    rgba(255, 84, 14, 1) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  font-family: "Outfit-Bold", sans-serif;
  font-size: 96px;
  font-weight: 700;
  position: relative;
  align-self: stretch;
  height: 106px;
}
.stat-description-7 {
  color: #000000;
  text-align: center;
  font-family: "Outfit-Bold", sans-serif;
  font-size: 24px;
  font-weight: 700;
  position: relative;
  align-self: stretch;
  height: 40px;
}
.stat-detail-7 {
  color: #000000;
  text-align: center;
  font-family: "Outfit-Regular", sans-serif;
  font-size: 16px;
  font-weight: 400;
  position: relative;
  width: 244px;
}
.stat2-7 {
  padding: 7px 12px 7px 12px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 379px;
  position: relative;
  overflow: hidden;
}
.stat-value2-7 {
  background: linear-gradient(
    267.54deg,
    rgba(255, 15, 196, 1) 0%,
    rgba(255, 84, 14, 1) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  font-family: "Outfit-Bold", sans-serif;
  font-size: 96px;
  font-weight: 700;
  position: relative;
  width: 244px;
  height: 106px;
}
.stat-description2-7 {
  color: #000000;
  text-align: center;
  font-family: "Outfit-Bold", sans-serif;
  font-size: 24px;
  font-weight: 700;
  position: relative;
  width: 219px;
  height: 38px;
}
.stat3-7 {
  padding: 23px 11px 23px 11px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 262px;
  position: relative;
  overflow: hidden;
}
.stat-value3-7 {
  background: linear-gradient(
    267.54deg,
    rgba(255, 15, 196, 1) 0%,
    rgba(255, 84, 14, 1) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  font-family: "Outfit-Bold", sans-serif;
  font-size: 96px;
  font-weight: 700;
  position: relative;
  width: 219px;
  height: 106px;
}
.stat-description3-7 {
  color: #000000;
  text-align: center;
  font-family: "Outfit-Bold", sans-serif;
  font-size: 24px;
  font-weight: 700;
  position: relative;
  width: 219px;
  height: 37px;
}
.button-container-7 {
  padding: 9px 4px 9px 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 257px;
  position: absolute;
  left: 470px;
  top: 389px;
  overflow: hidden;
}
.button-group-7 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.button-7 {
  background: var(
    --brand-color,
    linear-gradient(89.14deg, rgba(255, 89, 0, 1) 0%, rgba(255, 0, 229, 1) 100%)
  );
  border-radius: 20px;
  flex-shrink: 0;
  width: 112px;
  height: 36px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.button-7:hover {
  transform: scale(1.05);
}
.button-text-7 {
  color: #ffffff;
  text-align: left;
  font-family: "Outfit-SemiBold", sans-serif;
  font-size: 16px;
  line-height: 7.52px;
  font-weight: 600;
  position: absolute;
  left: 20px;
  top: 12px;
  width: 73px;
  height: 11px;
}
.button2-7 {
  border-radius: 20px;
  flex-shrink: 0;
  width: 112px;
  height: 36px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.button2-7:hover {
  transform: scale(1.05);
}
.button-text2-7 {
  color: #000000;
  text-align: left;
  font-family: "Outfit-SemiBold", sans-serif;
  font-size: 16px;
  line-height: 7.52px;
  font-weight: 600;
  position: absolute;
  left: 20px;
  top: 12px;
  width: 73px;
  height: 11px;
}
/* FIN SECTION 7 STYLES */
/* ========================================
   SECTION 8 - PORTFOLIO / GALERIE STYLES
   ======================================== */
.section-8,
.section-8 * {
  box-sizing: border-box;
}
.section-8 {
  background: #ffffff;
  padding: 100px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.container-8 {
  display: flex;
  flex-direction: column;
  gap: 139px;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  flex-shrink: 0;
  position: relative;
}
.header-8 {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 538px;
  position: relative;
  overflow: hidden;
}
.title-8 {
  color: #000000;
  text-align: center;
  font-family: "GeistMono-Regular", sans-serif;
  font-size: 24px;
  font-weight: 400;
  position: relative;
  align-self: stretch;
  height: 30px;
}
.subtitle-8 {
  color: #000000;
  text-align: center;
  font-family: "Outfit-SemiBold", sans-serif;
  font-size: 48px;
  font-weight: 600;
  position: relative;
  align-self: stretch;
  height: 60px;
}
.content-8 {
  display: flex;
  flex-direction: column;
  gap: 47px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.image-row-8 {
  display: flex;
  flex-direction: row;
  gap: 37px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.image-8 {
  border-radius: 20px;
  flex-shrink: 0;
  width: 814px;
  height: 495px;
  position: relative;
  overflow: hidden;
  object-fit: cover;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.image-8:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.frame-1707480685-8 {
  display: flex;
  flex-direction: row;
  gap: 47px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.image-row2-8 {
  display: flex;
  flex-direction: row;
  gap: 32px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
/* FIN SECTION 8 STYLES */
/* ========================================
   SECTION 9 - PARTENAIRES STYLES
   ======================================== */
.section-9,
.section-9 * {
  box-sizing: border-box;
}
.section-9 {
  background: #ffffff;
  padding: 115px 79px 137px 79px;
  display: flex;
  flex-direction: column;
  gap: 80px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.container-9 {
  display: flex;
  flex-direction: column;
  gap: 17px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 504px;
  min-height: 175px;
  position: relative;
  overflow: visible;
}
.section-title-9 {
  color: #000000;
  text-align: center;
  font-family: "GeistMono-Regular", sans-serif;
  font-size: 24px;
  font-weight: 400;
  position: relative;
  align-self: stretch;
  height: 28px;
}
.subtitle-9 {
  color: #000000;
  text-align: center;
  font-family: "Outfit-SemiBold", sans-serif;
  font-size: 48px;
  font-weight: 600;
  position: relative;
  width: 504px;
  min-height: 60px;
}
.logo-container-9 {
  background: #ffffff;
  padding: 0px 79px 0px 80px;
  display: flex;
  flex-direction: row;
  gap: 42.23px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  height: 184px;
  position: relative;
  overflow: hidden;
}
.logo-9 {
  flex-shrink: 0;
  width: 273.67px;
  height: 174px;
  position: relative;
  overflow: hidden;
  object-fit: cover;
  transition: transform 0.3s ease, opacity 0.3s ease;
  cursor: pointer;
  opacity: 0.7;
}
.logo-9:hover {
  transform: scale(1.05);
  opacity: 1;
}
.logo2-9 {
  flex-shrink: 0;
  width: 369px;
  height: 132px;
  position: relative;
  overflow: hidden;
  object-fit: cover;
  transition: transform 0.3s ease, opacity 0.3s ease;
  cursor: pointer;
  opacity: 0.7;
}
.logo2-9:hover {
  transform: scale(1.05);
  opacity: 1;
}
.logo-container2-9 {
  background: #ffffff;
  padding: 8.45px 12.68px 8.45px 62px;
  display: flex;
  flex-direction: row;
  gap: 42.26px;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  height: 166px;
  position: relative;
  overflow: hidden;
}
.logo3-9 {
  flex-shrink: 0;
  width: 260.3px;
  height: 132px;
  position: relative;
  overflow: hidden;
  object-fit: cover;
  transition: transform 0.3s ease, opacity 0.3s ease;
  cursor: pointer;
  opacity: 0.7;
}
.logo3-9:hover {
  transform: scale(1.05);
  opacity: 1;
}
.logo4-9 {
  flex-shrink: 0;
  width: 307.63px;
  height: 132px;
  position: relative;
  overflow: hidden;
  object-fit: cover;
  transition: transform 0.3s ease, opacity 0.3s ease;
  cursor: pointer;
  opacity: 0.7;
}
.logo4-9:hover {
  transform: scale(1.05);
  opacity: 1;
}
.logo5-9 {
  flex-shrink: 0;
  width: 250.16px;
  height: 152.13px;
  position: relative;
  overflow: hidden;
  object-fit: cover;
  transition: transform 0.3s ease, opacity 0.3s ease;
  cursor: pointer;
  opacity: 0.7;
}
.logo5-9:hover {
  transform: scale(1.05);
  opacity: 1;
}
.logo6-9 {
  flex-shrink: 0;
  width: 273.83px;
  height: 132px;
  position: relative;
  overflow: hidden;
  object-fit: cover;
  transition: transform 0.3s ease, opacity 0.3s ease;
  cursor: pointer;
  opacity: 0.7;
}
.logo6-9:hover {
  transform: scale(1.05);
  opacity: 1;
}
/* FIN SECTION 9 STYLES */

/* ========================================
   FOOTER STYLES
   ======================================== */
.footer,
.footer * {
  box-sizing: border-box;
}
.footer {
  background: #ffffff;
  padding: 100px 0px 0px 0px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  align-self: stretch;
  flex-shrink: 0;
  height: 1553px;
  position: relative;
}
.background-image {
  background: url('../assets/images/footer/Background Image.png') center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 79px 0px 79px 0px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  align-self: stretch;
  flex-shrink: 0;
  height: 1128px;
  position: relative;
}
.text-container {
  padding: 0px 45px 0px 45px;
  display: flex;
  flex-direction: column;
  gap: 334px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1386px;
  position: relative;
}
.header-image {
  background: url('../assets/images/footer/Header Image.png') center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 20px;
  flex-shrink: 0;
  width: 1167px;
  height: 432px;
  position: relative;
}
.audit-title-text {
  color: #ffffff;
  text-align: center;
  font-family: "Outfit-Bold", sans-serif;
  font-size: 40px;
  font-weight: 700;
  text-transform: uppercase;
  position: absolute;
  left: 270px;
  top: 166px;
  width: 627px;
}
.audit-description-text {
  color: #ffffff;
  text-align: center;
  font-family: "Outfit-Medium", sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  position: absolute;
  left: 179px;
  top: 289px;
}
.frame-1707480684 {
  display: flex;
  flex-direction: column;
  gap: 61px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.disclaimer-text {
  color: #ffffff;
  text-align: justify;
  font-family: "Outfit-Light", sans-serif;
  font-size: 20px;
  line-height: 100%;
  letter-spacing: -0.03em;
  font-weight: 300;
  position: relative;
  width: 1150px;
  min-height: 229px;
  display: flex;
  align-items: center;
}
.legals {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  min-height: 122.7px;
  position: relative;
}
.intsagram-and-contact-frame {
  border-style: solid;
  border-color: #ffffff;
  border-width: 0px 0px 1.17px 0px;
  flex-shrink: 0;
  width: 1150px;
  height: 29.34px;
  position: relative;
}
.bfdnd {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 658px;
  position: absolute;
  left: 0px;
  top: 1.28px;
}
.instagram-text {
  color: #ffffff;
  text-align: left;
  font-family: "Outfit-Regular", sans-serif;
  font-size: 14.081633567810059px;
  line-height: 18.78px;
  font-weight: 400;
  position: relative;
  width: 302px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.contact-text {
  color: #ffffff;
  text-align: left;
  font-family: "Outfit-Regular", sans-serif;
  font-size: 14.081633567810059px;
  line-height: 18.78px;
  font-weight: 400;
  position: relative;
  width: 348px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.policies {
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 831px;
  position: relative;
}
.privacy-policy {
  border-style: solid;
  border-color: #ffffff;
  border-width: 0px 1.17px 0px 0px;
  padding: 0px 15px 0px 15px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 193px;
  position: relative;
}
.privacy-policy-text {
  color: #ffffff;
  text-align: left;
  font-family: "Outfit-Regular", sans-serif;
  font-size: 14.081633567810059px;
  line-height: 18.78px;
  font-weight: 400;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.terms-of-use {
  border-style: solid;
  border-color: #ffffff;
  border-width: 0px 1.17px 0px 0px;
  padding: 0px 15px 0px 15px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.terms-of-use-text {
  color: #ffffff;
  text-align: center;
  font-family: "Outfit-Regular", sans-serif;
  font-size: 14.081633567810059px;
  line-height: 18.78px;
  font-weight: 400;
  position: relative;
  width: 141px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sales-and-refunds {
  border-style: solid;
  border-color: #ffffff;
  border-width: 0px 1.17px 0px 0px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 185px;
  position: relative;
}
.sales-and-refunds-text {
  color: #ffffff;
  text-align: center;
  font-family: "Outfit-Regular", sans-serif;
  font-size: 14.081633567810059px;
  line-height: 18.78px;
  font-weight: 400;
  position: relative;
  width: 177px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.legal {
  border-style: solid;
  border-color: #ffffff;
  border-width: 0px 1.17px 0px 0px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 67px;
  position: relative;
}
.legal-text {
  color: #ffffff;
  text-align: center;
  font-family: "Outfit-Regular", sans-serif;
  font-size: 14.081633567810059px;
  line-height: 18.78px;
  font-weight: 400;
  position: relative;
  width: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.plan-du-site {
  padding: 0px 15px 0px 15px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 94px;
  position: relative;
}
.sitemap-text {
  color: #ffffff;
  text-align: center;
  font-family: "Outfit-Regular", sans-serif;
  font-size: 14.081633567810059px;
  line-height: 18.78px;
  font-weight: 400;
  position: relative;
  width: 94px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.copy-and-country-frame {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  flex-shrink: 0;
  width: 1150px;
  height: 42.86px;
  position: relative;
}
.copyright-text {
  color: #ffffff;
  text-align: left;
  font-family: "Outfit-Regular", sans-serif;
  font-size: 14.081633567810059px;
  line-height: 18.78px;
  font-weight: 400;
  position: relative;
  width: 319.71px;
  height: 16.43px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.country-text {
  color: #ffffff;
  text-align: right;
  font-family: "Outfit-Regular", sans-serif;
  font-size: 14.081633567810059px;
  line-height: 18.78px;
  font-weight: 400;
  position: relative;
  width: 90.28px;
  height: 16.43px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.intersect {
  flex-shrink: 0;
  width: 1296px;
  height: 121.5px;
  position: relative;
  overflow: visible;
}
/* FIN FOOTER STYLES */