/* ============================================================
   responsive.css — Nect'Art
   Basé sur les frames Figma mobiles (375px)
   nodes : 359:2 home · 363:2 work · 363:48 contact
           363:94 project · 366:2 for-studios
           366:89 process · 367:2 projects
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   MOBILE  ≤ 767px
══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Conteneur ─────────────────────────────────────────── */
  .na-w {
    padding: 0 20px !important;
    max-width: 100% !important;
  }

  /* ── Navigation ────────────────────────────────────────── */
  .na-hdr {
    height: 64px !important;
    padding: 0 20px !important;
  }
  .na-hdr__nav {
    display: none !important;
  }
  .na-hdr__nav.na-nav-open {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 64px !important;
    left: 0 !important; right: 0 !important;
    background: #fff !important;
    padding: 24px 20px 32px !important;
    border-top: 1px solid rgba(13,13,13,.1) !important;
    z-index: 9999 !important;
    gap: 20px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.08) !important;
  }
  .na-hdr__ham {
    display: flex !important;
  }
  .na-spacer {
    height: 64px !important;
  }

  /* ── Boutons ────────────────────────────────────────────── */
  .na-ctas {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .na-ctas .na-btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .na-btn {
    font-size: 14px !important;
    padding: 0 20px !important;
    height: 44px !important;
  }

  /* ─────────────────────────────────────────────────────────
     HOME — HERO
     Suppression du positionnement absolu desktop,
     passage en flex column avec ordre Figma
  ───────────────────────────────────────────────────────── */
  .na-hero {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    padding: 24px 0 0 !important;
  }

  /* Texte : reset absolu → normal */
  .na-hero__h1,
  .na-hero__h2,
  .na-hero__p,
  .na-hero__cta {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: 100% !important;
    transform: none !important;
  }

  .na-hero__h1 {
    font-size: clamp(30px, 10vw, 44px) !important;
    line-height: 1.1 !important;
    padding: 0 20px !important;
    margin: 0 0 0 !important;
    order: 1 !important;
  }
  .na-hero__h2 {
    font-size: clamp(26px, 9vw, 38px) !important;
    line-height: 1.1 !important;
    padding: 0 20px !important;
    margin: 0 0 16px !important;
    order: 2 !important;
  }
  .na-hero__p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    padding: 0 20px !important;
    margin: 0 0 20px !important;
    order: 3 !important;
    color: #737373 !important;
  }
  .na-hero__cta {
    padding: 0 20px !important;
    margin: 0 0 28px !important;
    order: 4 !important;
  }

  /* Images hero : reset absolu → blocs */
  .na-hero__img {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
  }
  .na-hero__img img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Ordre et taille des images (mapping Figma mobile) */
  .na-h-ct { order: 5 !important; width: 100% !important; height: 240px !important; }
  .na-h-l2 { order: 6 !important; width: 50% !important;  height: 200px !important; }
  .na-h-rb { order: 7 !important; width: 50% !important;  height: 200px !important; }
  .na-h-l1 { order: 8 !important; width: 100% !important; height: 180px !important; }
  /* Masqués sur mobile */
  .na-h-rt { display: none !important; }
  .na-h-cb { display: none !important; }

  /* ─────────────────────────────────────────────────────────
     HOME — SECTION SOMBRE (gains)
  ───────────────────────────────────────────────────────── */
  .na-gains {
    padding: 40px 0 !important;
  }
  .na-gains h2,
  .na-gains .na-pg-h2 {
    font-size: 26px !important;
    line-height: 1.25 !important;
    margin-bottom: 20px !important;
  }
  .na-val-cards,
  .na-gains .na-cards,
  .na-gains__cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .na-val-card {
    width: 100% !important;
    min-height: 100px !important;
    padding: 20px !important;
    box-sizing: border-box !important;
  }

  /* ─────────────────────────────────────────────────────────
     HOME — WYR TABLE
  ───────────────────────────────────────────────────────── */
  .na-wyr {
    padding: 40px 0 !important;
  }
  .na-wyr__h2 {
    font-size: 26px !important;
    margin-bottom: 20px !important;
  }
  /* En-tête du tableau : masqué sur mobile */
  .na-tbl__hdr {
    display: none !important;
  }
  /* Chaque ligne : flex colonne — titre + description */
  .na-tbl__row {
    display: flex !important;
    flex-direction: column !important;
    padding: 16px 0 !important;
    gap: 4px !important;
    border-top: 1px solid rgba(13,13,13,.1) !important;
  }
  .na-tbl__c1 { font-weight: 600 !important; font-size: 15px !important; }
  .na-tbl__c2 { font-size: 13px !important; color: #404040 !important; }
  .na-tbl__c3 { display: none !important; }

  /* ─────────────────────────────────────────────────────────
     WORK PAGE
  ───────────────────────────────────────────────────────── */
  /* Supprimer le drop-cap sur mobile */
  .na-wk-hero h1::first-letter,
  .na-work-hero h1::first-letter,
  .na-pg-hdr h1::first-letter {
    -webkit-initial-letter: normal !important;
    initial-letter: normal !important;
    float: none !important;
    font-size: inherit !important;
    line-height: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .na-wk-hero h1,
  .na-work-hero h1,
  .na-pg-hdr h1 {
    font-size: clamp(28px, 9vw, 40px) !important;
    line-height: 1.1 !important;
  }
  /* Grid items : colonne unique */
  .na-wk-grid,
  .na-work-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  .na-wc--608,
  .na-wc--384 {
    width: 100% !important;
    padding-bottom: 32px !important;
  }
  .na-wc--608 img,
  .na-wc--384 img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
  }

  /* ─────────────────────────────────────────────────────────
     FOR STUDIOS
  ───────────────────────────────────────────────────────── */
  .na-fs .na-pg-hero h1,
  .na-fs .na-pg-h1 {
    font-size: clamp(28px, 10vw, 42px) !important;
    line-height: 1.1 !important;
  }
  /* Images : empilées */
  .na-fs-imgs {
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 24px !important;
    padding: 0 !important;
  }
  .na-fs-img--lg {
    width: 100% !important;
    height: 240px !important;
    flex: none !important;
  }
  .na-fs-img--sm {
    width: 100% !important;
    height: 180px !important;
    flex: none !important;
  }
  /* Rows sections */
  .na-rows {
    gap: 0 !important;
  }
  .na-row {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 20px 0 !important;
    border-top: 1px solid rgba(13,13,13,.1) !important;
  }
  .na-row__lbl {
    width: 100% !important;
  }

  /* ─────────────────────────────────────────────────────────
     PROCESS
  ───────────────────────────────────────────────────────── */
  .na-proc-h1,
  .na-proc__h1 {
    font-size: clamp(24px, 9vw, 36px) !important;
    line-height: 1.15 !important;
  }
  .na-proc-step,
  .na-proc__step {
    padding: 20px 0 !important;
    border-top: 1px solid rgba(13,13,13,.1) !important;
  }
  /* Scope table : 2 colonnes égales */
  .na-proc-scope .na-proc__row,
  .na-proc-scope__row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 12px 0 !important;
    border-top: 1px solid rgba(13,13,13,.1) !important;
  }

  /* ─────────────────────────────────────────────────────────
     CONTACT
  ───────────────────────────────────────────────────────── */
  .na-contact .na-pg-hero h1,
  .na-contact .na-pg-h1 {
    font-size: clamp(26px, 9vw, 40px) !important;
    line-height: 1.1 !important;
  }
  /* Options : empilées */
  .na-contact-opts {
    flex-direction: column !important;
    gap: 0 !important;
  }
  .na-contact-opt {
    width: 100% !important;
    padding: 20px 0 !important;
    border-bottom: 1px solid rgba(13,13,13,.1) !important;
    border-right: none !important;
    box-sizing: border-box !important;
  }
  /* Infos : colonne unique */
  .na-contact-infos {
    flex-direction: column !important;
    gap: 0 !important;
  }
  .na-contact-infos > div {
    width: 100% !important;
    padding-right: 0 !important;
  }
  /* Dark CTA : 2 boutons côte à côte */
  .na-contact-dark .na-ctas {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  .na-contact-dark .na-ctas .na-btn {
    flex: 1 1 120px !important;
    width: auto !important;
  }

  /* ─────────────────────────────────────────────────────────
     CASE STUDIES (pages projet)
  ───────────────────────────────────────────────────────── */
  /* Hero image : full-width h=280 */
  .na-cs-hero,
  .na-cs-hero__wrap {
    height: 280px !important;
  }
  /* Meta : 2 colonnes */
  .na-cs-hero__meta,
  .na-cs-meta {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 16px 0 !important;
  }
  /* Sections */
  .na-cs-section {
    padding-top: 32px !important;
    padding-bottom: 0 !important;
  }
  /* Quote : taille réduite */
  .na-cs-quote,
  blockquote.na-cs-quote {
    font-size: clamp(17px, 5vw, 22px) !important;
    line-height: 1.45 !important;
  }
  /* Overview : full width h=240 */
  .na-cs-overview {
    height: 240px !important;
    width: 100% !important;
  }
  /* Process images : stack vertical */
  .na-cs-proc {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .na-cs-proc__main {
    width: 100% !important;
    height: 240px !important;
  }
  .na-cs-proc__side {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .na-cs-proc__sm {
    height: 160px !important;
  }
  /* Guidelines : 2 colonnes */
  .na-cs-gl-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .na-cs-gl-thumb {
    height: 90px !important;
  }

  /* ─────────────────────────────────────────────────────────
     PROJECTS PAGE
  ───────────────────────────────────────────────────────── */
  .pj-h1 {
    font-size: 36px !important;
    line-height: 1.1 !important;
  }
  /* Image grids : colonne unique */
  .pj-grid--pds,
  .pj-grid--ts,
  .pj-grid--rda {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  .pj-gi {
    height: 200px !important;
  }
  /* Logo before/after */
  .pj-ba {
    flex-direction: column !important;
    height: auto !important;
    gap: 12px !important;
    align-items: flex-start !important;
  }
  .pj-ba__img {
    width: 100% !important;
    height: 100px !important;
  }
  /* Cases : marges réduites */
  .pj-case h2,
  .pj-meta,
  .pj-desc,
  .pj-before,
  .pj-logo-row,
  .pj-img-grid,
  .pj-note {
    margin-left: 0 !important;
  }
  .na-proj-case { padding: 28px 0 !important; }
  .na-proj-tadi { padding: 24px 0 !important; }

  /* ─────────────────────────────────────────────────────────
     FOOTER
  ───────────────────────────────────────────────────────── */
  .na-footer__in {
    flex-direction: column !important;
    gap: 28px !important;
    padding: 32px 20px !important;
  }
  .na-footer__nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px 20px !important;
  }
  .na-footer__nav a {
    font-size: 13px !important;
  }

  /* ─────────────────────────────────────────────────────────
     RÈGLE GÉNÉRALE — PAGES INTÉRIEURES
  ───────────────────────────────────────────────────────── */
  .na-pg-hero .na-pg-h1,
  .na-pg-hero h1 {
    font-size: clamp(26px, 9.5vw, 40px) !important;
    line-height: 1.1 !important;
  }
  .na-pg-section { padding: 32px 0 !important; }
  .na-pg-hdr { padding: 24px 0 0 !important; }

} /* fin @media ≤767px */


/* ══════════════════════════════════════════════════════════════
   TABLET  768px – 1023px
══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {

  .na-w {
    padding: 0 48px !important;
  }

  /* Hero : texte légèrement réduit */
  .na-hero__h1 { font-size: clamp(36px, 6.5vw, 60px) !important; }
  .na-hero__h2 { font-size: clamp(30px, 5.5vw, 50px) !important; }

  /* Work : 2 colonnes */
  .na-wk-grid,
  .na-work-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
  .na-wc--608,
  .na-wc--384 {
    width: 100% !important;
  }
  .na-wc--608 img,
  .na-wc--384 img {
    height: 260px !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  /* For Studios images : proportions tablet */
  .na-fs-img--lg { flex: 0 0 55% !important; }
  .na-fs-img--sm { flex: 1 !important; }

  /* Projects : grilles adaptées */
  .pj-grid--pds { grid-template-columns: 1fr 1fr 1.6fr !important; }
  .pj-grid--ts  { grid-template-columns: 1.4fr 1fr 1fr !important; }
  .pj-grid--rda { grid-template-columns: repeat(3, 1fr) !important; }

  /* Guidelines : 3 colonnes */
  .na-cs-gl-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

} /* fin @media 768-1023px */

/* ============================================================
   FIXES RESPONSIVE (ajout) : header tablet=nav inline (Figma 371:4),
   footer mobile=marque gauche/nav droite (Figma 982:10), work tablet.
   Additif, borne max 1100/768 -> desktop >1100 intact.
   ============================================================ */
/* ── (1) HEADER TABLET 768–1100 : nav inline complète, pas de burger
   (Figma tablet 371:4 montre WORK/FOR STUDIOS/PROCESS/PROJECTS/CONTACT) ── */
@media (min-width: 768px) and (max-width: 1100px) {
  .na-hdr__nav { display: flex !important; gap: 22px; }   /* gap resserré : nav inline tient + reste séparée du logo (Figma 371:4) */
  .na-hdr__ham { display: none !important; }
  .na-hdr      { padding: 0 48px; }
}

/* ── (3) WORK TABLET : la 2e rangée de cartes ne s'enroulait pas → overflow ── */
@media (max-width: 1100px) {
  .na-work__row2 { flex-wrap: wrap; }
}

/* ── (2) FOOTER MOBILE/TABLET-PORTRAIT ≤768 : marque gauche / nav droite verticale
   (Figma 982:10 : bloc marque à gauche, liens empilés à droite, h≈200, inset 24) ── */
@media (max-width: 768px) {
  .na-footer__in {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 24px !important;
    padding: 24px !important;
    min-height: 200px;
  }
  .na-footer__l   { flex: 1 1 auto; min-width: 0; }
  .na-footer__nav {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    gap: 18px !important;
    padding-top: 2px;
    flex: 0 0 auto;
    text-align: right;
  }
  .na-footer__nav a { font-size: 16px !important; white-space: nowrap; }
}

/* Très petits écrans (<360) : si la marque devient trop serrée, on autorise
   le repli sous la marque, mais on garde la nav verticale (jamais tronquée). */
@media (max-width: 359px) {
  .na-footer__in  { flex-wrap: wrap; }
  .na-footer__nav { align-items: flex-start; text-align: left; }
}

/* ── (4) HERO HOME MOBILE : neutralise le collage absolu desktop + la règle
   parasite (left:68.33%/top:94.86%) qui empilait/débordait le hero.
   Linéarise : H1 → images empilées → "TO OUTLAST THEIR BRIEF." → CTA. ── */
@media (max-width: 768px) {
  .na-hero { display:flex !important; flex-direction:column !important;
             height:auto !important; padding-bottom:0 !important;
             margin-top:24px !important; overflow:visible !important; }

  /* reset du positionnement absolu hérité du desktop (la cause du bug) */
  .na-hero__h1, .na-hero__txt, .na-hero__cta, .na-hero__img {
    position: relative !important;
    left:auto !important; top:auto !important; right:auto !important; bottom:auto !important;
    transform:none !important;
    width:auto !important; height:auto !important; z-index:auto !important;
  }

  .na-hero__h1 { order:1; text-align:left !important; font-size:34px !important;
                 line-height:1.08 !important; padding:0 20px 4px !important; margin:0 !important; }

  /* toutes les vignettes du collage : visibles, pleine largeur, empilées */
  .na-hero__img {
    display:block !important; order:2;
    width:calc(100% - 40px) !important; height:200px !important;
    margin:12px 20px 0 !important; border-radius:4px !important; overflow:hidden !important;
  }
  .na-hero__img img { position:absolute !important; inset:0 !important;
                      width:100% !important; height:100% !important; object-fit:cover !important; }

  .na-hero__txt { order:3; padding:20px 20px 4px !important; }
  .na-hero__h2  { font-size:30px !important; line-height:1.08 !important; margin:0 0 12px !important; }
  .na-hero__p   { font-size:15px !important; line-height:1.5 !important; color:var(--soft) !important; }
  .na-hero__cta { order:4; padding:0 20px !important; margin:16px 0 32px !important; align-self:flex-start !important; }
}

/* ============================================================
   WORK MOBILE — Figma lock, ≤767px only
   Add this at the END of assets/responsive.css
   ============================================================ */
@media (max-width: 767px) {
  body.page-template-page-work,
  body.page-template-page-work #page,
  body.page-template-page-work .site,
  body.page-template-page-work #content,
  body.page-template-page-work main {
    background: #fff !important;
    overflow-x: hidden !important;
  }

  body.page-template-page-work .na-w {
    width: 100% !important;
    max-width: none !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    box-sizing: border-box !important;
  }

  body.page-template-page-work .na-spacer { height: 64px !important; }

  /* Header already shared; keep it clean and aligned */
  body.page-template-page-work .na-hdr {
    height: 64px !important;
    padding: 0 40px !important;
    border-bottom: 1px solid rgba(13,13,13,.08) !important;
    background: #fff !important;
  }
  body.page-template-page-work .na-hdr__logo img { width: 96px !important; height: auto !important; }
  body.page-template-page-work .na-hdr__ham { width: 24px !important; height: 24px !important; }

  /* HERO */
  body.page-template-page-work .na-work__hero {
    padding-top: 52px !important;
    padding-bottom: 0 !important;
  }
  body.page-template-page-work .na-work__typo { display: none !important; }
  body.page-template-page-work .na-work__mobile-title {
    display: block !important;
    margin: 0 0 14px !important;
    color: #0D0D0D !important;
    font-family: "Plus Jakarta Sans", var(--f), sans-serif !important;
    font-size: 32px !important;
    line-height: 32px !important;
    font-weight: 800 !important;
    letter-spacing: -0.03rem !important;
  }
  body.page-template-page-work .na-work__sub {
    max-width: 320px !important;
    margin: 0 !important;
    color: #404040 !important;
    font-family: "Plus Jakarta Sans", var(--f), sans-serif !important;
    font-size: 15px !important;
    line-height: 22px !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
  }
  body.page-template-page-work .na-work__hero .na-btn { display: none !important; }

  /* SELECTED WORK */
  body.page-template-page-work .na-work__grid {
    padding-top: 40px !important;
  }
  body.page-template-page-work .na-work__grid-hdr {
    margin-bottom: 22px !important;
  }
  body.page-template-page-work .na-lbl {
    display: block !important;
    margin: 0 !important;
    color: #737373 !important;
    font-family: "Plus Jakarta Sans", var(--f), sans-serif !important;
    font-size: 13px !important;
    line-height: 16px !important;
    font-weight: 700 !important;
    letter-spacing: .02em !important;
  }
  body.page-template-page-work .na-work__grid-rule {
    height: 1px !important;
    margin-top: 14px !important;
    background: rgba(13,13,13,.10) !important;
  }

  body.page-template-page-work .na-work__row1,
  body.page-template-page-work .na-work__row2 {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 !important;
  }
  body.page-template-page-work .na-wc,
  body.page-template-page-work .na-wc--608,
  body.page-template-page-work .na-wc--568,
  body.page-template-page-work .na-wc--384 {
    display: block !important;
    width: 100% !important;
    flex: none !important;
    margin: 0 0 34px !important;
    padding: 0 0 28px !important;
    border-bottom: 1px solid rgba(13,13,13,.08) !important;
    text-decoration: none !important;
  }

  body.page-template-page-work .na-wc__img,
  body.page-template-page-work .na-wc__img[style] {
    width: 100% !important;
    height: 192px !important;
    border-radius: 3px !important;
    background: #F5F5F5 !important;
    overflow: hidden !important;
  }
  body.page-template-page-work .na-wc__img img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: none !important;
  }
  body.page-template-page-work .na-wc__ov { display: none !important; }

  body.page-template-page-work .na-wc__t {
    margin: 16px 0 0 !important;
    color: #0D0D0D !important;
    font-family: "Plus Jakarta Sans", var(--f), sans-serif !important;
    font-size: 24px !important;
    line-height: 28px !important;
    font-weight: 800 !important;
    letter-spacing: -0.015em !important;
  }
  body.page-template-page-work .na-wc__d {
    margin: 8px 0 0 !important;
    color: #8A8A8A !important;
    font-family: "Plus Jakarta Sans", var(--f), sans-serif !important;
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 400 !important;
    letter-spacing: -0.005em !important;
  }
  body.page-template-page-work .na-wc__d-desk { display:none !important; }
  body.page-template-page-work .na-wc__d-mob { display:inline !important; }

  /* per-project image crops */
  body.page-template-page-work .na-wc:nth-of-type(1) .na-wc__img img { object-position: 50% 50% !important; }
  body.page-template-page-work .na-wc:nth-of-type(2) .na-wc__img img { object-position: 50% 48% !important; }
  body.page-template-page-work .na-work__row2 .na-wc:nth-child(1) .na-wc__img img { object-position: 50% 50% !important; }
  body.page-template-page-work .na-work__row2 .na-wc:nth-child(2) .na-wc__img img { object-position: 50% 50% !important; }
  body.page-template-page-work .na-work__row2 .na-wc:nth-child(3) .na-wc__img img { object-position: 50% 50% !important; }

  /* BOTTOM CTA */
  body.page-template-page-work .na-work__cta {
    padding-top: 8px !important;
    padding-bottom: 48px !important;
  }
  body.page-template-page-work .na-rule {
    height: 1px !important;
    margin: 0 0 36px !important;
    background: rgba(13,13,13,.10) !important;
  }
  body.page-template-page-work .na-work__cta-k {
    display: block !important;
    margin: 0 0 16px !important;
    color: #737373 !important;
    font-family: "Plus Jakarta Sans", var(--f), sans-serif !important;
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 400 !important;
  }
  body.page-template-page-work .na-work__cta-t {
    max-width: 320px !important;
    margin: 0 0 28px !important;
    color: #0D0D0D !important;
    font-family: "Plus Jakarta Sans", var(--f), sans-serif !important;
    font-size: 32px !important;
    line-height: 40px !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
  }
  body.page-template-page-work .na-work__cta .na-btn {
    display: inline-flex !important;
    width: auto !important;
    height: 40px !important;
    padding: 0 20px !important;
    border-radius: 3px !important;
    font-size: 13px !important;
    line-height: 16px !important;
  }

  /* FOOTER — match target compact black card */
  body.page-template-page-work .na-footer {
    background: #fff !important;
    padding: 0 40px 40px !important;
  }
  body.page-template-page-work .na-footer__in {
    width: 100% !important;
    min-height: 160px !important;
    padding: 22px 24px !important;
    background: #0D0D0D !important;
    color: #fff !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 16px !important;
  }
  body.page-template-page-work .na-footer__n {
    font-size: 12px !important;
    line-height: 16px !important;
    color: #fff !important;
    margin: 0 0 8px !important;
  }
  body.page-template-page-work .na-footer__t,
  body.page-template-page-work .na-footer__m,
  body.page-template-page-work .na-footer__lg,
  body.page-template-page-work .na-footer__s {
    font-size: 10px !important;
    line-height: 14px !important;
    color: rgba(255,255,255,.55) !important;
  }
  body.page-template-page-work .na-footer__nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 12px !important;
    text-align: right !important;
  }
  body.page-template-page-work .na-footer__nav a {
    color: #fff !important;
    font-size: 10px !important;
    line-height: 12px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }
}
@media (min-width: 768px) {
  .na-work__mobile-title, .na-work__cta-k, .na-wc__d-mob { display:none !important; }
}

/* ============================================================
   PROJECT PAGES — MOBILE FIGMA LOCK
   Scope: all case-study project templates only.
   Fixes process architecture layout + guidelines gallery dimensions.
   ============================================================ */
@media (max-width: 767px) {

  body[class*="page-project-"] .na-cs,
  body[class*="page-template-page-project"] .na-cs {
    overflow-x: hidden !important;
    background: #fff !important;
  }

  body[class*="page-project-"] .na-cs .na-w,
  body[class*="page-template-page-project"] .na-cs .na-w {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }

  /* Project hero — keep all project pages aligned */
  body[class*="page-project-"] .na-cs-hero,
  body[class*="page-template-page-project"] .na-cs-hero {
    width: calc(100% - 40px) !important;
    max-width: 390px !important;
    margin: 24px auto 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  body[class*="page-project-"] .na-cs-hero__img,
  body[class*="page-template-page-project"] .na-cs-hero__img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 3px !important;
    overflow: hidden !important;
  }

  body[class*="page-project-"] .na-cs-hero__img img,
  body[class*="page-template-page-project"] .na-cs-hero__img img,
  body[class*="page-project-"] .na-cs-overview img,
  body[class*="page-template-page-project"] .na-cs-overview img,
  body[class*="page-project-"] .na-cs-proc__imgs img,
  body[class*="page-template-page-project"] .na-cs-proc__imgs img,
  body[class*="page-project-"] .na-cs-gl-thumb img,
  body[class*="page-template-page-project"] .na-cs-gl-thumb img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  body[class*="page-project-"] .na-cs-hero__tags,
  body[class*="page-template-page-project"] .na-cs-hero__tags {
    margin-top: 12px !important;
    font-size: 11px !important;
    line-height: 14px !important;
    color: #737373 !important;
  }

  body[class*="page-project-"] .na-cs-hero__t,
  body[class*="page-template-page-project"] .na-cs-hero__t {
    margin: 2px 0 0 !important;
    font-size: 26px !important;
    line-height: 28px !important;
    letter-spacing: -0.03em !important;
  }

  /* Sections rhythm */
  body[class*="page-project-"] .na-cs-section,
  body[class*="page-template-page-project"] .na-cs-section {
    padding-top: 44px !important;
    padding-bottom: 0 !important;
  }

  body[class*="page-project-"] .na-pg-hdr,
  body[class*="page-template-page-project"] .na-pg-hdr {
    display: flex !important;
    align-items: baseline !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 0 14px !important;
  }

  body[class*="page-project-"] .na-pg-num,
  body[class*="page-template-page-project"] .na-pg-num,
  body[class*="page-project-"] .na-lbl,
  body[class*="page-template-page-project"] .na-lbl {
    font-size: 12px !important;
    line-height: 16px !important;
    letter-spacing: 0.02em !important;
  }

  body[class*="page-project-"] .na-rule,
  body[class*="page-template-page-project"] .na-rule {
    margin: 0 0 24px !important;
  }

  body[class*="page-project-"] .na-cs-quote,
  body[class*="page-template-page-project"] .na-cs-quote {
    font-size: 15px !important;
    line-height: 20px !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 14px !important;
  }

  body[class*="page-project-"] .na-pg-body,
  body[class*="page-template-page-project"] .na-pg-body {
    font-size: 13px !important;
    line-height: 18px !important;
  }

  /* Overview image */
  body[class*="page-project-"] .na-cs-overview,
  body[class*="page-template-page-project"] .na-cs-overview {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 3px !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  /* PROCESS & SYSTEM ARCHITECTURE
     Figma mobile logic: one large image, then two small images side by side. */
  body[class*="page-project-"] .na-cs-proc,
  body[class*="page-template-page-project"] .na-cs-proc {
    display: block !important;
    margin-top: 0 !important;
  }

  body[class*="page-project-"] .na-cs-proc__imgs,
  body[class*="page-template-page-project"] .na-cs-proc__imgs {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto !important;
    gap: 8px !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
  }

  body[class*="page-project-"] .na-cs-proc__main,
  body[class*="page-template-page-project"] .na-cs-proc__main {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 2 / 1 !important;
    border-radius: 3px !important;
    overflow: hidden !important;
  }

  body[class*="page-project-"] .na-cs-proc__sm,
  body[class*="page-template-page-project"] .na-cs-proc__sm {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 3px !important;
    overflow: hidden !important;
  }

  body[class*="page-project-"] .na-cs-proc__txt,
  body[class*="page-template-page-project"] .na-cs-proc__txt {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body[class*="page-project-"] .na-cs-proc__ttl,
  body[class*="page-template-page-project"] .na-cs-proc__ttl {
    margin: 0 0 16px !important;
    font-size: 16px !important;
    line-height: 20px !important;
  }

  body[class*="page-project-"] .na-cs-deliv,
  body[class*="page-template-page-project"] .na-cs-deliv {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  body[class*="page-project-"] .na-cs-deliv li,
  body[class*="page-template-page-project"] .na-cs-deliv li {
    padding: 14px 0 !important;
    border-top: 1px solid rgba(13,13,13,.1) !important;
    font-size: 13px !important;
    line-height: 18px !important;
    color: #595959 !important;
  }

  /* BRAND GUIDELINES GALLERY
     Figma mobile logic: clean 2-column gallery, consistent 16:9 thumbnails. */
  body[class*="page-project-"] .na-cs-gl-desc,
  body[class*="page-template-page-project"] .na-cs-gl-desc {
    max-width: 100% !important;
    margin: 0 0 18px !important;
    font-size: 13px !important;
    line-height: 18px !important;
  }

  body[class*="page-project-"] .na-cs-gl-grid,
  body[class*="page-template-page-project"] .na-cs-gl-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body[class*="page-project-"] .na-cs-gl-item,
  body[class*="page-template-page-project"] .na-cs-gl-item {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  body[class*="page-project-"] .na-cs-gl-thumb,
  body[class*="page-template-page-project"] .na-cs-gl-thumb {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 3px !important;
    overflow: hidden !important;
    background: #f5f5f5 !important;
  }

  body[class*="page-project-"] .na-cs-gl-num,
  body[class*="page-template-page-project"] .na-cs-gl-num {
    display: block !important;
    font-size: 10px !important;
    line-height: 12px !important;
    color: #8a8a8a !important;
  }

  /* Outcome / context blocks aligned with Figma mobile */
  body[class*="page-project-"] .na-cs-outcome,
  body[class*="page-template-page-project"] .na-cs-outcome {
    margin-top: 56px !important;
    padding: 32px 0 !important;
  }

  body[class*="page-project-"] .na-cs-outcome__t,
  body[class*="page-template-page-project"] .na-cs-outcome__t {
    font-size: 18px !important;
    line-height: 24px !important;
    letter-spacing: -0.02em !important;
  }

  body[class*="page-project-"] .na-cs-ctx__row,
  body[class*="page-template-page-project"] .na-cs-ctx__row {
    display: block !important;
    padding: 0 !important;
  }

  body[class*="page-project-"] .na-cs-ctx__row .na-lbl,
  body[class*="page-template-page-project"] .na-cs-ctx__row .na-lbl {
    margin-bottom: 8px !important;
  }

  /* What you receive compact rows on project pages */
  body[class*="page-project-"] .na-wyr,
  body[class*="page-template-page-project"] .na-wyr {
    padding: 0 !important;
  }

  body[class*="page-project-"] .na-wyr__top,
  body[class*="page-template-page-project"] .na-wyr__top {
    display: block !important;
    margin-bottom: 20px !important;
  }

  body[class*="page-project-"] .na-wyr__h2,
  body[class*="page-template-page-project"] .na-wyr__h2,
  body[class*="page-project-"] .na-cs-cta .na-pg-h2,
  body[class*="page-template-page-project"] .na-cs-cta .na-pg-h2 {
    font-size: 28px !important;
    line-height: 32px !important;
    letter-spacing: -0.03em !important;
  }

  body[class*="page-project-"] .na-cs-next,
  body[class*="page-template-page-project"] .na-cs-next {
    display: flex !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding: 18px 0 !important;
  }

  body[class*="page-project-"] .na-cs-cta,
  body[class*="page-template-page-project"] .na-cs-cta {
    padding: 44px 0 !important;
  }
}

/* ============================================================
   PROJECT PAGES — HERO RESTORE + FIGMA MOBILE LAYOUT
   Fix: previous mobile overrides made the case-study hero collapse.
   Scope: mobile only, all project pages.
   ============================================================ */
@media (max-width: 767px) {

  body[class*="page-project-"] .na-cs-hero,
  body[class*="page-template-page-project"] .na-cs-hero {
    display: block !important;
    position: relative !important;
    width: calc(100% - 40px) !important;
    max-width: 390px !important;
    height: 168px !important;
    min-height: 168px !important;
    margin: 24px auto 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #0D0D0D !important;
    border-radius: 3px !important;
  }

  body[class*="page-project-"] .na-cs-hero__img,
  body[class*="page-template-page-project"] .na-cs-hero__img {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    border-radius: 3px !important;
    z-index: 1 !important;
  }

  body[class*="page-project-"] .na-cs-hero__img img,
  body[class*="page-template-page-project"] .na-cs-hero__img img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 1 !important;
  }

  body[class*="page-project-"] .na-cs-hero::after,
  body[class*="page-template-page-project"] .na-cs-hero::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(13,13,13,0) 45%, rgba(13,13,13,.48) 100%) !important;
  }

  body[class*="page-project-"] .na-cs-hero__t,
  body[class*="page-template-page-project"] .na-cs-hero__t {
    position: absolute !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    top: auto !important;
    z-index: 3 !important;
    margin: 0 !important;
    max-width: none !important;
    color: #fff !important;
    font-family: "Plus Jakarta Sans", var(--f), sans-serif !important;
    font-size: 22px !important;
    line-height: 24px !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    text-transform: uppercase !important;
  }

  body[class*="page-project-"] .na-cs-hero__tags,
  body[class*="page-template-page-project"] .na-cs-hero__tags {
    position: absolute !important;
    left: 10px !important;
    right: 10px !important;
    top: 10px !important;
    z-index: 3 !important;
    margin: 0 !important;
    color: rgba(255,255,255,.72) !important;
    font-family: "Plus Jakarta Sans", var(--f), sans-serif !important;
    font-size: 9px !important;
    line-height: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .03em !important;
  }

  body[class*="page-project-"] .na-cs-hrule:first-of-type,
  body[class*="page-template-page-project"] .na-cs-hrule:first-of-type {
    margin-top: 18px !important;
  }

  body[class*="page-project-"] .na-cs-infos,
  body[class*="page-template-page-project"] .na-cs-infos {
    margin-top: 20px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 20px !important;
    row-gap: 14px !important;
  }

  body[class*="page-project-"] .na-cs-val,
  body[class*="page-template-page-project"] .na-cs-val,
  body[class*="page-project-"] .na-cs-info-val,
  body[class*="page-template-page-project"] .na-cs-info-val {
    font-size: 14px !important;
    line-height: 20px !important;
  }
}


/* ============================================================
   HOME MOBILE — FIGMA RESTORE / FINAL OVERRIDE
   Scope: homepage only. Keeps desktop/tablet untouched.
   Based on Mobile-Home frame width 26.875rem.
============================================================ */
@media (max-width: 767px) {

  body.home,
  body.home.blog,
  body.home.wp-embed-responsive,
  body.home .wp-site-blocks,
  body.home .site,
  body.home .site-main,
  body.home main {
    background: #fff !important;
    overflow-x: hidden !important;
  }

  body.home .na-spacer { height: 64px !important; }

  /* ---------- HERO: absolute Figma layout ---------- */
  body.home .na-hero {
    position: relative !important;
    display: block !important;
    width: 26.875rem !important;
    max-width: 100vw !important;
    height: 40rem !important;
    min-height: 40rem !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  body.home .na-hero__h1,
  body.home .na-hero__txt,
  body.home .na-hero__h2,
  body.home .na-hero__p,
  body.home .na-hero__cta,
  body.home .na-hero__img {
    position: absolute !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  body.home .na-hero__h1 {
    width: 16rem !important;
    height: 4rem !important;
    top: 2.17rem !important;
    left: 0 !important;
    color: #0D0D0D !important;
    text-align: right !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 2rem !important;
    font-style: normal !important;
    font-weight: 800 !important;
    line-height: 2rem !important;
    letter-spacing: -0.03rem !important;
    z-index: 4 !important;
  }

  body.home .na-hero__txt {
    width: 15.875rem !important;
    height: auto !important;
    top: 14.6875rem !important;
    left: 10.9063rem !important;
    z-index: 4 !important;
  }

  body.home .na-hero__h2 {
    position: relative !important;
    width: 12.1875rem !important;
    height: 4rem !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    color: #0D0D0D !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 2rem !important;
    font-style: normal !important;
    font-weight: 800 !important;
    line-height: 2rem !important;
    letter-spacing: -0.03rem !important;
    text-align: left !important;
  }

  body.home .na-hero__p {
    position: relative !important;
    width: 15.875rem !important;
    height: 1.25rem !important;
    top: .1875rem !important;
    left: .0937rem !important;
    right: auto !important;
    bottom: auto !important;
    color: #404040 !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 0.5rem !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 0.625rem !important;
    letter-spacing: -0.001rem !important;
    text-align: left !important;
  }

  body.home .na-hero__img {
    display: block !important;
    overflow: hidden !important;
    opacity: 1 !important;
    background: #eee !important;
  }

  body.home .na-hero__img img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    opacity: 1 !important;
  }

  /* Dusk */
  body.home .na-h-rb {
    width: 10rem !important;
    height: 12rem !important;
    top: 1.9974rem !important;
    left: 17rem !important;
    right: auto !important;
    bottom: auto !important;
    border-radius: 0.1875rem 0 0 0.1875rem !important;
    z-index: 2 !important;
  }

  /* Santé guidelines */
  body.home .na-h-l2 {
    width: 16rem !important;
    height: 7rem !important;
    top: 7rem !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    border-radius: 0 0.1875rem 0.1875rem 0 !important;
    z-index: 1 !important;
  }

  /* Atelier Meridem */
  body.home .na-h-l1 {
    width: 10rem !important;
    height: 12.98656rem !important;
    top: 15.0134rem !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    border-radius: 0 0.1875rem 0.1875rem 0 !important;
    z-index: 1 !important;
  }

  /* Santé jars */
  body.home .na-h-cb {
    display: block !important;
    width: 15.875rem !important;
    height: 7rem !important;
    top: 21rem !important;
    left: 11rem !important;
    right: auto !important;
    bottom: auto !important;
    border-radius: 0.1875rem 0 0 0.1875rem !important;
    z-index: 1 !important;
  }
  body.home .na-h-cb img {
    object-position: 50% 38% !important;
    object-fit: cover !important;
  }

  /* Vecta laptop */
  body.home .na-h-rt {
    display: block !important;
    width: 16rem !important;
    height: 10.5rem !important;
    top: 29rem !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    border-radius: 0 0.1875rem 0.1875rem 0 !important;
    z-index: 1 !important;
  }

  /* Halden */
  body.home .na-h-ct {
    width: 10rem !important;
    height: 7rem !important;
    top: 29.0032rem !important;
    left: 16.875rem !important;
    right: auto !important;
    bottom: auto !important;
    border-radius: 0.1875rem 0 0 0.1875rem !important;
    z-index: 2 !important;
  }

  body.home .na-hero__cta {
    display: inline-flex !important;
    width: 7.8125rem !important;
    height: 2.5rem !important;
    top: 37rem !important;
    left: 17rem !important;
    right: auto !important;
    bottom: auto !important;
    padding: 0.75rem 1.25rem !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 0.1875rem !important;
    border: 0.5px solid #0D0D0D !important;
    background: #fff !important;
    color: #0D0D0D !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 0.8125rem !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 1rem !important;
    letter-spacing: 0.01219rem !important;
    text-align: center !important;
    white-space: nowrap !important;
    z-index: 5 !important;
  }

  /* ---------- GAINS SECTION ---------- */
  body.home .na-gains {
    width: 26.875rem !important;
    max-width: 100vw !important;
    margin: 0 auto !important;
    padding: 2.625rem 2rem 3.375rem !important;
    background: #0D0D0D !important;
    color: #fff !important;
    box-sizing: border-box !important;
  }

  body.home .na-gains .na-w {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.home .na-gains__h2,
  body.home .na-gains h2 {
    width: 18.5rem !important;
    margin: 0 0 1.5rem !important;
    color: #fff !important;
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 2rem !important;
    font-weight: 800 !important;
    line-height: 2.125rem !important;
    letter-spacing: -0.04rem !important;
  }

  body.home .na-gains .na-btn--ghost {
    display: inline-flex !important;
    width: auto !important;
    height: 2.5rem !important;
    margin: 0 0 2rem !important;
    padding: 0 1.25rem !important;
    border: .5px solid rgba(255,255,255,.85) !important;
    border-radius: .1875rem !important;
    color: #fff !important;
    background: transparent !important;
    font-size: .8125rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }

  body.home .na-cards,
  body.home .na-gains .na-cards,
  body.home .na-gains__cards {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body.home .na-card,
  body.home .na-val-card {
    width: auto !important;
    min-height: 8.125rem !important;
    height: auto !important;
    padding: 1.125rem 1rem !important;
    border-radius: .1875rem !important;
    background: #fff !important;
    color: #0D0D0D !important;
    box-sizing: border-box !important;
  }

  body.home .na-card__t {
    margin: 0 0 .75rem !important;
    color: #0D0D0D !important;
    font-size: .875rem !important;
    font-weight: 800 !important;
    line-height: 1rem !important;
    letter-spacing: -0.01rem !important;
  }

  body.home .na-card__l {
    width: 2.5rem !important;
    height: 1px !important;
    margin: 0 0 .75rem !important;
    background: rgba(13,13,13,.16) !important;
  }

  body.home .na-card__d {
    margin: 0 !important;
    color: #404040 !important;
    font-size: .625rem !important;
    font-weight: 400 !important;
    line-height: .8125rem !important;
    letter-spacing: -0.005rem !important;
  }

  /* ---------- WHAT YOU RECEIVE ---------- */
  body.home .na-wyr {
    width: 26.875rem !important;
    max-width: 100vw !important;
    margin: 0 auto !important;
    padding: 2.625rem 2rem 0 !important;
    background: #fff !important;
    color: #0D0D0D !important;
    box-sizing: border-box !important;
  }

  body.home .na-wyr .na-w {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.home .na-wyr__top {
    display: block !important;
    margin: 0 0 1.75rem !important;
  }

  body.home .na-lbl,
  body.home .na-wyr .na-lbl {
    margin: 0 0 1rem !important;
    color: #737373 !important;
    font-size: .8125rem !important;
    font-weight: 800 !important;
    line-height: 1rem !important;
    letter-spacing: .02rem !important;
  }

  body.home .na-wyr__rule,
  body.home .na-next__rule {
    display: block !important;
    width: 100% !important;
    height: 1px !important;
    margin: 0 0 1.5rem !important;
    background: rgba(13,13,13,.10) !important;
  }

  body.home .na-wyr__h2 {
    margin: 0 0 1.125rem !important;
    color: #0D0D0D !important;
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    line-height: 2rem !important;
    letter-spacing: -0.03rem !important;
  }

  body.home .na-wyr__sub {
    margin: 0 !important;
    color: #8a8a8a !important;
    font-size: .875rem !important;
    line-height: 1.25rem !important;
  }

  body.home .na-tbl {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 0 2rem !important;
    border: 0 !important;
    gap: 0 !important;
  }

  body.home .na-tbl__hdr { display: none !important; }

  body.home .na-tbl__row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .625rem !important;
    width: 100% !important;
    min-height: 4.625rem !important;
    margin: 0 0 1.125rem !important;
    padding: 1rem 1.25rem !important;
    border: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }

  body.home .na-tbl__row--alt,
  body.home .na-tbl__row:nth-child(even) {
    background: #F6F6F6 !important;
  }

  body.home .na-tbl__c {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    color: #737373 !important;
    text-align: left !important;
    font-size: .6875rem !important;
    line-height: .875rem !important;
  }

  body.home .na-tbl__t {
    color: #0D0D0D !important;
    font-size: .75rem !important;
    font-weight: 800 !important;
    line-height: .875rem !important;
  }

  body.home .na-tbl__w { display: none !important; }

  body.home .na-next {
    display: block !important;
    margin: 2rem 0 1rem !important;
  }

  body.home .na-next__h {
    margin: 0 !important;
    color: #0D0D0D !important;
    font-size: 1.875rem !important;
    font-weight: 500 !important;
    line-height: 2.25rem !important;
    letter-spacing: -0.04rem !important;
  }

  body.home .na-wyr__ctas,
  body.home .na-ctas.na-wyr__ctas {
    display: flex !important;
    flex-direction: column !important;
    gap: .75rem !important;
    width: 100% !important;
    margin: 0 0 10rem !important;
  }

  body.home .na-wyr__ctas .na-btn {
    display: inline-flex !important;
    width: 13.25rem !important;
    height: 2.5rem !important;
    padding: 0 1.25rem !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: .1875rem !important;
    font-size: .8125rem !important;
    font-weight: 700 !important;
    line-height: 1rem !important;
  }

  body.home .na-wyr__ctas .na-btn--pri {
    background: #0D0D0D !important;
    color: #fff !important;
    border: .5px solid #0D0D0D !important;
  }
  body.home .na-wyr__ctas .na-btn--sec {
    background: #fff !important;
    color: #0D0D0D !important;
    border: .5px solid #0D0D0D !important;
  }

  /* ---------- FOOTER ---------- */
  body.home .na-footer {
    width: 26.875rem !important;
    max-width: 100vw !important;
    margin: 0 auto !important;
    background: #0D0D0D !important;
    color: #fff !important;
  }

  body.home .na-footer__in {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 1.5rem !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 1.5rem 2rem !important;
    box-sizing: border-box !important;
  }

  body.home .na-footer__n {
    margin: 0 0 .75rem !important;
    color: #fff !important;
    font-size: .8125rem !important;
    font-weight: 700 !important;
    line-height: 1rem !important;
  }

  body.home .na-footer__t,
  body.home .na-footer__m,
  body.home .na-footer__lg,
  body.home .na-footer__s {
    margin: 0 0 .75rem !important;
    color: rgba(255,255,255,.45) !important;
    font-size: .6875rem !important;
    line-height: .95rem !important;
  }

  body.home .na-footer__m { display: inline-block !important; }

  body.home .na-footer__nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: .75rem !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.home .na-footer__nav a {
    color: #fff !important;
    font-size: .8125rem !important;
    font-weight: 800 !important;
    line-height: 1rem !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }
}

/* ── (5) PAGES PROJET — LAYOUT CANONIQUE TABLETTE 371:52 ──
   case-study.css @≤1100 rabattait tout en 1 colonne (= mobile).
   Le canonique tablette veut : meta 4 colonnes, 01 en 2 colonnes,
   process en bloc-images 2 colonnes (texte au-dessus). On restaure,
   sans toucher mobile (≤767) ni desktop (>1100). */
@media (min-width: 768px) and (max-width: 1100px) {
  body[class*="page-template-page-project"] .na-cs-infos,
  body[class*="page-project-"] .na-cs-infos {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
  }
  body[class*="page-template-page-project"] .na-cs-dir,
  body[class*="page-project-"] .na-cs-dir {
    flex-direction: row !important;
    gap: 32px !important;
    align-items: flex-start !important;
  }
  body[class*="page-template-page-project"] .na-cs-quote,
  body[class*="page-project-"] .na-cs-quote {
    flex: 0 0 46% !important;
    font-size: 22px !important;
  }
  body[class*="page-template-page-project"] .na-cs-dir-body,
  body[class*="page-project-"] .na-cs-dir-body {
    flex: 1 1 0 !important;
    padding-top: 0 !important;
  }
  body[class*="page-template-page-project"] .na-cs-proc,
  body[class*="page-project-"] .na-cs-proc {
    flex-direction: column !important;
    gap: 24px !important;
  }
  body[class*="page-template-page-project"] .na-cs-proc__imgs,
  body[class*="page-project-"] .na-cs-proc__imgs {
    width: 100% !important;
    flex: none !important;
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: 1fr !important;
    gap: 16px !important;
  }
}