/* =========================================================
   PAGES-SHARED.CSS — styles des pages intérieures
   Complète style.css sans jamais redéfinir ses classes.
   Variables CSS : var(--ink) var(--mid) var(--soft) var(--wh) var(--bg) var(--f) var(--ez)
   ========================================================= */

/* ── Reset Hello Elementor — toutes les pages custom template ── */
body.page-template .site-header,
body.page-template .site-footer,
body.page-template .page-header { display: none !important; }

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

/* ── Utilities partagées ── */
.na-rule { width:100%; height:1px; background:rgba(13,13,13,.18); margin:16px 0 32px; }
.na-rule--light { background:rgba(13,13,13,.08); }
.na-lbl--soft { color:var(--soft); }
.na-ctas { display:flex; gap:16px; flex-wrap:wrap; margin-top:32px; }

.na-pg-hero { padding-top:80px; }

.na-pg-h1 {
  font-family:var(--f); font-weight:800; font-size:56px;
  line-height:1.05; letter-spacing:-.015em; color:var(--ink);
  margin:16px 0 24px;
}
.na-pg-h2 {
  font-family:var(--f); font-weight:700; font-size:40px;
  line-height:1.2; letter-spacing:-.01em; color:var(--ink);
  margin:40px 0 16px;
}
.na-pg-sub {
  font-family:var(--f); font-weight:300; font-size:24px;
  line-height:1.3; color:var(--mid); margin:0 0 24px;
}
.na-pg-body {
  font-family:var(--f); font-weight:400; font-size:16px;
  line-height:24px; letter-spacing:-.003em; color:var(--mid);
  margin:16px 0; max-width:840px;
}
.na-pg-body--wide { max-width:1200px; }
.na-pg-num {
  font-family:var(--f); font-weight:400; font-size:13px;
  color:var(--soft); margin-right:16px;
}
.na-pg-hdr { display:flex; align-items:baseline; gap:0; margin-bottom:0; }
.na-pg-section { padding:64px 0; }

/* Rows (for-studios, process) */
.na-rows { display:flex; flex-direction:column; }
.na-row { display:flex; gap:48px; padding:24px 0; border-bottom:1px solid rgba(13,13,13,.08); }
/* .na-row:first-child border-top supprimé : na-rule précédent sert de séparateur */
.na-row__lbl { flex:0 0 280px; display:flex; flex-direction:column; gap:4px; }
.na-row__lbl strong { font-family:var(--f); font-weight:700; font-size:14px; letter-spacing:.02em; color:var(--ink); }
.na-row__sub { font-family:var(--f); font-weight:300; font-size:13px; color:var(--soft); }
.na-row .na-pg-body { flex:1; margin:0; align-self:center; }

/* List */
.na-pg-list { list-style:none; padding:0; margin:16px 0; }
.na-pg-list li {
  font-family:var(--f); font-weight:400; font-size:16px;
  line-height:24px; color:var(--ink);
  padding:16px 0; border-bottom:1px solid rgba(13,13,13,.08);
}
.na-pg-list li::before { content:'—'; margin-right:12px; color:var(--soft); }

/* =========================================================
   WORK PAGE
   ========================================================= */
body.page-template-page-work #content,
body.page-template-page-work main,
body.page-template-page-work article,
body.page-template-page-work .hentry,
body.page-template-page-work .entry-content {
  padding:0 !important; margin:0 !important;
  max-width:none !important; width:100% !important; display:block !important;
}

.na-work__hero { padding-top:64px; }
.na-work__typo { position:relative; height:128px; margin-bottom:41px; }
.na-work__b {
  position:absolute; left:0; top:0;
  font-family:var(--f); font-weight:500; font-size:144px;
  line-height:128px; letter-spacing:.05em; color:var(--ink);
}
.na-work__lines { position:absolute; left:106px; top:0; display:flex; flex-direction:column; }
.na-work__l1 {
  display:block; font-family:var(--f); font-weight:800;
  font-size:56px; line-height:56px; letter-spacing:.09em; color:var(--ink); margin-top:12px;
}
.na-work__l2 {
  display:block; font-family:var(--f); font-weight:800;
  font-size:46px; line-height:46px; letter-spacing:.21em; color:var(--ink); margin-top:20px;
}
.na-work__sub {
  font-family:var(--f); font-weight:400; font-size:16px; line-height:24px;
  letter-spacing:-.003em; color:var(--mid); margin:0 0 24px; max-width:1200px;
}
.na-work__grid { padding-top:56px; }
.na-work__grid-hdr { margin-bottom:27px; }
.na-work__grid-rule { width:100%; height:1px; background:rgba(13,13,13,.15); margin-top:12px; }
.na-work__row1 { display:flex; gap:24px; align-items:flex-start; margin-bottom:24px; }
.na-work__row2 { display:flex; gap:24px; align-items:flex-start; }
.na-wc { display:block; text-decoration:none; color:inherit; }
.na-wc--608 { flex:0 0 608px; width:608px; }
.na-wc--568 { flex:0 0 568px; width:568px; }
.na-wc--384 { flex:0 0 384px; width:384px; }
.na-wc__img { position:relative; overflow:hidden; border-radius:4px; background:var(--bg); }
.na-wc__img img { width:100%; height:100%; object-fit:cover; transition:transform .25s ease-out; }
.na-wc__ov {
  position:absolute; inset:0; background:rgba(0,0,0,.4); border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .2s ease-out;
}
.na-wc__ov span { font-family:var(--f); font-weight:700; font-size:14px; color:var(--wh); }
.na-wc:hover .na-wc__ov { opacity:1; }
.na-wc:hover .na-wc__img img { transform:scale(1.04); }
.na-wc__t { font-family:var(--f); font-weight:700; font-size:24px; line-height:32px; letter-spacing:-.005em; color:var(--ink); margin:8px 0 0; }
.na-wc__d { font-family:var(--f); font-weight:300; font-size:13px; line-height:18px; color:var(--soft); margin:4px 0 0; }
.na-work__cta { padding-top:40px; padding-bottom:80px; }
.na-work__cta-t { font-family:var(--f); font-weight:700; font-size:40px; line-height:48px; letter-spacing:-.01em; color:var(--ink); margin:0 0 40px; }

/* =========================================================
   FOR STUDIOS
   ========================================================= */
.na-fs-imgs { display:flex; gap:24px; margin-top:48px; }
.na-fs-img { border-radius:4px; background:var(--bg); }
.na-fs-img--lg { flex:0 0 760px; height:280px; }
.na-fs-img--sm { flex:1; height:280px; }

/* =========================================================
   PROCESS — scope table
   ========================================================= */
.na-scope { margin-top:24px; border-top:1px solid rgba(13,13,13,.08); }
.na-scope__row { display:flex; gap:48px; padding:20px 0; border-bottom:1px solid rgba(13,13,13,.08); }
.na-scope__row span:first-child { flex:0 0 280px; font-family:var(--f); font-weight:700; font-size:14px; color:var(--ink); }
.na-scope__row span:last-child { font-family:var(--f); font-weight:400; font-size:15px; color:var(--mid); }

/* =========================================================
   PROJECTS
   ========================================================= */
.na-proj-tadi { background:var(--bg); padding:32px 0; margin:40px 0 0; }
.na-proj-tadi__t { font-family:var(--f); font-weight:700; font-size:24px; line-height:32px; color:var(--ink); margin:8px 0; }
.na-proj-case { padding:64px 0; }
.na-proj-case__t { font-family:var(--f); font-weight:700; font-size:40px; line-height:1.1; letter-spacing:-.01em; color:var(--ink); margin:8px 0 16px; }
.na-proj-case__meta { display:flex; gap:24px; margin-bottom:24px; }
.na-proj-case__meta span { font-family:var(--f); font-weight:400; font-size:14px; color:var(--soft); }
.na-proj-imgs { display:flex; gap:24px; margin:32px 0; align-items:flex-start; }
.na-proj-img { background:var(--bg); border-radius:4px; flex-shrink:0; }
.na-proj-imgs--ba .na-proj-img { width:280px; height:120px; }
.na-proj-arrow { align-self:center; font-size:24px; }
.na-proj-imgs--wide .na-proj-img--tall { flex:1; height:400px; }
.na-proj-imgs--three .na-proj-img { flex:1; height:280px; }
.na-proj-imgs--grid4 { display:grid; grid-template-columns:560px 280px; grid-template-rows:440px; gap:24px; }
.na-proj-img--xl { grid-row:1/3; height:440px; }
.na-proj-img--tall2 { height:440px; }
.na-proj-result { display:flex; gap:24px; padding:20px 0; border-top:1px solid rgba(13,13,13,.12); margin-top:16px; }
.na-proj-result__bar { width:2px; background:rgba(13,13,13,.15); border-radius:2px; flex-shrink:0; }
.na-proj-result p { font-family:var(--f); font-weight:400; font-size:15px; line-height:22px; color:var(--mid); margin:0; }
.na-proj-cta { padding:0 0 80px; }

/* =========================================================
   CONTACT
   ========================================================= */
.na-contact-reach { padding:0 0 0; }
.na-contact-opts { display:flex; flex-direction:column; margin:24px 0 48px; }
.na-contact-opt { display:flex; gap:32px; padding:32px 0; border-bottom:1px solid rgba(13,13,13,.08); text-decoration:none; color:inherit; transition:background var(--ez); }
.na-contact-opt:first-child { border-top:1px solid rgba(13,13,13,.08); }
.na-contact-opt:hover { padding-left:8px; }
.na-contact-opt__t { font-family:var(--f); font-weight:700; font-size:24px; line-height:32px; color:var(--ink); margin:0 0 8px; }
.na-contact-opt__cta { font-family:var(--f); font-weight:700; font-size:14px; color:var(--ink); }
.na-contact-infos { display:grid; grid-template-columns:1fr 1fr; gap:80px; padding:48px 0; border-top:1px solid rgba(13,13,13,.08); }
.na-contact-val { font-family:var(--f); font-weight:400; font-size:16px; line-height:24px; color:var(--ink); margin:4px 0 24px; }
.na-contact-dark { background:var(--ink); padding:80px 0; }
.na-contact-dark__ey { font-family:var(--f); font-weight:400; font-size:16px; color:var(--soft); margin:0 0 8px; }
.na-contact-dark__t { font-family:var(--f); font-weight:700; font-size:48px; line-height:1.1; letter-spacing:-.01em; color:var(--wh); margin:0 0 16px; }
.na-contact-dark__sub { font-family:var(--f); font-weight:400; font-size:16px; color:var(--soft); margin:0; }

/* =========================================================
   LEGAL
   ========================================================= */
.na-legal { padding:40px 0 80px; }
.na-legal__h1 { font-family:var(--f); font-weight:800; font-size:64px; line-height:1; letter-spacing:-.02em; color:var(--ink); margin:0 0 8px; }
.na-legal__s { display:flex; gap:80px; padding:32px 0; }
.na-legal__s .na-lbl { flex:0 0 280px; padding-top:4px; }
.na-legal__c { flex:1; }
.na-legal__c p { font-family:var(--f); font-weight:400; font-size:15px; line-height:24px; color:var(--mid); margin:0 0 16px; }
.na-legal__c strong { font-weight:700; color:var(--ink); }

/* =========================================================
   CASE STUDIES
   ========================================================= */
.na-cs-hero { position:relative; height:640px; 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:.8; }
.na-cs-hero__tags { position:absolute; top:32px; right:120px; font-family:var(--f); font-weight:400; font-size:14px; color:rgba(255,255,255,.6); }
.na-cs-hero__t { position:absolute; bottom:48px; left:120px; font-family:var(--f); font-weight:800; font-size:80px; line-height:1; letter-spacing:-.02em; color:var(--wh); margin:0; max-width:900px; }
.na-cs-infos { display:flex; gap:40px; }
.na-cs-infos > div { flex:1; }
.na-cs-val { font-family:var(--f); font-weight:400; font-size:16px; line-height:24px; color:var(--ink); margin:4px 0 0; }
.na-cs-section { padding:64px 0; }
.na-cs-dir { display:flex; gap:80px; margin-top:32px; }
.na-cs-quote { flex:0 0 520px; font-family:var(--f); font-weight:700; font-size:22px; line-height:32px; color:var(--ink); margin:0; }
.na-cs-dir .na-pg-body { flex:1; margin:0; }
.na-cs-overview { margin-top:32px; border-radius:4px; overflow:hidden; height:480px; }
.na-cs-overview img { width:100%; height:100%; object-fit:cover; }
.na-cs-proc { display:flex; gap:40px; margin-top:32px; }
.na-cs-proc__imgs { flex:0 0 752px; display:grid; grid-template-columns:400px 328px; 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,.na-cs-proc__sm img { width:100%; height:100%; object-fit:cover; }
.na-cs-proc__sm { border-radius:4px; overflow:hidden; }
.na-cs-proc__txt { flex:1; }
.na-cs-proc__ttl { font-family:var(--f); font-weight:700; font-size:18px; color:var(--ink); margin:0 0 24px; }
.na-cs-deliv { list-style:none; padding:0; margin:0; }
.na-cs-deliv li { font-family:var(--f); font-weight:400; font-size:14px; line-height:20px; color:var(--ink); padding:16px 0; border-bottom:1px solid rgba(13,13,13,.08); }
.na-cs-deliv li::before { content:'—'; margin-right:12px; color:var(--soft); }
.na-cs-outcome { background:var(--ink); padding:64px 0; }
.na-cs-outcome__t { font-family:var(--f); font-weight:700; font-size:32px; line-height:1.2; letter-spacing:-.01em; color:var(--wh); margin:16px 0 16px; max-width:960px; }
.na-cs-ctx { margin-top:32px; }
.na-cs-ctx__row { display:flex; gap:80px; }
.na-cs-ctx__row .na-lbl { flex:0 0 280px; padding-top:4px; }
.na-cs-ctx__row .na-pg-body { flex:1; margin:0; }
.na-cs-next { display:flex; align-items:center; gap:48px; padding:16px 0; }
.na-cs-next span { font-family:var(--f); font-weight:700; font-size:13px; letter-spacing:.02em; color:var(--soft); }
.na-cs-next a { font-family:var(--f); font-weight:700; font-size:14px; color:var(--ink); }
.na-cs-next a:hover { text-decoration:underline; }
.na-cs-cta { padding:54px 0 80px; }

/* =========================================================
   RESPONSIVE 1100px
   ========================================================= */
@media (max-width:1100px) {
  .na-pg-h1 { font-size:44px; }
  .na-work__typo { height:auto; }
  .na-work__b { font-size:100px; line-height:90px; position:relative; display:block; }
  .na-work__lines { position:relative; left:0; padding-left:72px; margin-top:-86px; }
  .na-work__l1 { font-size:40px; line-height:40px; }
  .na-work__l2 { font-size:32px; line-height:32px; margin-top:12px; }
  .na-work__row1 { flex-wrap:wrap; }
  .na-wc--608,.na-wc--568 { flex:0 0 100%; width:100%; }
  .na-wc--384 { flex:0 0 calc(50% - 12px); width:calc(50% - 12px); }
  .na-cs-hero__t { font-size:56px; left:48px; }
  .na-cs-hero__tags { right:48px; }
  .na-cs-dir { flex-direction:column; gap:24px; }
  .na-cs-quote { flex:0 0 auto; }
  .na-cs-proc { flex-direction:column; }
  .na-cs-proc__imgs { flex:none; width:100%; }
  .na-contact-infos { gap:40px; }
  .na-fs-img--lg { flex:0 0 55%; }
  .na-fs-img--sm { flex:1; }
}

/* =========================================================
   RESPONSIVE 768px
   ========================================================= */
@media (max-width:768px) {
  .na-pg-h1 { font-size:32px; }
  .na-pg-h2 { font-size:28px; }
  .na-work__hero { padding-top:24px; }
  .na-work__b { font-size:72px; line-height:64px; }
  .na-work__lines { padding-left:50px; margin-top:-60px; }
  .na-work__l1 { font-size:28px; line-height:28px; letter-spacing:.05em; }
  .na-work__l2 { font-size:22px; line-height:22px; letter-spacing:.1em; margin-top:10px; }
  .na-work__row1,.na-work__row2 { flex-direction:column; gap:24px; }
  .na-wc--608,.na-wc--568,.na-wc--384 { flex:0 0 100%; width:100%; }
  .na-row { flex-direction:column; gap:8px; }
  .na-row__lbl { flex:none; }
  .na-scope__row { flex-direction:column; gap:4px; }
  .na-contact-infos { grid-template-columns:1fr; gap:32px; }
  .na-contact-dark__t { font-size:32px; }
  .na-cs-hero { height:360px; }
  .na-cs-hero__t { font-size:36px; left:20px; bottom:20px; }
  .na-cs-hero__tags { right:20px; }
  .na-cs-infos { flex-wrap:wrap; gap:24px; }
  .na-cs-infos > div { flex:0 0 calc(50% - 12px); }
  .na-cs-proc__imgs { grid-template-columns:1fr; grid-template-rows:auto 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-ctx__row .na-lbl { flex:none; }
  .na-legal__s { flex-direction:column; gap:8px; }
  .na-legal__s .na-lbl { flex:none; }
  .na-legal__h1 { font-size:40px; }
  .na-fs-imgs { flex-direction:column; }
  .na-fs-img--lg,.na-fs-img--sm { flex:0 0 200px; width:100%; }
  .na-proj-imgs--grid4 { grid-template-columns:1fr; grid-template-rows:auto; }
}

/* Projects hero padding */
.na-proj__hero { padding-bottom: 56px; }