.network-page {
  --network-navy: #061827;
  --network-deep: #03111e;
  --network-teal: #009c9a;
  --network-cyan: #52d9d2;
  --network-ink: #102a3d;
  --network-muted: #557080;
  overflow: clip;
  color: var(--network-ink);
}

.network-page :is(h1, h2, h3, p) { margin-top: 0; }
.network-page :is(h1, h2, h3) { font-family: Manrope, sans-serif; letter-spacing: -.045em; }
.network-page :is(a, button):focus-visible { outline: 3px solid #52d9d2; outline-offset: 4px; }
.network-page :is(#architecture, #projet) { scroll-margin-top: 110px; }

.network-kicker {
  margin-bottom: 20px;
  color: #007e7d;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1.4;
  text-transform: uppercase;
}
.network-kicker--light { color: #79e5de; }

.network-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 73% 38%, rgba(0, 156, 154, .19), transparent 36%),
    radial-gradient(circle at 1% 95%, rgba(14, 82, 104, .36), transparent 37%),
    var(--network-deep);
}
.network-hero__mesh {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .33;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(102, 220, 214, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(102, 220, 214, .09) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, transparent 4%, #000 55%, #000);
}
.network-hero__container { padding-block: 33px 0; }
.network-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  padding: 9px 14px;
  border: 1px solid rgba(137, 213, 216, .24);
  border-radius: 999px;
  color: #a9c5cf;
  background: rgba(8, 35, 50, .74);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
.network-breadcrumb a { color: #fff; }
.network-breadcrumb a:hover { color: #78e7df; }
.network-breadcrumb > span:last-child { color: #8fe7df; }
.network-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 4vw, 76px);
  align-items: center;
  padding-block: clamp(64px, 7vw, 110px) clamp(70px, 7vw, 106px);
}
.network-hero__copy { position: relative; z-index: 2; min-width: 0; }
.network-hero h1 {
  max-width: 770px;
  margin-bottom: 29px;
  font-size: clamp(48px, 5vw, 78px);
  font-weight: 800;
  line-height: 1.04;
  text-wrap: balance;
}
.network-hero h1 em,
.network-intro h2 em { color: var(--network-cyan); font-style: normal; }
.network-hero__lead {
  max-width: 620px;
  margin-bottom: 35px;
  color: #b7cbd3;
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.75;
}
.network-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.network-button {
  display: inline-flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.network-button span { font-size: 19px; line-height: 1; }
.network-button--primary { color: #fff; background: var(--network-teal); }
.network-button--primary:hover { color: #fff; background: #007e7d; }
.network-button--outline { border-color: rgba(144, 220, 221, .38); color: #e9f7f7; background: rgba(5, 41, 55, .55); }
.network-button--outline:hover { border-color: #78e7df; color: #fff; background: rgba(12, 87, 91, .52); }
.network-page .network-hero__aside { margin: 44px 0 0; color: #8daebd; font-size: 15px; letter-spacing: .015em; }

.network-visual {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(116, 221, 219, .27);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(14, 48, 66, .87), rgba(2, 20, 35, .9));
  box-shadow: 0 38px 100px rgba(0, 0, 0, .31), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.network-visual::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 52% 50%, rgba(12, 151, 156, .12), transparent 62%);
  content: "";
}
.network-visual__topline {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 17px 24px;
  border-bottom: 1px solid rgba(107, 204, 210, .13);
  color: #98d8d8;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .13em;
}
.network-visual__live { display: inline-flex; align-items: center; gap: 8px; color: #c4dfe1; font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.network-visual__live::before { width: 7px; height: 7px; border-radius: 50%; background: #66ded7; box-shadow: 0 0 13px rgba(102, 222, 215, .85); content: ""; }
.network-visual__stage {
  position: relative;
  height: clamp(330px, 30vw, 480px);
  overflow: hidden;
  background:
    linear-gradient(rgba(83, 195, 195, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(83, 195, 195, .055) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.network-visual__stage canvas { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.network-visual__fallback { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .45s ease; }
.network-visual__stage[data-network-state="ready"] .network-visual__fallback { opacity: 0; }
.network-visual__fallback-line { position: absolute; width: 72%; height: 2px; background: linear-gradient(90deg, #179797, #83e8df, #179797); box-shadow: 0 0 25px rgba(75, 222, 215, .5); transform: rotate(-13deg); }
.network-visual__fallback-node { position: absolute; width: clamp(38px, 5vw, 70px); aspect-ratio: 1; border: 2px solid #70e5de; border-radius: 16px; background: rgba(18, 98, 105, .48); box-shadow: 0 0 0 10px rgba(79, 208, 201, .06), 0 0 30px rgba(75, 222, 215, .35); transform: rotate(45deg); }
.network-visual__fallback-node--one { left: 12%; top: 57%; border-radius: 50%; }
.network-visual__fallback-node--two { left: 36%; top: 44%; }
.network-visual__fallback-node--three { left: 60%; top: 32%; }
.network-visual__fallback-node--four { right: 9%; top: 20%; }
.network-visual__labels {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: .9fr 1fr 1.1fr 1.6fr;
  gap: 8px;
  padding: 0 23px 17px;
  color: #96d2d2;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .07em;
  text-align: center;
}
.network-visual__caption { position: relative; z-index: 2; margin: 0; padding: 16px 24px 19px; border-top: 1px solid rgba(107, 204, 210, .13); color: #b2c7d1; font-size: 14px; line-height: 1.55; }
.network-hero__footer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(139, 212, 218, .19); }
.network-hero__footer span { padding: 23px 19px; border-right: 1px solid rgba(139, 212, 218, .19); color: #b3c8d0; font-size: 13px; font-weight: 700; }
.network-hero__footer span:first-child { padding-left: 0; }
.network-hero__footer span:last-child { border-right: 0; }
.network-hero__footer b { margin-right: 12px; color: #6de2da; font-size: 11px; letter-spacing: .12em; }

.network-intro { position: relative; padding-block: clamp(86px, 9vw, 140px); background: #f4f9fa; }
.network-intro__layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(42px, 7vw, 120px); align-items: end; margin-bottom: clamp(50px, 6vw, 92px); }
.network-intro h2,
.network-capabilities h2,
.network-contexts h2,
.network-method h2,
.network-cta h2 { margin-bottom: 0; font-size: clamp(37px, 3.7vw, 62px); font-weight: 800; line-height: 1.08; text-wrap: balance; }
.network-intro h2 em { color: #008e8c; }
.network-intro__text { max-width: 590px; color: var(--network-muted); font-size: clamp(16px, 1.15vw, 18px); line-height: 1.8; }
.network-intro__text p { margin-bottom: 17px; }
.network-intro__text p:last-child { margin-bottom: 0; }
.network-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  padding: 32px 20px 27px;
  border: 1px solid #d8e7e9;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 28px 85px rgba(15, 59, 69, .065);
}
.network-flow__rail { position: absolute; top: 91px; right: 7%; left: 7%; height: 1px; background: linear-gradient(90deg, transparent, #46bdb8 10%, #46bdb8 90%, transparent); }
.network-flow__item { position: relative; min-width: 0; padding: 0 clamp(14px, 2vw, 33px); }
.network-flow__item + .network-flow__item { border-left: 1px solid #e8eff1; }
.network-flow__number { display: block; margin-bottom: 16px; color: #72929e; font-size: 11px; font-weight: 800; letter-spacing: .15em; }
.network-flow__icon { position: relative; z-index: 1; display: grid; width: 74px; height: 74px; margin-bottom: 24px; place-items: center; border: 1px solid #8ed7d2; border-radius: 20px; color: #007e7d; background: linear-gradient(145deg, #e7f8f5, #fff); box-shadow: 7px 7px 0 rgba(0, 156, 154, .06); font-family: "DM Sans", sans-serif; font-size: 39px; font-weight: 300; line-height: 1; }
.network-flow__item h3 { margin-bottom: 9px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.25; }
.network-flow__item p { margin-bottom: 0; color: #5d7380; font-size: 14px; line-height: 1.6; }

.network-capabilities { padding-block: clamp(88px, 9vw, 142px); background: #fff; }
.network-capabilities__layout { display: grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); gap: clamp(54px, 7vw, 126px); align-items: center; }
.network-capabilities__visual { position: relative; min-height: 665px; overflow: hidden; border-radius: 22px; background: #061827; box-shadow: 20px 24px 0 #e5f0f1; }
.network-capabilities__visual::after { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 45%, rgba(2, 15, 27, .73)); content: ""; }
.network-capabilities__visual img { width: 100%; height: 100%; min-height: 665px; object-fit: cover; object-position: 43% center; filter: saturate(.78) contrast(1.08); }
.network-capabilities__photo-label { position: absolute; z-index: 1; right: 25px; bottom: 25px; left: 25px; display: inline-flex; width: fit-content; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 999px; color: #fff; background: rgba(3, 23, 34, .72); font-size: 12px; font-weight: 800; backdrop-filter: blur(9px); }
.network-capabilities__signal { width: 8px; height: 8px; border-radius: 50%; background: #68dfd8; box-shadow: 0 0 13px #68dfd8; }
.network-capabilities h2 { max-width: 700px; margin-bottom: 33px; }
.network-capabilities__list { border-top: 1px solid #dae6e9; }
.network-capabilities__list article { display: grid; grid-template-columns: minmax(112px, .35fr) minmax(0, 1fr); gap: 3px 25px; padding: 19px 0 21px; border-bottom: 1px solid #dae6e9; }
.network-capabilities__list article > span { grid-row: span 2; padding-top: 6px; color: #008f8d; font-size: 11px; font-weight: 800; letter-spacing: .11em; }
.network-capabilities__list h3 { margin-bottom: 3px; font-size: clamp(18px, 1.4vw, 22px); line-height: 1.27; }
.network-capabilities__list p { max-width: 540px; margin-bottom: 0; color: #607584; font-size: 15px; line-height: 1.6; }

.network-contexts { position: relative; overflow: hidden; padding-block: clamp(86px, 8vw, 127px); color: #fff; background: #061827; }
.network-contexts::before { position: absolute; right: -140px; bottom: -270px; width: 600px; height: 600px; border: 1px solid rgba(89, 211, 208, .15); border-radius: 50%; box-shadow: 0 0 0 45px rgba(48, 178, 178, .025), 0 0 0 95px rgba(48, 178, 178, .02); content: ""; pointer-events: none; }
.network-contexts .network-kicker { color: #76e5de; }
.network-section-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .52fr); gap: 0 clamp(42px, 8vw, 140px); align-items: end; margin-bottom: 54px; }
.network-section-heading .network-kicker { grid-column: 1 / -1; }
.network-section-heading h2 { max-width: 800px; }
.network-section-heading > p:last-child { max-width: 450px; margin-bottom: 3px; color: #9ebbc6; font-size: 17px; line-height: 1.7; }
.network-contexts__grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid rgba(116, 221, 219, .2); border-radius: 18px; overflow: hidden; background: rgba(8, 42, 59, .72); }
.network-contexts__grid article { position: relative; min-height: 280px; padding: clamp(25px, 3vw, 46px); overflow: hidden; }
.network-contexts__grid article + article { border-left: 1px solid rgba(116, 221, 219, .2); }
.network-contexts__index { display: block; margin-bottom: 66px; color: #74e2da; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.network-contexts__grid h3 { position: relative; z-index: 1; max-width: 350px; margin-bottom: 11px; font-size: clamp(22px, 1.8vw, 29px); line-height: 1.18; }
.network-contexts__grid p { position: relative; z-index: 1; max-width: 350px; margin-bottom: 0; color: #abc1c9; font-size: 15px; line-height: 1.65; }
.network-contexts__trace { position: absolute; top: 45px; right: -35px; width: 180px; height: 90px; border: 1px solid rgba(97, 227, 218, .22); border-radius: 50%; transform: rotate(-27deg); }
.network-contexts__trace::after { position: absolute; inset: 20px; border: 1px dashed rgba(97, 227, 218, .21); border-radius: 50%; content: ""; }

.network-method { padding-block: clamp(85px, 8.5vw, 136px); background: #eef6f7; }
.network-method__heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .45fr); gap: clamp(42px, 8vw, 145px); align-items: end; margin-bottom: 56px; }
.network-method__heading h2 { max-width: 810px; }
.network-method__heading > p { max-width: 420px; margin-bottom: 4px; color: #607584; font-size: 17px; line-height: 1.7; }
.network-method__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); margin: 0; padding: 0; list-style: none; }
.network-method__steps li { position: relative; padding-top: 24px; border-top: 2px solid #afd7d8; }
.network-method__steps li::before { position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: #009c9a; box-shadow: 0 0 0 7px #d7eeee; content: ""; }
.network-method__steps span { display: block; margin-bottom: 38px; color: #008a88; font-size: 12px; font-weight: 800; letter-spacing: .16em; }
.network-method__steps h3 { margin-bottom: 11px; font-size: 25px; }
.network-method__steps p { max-width: 300px; margin-bottom: 0; color: #607584; font-size: 15px; line-height: 1.65; }

.network-cta { position: relative; overflow: hidden; padding-block: clamp(75px, 8vw, 125px); color: #fff; background: linear-gradient(115deg, #061827, #07434a); }
.network-cta::after { position: absolute; right: -40px; bottom: -250px; width: 550px; height: 550px; border: 1px solid rgba(103, 223, 215, .22); border-radius: 50%; box-shadow: 0 0 0 46px rgba(103, 223, 215, .04), 0 0 0 95px rgba(103, 223, 215, .025); content: ""; pointer-events: none; }
.network-cta__layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(50px, 8vw, 140px); align-items: end; }
.network-cta h2 { max-width: 900px; }
.network-cta__layout > div:first-child > p:last-child { max-width: 720px; margin: 24px 0 0; color: #aeced0; font-size: 17px; line-height: 1.7; }
.network-cta__actions { display: grid; gap: 18px; justify-items: start; }
.network-cta__actions > a:last-child { color: #a3eee6; font-size: 15px; font-weight: 800; }
.network-cta__actions > a:last-child:hover { color: #fff; }

.network-page.network-motion-enabled [data-network-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .65, .24, 1); }
.network-page.network-motion-enabled [data-network-reveal].is-visible { opacity: 1; transform: none; }

@media (max-width: 1200px) {
  .network-hero__layout { grid-template-columns: 1fr; gap: 42px; padding-block: 70px 75px; }
  .network-hero__copy { max-width: 850px; }
  .network-hero h1 { max-width: 860px; }
  .network-visual { width: min(100%, 900px); justify-self: center; }
  .network-visual__stage { height: 460px; }
  .network-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 0; }
  .network-flow__rail { display: none; }
  .network-flow__item:nth-child(4) { border-left: 0; }
  .network-flow__item:nth-child(n+4) { padding-top: 27px; border-top: 1px solid #e8eff1; }
  .network-capabilities__visual,
  .network-capabilities__visual img { min-height: 570px; }
  .network-capabilities__list article { grid-template-columns: 1fr; }
  .network-capabilities__list article > span { grid-row: auto; }
}

@media (max-width: 900px) {
  .network-intro__layout,
  .network-capabilities__layout,
  .network-section-heading,
  .network-method__heading,
  .network-cta__layout { grid-template-columns: 1fr; }
  .network-intro__layout { gap: 25px; }
  .network-intro__text { max-width: 760px; }
  .network-capabilities__layout { gap: 58px; }
  .network-capabilities__visual { max-width: 760px; min-height: 460px; }
  .network-capabilities__visual img { height: 460px; min-height: 460px; }
  .network-capabilities__list article { grid-template-columns: minmax(112px, .3fr) minmax(0, 1fr); }
  .network-capabilities__list article > span { grid-row: span 2; }
  .network-section-heading,
  .network-method__heading { gap: 22px; }
  .network-contexts__grid { grid-template-columns: 1fr; }
  .network-contexts__grid article { min-height: 210px; }
  .network-contexts__grid article + article { border-left: 0; border-top: 1px solid rgba(116, 221, 219, .2); }
  .network-contexts__index { margin-bottom: 40px; }
  .network-method__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 45px 28px; }
  .network-cta__actions { gap: 15px; }
}

@media (max-width: 680px) {
  .network-page :is(#architecture, #projet) { scroll-margin-top: 78px; }
  .network-hero__container { padding-top: 20px; }
  .network-breadcrumb { gap: 7px; padding: 9px 12px; border-radius: 14px; font-size: 11px; }
  .network-hero__layout { gap: 37px; padding-block: 65px 49px; }
  .network-hero h1 { margin-bottom: 21px; font-size: clamp(38px, 9.5vw, 57px); line-height: 1.08; }
  .network-kicker { margin-bottom: 17px; font-size: 11px; }
  .network-hero__lead { margin-bottom: 27px; font-size: 16px; line-height: 1.7; }
  .network-actions { display: grid; grid-template-columns: 1fr; }
  .network-button { min-height: 54px; width: 100%; justify-content: space-between; gap: 12px; padding-inline: 18px; font-size: 14px; text-align: left; }
  .network-page .network-hero__aside { margin-top: 32px; font-size: 14px; }
  .network-visual { border-radius: 16px; }
  .network-visual__topline { gap: 8px; padding: 13px 14px; font-size: 11px; }
  .network-visual__live { font-size: 11px; }
  .network-visual__stage { height: clamp(290px, 77vw, 380px); }
  .network-visual__labels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 0 12px 13px; font-size: 11px; text-align: left; }
  .network-visual__caption { padding: 13px 14px 16px; font-size: 13px; line-height: 1.55; }
  .network-hero__footer { grid-template-columns: 1fr; }
  .network-hero__footer span { padding: 14px 0; border-right: 0; border-bottom: 1px solid rgba(139, 212, 218, .19); }
  .network-hero__footer span:last-child { border-bottom: 0; }
  .network-intro,
  .network-capabilities,
  .network-contexts,
  .network-method,
  .network-cta { padding-block: 76px; }
  .network-intro h2,
  .network-capabilities h2,
  .network-contexts h2,
  .network-method h2,
  .network-cta h2 { font-size: clamp(32px, 8.3vw, 45px); }
  .network-intro__layout { margin-bottom: 35px; }
  .network-intro__text { font-size: 16px; }
  .network-flow { grid-template-columns: 1fr; gap: 0; padding: 5px 20px; border-radius: 16px; }
  .network-flow__item { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 0 18px; padding: 20px 0; border-left: 0 !important; border-top: 0 !important; }
  .network-flow__item + .network-flow__item { border-top: 1px solid #e8eff1 !important; }
  .network-flow__number { grid-column: 1; margin-bottom: 9px; }
  .network-flow__icon { grid-column: 1; grid-row: 2 / span 2; width: 54px; height: 54px; margin-bottom: 0; border-radius: 14px; font-size: 29px; }
  .network-flow__item h3 { grid-column: 2; grid-row: 2; margin-bottom: 6px; font-size: 18px; }
  .network-flow__item p { grid-column: 2; grid-row: 3; font-size: 14px; }
  .network-capabilities__layout { gap: 45px; }
  .network-capabilities__visual { min-height: 360px; box-shadow: 10px 12px 0 #e5f0f1; }
  .network-capabilities__visual img { height: 360px; min-height: 360px; }
  .network-capabilities__photo-label { right: 14px; bottom: 14px; left: 14px; font-size: 11px; }
  .network-capabilities h2 { margin-bottom: 25px; }
  .network-capabilities__list article { grid-template-columns: 1fr; gap: 5px; padding-block: 17px; }
  .network-capabilities__list article > span { grid-row: auto; padding-top: 0; }
  .network-capabilities__list h3 { font-size: 19px; }
  .network-capabilities__list p { font-size: 14px; }
  .network-section-heading { margin-bottom: 34px; }
  .network-section-heading > p:last-child,
  .network-method__heading > p,
  .network-cta__layout > div:first-child > p:last-child { font-size: 15px; }
  .network-contexts__grid article { min-height: 220px; padding: 28px; }
  .network-contexts__index { margin-bottom: 45px; }
  .network-contexts__grid h3 { font-size: 24px; }
  .network-method__heading { margin-bottom: 40px; }
  .network-method__steps { grid-template-columns: 1fr; gap: 30px; }
  .network-method__steps li { padding-top: 19px; }
  .network-method__steps span { margin-bottom: 13px; }
  .network-method__steps h3 { margin-bottom: 5px; font-size: 22px; }
  .network-cta__layout { gap: 35px; }
  .network-cta__actions { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .network-page.network-motion-enabled [data-network-reveal] { opacity: 1; transform: none; transition: none; }
  .network-button,
  .network-visual__fallback { transition: none; }
}