/*
 * Theme Name:  nectart
 * Template:    hello-elementor
 * Version:     1.3.0
 *
 * Mesures de référence Figma (Desktop frame 1440×3169px) :
 * ─ Header    : y=0    h=80
 * ─ Hero      : y=139  h=933   (gap dessus = 139-80 = 59px)
 * ─ Gains     : y=1160 h=849   (gap depuis hero = 1160-1072 = 88px)
 * ─ WYR       : y=2080 →       (gap depuis gains = 2080-2009 = 71px)
 * ─ Footer    : y=2929 h=256   (gap depuis CTA = 2929-2849 = 80px)
 */

/* ══════════════════════════════════════════════════════════
   RESET HELLO ELEMENTOR
══════════════════════════════════════════════════════════ */
.site-header, .site-footer, .page-header { display: none !important; }

body.home #content,
body.home #primary,
body.home main,
body.home .site-main,
body.home article.page,
body.home .hentry,
body.home .entry-content {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  display: block !important;
}

/* Barre admin WP */
body.admin-bar .na-hdr    { top: 32px !important; }
body.admin-bar .na-spacer { height: calc(var(--hh) + 32px) !important; }

/* ══════════════════════════════════════════════════════════
   TOKENS
══════════════════════════════════════════════════════════ */
:root {
  --ink:  #0D0D0D;
  --mid:  #404040;
  --soft: #737373;
  --wh:   #FFFFFF;
  --bg:   #F7F7F7;
  --f:    'Plus Jakarta Sans', system-ui, sans-serif;
  --ez:   all 0.15s ease-out;
  --hh:   80px;
}

/* ══════════════════════════════════════════════════════════
   BASE
══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f);
  color: var(--ink);
  background: var(--wh);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a   { text-decoration: none; color: inherit; }
a:visited { color: inherit; }
a:hover   { color: inherit; }
a:focus   { color: inherit; outline: none; }
a:active  { color: inherit; }
a:focus-visible { outline: 2px solid rgba(13,13,13,.2); outline-offset: 2px; }

/* Wrapper centré 1440px */
.na-w {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 120px;
}

/* ══════════════════════════════════════════════════════════
   BOUTONS
══════════════════════════════════════════════════════════ */
.na-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 32px;
  font-family: var(--f);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .015em;
  line-height: 1;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--ez);
  text-decoration: none;
  border: none;
}
/* Spécificité 0-2-0 > a:hover (0-1-1) → couleurs boutons toujours correctes */
.na-btn.na-btn--pri  { background: var(--ink); color: var(--wh); border: 1px solid var(--ink); }
.na-btn.na-btn--pri:hover  { background: #2a2a2a; color: var(--wh); opacity: .92; }
.na-btn.na-btn--pri:visited,
.na-btn.na-btn--pri:focus,
.na-btn.na-btn--pri:active  { color: var(--wh); }

.na-btn.na-btn--sec  { background: transparent; color: var(--ink); border: 1px solid rgba(13,13,13,.35); }
.na-btn.na-btn--sec:hover  { background: #f2f2f2; color: var(--ink); }
.na-btn.na-btn--sec:visited,
.na-btn.na-btn--sec:focus,
.na-btn.na-btn--sec:active  { color: var(--ink); }

.na-btn.na-btn--ghost { background: rgba(255,255,255,.1); color: var(--wh); border: 1px solid rgba(255,255,255,.55); }
.na-btn.na-btn--ghost:hover { background: rgba(255,255,255,.2); color: var(--wh); }
.na-btn.na-btn--ghost:visited,
.na-btn.na-btn--ghost:focus,
.na-btn.na-btn--ghost:active { color: var(--wh); }

/* Pas d'outline par défaut sur les boutons nav */
.na-btn:focus-visible { outline: 2px solid rgba(13,13,13,.2); outline-offset: 2px; }

.na-lbl {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--soft);
  line-height: 20px;
}

/* ══════════════════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════════════════ */
.na-hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  height: var(--hh);
  background: var(--wh);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 64px;
  border-bottom: 1px solid rgba(13,13,13,.08);
  transition: transform .3s ease;
}
.na-hdr__logo img { height: 48px; width: auto; display: block; }
.na-hdr__fallback { display: none; font-size: 16px; font-weight: 800; letter-spacing: .1em; color: var(--ink); }

/* Spacer = hauteur header */
.na-spacer { height: var(--hh); }

.na-hdr__nav { display: flex; align-items: center; gap: 32px; }
.na-hdr__link {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--soft);
  transition: var(--ez);
  white-space: nowrap;
  line-height: 1;
}
.na-hdr__link:hover { color: var(--ink); opacity: .7; }
.na-hdr__link.na-active {
  color: #2B2B2B;
  border-bottom: 2px solid rgba(13,13,13,.35);
  padding-bottom: 2px;
}
.na-hdr__ham {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 4px;
  background: none;
  border: none;
  cursor: pointer;
}
.na-hdr__ham span {
  display: block;
  width: 22px; height: 2px;
  background: var(--ink);
  transition: var(--ez);
}

/* ══════════════════════════════════════════════════════════
   HERO
   ──────────────────────────────────────────────────────────
   Technique padding-bottom : hauteur = 0, la hauteur réelle
   est créée par padding-bottom en % de la largeur.
   Valeur = 933/1440*100 = 64.79%

   Gap Figma entre header bottom et hero top = 59px
   → margin-top: 59px sur .na-hero

   Toutes les positions en % :
   Y% = (Y_figma_absolu - 139) / 933 * 100
   X% = X_figma / 1440 * 100
   W% = W_figma / 1440 * 100
   H% = H_figma / 933 * 100
══════════════════════════════════════════════════════════ */
.na-hero {
  position:       relative;
  width:          100%;
  height:         0;
  padding-bottom: 64.79%;        /* 933/1440*100 */
  margin-top:     59px;          /* gap Figma entre header et hero */
  overflow:       hidden;
  background:     var(--wh);
}

/* ── Enfants positionnés en absolu ── */
.na-hero__img,
.na-hero__h1,
.na-hero__txt,
.na-hero__cta { position: absolute; }

/* CTA spécifique */
.na-hero__cta {
  left:    68.33%;
  top:     94.86%;
  z-index: 2;
  transform: translateY(-50%);
}

/* ── Images ── */
.na-hero__img { overflow: hidden; }
.na-hero__img img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.na-hero__img:hover img { transform: scale(1.04); }

/*
  Image gauche haute (Atelier Meridem)
  Figma : x=0 y=344→205, w=456, h=440, r: 0 8px 8px 0
  top=205/933=21.97%  w=456/1440=31.67%  h=440/933=47.16%
*/
.na-h-l1 {
  left: 0;
  top: 21.97%;
  width: 31.67%;
  height: 47.16%;
  border-radius: 0 8px 8px 0;
}

/*
  Image centre haute (Halden)
  Figma : x=488 y=152→13, w=464, h=256, r:8px
  left=488/1440=33.89%  top=13/933=1.39%  w=32.22%  h=27.44%
*/
.na-h-ct {
  left: 33.89%;
  top: 1.39%;
  width: 32.22%;
  height: 27.44%;
  border-radius: 8px;
}

/*
  Image centre basse (Santé Vitae packaging)
  Figma : x=488 y=704→565, w=464, h=368
  top=565/933=60.56%  h=368/933=39.44%
*/
.na-h-cb {
  left: 33.89%;
  top: 60.56%;
  width: 32.22%;
  height: 39.44%;
}

/*
  Image gauche basse (Santé Vitae guidelines)
  Figma : x=0 y=816→677, w=456, h=256, r: 0 8px 8px 0
  top=677/933=72.56%  h=256/933=27.44%
*/
.na-h-l2 {
  left: 0;
  top: 72.56%;
  width: 31.67%;
  height: 27.44%;
  border-radius: 0 8px 8px 0;
}

/*
  Image droite haute (Vecta)
  Figma : x=984 y=152→13, w=456, h=464, r: 8px 0 0 8px
  right=0  top=1.39%  w=31.67%  h=49.73%
*/
.na-h-rt {
  right: 0;
  top: 1.39%;
  width: 31.67%;
  height: 49.73%;
  border-radius: 8px 0 0 8px;
}

/*
  Image droite basse (Dusk)
  Figma : x=984 y=648→509, w=456, h=344, r: 8px 0 0 8px
  top=509/933=54.56%  h=344/933=36.87%
*/
.na-h-rb {
  right: 0;
  top: 54.56%;
  width: 31.67%;
  height: 36.87%;
  border-radius: 8px 0 0 8px;
}

/* ── H1 ── */
/*
  Figma : x=1 y=139→0, w=455, font=56px ExtraBold, text-align:right
  top=0%  left=0.07%  w=31.6%
  font: 56/1440=3.889vw
*/
.na-hero__h1 {
  left: 0.07%;
  top: 0%;
  width: 31.6%;
  font-size: clamp(24px, 3.889vw, 56px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.015em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: right;
  z-index: 2;
}

/* ── Bloc texte centre (H2 + body) ── */
/*
  Figma : x=484 y=432→293, w=469
  left=484/1440=33.61%  top=293/933=31.4%  w=469/1440=32.57%
*/
.na-hero__txt {
  /* Centré dynamiquement entre image Halden (bottom=28.83%) et Santé Vitae (top=60.56%) */
  left:    33.61%;
  top:     28.83%;     /* = bottom de l'image Halden */
  bottom:  39.44%;     /* = 100% - 60.56% (top de l'image du dessous) */
  width:   32.57%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
}

/*
  H2 "BUILT AS A SYSTEM"
  Figma : font=48px ExtraBold
  48/1440=3.333vw
*/
.na-hero__h2 {
  font-size: clamp(20px, 3.333vw, 48px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.015em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0;
}

/*
  Body text
  Figma : font=24px Regular, leading=32px
  24/1440=1.667vw
*/
.na-hero__p {
  font-size: clamp(13px, 1.667vw, 24px);
  font-weight: 400;
  line-height: 1.33;
  color: var(--mid);
}

/* ── CTA ── */
/*
  Figma : x=984 y=1024→885
  left=984/1440=68.33%  top=885/933=94.86%
*/
.na-hero__cta {
  left:    68.33%;
  top:     94.86%;
  z-index: 2;
  transform: translateY(-50%);
}

/* ══════════════════════════════════════════════════════════
   SECTION DARK — GAINS
   Figma : y=1160 h=849
   Gap depuis hero (1072) = 88px → margin-top:88px
   Padding interne : top=81px (1241-1160), bottom=64px
══════════════════════════════════════════════════════════ */
.na-gains {
  background: var(--ink);
  margin-top: 88px;
  padding: 81px 0 64px;
}
.na-gains .na-w {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/*
  Headline "What your team gains on day one."
  Figma : y=1241, font=40px Bold
*/
.na-gains__h2 {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: #F5F5F5;
  max-width: 900px;
  margin-bottom: 32px;      /* gap jusqu'au bouton : 1321-1241-48(h2)=32px */
}

.na-gains .na-btn--ghost {
  margin-bottom: 40px;      /* gap bouton→cards : 1409-1321-48=40px */
}

/*
  Cards 2×2
  Figma : gap entre rangées = 1689-1409-256 = 24px
  Gap entre colonnes : 732-120-588 = 24px
*/
.na-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  width: 100%;
}

.na-card {
  background: var(--wh);
  border-radius: 8px;
  padding: 40px;         /* padding Figma ≈ 40px interne */
  min-height: 256px;
}
.na-card__t {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .015em;
  color: var(--ink);
  margin-bottom: 14px;
}
.na-card__l {
  width: 48px; height: 1px;
  background: rgba(13,13,13,.2);
  margin-bottom: 14px;
}
.na-card__d {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--mid);
}

/* ══════════════════════════════════════════════════════════
   WHAT YOU RECEIVE
   Figma : y=2080
   Gap depuis gains (2009) = 71px → padding-top:71px
   Label y=2080, rule y=2113 (+33), H2 y=2137 (+24), table y=2209 (+72)
══════════════════════════════════════════════════════════ */
.na-wyr {
  padding: 71px 0 80px;
}

.na-wyr__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 0;       /* table vient directement après */
  padding-bottom: 0;
}

.na-wyr__rule {
  height: 1px;
  background: rgba(13,13,13,.1);
  margin: 16px 0 24px;   /* rule y=2113 → 33px sous le label; h2 y=2137 → 24px sous rule */
}

.na-wyr__h2 {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: var(--ink);
}

.na-wyr__sub {
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  color: var(--soft);
  max-width: 380px;
  align-self: center;
}

/* Table */
.na-tbl {
  width: 100%;
  margin-top: 32px;
  margin-bottom: 24px;
}

.na-tbl__hdr {
  display: grid;
  grid-template-columns: 340px 380px 1fr;
  background: var(--ink);
  height: 48px;
  align-items: center;
  padding: 0 24px;
}
.na-tbl__hdr span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--wh);
}

.na-tbl__row {
  display: grid;
  grid-template-columns: 340px 380px 1fr;
  align-items: center;
  min-height: 88px;
  padding: 0 24px;
  border-bottom: 1px solid rgba(13,13,13,.06);
}
.na-tbl__row--alt { background: var(--bg); }

.na-tbl__c {
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  color: var(--mid);
  padding: 20px 8px;
}
.na-tbl__t {
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  color: var(--ink);
}
.na-tbl__w {
  font-weight: 300;
  color: var(--soft);
}

.na-wyr__note {
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  color: var(--soft);
  margin: 24px 0;
}

.na-ctas { display: flex; gap: 16px; }

/* ══════════════════════════════════════════════════════════
   FOOTER
   Figma : y=2929 h=256
   Gap CTAs→footer = 80px
══════════════════════════════════════════════════════════ */
.na-footer { background: var(--ink); }
.na-footer__in {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 48px;
  padding-bottom: 48px;
  border-top: 1px solid rgba(255,255,255,.1);
  min-height: 256px;
}
.na-footer__n { font-size: 16px; font-weight: 500; color: var(--wh); margin-bottom: 12px; }
.na-footer__t { font-size: 16px; font-weight: 300; line-height: 24px; color: var(--soft); margin-bottom: 20px; }
.na-footer__m { font-size: 16px; font-weight: 300; color: var(--soft); display: block; margin-bottom: 16px; transition: color .15s; }
.na-footer__m:hover { color: var(--wh); }
.na-footer__lg { font-size: 11px; font-weight: 300; line-height: 16px; color: #4D4D4D; }
.na-footer__lg a { color: inherit; }
.na-footer__s  { font-size: 11px; font-weight: 300; line-height: 16px; color: #474747; margin-top: 4px; }
.na-footer__nav { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.na-footer__nav a { font-size: 16px; font-weight: 700; letter-spacing: .02em; color: var(--wh); transition: color .12s; }
.na-footer__nav a:hover { color: var(--soft); }

/* ══════════════════════════════════════════════════════════
   POPUP
══════════════════════════════════════════════════════════ */
.na-popup {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  visibility: hidden; opacity: 0;
  transition: opacity .25s ease, visibility .25s ease;
}
.na-popup.is-open { visibility: visible; opacity: 1; }
.na-popup__bg { position: absolute; inset: 0; background: rgba(13,13,13,.75); cursor: pointer; }
.na-popup__box {
  position: relative; z-index: 1;
  background: var(--wh); border-radius: 4px;
  width: 100%; max-width: 680px;
  max-height: 90vh; overflow-y: auto;
  padding: 48px 40px 32px;
}
.na-popup__x {
  position: absolute; top: 20px; right: 20px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg); font-size: 24px; font-weight: 300;
  color: var(--mid); display: flex; align-items: center;
  justify-content: center; transition: var(--ez); cursor: pointer;
}
.na-popup__x:hover { background: rgba(13,13,13,.08); color: var(--ink); }
.na-popup__h  { font-size: 28px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.na-popup__i  { font-size: 14px; color: var(--mid); margin-bottom: 24px; }
.na-popup__hr { border: none; border-top: 1px solid rgba(13,13,13,.1); margin-bottom: 24px; }
#na-brief  { display: flex; flex-direction: column; gap: 20px; }
.na-f2     { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.na-fld    { display: flex; flex-direction: column; gap: 8px; }
.na-fld label { font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--soft); text-transform: uppercase; }
.na-fld input, .na-fld select, .na-fld textarea {
  height: 44px; padding: 0 16px;
  background: var(--bg); border: 1px solid rgba(13,13,13,.12);
  border-radius: 3px; font-family: var(--f);
  font-size: 14px; color: var(--ink);
  appearance: none; transition: border-color .12s;
}
.na-fld textarea { height: 96px; padding: 14px 16px; resize: vertical; }
.na-fld input:focus, .na-fld select:focus, .na-fld textarea:focus { outline: none; border-color: var(--ink); }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — Tablet ≤ 1100px
══════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .na-hdr { padding: 0 48px; }
  .na-w   { padding: 0 48px; }
  .na-tbl__hdr, .na-tbl__row { grid-template-columns: 220px 260px 1fr; }
  .na-gains__h2 { font-size: 32px; }
  .na-wyr__h2   { font-size: 32px; }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — Mobile ≤ 768px
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root { --hh: 64px; }

  /* Header */
  .na-hdr { padding: 0 20px; }
  .na-hdr__logo img { height: 36px; }
  .na-hdr__nav  { display: none; }
  .na-hdr__ham  { display: flex; }

  /* Nav mobile overlay */
  .na-hdr__nav.is-open {
    display: flex; flex-direction: column;
    position: fixed; top: 64px; left: 0; right: 0; bottom: 0;
    background: var(--wh); padding: 40px 20px; gap: 24px; z-index: 9998;
  }
  .na-hdr__nav.is-open .na-hdr__link { font-size: 26px; color: var(--ink); transform: none; }

  /* Hero mobile — layout linéaire */
  .na-hero {
    height: auto !important;
    padding-bottom: 0 !important;
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .na-hero__img,
  .na-hero__h1,
  .na-hero__txt,
  .na-hero__cta {
  left:    68.33%;
  top:     94.86%;
  z-index: 2;
  transform: translateY(-50%);
}
  .na-hero__h1   { order: 1; text-align: left !important; font-size: 28px !important; padding: 24px 20px 16px; }
  .na-h-ct       { order: 2; height: 220px !important; border-radius: 0 !important; }
  .na-h-ct img   { position: static !important; width: 100% !important; height: 220px !important; object-fit: cover; }
  .na-hero__txt  { order: 3; padding: 24px 20px; }
  .na-hero__h2   { font-size: 24px !important; }
  .na-hero__p    { font-size: 15px !important; }
  .na-hero__cta  { order: 4; margin: 0 20px 32px; align-self: flex-start; }
  /* Masquer les images secondaires sur mobile */
  .na-h-l1, .na-h-l2, .na-h-rt, .na-h-rb, .na-h-cb { display: none !important; }

  /* Sections */
  .na-gains { margin-top: 48px; padding: 48px 0; }
  .na-gains .na-w { padding: 0 20px; }
  .na-gains__h2 { font-size: 24px; }
  .na-cards { grid-template-columns: 1fr; }

  .na-w   { padding: 0 20px; }
  .na-wyr { padding: 48px 0; }
  .na-wyr__top { flex-direction: column; align-items: flex-start; gap: 16px; }
  .na-wyr__h2  { font-size: 26px; }
  .na-tbl__hdr { display: none; }
  .na-tbl__row { grid-template-columns: 1fr; padding: 16px 0; }
  .na-ctas { flex-direction: column; }
  .na-ctas .na-btn { width: 100%; justify-content: center; }

  .na-footer__in { flex-direction: column; gap: 32px; padding-left: 20px; padding-right: 20px; }
  .na-footer__nav { flex-direction: row; flex-wrap: wrap; gap: 10px 16px; }

  .na-popup__box { margin: 0 12px; padding: 40px 20px 24px; }
  .na-f2 { grid-template-columns: 1fr; }
}

/* Hero : deux CTA côte à côte sur desktop (See the work + Send a brief) */
.na-hero__ctas { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.na-hero__brief-m { display: none; }   /* Send a brief mobile-only, hors hero */
@media (max-width: 768px) {
  /* Hero inchangé : on ne garde QUE 'See the work' dans le hero */
  .na-hero__brief { display: none !important; }
  /* 'Send a brief' déplacé SOUS le hero, pleine largeur */
  .na-hero__brief-m { display: block; padding: 0 20px 8px; }
  .na-hero__brief-m .na-btn { width: 100%; justify-content: center; }
  /* Garde-fou : hamburger toujours visible en mobile (n'affecte pas l'ouverture de la nav) */
  .na-hdr__ham { display: flex !important; }
}