@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Manrope:wght@300;400;500&family=Space+Grotesk:wght@400;500;600&display=swap");

:root {
  --bg: #050505;
  --panel: #0d0d0d;
  --text: #f2f2f0;
  --muted: #858581;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.22);
  --accent: #8a6cff;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

body.modal-open,
body.menu-open {
  overflow: hidden;
}

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

button,
input,
select,
textarea {
  font: inherit;
}

button {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

section {
  scroll-margin-top: 90px;
}


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

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;

  width: 100%;
  min-height: 78px;

  padding: 0 4%;

  display: grid;

  grid-template-columns:
    180px
    1fr
    auto;

  align-items: center;

  gap: 40px;

  background: transparent;

  transition: background 0.4s ease;
}

.site-header::after {
  content: "";

  position: absolute;
  left: 0;
  top: 100%;

  width: 100%;
  height: 36px;

  pointer-events: none;

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

  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(255, 255, 255, 0.025) 45%,
    rgba(255, 255, 255, 0) 100%
  );

  opacity: 0;

  transition: opacity 0.3s ease;
}

.site-header.is-scrolled::after {
  opacity: 1;
}

.site-header.is-scrolled {
  background: rgba(5, 5, 5, 0.88);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.main-nav {
  display: flex;

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

  gap: 30px;
}

.main-nav a {
  color: var(--muted);

  font-size: 10px;
  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 1.4px;

  transition: color 0.25s ease;
}

.main-nav a:hover {
  color: var(--text);
}

.header-contact {
  padding-bottom: 3px;

  border-bottom: 1px solid var(--text);

  font-size: 10px;
  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 1.2px;
}

.menu-toggle {
  display: none;
}


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

.hero {
  min-height: auto;

  padding: 130px 4% 95px;

  display: flex;
  flex-direction: column;

  border-bottom: 1px solid var(--line);
}

.hero-top {
  display: flex;
  justify-content: space-between;

  color: var(--muted);

  font-size: 9px;
  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 1.6px;
}

.hero-content {
  margin-top: clamp(75px, 8vh, 110px);
}

.hero h1 {
  max-width: 1300px;

  font-family: "Space Grotesk", sans-serif;

  font-size: clamp(62px, 8.3vw, 132px);

  line-height: 0.9;

  font-weight: 500;

  letter-spacing: -5px;

  animation: hero-title-slide 1.1s cubic-bezier(0.22, 0.61, 0.36, 1)
    both;
}

@keyframes hero-title-slide {
  from {
    opacity: 0;
    transform: translateX(120px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.hero-bottom {
  margin-top: 55px;

  padding-top: 28px;

  display: grid;

  grid-template-columns:
    1fr
    auto;

  gap: 60px;

  border-top: 1px solid var(--line);
}

.hero-bottom p {
  max-width: 680px;

  font-family: "Manrope", sans-serif;

  color: rgba(242, 242, 240, 0.68);

  font-size: 16px;
  font-weight: 300;

  line-height: 1.8;

  letter-spacing: -0.15px;
}

.hero-link {
  align-self: start;

  font-size: 10px;
  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 1.2px;
}


/* =========================
   GLOBAL
========================= */

.section-label {
  color: var(--muted);

  font-size: 9px;
  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 1.7px;
}

.section-head {
  display: grid;

  grid-template-columns:
    180px
    1fr;

  gap: 40px;

  margin-bottom: 70px;
}

.section-head h2 {
  max-width: 1000px;

  font-family: "Space Grotesk", sans-serif;

  font-size: clamp(46px, 6vw, 90px);

  line-height: 0.95;

  font-weight: 500;

  letter-spacing: -4px;
}

.section-head-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.section-head-content p {
  margin-top: 22px;

  max-width: 560px;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.6;
}


/* =========================
   PROJECTS
========================= */

.projects {
  padding: 100px 4% 95px;

  border-bottom: 1px solid var(--line);

  overflow: hidden;
}

.projects-header {
  display: flex;

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

  margin-bottom: 20px;
}

.projects-count {
  color: var(--muted);

  font-size: 9px;
  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 1.5px;
}

.projects-intro {
  margin-bottom: 55px;
}

.projects-intro p {
  max-width: 520px;

  color: var(--muted);

  font-size: 10px;

  line-height: 1.7;
}


/* =========================
   CARROUSEL
========================= */

.project-carousel {
  width: 100%;
}

.project-stage {
  position: relative;

  width: 100%;

  height: clamp(330px, 38vw, 500px);

  perspective: 1400px;
}

.project-card {
  position: absolute;

  top: 0;
  left: 50%;

  width: min(58vw, 760px);

  opacity: 0;

  pointer-events: none;

  transform: translateX(-50%) scale(0.72);

  filter: blur(5px) brightness(0.45);

  transition:
    transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.65s ease;
}

.project-card.is-active {
  z-index: 3;

  opacity: 1;

  pointer-events: auto;

  transform:
    translateX(-50%)
    translateZ(80px)
    scale(1);

  filter: blur(0) brightness(1);
}

.project-card.is-prev {
  z-index: 2;

  opacity: 0.46;

  pointer-events: auto;

  transform:
    translateX(-118%)
    translateZ(-120px)
    scale(0.78)
    rotateY(5deg);

  filter: blur(2.5px) brightness(0.6);
}

.project-card.is-next {
  z-index: 2;

  opacity: 0.46;

  pointer-events: auto;

  transform:
    translateX(18%)
    translateZ(-120px)
    scale(0.78)
    rotateY(-5deg);

  filter: blur(2.5px) brightness(0.6);
}


@property --preview-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.project-preview {
  position: relative;

  display: block;

  width: 100%;

  aspect-ratio: 16 / 9;

  padding: 0;

  overflow: hidden;

  border: 0;
  border-radius: 18px;

  background: var(--panel);

  color: var(--text);

  cursor: pointer;

  isolation: isolate;
}

.project-preview::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 5;

  padding: 2px;

  border-radius: inherit;

  background: conic-gradient(
    from var(--preview-angle),
    transparent 0deg,
    transparent 270deg,
    rgba(255, 255, 255, 0.04) 286deg,
    rgba(255, 255, 255, 0.28) 308deg,
    rgba(255, 255, 255, 0.72) 330deg,
    #ffffff 342deg,
    rgba(255, 255, 255, 0.45) 352deg,
    transparent 360deg
  );

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

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

  -webkit-mask-composite: xor;

  mask-composite: exclude;

  opacity: 0;

  pointer-events: none;
}

.project-card.is-active
  .project-preview:hover::before {
  animation:
    project-preview-glow
    1.7s
    cubic-bezier(0.45, 0, 0.25, 1)
    1
    forwards;
}

@keyframes project-preview-glow {
  0% {
    --preview-angle: 0deg;

    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  88% {
    opacity: 1;
  }

  100% {
    --preview-angle: 360deg;

    opacity: 0;
  }
}

.project-preview img {
  position: relative;

  z-index: 1;

  width: 100%;
  height: 100%;

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

  display: block;

  border-radius: 18px;

  transition:
    transform 0.6s
    cubic-bezier(0.22, 0.61, 0.36, 1);
}

.project-card.is-active
  .project-preview:hover img {
  transform: scale(1.015);
}

.preview-overlay {
  position: absolute;

  inset: 2px;

  z-index: 3;

  display: flex;

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

  border-radius: 16px;

  background: rgba(0, 0, 0, 0.28);

  color: #ffffff;

  font-size: 9px;
  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 1.4px;

  opacity: 0;

  transition: opacity 0.3s ease;
}

.project-card.is-active
  .project-preview:hover
  .preview-overlay {
  opacity: 1;
}

.project-info {
  padding-top: 16px;

  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 25px;

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

.project-card:not(.is-active)
  .project-info {
  opacity: 0;

  transform: translateY(8px);
}

.project-category {
  display: block;

  margin-bottom: 6px;

  color: var(--muted);

  font-size: 8px;
  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 1.3px;
}

.project-info h2 {
  font-family: "Space Grotesk", sans-serif;

  font-size: clamp(24px, 3vw, 36px);

  line-height: 1;

  font-weight: 500;

  letter-spacing: -1.5px;
}

.project-open {
  padding: 0 0 3px;

  border: 0;

  border-bottom:
    1px solid var(--line-strong);

  background: transparent;

  color: var(--muted);

  font-size: 9px;
  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 1px;

  cursor: pointer;

  transition:
    color 0.25s ease,
    border-color 0.25s ease;
}

.project-open:hover {
  color: var(--text);

  border-color: var(--text);
}

.carousel-controls {
  max-width: 760px;

  margin: 34px auto 0;

  display: grid;

  grid-template-columns:
    auto
    auto
    1fr
    auto;

  align-items: center;

  gap: 22px;
}

.carousel-arrow {
  width: 48px;
  height: 48px;

  border: 1px solid var(--line);

  background: transparent;

  color: var(--text);

  font-size: 18px;

  cursor: pointer;

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

.carousel-arrow:hover {
  background: var(--text);

  color: var(--bg);

  border-color: var(--text);
}

.carousel-status {
  display: flex;

  gap: 5px;

  color: var(--muted);

  font-size: 9px;

  letter-spacing: 1px;
}

.carousel-current {
  color: var(--text);
}

.carousel-progress {
  display: flex;

  align-items: center;

  gap: 7px;
}

.carousel-dot {
  display: block;

  width: 25px;
  height: 1px;

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

  transition:
    width 0.4s ease,
    background 0.4s ease;
}

.carousel-dot.active {
  width: 42px;

  background: var(--text);
}


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

.services {
  padding: 90px 4% 105px;

  border-bottom: 1px solid var(--line);
}

.services .section-head {
  margin-bottom: 55px;
}

.services-grid {
  display: grid;

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

  gap: 14px;
}

.service-card {
  position: relative;

  min-height: 205px;

  padding: 23px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  overflow: hidden;

  border: 1px solid var(--line);

  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.018),
      rgba(255, 255, 255, 0)
    ),
    #080808;

  transition:
    transform 0.4s
      cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.35s ease,
    background 0.35s ease,
    box-shadow 0.35s ease;
}

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

  position: absolute;

  right: -45px;
  bottom: -60px;

  width: 120px;
  height: 120px;

  border-radius: 50%;

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

  filter: blur(4px);

  opacity: 0;

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

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

  border-color: var(--line-strong);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.035),
      rgba(255, 255, 255, 0)
    ),
    #090909;

  box-shadow:
    0 18px 35px
    rgba(0, 0, 0, 0.28);
}

.service-card:hover::after {
  opacity: 1;

  transform:
    translate(-16px, -16px);
}

.service-number {
  position: relative;

  z-index: 2;

  color: var(--muted);

  font-size: 8px;
  font-weight: 500;

  letter-spacing: 1.2px;
}

.service-card-content {
  position: relative;

  z-index: 2;
}

.service-card h3 {
  margin-bottom: 10px;

  font-family: "Space Grotesk", sans-serif;

  font-size:
    clamp(20px, 2vw, 25px);

  line-height: 1;

  font-weight: 500;

  letter-spacing: -1px;
}

.service-card p {
  max-width: 330px;

  color: var(--muted);

  font-size: 11px;

  line-height: 1.65;
}


/* =========================
   OFFRES
========================= */

.offers {
  padding: 120px 4%;

  border-bottom: 1px solid var(--line);
}

.offers-grid {
  position: relative;

  display: grid;

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

  gap: 22px;

  align-items: stretch;
}

.offer-card {
  position: relative;

  z-index: 1;

  height: 680px;

  padding: 1px;

  overflow: hidden;

  border-radius: 27px;

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

  isolation: isolate;

  transform:
    translateY(0)
    scale(1);

  transition:
    transform 0.5s
      cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.5s ease;
}

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

  position: absolute;

  top: 50%;
  left: 50%;

  z-index: 0;

  width: 175%;

  aspect-ratio: 1;

  background:
    conic-gradient(
      from 0deg,
      transparent 0deg,
      transparent 270deg,
      rgba(255, 255, 255, 0.04) 286deg,
      rgba(255, 255, 255, 0.28) 308deg,
      rgba(255, 255, 255, 0.72) 330deg,
      #ffffff 342deg,
      rgba(255, 255, 255, 0.45) 352deg,
      transparent 360deg
    );

  opacity: 0;

  transform:
    translate(-50%, -50%)
    rotate(0deg);

  pointer-events: none;
}

.offer-card-content {
  position: relative;

  z-index: 2;

  width: 100%;
  height: 100%;

  padding: 29px;

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  border-radius: 26px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.025),
      rgba(255, 255, 255, 0)
    ),
    #090909;
}

.offer-card:hover {
  z-index: 20;

  transform:
    translateY(-12px)
    scale(1.035);

  box-shadow:
    0 30px 55px rgba(0, 0, 0, 0.65),
    0 0 30px rgba(255, 255, 255, 0.09),
    0 0 75px rgba(255, 255, 255, 0.035);
}

.offer-card:hover::before {
  animation:
    offer-border-spin
    1.7s
    cubic-bezier(0.45, 0, 0.25, 1)
    1
    forwards;
}

@keyframes offer-border-spin {
  0% {
    opacity: 0;

    transform:
      translate(-50%, -50%)
      rotate(0deg);
  }

  8% {
    opacity: 1;
  }

  88% {
    opacity: 1;
  }

  100% {
    opacity: 0;

    transform:
      translate(-50%, -50%)
      rotate(360deg);
  }
}

.offer-card-featured {
  background:
    rgba(255, 255, 255, 0.18);
}

.offer-header {
  display: flex;

  flex-direction: column;

  gap: 10px;

  padding-right: 70px;
}

.offer-number {
  color: var(--muted);

  font-size: 9px;

  letter-spacing: 1px;
}

.offer-header h3 {
  font-family: "Space Grotesk", sans-serif;

  font-size:
    clamp(30px, 3vw, 44px);

  line-height: 1;

  font-weight: 500;

  letter-spacing: -2px;
}

.offer-badge {
  position: absolute;

  top: 22px;
  right: 22px;

  padding: 7px 10px;

  border: 1px solid var(--line);

  border-radius: 999px;

  color: var(--muted);

  font-size: 7px;
  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 1px;
}

.offer-price {
  margin-top: 30px;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    clamp(34px, 3vw, 48px);

  line-height: 1;

  font-weight: 500;

  letter-spacing: -2px;
}

.offer-description {
  max-width: 340px;

  margin-top: 18px;

  color: var(--muted);

  font-size: 12px;

  line-height: 1.7;
}

.offer-divider {
  width: 100%;
  height: 1px;

  margin: 24px 0 14px;

  background: var(--line);
}

.offer-features {
  width: 100%;

  list-style: none;
}

.offer-features li {
  position: relative;

  padding:
    9px
    0
    9px
    16px;

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

  color: var(--muted);

  font-size: 11px;

  line-height: 1.5;
}

.offer-features li::before {
  content: "";

  position: absolute;

  top: 15px;
  left: 0;

  width: 4px;
  height: 4px;

  border-radius: 50%;

  background: var(--text);
}

.offer-features li:last-child {
  border-bottom: 0;
}


/* =========================
   CTA OFFRES
========================= */

.offer-cta {
  position: relative;

  margin-top: auto;

  align-self: center;

  min-width: 190px;

  padding: 15px 22px;

  display: inline-flex;

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

  overflow: hidden;

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

  border-radius: 999px;

  background: transparent;

  color: var(--text);

  font-size: 9px;
  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 1.1px;

  text-decoration: none;

  transition:
    color 0.45s ease,
    border-color 0.45s ease,
    transform 0.35s ease;
}

.offer-cta-text {
  position: relative;

  z-index: 5;

  pointer-events: none;

  transition:
    color 0.35s ease;
}

.offer-liquid {
  position: absolute;

  left: 0;
  top: 100%;

  width: 100%;
  height: 120%;

  z-index: 1;

  background: #ffffff;

  pointer-events: none;

  transition:
    top 0.75s
    cubic-bezier(0.22, 0.61, 0.36, 1);
}

.offer-wave {
  position: absolute;

  left: -50%;
  top: -34px;

  width: 200%;

  aspect-ratio: 1;

  border-radius: 42%;

  background: #ffffff;

  box-shadow:
    inset
    0
    -8px
    18px
    rgba(0, 0, 0, 0.05);

  opacity: 0;

  transform: rotate(0deg);

  pointer-events: none;

  transition:
    opacity 0.15s ease;
}

.offer-cta:hover {
  color: #050505;

  border-color: #ffffff;

  transform: translateY(-2px);
}

.offer-cta:hover
  .offer-liquid {
  top: 0;
}

.offer-cta:hover
  .offer-wave {
  opacity: 1;

  animation:
    offer-wave-drift
    5s
    linear
    infinite;
}

.offer-cta:hover
  .offer-cta-text {
  color: #050505;
}

@keyframes offer-wave-drift {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}


/* =========================
   MAINTENANCE CARD
========================= */

.maintenance-card {
  display: grid;

  grid-template-columns:
    minmax(280px, 1.1fr)
    minmax(320px, 1fr)
    minmax(260px, 0.8fr);

  gap: 70px;

  align-items: center;

  padding: 42px 40px;

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

  border-radius: 24px;

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

  margin-top: 40px;

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

.maintenance-card:hover {
  transform: translateY(-4px);

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

  box-shadow:
    0 22px 45px
    rgba(0, 0, 0, 0.3);
}

.maintenance-main {
  display: flex;

  flex-direction: column;

  align-items: flex-start;
}

.maintenance-label {
  display: block;

  margin-bottom: 18px;

  color: var(--muted);

  font-size: 9px;
  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 1.5px;
}

.maintenance-main h3 {
  margin:
    0
    0
    18px;

  font-size:
    clamp(32px, 3vw, 48px);

  line-height: 1;
}

.maintenance-description {
  max-width: 360px;

  margin: 0;

  color: var(--muted);

  font-size: 13px;

  line-height: 1.7;
}

.maintenance-features {
  display: grid;

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

  gap: 24px 38px;
}

.maintenance-features span {
  position: relative;

  padding-left: 18px;

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

  font-size: 12px;

  line-height: 1.4;
}

.maintenance-features span::before {
  content: "";

  position: absolute;

  left: 0;

  top: 0.55em;

  width: 4px;
  height: 4px;

  border-radius: 50%;

  background: #fff;
}

.maintenance-side {
  display: flex;

  flex-direction: column;

  align-items: flex-end;

  text-align: right;
}

.maintenance-price {
  display: flex;

  align-items: baseline;

  gap: 8px;

  margin-bottom: 24px;
}

.maintenance-price strong {
  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    clamp(38px, 4vw, 58px);

  font-weight: 500;

  line-height: 1;

  letter-spacing: -2px;
}

.maintenance-price span {
  color: var(--muted);

  font-size: 10px;
}

.maintenance-selling-point {
  max-width: 280px;

  margin: 0;

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

  font-size: 13px;

  line-height: 1.65;
}

.maintenance-note {
  margin-top: 14px;

  color: var(--muted);

  font-size: 8px;

  line-height: 1.6;
}


/* =========================
   HELP TOOLTIPS
========================= */

.offer-help {
  position: relative;

  width: 100%;

  display: flex;

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

  gap: 12px;
}

.help-icon {
  appearance: none;
  -webkit-appearance: none;

  width: 18px;
  height: 18px;

  padding: 0;

  display: inline-flex;

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

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

  border-radius: 50%;

  background: transparent;

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

  font: inherit;

  font-size: 10px;

  line-height: 1;

  cursor: pointer;
}

.help-icon:hover,
.help-icon:focus-visible {
  color:
    rgba(255, 255, 255, 0.9);

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

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

.help-tooltip {
  position: absolute;

  right: 0;

  bottom:
    calc(100% + 10px);

  z-index: 100;

  width:
    min(
      230px,
      calc(100vw - 64px)
    );

  padding: 11px 13px;

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

  border-radius: 9px;

  background: #111111;

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

  font-size: 10px;
  font-weight: 400;

  line-height: 1.55;

  text-transform: none;

  letter-spacing: 0;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transform: translateY(6px);

  transition:
    opacity 0.2s ease,
    visibility 0.2s ease,
    transform 0.2s ease;

  box-shadow:
    0 12px 32px
    rgba(0, 0, 0, 0.45);
}

.offer-help:hover
  .help-tooltip,

.offer-help:focus-within
  .help-tooltip {
  opacity: 1;

  visibility: visible;

  transform: translateY(0);
}


/* =========================
   MÉTHODE
========================= */

.process {
  padding: 120px 4% 135px;

  border-bottom: 1px solid var(--line);
}

.process-timeline {
  position: relative;

  display: grid;

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

  gap: 30px;

  --progress: 0%;
}

.process-timeline::before {
  content: "";

  position: absolute;

  top: 43px;

  left: 0;
  right: 0;

  height: 1px;

  background: var(--line);
}

.process-timeline::after {
  content: "";

  position: absolute;

  top: 43px;
  left: 0;

  width: var(--progress);

  height: 1px;

  background: var(--text);

  box-shadow:
    0 0 12px
    rgba(255, 255, 255, 0.22);

  transition:
    width 0.55s
    cubic-bezier(0.22, 0.61, 0.36, 1);
}

.process-item {
  position: relative;

  z-index: 2;

  cursor: default;

  transition:
    transform 0.35s ease;
}

.process-number {
  display: block;

  margin-bottom: 26px;

  color: var(--muted);

  font-size: 9px;

  letter-spacing: 1px;
}

.process-dot {
  position: relative;

  z-index: 3;

  width: 10px;
  height: 10px;

  margin-bottom: 35px;

  border:
    3px solid var(--bg);

  border-radius: 50%;

  background: var(--muted);

  box-shadow:
    0 0 0 1px
    var(--line-strong);
}

.process-item h3 {
  margin-bottom: 14px;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 22px;

  font-weight: 500;

  letter-spacing: -0.8px;
}

.process-item p {
  max-width: 210px;

  color: var(--muted);

  font-size: 11px;

  line-height: 1.7;
}

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

.process-item:hover
  .process-number {
  color: var(--text);
}

.process-item:hover
  .process-dot {
  transform: scale(1.6);

  background: var(--text);
}

.process-timeline:has(
  .process-item:nth-child(1):hover
) {
  --progress: 0%;
}

.process-timeline:has(
  .process-item:nth-child(2):hover
) {
  --progress: 25%;
}

.process-timeline:has(
  .process-item:nth-child(3):hover
) {
  --progress: 50%;
}

.process-timeline:has(
  .process-item:nth-child(4):hover
) {
  --progress: 75%;
}

.process-timeline:has(
  .process-item:nth-child(5):hover
) {
  --progress: 100%;
}


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

.contact {
  padding: 105px 4% 55px;

  border-bottom: 1px solid var(--line);
}

.contact-top {
  display: flex;

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

  gap: 30px;
}

.contact-availability {
  position: relative;

  padding-left: 16px;

  color: var(--muted);

  font-size: 9px;
  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 1.2px;
}

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

  position: absolute;

  top: 50%;
  left: 0;

  width: 6px;
  height: 6px;

  transform:
    translateY(-50%);

  border-radius: 50%;

  background: var(--text);
}

.contact-main {
  padding-bottom: 40px;
}

.contact h2 {
  max-width: 1350px;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    clamp(46px, 6vw, 90px);

  line-height: 0.84;

  font-weight: 500;

  letter-spacing: -7px;
}

.contact-intro {
  display: flex !important;

  flex-direction: row !important;

  width: 100% !important;

  max-width: none !important;

  margin-top: 20px !important;

  padding-top: 0 !important;

  border-top: none !important;

  gap: 40px !important;
}

.contact-intro p {
  flex: 1 1 0 !important;

  width: auto !important;

  max-width: none !important;

  margin: 0 !important;

  font-size: 14px !important;

  line-height: 1.55 !important;
}


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

.contact-form-wrapper {
  border:
    1px solid
    rgba(255, 255, 255, 0.12);

  border-radius: 18px;

  padding: 32px;
}

.contact-form-heading {
  margin-bottom: 55px;

  display: flex;

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

  gap: 30px;

  color: var(--muted);

  font-size: 8px;
  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 1.4px;
}

.project-form {
  display: grid;

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

  column-gap: 60px;
}

.form-field {
  position: relative;

  margin-bottom: 36px;

  padding-bottom: 28px;

  border-bottom: 1px solid var(--line);

  transition:
    border-color 0.3s ease;
}

.form-field:focus-within {
  border-color:
    rgba(255, 255, 255, 0.65);
}

.form-field label {
  display: block;

  margin-bottom: 18px;

  color: var(--muted);

  font-size: 8px;
  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 1.2px;
}

.optional {
  margin-left: 5px;

  opacity: 0.5;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;

  padding: 0;

  border: 0;

  outline: 0;

  background: transparent;

  color: var(--text);

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    clamp(17px, 1.6vw, 23px);

  font-weight: 400;

  line-height: 1.35;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color:
    rgba(242, 242, 240, 0.22);
}

.form-field textarea {
  min-height: 170px;

  resize: vertical;
}

.select-wrapper {
  position: relative;
}

.select-wrapper::after {
  content: "↓";

  position: absolute;

  top: 50%;
  right: 2px;

  transform:
    translateY(-50%);

  color: var(--muted);

  pointer-events: none;
}

.form-field select {
  padding-right: 30px;

  appearance: none;
  -webkit-appearance: none;
}

.form-field select option {
  background: #090909;

  color: var(--text);
}

.form-field-message {
  grid-column: 1 / -1;

  margin-top: 20px;
}

.form-field-message textarea {
  min-height: 100px !important;

  height: 100px !important;

  resize: vertical;
}

.message-meta {
  margin-top: 15px;

  display: flex;

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

  gap: 20px;
}

.character-counter {
  margin-left: auto;

  color: var(--muted);

  font-size: 8px;
}

.form-field-maintenance {
  align-self: start;
}

.maintenance-choice {
  display: grid;

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

  gap: 10px;
}

.maintenance-option {
  position: relative;

  display: block;

  margin: 0;

  cursor: pointer;
}

.maintenance-option input {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;

  pointer-events: none;
}

.maintenance-option span {
  min-height: 52px;

  padding: 0 18px;

  display: flex;

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

  border: 1px solid var(--line);

  border-radius: 999px;

  color: var(--muted);

  background: transparent;

  font-size: 9px;
  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 1px;

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

.maintenance-option:hover span {
  border-color: var(--line-strong);
}

.maintenance-option input:focus-visible + span {
  outline:
    1px solid var(--text);

  outline-offset: 3px;
}

.maintenance-option input:checked + span {
  border-color: var(--text);

  background: var(--text);

  color: var(--bg);
}


/* =========================
   POPUP MAINTENANCE
========================= */

.maintenance-modal {
  position: fixed;

  inset: 0;

  z-index: 6000;

  padding: 24px;

  display: flex;

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

  background:
    rgba(0, 0, 0, 0.72);

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

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.maintenance-modal.active {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;
}

.maintenance-modal-card {
  width:
    min(100%, 520px);

  padding: 42px;

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

  border-radius: 27px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.035),
      rgba(255, 255, 255, 0)
    ),
    #090909;

  box-shadow:
    0 30px 90px
    rgba(0, 0, 0, 0.7);

  transform:
    translateY(15px)
    scale(0.98);

  transition:
    transform 0.3s ease;
}

.maintenance-modal.active
  .maintenance-modal-card {
  transform:
    translateY(0)
    scale(1);
}

.maintenance-modal-label {
  color: var(--muted);

  font-size: 8px;
  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 1.4px;
}

.maintenance-modal h2 {
  margin-top: 18px;

  font-family:
    "Space Grotesk",
    sans-serif;

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

  line-height: 0.95;

  font-weight: 500;

  letter-spacing: -2px;
}

.maintenance-modal p {
  max-width: 420px;

  margin-top: 24px;

  color: var(--muted);

  font-size: 11px;

  line-height: 1.7;
}

.maintenance-modal-actions {
  margin-top: 35px;

  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 10px;
}

.maintenance-modal-actions button {
  min-height: 52px;

  padding: 0 18px;

  border:
    1px solid
    var(--line-strong);

  border-radius: 999px;

  background: transparent;

  color: var(--text);

  cursor: pointer;

  font-size: 8px;
  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 0.9px;

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

.maintenance-modal-actions button:hover {
  transform: translateY(-2px);
}

.maintenance-modal-yes:hover {
  background: var(--text);

  color: var(--bg);

  border-color: var(--text);
}

.maintenance-modal-no {
  color: var(--muted);
}

.maintenance-modal-no:hover {
  color: var(--text);

  border-color: var(--text);
}


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

.form-error {
  display: block;

  min-height: 12px;

  margin-top: 9px;

  color:
    rgba(255, 130, 130, 0.9);

  font-size: 8px;
}

.form-field.has-error {
  border-color:
    rgba(255, 130, 130, 0.65);
}


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

.form-submit-row {
  grid-column: 1 / -1;

  margin-top: 15px;

  display: flex;

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

  gap: 50px;
}

.form-submit-row p {
  max-width: 420px;

  color: var(--muted);

  font-size: 9px;

  line-height: 1.7;
}

.form-submit {
  position: relative;

  width: 235px;
  height: 72px;

  padding: 0 24px;

  display: flex;

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

  overflow: hidden;

  border:
    1px solid
    var(--line-strong);

  border-radius: 999px;

  background: transparent;

  color: var(--text);

  cursor: pointer;

  font-size: 9px;
  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 1.1px;
}

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

  position: absolute;

  inset: 0;

  z-index: 0;

  background: var(--text);

  transform:
    translateY(102%);

  transition:
    transform 0.45s
    cubic-bezier(0.22, 0.61, 0.36, 1);
}

.form-submit span {
  position: relative;

  z-index: 2;
}

.form-submit:hover {
  color: var(--bg);
}

.form-submit:hover::before {
  transform:
    translateY(0);
}

.form-submit:disabled {
  opacity: 0.55;

  cursor: wait;
}

.form-status {
  grid-column: 1 / -1;

  min-height: 22px;

  margin-top: 30px;

  color: var(--muted);

  font-size: 9px;
}

.form-status.error {
  color:
    rgba(255, 130, 130, 0.9);
}

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

.form-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 7000;
  
    width: min(370px, calc(100vw - 48px));
  
    padding: 22px 52px 22px 22px;
  
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
  
    background: #0d0d0d;
  
    box-shadow:
      0 20px 55px rgba(0, 0, 0, 0.5);
  
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  
    transform: translateY(20px);
  
    transition:
      opacity 0.3s ease,
      transform 0.3s ease,
      visibility 0.3s ease;
  }
  
  .form-toast.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  
    transform: translateY(0);
  }
  
  .form-toast-label {
    display: block;
  
    margin-bottom: 9px;
  
    color: var(--muted);
  
    font-size: 8px;
    font-weight: 500;
  
    text-transform: uppercase;
  
    letter-spacing: 1.4px;
  }
  
  .form-toast-title {
    display: block;
  
    margin-bottom: 6px;
  
    font-family: "Space Grotesk", sans-serif;
  
    color: var(--text);
  
    font-size: 16px;
    font-weight: 500;
  
    letter-spacing: -0.5px;
  }
  
  .form-toast-text {
    margin: 0;
  
    color: var(--muted);
  
    font-size: 10px;
  
    line-height: 1.6;
  }
  
  .form-toast-close {
    position: absolute;
  
    top: 14px;
    right: 14px;
  
    width: 28px;
    height: 28px;
  
    padding: 0;
  
    display: flex;
  
    align-items: center;
    justify-content: center;
  
    border: 0;
  
    background: transparent;
  
    color: var(--muted);
  
    font-size: 19px;
    font-weight: 300;
  
    line-height: 1;
  
    cursor: pointer;
  
    transition: color 0.2s ease;
  }
  
  .form-toast-close:hover {
    color: var(--text);
  }
  
  @media (max-width: 650px) {
    .form-toast {
      right: 16px;
      bottom: 16px;
      left: 16px;
  
      width: auto;
    }
  }

/* =========================
   CONTACT META
========================= */

.contact-meta {
  margin-top: 100px;

  padding-top: 22px;

  display: flex;

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

  border-top:
    1px solid var(--line);

  color: var(--muted);

  font-size: 8px;

  text-transform: uppercase;
}


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

.footer {
  padding: 38px 4% 30px;

  display: grid;

  grid-template-columns:
    1fr
    auto;

  gap: 35px;

  align-items: center;
}

.footer-brand {
  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 27px;

  font-weight: 500;
}

.footer-links {
  display: flex;

  gap: 24px;
}

.footer-links a {
  color: var(--muted);

  font-size: 8px;

  text-transform: uppercase;
}

.footer-bottom {
  grid-column: 1 / -1;

  margin-top: 8px;

  padding-top: 22px;

  display: flex;

  justify-content: space-between;

  border-top:
    1px solid var(--line);
}

.footer-bottom p,
.footer-bottom a {
  color: var(--muted);

  font-size: 8px;

  text-transform: uppercase;
}


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

.project-modal {
  position: fixed;

  inset: 0;

  z-index: 5000;

  padding: 70px 0;

  display: flex;

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

  background:
    rgba(4, 4, 4, 0.975);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  overflow-y: auto;
}

.project-modal.active {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;
}

.modal-wrapper {
  position: relative;

  width:
    min(1100px, 72vw);

  margin: 0 auto;
}

.modal-content {
  width: 100%;
}

.modal-image {
  width: 100%;

  height: auto;
}

.modal-side-info {
  position: absolute;

  top: 0;

  right:
    calc(100% + 30px);

  width: 165px;

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  text-align: right;
}

.modal-category {
  color: var(--muted);

  font-size: 8px;
}

.modal-title {
  font-family:
    "Space Grotesk",
    sans-serif;

  font-size: 21px;
}

.modal-demo-note {
  margin-top: 12px;

  color: var(--muted);

  font-size: 7px;
}

.modal-counter {
  margin-top: 22px;

  color: var(--muted);

  font-size: 8px;
}

.modal-close {
  position: fixed;

  top: 24px;
  right: 30px;

  z-index: 5100;

  width: 48px;
  height: 48px;

  border:
    1px solid
    var(--line-strong);

  background:
    rgba(5, 5, 5, 0.85);

  font-size: 28px;

  cursor: pointer;
}

.modal-arrow {
  position: fixed;

  top: 50%;

  z-index: 5100;

  width: 52px;
  height: 52px;

  transform:
    translateY(-50%);

  border:
    1px solid
    var(--line-strong);

  background:
    rgba(5, 5, 5, 0.85);

  cursor: pointer;
}

.modal-prev {
  left: 22px;
}

.modal-next {
  right: 22px;
}

.modal-live-link {
  position: fixed;

  left: 50%;
  bottom: 26px;

  z-index: 5200;

  transform:
    translateX(-50%);

  min-width: 220px;

  padding: 16px 24px;

  display: flex;

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

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

  border-radius: 999px;

  background: #050505;

  color: #ffffff;

  font-size: 9px;
  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 1.1px;

  box-shadow:
    0 15px 35px
    rgba(0, 0, 0, 0.45);

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

.modal-live-link:hover {
  transform:
    translateX(-50%)
    translateY(-3px);

  background: #ffffff;

  color: #050505;

  border-color: #ffffff;
}


/* =========================
   RESPONSIVE TABLETTE
========================= */

@media (max-width: 1200px) {
  .modal-wrapper {
    width:
      min(900px, 75vw);
  }

  .modal-side-info {
    position: static;

    width: 100%;

    margin-bottom: 20px;

    align-items: flex-start;

    text-align: left;
  }
}


@media (max-width: 1000px) {
  .site-header {
    grid-template-columns:
      1fr
      auto;

    background: var(--bg);

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .header-contact {
    display: none;
  }

  .menu-toggle {
    position: relative;

    z-index: 1301;

    display: flex;

    width: 30px;
    height: 17px;

    padding: 0;

    flex-direction: column;

    justify-content: space-between;

    border: 0;

    background: transparent;

    cursor: pointer;
  }

  .menu-toggle span {
    display: block;

    width: 100%;
    height: 1px;

    background: var(--text);

    transform-origin: center;

    transition:
      transform 0.35s ease;
  }

  .menu-toggle.active span:first-child {
    transform:
      translateY(8px)
      rotate(45deg);
  }

  .menu-toggle.active span:last-child {
    transform:
      translateY(-8px)
      rotate(-45deg);
  }

  .main-nav {
    position: fixed;

    top: 0;
    left: 0;

    width: 100vw;

    height: 100vh;
    height: 100dvh;

    z-index: 1300;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    gap: 22px;

    padding:
      100px
      8%
      60px;

    background: #050505;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
      translateY(-10px);

    transition:
      opacity 0.35s ease,
      visibility 0.35s ease,
      transform 0.35s ease;
  }

  .main-nav.active {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
      translateY(0);
  }

  .main-nav a {
    display: block;

    width: fit-content;

    color: var(--text);

    font-family:
      "Space Grotesk",
      sans-serif;

    font-size:
      clamp(36px, 8vw, 60px);

    font-weight: 500;

    line-height: 1;

    text-transform: none;

    letter-spacing: -2px;
  }

  .section-head {
    grid-template-columns:
      120px
      1fr;
  }

  .project-card {
    width:
      min(66vw, 680px);
  }

  .project-card.is-prev {
    transform:
      translateX(-116%)
      scale(0.76);
  }

  .project-card.is-next {
    transform:
      translateX(16%)
      scale(0.76);
  }

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

  .service-card {
    min-height: 190px;
  }

  .offers-grid {
    grid-template-columns: 1fr;

    gap: 18px;
  }

  .offer-card {
    height: auto;

    min-height: 0;
  }

  .offer-card-content {
    height: auto;
  }

  .maintenance-card {
    grid-template-columns:
      1fr
      1fr;

    gap: 35px;
  }

  .maintenance-side {
    grid-column: 1 / -1;

    min-width: 0;

    flex-direction: row;

    align-items: center;

    justify-content: space-between;
  }

  .process-timeline {
    grid-template-columns: 1fr;

    gap: 0;

    --progress: 0%;
  }

  .process-timeline::before {
    top: 0;
    bottom: 0;

    left: 4px;
    right: auto;

    width: 1px;
    height: auto;
  }

  .process-timeline::after {
    top: 0;
    left: 4px;

    width: 1px;

    height: var(--progress);
  }

  .process-item {
    padding:
      0
      0
      55px
      38px;
  }

  .process-number {
    margin-bottom: 10px;
  }

  .process-dot {
    position: absolute;

    top: 2px;
    left: 0;

    margin: 0;
  }

  .process-item p {
    max-width: 420px;
  }

  .project-form {
    grid-template-columns: 1fr;

    column-gap: 0;
  }

  .form-field-message,
  .form-submit-row,
  .form-status {
    grid-column: auto;
  }
}


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

@media (max-width: 700px) {
  .contact-intro {
    flex-direction: column !important;

    gap: 10px !important;
  }
}


@media (max-width: 650px) {
  .site-header {
    min-height: 66px;

    padding: 0 20px;
  }

  .brand {
    font-size: 19px;
  }

  .main-nav {
    padding:
      110px
      28px
      60px;

    gap: 18px;
  }

  .main-nav a {
    font-size:
      clamp(38px, 12vw, 54px);

    line-height: 0.98;
  }

  .hero {
    min-height: auto;

    padding:
      105px
      20px
      60px;
  }

  .hero-top {
    font-size: 8px;
  }

  .hero-content {
    margin-top: 70px;
  }

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

    line-height: 0.92;

    letter-spacing: -3px;
  }

  .hero-bottom {
    margin-top: 55px;

    grid-template-columns: 1fr;

    gap: 28px;
  }

  .hero-bottom p {
    font-size: 13px;
  }

  .projects,
  .services,
  .offers,
  .process,
  .contact {
    padding-left: 20px;

    padding-right: 20px;
  }

  .section-head {
    grid-template-columns: 1fr;

    gap: 18px;

    margin-bottom: 50px;
  }

  .section-head h2 {
    font-size: 40px;

    letter-spacing: -2px;
  }

  .projects {
    padding-top: 80px;

    padding-bottom: 80px;
  }

  .projects-intro {
    margin-bottom: 35px;
  }

  .project-stage {
    height:
      clamp(255px, 78vw, 340px);
  }

  .project-card {
    width: 76vw;
  }

  .project-card.is-prev {
    opacity: 0.32;

    transform:
      translateX(-112%)
      scale(0.76);
  }

  .project-card.is-next {
    opacity: 0.32;

    transform:
      translateX(12%)
      scale(0.76);
  }

  .project-info h2 {
    font-size: 25px;
  }

  .project-open {
    display: none;
  }

  .carousel-controls {
    margin-top: 25px;

    gap: 14px;
  }

  .carousel-arrow {
    width: 44px;
    height: 44px;
  }

  .carousel-dot {
    width: 13px;
  }

  .carousel-dot.active {
    width: 25px;
  }

  .services {
    padding-top: 80px;

    padding-bottom: 80px;
  }

  .services-grid {
    grid-template-columns: 1fr;

    gap: 12px;
  }

  .service-card {
    min-height: 165px;

    padding: 20px;
  }

  .offers,
  .process {
    padding-top: 90px;

    padding-bottom: 90px;
  }

  .offer-card-content {
    padding: 23px;
  }

  .offer-header h3 {
    font-size: 31px;
  }

  .offer-price {
    font-size: 35px;
  }

  .maintenance-card {
    margin-top: 18px;

    padding: 28px 24px;

    grid-template-columns: 1fr;

    gap: 30px;

    border-radius: 22px;
  }

  .maintenance-features {
    grid-template-columns: 1fr;

    gap: 12px;
  }

  .maintenance-side {
    grid-column: auto;

    width: 100%;

    min-width: 0;

    flex-direction: column;

    align-items: flex-start;

    gap: 20px;
  }

  .maintenance-choice {
    grid-template-columns:
      1fr
      1fr;
  }

  .maintenance-modal {
    padding: 18px;
  }

  .maintenance-modal-card {
    padding: 32px 24px;

    border-radius: 22px;
  }

  .maintenance-modal-actions {
    grid-template-columns: 1fr;
  }

  .contact {
    padding-top: 85px;

    padding-bottom: 40px;
  }

  .contact-top {
    align-items: flex-start;

    flex-direction: column;

    gap: 15px;
  }

  .contact-main {
    margin: 75px 0;
  }

  .contact h2 {
    font-size:
      clamp(50px, 14vw, 68px);

    line-height: 0.87;

    letter-spacing: -4px;
  }

  .contact-intro {
    margin-top: 45px !important;

    flex-direction: column !important;

    gap: 20px !important;
  }

  .contact-form-heading {
    margin-bottom: 40px;

    align-items: flex-start;

    flex-direction: column;

    gap: 10px;
  }

  .form-field {
    margin-bottom: 30px;

    padding-bottom: 23px;
  }

  .form-field input,
  .form-field select {
    font-size: 19px;
  }

  .form-field-message textarea {
    min-height: 190px;

    font-size: 16px;
  }

  .form-submit-row {
    align-items: flex-start;

    flex-direction: column;

    gap: 30px;
  }

  .form-submit {
    width: 100%;

    height: 66px;
  }

  .contact-meta {
    margin-top: 75px;

    align-items: flex-start;

    flex-direction: column;

    gap: 8px;
  }

  .form-toast {
    right: 16px;
    bottom: 16px;
    left: 16px;

    max-width: none;
  }

  .modal-live-link {
    bottom: 16px;

    width:
      calc(100% - 120px);

    min-width: 0;

    max-width: 280px;

    padding: 15px 18px;
  }
}


/* =========================
   PAGES LÉGALES
========================= */

.legal-page {
  min-height: 100vh;

  background: var(--bg);

  color: var(--text);
}

.legal-header {
  position: fixed;

  top: 0;
  left: 0;

  z-index: 1000;

  width: 100%;

  min-height: 72px;

  padding: 0 4%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  border-bottom:
    1px solid var(--line);

  background:
    rgba(5, 5, 5, 0.92);

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter:
    blur(16px);
}

.legal-back {
  color: var(--muted);

  font-size: 9px;
  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 1.2px;

  transition:
    color 0.25s ease;
}

.legal-back:hover {
  color: var(--text);
}

.legal-main {
  width: 100%;
}

.legal-hero {
  min-height: 620px;

  padding:
    155px
    4%
    90px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  border-bottom:
    1px solid var(--line);
}

.legal-hero h1 {
  margin-top: 55px;

  max-width: 1200px;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    clamp(62px, 9vw, 135px);

  line-height: 0.87;

  font-weight: 500;

  letter-spacing: -6px;
}

.legal-intro {
  max-width: 600px;

  margin-top: 55px;

  color: var(--muted);

  font-size: 13px;

  line-height: 1.8;
}

.legal-content {
  padding: 0 4%;
}

.legal-section {
  display: grid;

  grid-template-columns:
    170px
    minmax(0, 760px);

  gap: 45px;

  padding: 65px 0;

  border-bottom:
    1px solid var(--line);
}

.legal-number {
  color: var(--muted);

  font-size: 8px;
  font-weight: 500;

  letter-spacing: 1.2px;
}

.legal-text h2 {
  margin-bottom: 28px;

  font-family:
    "Space Grotesk",
    sans-serif;

  font-size:
    clamp(28px, 3vw, 42px);

  line-height: 1;

  font-weight: 500;

  letter-spacing: -1.8px;
}

.legal-text p {
  margin-bottom: 18px;

  color: var(--muted);

  font-size: 12px;

  line-height: 1.8;
}

.legal-text p:last-child {
  margin-bottom: 0;
}

.legal-text strong {
  color: var(--text);

  font-weight: 500;
}

.legal-text ul {
  margin: 24px 0;

  padding: 0;

  list-style: none;
}

.legal-text li {
  position: relative;

  padding:
    10px
    0
    10px
    20px;

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

  color: var(--muted);

  font-size: 12px;

  line-height: 1.6;
}

.legal-text li::before {
  content: "";

  position: absolute;

  top: 18px;
  left: 0;

  width: 4px;
  height: 4px;

  border-radius: 50%;

  background: var(--text);
}

.legal-placeholder {
  margin: 28px 0;

  padding: 22px;

  border:
    1px solid var(--line);

  border-radius: 14px;

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

.legal-placeholder p {
  margin-bottom: 10px;

  font-size: 10px;
}

.legal-placeholder p:last-child {
  margin-bottom: 0;
}

.legal-link {
  display: inline-block;

  margin-top: 8px;

  padding-bottom: 4px;

  border-bottom:
    1px solid
    var(--line-strong);

  color: var(--text);

  font-size: 9px;
  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 1px;

  transition:
    border-color 0.25s ease;
}

.legal-link:hover {
  border-color: var(--text);
}

.legal-date {
  margin-top: 30px;

  color:
    var(--text) !important;
}

.legal-footer {
  padding:
    45px
    4%
    35px;

  display: grid;

  grid-template-columns:
    1fr
    auto
    auto;

  align-items: center;

  gap: 40px;
}

.legal-footer-links {
  display: flex;

  gap: 22px;
}

.legal-footer-links a,
.legal-footer p {
  color: var(--muted);

  font-size: 8px;
  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 1px;
}

.legal-footer-links a {
  transition:
    color 0.25s ease;
}

.legal-footer-links a:hover {
  color: var(--text);
}


@media (max-width: 1000px) {
  .legal-section {
    grid-template-columns:
      100px
      minmax(0, 1fr);
  }
}


@media (max-width: 650px) {
  .legal-header {
    min-height: 66px;

    padding: 0 20px;

    backdrop-filter: none;

    -webkit-backdrop-filter:
      none;

    background: var(--bg);
  }

  .legal-back {
    font-size: 7px;
  }

  .legal-hero {
    min-height: 520px;

    padding:
      125px
      20px
      65px;
  }

  .legal-hero h1 {
    margin-top: 40px;
  
    max-width: 100%;
  
    font-size: clamp(40px, 11vw, 54px);
  
    line-height: 0.92;
  
    letter-spacing: -2px;
  
    overflow-wrap: anywhere;
  }

  .legal-intro {
    margin-top: 40px;

    font-size: 12px;
  }

  .legal-content {
    padding: 0 20px;
  }

  .legal-section {
    grid-template-columns: 1fr;

    gap: 20px;

    padding: 50px 0;
  }

  .legal-text h2 {
    font-size: 29px;

    margin-bottom: 24px;
  }

  .legal-text p,
  .legal-text li {
    font-size: 11px;
  }

  .legal-placeholder {
    padding: 18px;

    border-radius: 12px;
  }

  .legal-footer {
    padding: 35px 20px;

    grid-template-columns: 1fr;

    gap: 20px;
  }

  .legal-footer-links {
    flex-direction: column;

    align-items: flex-start;

    gap: 10px;
  }
}

/*TEST*/

/* =========================
   RESPONSIVE SAFETY
   Safari / iOS
========================= */

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  
  /* Empêche Grid et Flex d'imposer
     une largeur supérieure au viewport */
  
  .site-header,
  .hero,
  .projects,
  .services,
  .offers,
  .process,
  .contact,
  .footer,
  .section-head,
  .section-head-content,
  .services-grid,
  .offers-grid,
  .maintenance-card,
  .maintenance-main,
  .maintenance-features,
  .maintenance-side,
  .project-form,
  .form-field,
  .form-field-message,
  .form-submit-row,
  .contact-form-wrapper,
  .contact-form-heading,
  .contact-meta {
    min-width: 0;
  }
  
  
  /* =========================
     TABLETTE / MOBILE
  ========================= */
  
  @media (max-width: 1000px) {
  
    /* 100vw peut être problématique
       sur Safari mobile */
  
    .main-nav {
      width: 100%;
      max-width: 100%;
    }
  
    .project-form {
      width: 100%;
      max-width: 100%;
    }
  
    .form-field,
    .form-field-message,
    .form-submit-row {
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }
  
    .form-field input,
    .form-field select,
    .form-field textarea {
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }
  
    .maintenance-card,
    .offer-card,
    .offer-card-content {
      width: 100%;
      max-width: 100%;
    }
  }
  
  
  /* =========================
     MOBILE
  ========================= */
  
  @media (max-width: 650px) {

    .main-nav {
        overflow-x: hidden;
        overflow-y: auto;
      }
    
      .main-nav a {
        max-width: 100%;
      }
  
    .hero,
    .projects,
    .services,
    .offers,
    .process,
    .contact {
      width: 100%;
      max-width: 100%;
    }
  
    .hero-content,
    .hero-bottom,
    .section-head,
    .section-head-content {
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }
  
    .hero h1,
    .section-head h2,
    .contact h2 {
      max-width: 100%;
      overflow-wrap: normal;
    }
  
  
    /* CARROUSEL
       Le dépassement reste contenu
       dans la section projets */
  
    .projects {
      overflow-x: hidden;
    }
  
    .project-carousel,
    .project-stage {
      width: 100%;
      max-width: 100%;
    }
  
  
    /* OFFRES */
  
    .offers-grid,
    .offer-card,
    .offer-card-content {
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }
  
    .offer-header {
      min-width: 0;
    }
  
    .offer-description,
    .offer-features,
    .offer-help {
      max-width: 100%;
    }
  
  
    /* MAINTENANCE */
  
    .maintenance-card,
    .maintenance-main,
    .maintenance-features,
    .maintenance-side {
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }
  
  
    /* FORMULAIRE */
  
    .contact-form-wrapper {
      width: 100%;
      max-width: 100%;
  
      padding: 24px 18px;
    }
  
    .project-form {
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }
  
    .form-field,
    .form-field-message,
    .message-meta,
    .form-submit-row {
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }
  
    .form-field input,
    .form-field select,
    .form-field textarea {
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }
  
    .message-meta {
      overflow: hidden;
    }
  
    .character-counter {
      flex-shrink: 0;
    }
  
    .form-submit-row p {
      width: 100%;
      max-width: 100%;
    }
  
    .form-submit {
      width: 100%;
      max-width: 100%;
    }
  
  
    /* POPUPS */
  
    .maintenance-modal {
      width: 100%;
      max-width: 100%;
    }
  
    .maintenance-modal-card {
      width: 100%;
      max-width: 520px;
    }
  
  
    /* TOAST */
  
    .form-toast {
      width: auto;
      max-width: none;
  
      left: 16px;
      right: 16px;
    }

    .footer {
        grid-template-columns: auto 1fr;
        gap: 10px;
      
        padding-left: 14px;
        padding-right: 14px;
      }
      
      .footer-brand {
        font-size: 18px;
      }
      
      .footer-links {
        gap: 7px;
        justify-content: flex-end;
      }
      
      .footer-links a {
        font-size: 5.4px;
        letter-spacing: 0.2px;
        white-space: nowrap;
      }
      
      .footer-bottom p,
      .footer-bottom a {
        font-size: 5.4px;
        letter-spacing: 0.2px;
      }

  }

.form-submit-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  .form-submit-arrow svg {
    display: block;
  }

  /* =========================
   MENU MOBILE - PAYSAGE
========================= */

@media (max-width: 1000px) and (orientation: landscape) and (max-height: 500px) {
    .main-nav {
      justify-content: flex-start;
  
      padding:
        28px
        max(70px, env(safe-area-inset-right))
        28px
        max(70px, env(safe-area-inset-left));
  
      gap: 10px;
  
      overflow-y: auto;
      overflow-x: hidden;
    }
  
    .main-nav a {
      font-size: clamp(28px, 8vh, 38px);
      line-height: 1;
      max-width: 100%;
    }
  }