/* ==========================================================================
   NO PNJ HOME CSS - ZONE MAP
   Purpose: production stylesheet for the validated home page.
   Next steps will move/merge rules one zone at a time after visual validation.
   ========================================================================== */

/* ZONE: 00 legacy extracted order - rules below still in original order */
/* ==========================================================================
   ZONE: BASE / TOKENS
   Variables, reset, body background, global type and primitives.
   Values unchanged; marker added for cleanup navigation only.
   ========================================================================== */

:root {
      --black: #070707;
      --ink: #0d0d0d;
      --coal: #141414;
      --mat: #1c1c1c;
      --line: rgba(242,242,242,.11);
      --line-strong: rgba(255,214,0,.45);
      --text: #f2f2f2;
      --muted: #9a9a9a;
      --soft: #d8d8d8;
      --yellow: #ffd600;
      --red: #d94141;
      --max: 1220px;
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: Arial, Helvetica, sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 78% 18%, rgba(255,214,0,.06), transparent 24%),
        linear-gradient(180deg, #050505 0%, #101010 44%, #070707 100%);
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
      background-size: 54px 54px;
      mask-image: linear-gradient(to bottom, rgba(0,0,0,.62), transparent 76%);
      z-index: -2;
    }

    body::after {
      content: "";
      position: fixed;
      right: -18vw;
      top: 12vh;
      width: 54vw;
      height: 54vw;
      pointer-events: none;
      background: radial-gradient(circle, rgba(255,214,0,.055), transparent 58%);
      z-index: -1;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .shell {
      width: min(var(--max), calc(100% - 36px));
      margin: 0 auto;
    }

    header {
      position: sticky;
      top: 0;
      z-index: 20;
      backdrop-filter: blur(14px);
      background: rgba(7,7,7,.72);
      border-bottom: 1px solid rgba(255,255,255,.07);
    }

    .nav {
      min-height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 22px;
    }

/* ==========================================================================
   ZONE: HERO
   Hero layout, title, copy, CTA, hero image/card.
   Values unchanged; marker added for cleanup navigation only.
   ========================================================================== */

.hero {
      min-height: calc(100vh - 76px);
      display: grid;
      grid-template-columns: 1.02fr .98fr;
      align-items: center;
      gap: clamp(28px, 5vw, 76px);
      padding: 54px 0 78px;
      position: relative;
    }

    .hero-copy {
      position: relative;
      z-index: 2;
    }

    .kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--yellow);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .18em;
      text-transform: uppercase;
      margin-bottom: 24px;
    }

    .kicker::before {
      content: "";
      width: 44px;
      height: 1px;
      background: var(--yellow);
    }

    h1 {
      margin: 0;
      max-width: 760px;
      font-size: clamp(58px, 10.8vw, 156px);
      line-height: .78;
      letter-spacing: -.105em;
      text-transform: uppercase;
      font-weight: 950;
    }

    .hero-copy p {
      max-width: 560px;
      margin: 28px 0 0;
      color: var(--soft);
      font-size: clamp(18px, 2vw, 24px);
      line-height: 1.32;
      font-weight: 700;
      letter-spacing: -.025em;
    }

    .cta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 34px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 13px 18px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.035);
      color: var(--text);
      font-weight: 950;
      text-transform: uppercase;
      letter-spacing: .03em;
    }

    .btn.primary {
      background: var(--yellow);
      color: #070707;
      border-color: var(--yellow);
    }

    .btn:hover {
      transform: translateY(-1px);
    }

    .hero-art {
      position: relative;
      min-height: 640px;
      display: grid;
      place-items: center;
    }

    .hero-art::before {
      content: "NO PNJ";
      position: absolute;
      left: -14%;
      bottom: 10%;
      font-size: clamp(72px, 15vw, 210px);
      font-weight: 950;
      letter-spacing: -.12em;
      color: rgba(242,242,242,.035);
      z-index: 0;
      white-space: nowrap;
    }

    .hero-art::after {
      content: "";
      position: absolute;
      width: min(540px, 82%);
      aspect-ratio: 4 / 5;
      border: 1px solid rgba(255,214,0,.24);
      transform: rotate(-8deg);
      z-index: 0;
      background:
        linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.006)),
        radial-gradient(circle at 50% 18%, rgba(255,214,0,.08), transparent 32%);
      box-shadow: 0 28px 80px rgba(0,0,0,.45);
    }

    .hero-art img {
      position: relative;
      z-index: 1;
      width: min(540px, 82%);
      aspect-ratio: 4 / 5;
      object-fit: cover;
      object-position: 50% 48%;
      clip-path: polygon(10% 3%, 98% 0, 90% 100%, 2% 97%);
      transform: rotate(-8deg);
      filter:
        contrast(1.10)
        saturate(.84)
        brightness(.93)
        drop-shadow(0 34px 76px rgba(0,0,0,.74));
    }

    .strip {
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: rgba(255,255,255,.025);
      overflow: hidden;
    }

    .strip-track {
      display: flex;
      width: max-content;
      gap: 34px;
      padding: 14px 0;
      color: rgba(242,242,242,.58);
      font-weight: 950;
      text-transform: uppercase;
      letter-spacing: .14em;
      animation: drift 30s linear infinite;
    }

    .strip-track span:nth-child(even) {
      color: var(--yellow);
    }

    
/* ==========================================================================
   ZONE: ANIMATIONS
   Keyframes and motion primitives.
   Values unchanged; marker added for cleanup navigation only.
   ========================================================================== */

@keyframes drift {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

    section {
      padding: clamp(56px, 9vw, 120px) 0;
    }

    
/* ==========================================================================
   ZONE: SECTIONS / CONTENT
   Home content sections, section headings, cards and editorial blocks.
   Values unchanged; marker added for cleanup navigation only.
   ========================================================================== */

.section-head {
      display: grid;
      grid-template-columns: .35fr .65fr;
      gap: 32px;
      align-items: start;
      border-top: 1px solid var(--line);
      padding-top: 28px;
      margin-bottom: 32px;
    }

    .section-num {
      color: var(--yellow);
      font-size: 13px;
      font-weight: 950;
      letter-spacing: .18em;
      text-transform: uppercase;
    }

    h2 {
      margin: 0;
      font-size: clamp(38px, 6vw, 84px);
      line-height: .88;
      letter-spacing: -.08em;
      text-transform: uppercase;
    }

    .manifesto {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border: 1px solid var(--line);
    }

    .manifesto div {
      min-height: 250px;
      padding: clamp(24px, 4vw, 42px);
      border-right: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.006));
    }

    .manifesto div:last-child {
      border-right: 0;
    }

    .manifesto strong {
      display: block;
      font-size: clamp(30px, 4vw, 54px);
      line-height: .88;
      letter-spacing: -.07em;
      text-transform: uppercase;
      margin-bottom: 20px;
    }

    .manifesto p,
    .panel p {
      color: var(--muted);
      font-size: 17px;
      line-height: 1.55;
      margin: 0;
    }
.panel {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: clamp(26px, 5vw, 74px);
      align-items: center;
      border: 1px solid var(--line);
      background:
        linear-gradient(100deg, rgba(255,214,0,.075), transparent 30%),
        rgba(255,255,255,.018);
      padding: clamp(30px, 5vw, 64px);
    }

    .panel .big {
      font-size: clamp(46px, 8vw, 108px);
      line-height: .8;
      letter-spacing: -.1em;
      font-weight: 950;
      text-transform: uppercase;
    }

    .hidden-signal {
      margin-top: 18px;
      color: rgba(242,242,242,.18);
      font-size: 12px;
      letter-spacing: .22em;
      text-transform: uppercase;
      user-select: none;
    }

    .hidden-signal:hover {
      color: var(--yellow);
    }
.egg {
      position: fixed;
      left: 50%;
      bottom: 28px;
      transform: translateX(-50%) translateY(24px);
      opacity: 0;
      pointer-events: none;
      z-index: 40;
      padding: 14px 18px;
      background: #050505;
      color: var(--yellow);
      border: 1px solid var(--line-strong);
      font-weight: 950;
      text-transform: uppercase;
      letter-spacing: .08em;
      transition: opacity .24s ease, transform .24s ease;
    }

    .egg.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    @media (max-width: 900px) {
      .hero,
      .section-head,
      .panel {
        grid-template-columns: 1fr;
      }

      .hero {
        min-height: auto;
      }

      .hero-art {
        min-height: 420px;
      }

      .manifesto {
        grid-template-columns: 1fr;
      }

      .manifesto div {
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }

      .manifesto div:last-child {
        border-bottom: 0;
      }
    }

    @media (max-width: 620px) {
      .shell {
        width: min(100% - 24px, var(--max));
      }

      .nav {
        align-items: flex-start;
        flex-direction: column;
        padding: 14px 0;
      }
.hero-art {
        min-height: 340px;
      }

      .hero-art img {
        max-height: 380px;
      }
    }
  
    /* LAB v4 — cadre incliné, image découpée, horizon conservé */
    .hero-dot {
      color: var(--yellow);
      display: inline-block;
      margin-left: .025em;
      text-shadow: 0 0 18px rgba(255,214,0,.24);
    }

    .hero-art::after {
      display: none !important;
    }

    .hero-frame {
      position: relative;
      z-index: 1;
      width: min(540px, 82%);
      aspect-ratio: 4 / 5;
      overflow: hidden;
      transform: rotate(-7deg);
      border: 1px solid rgba(255,214,0,.28);
      background: #030303;
      box-shadow:
        0 34px 90px rgba(0,0,0,.62),
        inset 0 0 80px rgba(0,0,0,.48);
    }

    .hero-frame::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      background:
        linear-gradient(180deg, rgba(255,255,255,.035), transparent 22%),
        radial-gradient(circle at 50% 22%, rgba(255,214,0,.055), transparent 34%),
        linear-gradient(90deg, rgba(0,0,0,.32), transparent 28%, transparent 72%, rgba(0,0,0,.34));
      mix-blend-mode: screen;
    }

    .hero-frame img {
      position: absolute;
      z-index: 1;
      inset: 50% auto auto 50%;
      width: 112%;
      height: 112%;
      max-height: none;
      aspect-ratio: auto;
      object-fit: cover;
      object-position: center center;
      transform: translate(-50%, -50%) rotate(7deg) scale(1.02);
      transform-origin: center;
      clip-path: none !important;
      opacity: .95;
      filter:
        contrast(1.12)
        saturate(.78)
        brightness(.90)
        drop-shadow(0 30px 72px rgba(0,0,0,.72));
    }

    /* LAB HERO SINGLE AXIS START */
    .hero-art {
      display: grid;
      place-items: center;
      overflow: visible;
      min-height: 640px;
    }

    .hero-art::before,
    .hero-art::after {
      content: none !important;
      display: none !important;
    }

    .hero-tilt-axis {
      width: min(540px, 82%);
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: center;
      gap: 14px;
      transform: rotate(-7deg);
      transform-origin: center;
    }

    .hero-frame {
      width: 100% !important;
      aspect-ratio: 4 / 5;
      position: relative;
      overflow: hidden;
      transform: none !important;
      border: 1px solid rgba(255,214,0,.30);
      background: #030303;
      box-shadow:
        0 34px 90px rgba(0,0,0,.62),
        inset 0 0 80px rgba(0,0,0,.48);
    }

    .hero-frame img {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 116%;
      height: 116%;
      max-width: none;
      max-height: none;
      object-fit: cover;
      object-position: 50% 50%;
      transform: translate(-50%, -50%) rotate(7deg) scale(1.03);
      transform-origin: center;
    }

    .hero-ghost-word {
      width: 100%;
      margin: 0;
      padding: 0;
      transform: none !important;
      text-align: center;
      color: rgba(242,242,242,.055);
      font-size: clamp(54px, 8vw, 126px);
      line-height: .78;
      font-weight: 950;
      letter-spacing: -.12em;
      white-space: nowrap;
      pointer-events: none;
      user-select: none;
    }
    /* LAB HERO SINGLE AXIS END */

  
    

  
    


    


    /* LAB MARQUEE CLEAN LOOP START */
    .strip {
      overflow: hidden;
    }

    .strip-track {
      display: flex;
      width: max-content;
      gap: 0;
      padding: 14px 0;
      will-change: transform;
      animation: none;
    }

    .strip-set {
      display: flex;
      flex: 0 0 auto;
      gap: 34px;
      padding-right: 34px;
      color: rgba(242,242,242,.58);
      font-weight: 950;
      text-transform: uppercase;
      letter-spacing: .14em;
    }

    .strip-set span:nth-child(even) {
      color: var(--yellow);
    }

    .strip-track.strip-intro {
      animation: marqueeIntro 7s linear 1 forwards;
    }

    .strip-track.strip-loop {
      animation: marqueeLoop 24s linear infinite;
    }

    @keyframes marqueeIntro {
      from { transform: translateX(100vw); }
      to { transform: translateX(0); }
    }

    @keyframes marqueeLoop {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }
    /* LAB MARQUEE CLEAN LOOP END */

  
    /* LAB MARQUEE SPEED NORMALIZED START */
    .strip-track.strip-intro {
      animation: marqueeIntro var(--marquee-intro-duration, 18s) linear 1 forwards !important;
    }

    .strip-track.strip-loop {
      animation: marqueeLoop var(--marquee-loop-duration, 34s) linear infinite !important;
    }

    @keyframes marqueeIntro {
      from { transform: translateX(100vw); }
      to { transform: translateX(0); }
    }

    @keyframes marqueeLoop {
      from { transform: translateX(0); }
      to { transform: translateX(var(--marquee-loop-shift, -50%)); }
    }
    /* LAB MARQUEE SPEED NORMALIZED END */
/* TYPO SAFETY GLOBAL START */
    .section-head h2,
    .product-card h3,
    .manifesto strong,
    .panel .big {
      overflow: visible;
      text-rendering: geometricPrecision;
      font-kerning: normal;
    }

    .section-head h2 {
      letter-spacing: -.055em;
      line-height: .94;
    }

    .product-card h3,
    .manifesto strong {
      letter-spacing: -.052em;
      line-height: .94;
    }

    .panel .big {
      letter-spacing: -.055em;
      line-height: .86;
    }
    /* TYPO SAFETY GLOBAL END */

    /* LAB TITLE PUNCT SIMPLE START */
    .hero-title,
    .panel .big,
    .section-head h2,
    .product-card h3,
    .manifesto strong {
      text-rendering: geometricPrecision;
      font-kerning: normal;
      overflow: visible;
    }

    .hero-title {
      display: block;
      line-height: .82;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .hero-title .hero-line {
      display: block;
      white-space: nowrap;
      overflow: visible;
      letter-spacing: -.072em;
      line-height: .88;
      padding-top: .02em;
    }

    .hero-dot {
      display: inline-block;
      margin-left: .075em;
      font-size: .62em;
      line-height: 1;
      color: var(--yellow);
      vertical-align: -.02em;
      letter-spacing: 0;
      text-shadow:
        0 0 12px rgba(255,214,0,.30),
        0 0 24px rgba(255,214,0,.14);
    }

    .panel .big {
      letter-spacing: -.045em;
      line-height: .88;
      word-break: normal;
      overflow-wrap: normal;
      hyphens: none;
    }
    /* LAB TITLE PUNCT SIMPLE END */

  
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
video,
svg {
  max-width: 100%;
}

.lab-brand-block,
.lab-brand-kicker,
.lab-legal-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}

.lab-brand-title {
  margin: 0;
  max-width: 980px;
  font-size: clamp(34px, 7vw, 88px);
  line-height: .88;
  letter-spacing: -.07em;
  color: #f2f2f2;
}

.lab-brand-title strong {
  color: #FFD600;
  font-weight: 900;
}

.lab-brand-lead {
  max-width: 760px;
  margin: 24px 0 0;
  color: rgba(242,242,242,.78);
  font-size: clamp(17px, 2vw, 23px);
  line-height: 1.45;
}

.lab-brand-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(18px, 3vw, 34px);
  margin-top: 34px;
}

.lab-brand-card,
.lab-signs-drawer {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  background: rgba(0,0,0,.22);
  padding: clamp(18px, 2.5vw, 28px);
}

.lab-brand-card h3,
.lab-signs-drawer summary {
  margin: 0 0 12px;
  color: #f2f2f2;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 900;
  letter-spacing: -.03em;
}

.lab-brand-card p,
.lab-signs-drawer p,
.lab-signs-drawer summary {
  cursor: pointer;
  list-style: none;
}

.lab-signs-drawer summary::-webkit-details-marker {
  display: none;
}

.lab-signs-drawer summary::after {
  content: " +";
  color: #FFD600;
}

.lab-signs-drawer[open] summary::after {
  content: " −";
}
@media (max-width: 760px) {
  body {
    overflow-x: hidden;
  }

  header,
  nav,
  main,
  section,
  footer {
    max-width: 100%;
  }

  h1 {
    font-size: clamp(42px, 15vw, 72px) !important;
    line-height: .9 !important;
  }

  h2 {
    font-size: clamp(26px, 9vw, 44px) !important;
    line-height: .98 !important;
  }

  p {
    font-size: 16px;
  }

  .hero,
  .hero-section,
  .hero-wrap,
  .hero-inner {
    min-height: auto !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .hero-grid,
  .split,
  .two-col,
  .lab-brand-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .frame,
  .hero-frame,
  .tilted-frame,
  .visual-frame {
    max-width: 92vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: rotate(-2deg) !important;
  }

  .marquee,
  .ticker {
    font-size: 12px !important;
  }

  .lab-brand-block,
.lab-brand-lead {
    font-size: 17px;
  }
}
.lab-international-signal,
.lab-product-language-note {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 18px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  color: rgba(242,242,242,.72);
  font-size: 13px;
  letter-spacing: .04em;
}

.lab-international-signal strong,
.lab-product-language-note strong {
  color: #FFD600;
  font-weight: 900;
}

@media (max-width: 760px) {
  .lab-international-signal,
  .lab-product-language-note {
    border-radius: 18px;
    line-height: 1.45;
  }
}
/* NO_PNJ_PUBLIC_BRAND_LAYOUT_FIX_START */
#marque.lab-brand-block,
.lab-brand-block.no-pnj-lab-patch {
  width: min(1120px, calc(100% - 32px)) !important;
  margin: clamp(42px, 6vw, 86px) auto !important;
  padding: clamp(24px, 4vw, 42px) !important;
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,214,0,.10), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(96,175,255,.08), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)) !important;
}

.lab-brand-kicker {
  display: block !important;
  position: static !important;
  transform: none !important;
  writing-mode: horizontal-tb !important;
  margin: 0 0 18px !important;
  max-width: none !important;
  color: #FFD600 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

.lab-brand-title {
  display: block !important;
  max-width: 820px !important;
  margin: 0 0 22px !important;
  font-size: clamp(42px, 6.4vw, 76px) !important;
  line-height: .88 !important;
  letter-spacing: -.075em !important;
}

.lab-brand-lead {
  display: block !important;
  max-width: 760px !important;
  margin: 0 0 18px !important;
  font-size: clamp(17px, 1.5vw, 20px) !important;
  line-height: 1.55 !important;
}

.lab-international-signal {
  position: static !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 18px 0 0 !important;
}

.lab-brand-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-top: 24px !important;
  width: 100% !important;
}

.lab-brand-card,
.lab-signs-drawer {
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 22px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 20px !important;
  background: rgba(0,0,0,.22) !important;
}

.lab-brand-card h3,
.lab-signs-drawer summary {
  font-size: clamp(22px, 2.2vw, 30px) !important;
  line-height: 1.02 !important;
}

@media (max-width: 760px) {
  #marque.lab-brand-block,
  .lab-brand-block.no-pnj-lab-patch {
    width: calc(100% - 24px) !important;
    margin: 34px auto !important;
    padding: 22px !important;
    border-radius: 22px !important;
  }

  .lab-brand-title {
    font-size: clamp(36px, 12vw, 54px) !important;
  }

  .lab-brand-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .lab-international-signal {
    width: 100% !important;
  }
}
/* NO_PNJ_PUBLIC_BRAND_LAYOUT_FIX_END */


/* NO_PNJ_PUBLIC_MARQUEE_LOCK_START */
.strip {
  overflow: hidden !important;
}

.strip-track {
  display: flex !important;
  width: max-content !important;
  will-change: transform !important;
}

.strip-set {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: clamp(34px, 4.8vw, 96px) !important;
  padding-right: clamp(34px, 4.8vw, 96px) !important;
  white-space: nowrap !important;
}

.strip-set span {
  display: inline-flex !important;
  align-items: center !important;
}

@media (min-width: 1600px) {
  .strip-set {
    gap: clamp(60px, 5.5vw, 120px) !important;
    padding-right: clamp(60px, 5.5vw, 120px) !important;
  }
}
/* NO_PNJ_PUBLIC_MARQUEE_LOCK_END */


/* NO_PNJ_PUBLIC_MARQUEE_INFINITE_FIX_START */
.strip-track.strip-loop {
  animation: marqueeLoop var(--marquee-loop-duration, 34s) linear infinite !important;
}

.strip-track.strip-intro {
  animation: marqueeLoop var(--marquee-loop-duration, 34s) linear infinite !important;
}

@keyframes marqueeLoop {
  from { transform: translateX(0); }
  to { transform: translateX(var(--marquee-loop-shift, -50%)); }
}
/* NO_PNJ_PUBLIC_MARQUEE_INFINITE_FIX_END */


/* NO_PNJ_PUBLIC_MARQUEE_RESPONSIVE_CYCLE_START */
.strip {
  overflow: hidden !important;
}

.strip-track {
  display: flex !important;
  width: max-content !important;
  will-change: transform !important;
  transform: translateX(var(--marquee-start, 100vw));
}

.strip-track.strip-cycle {
  animation: noPnjMarqueeCycle var(--marquee-duration, 28s) linear infinite !important;
}

.strip-set {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: clamp(34px, 4.8vw, 96px) !important;
  padding-right: clamp(34px, 4.8vw, 96px) !important;
  white-space: nowrap !important;
}

.strip-set span {
  display: inline-flex !important;
  align-items: center !important;
}

@keyframes noPnjMarqueeCycle {
  from {
    transform: translateX(var(--marquee-start, 100vw));
  }
  to {
    transform: translateX(var(--marquee-end, -100%));
  }
}

@media (min-width: 1600px) {
  .strip-set {
    gap: clamp(60px, 5.5vw, 120px) !important;
    padding-right: clamp(60px, 5.5vw, 120px) !important;
  }
}
/* NO_PNJ_PUBLIC_MARQUEE_RESPONSIVE_CYCLE_END */
/* PRELAUNCH_MINIMAL_LOCK_START */
.prelaunch-notice {
  max-width: 1180px;
  margin: 18px auto 0;
  padding: 12px 16px;
  border: 1px solid rgba(255,214,0,.28);
  border-radius: 16px;
  background: rgba(255,214,0,.075);
  color: rgba(242,242,242,.84);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
}

.prelaunch-notice strong {
  color: #FFD600;
}

@media (max-width: 760px) {
  .prelaunch-notice {
    margin: 14px 16px 0;
  }
}
/* PRELAUNCH_MINIMAL_LOCK_END */


/*
  Objectif :
  - header réellement fixe au scroll
  - compensation de hauteur pour éviter que le contenu passe dessous
  - ancres internes corrigées
*/

:root {
  --home-header-height: 58px;
}

body {
  padding-top: var(--home-header-height) !important;
}

header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 5000 !important;
  min-height: var(--home-header-height) !important;
  background: rgba(5, 5, 5, .92) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

/* Évite que les ancres arrivent cachées sous le header */
#manifeste,
#pieces,
#demander,
#contact {
  scroll-margin-top: calc(var(--home-header-height) + 24px) !important;
}



/*
  But :
  - garder le header fixe
  - redonner de l'air au bandeau pré-lancement
  - ne toucher ni à la structure ni au reste du layout
*/

:root {
  --home-header-gap: 14px;
}

body {
  padding-top: calc(var(--home-header-height) + var(--home-header-gap)) !important;
}

.prelaunch-notice {
  margin-top: 8px !important;
}



/*
  Objectif :
  - éviter le chevauchement de la bannière pré-lancement avec le header fixe sur mobile
  - ne toucher qu'à l'accueil
  - augmenter l'air au-dessus de la bannière
*/

@media (max-width: 760px) {
  .prelaunch-notice {
    margin: 14px 16px 0 !important;
  }
}




/*
  Objectif :
  - ne toucher qu'au texte
  - révélation ligne par ligne au survol
  - bloc inchangé
  - effet premium discret
*/

.signal-text-glitch p,
.signal-text-glitch p::before,
.signal-text-glitch p::after {
  transition:
    color .18s ease,
    opacity .18s ease,
    filter .22s ease,
    transform .22s ease,
    letter-spacing .18s ease !important;
}

.signal-text-glitch p {
  transform-origin: left center;
}

/* Révélation séquencée ligne par ligne */
@media (hover: hover) and (pointer: fine) {
  .lab-signal-text-card:hover .signal-text-glitch p,
  .lab-signal-text-card:focus-within .signal-text-glitch p {
    color: rgba(242,242,242,.94) !important;
    filter: none !important;
    letter-spacing: .024em !important;
    transform: scale(1.012) !important;
  }

  .lab-signal-text-card:hover .signal-text-glitch p::before,
  .lab-signal-text-card:hover .signal-text-glitch p::after,
  .lab-signal-text-card:focus-within .signal-text-glitch p::before,
  .lab-signal-text-card:focus-within .signal-text-glitch p::after {
    opacity: 0 !important;
    filter: none !important;
    transform: translate(0,0) !important;
    animation: none !important;
  }

  /* Ligne 1 */
  .lab-signal-text-card:hover .signal-text-glitch p:nth-of-type(1),
  .lab-signal-text-card:focus-within .signal-text-glitch p:nth-of-type(1),
  .lab-signal-text-card:hover .signal-text-glitch p:nth-of-type(1)::before,
  .lab-signal-text-card:hover .signal-text-glitch p:nth-of-type(1)::after,
  .lab-signal-text-card:focus-within .signal-text-glitch p:nth-of-type(1)::before,
  .lab-signal-text-card:focus-within .signal-text-glitch p:nth-of-type(1)::after {
    transition-delay: 0ms !important;
  }

  /* Ligne 2 */
  .lab-signal-text-card:hover .signal-text-glitch p:nth-of-type(2),
  .lab-signal-text-card:focus-within .signal-text-glitch p:nth-of-type(2),
  .lab-signal-text-card:hover .signal-text-glitch p:nth-of-type(2)::before,
  .lab-signal-text-card:hover .signal-text-glitch p:nth-of-type(2)::after,
  .lab-signal-text-card:focus-within .signal-text-glitch p:nth-of-type(2)::before,
  .lab-signal-text-card:focus-within .signal-text-glitch p:nth-of-type(2)::after {
    transition-delay: 90ms !important;
  }

  /* Ligne 3 */
  .lab-signal-text-card:hover .signal-text-glitch p:nth-of-type(3),
  .lab-signal-text-card:focus-within .signal-text-glitch p:nth-of-type(3),
  .lab-signal-text-card:hover .signal-text-glitch p:nth-of-type(3)::before,
  .lab-signal-text-card:hover .signal-text-glitch p:nth-of-type(3)::after,
  .lab-signal-text-card:focus-within .signal-text-glitch p:nth-of-type(3)::before,
  .lab-signal-text-card:focus-within .signal-text-glitch p:nth-of-type(3)::after {
    transition-delay: 180ms !important;
  }

  /* Ligne 4 */
  .lab-signal-text-card:hover .signal-text-glitch p:nth-of-type(4),
  .lab-signal-text-card:focus-within .signal-text-glitch p:nth-of-type(4),
  .lab-signal-text-card:hover .signal-text-glitch p:nth-of-type(4)::before,
  .lab-signal-text-card:hover .signal-text-glitch p:nth-of-type(4)::after,
  .lab-signal-text-card:focus-within .signal-text-glitch p:nth-of-type(4)::before,
  .lab-signal-text-card:focus-within .signal-text-glitch p:nth-of-type(4)::after {
    transition-delay: 270ms !important;
  }

  /* Ligne 5 */
  .lab-signal-text-card:hover .signal-text-glitch p:nth-of-type(5),
  .lab-signal-text-card:focus-within .signal-text-glitch p:nth-of-type(5),
  .lab-signal-text-card:hover .signal-text-glitch p:nth-of-type(5)::before,
  .lab-signal-text-card:hover .signal-text-glitch p:nth-of-type(5)::after,
  .lab-signal-text-card:focus-within .signal-text-glitch p:nth-of-type(5)::before,
  .lab-signal-text-card:focus-within .signal-text-glitch p:nth-of-type(5)::after {
    transition-delay: 360ms !important;
  }
}

/* Mobile : pas d'effet hover, texte lisible */
@media (max-width: 820px) {
  .signal-text-glitch p,
  .signal-text-glitch p::before,
  .signal-text-glitch p::after {
    transition-delay: 0ms !important;
  }
}




/*
  Scope strict : bloc "Le signal discret".
  Direction :
  - aucun hover global sur la carte
  - aucun mouvement du bloc
  - repos = texte façon signal pixelisé / parasité
  - hover = uniquement la ligne ciblée devient lisible
*/

.lab-brand-grid {
  align-items: stretch !important;
}

.lab-brand-grid > .lab-brand-card,
.lab-brand-grid > .lab-signal-text-card {
  min-height: 228px !important;
  height: 100% !important;
}

.lab-signal-text-card {
  overflow: hidden !important;
}

.lab-signal-text-card h3 {
  margin-bottom: 18px !important;
}

/* Conteneur stable : aucun zoom global */
.signal-text-glitch {
  transform: none !important;
  filter: none !important;
}

/* Ligne au repos : le vrai texte est quasi invisible, les couches font le signal */
.signal-text-glitch p {
  position: relative !important;
  display: block !important;
  margin: 0 0 17px 0 !important;
  padding: 0 !important;
  line-height: 1.76 !important;
  letter-spacing: .07em !important;
  color: rgba(242,242,242,.025) !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
  transform-origin: left center !important;
  cursor: zoom-in !important;
  isolation: isolate !important;
  transition:
    color .18s ease,
    letter-spacing .18s ease,
    transform .18s ease,
    text-shadow .18s ease !important;
}

/* Couche pixel froide */
.signal-text-glitch p::before,
/* Couche pixel jaune */
.signal-text-glitch p::after {
  content: attr(data-text) !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  white-space: pre-wrap !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  font: inherit !important;
  text-transform: inherit !important;
  opacity: 1 !important;
  transition:
    opacity .16s ease,
    transform .16s ease,
    color .16s ease,
    text-shadow .16s ease !important;
}

/* Rendu pixel / signal : net, cassé, pas juste flou */
.signal-text-glitch p::before {
  color: rgba(96,175,255,.145) !important;
  text-shadow:
    1px 0 rgba(96,175,255,.22),
    2px 0 rgba(96,175,255,.08),
    0 1px rgba(255,255,255,.035) !important;
  transform: translate(1.6px, -0.5px) skewX(-1deg) !important;
  clip-path: polygon(
    0 0, 100% 0,
    100% 18%, 0 18%,
    0 28%, 100% 28%,
    100% 46%, 0 46%,
    0 58%, 100% 58%,
    100% 73%, 0 73%,
    0 100%, 100% 100%
  ) !important;
  animation: nopnjPixelSignalA 2.7s steps(2, end) infinite !important;
}

.signal-text-glitch p::after {
  color: rgba(255,214,0,.095) !important;
  text-shadow:
    -1px 0 rgba(255,214,0,.18),
    -2px 0 rgba(255,214,0,.06),
    0 -1px rgba(255,255,255,.025) !important;
  transform: translate(-1.4px, .5px) skewX(1deg) !important;
  clip-path: polygon(
    0 8%, 100% 8%,
    100% 25%, 0 25%,
    0 39%, 100% 39%,
    100% 52%, 0 52%,
    0 68%, 100% 68%,
    100% 86%, 0 86%
  ) !important;
  animation: nopnjPixelSignalB 3.2s steps(2, end) infinite !important;
}

/* IMPORTANT : aucun hover carte. On neutralise explicitement. */
@media (hover: hover) and (pointer: fine) {
  .lab-signal-text-card:hover .signal-text-glitch,
  .lab-signal-text-card:focus-within .signal-text-glitch {
    transform: none !important;
    filter: none !important;
  }

  .lab-signal-text-card:hover .signal-text-glitch p:not(:hover):not(:focus-visible),
  .lab-signal-text-card:focus-within .signal-text-glitch p:not(:hover):not(:focus-visible) {
    color: rgba(242,242,242,.025) !important;
    letter-spacing: .07em !important;
    transform: none !important;
    filter: none !important;
  }

  /* Révélation ligne par ligne uniquement */
  .signal-text-glitch p:hover,
  .signal-text-glitch p:focus-visible {
    z-index: 6 !important;
    color: rgba(242,242,242,.96) !important;
    letter-spacing: .026em !important;
    transform: scale(1.024) !important;
    text-shadow:
      .35px 0 rgba(96,175,255,.18),
     -.35px 0 rgba(255,214,0,.14) !important;
    outline: none !important;
  }

  .signal-text-glitch p:hover::before,
  .signal-text-glitch p:hover::after,
  .signal-text-glitch p:focus-visible::before,
  .signal-text-glitch p:focus-visible::after {
    opacity: 0 !important;
    transform: translate(0,0) !important;
    text-shadow: none !important;
    animation: none !important;
  }
}

@keyframes nopnjPixelSignalA {
  0%, 82%, 100% { transform: translate(1.6px, -0.5px) skewX(-1deg); opacity: .92; }
  84% { transform: translate(3.2px, -1px) skewX(-2deg); opacity: .72; }
  87% { transform: translate(-2.4px, .6px) skewX(1deg); opacity: .54; }
  91% { transform: translate(1px, -.3px) skewX(0); opacity: .86; }
}

@keyframes nopnjPixelSignalB {
  0%, 85%, 100% { transform: translate(-1.4px, .5px) skewX(1deg); opacity: .78; }
  87% { transform: translate(-3px, 1px) skewX(2deg); opacity: .62; }
  90% { transform: translate(2.2px, -.7px) skewX(-1deg); opacity: .45; }
  94% { transform: translate(-.8px, .2px) skewX(0); opacity: .74; }
}

/* Mobile : pas de hover fiable, texte lisible directement */
@media (max-width: 820px) {
  .lab-brand-grid > .lab-brand-card,
  .lab-brand-grid > .lab-signal-text-card {
    min-height: auto !important;
  }

  .signal-text-glitch p {
    cursor: default !important;
    color: rgba(242,242,242,.90) !important;
    letter-spacing: .02em !important;
    line-height: 1.68 !important;
    transform: none !important;
  }

  .signal-text-glitch p::before,
  .signal-text-glitch p::after {
    opacity: 0 !important;
    animation: none !important;
  }
}



/*
  Scope strict : bloc marque accueil.
  Objectif :
  - aligner le rythme du texte gauche sur celui du bloc signal droit
  - même respiration sous le titre
  - même interligne
  - même espacement vertical entre lignes
  - aucun changement sur le glitch
*/

.lab-brand-grid > .lab-brand-card:not(.lab-signal-text-card) h3 {
  margin-bottom: 18px !important;
}

.lab-brand-grid > .lab-brand-card:not(.lab-signal-text-card) p {
  margin: 0 0 17px 0 !important;
  line-height: 1.76 !important;
  letter-spacing: .07em !important;
}

.lab-brand-grid > .lab-brand-card:not(.lab-signal-text-card) p:last-child {
  margin-bottom: 0 !important;
}

/* Mobile : conserve un rythme lisible sans sur-espacer */
@media (max-width: 820px) {
  .lab-brand-grid > .lab-brand-card:not(.lab-signal-text-card) p {
    margin-bottom: 15px !important;
    line-height: 1.68 !important;
    letter-spacing: .02em !important;
  }
}




.lab-brand-kicker.lab-i18n-top-drawer {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-height: 22px !important;
  gap: 8px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  cursor: crosshair !important;
  user-select: none !important;
}

.lab-i18n-top-drawer .i18n-main {
  color: #FFD600 !important;
  font-weight: 950 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

.lab-i18n-top-drawer .i18n-arrow {
  color: #FFD600 !important;
  font-weight: 950 !important;
  opacity: .95 !important;
  transform: translateX(0) !important;
  transition:
    transform .22s ease,
    opacity .22s ease !important;
}

.lab-i18n-top-drawer .i18n-reveal {
  display: inline-block !important;
  width: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  white-space: nowrap !important;
  color: rgba(242,242,242,.86) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  font-weight: 900 !important;
  border-right: 1px solid transparent !important;
  transform: translateX(-4px) !important;
}

.lab-i18n-top-drawer .i18n-reveal strong {
  color: #FFD600 !important;
  font-weight: 950 !important;
}

/* Desktop : écriture vers la droite au survol */
@media (hover: hover) and (pointer: fine) {
  .lab-i18n-top-drawer:hover .i18n-arrow,
  .lab-i18n-top-drawer:focus .i18n-arrow,
  .lab-i18n-top-drawer:focus-within .i18n-arrow {
    transform: translateX(3px) !important;
  }

  .lab-i18n-top-drawer:hover .i18n-reveal,
  .lab-i18n-top-drawer:focus .i18n-reveal,
  .lab-i18n-top-drawer:focus-within .i18n-reveal {
    opacity: 1 !important;
    transform: translateX(0) !important;
    border-right-color: rgba(255,214,0,.72) !important;
    animation:
      noPnjTopI18nType .78s steps(28, end) forwards,
      noPnjTopI18nCaret .85s steps(1, end) 3 !important;
  }
}

@keyframes noPnjTopI18nType {
  0% {
    width: 0;
    max-width: 0;
  }
  100% {
    width: 29ch;
    max-width: 29ch;
  }
}

@keyframes noPnjTopI18nCaret {
  0%, 45% {
    border-right-color: rgba(255,214,0,.75);
  }
  46%, 100% {
    border-right-color: transparent;
  }
}

/* Mobile : pas de hover fiable, on garde uniquement le texte principal */
@media (max-width: 820px) {
  .lab-brand-kicker.lab-i18n-top-drawer {
    white-space: normal !important;
    cursor: default !important;
  }

  .lab-i18n-top-drawer .i18n-arrow,
  .lab-i18n-top-drawer .i18n-reveal {
    display: none !important;
  }
}



.lab-brand-kicker.lab-i18n-top-drawer {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  max-width: 100% !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

.lab-i18n-top-drawer .i18n-main,
.lab-i18n-top-drawer .i18n-arrow,
.lab-i18n-top-drawer .i18n-reveal {
  flex: 0 0 auto !important;
}

.lab-i18n-top-drawer .i18n-reveal {
  display: inline-block !important;
  width: auto !important;
  max-width: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  white-space: nowrap !important;
  color: rgba(242,242,242,.88) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  font-weight: 900 !important;
  border-right: 1px solid transparent !important;
  transform: translateX(-2px) !important;
  transition:
    max-width .85s steps(29, end),
    opacity .12s ease,
    transform .18s ease,
    border-right-color .12s ease !important;
}

.lab-i18n-top-drawer .i18n-reveal strong {
  color: #FFD600 !important;
  font-weight: 950 !important;
}

@media (hover: hover) and (pointer: fine) {
  .lab-i18n-top-drawer:hover .i18n-arrow,
  .lab-i18n-top-drawer:focus .i18n-arrow,
  .lab-i18n-top-drawer:focus-within .i18n-arrow {
    transform: translateX(3px) !important;
    opacity: 1 !important;
  }

  .lab-i18n-top-drawer:hover .i18n-reveal,
  .lab-i18n-top-drawer:focus .i18n-reveal,
  .lab-i18n-top-drawer:focus-within .i18n-reveal {
    max-width: 34ch !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
    border-right-color: rgba(255,214,0,.72) !important;
    animation: noPnjTopCaretBlink .85s steps(1, end) 3 !important;
  }
}

@keyframes noPnjTopCaretBlink {
  0%, 45% {
    border-right-color: rgba(255,214,0,.75);
  }
  46%, 100% {
    border-right-color: transparent;
  }
}

/* Mobile : on garde le haut compact */
@media (max-width: 820px) {
  .lab-i18n-top-drawer .i18n-arrow,
  .lab-i18n-top-drawer .i18n-reveal {
    display: none !important;
  }
}



/*
  Ajustement visuel :
  - conserve le texte principal jaune
  - conserve la flèche jaune
  - force toute la déclinaison révélée en blanc
  - NO NPC ne doit plus passer en jaune
*/

.lab-i18n-top-drawer .i18n-reveal,
.lab-i18n-top-drawer .i18n-reveal strong {
  color: rgba(242,242,242,.92) !important;
}



.lab-i18n-top-drawer .i18n-reveal {
  transition:
    max-width 1.15s steps(58, end),
    opacity .12s ease,
    transform .18s ease,
    border-right-color .12s ease !important;
}

@media (hover: hover) and (pointer: fine) {
  .lab-i18n-top-drawer:hover .i18n-reveal,
  .lab-i18n-top-drawer:focus .i18n-reveal,
  .lab-i18n-top-drawer:focus-within .i18n-reveal {
    max-width: 64ch !important;
  }
}

/* Sécurité petits écrans larges/tablette : évite le débordement horizontal */
@media (max-width: 1100px) {
  .lab-brand-kicker.lab-i18n-top-drawer {
    max-width: 100% !important;
  }

  .lab-i18n-top-drawer .i18n-reveal {
    letter-spacing: .08em !important;
  }

  .lab-i18n-top-drawer:hover .i18n-reveal,
  .lab-i18n-top-drawer:focus .i18n-reveal,
  .lab-i18n-top-drawer:focus-within .i18n-reveal {
    max-width: min(64ch, calc(100vw - 360px)) !important;
  }
}



.lab-signal-text-card:hover,
.lab-signal-text-card:focus-within {
  transform: none !important;
  filter: none !important;
  box-shadow: inherit !important;
}

/* Le conteneur ne réagit jamais au hover */
.lab-signal-text-card:hover .signal-text-glitch,
.lab-signal-text-card:focus-within .signal-text-glitch {
  transform: none !important;
  filter: none !important;
}

/* Les lignes ne prennent que leur largeur utile, pas toute la carte */
.signal-text-glitch p {
  display: table !important;
  width: fit-content !important;
  max-width: 100% !important;
}

/* État repos strict, même quand la carte est survolée */
@media (hover: hover) and (pointer: fine) {
  .lab-signal-text-card:hover .signal-text-glitch p:not(:hover):not(:focus-visible),
  .lab-signal-text-card:focus-within .signal-text-glitch p:not(:hover):not(:focus-visible) {
    color: rgba(242,242,242,.025) !important;
    letter-spacing: .07em !important;
    transform: none !important;
    filter: none !important;
    text-shadow: none !important;
  }

  .lab-signal-text-card:hover .signal-text-glitch p:not(:hover):not(:focus-visible)::before,
  .lab-signal-text-card:focus-within .signal-text-glitch p:not(:hover):not(:focus-visible)::before {
    color: rgba(96,175,255,.145) !important;
    opacity: 1 !important;
    text-shadow:
      1px 0 rgba(96,175,255,.22),
      2px 0 rgba(96,175,255,.08),
      0 1px rgba(255,255,255,.035) !important;
    transform: translate(1.6px, -0.5px) skewX(-1deg) !important;
    animation: nopnjPixelSignalA 2.7s steps(2, end) infinite !important;
  }

  .lab-signal-text-card:hover .signal-text-glitch p:not(:hover):not(:focus-visible)::after,
  .lab-signal-text-card:focus-within .signal-text-glitch p:not(:hover):not(:focus-visible)::after {
    color: rgba(255,214,0,.095) !important;
    opacity: 1 !important;
    text-shadow:
      -1px 0 rgba(255,214,0,.18),
      -2px 0 rgba(255,214,0,.06),
      0 -1px rgba(255,255,255,.025) !important;
    transform: translate(-1.4px, .5px) skewX(1deg) !important;
    animation: nopnjPixelSignalB 3.2s steps(2, end) infinite !important;
  }

  /* Révélation uniquement sur la ligne ciblée */
  .signal-text-glitch p:hover,
  .signal-text-glitch p:focus-visible {
    color: rgba(242,242,242,.96) !important;
    letter-spacing: .026em !important;
    transform: scale(1.024) !important;
    filter: none !important;
    text-shadow:
      .35px 0 rgba(96,175,255,.18),
     -.35px 0 rgba(255,214,0,.14) !important;
  }

  .signal-text-glitch p:hover::before,
  .signal-text-glitch p:hover::after,
  .signal-text-glitch p:focus-visible::before,
  .signal-text-glitch p:focus-visible::after {
    opacity: 0 !important;
    animation: none !important;
    transform: translate(0,0) !important;
    text-shadow: none !important;
  }
}



/*
  Remplace la loupe navigateur par un petit curseur signal NO PNJ.
  Scope strict : lignes du bloc "Le signal discret".
*/

@media (hover: hover) and (pointer: fine) {
  .signal-text-glitch p {
    cursor:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='7' fill='none' stroke='%23FFD600' stroke-width='1.8'/%3E%3Ccircle cx='14' cy='14' r='2' fill='%23FFD600'/%3E%3Cpath d='M14 2v5M14 21v5M2 14h5M21 14h5' stroke='%23FFD600' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 14 14,
      crosshair !important;
  }

  .signal-text-glitch p:hover,
  .signal-text-glitch p:focus-visible {
    cursor:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='8' fill='rgba(255,214,0,0.08)' stroke='%23FFD600' stroke-width='2'/%3E%3Ccircle cx='14' cy='14' r='2.4' fill='%23FFD600'/%3E%3Cpath d='M14 1.5v5M14 21.5v5M1.5 14h5M21.5 14h5' stroke='%23FFD600' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 14 14,
      crosshair !important;
  }
}



/*
  Remplace la loupe native par un curseur signal NO PNJ.
  Scope strict : lignes glitchées du bloc "Le signal discret".
*/

@media (hover: hover) and (pointer: fine) {
  .signal-text-glitch p {
    cursor: url('/assets/cursor-signal.svg') 16 16, pointer !important;
  }
}



.section-card,
.step-card,
.process-card,
.info-card,
.contact-card,
.exchange-card,
.order-card,
.timeline-card {
  position: relative !important;
  overflow: hidden !important;
}

.section-num,
.step-num,
.process-num,
.card-num,
.info-num,
.exchange-num,
.order-num,
.timeline-num {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  margin: 0 !important;
  display: block !important;
  font-size: clamp(52px, 6vw, 76px) !important;
  line-height: 0.82 !important;
  letter-spacing: -0.05em !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  opacity: 0.16 !important;
  z-index: 0 !important;
}

.section-card > :not(.section-num),
.step-card > :not(.step-num),
.process-card > :not(.process-num),
.info-card > :not(.info-num),
.contact-card > :not(.card-num),
.exchange-card > :not(.exchange-num),
.order-card > :not(.order-num),
.timeline-card > :not(.timeline-num) {
  position: relative !important;
  z-index: 1 !important;
}

.section-num + *,
.step-num + *,
.process-num + *,
.card-num + *,
.info-num + *,
.exchange-num + *,
.order-num + *,
.timeline-num + * {
  margin-top: 44px !important;
}

@media (max-width: 768px) {
  .section-num,
  .step-num,
  .process-num,
  .card-num,
  .info-num,
  .exchange-num,
  .order-num,
  .timeline-num {
    top: 12px !important;
    left: 12px !important;
    font-size: clamp(44px, 12vw, 62px) !important;
  }

  .section-num + *,
  .step-num + *,
  .process-num + *,
  .card-num + *,
  .info-num + *,
  .exchange-num + *,
  .order-num + *,
  .timeline-num + * {
    margin-top: 38px !important;
  }
}
/*
  Scope strict : accueil uniquement.
  Objectif : aligner le bandeau pré-lancement de l'accueil
  sur le rendu validé de la page /contact/.
*/

.prelaunch-notice {
  max-width: 1180px !important;
  margin: 18px auto 0 !important;
  padding: 12px 16px !important;
}

@media (max-width: 760px) {
  .prelaunch-notice {
    margin: 14px 16px 0 !important;
    padding: 12px 16px !important;
  }
}



body > .prelaunch-notice{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  gap:4px !important;
  text-align:center !important;
  min-height:46px !important;
  padding:10px 22px !important;
  line-height:1.35 !important;
}

body > .prelaunch-notice strong,
body > .prelaunch-notice .nopnj-prelaunch-copy{
  display:inline-block !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1.35 !important;
  vertical-align:-.045em !important;
}

body > .prelaunch-notice strong{
  color:var(--yellow) !important;
  white-space:nowrap !important;
}

body > .prelaunch-notice .nopnj-prelaunch-copy{
  color:var(--text) !important;
  text-wrap:balance !important;
}

@media (max-width:760px){
  body > .prelaunch-notice{
    gap:3px !important;
    padding:12px 16px !important;
    line-height:1.45 !important;
  }

  body > .prelaunch-notice strong,
  body > .prelaunch-notice .nopnj-prelaunch-copy{
    line-height:1.45 !important;
  }
}





.nopnj-p230-anchor{
  display:block !important;
  height:0 !important;
  width:100% !important;
  scroll-margin-top:180px !important;
  pointer-events:none !important;
}

@media(max-width:760px){
  .nopnj-p230-anchor{
    scroll-margin-top:128px !important;
  }
}


.hero-ghost-word{
  margin-left: -8px !important;
}





/* === P318 mobile viewport activation === */
@media (max-width: 900px){

  .viewport-awake{
    animation:nopnjViewportWake .9s cubic-bezier(.2,.8,.2,1);
    will-change:transform,box-shadow,filter;
  }

  @keyframes nopnjViewportWake{

    0%{
      transform:translateY(8px) scale(.985);
      filter:brightness(.96);
      box-shadow:0 0 0 rgba(255,214,0,0);
    }

    40%{
      transform:translateY(-2px) scale(1.01);
      filter:brightness(1.03);
      box-shadow:0 0 24px rgba(255,214,0,.15);
    }

    100%{
      transform:none;
      filter:none;
      box-shadow:none;
    }
  }
}

/* P324 — Sur mobile, la carte centrée reçoit le même état visuel qu'un hover/clic */
@media (hover: none), (pointer: coarse) {
  .nopnj-rich-egg-card.is-mobile-active,
  .nopnj-rich-egg-card.is-mobile-active .nopnj-rich-egg {
    pointer-events: auto;
  }

  .nopnj-rich-egg-card.is-mobile-active .nopnj-rich-egg,
  .nopnj-rich-egg-card.is-mobile-active .nopnj-rich-egg *,
  .nopnj-rich-egg-card.is-mobile-active .nopnj-rich-egg::before,
  .nopnj-rich-egg-card.is-mobile-active .nopnj-rich-egg::after,
  .nopnj-rich-egg-card.is-mobile-active i,
  .nopnj-rich-egg-card.is-mobile-active b,
  .nopnj-rich-egg-card.is-mobile-active span {
    animation-play-state: running !important;
  }

  /* Déclenche explicitement les éléments souvent bloqués tant qu'il n'y a pas de clic/hover */
  .nopnj-rich-egg-card.is-mobile-active .nopnj-rich-egg::before,
  .nopnj-rich-egg-card.is-mobile-active .nopnj-rich-egg::after,
  .nopnj-rich-egg-card.is-mobile-active i,
  .nopnj-rich-egg-card.is-mobile-active b {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .nopnj-rich-egg-card.is-mobile-active .nopnj-rich-egg {
    transform: translateY(-2px) scale(1.015) !important;
    box-shadow:
      0 0 0 1px rgba(255,214,0,.55),
      0 14px 32px rgba(255,214,0,.14) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nopnj-rich-egg-card.is-mobile-active .nopnj-rich-egg,
  .nopnj-rich-egg-card.is-mobile-active .nopnj-rich-egg *,
  .nopnj-rich-egg-card.is-mobile-active .nopnj-rich-egg::before,
  .nopnj-rich-egg-card.is-mobile-active .nopnj-rich-egg::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Déplace seulement le conteneur du bandeau. Ne jamais toucher à #marqueeTrack. */
body main .strip-wrap:has(#marqueeTrack),
body main .marquee-wrap:has(#marqueeTrack),
body main .brand-strip:has(#marqueeTrack),
body main section:has(#marqueeTrack){
  margin-top:-28px !important;
}

@media(max-width:760px){
  body main .strip-wrap:has(#marqueeTrack),
  body main .marquee-wrap:has(#marqueeTrack),
  body main .brand-strip:has(#marqueeTrack),
  body main section:has(#marqueeTrack){
    margin-top:-18px !important;
  }
}

/* === HERO DESKTOP CANONIQUE === */
.hero-tilt-axis{
  transform:rotate(-7deg) !important;
  transform-origin:center center !important;
}

.hero-frame{
  transform:none !important;
}

.hero-tilt-axis .hero-frame img{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  width:114% !important;
  height:114% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:50% 50% !important;
  transform:translate(-50%, -50%) rotate(7deg) scale(1.01) !important;
  transform-origin:center center !important;
}

.hero-tilt-axis .hero-ghost-word{
  width:100% !important;
  text-align:center !important;
  margin:0 auto !important;
  padding:0 !important;
  transform:translateX(-1%) !important;
  font-size:clamp(50px, 7vw, 108px) !important;
  letter-spacing:-.055em !important;
  line-height:.82 !important;
  white-space:nowrap !important;
}

/* === HERO MOBILE DÉDIÉ === */
@media(max-width:820px){
  .hero-art{
    min-height:390px !important;
    margin-top:18px !important;
  }

  .hero-tilt-axis{
    width:min(86vw, 360px) !important;
    transform:rotate(-7deg) !important;
  }

  .hero-frame{
    width:100% !important;
    aspect-ratio:4 / 5 !important;
  }

  .hero-tilt-axis .hero-frame img{
    width:100% !important;
    height:100% !important;
    object-position:50% 50% !important;
    transform:translate(-50%, -50%) scale(.92) !important;
  }

  .hero-tilt-axis .hero-ghost-word{
    font-size:clamp(38px, 14vw, 58px) !important;
    transform:translateX(0%) !important;
    margin-top:-2px !important;
    text-align:center !important;
    width:100% !important;
  }
}

@media(max-width:620px){
  body main .hero{
    grid-template-columns:1fr !important;
    gap:18px !important;
    padding-top:22px !important;
  }

  body main .hero-art{
    width:100% !important;
    min-height:0 !important;
    margin:0 auto !important;
  }

  body main .hero-tilt-axis{
    width:min(82vw, 330px) !important;
    margin:0 auto !important;
    transform:none !important;
  }

  body main .hero-frame{\n    outline:6px solid red !important;
    width:100% !important;
    aspect-ratio:1/1 !important;
    margin:0 auto !important;
    overflow:hidden !important;
    position:relative !important;
  }

  body main .hero-frame img{
    position:absolute !important;
    top:50% !important;
    left:50% !important;
    width:114% !important;
    height:114% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:50% 50% !important;
    transform:translate(-50%, -50%) scale(1.01) !important;
    transform-origin:center center !important;
  }

  body main .hero-ghost-word{
    display:block !important;
    width:100% !important;
    margin:0 auto !important;
    padding:0 !important;
    text-align:center !important;
    transform:none !important;
    font-size:clamp(48px, 16vw, 72px) !important;
    line-height:.9 !important;
  }
}

.hero-title .hero-decor-word{
  display:inline-block !important;
  transform:translateY(.055em) !important;
}

.contact-panel .nopnj-contact-big-balanced{
  display:flex !important;
  flex-direction:column !important;
  gap:.01em !important;
  line-height:.92 !important;
  letter-spacing:-.058em !important;
  text-transform:uppercase !important;
  font-size:clamp(64px, 8vw, 128px) !important;
}

.contact-panel .nopnj-contact-big-balanced > span{
  display:block !important;
}

.contact-panel .nopnj-contact-big-balanced .accent-line{
  padding-top:.035em !important;
}

.contact-panel .nopnj-contact-big-balanced .yellow-dot{
  color:#f2f2f2 !important;
  margin-left:.045em !important;
}

.lab-i18n-top-drawer,
.lab-i18n-top-drawer *,
.lab-i18n-top-drawer:hover,
.lab-i18n-top-drawer:focus,
.lab-i18n-top-drawer:focus-within{
  cursor:url('/assets/cursor-signal.svg') 16 16, pointer !important;
}

@media(max-width:760px){
  .lab-i18n-top-drawer{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:6px 8px !important;
  }

  .lab-i18n-top-drawer .i18n-arrow{
    display:inline-block !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  .lab-i18n-top-drawer .i18n-reveal{
    flex-basis:100% !important;
    display:block !important;
    opacity:0 !important;
    visibility:hidden !important;
    max-height:0 !important;
    transform:translateY(-4px) !important;
    transition:opacity .28s ease, transform .28s ease, max-height .28s ease, visibility .28s ease !important;
  }

  .lab-i18n-top-drawer.nopnj-i18n-mobile-active .i18n-reveal{
    opacity:1 !important;
    visibility:visible !important;
    max-height:80px !important;
    transform:translateY(0) !important;
  }
}

@media(max-width:760px){
  .lab-i18n-top-drawer .i18n-arrow{
    display:none !important;
  }

  .lab-i18n-top-drawer .i18n-reveal{
    display:block !important;
    width:100% !important;
    margin-top:8px !important;
    opacity:0 !important;
    visibility:hidden !important;
    max-height:0 !important;
    transform:translateY(-4px) !important;
    transition:opacity .28s ease, transform .28s ease, max-height .28s ease, visibility .28s ease !important;
  }

  .lab-i18n-top-drawer.nopnj-i18n-mobile-active .i18n-reveal{
    opacity:1 !important;
    visibility:visible !important;
    max-height:90px !important;
    transform:translateY(0) !important;
  }
}

@media(max-width:760px){
  .lab-i18n-top-drawer{
    display:block !important;
  }

  .lab-i18n-top-drawer .i18n-arrow{
    display:none !important;
  }

  .lab-i18n-top-drawer .i18n-reveal{
    display:block !important;
    width:100% !important;
    margin-top:10px !important;
    padding-top:8px !important;
    border-top:1px solid rgba(255,214,0,.22) !important;
    opacity:0 !important;
    visibility:hidden !important;
    max-height:0 !important;
    overflow:hidden !important;
    color:#f2f2f2 !important;
    font-size:11px !important;
    line-height:1.35 !important;
    letter-spacing:.13em !important;
    white-space:normal !important;
    transform:translateY(-4px) !important;
    transition:opacity .25s ease, transform .25s ease, max-height .25s ease, visibility .25s ease !important;
  }

  .lab-i18n-top-drawer.nopnj-i18n-mobile-active .i18n-reveal{
    opacity:1 !important;
    visibility:visible !important;
    max-height:80px !important;
    transform:translateY(0) !important;
  }
}

@media(max-width:760px){
  .nopnj-mobile-break-camp{
    display:block !important;
  }
}

@supports (-webkit-touch-callout: none){
  @media(max-width:900px){
    .lab-signal-text-card.nopnj-apple-signal-active .signal-text-glitch p,
    .lab-signal-text-card.nopnj-apple-signal-active .signal-text-glitch p::before,
    .lab-signal-text-card.nopnj-apple-signal-active .signal-text-glitch p::after{
      animation-play-state:running !important;
    }
  }
}

/* UI SYSTEM CANONICAL: header, nav, product carousel, product cards, status, footer */
:root {
  --status-soon: #FFD600;
  --status-planned: #60AFFF;
  --status-available: #8FE388;
  --home-header-height: 58px;
  --home-header-gap: 14px;
}

body {
  padding-top: calc(var(--home-header-height) + var(--home-header-gap));
}


/* ==========================================================================
   ZONE: HEADER / NAV
   Header shell, brand, navigation links, active/hover states.
   Values unchanged; marker added for cleanup navigation only.
   ========================================================================== */

body > header {
  position: fixed;
  inset: 0 0 auto;
  width: 100%;
  z-index: 5000;
  min-height: var(--home-header-height);
  overflow: visible;
  background: rgba(5, 5, 5, .92);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body > header > .shell.nav {
  width: min(1320px, calc(100% - 36px));
  max-width: min(1320px, calc(100% - 36px));
  min-height: 76px;
  height: auto;
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  overflow: visible;
}

body > header .brand,
body > header .brand * {
  box-sizing: border-box;
}

body > header .brand {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  position: relative;
  overflow: visible;
  min-width: 0;
  color: var(--text);
  font-weight: 950;
  letter-spacing: 0;
  font-size: 22px;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  isolation: isolate;
}

body > header .brand-mark {
  display: none;
}

body > header .brand-label {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
  max-width: min(360px, calc(100vw - 2.75rem));
  color: inherit;
}

body > header .brand-main {
  display: block;
  color: var(--text);
  font-size: inherit;
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.06em;
}

body > header .brand-declinaison {
  display: block;
  position: static;
  width: max-content;
  max-width: calc(100vw - 4rem);
  color: rgba(242,242,242,.84);
  font-size: clamp(.54rem, .72vw, .68rem);
  font-weight: 900;
  letter-spacing: .07em;
  line-height: 1;
  text-transform: uppercase;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .18s ease, transform .18s ease;
}

@media (hover: hover) and (pointer: fine) {
  body > header .brand:hover .brand-declinaison,
  body > header .brand:focus-visible .brand-declinaison {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (hover: none), (pointer: coarse) {
  body > header .brand.is-brand-active .brand-declinaison {
    opacity: 1;
    transform: translateY(0);
  }
}

body > header .nav-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

body > header .nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  transition: color .18s ease;
}

body > header .nav-links a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 1px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .18s ease;
}

body > header .nav-links a:hover,
body > header .nav-links a:focus-visible,
body > header .nav-links a.is-active {
  color: var(--text);
  outline: none;
}

body > header .nav-links a:hover::after,
body > header .nav-links a:focus-visible::after,
body > header .nav-links a.is-active::after {
  transform: scaleX(1);
}

#manifeste,
#pieces,
#demander,
#contact {
  scroll-margin-top: calc(var(--home-header-height) + 24px);
}

body > .prelaunch-notice {
  margin-top: 18px;
}


/* ==========================================================================
   ZONE: PRODUCTS / CAROUSEL
   Section 3 product carousel, product slides, product grid, carousel keyframes.
   Values unchanged; marker added for cleanup navigation only.
   ========================================================================== */

.nopnj-product-carousel {
  position: relative;
  overflow: hidden;
  margin-top: 34px;
  border: 1px solid rgba(255,214,0,.18);
  background: linear-gradient(180deg, rgba(255,214,0,.045), rgba(255,255,255,.018));
  padding: 22px 0;
}

.nopnj-carousel-track {
  display: flex;
  gap: 18px;
  width: max-content;
  padding-inline: 0;
  animation: nopnjProductCarouselSeamless 42s linear infinite;
}

.nopnj-product-slide {
  width: min(64vw, 310px);
  min-height: 360px;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 22px;
  background: rgba(10,10,10,.74);
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.nopnj-product-image {
  flex: 1;
  min-height: 210px;
  margin-bottom: 22px;
  border: 1px solid rgba(255,214,0,.28);
  background: linear-gradient(135deg, rgba(255,214,0,.08), transparent 40%), rgba(255,255,255,.025);
  transform: rotate(-4deg);
}

.nopnj-product-slide h3 {
  margin: 0 0 6px;
  font-size: clamp(26px, 3vw, 42px);
  line-height: .9;
  text-transform: uppercase;
  letter-spacing: -.055em;
}

.nopnj-product-slide p {
  margin: 0;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 13px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

#pieces.shell {
  max-width: min(1320px, calc(100vw - 64px));
}

.product-card {
  min-height: 760px;
  padding: clamp(24px, 2.6vw, 34px);
  background: radial-gradient(circle at 85% 8%, rgba(255,214,0,.105), transparent 28%), linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.008)), #0b0b0b;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.product-card::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255,255,255,.055);
  pointer-events: none;
}

.product-card::after,
article.card.span4::after,
article.card.span6::after {
  content: none;
  display: none;
}

.product-card .product-signal {
  position: relative;
  top: auto;
  right: auto;
  z-index: 2;
  display: block;
  width: fit-content;
  margin: 0 0 10px;
  padding: 0;
  color: rgba(255,214,0,.18);
  font-size: clamp(54px, 5vw, 76px);
  font-kerning: none;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "kern" 0;
  line-height: .74;
  letter-spacing: .015em;
  white-space: nowrap;
  word-spacing: normal;
  text-rendering: geometricPrecision;
  transform: none;
  overflow: visible;
}

.product-card .product-index {
  position: relative;
  z-index: 3;
  display: inline-flex;
  width: fit-content;
  margin: 0 0 24px;
  transform: none;
}

.product-card h3 {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--text);
  font-size: clamp(28px, 3vw, 46px);
  line-height: .9;
  letter-spacing: -.07em;
  text-transform: uppercase;
}

.product-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

.product-meta {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.product-meta span {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 7px 10px;
  color: rgba(242,242,242,.68);
  background: rgba(255,255,255,.04);
  font-size: 12px;
  font-weight: 850;
}

.product-lines {
  position: relative;
  z-index: 4;
  list-style: none;
  padding: 0;
  margin: auto 0 0;
  display: grid;
  gap: 18px;
}

.product-lines li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px 12px;
  min-height: 158px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255,255,255,.035);
}

.product-lines li::after {
  content: "";
  display: block;
  grid-column: 1 / -1;
  justify-self: center;
  width: clamp(92px, 7.2vw, 122px);
  aspect-ratio: 1 / 1;
  margin-top: 8px;
  border: 1px solid rgba(255,214,0,.28);
  background: rgba(255,214,0,.014);
  box-shadow: inset 0 0 0 1px rgba(255,214,0,.035), 0 0 24px rgba(255,214,0,.025);
  transform: rotate(-8deg);
  pointer-events: none;
}

.product-lines strong,
.product-lines em {
  position: relative;
  z-index: 2;
}

.product-lines strong {
  color: var(--text);
  font-size: 14px;
  letter-spacing: -.02em;
}

.product-lines em,
.status,
[data-status] {
  font-style: normal;
  color: rgba(242,242,242,.66);
}

[data-status="soon"] { color: var(--status-soon); }
[data-status="planned"] { color: var(--status-planned); }
[data-status="available"] { color: var(--status-available); }

.home-products-action {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.home-products-action .btn {
  min-height: 44px;
}

.home-products-note {
  color: rgba(242,242,242,.62);
  font-size: 14px;
  line-height: 1.55;
  max-width: 760px;
  margin: 10px 0 0;
}

article.card.span4,
article.card.span6 {
  padding-bottom: 22px;
}

article.card.span4 .tags,
article.card.span6 .tags {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  gap: 12px;
  margin-top: 18px;
}

article.card.span4 .tags span,
article.card.span6 .tags span {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  gap: 10px;
  min-height: 132px;
  padding: 11px;
  border-radius: 16px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.11);
}

article.card.span4 .tags span::after,
article.card.span6 .tags span::after {
  content: "";
  display: block;
  width: clamp(82px, 7vw, 106px);
  aspect-ratio: 1 / 1;
  background: rgba(255,214,0,.014);
  border: 1px solid rgba(255,214,0,.26);
  box-shadow: inset 0 0 0 1px rgba(255,214,0,.035), 0 0 22px rgba(255,214,0,.025);
  transform: rotate(-8deg);
  pointer-events: none;
}

.btns,
.btn,
.tags,
.product-lines {
  position: relative;
  z-index: 4;
}


/* ==========================================================================
   ZONE: FOOTER
   Footer layout, legal links, Facebook link hover accent.
   Values unchanged; marker added for cleanup navigation only.
   ========================================================================== */

footer {
  margin-top: 56px;
  padding: 28px 0 36px;
  border-top: 1px solid var(--line);
  color: rgba(242,242,242,.48);
  font-size: 13px;
  text-align: center;
}

footer .shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

footer .nopnj-footer-brand {
  color: rgba(242,242,242,.58);
  font-weight: 650;
  letter-spacing: .02em;
}

footer .nopnj-footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

footer .nopnj-footer-links a {
  color: rgba(242,242,242,.54);
  text-decoration: none;
  text-underline-offset: 0;
  font-weight: 650;
  transition: color .18s ease, opacity .18s ease;
}

footer .nopnj-footer-links a:hover,
footer .nopnj-footer-links a:focus-visible {
  color: var(--yellow);
  outline: none;
}

footer .nopnj-footer-sep {
  color: rgba(255,214,0,.34);
}

@keyframes nopnjProductCarouselSeamless {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}


/* ==========================================================================
   ZONE: RESPONSIVE
   Media queries and viewport-specific adjustments.
   Values unchanged; marker added for cleanup navigation only.
   ========================================================================== */

@media (max-width: 1120px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-card { min-height: 720px; }
  .product-lines li::after { width: 118px; }
}

@media (max-width: 760px) {
  body > header { min-height: 56px; }

  body > header > .shell.nav {
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
    min-height: 56px;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    overflow: hidden;
  }

  body > header .brand {
    gap: 2px;
    min-height: 56px;
    font-size: 13px;
    line-height: 1;
  }

  body > header .brand-mark {
    width: 11px;
    height: 11px;
    margin-bottom: 1px;
  }

  body > header .brand-label {
    max-width: calc(100vw - 2.75rem);
    gap: 2px;
  }

  body > header .brand-declinaison {
    max-width: calc(100vw - 2.75rem);
    font-size: .44rem;
    letter-spacing: .035em;
  }
body > header .nav-links {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: 100%;
    height: 56px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body > header .nav-links::-webkit-scrollbar { display: none; }

  body > header .nav-links a {
    flex: 0 0 auto;
    height: auto;
    padding: 0 0 8px;
    white-space: nowrap;
    font-size: 11.5px;
    line-height: 1;
  }

  body > header .nav-links a::after {
    left: 0;
    right: 0;
    bottom: 0;
  }

  body > .prelaunch-notice { margin-top: 14px; }
  .nopnj-product-carousel { margin-top: 24px; }
  .nopnj-product-slide { width: 78vw; min-height: 360px; }
  .nopnj-product-image { min-height: 220px; }
  #pieces.shell { max-width: calc(100vw - 32px); }
  .product-grid { grid-template-columns: 1fr; }
  .product-card { min-height: auto; }
  .product-card .product-signal { line-height: .92; margin-bottom: 16px; }
  .product-lines li { min-height: 148px; }
  .product-lines li::after { width: 104px; }
  article.card.span4 .tags,
  article.card.span6 .tags { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
  article.card.span4 .tags span,
  article.card.span6 .tags span { min-height: 122px; }
  article.card.span4 .tags span::after,
  article.card.span6 .tags span::after { width: 88px; }
}

@media (min-width:761px){
  body > .prelaunch-notice{
    margin-top:23.25px !important;
  }
}

@media (max-width:820px){

  /* Neutralisation des couches glitch sur mobile */
  body .lab-signal-text-card .signal-text-glitch p::before,
  body .lab-signal-text-card .signal-text-glitch p::after{
    content:none !important;
    opacity:0 !important;
    animation:none !important;
  }

  /* Base mobile propre */
  body .lab-signal-text-card .signal-text-glitch p{
    color:rgba(242,242,242,.92) !important;
    letter-spacing:.02em !important;
    line-height:1.68 !important;
    text-shadow:none !important;
    transform:none;
    opacity:1;
    -webkit-clip-path:inset(0 0 0 0);
    clip-path:inset(0 0 0 0);
    will-change:opacity, transform, clip-path !important;
    animation-play-state:running !important;
  }

  /* Alternance gauche / droite */
  body .lab-signal-text-card .signal-text-glitch p:nth-of-type(odd){
    animation:nopnjP271SweepRevealLeft 5.4s cubic-bezier(.22,.8,.24,1) infinite both !important;
  }

  body .lab-signal-text-card .signal-text-glitch p:nth-of-type(even){
    animation:nopnjP271SweepRevealRight 5.4s cubic-bezier(.22,.8,.24,1) infinite both !important;
  }

  /* Décalage ligne par ligne */
  body .lab-signal-text-card .signal-text-glitch p:nth-of-type(1){ animation-delay:0s !important; }
  body .lab-signal-text-card .signal-text-glitch p:nth-of-type(2){ animation-delay:.34s !important; }
  body .lab-signal-text-card .signal-text-glitch p:nth-of-type(3){ animation-delay:.68s !important; }
  body .lab-signal-text-card .signal-text-glitch p:nth-of-type(4){ animation-delay:1.02s !important; }
  body .lab-signal-text-card .signal-text-glitch p:nth-of-type(5){ animation-delay:1.36s !important; }
}

@keyframes nopnjP271SweepRevealLeft{
  0%,6%{
    opacity:0;
    transform:translateX(-12px);
    -webkit-clip-path:inset(0 100% 0 0);
    clip-path:inset(0 100% 0 0);
  }
  22%{
    opacity:1;
    transform:translateX(0);
    -webkit-clip-path:inset(0 0 0 0);
    clip-path:inset(0 0 0 0);
  }
  78%{
    opacity:1;
    transform:translateX(0);
    -webkit-clip-path:inset(0 0 0 0);
    clip-path:inset(0 0 0 0);
  }
  100%{
    opacity:0;
    transform:translateX(-8px);
    -webkit-clip-path:inset(0 100% 0 0);
    clip-path:inset(0 100% 0 0);
  }
}

@keyframes nopnjP271SweepRevealRight{
  0%,6%{
    opacity:0;
    transform:translateX(12px);
    -webkit-clip-path:inset(0 0 0 100%);
    clip-path:inset(0 0 0 100%);
  }
  22%{
    opacity:1;
    transform:translateX(0);
    -webkit-clip-path:inset(0 0 0 0);
    clip-path:inset(0 0 0 0);
  }
  78%{
    opacity:1;
    transform:translateX(0);
    -webkit-clip-path:inset(0 0 0 0);
    clip-path:inset(0 0 0 0);
  }
  100%{
    opacity:0;
    transform:translateX(8px);
    -webkit-clip-path:inset(0 0 0 100%);
    clip-path:inset(0 0 0 100%);
  }
}

/* 1) Bloc marque -> section comprendre */
body .lab-brand-block.no-pnj-lab-patch{
  margin-bottom:clamp(24px,2.6vw,40px) !important;
}

/* 2) Entrée de la section "Le groupe appuie" */
body #comprendre.shell{
  padding-top:clamp(24px,3.2vw,52px) !important;
  padding-bottom:clamp(28px,3.8vw,60px) !important;
}

/* 3) Entrée de la section "Pas des goodies" */
body #porter.shell{
  padding-top:clamp(28px,3.8vw,60px) !important;
}

body #porter.shell{
  padding-bottom:clamp(28px,3.8vw,60px) !important;
}

body #demander.shell{
  padding-top:clamp(28px,3.8vw,60px) !important;
}

/* Transition 1 : bloc marque -> Comprendre
   Déjà définie par P272, on la confirme pour verrouiller la référence. */
body .lab-brand-block.no-pnj-lab-patch{
  margin-bottom:clamp(24px,2.6vw,40px) !important;
}

body #comprendre.shell{
  padding-top:clamp(24px,3.2vw,52px) !important;
}

/* Transition 2 : Comprendre -> Porter */
body #comprendre.shell{
  padding-bottom:clamp(24px,2.6vw,40px) !important;
}

body #porter.shell{
  padding-top:clamp(24px,3.2vw,52px) !important;
}

/* Transition 3 : Porter -> Demander */
body #porter.shell{
  padding-bottom:clamp(24px,2.6vw,40px) !important;
}

body #demander.shell{
  padding-top:clamp(24px,3.2vw,52px) !important;
}

main .viewport-active.nopnj-egg-stickers > .nopnj-rich-egg > i{opacity:.95 !important;animation:nopnj111Scan .95s ease-in-out infinite !important;}
main .viewport-active.nopnj-egg-stickers > .nopnj-rich-egg > b{opacity:1 !important;animation:nopnj111Dot .95s ease-in-out infinite !important;}

main .viewport-active.nopnj-egg-patchs > .nopnj-rich-egg > i{opacity:1 !important;animation:nopnj111Stitch .72s linear infinite !important;}
main .viewport-active.nopnj-egg-patchs > .nopnj-rich-egg > b{opacity:.9 !important;animation:nopnj111Needle .72s ease-in-out infinite !important;}

main .viewport-active.nopnj-egg-mug > .nopnj-rich-egg > i{opacity:.9 !important;animation:nopnj111SteamA 1.1s ease-in-out infinite !important;}
main .viewport-active.nopnj-egg-mug > .nopnj-rich-egg > b{opacity:.72 !important;animation:nopnj111SteamB 1.1s ease-in-out infinite !important;}

main .viewport-active.nopnj-egg-textile > .nopnj-rich-egg > i{opacity:1 !important;animation:nopnj111ThreadA .85s ease-in-out infinite !important;}
main .viewport-active.nopnj-egg-textile > .nopnj-rich-egg > b{opacity:.92 !important;animation:nopnj111ThreadB .85s ease-in-out infinite !important;}

main .viewport-active.nopnj-egg-images > .nopnj-rich-egg > i,
main .viewport-active.nopnj-egg-interest > .nopnj-rich-egg > i{
opacity:.9 !important;
animation:nopnj111Ring .95s ease-in-out infinite !important;
}

main .viewport-active.nopnj-egg-images > .nopnj-rich-egg > b,
main .viewport-active.nopnj-egg-interest > .nopnj-rich-egg > b{
opacity:1 !important;
animation:nopnj111Dot .95s ease-in-out infinite !important;
}

main .viewport-active.nopnj-egg-reply > .nopnj-rich-egg > i{
opacity:.92 !important;
animation:nopnj111ReplyA 1s ease-in-out infinite !important;
}

main .viewport-active.nopnj-egg-reply > .nopnj-rich-egg > b{
opacity:.72 !important;
animation:nopnj111ReplyB 1s ease-in-out infinite !important;
}

main .viewport-active.nopnj-egg-payment > .nopnj-rich-egg > i{
opacity:.92 !important;
animation:nopnj111LockBody .9s ease-in-out infinite !important;
}

main .viewport-active.nopnj-egg-payment > .nopnj-rich-egg > b{
opacity:.82 !important;
animation:nopnj111LockHook .9s ease-in-out infinite !important;
}

@media(max-width:900px){
  body main .hero-art .hero-tilt-axis{
    width:min(82vw, 330px) !important;
    margin:0 auto !important;
    transform:rotate(-7deg) !important;
    transform-origin:center center !important;
  }

  body main .hero-art .hero-tilt-axis .hero-frame{
    width:100% !important;
    aspect-ratio:1 / 1 !important;
    position:relative !important;
    overflow:hidden !important;
    margin:0 auto !important;
  }

  body main .hero-art .hero-tilt-axis .hero-frame img{
    position:absolute !important;
    top:50% !important;
    left:50% !important;
    width:112% !important;
    height:112% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center center !important;
    transform:translate(-50%, -50%) rotate(7deg) !important;
    transform-origin:center center !important;
  }

  body main .hero-art .hero-tilt-axis .hero-ghost-word{
    width:100% !important;
    text-align:center !important;
    margin:8px auto 0 !important;
    transform:none !important;
    font-size:clamp(48px, 16vw, 72px) !important;
    line-height:.9 !important;
  }
}

@media(max-width:760px){
  body main .lab-i18n-top-drawer .i18n-arrow{
    display:none !important;
  }

  body main .lab-i18n-top-drawer .i18n-reveal{
    display:block !important;
    position:static !important;
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    max-height:0 !important;
    margin:10px 0 0 0 !important;
    padding:0 !important;
    overflow:hidden !important;
    opacity:0 !important;
    visibility:hidden !important;
    color:#f2f2f2 !important;
    font-size:12px !important;
    line-height:1.35 !important;
    letter-spacing:.08em !important;
    white-space:normal !important;
    text-indent:0 !important;
    clip-path:none !important;
    transform:none !important;
    text-shadow:none !important;
  }

  body main .lab-i18n-top-drawer.nopnj-i18n-mobile-active .i18n-reveal{
    max-height:96px !important;
    padding-top:8px !important;
    border-top:1px solid rgba(255,214,0,.22) !important;
    opacity:1 !important;
    visibility:visible !important;
  }
}

@media (hover:none), (pointer:coarse) {

  .signal-text-glitch p{
    -webkit-tap-highlight-color: transparent !important;
  }

  .signal-text-glitch p.nopnj-touch-reveal{
    z-index:6 !important;
    color:rgba(242,242,242,.96) !important;
    letter-spacing:.026em !important;
    transform:scale(1.024) !important;
    text-shadow:
      .35px 0 rgba(96,175,255,.18),
     -.35px 0 rgba(255,214,0,.14) !important;
  }

  .signal-text-glitch p.nopnj-touch-reveal::before,
  .signal-text-glitch p.nopnj-touch-reveal::after{
    opacity:0 !important;
    filter:none !important;
    transform:translate(0,0) !important;
    animation:none !important;
  }
}

.hero-dot{
  display:inline-block !important;
  width:.16em !important;
  height:.16em !important;
  margin-left:.085em !important;
  vertical-align:.02em !important;
  background:#FFD600 !important;
  color:transparent !important;
  border-radius:0 !important;
  line-height:1 !important;
  font-size:1em !important;
  letter-spacing:0 !important;
  text-shadow:
    0 0 12px rgba(255,214,0,.34),
    0 0 24px rgba(255,214,0,.16) !important;
}

@media(max-width:760px){
  .hero-dot{
    width:.16em !important;
    height:.16em !important;
    border-radius:0 !important;
    vertical-align:.02em !important;
  }
}

.hero-dot{
  position:relative !important;
  display:inline-block !important;
  width:.16em !important;
  height:.16em !important;
  margin-left:.10em !important;
  vertical-align:-.055em !important;
  overflow:hidden !important;
  background:#FFD600 !important;
  color:transparent !important;
  border-radius:0 !important;
  font-size:1em !important;
  line-height:1 !important;
  text-indent:0 !important;
  text-shadow:none !important;
  box-shadow:
    0 0 12px rgba(255,214,0,.34),
    0 0 24px rgba(255,214,0,.16) !important;
}

.hero-dot::before,
.hero-dot::after{
  content:none !important;
  display:none !important;
}

/* Univers anchor target: keep section 1 clear below fixed header */
#univers{
  scroll-margin-top:calc(var(--home-header-height, 58px) + var(--home-header-gap, 14px) + 18px);
}

/* Align home nav right edge with hero/photo right edge */
@media (min-width: 761px){
  body > header[data-testid="site.header"] > .shell.nav{
    padding-right:50px;
    box-sizing:border-box;
  }
}

/* Align home header content with hero visual edges */
@media (min-width: 761px){
  body > header[data-testid="site.header"] > .shell.nav{
    padding-left:50px;
    padding-right:50px;
    box-sizing:border-box;
  }
}

/* Align prelaunch notice with home hero shell */
body > .prelaunch-notice{
  width:min(var(--max), calc(100% - 36px)) !important;
  max-width:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}

@media (max-width:760px){
  body > .prelaunch-notice{
    width:calc(100% - 32px) !important;
  }
}


/* === carousel asset: casquette en cours === */
.nopnj-product-image[data-asset="en-cours"]{
  background-image:url('/assets/products/en-cours.webp?v=3') !important;
  background-size:contain !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}


/* === carousel casquette asset cover + subtle motion === */
.nopnj-product-image[data-asset="en-cours"]{
  background-image:url('/assets/products/en-cours.webp?v=3') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  overflow:hidden !important;
  animation:nopnjCasquetteSignalDrift 7.5s ease-in-out infinite alternate !important;
  filter:saturate(1.14) contrast(1.08) brightness(1.02) !important;
}

@keyframes nopnjCasquetteSignalDrift{
  0%{
    background-position:center 46%;
    filter:saturate(1.08) contrast(1.04) brightness(.96);
  }
  48%{
    background-position:center 54%;
    filter:saturate(1.28) contrast(1.16) brightness(1.07);
  }
  100%{
    background-position:center 50%;
    filter:saturate(1.14) contrast(1.10) brightness(1.02);
  }
}

@media (prefers-reduced-motion: reduce){
  .nopnj-product-image[data-asset="en-cours"]{
    animation:none !important;
  }
}


/* === carousel casquette upright visual inside tilted frame === */
.nopnj-product-image[data-asset="en-cours"]{
  position:relative !important;
  overflow:hidden !important;
  background:
    linear-gradient(135deg, rgba(255,214,0,.08), transparent 40%),
    rgba(255,255,255,.025) !important;
  animation:none !important;
  filter:none !important;
}

.nopnj-product-image[data-asset="en-cours"]::before{
  content:"" !important;
  position:absolute !important;
  inset:-18% -16% !important;
  background-image:url('/assets/products/en-cours.webp?v=3') !important;
  background-size:cover !important;
  background-position:center 50% !important;
  background-repeat:no-repeat !important;
  transform:rotate(4deg) scale(1.14) !important;
  transform-origin:center !important;
  filter:saturate(1.2) contrast(1.12) brightness(1.05) !important;
  animation:nopnjCasquetteUprightSignal 4.8s ease-in-out infinite alternate !important;
  will-change:transform, filter !important;
}

.nopnj-product-image[data-asset="en-cours"]::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background:linear-gradient(180deg, rgba(255,214,0,.10), transparent 28%, rgba(0,0,0,.16)) !important;
  mix-blend-mode:screen !important;
  opacity:.36 !important;
}

@keyframes nopnjCasquetteUprightSignal{
  0%{
    transform:rotate(4deg) scale(1.14) translate3d(0,-3%,0) !important;
    filter:saturate(1.08) contrast(1.05) brightness(.96) !important;
  }
  45%{
    transform:rotate(4deg) scale(1.19) translate3d(0,4%,0) !important;
    filter:saturate(1.42) contrast(1.22) brightness(1.12) !important;
  }
  100%{
    transform:rotate(4deg) scale(1.16) translate3d(0,0,0) !important;
    filter:saturate(1.22) contrast(1.12) brightness(1.04) !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .nopnj-product-image[data-asset="en-cours"]::before{
    animation:none !important;
  }
}


/* === carousel casquette MP4 loop inside tilted frame === */
.nopnj-product-image[data-asset="en-cours"]{
  position:relative !important;
  overflow:hidden !important;
  background:linear-gradient(135deg, rgba(255,214,0,.08), transparent 40%), rgba(255,255,255,.025) !important;
  animation:none !important;
  filter:none !important;
}
.nopnj-product-image[data-asset="en-cours"]::before,
.nopnj-product-image[data-asset="en-cours"]::after{
  content:none !important;
  display:none !important;
}
.nopnj-product-image[data-asset="en-cours"] > .nopnj-product-video{
  position:absolute !important;
  inset:-18% -16% !important;
  width:132% !important;
  height:136% !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:rotate(4deg) scale(1.08) !important;
  transform-origin:center !important;
  display:block !important;
  filter:saturate(1.18) contrast(1.12) brightness(1.04) !important;
  pointer-events:none !important;
}


/* === casquette video scale correction === */
.nopnj-product-image[data-asset="en-cours"] > .nopnj-product-video{
  inset:-34% -42% !important;
  width:184% !important;
  height:176% !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:rotate(4deg) scale(1.22) translate3d(0,2%,0) !important;
  transform-origin:center center !important;
}


/* === casquette video yellow NO PNJ grade === */
.nopnj-product-image[data-asset="en-cours"] > .nopnj-product-video{
  filter:grayscale(.28) sepia(.92) saturate(2.05) hue-rotate(6deg) brightness(1.08) contrast(1.34) drop-shadow(0 0 10px rgba(255,214,0,.18)) !important;
  opacity:.92 !important;
}

.nopnj-product-image[data-asset="en-cours"]::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background:
    linear-gradient(180deg, rgba(255,214,0,.20), transparent 38%, rgba(255,214,0,.10)),
    radial-gradient(circle at 52% 42%, rgba(255,214,0,.28), transparent 46%) !important;
  mix-blend-mode:color !important;
  opacity:.72 !important;
  z-index:2 !important;
}

.nopnj-product-image[data-asset="en-cours"] > .nopnj-product-video{
  z-index:1 !important;
}


/* === casquette video wide fill correction === */
.nopnj-product-image[data-asset="en-cours"] > .nopnj-product-video{
  inset:-28% -78% !important;
  width:256% !important;
  height:164% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:rotate(4deg) scaleX(1.38) scaleY(1.08) translate3d(0,1%,0) !important;
  transform-origin:center center !important;
}

.nopnj-product-image[data-asset="en-cours"]{
  background:rgba(255,214,0,.035) !important;
}


/* === carousel Textile MP4 loop same treatment as Casquette === */
.nopnj-product-image[data-asset="tshirt"]{
  position:relative !important;
  overflow:hidden !important;
  background:rgba(255,214,0,.035) !important;
  animation:none !important;
  filter:none !important;
}
.nopnj-product-image[data-asset="tshirt"]::before,
.nopnj-product-image[data-asset="tshirt"]::after{
  content:none !important;
  display:none !important;
}
.nopnj-product-image[data-asset="tshirt"] > .nopnj-product-video{
  position:absolute !important;
  inset:-28% -78% !important;
  width:256% !important;
  height:164% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center center !important;
  transform:rotate(4deg) scaleX(1.38) scaleY(1.08) translate3d(0,1%,0) !important;
  transform-origin:center center !important;
  display:block !important;
  filter:grayscale(.28) sepia(.92) saturate(2.05) hue-rotate(6deg) brightness(1.08) contrast(1.34) drop-shadow(0 0 10px rgba(255,214,0,.18)) !important;
  opacity:.92 !important;
  pointer-events:none !important;
}
.nopnj-product-image[data-asset="tshirt"]::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background:linear-gradient(180deg, rgba(255,214,0,.20), transparent 38%, rgba(255,214,0,.10)), radial-gradient(circle at 52% 42%, rgba(255,214,0,.28), transparent 46%) !important;
  mix-blend-mode:color !important;
  opacity:.72 !important;
  z-index:2 !important;
}

/* === carousel video subtle glitch treatment === */
.nopnj-product-image[data-asset="en-cours"] > .nopnj-product-video,
.nopnj-product-image[data-asset="tshirt"] > .nopnj-product-video{
  animation:nopnjCarouselVideoGlitch 2.8s steps(1,end) infinite !important;
  will-change:transform, filter, opacity !important;
}

.nopnj-product-image[data-asset="en-cours"]::before,
.nopnj-product-image[data-asset="tshirt"]::before{
  animation:nopnjCarouselVideoScan 1.9s linear infinite !important;
  mix-blend-mode:screen !important;
}

.nopnj-product-image[data-asset="en-cours"]::after,
.nopnj-product-image[data-asset="tshirt"]::after{
  animation:nopnjCarouselVideoChromatic 3.4s steps(1,end) infinite !important;
}

@keyframes nopnjCarouselVideoGlitch{
  0%, 88%, 100%{transform:translate3d(0,0,0) scale(1.18); filter:sepia(1) saturate(2.35) hue-rotate(2deg) contrast(1.42) brightness(1.02);}
  90%{transform:translate3d(1px,-1px,0) scale(1.185); filter:sepia(1) saturate(2.65) hue-rotate(-4deg) contrast(1.55) brightness(1.08);}
  91%{transform:translate3d(-2px,1px,0) scale(1.18); filter:sepia(1) saturate(2.1) hue-rotate(8deg) contrast(1.35) brightness(.98);}
  92%{transform:translate3d(0,0,0) scale(1.18);}
  96%{transform:translate3d(1px,0,0) scale(1.182);}
  97%{transform:translate3d(0,0,0) scale(1.18);}
}

@keyframes nopnjCarouselVideoScan{
  0%{opacity:.16; transform:translateY(-8%) scaleX(1.03);}
  50%{opacity:.28; transform:translateY(8%) scaleX(1.03);}
  100%{opacity:.16; transform:translateY(-8%) scaleX(1.03);}
}

@keyframes nopnjCarouselVideoChromatic{
  0%, 86%, 100%{opacity:.18; transform:translate3d(0,0,0);}
  89%{opacity:.34; transform:translate3d(2px,0,0);}
  90%{opacity:.22; transform:translate3d(-1px,1px,0);}
  92%{opacity:.18; transform:translate3d(0,0,0);}
}

@media (prefers-reduced-motion: reduce){
  .nopnj-product-image[data-asset="en-cours"] > .nopnj-product-video,
  .nopnj-product-image[data-asset="tshirt"] > .nopnj-product-video,
  .nopnj-product-image[data-asset="en-cours"]::before,
  .nopnj-product-image[data-asset="tshirt"]::before,
  .nopnj-product-image[data-asset="en-cours"]::after,
  .nopnj-product-image[data-asset="tshirt"]::after{
    animation:none !important;
  }
}

/* === carousel video visible glitch pass === */
.nopnj-product-image[data-asset="en-cours"] > .nopnj-product-video,
.nopnj-product-image[data-asset="tshirt"] > .nopnj-product-video{
  animation:nopnjCarouselVideoGlitchVisible 1.35s steps(1,end) infinite !important;
  filter:sepia(1) saturate(2.75) hue-rotate(4deg) contrast(1.55) brightness(1.06) !important;
  will-change:transform, filter, clip-path !important;
}

.nopnj-product-image[data-asset="en-cours"]::after,
.nopnj-product-image[data-asset="tshirt"]::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:inherit !important;
  pointer-events:none !important;
  opacity:.28 !important;
  background:
    linear-gradient(90deg, rgba(255,214,0,.30), transparent 22%, rgba(255,255,255,.18) 52%, transparent 78%),
    repeating-linear-gradient(0deg, rgba(255,214,0,.16) 0 1px, transparent 1px 7px) !important;
  mix-blend-mode:screen !important;
  animation:nopnjCarouselVideoGlitchOverlay 1.35s steps(1,end) infinite !important;
}

@keyframes nopnjCarouselVideoGlitchVisible{
  0%, 70%, 100%{transform:translate3d(0,0,0) scale(1.18); clip-path:inset(0 0 0 0);}
  72%{transform:translate3d(4px,-2px,0) scale(1.19); clip-path:inset(8% 0 0 0); filter:sepia(1) saturate(3.2) hue-rotate(-10deg) contrast(1.75) brightness(1.16) !important;}
  74%{transform:translate3d(-5px,2px,0) scale(1.18); clip-path:inset(0 0 14% 0);}
  76%{transform:translate3d(2px,0,0) scale(1.19); clip-path:inset(34% 0 28% 0);}
  78%{transform:translate3d(0,0,0) scale(1.18); clip-path:inset(0 0 0 0);}
  90%{transform:translate3d(-3px,1px,0) scale(1.185); filter:sepia(1) saturate(3.6) hue-rotate(12deg) contrast(1.8) brightness(1.12) !important;}
  92%{transform:translate3d(3px,-1px,0) scale(1.18);}
  94%{transform:translate3d(0,0,0) scale(1.18);}
}

@keyframes nopnjCarouselVideoGlitchOverlay{
  0%, 68%, 100%{opacity:.16; transform:translate3d(0,0,0);}
  72%{opacity:.62; transform:translate3d(8px,0,0);}
  74%{opacity:.48; transform:translate3d(-10px,2px,0);}
  76%{opacity:.72; transform:translate3d(4px,-1px,0);}
  78%{opacity:.18; transform:translate3d(0,0,0);}
  90%{opacity:.52; transform:translate3d(-6px,0,0);}
  92%{opacity:.22; transform:translate3d(0,0,0);}
}

@media (prefers-reduced-motion: reduce){
  .nopnj-product-image[data-asset="en-cours"] > .nopnj-product-video,
  .nopnj-product-image[data-asset="tshirt"] > .nopnj-product-video,
  .nopnj-product-image[data-asset="en-cours"]::after,
  .nopnj-product-image[data-asset="tshirt"]::after{
    animation:none !important;
  }
}

/* === carousel video smooth loop reset mask === */
.nopnj-product-video.nopnj-video-loop-reset{
  opacity:.84 !important;
  transition:opacity .08s linear !important;
}

/* === carousel source order visual spacing: avoid duplicate video cards together === */
.nopnj-carousel-track .nopnj-product-slide[data-testid="home.products.tshirt-card"]{order:1 !important;}
.nopnj-carousel-track .nopnj-product-slide[data-testid="home.products.sticker-card"]{order:2 !important;}
.nopnj-carousel-track .nopnj-product-slide[data-testid="home.products.patch-card"]{order:3 !important;}
.nopnj-carousel-track .nopnj-product-slide[data-testid="home.products.patch2-card"]{order:4 !important;}
.nopnj-carousel-track .nopnj-product-slide[data-testid="home.products.casquette-card"]{order:5 !important;}
.nopnj-carousel-track .nopnj-product-slide[data-testid="home.products.mug-card"]{order:6 !important;}
.nopnj-carousel-track .nopnj-product-slide[data-testid="home.products.badges-card"]{order:7 !important;}
.nopnj-carousel-track .nopnj-product-slide[data-testid="home.products.tshirt-card.duplicate"]{order:8 !important;}
.nopnj-carousel-track .nopnj-product-slide[data-testid="home.products.sticker-card.duplicate"]{order:9 !important;}
.nopnj-carousel-track .nopnj-product-slide[data-testid="home.products.patch-card.duplicate"]{order:10 !important;}
.nopnj-carousel-track .nopnj-product-slide[data-testid="home.products.patch2-card.duplicate"]{order:11 !important;}
.nopnj-carousel-track .nopnj-product-slide[data-testid="home.products.casquette-card.duplicate"]{order:12 !important;}
.nopnj-carousel-track .nopnj-product-slide[data-testid="home.products.mug-card.duplicate"]{order:13 !important;}
.nopnj-carousel-track .nopnj-product-slide[data-testid="home.products.badges-card.duplicate"]{order:14 !important;}

/* === carousel en-cours static WebP replacement for former videos === */
.nopnj-product-image[data-asset="en-cours"],
.nopnj-product-image[data-asset="tshirt"]{
  background-image:url('/assets/products/en-cours.webp?v=3') !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  filter:sepia(1) saturate(2.2) hue-rotate(4deg) contrast(1.34) brightness(1.04) !important;
}

.nopnj-product-image[data-asset="en-cours"] > .nopnj-product-video,
.nopnj-product-image[data-asset="tshirt"] > .nopnj-product-video{
  display:none !important;
}

/* === shared prelaunch/banner typography: softer first-read weight === */
body > .prelaunch-notice,
body > .prelaunch-notice strong,
body > .prelaunch-notice .nopnj-prelaunch-copy,
.prelaunch-notice,
.prelaunch-notice strong,
.prelaunch-notice .nopnj-prelaunch-copy,
.pill.warn{
  font-weight:650 !important;
  letter-spacing:-.004em !important;
}

body > .prelaunch-notice strong,
.prelaunch-notice strong{
  font-weight:700 !important;
}


/* === carousel static assets subdued like pieces page === */
.nopnj-product-image[data-asset="en-cours"],
.nopnj-product-image[data-asset="tshirt"]{
  filter:grayscale(.72) sepia(.35) saturate(.72) brightness(.58) contrast(1.08) !important;
  opacity:.86 !important;
  mix-blend-mode:luminosity !important;
}

.nopnj-product-image[data-asset="en-cours"]::before,
.nopnj-product-image[data-asset="en-cours"]::after,
.nopnj-product-image[data-asset="tshirt"]::before,
.nopnj-product-image[data-asset="tshirt"]::after{
  filter:grayscale(.72) sepia(.35) saturate(.72) brightness(.58) contrast(1.08) !important;
  opacity:.86 !important;
  mix-blend-mode:luminosity !important;
}

.nopnj-product-image[data-asset="en-cours"]:hover,
.nopnj-product-image[data-asset="tshirt"]:hover,
.nopnj-product-slide:hover .nopnj-product-image[data-asset="en-cours"],
.nopnj-product-slide:hover .nopnj-product-image[data-asset="tshirt"]{
  filter:grayscale(.55) sepia(.42) saturate(.80) brightness(.64) contrast(1.10) !important;
}
/* === carousel static assets remove legacy video overlays === */
.nopnj-product-image[data-asset="en-cours"]::before,
.nopnj-product-image[data-asset="en-cours"]::after,
.nopnj-product-image[data-asset="tshirt"]::before,
.nopnj-product-image[data-asset="tshirt"]::after{
  content:none !important;
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  background:none !important;
  animation:none !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  pointer-events:none !important;
}
/* === carousel static assets hover light boost === */
.nopnj-product-image[data-asset="en-cours"]:hover,
.nopnj-product-image[data-asset="tshirt"]:hover,
.nopnj-product-slide:hover .nopnj-product-image[data-asset="en-cours"],
.nopnj-product-slide:hover .nopnj-product-image[data-asset="tshirt"],
.nopnj-product-slide:focus-within .nopnj-product-image[data-asset="en-cours"],
.nopnj-product-slide:focus-within .nopnj-product-image[data-asset="tshirt"]{
  filter:grayscale(.34) sepia(.48) saturate(.98) brightness(.78) contrast(1.16) !important;
  opacity:.96 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,214,0,.24),
    0 0 20px rgba(255,214,0,.12) !important;
}
/* === carousel global hover light contract === */
.nopnj-product-slide:hover .nopnj-product-image,
.nopnj-product-slide:focus-within .nopnj-product-image{
  border-color:rgba(255,214,0,.42) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,214,0,.16),
    0 0 18px rgba(255,214,0,.10) !important;
}

.nopnj-product-slide:hover .nopnj-product-image:not([data-asset="en-cours"]):not([data-asset="tshirt"]),
.nopnj-product-slide:focus-within .nopnj-product-image:not([data-asset="en-cours"]):not([data-asset="tshirt"]){
  filter:brightness(1.10) contrast(1.08) saturate(1.04) !important;
}
/* === hero-main2 optical light balance === */
body main .hero-art .hero-tilt-axis .hero-frame img[src="/assets/hero-main2.webp"]{
  filter:saturate(1.07) contrast(1.02) brightness(1.26) !important;
}

/* === Announcement banner mode ===
   Default: hidden. Add .nopnj-announcement-on on <html> or <body> to reactivate for a real announcement. */
html:not(.nopnj-announcement-on) body:not(.nopnj-announcement-on) > .prelaunch-notice{
  display:none !important;
}

html.nopnj-announcement-on body > .prelaunch-notice,
body.nopnj-announcement-on > .prelaunch-notice{
  display:flex !important;
}

/* === home section 1 single-line phrase === */
body main .lab-brand-lead .nopnj-keep-line{
  white-space:nowrap !important;
  display:inline-block;
  max-width:100%;
}

@media (min-width:700px) and (max-width:1180px){
  body main .lab-brand-lead .nopnj-keep-line{
    font-size:clamp(15px, 1.72vw, 20px) !important;
    letter-spacing:.015em !important;
  }
}

@media (max-width:699px){
  body main .lab-brand-lead .nopnj-keep-line{
    white-space:normal !important;
  }
}

/* === home section 1 mobile keep-line reset === */
@media (max-width:699px){
  body main .lab-brand-lead .nopnj-keep-line{
    display:inline !important;
    max-width:none !important;
    font-size:inherit !important;
    line-height:inherit !important;
    letter-spacing:inherit !important;
    white-space:normal !important;
  }
}

/* === home section 1 android font reset === */
@media (max-width:899px){
  body main .lab-brand-lead .nopnj-keep-line{
    display:inline !important;
    max-width:none !important;
    font-size:inherit !important;
    line-height:inherit !important;
    letter-spacing:inherit !important;
    white-space:normal !important;
  }
}

/* === home section 1 hands single-line phrase === */
body main .lab-brand-lead .nopnj-keep-line-hands{
  white-space:nowrap !important;
  display:inline-block;
  max-width:100%;
}

@media (min-width:900px) and (max-width:1180px){
  body main .lab-brand-lead .nopnj-keep-line-hands{
    font-size:clamp(15px, 1.72vw, 20px) !important;
    letter-spacing:.015em !important;
  }
}

@media (max-width:899px){
  body main .lab-brand-lead .nopnj-keep-line-hands{
    display:inline !important;
    max-width:none !important;
    font-size:inherit !important;
    line-height:inherit !important;
    letter-spacing:inherit !important;
    white-space:normal !important;
  }
}

/* === home section width harmonization: section 1 equals section 2 === */
body #comprendre.shell{
  width:min(1120px, calc(100% - 32px)) !important;
  max-width:min(1120px, calc(100% - 32px)) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* === home section width harmonization: real section 1 equals section 2 === */
body #univers.lab-brand-block.no-pnj-lab-patch{
  width:min(var(--max), calc(100% - 36px)) !important;
  max-width:min(var(--max), calc(100% - 36px)) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
@media (max-width:760px){
  body #univers.lab-brand-block.no-pnj-lab-patch{
    width:calc(100% - 24px) !important;
    max-width:calc(100% - 24px) !important;
  }
}

/* === home canonical section width: all main sections === */
body main > #univers.lab-brand-block,
body main > #comprendre.shell,
body main > #porter.shell,
body main > #demander.shell{
  width:min(var(--max), calc(100% - 36px)) !important;
  max-width:min(var(--max), calc(100% - 36px)) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}

body main > #porter.shell .nopnj-product-carousel,
body main > #porter.shell .nopnj-carousel-track{
  max-width:100% !important;
  box-sizing:border-box !important;
}

@media (max-width:760px){
  body main > #univers.lab-brand-block,
  body main > #comprendre.shell,
  body main > #porter.shell,
  body main > #demander.shell{
    width:calc(100% - 24px) !important;
    max-width:calc(100% - 24px) !important;
  }
}

@media (max-width:420px) and (orientation:portrait){
  body #univers .lab-brand-title{
    max-width:100% !important;
    overflow:visible !important;
    overflow-wrap:normal !important;
    text-wrap:balance;
    font-size:clamp(34px, 10.8vw, 46px) !important;
    letter-spacing:-.045em !important;
  }
}

body #univers .lab-brand-title .lab-title-dot{
  display:inline-block !important;
  position:relative !important;
  width:.16em !important;
  height:.16em !important;
  aspect-ratio:1 / 1 !important;
  margin-left:.10em !important;
  vertical-align:-.055em !important;
  overflow:hidden !important;
  background:#FFD600 !important;
  color:transparent !important;
  border-radius:0 !important;
  line-height:0 !important;
  letter-spacing:0 !important;
  text-indent:-999px !important;
  text-shadow:none !important;
  box-shadow:
    0 0 12px rgba(255,214,0,.34),
    0 0 24px rgba(255,214,0,.16) !important;
}

body #univers .lab-brand-title .lab-title-dot::before,
body #univers .lab-brand-title .lab-title-dot::after{
  content:none !important;
  display:none !important;
}

body #univers .lab-brand-title .nopnj-title-term{
  display:inline-flex !important;
  align-items:baseline !important;
  white-space:nowrap !important;
}

body #univers .lab-brand-title .nopnj-title-term .lab-title-dot{
  flex:0 0 auto !important;
}
/* === NO PNJ header Chau Philomene typography === */
@font-face{
  font-family:"chau-philomene-one.italic";
  src:url("/assets/fonts/ChauPhilomeneOne-Italic.woff") format("woff");
  font-style:italic;
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:"chau-philomene-one.regular";
  src:url("/assets/fonts/ChauPhilomeneOne-Regular.ttf") format("truetype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
body > header .brand-main{
  font-family:"chau-philomene-one.italic", Impact, "Arial Black", sans-serif!important;
  font-style:italic!important;
  font-weight:400!important;
  letter-spacing:.015em!important;
}
body > header .brand-declinaison{
  font-family:"chau-philomene-one.regular", Impact, "Arial Black", sans-serif!important;
  font-style:normal!important;
  font-weight:400!important;
  letter-spacing:.055em!important;
}

/* === home hero backdrop image === */
body main > .hero::before{
  content:"";
  position:absolute;
  z-index:0;
  display:block;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  pointer-events:none;
  background-image:
    linear-gradient(90deg,
      #050505 0%,
      rgba(5,5,5,.82) 8%,
      rgba(5,5,5,.30) 24%,
      rgba(5,5,5,.30) 76%,
      rgba(5,5,5,.82) 92%,
      #050505 100%),
    linear-gradient(180deg,
      rgba(5,5,5,.78) 0%,
      rgba(5,5,5,.28) 22%,
      rgba(5,5,5,.22) 68%,
      rgba(5,5,5,.82) 100%),
    url("/assets/home-hero-backdrop-pixel-plant-20260718.webp?v=20260718-pixel-plant");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  opacity:.82;
}

body main > .hero > .hero-copy,
body main > .hero > .hero-art{
  position:relative;
  z-index:1;
}

body main > .hero > .dev-block-label{
  position:absolute!important;
  z-index:20!important;
  grid-column:auto!important;
  grid-row:auto!important;
}

/* === home hero: backdrop only, no right-side hero image === */
body main > .hero{
  grid-template-columns:minmax(0, 760px)!important;
  justify-content:start!important;
}

body main > .hero > .hero-art{
  display:none!important;
}

/* === mobile section 1: restore tap glitch reveal === */
@media (hover:none), (pointer:coarse){
  body .lab-signal-text-card .signal-text-glitch p{
    color:rgba(242,242,242,.025)!important;
    letter-spacing:.07em!important;
    transform:none!important;
    filter:none!important;
    text-shadow:none!important;
    animation:none!important;
  }

  body .lab-signal-text-card .signal-text-glitch p:nth-of-type(odd),
  body .lab-signal-text-card .signal-text-glitch p:nth-of-type(even),
  body .lab-signal-text-card .signal-text-glitch p:nth-of-type(1),
  body .lab-signal-text-card .signal-text-glitch p:nth-of-type(2),
  body .lab-signal-text-card .signal-text-glitch p:nth-of-type(3),
  body .lab-signal-text-card .signal-text-glitch p:nth-of-type(4),
  body .lab-signal-text-card .signal-text-glitch p:nth-of-type(5),
  body .lab-signal-text-card .signal-text-glitch p:nth-of-type(6),
  body .lab-signal-text-card .signal-text-glitch p:nth-of-type(7),
  body .lab-signal-text-card .signal-text-glitch p:nth-of-type(8){
    animation:none!important;
    animation-delay:0s!important;
    animation-play-state:paused!important;
  }

  body .lab-signal-text-card .signal-text-glitch p::before,
  body .lab-signal-text-card .signal-text-glitch p::after{
    content:attr(data-text)!important;
    position:absolute!important;
    inset:0!important;
    pointer-events:none!important;
    white-space:pre-wrap!important;
    line-height:inherit!important;
    letter-spacing:inherit!important;
    font:inherit!important;
    text-transform:inherit!important;
    opacity:1!important;
    filter:none!important;
  }

  body .lab-signal-text-card .signal-text-glitch p::before{
    color:rgba(96,175,255,.145)!important;
    text-shadow:
      1px 0 rgba(96,175,255,.22),
      2px 0 rgba(96,175,255,.08),
      0 1px rgba(255,255,255,.035)!important;
    transform:translate(1.6px,-0.5px) skewX(-1deg)!important;
    animation:none!important;
  }

  body .lab-signal-text-card .signal-text-glitch p::after{
    color:rgba(255,214,0,.095)!important;
    text-shadow:
      -1px 0 rgba(255,214,0,.18),
      -2px 0 rgba(255,214,0,.06),
      0 -1px rgba(255,255,255,.025)!important;
    transform:translate(-1.4px,.5px) skewX(1deg)!important;
    animation:none!important;
  }

  body .lab-signal-text-card .signal-text-glitch p.nopnj-touch-reveal{
    z-index:6!important;
    color:rgba(242,242,242,.96)!important;
    letter-spacing:.026em!important;
    transform:scale(1.024)!important;
    filter:none!important;
    text-shadow:
      .35px 0 rgba(96,175,255,.18),
     -.35px 0 rgba(255,214,0,.14)!important;
    outline:none!important;
    animation:none!important;
  }

  body .lab-signal-text-card .signal-text-glitch p.nopnj-touch-reveal::before,
  body .lab-signal-text-card .signal-text-glitch p.nopnj-touch-reveal::after{
    content:attr(data-text)!important;
    position:absolute!important;
    inset:0!important;
    pointer-events:none!important;
    white-space:pre-wrap!important;
    line-height:inherit!important;
    letter-spacing:inherit!important;
    font:inherit!important;
    opacity:0!important;
    filter:none!important;
    transform:translate(0,0)!important;
    text-shadow:none!important;
    animation:none!important;
  }

  body .lab-signal-text-card .signal-text-glitch p.nopnj-touch-reveal::before{
    color:rgba(96,175,255,.145)!important;
  }

body .lab-signal-text-card .signal-text-glitch p.nopnj-touch-reveal::after{
    color:rgba(255,214,0,.095)!important;
  }
}

/* === section 1: soft visual in the unused landscape column === */
@media (orientation:landscape) and (min-width:640px){
  body #univers .nopnj-section1-signal-grid{
    position:relative;
    isolation:isolate;
    grid-template-columns:minmax(360px, .82fr) minmax(460px, 1.18fr) !important;
    gap:clamp(20px, 2.4vw, 30px) !important;
    align-items:center !important;
  }

  body #univers .nopnj-section1-signal-grid > .lab-signal-text-card{
    width:100% !important;
    max-width:clamp(500px, 42vw, 640px) !important;
    justify-self:start !important;
    align-self:center !important;
    display:flex !important;
    flex-direction:column !important;
    height:auto !important;
    min-height:clamp(420px, 34vw, 500px) !important;
    min-width:0 !important;
  }

  body #univers .nopnj-section1-signal-grid > .lab-signal-text-card h3{
    margin-bottom:0 !important;
    flex:0 0 auto !important;
  }

  body #univers .nopnj-section1-signal-grid > .lab-signal-text-card .signal-text-glitch{
    display:flex !important;
    flex:1 1 auto !important;
    flex-direction:column !important;
    justify-content:space-between !important;
    min-height:clamp(300px, 25vw, 370px) !important;
    padding-top:clamp(24px, 2.4vw, 38px) !important;
    padding-bottom:clamp(12px, 1.2vw, 20px) !important;
    box-sizing:border-box !important;
  }

  body #univers .nopnj-section1-signal-grid > .lab-signal-text-card .signal-text-glitch p{
    margin:0 !important;
  }

  body #univers .nopnj-section1-signal-grid::before{
    content:"";
    position:absolute;
    z-index:0;
    right:clamp(-10px, 1.6vw, 24px);
    bottom:clamp(68px, 8.8vw, 128px);
    width:clamp(240px, 32vw, 440px);
    height:clamp(240px, 34vw, 470px);
    pointer-events:none;
    user-select:none;
    opacity:.58;
    image-rendering:pixelated;
    background-image:
      linear-gradient(rgba(128,120,108,.34) 0 0),
      linear-gradient(rgba(96,92,84,.30) 0 0),
      linear-gradient(rgba(154,144,124,.28) 0 0),
      linear-gradient(rgba(116,108,96,.27) 0 0),
      linear-gradient(rgba(78,76,72,.28) 0 0),
      linear-gradient(rgba(142,132,114,.22) 0 0),
      linear-gradient(rgba(102,96,88,.21) 0 0),
      linear-gradient(rgba(170,158,134,.18) 0 0),
      linear-gradient(rgba(84,80,76,.20) 0 0),
      linear-gradient(rgba(126,118,104,.17) 0 0),
      linear-gradient(rgba(158,146,124,.14) 0 0),
      linear-gradient(rgba(96,90,84,.15) 0 0),
      linear-gradient(rgba(176,162,136,.12) 0 0),
      linear-gradient(rgba(118,110,98,.13) 0 0),
      linear-gradient(rgba(74,72,68,.15) 0 0),
      linear-gradient(rgba(150,140,120,.11) 0 0),
      linear-gradient(rgba(104,98,90,.11) 0 0);
    background-repeat:no-repeat;
    background-size:
      32px 24px,
      16px 16px,
      24px 24px,
      16px 24px,
      8px 8px,
      40px 24px,
      24px 16px,
      16px 16px,
      32px 24px,
      16px 16px,
      24px 24px,
      16px 16px,
      40px 32px,
      24px 16px,
      16px 24px,
      24px 16px,
      16px 16px;
    background-position:
      72% 92%,
      80% 88%,
      88% 85%,
      76% 80%,
      92% 78%,
      82% 68%,
      74% 63%,
      93% 60%,
      86% 50%,
      76% 46%,
      96% 41%,
      84% 35%,
      91% 25%,
      78% 20%,
      100% 17%,
      86% 10%,
      96% 4%;
    filter:none;
    mix-blend-mode:normal;
    animation:nopnjUniversSmokeParallax 6.8s steps(9,end) infinite;
  }

  body #univers .nopnj-section1-signal-grid::after{
    content:"";
    display:block;
    position:relative;
    z-index:1;
    align-self:stretch;
    min-width:0;
    min-height:clamp(280px, 38vw, 560px);
    overflow:visible;
    pointer-events:none;
    user-select:none;
    opacity:.98;
    background-image:
      url("/assets/univers-tv-detoure-20260718-anthracite-sheep.webp?v=univers-tv-anthracite-sheep-20260718"),
      radial-gradient(ellipse 56% 16% at 48% 46%, rgba(0,0,0,.72) 0%, rgba(0,0,0,.54) 34%, rgba(0,0,0,.22) 62%, transparent 78%);
    background-position:
      center 50%,
      center bottom;
    background-repeat:
      no-repeat,
      no-repeat;
    background-size:
      min(92%, 650px) auto,
      68% 22%;
    mix-blend-mode:normal;
    filter:
      drop-shadow(7px 8px 6px rgba(0,0,0,.40))
      drop-shadow(3px 3px 3px rgba(0,0,0,.28))
      brightness(1.03)
      contrast(1.08)
      saturate(1.04);
  }
}

@keyframes nopnjUniversSmokeParallax{
  0%{
    opacity:0;
    transform:translate3d(18px, 28px, 0) scale(.96);
    background-position:
      72% 100%,
      80% 96%,
      88% 93%,
      76% 88%,
      92% 86%,
      82% 76%,
      74% 71%,
      93% 68%,
      86% 58%,
      76% 54%,
      96% 49%,
      84% 43%,
      91% 33%,
      78% 28%,
      100% 25%,
      86% 18%,
      96% 12%;
  }

  18%{
    opacity:.42;
  }

  54%{
    opacity:.62;
    transform:translate3d(2px, -12px, 0) scale(1);
  }

  100%{
    opacity:0;
    transform:translate3d(-22px, -82px, 0) scale(1.08);
    background-position:
      62% 66%,
      77% 61%,
      94% 56%,
      68% 48%,
      100% 43%,
      78% 31%,
      64% 25%,
      96% 18%,
      84% 7%,
      70% 1%,
      103% -8%,
      82% -18%,
      94% -32%,
      67% -40%,
      108% -48%,
      78% -58%,
      100% -68%;
  }
}

@media (orientation:landscape) and (min-width:640px) and (max-width:760px){
  body #univers .nopnj-section1-signal-grid{
    grid-template-columns:minmax(0, 1.12fr) minmax(210px, .88fr)!important;
    gap:12px!important;
  }
}

/* === univers TV: Tiltstory-like depth only inside the screen, chassis stays fixed === */
@media (orientation:landscape) and (min-width:640px){
  body #univers .nopnj-section1-signal-grid::after{
    grid-column:2 !important;
    grid-row:1 !important;
    justify-self:center !important;
    align-self:center !important;
    width:min(92%, 650px) !important;
    aspect-ratio:1501 / 1239 !important;
    min-height:0 !important;
    height:auto !important;
    background-size:
      100% 100%,
      68% 22% !important;
    background-position:
      center center,
      center 96% !important;
  }

  body #univers .nopnj-section1-signal-grid::before{
    content:"" !important;
    position:absolute !important;
    grid-column:2 !important;
    grid-row:1 !important;
    right:clamp(181px, 17.1vw, 276px) !important;
    top:clamp(96px, 9vw, 146px) !important;
    z-index:2 !important;
    width:clamp(260px, 34.1vw, 483px) !important;
    aspect-ratio:794 / 814 !important;
    height:auto !important;
    min-height:0 !important;
    pointer-events:none !important;
    user-select:none !important;
    opacity:.92 !important;
    image-rendering:auto !important;
    background-image:url("/assets/univers-tv-detoure-20260718-anthracite-sheep.webp?v=univers-tv-anthracite-sheep-20260718") !important;
    background-repeat:no-repeat !important;
    background-size:189% auto !important;
    background-position:7.4% 19.2% !important;
    clip-path:polygon(1.5% 4.5%, 99% 0%, 97.5% 97%, 0% 93%) !important;
    mix-blend-mode:normal !important;
    filter:brightness(1.06) contrast(1.06) saturate(1.04) !important;
    animation:nopnjUniversTvScreenDepth 5.8s ease-in-out infinite !important;
    transition:
      background-position .42s cubic-bezier(.2,.8,.2,1),
      background-size .42s cubic-bezier(.2,.8,.2,1),
      filter .42s cubic-bezier(.2,.8,.2,1) !important;
  }

  body #univers .nopnj-section1-signal-grid:hover::before,
  body #univers .nopnj-section1-signal-grid:focus-within::before{
    background-size:202% auto !important;
    background-position:12.8% 16.2% !important;
    filter:brightness(1.16) contrast(1.13) saturate(1.10) !important;
    animation:nopnjUniversTvScreenTiltHover 2.8s ease-in-out infinite !important;
  }
}

@keyframes nopnjUniversTvScreenDepth{
  0%,
  100%{
    background-size:190% auto;
    background-position:7.0% 19.5%;
    filter:brightness(1.02) contrast(1.05) saturate(1.02);
  }

  28%{
    background-size:198% auto;
    background-position:11.2% 16.8%;
    filter:brightness(1.13) contrast(1.11) saturate(1.08);
  }

  55%{
    background-size:194% auto;
    background-position:8.8% 22.6%;
    filter:brightness(1.04) contrast(1.08) saturate(1.04);
  }

  78%{
    background-size:199% auto;
    background-position:4.9% 17.4%;
    filter:brightness(1.15) contrast(1.12) saturate(1.09);
  }
}

@keyframes nopnjUniversTvScreenTiltHover{
  0%,
  100%{
    background-size:200% auto;
    background-position:11.8% 16.8%;
    filter:brightness(1.14) contrast(1.12) saturate(1.09);
  }

  36%{
    background-size:204% auto;
    background-position:14.2% 15.1%;
    filter:brightness(1.20) contrast(1.15) saturate(1.12);
  }

  72%{
    background-size:201% auto;
    background-position:9.4% 18.9%;
    filter:brightness(1.11) contrast(1.10) saturate(1.07);
  }
}

body #univers .nopnj-tv-particle-screen{
  position:relative;
  grid-column:2!important;
  grid-row:1!important;
  justify-self:center!important;
  align-self:center!important;
  z-index:2;
  width:min(92%, 650px);
  aspect-ratio:1501 / 1239;
  min-height:0;
  height:auto;
  pointer-events:auto;
  user-select:none;
  image-rendering:pixelated;
  background:transparent;
  mix-blend-mode:normal;
  filter:brightness(1.08) contrast(1.08) saturate(1.04);
}

body #univers .nopnj-section1-signal-grid.has-tv-particles::before{
  display:none!important;
}

/* === section 2 lines: same line breaks on mobile, tablet and desktop === */
body #comprendre .understand-sheep-card p span{
  display:block!important;
}

body #comprendre .understand-sheep-card p span + span{
  margin-top:.28em!important;
}

/* === understand cards: compact single-line copy layout === */
body #comprendre .sheep-manifesto{
  grid-template-columns:repeat(4, minmax(0, 1fr))!important;
}

body #comprendre .sheep-manifesto div{
  min-height:0!important;
}

body #comprendre .sheep-manifesto > .understand-sheep-card{
  min-height:clamp(132px, 13vw, 176px)!important;
  padding:clamp(20px, 2.2vw, 30px) clamp(24px, 2.8vw, 38px)!important;
  display:flex!important;
  align-items:flex-start!important;
}

body #comprendre .understand-sheep-card > div:first-child{
  padding:0!important;
  width:100%!important;
}

body #comprendre .understand-sheep-card strong{
  margin-bottom:clamp(14px, 1.4vw, 20px)!important;
}

body #comprendre .understand-sheep-card p{
  line-height:1.45!important;
}

@media (max-width:900px){
  body #comprendre .sheep-manifesto{
    grid-template-columns:repeat(2, minmax(0, 1fr))!important;
  }
}

@media (max-width:560px){
  body #comprendre .sheep-manifesto{
    grid-template-columns:1fr!important;
  }
}

/* === carousel origin: keep single line on mobile and tablet === */
body #porter .nopnj-carousel-origin{
  display:block!important;
  white-space:nowrap!important;
  max-width:none!important;
  width:max-content!important;
  text-align:center!important;
  font-size:clamp(11px, 2.55vw, 16px)!important;
  line-height:1.45!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* === carousel asset frames: keep squares upright === */
body #porter .nopnj-product-image{
  transform:none!important;
}

body #porter .nopnj-product-image::before,
body #porter .nopnj-product-image::after,
body #porter .nopnj-product-image > .nopnj-product-video{
  transform:none!important;
}

/* === carousel uploaded product photos === */
body #porter .nopnj-product-image[data-asset="stickers"]{
  background-image:url('/assets/carousel/flamme-carr.webp?v=carousel-photos-20260707-1')!important;
}

body #porter .nopnj-product-image[data-asset="patchs"]{
  background-image:url('/assets/carousel/patch-carr.webp?v=carousel-photos-20260707-1')!important;
}

body #porter .nopnj-product-image[data-asset="patchs-2"]{
  background-image:url('/assets/carousel/patch2-carr.webp?v=carousel-photos-20260707-1')!important;
}

body #porter .nopnj-product-image[data-asset="mug"]{
  background-image:url('/assets/carousel/mug-carr.webp?v=carousel-photos-20260707-1')!important;
}

body #porter .nopnj-product-image[data-asset="badges"]{
  background-image:url('/assets/carousel/badge-carr.webp?v=carousel-photos-20260707-1')!important;
}

body #porter .nopnj-product-image[data-asset="stickers"],
body #porter .nopnj-product-image[data-asset="patchs"],
body #porter .nopnj-product-image[data-asset="patchs-2"],
body #porter .nopnj-product-image[data-asset="mug"],
body #porter .nopnj-product-image[data-asset="badges"]{
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}

/* === signal card: intentional colon line breaks === */
body #univers .signal-text-glitch p.nopnj-signal-split-line{
  white-space:normal!important;
}

body #univers .signal-text-glitch p.nopnj-signal-split-line > span{
  display:block!important;
}

body #univers .signal-text-glitch p.nopnj-signal-split-line::before,
body #univers .signal-text-glitch p.nopnj-signal-split-line::after{
  white-space:pre-line!important;
}

body #univers .signal-text-glitch p.nopnj-signal-split-being::before,
body #univers .signal-text-glitch p.nopnj-signal-split-being::after{
  content:"Trouver notre mani\00e8re d\2019\00eatre\00a0:\A libre, singuli\00e8re, ensemble."!important;
}

body #univers .signal-text-glitch p.nopnj-signal-split-forward::before,
body #univers .signal-text-glitch p.nopnj-signal-split-forward::after{
  content:attr(data-text)!important;
}

body #univers .signal-text-glitch p.nopnj-signal-split-forward{
  max-width:none!important;
  inline-size:max-content!important;
  min-inline-size:min(100%, 45ch)!important;
}

body #univers .signal-text-glitch p.nopnj-signal-split-forward > span{
  inline-size:max-content!important;
}

body #univers .signal-text-glitch p.nopnj-signal-split-forward > .nopnj-forward-copy > span{
  display:inline!important;
}

@media (orientation:portrait){
  body #univers .signal-text-glitch p.nopnj-signal-split-forward::before,
  body #univers .signal-text-glitch p.nopnj-signal-split-forward::after{
    content:"Une fa\00e7on d\2019avancer\00a0:\A lucides, pr\00e9sents,\A humains et bienveillants."!important;
  }

  body #univers .signal-text-glitch p.nopnj-signal-split-forward > .nopnj-forward-copy > span{
    display:block!important;
  }
}


@media (max-width:820px){
  body #univers .signal-text-glitch p.nopnj-signal-split-line{
    line-height:1.58!important;
  }
}

/* === mobile signal card: keep matching glitch/reveal line breaks === */
@media (max-width:820px){
  body #univers .signal-text-glitch p:nth-of-type(3),
  body #univers .signal-text-glitch p:nth-of-type(3)::before,
  body #univers .signal-text-glitch p:nth-of-type(3)::after{
    white-space:nowrap!important;
  }

  body #univers .signal-text-glitch p:nth-of-type(3){
    inline-size:max-content!important;
    max-inline-size:100%!important;
  }
}

/* === home background: remove global yellow aura === */
body::after{
  content:none!important;
  display:none!important;
  background:none!important;
  opacity:0!important;
  filter:none!important;
}

/* === home hero: soften pixel/photo transition from middle to top === */
body main > .hero::after{
  content:"";
  position:absolute;
  z-index:1;
  top:0;
  left:50%;
  width:100vw;
  height:58%;
  transform:translateX(-50%);
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(5,5,5,.10) 0%,
    rgba(255,214,0,.026) 46%,
    rgba(5,5,5,.13) 82%,
    transparent 100%);
  opacity:.82;
  -webkit-backdrop-filter:blur(7px) saturate(.95);
  backdrop-filter:blur(7px) saturate(.95);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
  mask-image:linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
}

body main > .hero > .hero-copy,
body main > .hero > .hero-art{
  position:relative;
  z-index:2;
}