/* =========================================================
   PROCESS PAGE — CSS pixel-perfect depuis Figma node 80:2
   Desktop frame 1440×2620. Toutes les mesures en px absolus.
   ========================================================= */

/* ── HERO
   Frame y=118 dans Desktop. Spacer=80px. padding-top = 118-80 = 38px
   ──────────────────────────────────────────────────────── */
.na-proc__hero { padding-top: 38px; }

/* Eyebrow label — 16px Bold #737373 lh:24px tracking:-0.032px
   Figma: left=120 top=118 w=400 h=24 */
.na-proc__eyebrow {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.032px;
  color: #737373;
  margin: 0;
}

/* Separator après eyebrow — y=153, gap=11px (153-142=11) puis 15px avant h1 (168-153=15) */
.na-proc__hero-sep {
  height: 1px;
  background: rgba(13,13,13,.1);
  margin: 11px 0 15px;
}

/* Conteneur h1 + subtitle — flex, align-items:flex-end
   H1 bottom = 168+192 = 360. Subtitle bottom = 296+64 = 360. Identiques → flex-end. */
.na-proc__hero-cols {
  display: flex;
  align-items: flex-end;
  gap: 0; /* gap géré par margin-right sur h1 */
}

/* H1 — 56px ExtraBold lh:64px tracking:-1.12px (-2%) w=620px
   Figma: left=120 top=168 w=620 h=192 */
.na-proc__h1 {
  flex: 0 0 620px;
  font-size: 56px;
  font-weight: 800;
  line-height: 64px;
  letter-spacing: -1.12px;
  color: #0d0d0d;
  margin: 0 40px 0 0; /* gap h1→subtitle = 780-740 = 40px */
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Subtitle — 24px Light lh:32px tracking:-0.12px w=560px
   Figma: left=780 top=296 w=560 h=64
   left=780-120(padding)=660px = 620(h1)+40(gap). Aligné en bas avec h1. */
.na-proc__hero-sub {
  flex: 0 0 560px;
  font-size: 24px;
  font-weight: 300;
  line-height: 32px;
  letter-spacing: -0.12px;
  color: #404040;
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Body text — 16px Regular lh:24px tracking:-0.048px w=760px
   Figma: top=408, gap depuis h1 bottom(360) = 48px */
.na-proc__hero-body {
  margin-top: 48px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.048px;
  color: #404040;
  max-width: 760px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Button — Figma top=512, gap depuis body bottom(456) = 56px */
.na-proc__hero-btn {
  margin-top: 56px;
  display: inline-flex;
}

/* ── THE PROCESS SECTION
   y=605. Gap depuis hero bottom (118+442=560) = 605-560 = 45px.
   ──────────────────────────────────────────────────────── */
.na-proc__steps { padding-top: 45px; }

/* Section label — 16px Bold #737373 lh:24px tracking:-0.032px
   Figma: left=120 top=605 w=200 h=24 */
.na-proc__sec-lbl {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.032px;
  color: #737373;
  margin: 0 0 11px; /* gap avant separator: 640-629=11px */
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Row — grid 64px | 480px | 620px
   Col1=num (x=120, width=64: de x=120 à x=184)
   Col2=title+sub (x=184, width=480: de x=184 à x=664)
   Col3=desc (x=664, width=620)
   border-top = separator. padding-top = 26px (666-640=26 pour row01)
   ──────────────────────────────────────────────────────── */
.na-proc__row {
  display: grid;
  grid-template-columns: 64px 480px 620px;
  border-top: 1px solid rgba(13,13,13,.1);
  padding-top: 26px;   /* titre au-dessus du num de 6px: 666-640=26 */
  padding-bottom: 32px;
}
.na-proc__row--last {
  border-bottom: 1px solid rgba(13,13,13,.1);
}

/* Number — 16px Bold #737373 lh:16px tracking:+0.48px (+3%)
   Figma: left=120 top=672 w=48. 6px en dessous du titre (672-666=6). */
.na-proc__num {
  padding-top: 6px; /* aligne avec desc (32px-26px=6px) */
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.48px;
  color: #737373;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Left column — contient titre et subtitle */
.na-proc__left { /* pas de style particulier */ }

/* Step name — 32px Bold lh:40px tracking:-0.32px (-1%)
   Figma: left=184 top=666 w=440 h=40 */
.na-proc__name {
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: -0.32px;
  color: #0d0d0d;
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Step subtitle — 14px Medium lh:20px tracking:+0.07px
   Figma: left=184 top=710 w=440 h=20. Gap depuis name: 710-706=4px. */
.na-proc__sub {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.07px;
  color: #404040;
  margin: 4px 0 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Description — 16px Regular lh:24px tracking:-0.048px w=620px
   Figma: left=664 top=672 w=620. Aligne avec num (top=672=26+6). */
.na-proc__desc {
  padding-top: 6px; /* même ligne que num */
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.048px;
  color: #404040;
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ── SCOPE SECTION
   y=1374. Gap depuis PROCESS bottom (605+647=1252) = 1374-1252 = 122px.
   ──────────────────────────────────────────────────────── */
.na-proc__scope { padding-top: 122px; }

/* Double label "SCOPE" + "WHAT'S INCLUDED" sur même ligne
   SCOPE: left=120 top=1374 w=100. WHAT'S INCLUDED: left=240 top=1374.
   Gap entre eux: 240-120=120px = "SCOPE"(100px) + 20px d'espace. */
.na-proc__dbl-lbl {
  display: flex;
  align-items: baseline;
  gap: 0;
  margin: 0;
}
.na-proc__dbl-lbl span {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.032px;
  color: #737373;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.na-proc__dbl-lbl span:first-child {
  min-width: 120px; /* "SCOPE" occupe 100px + 20px gap = 120px avant "WHAT'S INCLUDED" */
}

/* Separator scope — y=1409, gap=11px (1409-1398=11) */
.na-proc__scope-sep {
  height: 1px;
  background: rgba(13,13,13,.1);
  margin: 11px 0 0;
}

/* Scope headline — 32px Bold lh:40px tracking:-0.32px w=760px
   Figma: top=1431, gap=22px depuis separator (1431-1409=22) */
.na-proc__scope-h {
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: -0.32px;
  color: #0d0d0d;
  max-width: 760px;
  margin: 22px 0 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Table rows — y=1492, gap=21px depuis headline bottom (1471)
   Chaque row h=40px. Separator w=706px (partiel). */
.na-proc__table { margin-top: 21px; }

.na-proc__trow {
  display: grid;
  grid-template-columns: 280px 1fr;  /* label:280px (x=0 à x=280=400-120), valeur:reste */
  align-items: center;
  min-height: 40px;
  padding: 8px 0;
  position: relative;
}
/* Separator partiel 706px — Figma line w=706 x=120 (x-120=0 en container) */
.na-proc__trow::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 706px;
  height: 1px;
  background: rgba(13,13,13,.1);
}
.na-proc__trow:first-child::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 706px;
  height: 1px;
  background: rgba(13,13,13,.1);
}
.na-proc__trow--last::after { display: none; }

/* Label gauche — 16px Bold #737373 lh:24px tracking:-0.032px
   Figma: left=120 top=1492 w=240 h=24 */
.na-proc__tlbl {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.032px;
  color: #737373;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Valeur droite — 16px Regular lh:24px tracking:-0.048px w=600px
   Figma: left=400 (400-120=280 de container) */
.na-proc__tval {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.048px;
  color: #404040;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ── CONTEXT SECTION
   y=1852. Gap depuis SCOPE bottom (1374+382=1756) = 1852-1756 = 96px.
   ──────────────────────────────────────────────────────── */
.na-proc__context { padding-top: 96px; }

/* Context separator — y=1889, gap=13px (1889-1876=13) */
.na-proc__ctx-sep {
  height: 1px;
  background: rgba(13,13,13,.1);
  margin-top: 13px;
}

/* Items list — y=1910, gap=21px depuis separator (1910-1889=21)
   Chaque item: 16px Regular lh:24px, espacés de 32px (gap=8px entre items)
   Figma: top=1910, 1942, 1974, 2006, 2038 → intervalles=32px */
.na-proc__ctx-list {
  list-style: none;
  padding: 0;
  margin: 21px 0 0;
}
.na-proc__ctx-list li {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.048px;
  color: #404040;
  font-family: 'Plus Jakarta Sans', sans-serif;
  margin-bottom: 8px; /* 32px total = 24px lh + 8px gap */
}
.na-proc__ctx-list li:last-child { margin-bottom: 0; }

/* ── CTA SECTION
   y=2156. Gap depuis CONTEXT bottom (1852+210=2062) = 2156-2062 = 94px.
   ──────────────────────────────────────────────────────── */
.na-proc__cta { padding-top: 94px; padding-bottom: 80px; }

/* CTA H2 — 40px Bold lh:48px tracking:-0.4px (-1%) w=840px
   Figma: top=2156 w=840 h=48 */
.na-proc__cta-h {
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: -0.4px;
  color: #0d0d0d;
  max-width: 840px;
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* CTA sub — 16px Regular lh:24px tracking:-0.048px w=600px
   Figma: top=2220, gap=16px depuis h2 bottom (2204) */
.na-proc__cta-sub {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.048px;
  color: #404040;
  max-width: 600px;
  margin: 16px 0 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Buttons — y=2268, gap=24px depuis sub bottom(2244), gap entre boutons=16px
   Figma: btn1 x=120 y=2268 | btn2 x=322 y=2268 (322-306=16px gap) */
.na-proc__cta-btns {
  display: flex;
  gap: 16px;
  margin-top: 24px;
}

/* ── FOOTER gap
   y=2364. Gap depuis CTA bottom (2316) = 48px.
   Géré par na-footer__in padding-top:48px dans style.css.
   ──────────────────────────────────────────────────────── */

/* ── RESPONSIVE 1100px ── */
@media (max-width: 1100px) {
  .na-proc__h1 { font-size: 44px; line-height: 52px; flex: 0 0 500px; }
  .na-proc__hero-sub { flex: 0 0 auto; font-size: 20px; line-height: 28px; }
  .na-proc__row { grid-template-columns: 48px 400px 1fr; }
}

/* ── RESPONSIVE 768px ── */
@media (max-width: 768px) {
  .na-proc__hero { padding-top: 24px; }
  .na-proc__hero-cols { flex-direction: column; align-items: flex-start; gap: 24px; }
  .na-proc__h1 { flex: 0 0 auto; font-size: 32px; line-height: 40px; letter-spacing: -0.64px; margin-right: 0; }
  .na-proc__hero-sub { flex: 0 0 auto; font-size: 18px; line-height: 26px; }
  .na-proc__hero-body { margin-top: 32px; }
  .na-proc__hero-btn { margin-top: 32px; }
  .na-proc__row { grid-template-columns: 48px 1fr; padding-top: 20px; }
  .na-proc__desc { grid-column: 2; padding-top: 12px; }
  .na-proc__name { font-size: 24px; line-height: 32px; }
  .na-proc__scope-h { font-size: 24px; line-height: 32px; }
  .na-proc__trow { grid-template-columns: 1fr; }
  .na-proc__trow::after, .na-proc__trow::before { width: 100%; }
  .na-proc__cta-h { font-size: 28px; line-height: 36px; }
  .na-proc__cta-btns { flex-direction: column; }
}