/* =========================================================
   CASE-STUDY.CSS — spacings pixel-perfect depuis Figma
   Santé Vitae node 127:246 — Desktop frame 1440×5734
   ========================================================= */

/* ═══════════════════════════════════════════════════════
   HERO
   Frame: y=80, h=560 — ends at y=640
   padding-top/bottom: hero has pt=32px pb=48px internally
   ═══════════════════════════════════════════════════════ */
.na-cs-hero { position:relative; height:560px; overflow:hidden; background:var(--ink); }
.na-cs-hero__img { position:absolute; inset:0; }
.na-cs-hero__img img { width:100%; height:100%; object-fit:cover; opacity:.85; }
/* Tags: absolute top=32px (32px from hero top=80, relative=32) right=0 px=120 */
.na-cs-hero__tags {
  position:absolute; top:32px; right:120px;
  font-family:var(--f); font-weight:700; font-size:16px; line-height:20px;
  letter-spacing:0.48px; color:rgba(255,255,255,.7);
}
/* Title: absolute bottom=48px (pb=48px) left=120px, font 56px ExtraBold */
.na-cs-hero__t {
  position:absolute; bottom:48px; left:120px;
  font-family:var(--f); font-weight:800; font-size:56px; line-height:64px;
  letter-spacing:-1.12px; color:var(--wh); margin:0; max-width:900px;
}

/* ═══════════════════════════════════════════════════════
   INFOS SECTION
   Frame: y=672, h=192 — gap depuis hero (640) = 32px
   ─────────────────────────────────────────────────────
   Line 1: y=672 (= gap 32px depuis hero)
   SECTOR labels: y=704 (32px sous line 1)
   Values: y=728 (4px sous labels bottom 724)
   Line 2: y=784 (32px sous values bottom 752)
   Button: y=816 (32px sous line 2)
   ═══════════════════════════════════════════════════════ */

/* Separateur horizontal ligne 1px rgba */
.na-cs-hrule {
  height: 1px;
  background: rgba(13,13,13,.12);
  margin-top: 32px; /* gap depuis hero : 32px */
}
.na-cs-hrule--b {
  margin-top: 32px;  /* 32px depuis values bottom (752-720=32: lh24+value top at 728) */
  margin-bottom: 32px; /* 32px avant button (816-784=32) */
}
.na-cs-hrule--s {
  margin-top: 0; margin-bottom: 0;
}

/* Infos grid — 4 colonnes, positions absolues Figma :
   SECTOR x=120 w=220 | YEAR x=360 w=160 | TYPE x=560 w=280 | DELIVERABLES x=880 w=440
   Content-area : x=0(220) | x=240(160) | x=440(280) | x=760(440)
   grid-template-columns: 240px 200px 320px 1fr (chaque col = content + trailing gap) */
.na-cs-infos {
  display: grid;
  grid-template-columns: 240px 200px 320px 1fr;
  margin-top: 32px; /* 704-672=32px gap depuis line 1 */
}
.na-cs-info-lbl {
  font-family:var(--f); font-weight:700; font-size:16px; line-height:20px;
  letter-spacing:0.48px; color:#737373; margin:0;
}
/* Values: y=728, 4px sous label bottom (y=704 + lh=20 = 724, 728-724=4px) */
.na-cs-info-val {
  font-family:var(--f); font-weight:400; font-size:16px; line-height:24px;
  letter-spacing:-0.048px; color:var(--ink); margin:4px 0 0;
}

/* CTA in infos — na-btn--sec (border style, NOT filled) */
/* handled via existing na-btn na-btn--sec classes */

/* NEXT PROJECT WRAPPER */
.na-cs-next-wrap { margin-top: 62px; } /* 5208-5146=62 */
.na-cs-next {
  display:flex; align-items:baseline; gap:48px;
  padding: 14px 0;
}
.na-cs-next__lbl {
  font-family:var(--f); font-weight:700; font-size:16px;
  letter-spacing:0.48px; color:#737373;
}
.na-cs-next__link {
  font-family:var(--f); font-weight:700; font-size:16px;
  letter-spacing:0.48px; color:var(--ink);
}
.na-cs-next__link:hover { color: var(--mid); text-decoration: none; }

/* CTA section — 54px depuis NEXT selon Figma */
.na-cs-cta-wrap { padding-bottom:80px; }
.na-cs-cta { padding-top: 54px; }
.na-cs-cta-t {
  font-family:var(--f); font-weight:700; font-size:40px; line-height:48px;
  letter-spacing:-0.4px; color:var(--ink); max-width:800px; margin:0 0 24px;
}

/* ═══════════════════════════════════════════════════════
   SECTIONS INTÉRIEURES
   ─────────────────────────────────────────────────────
   Section header: num + label, 16px Bold #737373 tracking:+0.48px
   Séparateur: 13px sous label, 24px avant contenu
   ═══════════════════════════════════════════════════════ */
.na-cs-s { padding-bottom: 0; } /* padding-top défini inline par section */

/* Header de section: num(w=40) + gap(16px) + label */
.na-cs-shdr { display:flex; align-items:baseline; gap:0; margin:0; }
.na-cs-snum {
  flex:0 0 56px; /* 40px num + 16px gap */
  font-family:var(--f); font-weight:700; font-size:16px; line-height:20px;
  letter-spacing:0.48px; color:#737373;
}
.na-cs-slbl {
  font-family:var(--f); font-weight:700; font-size:16px; line-height:20px;
  letter-spacing:0.48px; color:#737373;
}

/* Séparateur section — 13px sous label bottom, 24px avant contenu
   label lh=20px → bottom. Line at 13px below → margin-top:13px.
   Contenu à 24px sous la ligne → margin-bottom:24px. */
.na-cs-sep {
  height: 1px;
  background: rgba(13,13,13,.12);
  margin: 13px 0 24px;
}
/* Séparateur inter-row dans CONTEXT */
.na-cs-sep--ctx {
  margin-top: 37px;   /* 2969-2932=37px (depuis content bottom de row 1) */
  margin-bottom: 27px; /* 2996-2969=27px (avant row 2 label top) */
}

/* ═══════════════════════════════════════════════════════
   01 STRATEGIC DIRECTION
   Sections: quote(24px Bold w=520) | direction(16px Regular x=688=568px)
   gap entre h1 right edge (520) et direction: 568-520=48px
   direction start: 14px plus bas que quote start
   ═══════════════════════════════════════════════════════ */
.na-cs-dir { display:flex; gap:48px; align-items:flex-start; }
.na-cs-quote {
  flex:0 0 520px;
  font-family:var(--f); font-weight:700; font-size:24px; line-height:32px;
  letter-spacing:-0.192px; color:var(--ink); margin:0; quotes:none;
}
/* Direction: 14px plus bas que quote (999-985=14) */
.na-cs-dir-body {
  flex:1;
  font-family:var(--f); font-weight:400; font-size:16px; line-height:24px;
  letter-spacing:-0.048px; color:#404040;
  margin:0; padding-top:14px;
}

/* ═══════════════════════════════════════════════════════
   02 SYSTEM OVERVIEW
   Image: w=1200px h=480px radius=4px — 32px sous sep
   (sep à margin-bottom:24px, mais sep→image = 32px: ajuster dans le HTML)
   ═══════════════════════════════════════════════════════ */
.na-cs-overview { border-radius:4px; overflow:hidden; height:480px; }
.na-cs-overview img { width:100%; height:100%; object-fit:cover; }

/* ═══════════════════════════════════════════════════════
   03 PROCESS & SYSTEM ARCHITECTURE
   Images: main 400×568 | right-top 352×272 | right-bottom 352×272 | gap=24px
   Text col: x=920 = 800px depuis content left = (400+24+352+24)=800px ✓
   ═══════════════════════════════════════════════════════ */
.na-cs-proc { display:flex; gap:24px; }
.na-cs-proc__imgs {
  flex:0 0 776px; /* 400+24+352 */
  display:grid;
  grid-template-columns: 400px 352px;
  grid-template-rows: 272px 272px;
  gap: 24px;
}
.na-cs-proc__main { grid-row:1/3; border-radius:4px; overflow:hidden; }
.na-cs-proc__main img { width:100%; height:100%; object-fit:cover; }
.na-cs-proc__sm { border-radius:4px; overflow:hidden; }
.na-cs-proc__sm img { width:100%; height:100%; object-fit:cover; }
.na-cs-proc__txt { flex:1; } /* w=400px */
/* "How the system was built": 16px Bold, top=1820, sep at proc top+sep... */
.na-cs-proc__ttl {
  font-family:var(--f); font-weight:700; font-size:16px; line-height:24px;
  letter-spacing:-0.048px; color:var(--ink); margin:0 0 32px;
}
/* description: 16px Regular, 32px sous ttl (1852-1820=32) */
.na-cs-proc__body {
  font-family:var(--f); font-weight:400; font-size:16px; line-height:24px;
  letter-spacing:-0.048px; color:#404040; margin:0 0 0;
}
/* Deliverable items: 14px Regular, lines de 1px entre eux, gap=32px entre items */
.na-cs-deliv { list-style:none; padding:0; margin:24px 0 0; } /* 2012-1852-96-32=32px sous body */
.na-cs-deliv li {
  font-family:var(--f); font-weight:400; font-size:14px; line-height:20px;
  letter-spacing:-0.028px; color:#404040;
  padding: 16px 0; /* padding = (32px total - 20px lh) / 2 = ~6px each side mais Figma montre: item à y=2028, lh=20, sep à y=2060 → 2060-2028-20=12px entre items. Donc padding-bottom=12px */
  border-bottom: 1px solid rgba(13,13,13,.1);
}
.na-cs-deliv li:first-child { border-top:1px solid rgba(13,13,13,.1); }
.na-cs-deliv li::before { content:''; /* prefixe dans le texte, pas en CSS */ }

/* ═══════════════════════════════════════════════════════
   OUTCOME — dark section
   Frame: y=2521, h=220 — margin-top:128px (2521-2393=128) set inline
   Internal: padding-top=32px | label | 12px | title | 12px | sub | padding-bottom=32px
   ─────────────────────────────────────────────────────
   TITRE: 24px Regular (font-normal!) lh=32px — PAS 32px Bold!
   ═══════════════════════════════════════════════════════ */
.na-cs-outcome { background:var(--ink); padding:32px 0; }
.na-cs-outcome__lbl {
  font-family:var(--f); font-weight:700; font-size:16px; line-height:20px;
  letter-spacing:0.48px; color:#737373; margin:0 0 12px;
}
/* TITRE OUTCOME: 24px Regular (font-normal), lh=32px, color=white, w=1008px */
.na-cs-outcome__t {
  font-family:var(--f); font-weight:400; font-size:24px; line-height:32px;
  letter-spacing:-0.12px; color:var(--wh); max-width:1008px; margin:0 0 12px;
}
/* SUB OUTCOME: 16px Light, lh=24px, color=#999 */
.na-cs-outcome__sub {
  font-family:var(--f); font-weight:300; font-size:16px; line-height:24px;
  letter-spacing:-0.032px; color:#999; margin:0;
}

/* ═══════════════════════════════════════════════════════
   04 CONTEXT
   Row layout: label(280px) + gap(48px) + content(w=872px)
   label x=120 w=280 | content x=448 → 448-120=328=280+48 ✓
   ═══════════════════════════════════════════════════════ */
.na-cs-ctx-row { display:flex; gap:48px; }
.na-cs-ctx-lbl {
  flex:0 0 280px;
  font-family:var(--f); font-weight:700; font-size:16px; line-height:20px;
  letter-spacing:0.48px; color:#737373; margin:0; padding-top:2px;
}
.na-cs-ctx-body {
  flex:1; max-width:872px;
  font-family:var(--f); font-weight:400; font-size:16px; line-height:24px;
  letter-spacing:-0.048px; color:#404040; margin:0;
}

/* ═══════════════════════════════════════════════════════
   05 BRAND GUIDELINES GRID
   Grille: 5×227px, gap=16px, thumbnails h=161px radius=3px
   Description: 16px Regular, 21px sous sep (margin-bottom:21px sur sep)
   Grid: 43px sous desc bottom (grid y=3264, desc bottom=3173+48=3221, 3264-3221=43px)
   ═══════════════════════════════════════════════════════ */
.na-cs-gl-desc {
  font-family:var(--f); font-weight:400; font-size:16px; line-height:24px;
  letter-spacing:-0.048px; color:#404040; max-width:900px; margin:0 0 43px;
}
/* override sep margin-bottom pour guidelines section (21px au lieu de 24px) */
.na-cs-s .na-cs-sep + .na-cs-gl-desc { /* desc vient après sep → ajuster via margin-top sur desc */
  margin-top: -3px; /* 24-21=3px de correction pour 21px réel */
}
.na-cs-gl-grid {
  display:grid;
  grid-template-columns: repeat(5, 227px);
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(13,13,13,.15) transparent;
}
.na-cs-gl-item { display:flex; flex-direction:column; gap:4px; }
.na-cs-gl-thumb {
  width:227px; height:161px; border-radius:3px;
  background-color:#e8e8e8;
  background-size:contain; background-position:center; background-repeat:no-repeat;
  overflow: hidden;
}
/* Support img tags inside gl-thumb */
.na-cs-gl-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Section padding defaults */
.na-cs-section {
  padding-top: 64px;
}
.na-cs-gl-num {
  font-family:var(--f); font-weight:300; font-size:11px; line-height:12px;
  color:#8c8c8c;
}

/* ═══════════════════════════════════════════════════════
   WYR — override pour case study (séparateur à 13px sous label)
   ═══════════════════════════════════════════════════════ */
.na-cs-s .na-wyr__lbl {
  font-family:var(--f); font-weight:700; font-size:16px; line-height:20px;
  letter-spacing:0.48px; color:#737373; margin:0;
  /* = même classe na-lbl mais redéfini ici pour l'espace */
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */
@media (max-width:1100px) {
  .na-cs-hero__t { font-size:56px; }
  .na-cs-infos { grid-template-columns:1fr 1fr; gap:24px; }
  .na-cs-dir { flex-direction:column; gap:24px; }
  .na-cs-dir-body { padding-top:0; }
  .na-cs-proc { flex-direction:column; }
  .na-cs-proc__imgs { flex:none; width:100%; }
  .na-cs-gl-grid { grid-template-columns:repeat(4,1fr); }
  .na-cs-gl-thumb { width:100%; }
}
@media (max-width:768px) {
  .na-cs-hero { height:400px; }
  .na-cs-hero__t { font-size:40px; line-height:48px; left:20px; bottom:24px; }
  .na-cs-hero__tags { right:20px; top:24px; }
  .na-cs-infos { grid-template-columns:1fr 1fr; gap:16px; margin-top:24px; }
  .na-cs-dir { flex-direction:column; }
  .na-cs-quote { flex:0 0 auto; font-size:20px; }
  .na-cs-proc { flex-direction:column; gap:32px; }
  .na-cs-proc__imgs { flex:none; width:100%; grid-template-columns:1fr; grid-template-rows:auto; }
  .na-cs-proc__main { grid-row:auto; height:240px; }
  .na-cs-proc__sm { height:180px; }
  .na-cs-ctx-row { flex-direction:column; gap:8px; }
  .na-cs-gl-grid { grid-template-columns:repeat(3,1fr); gap:8px; }
  .na-cs-gl-thumb { width:100%; height:120px; }
  .na-cs-cta-t { font-size:28px; line-height:36px; }
}