@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

/* =========================
   BASE
========================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: #07090f;
  color: #ffffff;
  font-family: "Manrope", Arial, sans-serif;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}


/* =========================
   HEADER
========================= */

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;

  padding: 0 7%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background: rgba(7, 9, 15, 0.7);
  backdrop-filter: blur(18px);

  border-bottom: 1px solid rgba(255,255,255,0.07);

  z-index: 1000;
}

.logo {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 3px;
}

.logo span {
  color: #00cfff;
  margin-left: 6px;
  font-size: 11px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 35px;
}

.nav a {
  color: #c8cad2;
  font-size: 15px;

  transition: 0.3s;
}

.nav a:hover {
  color: white;
  text-shadow: 0 0 15px #00cfff;
}

.menu-toggle {
  display: none;
}


/* =========================
   HERO
========================= */

.hero {
  position: relative;

  min-height: 100vh;

  padding: 150px 7% 80px;

  display: flex;
  align-items: center;

  overflow: hidden;
}

.hero-grille {
  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      rgba(255,255,255,0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,0.035) 1px,
      transparent 1px
    );

  background-size: 55px 55px;

  mask-image:
    linear-gradient(
      to bottom,
      black,
      transparent 85%
    );
}


/* =========================
   ORBES LUMINEUSES
========================= */

.orbe {
  position: absolute;

  width: 500px;
  height: 500px;

  border-radius: 50%;

  filter: blur(120px);

  opacity: 0.28;

  animation: flotter 8s ease-in-out infinite alternate;
}

.orbe-1 {
  background: #6c5cff;

  top: -150px;
  right: -120px;
}

.orbe-2 {
  background: #00cfff;

  bottom: -220px;
  left: -180px;

  animation-delay: 2s;
}

@keyframes flotter {

  from {
    transform: translate(0, 0) scale(1);
  }

  to {
    transform: translate(60px, 40px) scale(1.15);
  }

}


/* =========================
   CONTENU HERO
========================= */

.hero-contenu {
  position: relative;
  z-index: 5;

  width: 100%;
  max-width: 900px;
  min-width: 0;
}

.hero-label {
  color: #00cfff;

  font-size: 13px;
  font-weight: 700;

  letter-spacing: 4px;

  margin-bottom: 25px;
}

.hero h1 {
  font-size: clamp(55px, 7vw, 105px);

  line-height: 0.98;

  letter-spacing: -4px;

  max-width: 1000px;
}

.hero h1 span {
  display: block;

  color: transparent;

  background:
    linear-gradient(
      90deg,
      #ffffff,
      #6c5cff,
      #00cfff
    );

  background-clip: text;
  -webkit-background-clip: text;

  background-size: 200%;

  animation: texteGradient 5s linear infinite;
}

@keyframes texteGradient {

  0% {
    background-position: 0%;
  }

  100% {
    background-position: 200%;
  }

}

.hero-description {
  max-width: 650px;

  margin-top: 35px;

  color: #aeb2c0;

  font-size: 20px;
  line-height: 1.7;
}


/* =========================
   BOUTONS
========================= */

.hero-actions {
  margin-top: 45px;

  display: flex;
  gap: 18px;

  flex-wrap: wrap;
}

.bouton {
  position: relative;

  padding: 18px 28px;

  border-radius: 12px;

  font-weight: 700;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.bouton:hover {
  transform: translateY(-4px);
}

.bouton-principal {
  background:
    linear-gradient(
      135deg,
      #6c5cff,
      #00cfff
    );

  box-shadow:
    0 0 40px rgba(0, 207, 255, 0.2);
}

.bouton-principal:hover {
  box-shadow:
    0 0 55px rgba(0, 207, 255, 0.45);
}

.bouton-secondaire {
  background: rgba(255,255,255,0.04);

  border: 1px solid rgba(255,255,255,0.15);

  backdrop-filter: blur(10px);
}


/* =========================
   SCROLL INDICATOR
========================= */

.scroll-indicator {
  position: absolute;

  bottom: 35px;
  left: 7%;

  display: flex;
  align-items: center;
  gap: 12px;

  color: #777d8e;

  font-size: 12px;
  letter-spacing: 2px;
}

.scroll-indicator span {
  display: block;

  width: 35px;
  height: 1px;

  background: #00cfff;

  animation: ligneScroll 1.4s ease-in-out infinite alternate;
}

@keyframes ligneScroll {

  from {
    width: 20px;
  }

  to {
    width: 50px;
  }

}


/* =========================
   HALO INTERACTIF HERO
========================= */

.hero::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      350px circle at var(--halo-x, 50%) var(--halo-y, 50%),
      rgba(0, 207, 255, 0.14),
      rgba(108, 92, 255, 0.07) 35%,
      transparent 70%
    );

  pointer-events: none;

  z-index: 2;
}


/* EMPÊCHE LE SCROLL QUAND MENU OUVERT */

body.menu-ouvert {
  overflow: hidden;
}

body.menu-ouvert .header {
  background: rgba(5, 7, 14, 0.88);
  border-bottom-color: transparent;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 800px) {

  /* HEADER */

  .header {
    height: 80px;
    padding: 0 22px;

    transition:
      background 0.4s ease,
      border-color 0.4s ease;
  }

  .logo {
    position: relative;

    z-index: 1001;

    font-size: 18px;
  }


  /* =========================
     MENU PLEIN ÉCRAN
  ========================= */

  .nav {
  position: fixed;
  inset: 0;

  width: 100vw;
  height: 100dvh;

  display: flex;
  flex-direction: column;

  align-items: flex-start;
  justify-content: center;

  gap: 18px;

  padding:
    110px
    38px
    70px;

  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(108, 92, 255, 0.25),
      transparent 38%
    ),
    radial-gradient(
      circle at 10% 85%,
      rgba(0, 207, 255, 0.20),
      transparent 42%
    ),
    #05070e;

  opacity: 0;
  visibility: hidden;

  transform:
    translate3d(0, -100%, 0);

  transition:
    transform 0.62s cubic-bezier(.16, 1, .3, 1),
    opacity 0.25s ease,
    visibility 0.62s;

  will-change:
    transform,
    opacity;

  overflow: hidden;

  z-index: 999;
}


  .nav.active {
  opacity: 1;
  visibility: visible;

  transform:
    translate3d(0, 0, 0);
}


  /* LIGNE CYAN/VIOLET À GAUCHE */

  .nav::before {
    content: "";

    position: absolute;

    left: 24px;
    top: 20%;

    width: 2px;
    height: 60%;

    background:
      linear-gradient(
        to bottom,
        transparent,
        #6c5cff,
        #00cfff,
        transparent
      );

    box-shadow:
      0 0 22px rgba(0, 207, 255, 0.8);

    animation:
      ligneMenu
      2.5s
      ease-in-out
      infinite alternate;
  }


  /* HALO DU MENU */

  .nav::after {
  content: "";

  position: absolute;

  width: 420px;
  height: 420px;

  right: -210px;
  bottom: -180px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(0, 207, 255, 0.32) 0%,
      rgba(108, 92, 255, 0.18) 38%,
      transparent 72%
    );

  opacity: 0.85;

  animation:
    haloMenu
    7s
    ease-in-out
    infinite alternate;

  will-change: transform;

  pointer-events: none;
}


  /* =========================
     LIENS MENU
  ========================= */

  .nav a {
  position: relative;

  z-index: 5;

  width: 100%;

  padding:
    12px
    0
    12px
    55px;

  color: white;

  font-size:
    clamp(
      36px,
      11vw,
      54px
    );

  font-weight: 700;

  letter-spacing: -2px;

  opacity: 0;

  transform:
    translate3d(0, 30px, 0)
    scale(0.96);

  will-change:
    transform,
    opacity;

  -webkit-tap-highlight-color:
    transparent;
}


  .nav.active a {
    animation:
      lienMenuIn
      0.65s
      cubic-bezier(.16,1,.3,1)
      forwards;
  }


  .nav.active a:nth-of-type(1) {
    animation-delay: 0.12s;
  }

  .nav.active a:nth-of-type(2) {
    animation-delay: 0.20s;
  }

  .nav.active a:nth-of-type(3) {
    animation-delay: 0.28s;
  }

  .nav.active a:nth-of-type(4) {
    animation-delay: 0.36s;
  }


  /* NUMÉROS */

  .nav a::before {
    position: absolute;

    left: 0;
    top: 22px;

    color: #00cfff;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 2px;
  }


  .nav a:nth-of-type(1)::before {
    content: "01";
  }

  .nav a:nth-of-type(2)::before {
    content: "02";
  }

  .nav a:nth-of-type(3)::before {
    content: "03";
  }

  .nav a:nth-of-type(4)::before {
    content: "04";
  }


  /* PETIT TRAIT AU TOUCHER */

  .nav a::after {
    content: "";

    position: absolute;

    left: 55px;
    bottom: 3px;

    width: 0;
    height: 2px;

    background:
      linear-gradient(
        90deg,
        #6c5cff,
        #00cfff
      );

    box-shadow:
      0 0 15px rgba(0, 207, 255, 0.7);

    transition:
      width 0.3s ease;
  }


  .nav a:active {
    color: #00cfff;
  }

  .nav a:active::after {
    width: 70%;
  }


  /* =========================
     HAMBURGER
  ========================= */

  .menu-toggle {
    position: relative;

    z-index: 1001;

    display: block;

    width: 48px;
    height: 48px;

    border: none;

    border-radius: 50%;

    background: transparent;

    cursor: pointer;

    -webkit-tap-highlight-color:
      transparent;

    transition:
      background 0.35s ease,
      box-shadow 0.35s ease;
  }


  .menu-toggle.active {
    background:
      rgba(0, 207, 255, 0.08);

    box-shadow:
      0 0 0 1px
      rgba(0, 207, 255, 0.25),

      0 0 30px
      rgba(0, 207, 255, 0.22);
  }


  /* LES 3 TRAITS */

  .menu-toggle span {
    position: absolute;

    left: 9px;

    width: 30px;
    height: 2px;

    background: white;

    transition:
      top 0.4s cubic-bezier(.16,1,.3,1),
      transform 0.4s cubic-bezier(.16,1,.3,1),
      opacity 0.2s ease,
      background 0.3s ease,
      box-shadow 0.3s ease;
  }


  .menu-toggle span:nth-child(1) {
    top: 14px;
  }

  .menu-toggle span:nth-child(2) {
    top: 23px;
  }

  .menu-toggle span:nth-child(3) {
    top: 32px;
  }


  /* ☰ → X */

  .menu-toggle.active span:nth-child(1) {
    top: 23px;

    transform:
      rotate(45deg);
  }


  .menu-toggle.active span:nth-child(2) {
    opacity: 0;

    transform:
      scaleX(0);
  }


  .menu-toggle.active span:nth-child(3) {
    top: 23px;

    transform:
      rotate(-45deg);
  }


  .menu-toggle.active span {
    background: #00cfff;

    box-shadow:
      0 0 12px
      rgba(0, 207, 255, 0.85);
  }


  /* =========================
     HERO MOBILE
  ========================= */

  .hero {
    padding:
      135px
      24px
      100px;
  }


  .hero h1 {
  font-size: 48px;
  letter-spacing: -2px;
}


  .hero-description {
    font-size: 17px;
  }


  .hero-actions {
    flex-direction: column;
  }


  .bouton {
    width: 100%;

    text-align: center;
  }


  .orbe {
    width: 350px;
    height: 350px;
  }

}


/* =========================
   ANIMATIONS MENU
========================= */

@keyframes lienMenuIn {

  0% {
    opacity: 0;

    transform:
      translate3d(0, 30px, 0)
      scale(0.96);
  }

  100% {
    opacity: 1;

    transform:
      translate3d(0, 0, 0)
      scale(1);
  }

}


@keyframes haloMenu {

  from {
    transform:
      translate(0, 0)
      scale(1);
  }

  to {
    transform:
      translate(-90px, -70px)
      scale(1.3);
  }

}


@keyframes ligneMenu {

  from {
    opacity: 0.35;

    transform:
      scaleY(0.75);
  }

  to {
    opacity: 1;

    transform:
      scaleY(1);
  }

}
/* =========================
   SERVICES
========================= */

.services {
  position: relative;

  padding: 150px 7%;

  background:
    radial-gradient(
      circle at 15% 40%,
      rgba(108, 92, 255, 0.12),
      transparent 30%
    ),
    radial-gradient(
      circle at 85% 70%,
      rgba(0, 207, 255, 0.10),
      transparent 30%
    ),
    #07090f;

  overflow: hidden;
}


/* TITRE */

.services-entete {
  max-width: 1050px;

  margin-bottom: 80px;
}


.section-label {
  color: #00cfff;

  font-size: 12px;
  font-weight: 700;

  letter-spacing: 4px;

  margin-bottom: 22px;
}


.services h2 {
  font-size: clamp(42px, 6vw, 85px);

  line-height: 1;

  letter-spacing: -3px;

  max-width: 1000px;
}


.services h2 span {
  display: block;

  color: #777d8e;
}


.services-intro {
  max-width: 650px;

  margin-top: 30px;

  color: #9da2b2;

  font-size: 18px;
  line-height: 1.7;
}


/* GRILLE */

.services-grille {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 22px;
}


/* CARTE */

.service-card {
  --mouse-x: 50%;
  --mouse-y: 50%;

  position: relative;

  min-height: 430px;

  padding: 40px;

  display: flex;
  flex-direction: column;

  border:
    1px solid
    rgba(255, 255, 255, 0.08);

  border-radius: 24px;

  background:
    rgba(255, 255, 255, 0.025);

  overflow: hidden;

  transition:
    transform 0.4s cubic-bezier(.16,1,.3,1),
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}


/* LUMIÈRE SOURIS */

.service-card::before {
  content: "";

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      450px circle
      at var(--mouse-x)
      var(--mouse-y),

      rgba(0, 207, 255, 0.14),

      transparent 45%
    );

  opacity: 0;

  transition:
    opacity 0.4s ease;

  pointer-events: none;
}


.service-card:hover::before {
  opacity: 1;
}


.service-card:hover {
  transform:
    translateY(-10px);

  border-color:
    rgba(0, 207, 255, 0.35);

  box-shadow:
    0 30px 80px
    rgba(0, 0, 0, 0.35);
}


/* NUMÉRO */

.service-numero {
  position: absolute;

  right: 25px;
  top: 5px;

  color:
    rgba(255, 255, 255, 0.035);

  font-size: 110px;
  font-weight: 800;

  line-height: 1;

  pointer-events: none;
}


/* ICONE */

.service-icone {
  position: relative;

  z-index: 2;

  width: 55px;
  height: 55px;

  display: flex;

  align-items: center;
  justify-content: center;

  margin-bottom: 70px;

  border:
    1px solid
    rgba(0, 207, 255, 0.25);

  border-radius: 50%;

  background:
    rgba(0, 207, 255, 0.05);

  color: #00cfff;

  font-size: 22px;

  transition:
    transform 0.4s ease,
    background 0.4s ease,
    box-shadow 0.4s ease;
}


.service-card:hover
.service-icone {

  transform:
    rotate(10deg)
    scale(1.08);

  background:
    rgba(0, 207, 255, 0.12);

  box-shadow:
    0 0 35px
    rgba(0, 207, 255, 0.18);
}


/* TEXTE */

.service-card h3 {
  position: relative;

  z-index: 2;

  font-size: 29px;

  margin-bottom: 18px;
}


.service-card p {
  position: relative;

  z-index: 2;

  color: #979cab;

  line-height: 1.7;

  font-size: 15px;
}


/* TAGS */

.service-tags {
  position: relative;

  z-index: 2;

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: auto;

  padding-top: 30px;
}


.service-tags span {
  padding: 7px 11px;

  border:
    1px solid
    rgba(255, 255, 255, 0.09);

  border-radius: 100px;

  color: #aeb2c0;

  font-size: 11px;

  background:
    rgba(255,255,255,0.025);
}


/* =========================
   APPARITION AU SCROLL
========================= */

.reveal {
  opacity: 0;

  transform:
    translateY(50px);

  transition:
    opacity 0.9s
    cubic-bezier(.16,1,.3,1),

    transform 0.9s
    cubic-bezier(.16,1,.3,1);
}


.reveal.visible {
  opacity: 1;

  transform:
    translateY(0);
}
.services-grille .reveal:nth-child(2),
.stats-grille .reveal:nth-child(2) {
  transition-delay: 0.10s;
}

.services-grille .reveal:nth-child(3),
.stats-grille .reveal:nth-child(3) {
  transition-delay: 0.20s;
}

/* =========================
   SERVICES MOBILE
========================= */

@media (max-width: 900px) {

  .services {
    padding:
      110px
      24px;
  }


  .services-entete {
    margin-bottom: 50px;
  }


  .services h2 {
    letter-spacing: -2px;
  }


  .services-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .service-card {
    min-height: 360px;
    padding: 22px 16px;
  }

  .service-card:last-child {
    grid-column: 1 / -1;
  }

  .service-card h3 {
    font-size: 21px;
  }

  .service-card p {
    font-size: 13px;
    line-height: 1.55;
  }

  .service-icone {
    width: 46px;
    height: 46px;
    margin-bottom: 45px;
  }

  .service-numero {
    font-size: 80px;
    right: 12px;
  }

  .service-tags {
    gap: 5px;
  }

  .service-tags span {
    padding: 6px 8px;
    font-size: 9px;
  }

}
/* =========================
   REALISATIONS
========================= */

.realisations {
  position: relative;

  padding:
    160px
    7%
    180px;

  background:
    #05070d;

  overflow: hidden;
}


/* PETIT HALO DE FOND */

.realisations::before {
  content: "";

  position: absolute;

  width: 900px;
  height: 900px;

  left: -500px;
  top: 15%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(108, 92, 255, 0.11),
      transparent 65%
    );

  pointer-events: none;
}


/* =========================
   ENTETE
========================= */

.realisations-entete {
  max-width: 1100px;

  margin-bottom: 100px;
}


.realisations h2 {
  font-size:
    clamp(
      45px,
      7vw,
      95px
    );

  line-height: 0.98;

  letter-spacing: -4px;
}


.realisations h2 span {
  display: block;

  color: #717684;
}


/* =========================
   LISTE PROJETS
========================= */

.projets {
  display: flex;

  flex-direction: column;

  gap: 140px;
}


/* =========================
   PROJET
========================= */

.projet {
  position: relative;
}


/* =========================
   VISUEL
========================= */

.projet-visuel {
  --projet-x: 50%;
  --projet-y: 50%;

  position: relative;

  height:
    min(
      75vh,
      760px
    );

  min-height: 600px;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 70px;

  border-radius: 35px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.08
    );

  overflow: hidden;

  transform:
    translateZ(0);

  transition:
    transform 0.7s
    cubic-bezier(.16,1,.3,1),

    border-color 0.5s ease,

    box-shadow 0.5s ease;
}


/* PROJET 1 */

.projet-visuel-1 {

  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(0,207,255,.18),
      transparent 35%
    ),

    radial-gradient(
      circle at 80% 80%,
      rgba(108,92,255,.18),
      transparent 35%
    ),

    #0a0d15;
}


/* PROJET 2 */

.projet-visuel-2 {

  background:
    radial-gradient(
      circle at 75% 20%,
      rgba(255,70,70,.17),
      transparent 35%
    ),

    radial-gradient(
      circle at 20% 80%,
      rgba(255,145,0,.12),
      transparent 40%
    ),

    #0c0909;
}


/* PROJET 3 */

.projet-visuel-3 {

  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(173,80,255,.20),
      transparent 35%
    ),

    radial-gradient(
      circle at 80% 80%,
      rgba(0,207,255,.15),
      transparent 40%
    ),

    #090811;
}


/* =========================
   LUMIERE SOURIS
========================= */

.projet-lumiere {

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      500px circle
      at var(--projet-x)
      var(--projet-y),

      rgba(
        255,
        255,
        255,
        0.09
      ),

      transparent 45%
    );

  opacity: 0;

  transition:
    opacity 0.4s ease;

  pointer-events: none;
}


.projet-visuel:hover
.projet-lumiere {

  opacity: 1;
}


/* =========================
   HOVER
========================= */

.projet-visuel:hover {

  transform:
    scale(0.985);

  border-color:
    rgba(
      255,
      255,
      255,
      0.15
    );

  box-shadow:
    0
    60px
    120px
    rgba(
      0,
      0,
      0,
      0.45
    );
}


/* =========================
   GROS NUMERO
========================= */

.projet-numero {

  position: absolute;

  top: -50px;
  right: 30px;

  font-size:
    clamp(
      150px,
      25vw,
      350px
    );

  font-weight: 900;

  line-height: 1;

  color:
    rgba(
      255,
      255,
      255,
      0.025
    );

  letter-spacing: -15px;

  pointer-events: none;

  z-index: 1;
}


/* =========================
   MOCKUP NAVIGATEUR
========================= */

.mockup-site {

  position: relative;

  z-index: 5;

  width: min(
    1100px,
    92%
  );

  height: 80%;

  min-height: 430px;

  background: #090b10;

  border-radius: 18px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.12
    );

  overflow: hidden;

  box-shadow:
    0
    50px
    120px
    rgba(
      0,
      0,
      0,
      0.55
    );

  transform:
    perspective(1200px)
    rotateX(2deg)
    rotateY(-2deg)
    scale(0.96);

  transition:
    transform 0.8s
    cubic-bezier(.16,1,.3,1);
}


.projet-visuel:hover
.mockup-site {

  transform:
    perspective(1200px)
    rotateX(0)
    rotateY(0)
    scale(1);
}


/* =========================
   BARRE NAVIGATEUR
========================= */

.mockup-barre {

  height: 45px;

  display: flex;

  align-items: center;

  border-bottom:
    1px solid
    rgba(
      255,
      255,
      255,
      0.07
    );

  background:
    rgba(
      255,
      255,
      255,
      0.025
    );

  padding:
    0
    18px;
}


.mockup-points {

  display: flex;

  gap: 6px;
}


.mockup-points span {

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    rgba(
      255,
      255,
      255,
      0.2
    );
}


.mockup-url {
  margin: auto;

  padding-right: 45px;

  max-width: 70%;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

  color: #5e6370;

  font-size: 10px;

  letter-spacing: 1px;
}

/* =========================
   INTERIEUR MOCKUP
========================= */

.mockup-contenu {

  position: relative;

  height:
    calc(
      100% - 45px
    );

  padding: 35px 45px;

  overflow: hidden;
}


/* ARCHITECTURE */

.architecture {

  background:

    linear-gradient(
      90deg,
      rgba(
        0,
        0,
        0,
        .75
      ),

      rgba(
        0,
        0,
        0,
        .25
      )
    ),

    radial-gradient(
      circle at 80% 50%,
      rgba(
        0,
        207,
        255,
        .20
      ),

      transparent 35%
    ),

    #10151b;
}


/* PERFORMANCE */

.performance {

  background:

    linear-gradient(
      90deg,
      rgba(
        0,
        0,
        0,
        .8
      ),

      rgba(
        0,
        0,
        0,
        .15
      )
    ),

    radial-gradient(
      circle at 75% 50%,
      rgba(
        255,
        70,
        30,
        .25
      ),

      transparent 35%
    ),

    #120a08;
}


/* ELEVATION */

.elevation {

  background:

    linear-gradient(
      90deg,
      rgba(
        0,
        0,
        0,
        .8
      ),

      rgba(
        0,
        0,
        0,
        .2
      )
    ),

    radial-gradient(
      circle at 75% 40%,
      rgba(
        156,
        78,
        255,
        .28
      ),

      transparent 38%
    ),

    #0e0917;
}


/* =========================
   NAV MOCKUP
========================= */

.mockup-navigation {

  position: relative;

  z-index: 3;

  font-size: 13px;

  font-weight: 800;

  letter-spacing: 2px;
}


.mockup-navigation span {

  color: #777e8b;

  font-size: 8px;

  margin-left: 6px;
}


/* =========================
   HERO MOCKUP
========================= */

.mockup-hero {

  position: absolute;

  left: 45px;
  bottom: 55px;

  max-width: 620px;
}


.mockup-hero small {

  display: block;

  margin-bottom: 18px;

  color: #969ca8;

  font-size: 9px;

  letter-spacing: 3px;
}


.mockup-hero h3 {

  font-size:
    clamp(
      40px,
      6vw,
      85px
    );

  line-height: .95;

  letter-spacing: -4px;
}


.mockup-hero h3 span {

  display: block;

  color: #858b96;
}


.mockup-bouton {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  width: fit-content;

  margin-top: 28px;

  padding:
    12px
    20px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      .18
    );

  border-radius: 50px;

  color: #dce0e8;

  font-size: 10px;

  letter-spacing: 1px;

  background:
    rgba(
      255,
      255,
      255,
      .04
    );
}


/* =========================
   INFOS SOUS PROJET
========================= */

.projet-infos {

  display: flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap: 25px;

  padding:
    28px
    8px
    0;
}


.projet-categorie {

  display: block;

  margin-bottom: 10px;

  color: #727886;

  font-size: 10px;

  letter-spacing: 3px;
}


.projet-infos h3 {

  font-size:
    clamp(
      28px,
      4vw,
      48px
    );

  letter-spacing: -2px;
}


.projet-annee {

  color: #777c87;

  font-size: 13px;

  letter-spacing: 2px;
}


/* =========================
   MOBILE REALISATIONS
========================= */

@media (max-width: 800px) {

  .realisations {

    padding:
      120px
      24px
      130px;
  }


  .realisations-entete {

    margin-bottom:
      65px;
  }


  .realisations h2 {

    letter-spacing:
      -2px;
  }


  .projets {

    gap: 90px;
  }


  .projet-visuel {

    height: 520px;

    min-height: 520px;

    padding: 25px;

    border-radius:
      24px;
  }


  .mockup-site {

    width: 100%;

    height: 78%;

    min-height: 360px;

    border-radius:
      13px;
  }


  .mockup-contenu {

    padding:
      25px;
  }


  .mockup-hero {
  left: 22px;
  right: 22px;

  bottom: 24px;

  max-width: none;
}


.mockup-hero small {
  margin-bottom: 12px;

  font-size: 8px;

  letter-spacing: 2px;
}


.mockup-hero h3 {
  font-size: 34px;

  line-height: 0.94;

  letter-spacing: -2px;
}


.mockup-bouton {
  margin-top: 18px;

  padding:
    10px
    16px;
}


  .projet-numero {

    top: -20px;

    right: 15px;

    font-size:
      180px;

    letter-spacing:
      -8px;
  }


  .projet-infos {

    padding-top:
      22px;
  }


  .projet-categorie {

    font-size:
      9px;

    letter-spacing:
      2px;
  }


  .projet-infos h3 {

    font-size:
      27px;
  }

}
/* =========================
   METHODE
========================= */

.methode {
  position: relative;

  padding:
    170px
    7%
    190px;

  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(108, 92, 255, 0.10),
      transparent 30%
    ),

    radial-gradient(
      circle at 10% 70%,
      rgba(0, 207, 255, 0.08),
      transparent 30%
    ),

    #07090f;

  overflow: hidden;
}


/* GROS HALO */

.methode::before {
  content: "";

  position: absolute;

  width: 700px;
  height: 700px;

  right: -400px;
  top: 35%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(0, 207, 255, 0.10),
      transparent 65%
    );

  pointer-events: none;
}


/* =========================
   ENTETE
========================= */

.methode-entete {
  max-width: 1050px;

  margin-bottom: 130px;
}


.methode h2 {
  font-size:
    clamp(
      45px,
      7vw,
      95px
    );

  line-height: 0.98;

  letter-spacing: -4px;
}


.methode h2 > span {
  display: block;

  color: #717684;
}


.methode-intro {
  max-width: 650px;

  margin-top: 30px;

  color: #9297a6;

  font-size: 18px;

  line-height: 1.7;
}


/* =========================
   TIMELINE
========================= */

.methode-timeline {
  --progress: 0%;

  position: relative;

  max-width: 1150px;

  margin: auto;
}


/* LIGNE SOMBRE */

.timeline-ligne {
  position: absolute;

  left: 48px;
  top: 20px;
  bottom: 20px;

  width: 2px;

  background:
    rgba(
      255,
      255,
      255,
      0.08
    );

  overflow: hidden;
}


/* LIGNE QUI SE REMPLIT */

.timeline-progression {
  position: absolute;

  left: 0;
  top: 0;

  width: 100%;

  height:
    var(--progress);

  background:
    linear-gradient(
      to bottom,
      #6c5cff,
      #00cfff
    );

  box-shadow:
    0 0 18px
    rgba(
      0,
      207,
      255,
      0.8
    );

  transition:
    height 0.08s linear;
}


/* =========================
   ETAPE
========================= */

.methode-etape {
  position: relative;

  min-height: 430px;

  display: grid;

  grid-template-columns:
    130px
    160px
    1fr;

  align-items: start;

  padding:
    30px
    0
    100px;

  opacity: 0.35;

  transform:
    translateY(25px);

  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}


.methode-etape.active {
  opacity: 1;

  transform:
    translateY(0);
}


/* =========================
   POINT
========================= */

.methode-point {
  position: relative;

  z-index: 5;

  width: 98px;
  height: 60px;

  display: flex;

  align-items: center;

  justify-content: center;
}


.methode-point span {
  width: 12px;
  height: 12px;

  border-radius: 50%;

  background: #252a35;

  border:
    2px solid
    #555c6a;

  transition:
    background 0.5s ease,
    border-color 0.5s ease,
    box-shadow 0.5s ease,
    transform 0.5s ease;
}


.methode-etape.active
.methode-point span {

  background:
    #00cfff;

  border-color:
    white;

  transform:
    scale(1.2);

  box-shadow:
    0 0 0 7px
    rgba(
      0,
      207,
      255,
      0.08
    ),

    0 0 30px
    rgba(
      0,
      207,
      255,
      0.9
    );
}


/* =========================
   NUMERO
========================= */

.methode-numero {
  padding-top: 13px;

  color:
    rgba(
      255,
      255,
      255,
      0.13
    );

  font-size: 16px;

  font-weight: 700;

  letter-spacing: 4px;

  transition:
    color 0.5s ease;
}


.methode-etape.active
.methode-numero {

  color:
    #00cfff;
}


/* =========================
   CONTENU
========================= */

.methode-contenu {
  max-width: 720px;

  padding:
    0
    0
    20px;
}


.methode-label {
  display: block;

  margin-bottom: 25px;

  color: #727887;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 4px;
}


.methode-contenu h3 {
  font-size:
    clamp(
      38px,
      5vw,
      70px
    );

  line-height: 1;

  letter-spacing: -3px;
}


.methode-contenu h3 span {
  display: block;

  color: #777d8b;

  transition:
    color 0.7s ease;
}


.methode-etape.active
.methode-contenu h3 span {

  color: #aeb4c1;
}


.methode-contenu p {
  max-width: 570px;

  margin-top: 27px;

  color: #858b99;

  font-size: 16px;

  line-height: 1.8;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 800px) {

  .methode {
    padding:
      120px
      24px
      130px;
  }


  .methode-entete {
    margin-bottom:
      85px;
  }


  .methode h2 {
    letter-spacing:
      -2px;
  }


  .methode-intro {
    font-size:
      16px;
  }


  .timeline-ligne {
  left: 10px;

  top: 10px;
  bottom: 20px;
}


  .methode-etape {
    min-height: 380px;

    grid-template-columns:
      38px
      1fr;

    padding:
      15px
      0
      75px;
  }
.methode-etape:last-child {
  min-height: auto;

  padding-bottom: 20px;
}

  .methode-point {
  position: relative;
  left: 1px;

  width: 20px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;
}


  .methode-numero {
    position: absolute;

    right: 0;
    top: 15px;

    font-size: 12px;
  }


  .methode-contenu {
    grid-column: 2;

    padding-left:
      12px;
  }


  .methode-label {
    margin-bottom:
      20px;

    font-size:
      9px;

    letter-spacing:
      3px;
  }


  .methode-contenu h3 {
    font-size:
      38px;

    letter-spacing:
      -2px;
  }


  .methode-contenu p {
    font-size:
      14px;

    line-height:
      1.7;
  }

}
/* =========================
   STATS
========================= */

.stats {
  position: relative;

  padding:
    150px
    7%
    170px;

  background:
    #05070d;

  overflow: hidden;
}


/* HALO DE FOND */

.stats::before {
  content: "";

  position: absolute;

  width: 700px;
  height: 700px;

  left: 50%;
  top: 50%;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(0, 207, 255, 0.08),
      rgba(108, 92, 255, 0.04) 40%,
      transparent 70%
    );

  pointer-events: none;
}


/* =========================
   ENTETE
========================= */

.stats-entete {
  position: relative;

  z-index: 2;

  max-width: 950px;

  margin-bottom: 75px;
}


.stats h2 {
  font-size:
    clamp(
      48px,
      7vw,
      95px
    );

  line-height: 0.95;

  letter-spacing: -4px;
}


.stats h2 span {
  display: block;

  color: #717684;
}


/* =========================
   GRILLE
========================= */

.stats-grille {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 18px;
}


/* =========================
   CARTE
========================= */

.stat-card {
  --stat-x: 50%;
  --stat-y: 50%;

  position: relative;

  min-height: 390px;

  padding:
    40px
    35px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  border:
    1px solid
    rgba(255,255,255,0.08);

  border-radius: 25px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.035),
      rgba(255,255,255,0.01)
    );

  overflow: hidden;

  transition:
    transform 0.45s
    cubic-bezier(.16,1,.3,1),

    border-color 0.4s ease,

    box-shadow 0.4s ease;
}


.stat-card:hover {
  transform:
    translateY(-8px);

  border-color:
    rgba(0,207,255,0.3);

  box-shadow:
    0 30px 80px
    rgba(0,0,0,0.35);
}


/* =========================
   LUEUR SOURIS
========================= */

.stat-lueur {
  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      400px circle
      at var(--stat-x)
      var(--stat-y),

      rgba(0,207,255,0.15),

      transparent 45%
    );

  opacity: 0;

  transition:
    opacity 0.4s ease;

  pointer-events: none;
}


.stat-card:hover
.stat-lueur {
  opacity: 1;
}


/* =========================
   GROS CHIFFRE
========================= */

.stat-valeur {
  position: absolute;

  top: 25px;
  left: 30px;

  display: flex;

  align-items: flex-start;

  color: white;

  font-size:
    clamp(
      75px,
      9vw,
      145px
    );

  font-weight: 800;

  line-height: 1;

  letter-spacing: -7px;
}


.stat-valeur > span:not(.stat-compteur) {
  margin:
    8px
    0
    0
    7px;

  color: #00cfff;

  font-size: 30px;

  letter-spacing: 0;
}


/* PETITE LIGNE */

.stat-card::after {
  content: "";

  position: absolute;

  left: 35px;
  right: 35px;

  bottom: 120px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      #00cfff,
      rgba(108,92,255,0.7),
      transparent
    );

  transform:
    scaleX(0);

  transform-origin:
    left;

  transition:
    transform 0.7s
    cubic-bezier(.16,1,.3,1);
}


.stat-card:hover::after {
  transform:
    scaleX(1);
}


/* =========================
   TEXTE
========================= */

.stat-card h3 {
  position: relative;

  z-index: 2;

  margin-bottom: 12px;

  font-size: 27px;

  letter-spacing: -1px;
}


.stat-card p {
  position: relative;

  z-index: 2;

  color: #888e9c;

  font-size: 14px;

  line-height: 1.65;
}


/* =========================
   MOBILE STATS
========================= */

@media (max-width: 800px) {

  .stats {
    padding:
      120px
      24px
      130px;
  }


  .stats-entete {
    margin-bottom:
      55px;
  }


  .stats h2 {
    letter-spacing:
      -2px;
  }


  .stats-grille {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap: 12px;
  }


  .stat-card {
    min-height: 300px;

    padding:
      24px
      17px;

    border-radius:
      20px;
  }


  .stat-card:last-child {
    grid-column:
      1 / -1;

    min-height:
      280px;
  }


  .stat-valeur {
    top: 20px;
    left: 16px;

    font-size:
      70px;

    letter-spacing:
      -5px;
  }


  .stat-valeur > span:not(.stat-compteur) {
  margin-top:
    4px;

  font-size:
    20px;
}
.stat-card:first-child .stat-valeur {
  font-size: 58px;
  letter-spacing: -4px;
}

.stat-card:first-child
.stat-valeur > span:not(.stat-compteur) {
  margin-left: 4px;
  font-size: 16px;
}

  .stat-card h3 {
    font-size:
      21px;
  }


  .stat-card p {
    font-size:
      12px;

    line-height:
      1.55;
  }


 .stat-card::after {
  left: 17px;
  right: 17px;

  bottom:
    135px;

  transform: scaleX(1);
}

.stat-card:first-child::after {
  bottom: 115px;
}


  .stat-card:last-child p {
    max-width:
      300px;
  }

}
/* =========================
   CONTACT
========================= */

.contact {
  --contact-x: 50%;
  --contact-y: 50%;

  position: relative;

  min-height: 100vh;

  padding:
    170px
    7%
    45px;

  background:
    #04060b;

  overflow: hidden;
}


/* =========================
   GRILLE
========================= */

.contact-grille {
  position: absolute;

  inset: 0;

  background-image:
    linear-gradient(
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    );

  background-size:
    55px 55px;

  mask-image:
    radial-gradient(
      circle at center,
      black,
      transparent 75%
    );

  pointer-events: none;
}


/* =========================
   HALO INTERACTIF
========================= */

.contact::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      500px circle
      at var(--contact-x)
      var(--contact-y),

      rgba(0,207,255,.11),

      rgba(108,92,255,.05) 35%,

      transparent 70%
    );

  pointer-events: none;

  z-index: 1;
}


/* =========================
   ORBES
========================= */

.contact-orbe {
  position: absolute;

  border-radius: 50%;

  filter: blur(120px);

  pointer-events: none;

  animation:
    contactFlotte
    9s
    ease-in-out
    infinite alternate;
}


.contact-orbe-1 {
  width: 500px;
  height: 500px;

  right: -220px;
  top: 10%;

  background:
    rgba(108,92,255,.23);
}


.contact-orbe-2 {
  width: 430px;
  height: 430px;

  left: -220px;
  bottom: 0;

  background:
    rgba(0,207,255,.15);

  animation-delay:
    2s;
}


@keyframes contactFlotte {

  from {
    transform:
      translate(0,0)
      scale(1);
  }

  to {
    transform:
      translate(
        70px,
        -40px
      )
      scale(1.18);
  }

}


/* =========================
   CERCLES DECORATIFS
========================= */

.contact-cercle {
  position: absolute;

  right: -180px;
  top: -180px;

  width: 550px;
  height: 550px;

  border-radius: 50%;

  border:
    1px solid
    rgba(255,255,255,.05);

  animation:
    rotationContact
    25s
    linear
    infinite;

  pointer-events: none;
}


.contact-cercle span {
  position: absolute;

  inset: 45px;

  border-radius: 50%;

  border:
    1px solid
    rgba(0,207,255,.08);
}


.contact-cercle span:nth-child(2) {
  inset: 100px;

  border-color:
    rgba(108,92,255,.12);
}


.contact-cercle span:nth-child(3) {
  inset: 155px;

  border-color:
    rgba(255,255,255,.06);
}


@keyframes rotationContact {

  to {
    transform:
      rotate(360deg);
  }

}


/* =========================
   STRUCTURE
========================= */

.contact-contenu {
  position: relative;

  z-index: 5;

  display: grid;

  grid-template-columns:
    1.05fr
    .95fr;

  gap: 80px;

  max-width: 1500px;

  margin:
    0 auto 120px;

  align-items:
    center;
}


/* =========================
   GAUCHE
========================= */

.contact-gauche {
  max-width: 760px;
}


.contact-disponible {
  width: fit-content;

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 45px;

  padding:
    9px
    14px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:
    100px;

  color:
    #949aa8;

  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    2px;

  background:
    rgba(255,255,255,.025);
}


.contact-disponible span {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    #00e59b;

  box-shadow:
    0 0 15px
    rgba(0,229,155,.9);

  animation:
    pulseDisponible
    1.8s
    ease-in-out
    infinite;
}


@keyframes pulseDisponible {

  50% {
    opacity: .4;

    transform:
      scale(.75);
  }

}


.contact h2 {
  font-size:
    clamp(
      58px,
      8vw,
      125px
    );

  line-height:
    .88;

  letter-spacing:
    -6px;
}


.contact h2 span {
  display: block;

  color: transparent;

  background:
    linear-gradient(
      90deg,
      #ffffff,
      #777cff,
      #00cfff
    );

  background-size:
    200%;

  background-clip:
    text;

  -webkit-background-clip:
    text;

  animation:
    contactGradient
    6s
    linear
    infinite;
}


@keyframes contactGradient {

  to {
    background-position:
      200%;
  }

}


.contact-description {
  max-width: 600px;

  margin-top: 38px;

  color: #9197a6;

  font-size: 18px;

  line-height: 1.8;
}


/* =========================
   INFOS
========================= */

.contact-infos {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      1fr
    );

  gap: 12px;

  margin-top: 55px;
}


.contact-info {
  position: relative;

  padding:
    25px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:
    18px;

  background:
    rgba(255,255,255,.025);

  transition:
    transform .35s ease,
    border-color .35s ease,
    background .35s ease;
}


.contact-info:hover {
  transform:
    translateY(-5px);

  border-color:
    rgba(0,207,255,.25);

  background:
    rgba(0,207,255,.035);
}


.contact-info-label {
  display: block;

  margin-bottom: 11px;

  color: #656c7a;

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 3px;
}


.contact-info strong {
  font-size: 14px;
}


.contact-fleche {
  position: absolute;

  right: 18px;
  top: 18px;

  color: #00cfff;

  font-size: 18px;
}


/* =========================
   CARTE FORMULAIRE
========================= */

.contact-card {
  --card-x: 50%;
  --card-y: 50%;

  position: relative;

  padding:
    38px;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius:
    30px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.065),
      rgba(255,255,255,.018)
    );

  backdrop-filter:
    blur(25px);

  box-shadow:
    0 45px 100px
    rgba(0,0,0,.45);

  overflow: hidden;
}


.contact-card::before {
  content: "";

  position: absolute;

  inset: 0;

  border-radius:
    inherit;

  padding: 1px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.25),
      rgba(0,207,255,.18),
      transparent 45%,
      rgba(108,92,255,.14)
    );

  mask:
    linear-gradient(#000 0 0)
    content-box,

    linear-gradient(#000 0 0);

  mask-composite:
    exclude;

  pointer-events:
    none;
}


.contact-card-lueur {
  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      420px circle
      at var(--card-x)
      var(--card-y),

      rgba(0,207,255,.10),

      transparent 45%
    );

  pointer-events: none;
}


.contact-card-entete {
  position: relative;

  z-index: 2;

  display: flex;

  justify-content:
    space-between;

  margin-bottom:
    40px;

  padding-bottom:
    22px;

  border-bottom:
    1px solid
    rgba(255,255,255,.07);

  color: #8e94a1;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 3px;
}


.contact-card-numero {
  color: #00cfff;
}


/* =========================
   FORMULAIRE
========================= */

.contact-form {
  position: relative;

  z-index: 3;
}


.champ {
  margin-bottom:
    28px;
}


.champ label {
  display: block;

  margin-bottom:
    10px;

  color: #727987;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 2px;

  text-transform:
    uppercase;
}


.champ input,
.champ textarea {
  width: 100%;

  border: none;

  border-bottom:
    1px solid
    rgba(255,255,255,.12);

  outline: none;

  padding:
    11px 0 14px;

  background:
    transparent;

  color: white;

  font-family:
    inherit;

  font-size:
    18px;

  resize:
    none;

  transition:
    border-color .3s ease,
    box-shadow .3s ease;
}


.champ input::placeholder,
.champ textarea::placeholder {
  color:
    #4f5561;
}


.champ input:focus,
.champ textarea:focus {
  border-color:
    #00cfff;

  box-shadow:
    0 5px 15px
    -12px
    #00cfff;
}


/* =========================
   CHOIX PROJET
========================= */

.contact-choix {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  padding-top:
    5px;
}


.choix-projet {
  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius:
    100px;

  padding:
    9px
    14px;

  background:
    rgba(255,255,255,.02);

  color:
    #7e8491;

  font-family:
    inherit;

  cursor:
    pointer;

  transition:
    color .3s ease,
    background .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}


.choix-projet.active {
  color:
    white;

  border-color:
    rgba(0,207,255,.4);

  background:
    rgba(0,207,255,.08);

  box-shadow:
    0 0 25px
    rgba(0,207,255,.07);
}


/* =========================
   BOUTON
========================= */

.contact-submit {
  position: relative;

  width: 100%;

  margin-top:
    10px;

  padding:
    20px
    22px;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  border: none;

  border-radius:
    14px;

  background:
    linear-gradient(
      120deg,
      #6c5cff,
      #00cfff
    );

  color:
    white;

  font-family:
    inherit;

  font-size:
    14px;

  font-weight:
    800;

  cursor:
    pointer;

  overflow:
    hidden;

  box-shadow:
    0 15px 45px
    rgba(0,207,255,.15);

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}


.contact-submit::before {
  content: "";

  position: absolute;

  top: 0;
  left: -120%;

  width: 70%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.35),
      transparent
    );

  transform:
    skewX(-20deg);

  transition:
    left .65s ease;
}


.contact-submit:hover::before {
  left: 150%;
}


.contact-submit:hover {
  transform:
    translateY(-4px);

  box-shadow:
    0 22px 55px
    rgba(0,207,255,.27);
}


.contact-submit span {
  position: relative;

  z-index: 2;
}


.submit-fleche {
  font-size:
    22px;

  transition:
    transform .3s ease;
}


.contact-submit:hover
.submit-fleche {
  transform:
    translate(
      4px,
      -4px
    );
}


.contact-status {
  min-height:
    18px;

  margin-top:
    15px;

  color:
    #00cfff;

  font-size:
    11px;
}


/* =========================
   FOOTER
========================= */

.contact-footer {
  position: relative;

  z-index: 5;

  display: flex;

  align-items: center;

  justify-content:
    space-between;

  padding-top:
    30px;

  border-top:
    1px solid
    rgba(255,255,255,.07);

  color: #555b68;

  font-size: 9px;

  letter-spacing: 2px;
}


/* =========================
   CONTACT MOBILE
========================= */

@media (max-width: 800px) {

  .contact {
    padding:
      120px
      24px
      30px;
  }


  .contact-contenu {
    grid-template-columns:
      1fr;

    gap:
      70px;

    margin-bottom:
      80px;
  }


  .contact-disponible {
    margin-bottom:
      35px;

    font-size:
      8px;

    letter-spacing:
      1.5px;
  }


  .contact h2 {
    font-size:
      58px;

    line-height:
      .9;

    letter-spacing:
      -4px;
  }


  .contact-description {
    margin-top:
      30px;

    font-size:
      15px;

    line-height:
      1.7;
  }


  .contact-infos {
    grid-template-columns:
      1fr;

    margin-top:
      40px;
  }


  .contact-card {
    padding:
      28px
      20px;

    border-radius:
      24px;
  }


  .contact-card-entete {
    font-size:
      8px;

    letter-spacing:
      2px;
  }


  .champ input,
  .champ textarea {
    font-size:
      16px;
  }


  .contact-submit {
    padding:
      18px;
  }


.contact-footer {
  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    12px;

  font-size:
    10px;

  line-height:
    1.5;

  letter-spacing:
    1.8px;
}


  .contact-cercle {
    width:
      350px;

    height:
      350px;

    right:
      -190px;

    top:
      -100px;
  }

}
/* =========================
   OPTIMISATION MOBILE
========================= */

@media (max-width: 800px) {

  .contact-orbe {
    animation: none;

    filter:
      blur(80px);
  }


  .contact-cercle {
    animation:
      rotationContact
      60s
      linear
      infinite;
  }


.contact-card {
  backdrop-filter: none;

  -webkit-backdrop-filter: none;

  background:
    linear-gradient(
      145deg,
      rgba(20, 24, 35, 0.96),
      rgba(8, 11, 18, 0.96)
    );
}

}

@media (max-width: 800px) {

  .service-card:active,
  .stat-card:active {
    transform:
      scale(0.975);

    border-color:
      rgba(0, 207, 255, 0.35);
  }


  .contact-info:active {
    transform:
      scale(0.97);

    border-color:
      rgba(0, 207, 255, 0.35);
  }


  .contact-submit:active {
    transform:
      scale(0.98);
  }

}
/* =========================
   CAPTURE REELLE MOCKUP
========================= */

.mockup-contenu-capture {
  padding: 0;
}

.mockup-capture-zone {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.mockup-capture-image {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: top center;

  transform: scale(1.04);
}

.mockup-capture-degrade {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.02) 0%,
      rgba(0, 0, 0, 0.06) 35%,
      rgba(0, 0, 0, 0.22) 62%,
      rgba(0, 0, 0, 0.78) 100%
    );

  pointer-events: none;
}

.mockup-bouton-overlay {
  position: absolute;

  left: 20px;
  bottom: 18px;

  z-index: 3;

  background:
    rgba(8, 10, 18, 0.88);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border:
    1px solid
    rgba(255,255,255,0.12);
}

@media (max-width: 800px) {

.mockup-bouton-overlay {
  left: 14px;
  bottom: 14px;
}

}
/* =========================
   EFFET PREMIUM SUD AZUR
========================= */

.projet:first-child .mockup-site {
  transform:
    perspective(1400px)
    rotateX(7deg)
    rotateY(-8deg);

  transform-origin:
    center center;

  backface-visibility: hidden;

  will-change:
    transform;

  box-shadow:
    0 35px 80px
    rgba(0, 0, 0, 0.40),

    0 0 0 1px
    rgba(255, 255, 255, 0.04)
    inset;

  transition:
    transform 0.55s
    cubic-bezier(.16,1,.3,1),

    box-shadow 0.4s ease;
}


.projet:first-child .mockup-site::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      125deg,
      rgba(255,255,255,0.09) 0%,
      transparent 20%,
      transparent 62%,
      rgba(0,207,255,0.07) 100%
    );

  pointer-events: none;

  opacity: 0.65;
}


.projet:first-child:hover .mockup-site {
  transform:
    perspective(1400px)
    rotateX(3deg)
    rotateY(-3deg)
    translateY(-8px);

  box-shadow:
    0 48px 100px
    rgba(0, 0, 0, 0.48),

    0 0 40px
    rgba(0, 207, 255, 0.08);
}


.projet:first-child .mockup-capture-image {
  transition:
    transform 0.6s
    cubic-bezier(.16,1,.3,1);
}


.projet:first-child:hover .mockup-capture-image {
  transform:
    scale(1.07);
}


/* =========================
   MOBILE
========================= */

@media (max-width: 800px) {

  .projet:first-child .mockup-site {
    transform:
      perspective(1200px)
      rotateX(3deg)
      rotateY(-4deg);

    box-shadow:
      0 25px 55px
      rgba(0, 0, 0, 0.35);
  }


  .projet:first-child:hover .mockup-site {
    transform:
      perspective(1200px)
      rotateX(3deg)
      rotateY(-4deg);
  }


  .projet:first-child .mockup-site::before {
    opacity: 0.45;
  }


  .projet:first-child:hover .mockup-capture-image {
    transform:
      scale(1.04);
  }

}

/* =========================
   PERFORMANCE MOBILE FINALE
   Garde le design, allège uniquement les effets coûteux
========================= */

@media (max-width: 800px) {

  /* Header fixe : le blur est coûteux pendant le scroll sur Android. */
  .header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(7, 9, 15, 0.96);
  }

  /* Même rendu général sans blur temps réel sur les petits éléments visibles. */
  .bouton-secondaire,
  .mockup-bouton-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Hero : on conserve les halos et le dégradé, mais ils restent fixes. */
  .hero .orbe {
    animation: none;
    filter: blur(70px);
    opacity: 0.22;
  }

  .hero h1 span {
    animation: texteGradient 5s linear infinite;
    background-position: 0%;
}
  .scroll-indicator span {
    width: 35px;
    animation: none;
  }

  /* Le menu fermé ne doit pas animer ses décors hors écran. */
  .nav:not(.active)::before,
  .nav:not(.active)::after {
    animation: none;
  }

  /* Contact : mêmes éléments visuels, mais sans animations permanentes. */
  .contact-orbe,
  .contact-cercle,
  .contact-disponible span,
  .contact h2 span {
    animation: none;
  }

  /* Halos des cartes conservés en version statique sur tactile :
     même sensation visuelle, sans suivi du doigt coûteux. */
  .service-card::before {
    display: block;
    opacity: 0.18;
    transition: none;
  }

  .stat-lueur,
  .projet-lumiere {
    display: block;
    opacity: 0.10;
    transition: none;
  }

  /* Apparitions des cartes restaurées en version légère. */
  .reveal {
    transform: translate3d(0, 18px, 0);
    transition:
      opacity 0.38s cubic-bezier(.16,1,.3,1),
      transform 0.38s cubic-bezier(.16,1,.3,1);
  }

  .reveal.visible {
    transform: translate3d(0, 0, 0);
  }

  /* Petit décalage visuel entre les cartes, sans délai lourd. */
  .services-grille .reveal:nth-child(2),
  .stats-grille .reveal:nth-child(2) {
    transition-delay: 0.05s;
  }

  .services-grille .reveal:nth-child(3),
  .stats-grille .reveal:nth-child(3) {
    transition-delay: 0.10s;
  }

  /* Retour tactile discret quand on appuie volontairement sur une carte. */
  .service-card:active,
  .stat-card:active {
    transform: scale(0.985);
  }

  /* Ne réserve pas inutilement des couches GPU permanentes. */
  .service-card,
  .stat-card,
  .projet-visuel,
  .mockup-site,
  .mockup-capture-image {
    will-change: auto;
  }

}

/* Sur tactile, neutralise les hovers lourds qui peuvent rester accrochés après un tap. */
@media (max-width: 800px) and (hover: none) and (pointer: coarse) {

  .service-card:hover,
  .stat-card:hover {
    transform: none;
    box-shadow: none;
  }

  .service-card:hover::before,
  .stat-card:hover .stat-lueur,
  .projet-visuel:hover .projet-lumiere {
    opacity: 0;
  }

  .service-card:hover .service-icone {
    transform: none;
    box-shadow: none;
  }

  .projet-visuel:hover {
    transform: translateZ(0);
    box-shadow: none;
  }

}

/* =========================
   ANIMATION CARTES AU SCROLL
   Mobile uniquement — transform + opacity pour rester fluide
========================= */

@media (max-width: 800px) {

  .service-card.reveal,
  .projet.reveal,
  .stat-card.reveal {
    opacity: 0;
    transform: translate3d(0, 30px, 0) scale(0.975);
    transition:
      opacity 0.58s ease,
      transform 0.68s cubic-bezier(.16, 1, .3, 1);
  }

  .service-card.reveal.visible,
  .projet.reveal.visible,
  .stat-card.reveal.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  .services-grille .service-card.reveal:nth-child(2),
  .stats-grille .stat-card.reveal:nth-child(2) {
    transition-delay: 0.08s;
  }

  .services-grille .service-card.reveal:nth-child(3),
  .stats-grille .stat-card.reveal:nth-child(3) {
    transition-delay: 0.16s;
  }

}
@media (max-width: 800px) {

  .methode h2,
  .stats h2 {
    line-height: 1.10;
  }

}

/* =========================
   FINITIONS SERVICES + ENVOI FORMULAIRE
========================= */

/* Centre optiquement les glyphes dans leurs cercles. */
.service-icone {
  line-height: 1;
}

.service-icone > span {
  position: absolute;
  inset: 0;

  display: grid;
  place-items: center;

  line-height: 1;
  font-family: Arial, sans-serif;

  pointer-events: none;
}

/* Ajustements optiques propres à chaque glyphe. */
.service-card:nth-child(1) .service-icone > span {
  transform: translate(1px, 1px);
}

.service-card:nth-child(2) .service-icone > span {
  transform: translateY(1px);
}

.service-card:nth-child(3) .service-icone > span {
  transform: translateY(1px);
}

/* Supprime le flash/surlignage bleu Android sans enlever le feedback premium. */
.contact-submit {
  -webkit-appearance: none;
  appearance: none;

  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;

  user-select: none;
  -webkit-user-select: none;

  touch-action: manipulation;
  outline: none;

  background-size: 180% 180%;
  background-position: 0% 50%;
}

.contact-submit:focus {
  outline: none;
}

.contact-submit:focus-visible {
  outline: none;

  box-shadow:
    0 0 0 2px rgba(7, 9, 15, 0.95),
    0 0 0 4px rgba(0, 207, 255, 0.65),
    0 18px 50px rgba(0, 207, 255, 0.24);
}

.contact-submit:disabled {
  opacity: 1;
  cursor: default;
}

/* Couche dédiée au moment d'envoi : légère, uniquement transform + opacity. */
.contact-send-fx {
  position: absolute;
  inset: 0;

  z-index: 2;

  overflow: hidden;
  border-radius: inherit;

  pointer-events: none;
}

.contact-send-beam,
.contact-send-pulse,
.contact-send-ring {
  position: absolute;
  pointer-events: none;
}

/* Faisceau qui remonte la carte pendant la transmission. */
.contact-send-beam {
  left: -10%;
  top: 100%;

  width: 120%;
  height: 86px;

  background:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 207, 255, 0.025) 24%,
      rgba(0, 207, 255, 0.20) 49%,
      rgba(255, 255, 255, 0.50) 50%,
      rgba(108, 92, 255, 0.18) 52%,
      transparent 78%
    );

  opacity: 0;
  transform: translate3d(0, 0, 0);
}

/* Aura située près du bouton : donne l'impression que l'envoi part réellement. */
.contact-send-pulse {
  left: 50%;
  bottom: 44px;

  width: 360px;
  height: 220px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(82, 242, 211, 0.20) 0%,
      rgba(0, 207, 255, 0.15) 26%,
      rgba(108, 92, 255, 0.08) 48%,
      transparent 70%
    );

  filter: blur(10px);

  opacity: 0;
  transform: translate3d(-50%, 20%, 0) scale(.55);
}

/* Deux anneaux fins : visibles uniquement à la confirmation. */
.contact-send-ring {
  left: 50%;
  bottom: 60px;

  width: 105px;
  height: 105px;

  border-radius: 50%;
  border: 1px solid rgba(0, 207, 255, 0.65);

  box-shadow:
    0 0 22px rgba(0, 207, 255, 0.20),
    inset 0 0 18px rgba(108, 92, 255, 0.12);

  opacity: 0;
  transform: translate3d(-50%, 50%, 0) scale(.25);
}

.contact-send-ring-2 {
  border-color: rgba(82, 242, 211, 0.52);
}

/* -------------------------
   ÉTAT : ENVOI EN COURS
------------------------- */

.contact-card.is-sending {
  animation:
    contactCardSending
    1.05s
    ease-in-out
    infinite alternate;
}

.contact-card.is-sending::after {
  animation:
    contactSendingAura
    1.05s
    ease-in-out
    infinite alternate;
}

.contact-card.is-sending .contact-send-beam {
  animation:
    contactBeamTravel
    1.35s
    cubic-bezier(.35,.02,.25,1)
    infinite;
}

.contact-card.is-sending .contact-send-pulse {
  animation:
    contactPulseSending
    1.05s
    ease-in-out
    infinite alternate;
}

.contact-submit.is-sending {
  transform:
    translateY(-2px)
    scale(0.992);

  background:
    linear-gradient(
      115deg,
      #6258ff,
      #00cfff 42%,
      #52f2d3 58%,
      #6c5cff 82%
    );

  background-size: 220% 220%;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 20px 60px rgba(0,207,255,.30),
    0 0 40px rgba(108,92,255,.22);

  animation:
    submitGradientFlow
    1.4s
    ease-in-out
    infinite alternate;
}

.contact-submit.is-sending::before {
  animation:
    submitPremiumSweep
    .95s
    cubic-bezier(.16,1,.3,1)
    infinite;
}

.contact-submit.is-sending .submit-fleche {
  animation:
    submitArrowFlight
    .82s
    ease-in-out
    infinite;
}

/* -------------------------
   ÉTAT : CONFIRMATION
------------------------- */

.contact-card.is-success {
  animation:
    contactSuccessCard
    1.05s
    cubic-bezier(.16,1,.3,1)
    both;
}

.contact-card.is-success::after {
  animation:
    contactSuccessBurst
    1.05s
    cubic-bezier(.16,1,.3,1)
    both;
}

.contact-card.is-success .contact-send-pulse {
  animation:
    contactPulseSuccess
    1.05s
    cubic-bezier(.16,1,.3,1)
    both;
}

.contact-card.is-success .contact-send-ring-1 {
  animation:
    contactRingSuccess
    .95s
    cubic-bezier(.12,.74,.2,1)
    both;
}

.contact-card.is-success .contact-send-ring-2 {
  animation:
    contactRingSuccess
    1.05s
    .10s
    cubic-bezier(.12,.74,.2,1)
    both;
}

.contact-card.is-success .contact-send-beam {
  animation:
    contactBeamSuccess
    .8s
    cubic-bezier(.16,1,.3,1)
    both;
}

.contact-submit.is-success {
  background:
    linear-gradient(
      120deg,
      #6258ff,
      #00cfff 52%,
      #52f2d3
    );

  background-size: 160% 160%;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.14) inset,
    0 24px 70px rgba(0,207,255,.34),
    0 0 46px rgba(82,242,211,.20);

  animation:
    submitSuccessPop
    .82s
    cubic-bezier(.16,1,.3,1)
    both;
}

.contact-submit.is-success .submit-fleche {
  animation:
    submitCheckPop
    .62s
    cubic-bezier(.16,1,.3,1)
    both;
}

/* -------------------------
   ERREUR + TEXTE D'ÉTAT
------------------------- */

.contact-submit.is-error {
  animation:
    submitErrorShake
    .45s
    ease;
}

.contact-status {
  transition:
    color .3s ease,
    opacity .3s ease,
    transform .3s ease;
}

.contact-status.is-success {
  color: #52f2d3;
  transform: translateY(-1px);
}

.contact-status.is-error {
  color: #ff7b8d;
}

/* -------------------------
   KEYFRAMES
------------------------- */

@keyframes contactCardSending {
  from {
    box-shadow:
      0 45px 100px rgba(0,0,0,.45),
      0 0 0 rgba(0,207,255,0);
  }

  to {
    box-shadow:
      0 45px 100px rgba(0,0,0,.45),
      0 0 52px rgba(0,207,255,.14),
      0 0 0 1px rgba(0,207,255,.08) inset;
  }
}

@keyframes contactSendingAura {
  from {
    opacity: .14;
    transform: scale(.76);
  }

  to {
    opacity: .44;
    transform: scale(1.08);
  }
}

@keyframes contactBeamTravel {
  0% {
    top: 100%;
    opacity: 0;
  }

  12% {
    opacity: .85;
  }

  72% {
    opacity: .48;
  }

  100% {
    top: -95px;
    opacity: 0;
  }
}

@keyframes contactPulseSending {
  from {
    opacity: .12;
    transform: translate3d(-50%, 20%, 0) scale(.60);
  }

  to {
    opacity: .48;
    transform: translate3d(-50%, 12%, 0) scale(1.02);
  }
}

@keyframes submitGradientFlow {
  from {
    background-position: 0% 50%;
  }

  to {
    background-position: 100% 50%;
  }
}

@keyframes submitPremiumSweep {
  0% {
    left: -120%;
  }

  100% {
    left: 150%;
  }
}

@keyframes submitArrowFlight {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }

  42% {
    transform: translate(6px, -6px) scale(.92);
    opacity: .62;
  }

  56% {
    transform: translate(-4px, 4px) scale(.72);
    opacity: .18;
  }
}

@keyframes contactSuccessCard {
  0% {
    transform: scale(1);
    box-shadow:
      0 45px 100px rgba(0,0,0,.45);
  }

  32% {
    transform: scale(1.012);
    box-shadow:
      0 45px 100px rgba(0,0,0,.45),
      0 0 72px rgba(0,207,255,.26),
      0 0 0 1px rgba(82,242,211,.22) inset;
  }

  100% {
    transform: scale(1);
    box-shadow:
      0 45px 100px rgba(0,0,0,.45),
      0 0 24px rgba(0,207,255,.07);
  }
}

@keyframes contactSuccessBurst {
  0% {
    opacity: 0;
    transform: scale(.48);
  }

  32% {
    opacity: .82;
  }

  100% {
    opacity: 0;
    transform: scale(1.48);
  }
}

@keyframes contactPulseSuccess {
  0% {
    opacity: .16;
    transform: translate3d(-50%, 18%, 0) scale(.55);
  }

  36% {
    opacity: .90;
    transform: translate3d(-50%, 7%, 0) scale(1.08);
  }

  100% {
    opacity: 0;
    transform: translate3d(-50%, 0, 0) scale(1.48);
  }
}

@keyframes contactRingSuccess {
  0% {
    opacity: 0;
    transform: translate3d(-50%, 50%, 0) scale(.25);
  }

  24% {
    opacity: .82;
  }

  100% {
    opacity: 0;
    transform: translate3d(-50%, 50%, 0) scale(4.4);
  }
}

@keyframes contactBeamSuccess {
  0% {
    top: 100%;
    opacity: 0;
  }

  22% {
    opacity: 1;
  }

  100% {
    top: -95px;
    opacity: 0;
  }
}

@keyframes submitSuccessPop {
  0% {
    transform: scale(.98);
  }

  44% {
    transform: scale(1.024);
  }

  72% {
    transform: scale(.997);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes submitCheckPop {
  0% {
    opacity: 0;
    transform: scale(.2) rotate(-24deg);
  }

  66% {
    opacity: 1;
    transform: scale(1.26) rotate(5deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@keyframes submitErrorShake {
  0%, 100% {
    transform: translateX(0);
  }

  30% {
    transform: translateX(-5px);
  }

  60% {
    transform: translateX(5px);
  }
}

/* Sur mobile, l'effet reste spectaculaire mais ne lance aucune animation permanente. */
@media (max-width: 800px) {
  .contact-send-pulse {
    width: 280px;
    height: 190px;
    bottom: 38px;
    filter: blur(8px);
  }

  .contact-send-ring {
    bottom: 54px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-card.is-sending,
  .contact-card.is-sending::after,
  .contact-card.is-sending .contact-send-beam,
  .contact-card.is-sending .contact-send-pulse,
  .contact-card.is-success,
  .contact-card.is-success::after,
  .contact-card.is-success .contact-send-beam,
  .contact-card.is-success .contact-send-pulse,
  .contact-card.is-success .contact-send-ring,
  .contact-submit.is-sending,
  .contact-submit.is-sending::before,
  .contact-submit.is-sending .submit-fleche,
  .contact-submit.is-success,
  .contact-submit.is-success .submit-fleche,
  .contact-submit.is-error {
    animation: none !important;
  }
}