/* NO PNJ consolidated release stylesheet. Source order is contractual. */ /* source: /assets/faq-inline-01.css?v=15b5d04d8bbb3480 */ /* === extracted faithful style block 01 from prod faq/index.html === */ :root{ --bg:#0b0b0b; --panel:#141414; --panel2:#1b1b1b; --text:#f2f2f2; --muted:#b9b9b9; --soft:#d8d8d8; --line:rgba(255,255,255,.12); --line2:rgba(255,255,255,.2); --yellow:#FFD600; --blue:#60AFFF; --orange:#D07A36; --red:#D94141; --shadow:0 22px 70px rgba(0,0,0,.42); --radius:22px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:Inter,Arial,Helvetica,sans-serif; color:var(--text); background: radial-gradient(circle at 18% 0%,rgba(255,214,0,.14),transparent 30%), radial-gradient(circle at 80% 8%,rgba(96,175,255,.11),transparent 32%), radial-gradient(circle at 50% 80%,rgba(208,122,54,.08),transparent 34%), linear-gradient(180deg,#070707 0%,#111 48%,#090909 100%); line-height:1.58; } a{color:inherit} .shell{ width:min(1120px,calc(100% - 36px)); margin:0 auto; } header.nopnj-site-header{ position:sticky; top:0; z-index:30; border-bottom:1px solid var(--line); background:rgba(10,10,10,.84); backdrop-filter:blur(16px); } .nav{ min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:18px; } .brand{ color:#fff; text-decoration:none; font-weight:950; letter-spacing:.06em; } .nav-links{ display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; } .nav-links a{ color:#cfcfcf; text-decoration:none; font-size:14px; font-weight:800; padding:8px 10px; border-radius:11px; } .nav-links a:hover{ color:#fff; background:rgba(255,255,255,.07); } main{ padding:72px 0 92px; } .hero{ border:1px solid var(--line); border-radius:32px; padding:clamp(28px,5vw,48px); background: linear-gradient(135deg,rgba(255,214,0,.13),rgba(96,175,255,.08) 42%,rgba(255,255,255,.025)), rgba(255,255,255,.025); box-shadow:var(--shadow); overflow:hidden; position:relative; } .hero:after{ --faq-sun-pixel: clamp(8px, 1vw, 15px); --faq-sun-core: rgba(255,214,0,.30); --faq-sun-mid: rgba(255,214,0,.20); --faq-sun-edge: rgba(255,214,0,.11); content:""; position:absolute; right:56px; top:42px; width:var(--faq-sun-pixel); height:var(--faq-sun-pixel); background:transparent; image-rendering:pixelated; opacity:.92; box-shadow: calc(var(--faq-sun-pixel) * 5) calc(var(--faq-sun-pixel) * 0) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 6) calc(var(--faq-sun-pixel) * 0) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 3) calc(var(--faq-sun-pixel) * 1) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 4) calc(var(--faq-sun-pixel) * 1) 0 var(--faq-sun-mid), calc(var(--faq-sun-pixel) * 5) calc(var(--faq-sun-pixel) * 1) 0 var(--faq-sun-mid), calc(var(--faq-sun-pixel) * 6) calc(var(--faq-sun-pixel) * 1) 0 var(--faq-sun-mid), calc(var(--faq-sun-pixel) * 7) calc(var(--faq-sun-pixel) * 1) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 8) calc(var(--faq-sun-pixel) * 1) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 2) calc(var(--faq-sun-pixel) * 2) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 3) calc(var(--faq-sun-pixel) * 2) 0 var(--faq-sun-mid), calc(var(--faq-sun-pixel) * 4) calc(var(--faq-sun-pixel) * 2) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 5) calc(var(--faq-sun-pixel) * 2) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 6) calc(var(--faq-sun-pixel) * 2) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 7) calc(var(--faq-sun-pixel) * 2) 0 var(--faq-sun-mid), calc(var(--faq-sun-pixel) * 8) calc(var(--faq-sun-pixel) * 2) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 9) calc(var(--faq-sun-pixel) * 2) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 1) calc(var(--faq-sun-pixel) * 3) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 2) calc(var(--faq-sun-pixel) * 3) 0 var(--faq-sun-mid), calc(var(--faq-sun-pixel) * 3) calc(var(--faq-sun-pixel) * 3) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 4) calc(var(--faq-sun-pixel) * 3) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 5) calc(var(--faq-sun-pixel) * 3) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 6) calc(var(--faq-sun-pixel) * 3) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 7) calc(var(--faq-sun-pixel) * 3) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 8) calc(var(--faq-sun-pixel) * 3) 0 var(--faq-sun-mid), calc(var(--faq-sun-pixel) * 9) calc(var(--faq-sun-pixel) * 3) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 10) calc(var(--faq-sun-pixel) * 3) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 1) calc(var(--faq-sun-pixel) * 4) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 2) calc(var(--faq-sun-pixel) * 4) 0 var(--faq-sun-mid), calc(var(--faq-sun-pixel) * 3) calc(var(--faq-sun-pixel) * 4) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 4) calc(var(--faq-sun-pixel) * 4) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 5) calc(var(--faq-sun-pixel) * 4) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 6) calc(var(--faq-sun-pixel) * 4) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 7) calc(var(--faq-sun-pixel) * 4) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 8) calc(var(--faq-sun-pixel) * 4) 0 var(--faq-sun-mid), calc(var(--faq-sun-pixel) * 9) calc(var(--faq-sun-pixel) * 4) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 10) calc(var(--faq-sun-pixel) * 4) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 0) calc(var(--faq-sun-pixel) * 5) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 1) calc(var(--faq-sun-pixel) * 5) 0 var(--faq-sun-mid), calc(var(--faq-sun-pixel) * 2) calc(var(--faq-sun-pixel) * 5) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 3) calc(var(--faq-sun-pixel) * 5) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 4) calc(var(--faq-sun-pixel) * 5) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 5) calc(var(--faq-sun-pixel) * 5) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 6) calc(var(--faq-sun-pixel) * 5) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 7) calc(var(--faq-sun-pixel) * 5) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 8) calc(var(--faq-sun-pixel) * 5) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 9) calc(var(--faq-sun-pixel) * 5) 0 var(--faq-sun-mid), calc(var(--faq-sun-pixel) * 10) calc(var(--faq-sun-pixel) * 5) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 11) calc(var(--faq-sun-pixel) * 5) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 0) calc(var(--faq-sun-pixel) * 6) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 1) calc(var(--faq-sun-pixel) * 6) 0 var(--faq-sun-mid), calc(var(--faq-sun-pixel) * 2) calc(var(--faq-sun-pixel) * 6) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 3) calc(var(--faq-sun-pixel) * 6) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 4) calc(var(--faq-sun-pixel) * 6) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 5) calc(var(--faq-sun-pixel) * 6) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 6) calc(var(--faq-sun-pixel) * 6) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 7) calc(var(--faq-sun-pixel) * 6) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 8) calc(var(--faq-sun-pixel) * 6) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 9) calc(var(--faq-sun-pixel) * 6) 0 var(--faq-sun-mid), calc(var(--faq-sun-pixel) * 10) calc(var(--faq-sun-pixel) * 6) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 11) calc(var(--faq-sun-pixel) * 6) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 1) calc(var(--faq-sun-pixel) * 7) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 2) calc(var(--faq-sun-pixel) * 7) 0 var(--faq-sun-mid), calc(var(--faq-sun-pixel) * 3) calc(var(--faq-sun-pixel) * 7) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 4) calc(var(--faq-sun-pixel) * 7) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 5) calc(var(--faq-sun-pixel) * 7) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 6) calc(var(--faq-sun-pixel) * 7) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 7) calc(var(--faq-sun-pixel) * 7) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 8) calc(var(--faq-sun-pixel) * 7) 0 var(--faq-sun-mid), calc(var(--faq-sun-pixel) * 9) calc(var(--faq-sun-pixel) * 7) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 10) calc(var(--faq-sun-pixel) * 7) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 1) calc(var(--faq-sun-pixel) * 8) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 2) calc(var(--faq-sun-pixel) * 8) 0 var(--faq-sun-mid), calc(var(--faq-sun-pixel) * 3) calc(var(--faq-sun-pixel) * 8) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 4) calc(var(--faq-sun-pixel) * 8) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 5) calc(var(--faq-sun-pixel) * 8) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 6) calc(var(--faq-sun-pixel) * 8) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 7) calc(var(--faq-sun-pixel) * 8) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 8) calc(var(--faq-sun-pixel) * 8) 0 var(--faq-sun-mid), calc(var(--faq-sun-pixel) * 9) calc(var(--faq-sun-pixel) * 8) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 10) calc(var(--faq-sun-pixel) * 8) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 2) calc(var(--faq-sun-pixel) * 9) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 3) calc(var(--faq-sun-pixel) * 9) 0 var(--faq-sun-mid), calc(var(--faq-sun-pixel) * 4) calc(var(--faq-sun-pixel) * 9) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 5) calc(var(--faq-sun-pixel) * 9) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 6) calc(var(--faq-sun-pixel) * 9) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 7) calc(var(--faq-sun-pixel) * 9) 0 var(--faq-sun-mid), calc(var(--faq-sun-pixel) * 8) calc(var(--faq-sun-pixel) * 9) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 9) calc(var(--faq-sun-pixel) * 9) 0 var(--faq-sun-edge); filter:drop-shadow(0 0 calc(var(--faq-sun-pixel) * 3) rgba(255,214,0,.10)); transform:translate(calc(var(--faq-sun-pixel) * -5.5), calc(var(--faq-sun-pixel) * -5)); pointer-events:none; } .hero:after{ --faq-sun-pixel:clamp(7px,.82vw,10px); --faq-sun-ray:rgba(255,214,0,.30); --faq-sun-edge:rgba(255,214,0,.46); --faq-sun-core:rgba(255,214,0,.66); --faq-sun-hot:rgba(255,244,150,.72); right:72px; top:58px; opacity:.88; box-shadow: calc(var(--faq-sun-pixel) * 5) calc(var(--faq-sun-pixel) * 0) 0 var(--faq-sun-ray), calc(var(--faq-sun-pixel) * 5) calc(var(--faq-sun-pixel) * 1) 0 var(--faq-sun-ray), calc(var(--faq-sun-pixel) * 2) calc(var(--faq-sun-pixel) * 2) 0 var(--faq-sun-ray), calc(var(--faq-sun-pixel) * 4) calc(var(--faq-sun-pixel) * 2) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 5) calc(var(--faq-sun-pixel) * 2) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 6) calc(var(--faq-sun-pixel) * 2) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 8) calc(var(--faq-sun-pixel) * 2) 0 var(--faq-sun-ray), calc(var(--faq-sun-pixel) * 3) calc(var(--faq-sun-pixel) * 3) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 4) calc(var(--faq-sun-pixel) * 3) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 5) calc(var(--faq-sun-pixel) * 3) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 6) calc(var(--faq-sun-pixel) * 3) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 7) calc(var(--faq-sun-pixel) * 3) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 2) calc(var(--faq-sun-pixel) * 4) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 3) calc(var(--faq-sun-pixel) * 4) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 4) calc(var(--faq-sun-pixel) * 4) 0 var(--faq-sun-hot), calc(var(--faq-sun-pixel) * 5) calc(var(--faq-sun-pixel) * 4) 0 var(--faq-sun-hot), calc(var(--faq-sun-pixel) * 6) calc(var(--faq-sun-pixel) * 4) 0 var(--faq-sun-hot), calc(var(--faq-sun-pixel) * 7) calc(var(--faq-sun-pixel) * 4) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 8) calc(var(--faq-sun-pixel) * 4) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 0) calc(var(--faq-sun-pixel) * 5) 0 var(--faq-sun-ray), calc(var(--faq-sun-pixel) * 1) calc(var(--faq-sun-pixel) * 5) 0 var(--faq-sun-ray), calc(var(--faq-sun-pixel) * 3) calc(var(--faq-sun-pixel) * 5) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 4) calc(var(--faq-sun-pixel) * 5) 0 var(--faq-sun-hot), calc(var(--faq-sun-pixel) * 5) calc(var(--faq-sun-pixel) * 5) 0 var(--faq-sun-hot), calc(var(--faq-sun-pixel) * 6) calc(var(--faq-sun-pixel) * 5) 0 var(--faq-sun-hot), calc(var(--faq-sun-pixel) * 7) calc(var(--faq-sun-pixel) * 5) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 9) calc(var(--faq-sun-pixel) * 5) 0 var(--faq-sun-ray), calc(var(--faq-sun-pixel) * 10) calc(var(--faq-sun-pixel) * 5) 0 var(--faq-sun-ray), calc(var(--faq-sun-pixel) * 2) calc(var(--faq-sun-pixel) * 6) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 3) calc(var(--faq-sun-pixel) * 6) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 4) calc(var(--faq-sun-pixel) * 6) 0 var(--faq-sun-hot), calc(var(--faq-sun-pixel) * 5) calc(var(--faq-sun-pixel) * 6) 0 var(--faq-sun-hot), calc(var(--faq-sun-pixel) * 6) calc(var(--faq-sun-pixel) * 6) 0 var(--faq-sun-hot), calc(var(--faq-sun-pixel) * 7) calc(var(--faq-sun-pixel) * 6) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 8) calc(var(--faq-sun-pixel) * 6) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 3) calc(var(--faq-sun-pixel) * 7) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 4) calc(var(--faq-sun-pixel) * 7) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 5) calc(var(--faq-sun-pixel) * 7) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 6) calc(var(--faq-sun-pixel) * 7) 0 var(--faq-sun-core), calc(var(--faq-sun-pixel) * 7) calc(var(--faq-sun-pixel) * 7) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 2) calc(var(--faq-sun-pixel) * 8) 0 var(--faq-sun-ray), calc(var(--faq-sun-pixel) * 4) calc(var(--faq-sun-pixel) * 8) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 5) calc(var(--faq-sun-pixel) * 8) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 6) calc(var(--faq-sun-pixel) * 8) 0 var(--faq-sun-edge), calc(var(--faq-sun-pixel) * 8) calc(var(--faq-sun-pixel) * 8) 0 var(--faq-sun-ray), calc(var(--faq-sun-pixel) * 5) calc(var(--faq-sun-pixel) * 9) 0 var(--faq-sun-ray), calc(var(--faq-sun-pixel) * 5) calc(var(--faq-sun-pixel) * 10) 0 var(--faq-sun-ray); filter:drop-shadow(0 0 calc(var(--faq-sun-pixel) * 2.2) rgba(255,214,0,.13)); transform:translate(calc(var(--faq-sun-pixel) * -5), calc(var(--faq-sun-pixel) * -5)); } .hero h1{ font-size:clamp(42px,7vw,86px); letter-spacing:-.06em; line-height:.92; } .hero h1:before{ content:none; display:none; } .hero:before{ content:""; position:absolute; right:14px; top:-26px; width:210px; height:210px; border-radius:50%; background: radial-gradient(circle at 50% 50%, rgba(255,248,168,.32) 0 10%, rgba(255,214,0,.22) 11% 24%, rgba(255,214,0,.10) 25% 42%, transparent 43%), conic-gradient(from 0deg, transparent 0 7deg, rgba(255,214,0,.16) 7deg 10deg, transparent 10deg 37deg, rgba(255,214,0,.10) 37deg 40deg, transparent 40deg 67deg, rgba(255,214,0,.14) 67deg 70deg, transparent 70deg 97deg, rgba(255,214,0,.10) 97deg 100deg, transparent 100deg 127deg, rgba(255,214,0,.14) 127deg 130deg, transparent 130deg 157deg, rgba(255,214,0,.10) 157deg 160deg, transparent 160deg 187deg, rgba(255,214,0,.16) 187deg 190deg, transparent 190deg 217deg, rgba(255,214,0,.10) 217deg 220deg, transparent 220deg 247deg, rgba(255,214,0,.14) 247deg 250deg, transparent 250deg 277deg, rgba(255,214,0,.10) 277deg 280deg, transparent 280deg 307deg, rgba(255,214,0,.14) 307deg 310deg, transparent 310deg 337deg, rgba(255,214,0,.10) 337deg 340deg, transparent 340deg 360deg); filter:blur(.1px); opacity:.62; pointer-events:none; transform:none; } .hero:after{ right:82px; top:42px; width:74px; height:74px; border-radius:50%; background: radial-gradient(circle at 42% 36%, rgba(255,250,190,.96) 0 13%, rgba(255,226,48,.88) 14% 44%, rgba(176,145,0,.62) 45% 70%, rgba(255,214,0,.16) 71% 100%); box-shadow: 0 0 0 1px rgba(255,214,0,.18), 0 0 18px rgba(255,214,0,.20), 0 0 54px rgba(255,214,0,.12); filter:none; opacity:.86; transform:none; } .hero:before{ display:block; right:42px; top:20px; width:164px; height:164px; border-radius:0; background: radial-gradient(circle at 50% 50%, rgba(255,214,0,.24) 0 28%, rgba(255,214,0,.12) 29% 44%, transparent 45%), conic-gradient(from 0deg, transparent 0 8deg, rgba(255,214,0,.16) 8deg 13deg, transparent 13deg 38deg, rgba(255,214,0,.12) 38deg 43deg, transparent 43deg 83deg, rgba(255,214,0,.15) 83deg 88deg, transparent 88deg 128deg, rgba(255,214,0,.12) 128deg 133deg, transparent 133deg 173deg, rgba(255,214,0,.16) 173deg 178deg, transparent 178deg 218deg, rgba(255,214,0,.12) 218deg 223deg, transparent 223deg 263deg, rgba(255,214,0,.15) 263deg 268deg, transparent 268deg 308deg, rgba(255,214,0,.12) 308deg 313deg, transparent 313deg 360deg); filter:blur(7px); opacity:.42; animation:nopnjFaqPixelSunAura 3.6s steps(3,end) infinite; transform:translate3d(0,0,0) scale(.94); } .hero:after{ right:56px; top:36px; width:132px; height:132px; border-radius:0; background:url("/assets/faq-pixel-sun.svg?v=15b5d04d8bbb3480") center/contain no-repeat; box-shadow:none; filter:none; image-rendering:pixelated; opacity:.86; transform:none; animation:nopnjFaqPixelSunWake 2.8s steps(4,end) infinite; transform-origin:50% 50%; } @media(max-width:560px){ .hero:before{ right:clamp(0px, 1vw, 4px); top:clamp(10px, 3vw, 18px); width:clamp(118px, 34vw, 142px); height:clamp(118px, 34vw, 142px); opacity:.34; } .hero:after{ right:clamp(12px, 4vw, 18px); top:clamp(24px, 7vw, 34px); width:clamp(78px, 23vw, 94px); height:clamp(78px, 23vw, 94px); opacity:.90; } } @keyframes nopnjFaqPixelSunWake{ 0%, 100%{ opacity:.78; filter:drop-shadow(0 0 8px rgba(255,214,0,.16)); transform:translate3d(0,0,0) scale(1); } 25%{ opacity:.98; filter:drop-shadow(0 0 16px rgba(255,214,0,.30)); transform:translate3d(1px,-1px,0) scale(1.025); } 50%{ opacity:1; filter:drop-shadow(0 0 24px rgba(255,214,0,.42)); transform:translate3d(0,-3px,0) scale(1.055); } 75%{ opacity:.92; filter:drop-shadow(0 0 14px rgba(255,214,0,.24)); transform:translate3d(-1px,-1px,0) scale(1.02); } } @keyframes nopnjFaqPixelSunAura{ 0%, 100%{ opacity:.26; transform:translate3d(0,0,0) scale(.92); } 33%{ opacity:.46; transform:translate3d(0,-2px,0) scale(1); } 66%{ opacity:.58; transform:translate3d(0,-1px,0) scale(1.08); } } @media (prefers-reduced-motion: reduce){ .hero:before{ animation:none; opacity:.32; transform:none; } .hero:after{ animation:none; opacity:.86; filter:none; transform:none; } } /* Final FAQ sun pass: make the motion readable, not just technically animated. */ .hero:before{ animation:nopnjFaqPixelSunAuraVisible 2.2s steps(4,end) infinite !important; transform-origin:50% 50% !important; } .hero:after{ opacity:.98 !important; filter:drop-shadow(0 0 18px rgba(255,214,0,.34)) brightness(1.04) !important; animation:nopnjFaqPixelSunVisible 1.65s steps(4,end) infinite !important; transform-origin:50% 50% !important; will-change:transform, filter, opacity !important; } @keyframes nopnjFaqPixelSunVisible{ 0%, 100%{ opacity:.86; filter:drop-shadow(0 0 8px rgba(255,214,0,.20)) brightness(.96); transform:translate3d(0,0,0) scale(.96) rotate(0deg); } 25%{ opacity:1; filter:drop-shadow(0 0 24px rgba(255,214,0,.42)) brightness(1.12); transform:translate3d(0,-7px,0) scale(1.08) rotate(0deg); } 50%{ opacity:.94; filter:drop-shadow(0 0 16px rgba(255,214,0,.30)) brightness(1.03); transform:translate3d(5px,-3px,0) scale(1.02) rotate(2deg); } 75%{ opacity:1; filter:drop-shadow(0 0 30px rgba(255,214,0,.48)) brightness(1.16); transform:translate3d(-3px,-5px,0) scale(1.11) rotate(-2deg); } } @keyframes nopnjFaqPixelSunAuraVisible{ 0%, 100%{ opacity:.18; transform:translate3d(0,0,0) scale(.78); } 25%{ opacity:.48; transform:translate3d(0,-4px,0) scale(1.04); } 50%{ opacity:.30; transform:translate3d(4px,-2px,0) scale(.94); } 75%{ opacity:.58; transform:translate3d(-3px,-5px,0) scale(1.14); } } @media (prefers-reduced-motion: reduce){ .hero:before{ animation:none !important; opacity:.38 !important; transform:none !important; } .hero:after{ animation:none !important; opacity:.98 !important; filter:drop-shadow(0 0 18px rgba(255,214,0,.30)) !important; transform:none !important; } } /* Final FAQ sun shine: visible pixel glints layered over the sun. */ .hero > .nopnj-faq-sun-shine, .hero > .nopnj-faq-sun-sparks{ position:absolute; display:block; pointer-events:none; image-rendering:pixelated; z-index:3; } .hero > .nopnj-faq-sun-shine{ right:56px; top:36px; width:132px; height:132px; opacity:.78; mix-blend-mode:screen; filter:drop-shadow(0 0 12px rgba(255,246,142,.34)); animation:nopnjFaqSunGlintSweep 1.15s steps(4,end) infinite; } .hero > .nopnj-faq-sun-shine:before, .hero > .nopnj-faq-sun-shine:after{ content:""; position:absolute; width:8px; height:8px; background:#fff6c9; box-shadow: 8px 0 0 rgba(255,246,201,.95), 0 8px 0 rgba(255,246,201,.88), 16px 8px 0 rgba(255,238,106,.82), 8px 16px 0 rgba(255,238,106,.76); } .hero > .nopnj-faq-sun-shine:before{ left:38px; top:34px; } .hero > .nopnj-faq-sun-shine:after{ left:54px; top:48px; width:6px; height:6px; opacity:.72; box-shadow: 6px 0 0 rgba(255,246,201,.82), 0 6px 0 rgba(255,246,201,.72), 12px 6px 0 rgba(255,238,106,.62); animation:nopnjFaqSunInnerSpark 1.15s steps(3,end) infinite; } .hero > .nopnj-faq-sun-sparks{ right:42px; top:20px; width:164px; height:164px; opacity:.82; transform-origin:50% 50%; animation:nopnjFaqSunSparkPulse .95s steps(4,end) infinite; } .hero > .nopnj-faq-sun-sparks:before, .hero > .nopnj-faq-sun-sparks:after{ content:""; position:absolute; left:50%; top:50%; width:6px; height:6px; background:#fff06a; box-shadow: 0 -82px 0 rgba(255,214,0,.95), 0 82px 0 rgba(255,214,0,.72), 82px 0 0 rgba(255,214,0,.86), -82px 0 0 rgba(255,214,0,.66), 58px -58px 0 rgba(255,238,106,.82), -58px 58px 0 rgba(255,214,0,.58), -58px -58px 0 rgba(255,214,0,.62), 58px 58px 0 rgba(255,214,0,.64); transform:translate(-50%, -50%); filter:drop-shadow(0 0 10px rgba(255,214,0,.42)); } .hero > .nopnj-faq-sun-sparks:after{ width:4px; height:4px; opacity:.58; box-shadow: 0 -70px 0 rgba(255,246,142,.82), 70px 0 0 rgba(255,246,142,.72), 50px -50px 0 rgba(255,246,142,.62), -50px 50px 0 rgba(255,246,142,.52); animation:nopnjFaqSunSparkOffset .95s steps(2,end) infinite; } @keyframes nopnjFaqSunGlintSweep{ 0%, 100%{ opacity:.18; transform:translate3d(-3px,4px,0) scale(.92); } 25%{ opacity:1; transform:translate3d(0,0,0) scale(1); } 50%{ opacity:.46; transform:translate3d(6px,-5px,0) scale(.84); } 75%{ opacity:.95; transform:translate3d(2px,-2px,0) scale(1.08); } } @keyframes nopnjFaqSunInnerSpark{ 0%, 100%{ opacity:.14; transform:translate3d(0,0,0) scale(.8); } 50%{ opacity:.94; transform:translate3d(5px,-4px,0) scale(1.2); } } @keyframes nopnjFaqSunSparkPulse{ 0%, 100%{ opacity:.24; transform:translate3d(0,0,0) scale(.82); } 25%{ opacity:1; transform:translate3d(0,-2px,0) scale(1); } 50%{ opacity:.38; transform:translate3d(2px,1px,0) scale(.90); } 75%{ opacity:.92; transform:translate3d(-2px,-3px,0) scale(1.12); } } @keyframes nopnjFaqSunSparkOffset{ 0%, 100%{ opacity:.18; transform:translate(-50%, -50%) rotate(0deg) scale(.78); } 50%{ opacity:.88; transform:translate(-50%, -50%) rotate(0deg) scale(1.18); } } @media(max-width:560px){ .hero > .nopnj-faq-sun-shine{ right:clamp(12px, 4vw, 18px); top:clamp(24px, 7vw, 34px); width:clamp(78px, 23vw, 94px); height:clamp(78px, 23vw, 94px); } .hero > .nopnj-faq-sun-shine:before{ left:28%; top:25%; width:6px; height:6px; box-shadow: 6px 0 0 rgba(255,246,201,.95), 0 6px 0 rgba(255,246,201,.88), 12px 6px 0 rgba(255,238,106,.82), 6px 12px 0 rgba(255,238,106,.76); } .hero > .nopnj-faq-sun-shine:after{ left:41%; top:38%; } .hero > .nopnj-faq-sun-sparks{ right:clamp(0px, 1vw, 4px); top:clamp(10px, 3vw, 18px); width:clamp(118px, 34vw, 142px); height:clamp(118px, 34vw, 142px); } .hero > .nopnj-faq-sun-sparks:before{ width:4px; height:4px; box-shadow: 0 -58px 0 rgba(255,214,0,.95), 0 58px 0 rgba(255,214,0,.72), 58px 0 0 rgba(255,214,0,.86), -58px 0 0 rgba(255,214,0,.66), 41px -41px 0 rgba(255,238,106,.82), -41px 41px 0 rgba(255,214,0,.58), -41px -41px 0 rgba(255,214,0,.62), 41px 41px 0 rgba(255,214,0,.64); } } /* FAQ sun: slower, calmer rhythm. */ .hero:before{ animation-duration:4.4s !important; } .hero:after{ animation-duration:3.4s !important; } .hero > .nopnj-faq-sun-shine{ animation-duration:2.8s !important; } .hero > .nopnj-faq-sun-shine:after{ animation-duration:2.8s !important; } .hero > .nopnj-faq-sun-sparks{ animation-duration:2.6s !important; } .hero > .nopnj-faq-sun-sparks:after{ animation-duration:2.6s !important; } .eyebrow{ margin:0 0 16px; color:var(--yellow); font-size:13px; font-weight:950; letter-spacing:.18em; text-transform:uppercase; } h1{ margin:0; max-width:900px; font-size:clamp(42px,7vw,86px); line-height:.92; letter-spacing:-.06em; } .hero h1{ font-size:clamp(42px,7vw,86px)!important; line-height:.92!important; letter-spacing:-.06em!important; } .hero h1:before{ content:none!important; display:none!important; } .hero h1 .nopnj-faq-title-dot{ display:inline-block!important; width:8px!important; height:8px!important; min-width:8px!important; min-height:8px!important; aspect-ratio:1/1!important; background:rgba(244,244,238,.88)!important; box-shadow: 0 0 10px rgba(244,244,238,.18), 0 0 18px rgba(244,244,238,.08)!important; border-radius:0!important; color:transparent!important; line-height:0!important; text-indent:-9999px!important; text-shadow:none!important; vertical-align:-.055em!important; } @media (min-width:761px){ .hero h1 .nopnj-faq-title-dot{ width:14px!important; height:14px!important; min-width:14px!important; min-height:14px!important; } } .lead{ margin:22px 0 0; max-width:820px; color:#d5d5d5; font-size:clamp(17px,2vw,21px); } .status-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; } .pill{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.055); color:var(--soft); font-size:13px; font-weight:850; } .pill.warn{ background:rgba(255,214,0,.12); border-color:rgba(255,214,0,.3); color:#ffe76b; } .faq{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:28px; } details{ border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018)); box-shadow:0 16px 50px rgba(0,0,0,.26); overflow:hidden; } summary{ cursor:pointer; list-style:none; padding:22px; color:#fff; font-size:18px; font-weight:950; display:flex; align-items:center; justify-content:space-between; gap:18px; } summary::-webkit-details-marker{display:none} summary:after{ content:"+"; color:var(--yellow); font-size:25px; line-height:1; flex:0 0 auto; } details[open] summary:after{content:"–"} details p{ margin:0; padding:0 22px 22px; color:var(--muted); width:100%; max-width:none; box-sizing:border-box; white-space:normal; overflow-wrap:break-word; } details strong{color:#fff} .cta{ margin-top:28px; border:1px solid rgba(255,214,0,.24); border-radius:24px; padding:24px; background:rgba(255,214,0,.08); display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; } .cta p{ margin:0; color:#e7e0b1; max-width:720px; } .btn{ display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 18px; border-radius:999px; background:var(--yellow); color:#111; font-weight:950; text-decoration:none; white-space:nowrap; } .btn.secondary{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.18); } @media(max-width:720px){ header.nopnj-site-header{position:static} .nav{align-items:flex-start;flex-direction:column;padding:16px 0} .nav-links{justify-content:flex-start} main{padding-top:42px} summary{font-size:16px} .cta{align-items:flex-start} } /* === 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; } } } /* source: /assets/faq-inline-02.css?v=15b5d04d8bbb3480 */ /* === extracted faithful style block 02 from prod faq/index.html === */ body > header{ position:sticky !important; top:0 !important; z-index:5000 !important; backdrop-filter:blur(14px) !important; -webkit-backdrop-filter:blur(14px) !important; background:rgba(7,7,7,.72) !important; border-bottom:1px solid rgba(255,255,255,.07) !important; min-height:76px !important; height:auto !important; max-height:none !important; margin:0 !important; padding:0 !important; overflow:visible !important; } body > header .shell{ width:min(var(--max, 1320px), calc(100% - 36px)) !important; max-width:min(var(--max, 1320px), calc(100% - 36px)) !important; margin:0 auto !important; padding:0 !important; } body > header .shell.nav{ min-height:76px !important; height:auto !important; max-height:none !important; display:flex !important; align-items:center !important; justify-content:space-between !important; flex-direction:row !important; flex-wrap:nowrap !important; gap:22px !important; margin:0 auto !important; padding:0 !important; overflow:visible !important; } body > header .brand{ display:flex !important; align-items:center !important; gap:12px !important; flex:0 0 auto !important; color:var(--text, #f2f2f2) !important; text-decoration:none !important; font-size:22px !important; font-weight:950 !important; letter-spacing:-.06em !important; line-height:1 !important; text-transform:none !important; white-space:nowrap !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; } body > header .brand-mark{ display:inline-block !important; flex:0 0 auto !important; width:18px !important; height:18px !important; border:2px solid var(--yellow, #FFD600) !important; border-radius:50% !important; background:transparent !important; box-shadow:inset 0 0 0 5px var(--black, #050505) !important; margin:0 !important; padding:0 !important; transform:none !important; } body > header .nav-links{ display:flex !important; align-items:center !important; justify-content:flex-end !important; flex-direction:row !important; flex-wrap:wrap !important; gap:8px !important; min-width:0 !important; height:auto !important; min-height:0 !important; max-height:none !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; overflow:visible !important; } body > header .nav-links a{ display:inline-flex !important; align-items:center !important; justify-content:center !important; color:var(--muted, rgba(242,242,242,.62)) !important; text-decoration:none !important; font-size:13px !important; font-weight:800 !important; text-transform:uppercase !important; letter-spacing:.08em !important; line-height:1 !important; white-space:nowrap !important; height:auto !important; min-height:0 !important; max-height:none !important; margin:0 !important; padding:10px 12px !important; border:1px solid transparent !important; border-radius:0 !important; background:transparent !important; opacity:1 !important; } body > header .nav-links a:hover, body > header .nav-links a:focus-visible{ color:var(--text, #f2f2f2) !important; border-color:var(--line, rgba(255,255,255,.14)) !important; background:rgba(255,255,255,.035) !important; outline:none !important; } @media(max-width:760px){ body > header{ height:56px !important; min-height:56px !important; max-height:56px !important; overflow:hidden !important; } body > header .shell.nav{ width:calc(100% - 24px) !important; max-width:calc(100% - 24px) !important; height:56px !important; min-height:56px !important; max-height:56px !important; flex-wrap:nowrap !important; gap:10px !important; overflow:hidden !important; } body > header .brand{ height:56px !important; min-height:56px !important; max-height:56px !important; gap:8px !important; font-size:13px !important; } body > header .brand-mark{ width:11px !important; height:11px !important; } body > header .nav-links{ flex:1 1 auto !important; min-width:0 !important; height:56px !important; min-height:56px !important; max-height:56px !important; flex-wrap:nowrap !important; justify-content:flex-start !important; gap:14px !important; overflow-x:auto !important; overflow-y:hidden !important; -webkit-overflow-scrolling:touch !important; scrollbar-width:none !important; } body > header .nav-links::-webkit-scrollbar{ display:none !important; } body > header .nav-links a{ flex:0 0 auto !important; font-size:11.5px !important; padding:0 !important; border:0 !important; background:transparent !important; } } /* source: /assets/faq-inline-03.css?v=15b5d04d8bbb3480 */ /* === extracted faithful style block 03 from prod faq/index.html === */ body > header{ top:0 !important; margin:0 !important; padding:0 !important; height:58px !important; min-height:58px !important; max-height:58px !important; overflow:hidden !important; } body > header .shell{ width:min(var(--max, 1320px), calc(100% - 36px)) !important; max-width:min(var(--max, 1320px), calc(100% - 36px)) !important; margin:0 auto !important; padding:0 !important; } body > header .shell.nav{ height:58px !important; min-height:58px !important; max-height:58px !important; margin:0 auto !important; padding:0 !important; display:flex !important; align-items:center !important; justify-content:space-between !important; flex-direction:row !important; flex-wrap:nowrap !important; gap:22px !important; overflow:hidden !important; } body > header .brand{ display:flex !important; align-items:center !important; gap:12px !important; height:58px !important; min-height:58px !important; max-height:58px !important; margin:0 !important; padding:0 !important; line-height:1 !important; white-space:nowrap !important; } body > header .brand-mark{ width:18px !important; height:18px !important; margin:0 !important; padding:0 !important; } body > header .nav-links{ display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:8px !important; height:58px !important; min-height:58px !important; max-height:58px !important; margin:0 !important; padding:0 !important; overflow:visible !important; } body > header .nav-links a{ display:inline-flex !important; align-items:center !important; justify-content:center !important; margin:0 !important; padding:10px 12px !important; line-height:1 !important; white-space:nowrap !important; } @media(max-width:760px){ body > header{ height:56px !important; min-height:56px !important; max-height:56px !important; } body > header .shell.nav{ width:calc(100% - 24px) !important; max-width:calc(100% - 24px) !important; height:56px !important; min-height:56px !important; max-height:56px !important; gap:10px !important; } body > header .brand{ height:56px !important; min-height:56px !important; max-height:56px !important; gap:8px !important; } body > header .brand-mark{ width:11px !important; height:11px !important; } body > header .nav-links{ height:56px !important; min-height:56px !important; max-height:56px !important; gap:14px !important; overflow-x:auto !important; overflow-y:hidden !important; justify-content:flex-start !important; scrollbar-width:none !important; } body > header .nav-links::-webkit-scrollbar{ display:none !important; } body > header .nav-links a{ padding:0 !important; } } /* source: /assets/faq-inline-04.css?v=15b5d04d8bbb3480 */ /* === extracted faithful style block 04 from prod faq/index.html === */ /* 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; } } /* source: /assets/faq-inline-05.css?v=15b5d04d8bbb3480 */ /* === extracted faithful style block 05 from prod faq/index.html === */ footer{ margin-top:56px !important; padding:28px 0 36px !important; color:rgba(242,242,242,.48) !important; font-size:13px !important; text-align:center !important; } footer .shell{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:10px !important; } footer .nopnj-footer-brand{ color:rgba(242,242,242,.58) !important; font-weight:650 !important; letter-spacing:.02em !important; } footer .nopnj-footer-links{ display:flex !important; align-items:center !important; justify-content:center !important; flex-wrap:wrap !important; gap:10px !important; } footer .nopnj-footer-links a{ color:rgba(242,242,242,.54) !important; text-decoration:none !important; text-underline-offset:0 !important; font-weight:650 !important; transition:color .18s ease, opacity .18s ease !important; } footer .nopnj-footer-links a:hover, footer .nopnj-footer-links a:focus-visible{ color:#FFD600 !important; outline:none !important; } footer .sep{ color:rgba(255,214,0,.34) !important; } /* source: /assets/nopnj-global.css?v=15b5d04d8bbb3480 */ /* ========================= NO PNJ FOOTER FIX FINAL ========================= */ .nopnj-footer { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 28px 12px; text-align: center; } /* BRAND */ .nopnj-footer-brand { font-size: 13px; color: rgba(255,255,255,0.6); } /* LINKS ROW */ .nopnj-footer-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; font-size: 12px; } /* LINKS */ .nopnj-footer-links a { color: rgba(255,255,255,0.55); text-decoration: none; transition: .2s ease; } /* HOVER STANDARD */ .nopnj-footer-links a:hover { color: #ffffff; } /* FACEBOOK ACCENT */ .nopnj-footer-links a[href*="facebook"]:hover { color: #FFD600; } /* SEPARATION PROPRE */ .nopnj-footer-links .sep { color: rgba(255,255,255,0.25); } /* ========================= FOOTER TOP DIVIDER FIX ========================= */ .nopnj-footer { border-top: 1px solid rgba(255,255,255,0.08); margin-top: 40px; } /* ========================= FOOTER DIVIDER FINAL FIX ========================= */ .nopnj-footer { margin-top: 48px; /* vraie respiration */ padding-top: 22px; /* espace sous la ligne */ border-top: 1px solid rgba(255,255,255,0.10); } /* assure centrage propre du bloc */ .nopnj-footer-links { margin-top: 4px; } /* ========================= FOOTER SEP UNIFIED SYSTEM ========================= */ .nopnj-footer-links .sep { color: rgba(255,255,255,0.25); margin: 0 6px; } /* === Announcement banner mode === Default: hidden. Add .nopnj-announcement-on on or 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; } /* === NO PNJ header Chau Philomene typography === */ @font-face{ font-family:"chau-philomene-one.italic"; src:url("/assets/fonts/ChauPhilomeneOne-Italic.woff?v=15b5d04d8bbb3480") 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?v=15b5d04d8bbb3480") 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; } /* === Global French typography guard === */ main p, main li{ text-wrap:pretty; hyphens:auto; text-align-last:start; } main h1, main h2, main h3, main summary, main .lead{ text-wrap:balance; } .nopnj-nowrap{ white-space:nowrap; } /* source: /assets/faq-bridge.css?v=15b5d04d8bbb3480 */ /* === Shared page bridge: exact home header rendering === */ :root { --home-header-height: 58px; --home-header-gap: 14px; } html body { padding-top: calc(var(--home-header-height) + var(--home-header-gap)) !important; } 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; text-decoration: none !important; } 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; text-decoration: none; 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); } body > .prelaunch-notice { margin-top: 18px !important; } @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 !important; } } /* === Mobile header/nav contract === */ @media (max-width: 760px){ body > header > .shell.nav{ min-height: 58px !important; height: 58px !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; overflow: visible !important; padding: 0 !important; } body > header .brand{ min-height: 0 !important; font-size: 15px !important; flex: 0 0 auto !important; } body > header .brand-label{ position: static !important; } body > header .brand-declinaison{ position: fixed !important; left: 12px !important; right: 12px !important; top: 64px !important; z-index: 4999 !important; width: auto !important; max-width: none !important; color: rgba(242,242,242,.92) !important; text-align: center !important; font-size: 9.5px !important; line-height: 1.15 !important; letter-spacing: .06em !important; opacity: 0 !important; transform: translateY(-6px) !important; pointer-events: none !important; } body > header .brand.is-brand-active .brand-declinaison{ opacity: 1 !important; transform: translateY(0) !important; } body > header .nav-links{ flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; max-width: none !important; height: auto !important; display: flex !important; flex-wrap: nowrap !important; justify-content: flex-end !important; gap: 9px !important; overflow: visible !important; padding: 0 !important; } body > header .nav-links a{ flex: 0 0 auto !important; font-size: 10.3px !important; letter-spacing: .065em !important; padding-bottom: 6px !important; white-space: nowrap !important; } body > .prelaunch-notice{ margin-top: 20px !important; } } /* === Footer contract === */ 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); } /* === Contact header lock: match validated home/pieces header === */ html body{ padding-top:calc(var(--home-header-height, 58px) + var(--home-header-gap, 14px)) !important; } body > header[data-testid="site.header"]{ position:fixed !important; top:0 !important; right:0 !important; bottom:auto !important; left:0 !important; z-index:5000 !important; height:var(--home-header-height, 58px) !important; min-height:var(--home-header-height, 58px) !important; transform:none !important; } body > header[data-testid="site.header"] > .shell.nav{ height:var(--home-header-height, 58px) !important; min-height:var(--home-header-height, 58px) !important; } body > header[data-testid="site.header"] .brand-mark{ display:none !important; } body > header[data-testid="site.header"] .brand, body > header[data-testid="site.header"] .brand *, body > header[data-testid="site.header"] .nav-links a{ text-decoration:none !important; } @media (max-width:760px){ html body{ padding-top:calc(var(--home-header-height, 58px) + var(--home-header-gap, 14px)) !important; } body > header[data-testid="site.header"]{ position:fixed !important; top:0 !important; right:0 !important; bottom:auto !important; left:0 !important; height:var(--home-header-height, 58px) !important; min-height:var(--home-header-height, 58px) !important; } body > header[data-testid="site.header"] > .shell.nav{ height:var(--home-header-height, 58px) !important; min-height:var(--home-header-height, 58px) !important; } body > header[data-testid="site.header"] .brand-mark{ display:none !important; } } /* === Header height reference === */ :root{ --home-header-height:76px; --home-header-gap:14px; } body > header[data-testid=site.header]{ height:77px !important; min-height:77px !important; } body > header[data-testid=site.header] > .shell.nav{ height:76px !important; min-height:76px !important; } @media (max-width:760px){ :root{ --home-header-height:58px; --home-header-gap:14px; } body > header[data-testid=site.header]{ height:59px !important; min-height:59px !important; } body > header[data-testid=site.header] > .shell.nav{ height:58px !important; min-height:58px !important; } } /* === Header height reference v2 === */ :root{ --home-header-height:76px; --home-header-gap:14px; } body > header{ height:77px !important; min-height:77px !important; } body > header > .shell.nav{ height:76px !important; min-height:76px !important; } @media (max-width:760px){ :root{ --home-header-height:58px; --home-header-gap:14px; } body > header{ height:59px !important; min-height:59px !important; } body > header > .shell.nav{ height:58px !important; min-height:58px !important; } } /* === Header height reference v3: measured match with home === */ html body{ padding-top:72px !important; } body > header{ height:78px !important; min-height:78px !important; } body > header > .shell.nav{ height:76px !important; min-height:76px !important; } @media (max-width:760px){ html body{ padding-top:72px !important; } body > header{ height:60px !important; min-height:60px !important; } body > header > .shell.nav{ height:58px !important; min-height:58px !important; } } /* === Header height reference v4: override legacy specific rules === */ html body{ padding-top:72px !important; } html body > header[data-testid="site.header"]{ height:78px !important; min-height:78px !important; } html body > header[data-testid="site.header"] > .shell.nav{ height:76px !important; min-height:76px !important; } @media (max-width:760px){ html body{ padding-top:72px !important; } html body > header[data-testid="site.header"]{ height:60px !important; min-height:60px !important; } html body > header[data-testid="site.header"] > .shell.nav{ height:58px !important; min-height:58px !important; } } /* === Header height reference v5: exact home values everywhere === */ html body{ padding-top:72px !important; } html body > header[data-testid="site.header"]{ height:77px !important; min-height:77px !important; } html body > header[data-testid="site.header"] > .shell.nav{ height:76px !important; min-height:76px !important; } @media (max-width:760px){ html body{ padding-top:72px !important; } html body > header[data-testid="site.header"]{ height:59px !important; min-height:59px !important; } html body > header[data-testid="site.header"] > .shell.nav{ height:58px !important; min-height:58px !important; } } /* === FAQ width contract: align with home shell === */ body > main.shell, body > .prelaunch-notice{ width:min(var(--max, 1220px), calc(100% - 36px)) !important; max-width:none !important; margin-left:auto !important; margin-right:auto !important; box-sizing:border-box !important; } body > main.shell > section{ max-width:100% !important; box-sizing:border-box !important; } @media (max-width:760px){ body > main.shell, body > .prelaunch-notice{ width:calc(100% - 24px) !important; } } /* === FAQ width contract v2: force sections to home reference width === */ html body > main.shell, html body > .prelaunch-notice{ width:min(var(--max, 1220px), calc(100% - 36px)) !important; max-width:none !important; margin-left:auto !important; margin-right:auto !important; box-sizing:border-box !important; } html body > main.shell > section, html body > main.shell > .hero, html body > main.shell > .faq, html body > main.shell > .cta{ width:100% !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important; box-sizing:border-box !important; } @media (max-width:760px){ html body > main.shell, html body > .prelaunch-notice{ width:calc(100% - 24px) !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; } /* === FAQ editorial refinements === */ html body main.shell .hero .lead{ text-align:left !important; } html body main.shell .hero .status-row .pill{ font-weight:650 !important; letter-spacing:-.004em !important; } html body main.shell .hero .status-row .pill strong{ font-weight:700 !important; } /* === FAQ section 1 lead controlled wrap === */ html body main.shell .hero .lead{ max-width:760px !important; } html body main.shell .hero .lead br{ display:block !important; content:""; } @media (min-width:700px) and (max-width:1180px){ html body main.shell .hero .lead{ max-width:620px !important; } } @media (max-width:560px){ html body main.shell .hero .lead{ max-width:100% !important; } } /* === FAQ answer width: use the full accordion content area === */ html body main.shell > .faq > details{ width:100% !important; } html body main.shell > .faq > details > p{ width:auto !important; max-width:none !important; box-sizing:border-box !important; white-space:normal !important; overflow-wrap:break-word !important; } html body main.shell > .faq > details > summary{ width:100% !important; box-sizing:border-box !important; } /* source: /assets/mobile-header-nav-fix.css?v=15b5d04d8bbb3480 */ /* Mobile header/nav fixes. */ @media (max-width: 760px){ body > header > .shell.nav{ min-height: 58px !important; height: 58px !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; overflow: visible !important; padding: 0 !important; } body > header .brand{ min-height: 0 !important; font-size: 15px !important; flex: 0 0 auto !important; } body > header .brand-label{ position: static !important; } body > header .brand-declinaison{ position: fixed !important; left: 12px !important; right: 12px !important; top: 64px !important; z-index: 4999 !important; width: auto !important; max-width: none !important; color: rgba(242,242,242,.92) !important; text-align: center !important; font-size: 9.5px !important; line-height: 1.15 !important; letter-spacing: .06em !important; opacity: 0 !important; transform: translateY(-6px) !important; pointer-events: none !important; } body > header .brand.is-brand-active .brand-declinaison{ opacity: 1 !important; transform: translateY(0) !important; } body > header .nav-links{ flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; max-width: none !important; height: auto !important; display: flex !important; flex-wrap: nowrap !important; justify-content: flex-end !important; gap: 9px !important; overflow: visible !important; padding: 0 !important; } body > header .nav-links a{ flex: 0 0 auto !important; font-size: 10.3px !important; letter-spacing: .065em !important; padding-bottom: 6px !important; white-space: nowrap !important; } body > .prelaunch-notice{ margin-top: 20px !important; } } /* NO_PNJ_ANDROID_NAV_ALIGN_START */ @media (max-width: 760px){ body > header .nav-links{ height:58px!important; align-items:center!important; } body > header .nav-links a{ height:58px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; padding:0!important; line-height:1!important; } body > header .nav-links a::after{ bottom:12px!important; } } /* NO_PNJ_ANDROID_NAV_ALIGN_END */ /* source: /assets/faq-inline-06.css?v=15b5d04d8bbb3480 */ /* === extracted faithful style block 06 from prod faq/index.html === */ html, body{ margin:0 !important; padding-top:0 !important; } body > header.nopnj-main-header{ position:sticky !important; top:0 !important; left:0 !important; right:0 !important; z-index:5000 !important; height:58px !important; min-height:58px !important; max-height:58px !important; margin:0 !important; padding:0 !important; overflow:hidden !important; display:block !important; backdrop-filter:blur(14px) !important; -webkit-backdrop-filter:blur(14px) !important; background:rgba(7,7,7,.72) !important; border-bottom:1px solid rgba(255,255,255,.07) !important; } body > header.nopnj-main-header .nopnj-main-header-inner{ width:min(var(--max, 1320px), calc(100% - 36px)) !important; max-width:min(var(--max, 1320px), calc(100% - 36px)) !important; height:58px !important; min-height:58px !important; max-height:58px !important; margin:0 auto !important; padding:0 !important; display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:space-between !important; flex-wrap:nowrap !important; gap:22px !important; overflow:hidden !important; } body > header.nopnj-main-header .nopnj-main-brand{ display:flex !important; align-items:center !important; gap:12px !important; flex:0 0 auto !important; height:58px !important; min-height:58px !important; max-height:58px !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; color:#f2f2f2 !important; text-decoration:none !important; font-size:22px !important; font-weight:950 !important; letter-spacing:-.06em !important; line-height:1 !important; text-transform:none !important; white-space:nowrap !important; } body > header.nopnj-main-header .nopnj-main-brand-mark{ display:inline-block !important; width:18px !important; height:18px !important; flex:0 0 auto !important; margin:0 !important; padding:0 !important; border:2px solid #FFD600 !important; border-radius:50% !important; background:transparent !important; box-shadow:inset 0 0 0 5px #050505 !important; } body > header.nopnj-main-header .nopnj-main-nav{ display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-end !important; flex-wrap:wrap !important; gap:8px !important; height:58px !important; min-height:58px !important; max-height:58px !important; min-width:0 !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; overflow:visible !important; } body > header.nopnj-main-header .nopnj-main-nav a{ display:inline-flex !important; align-items:center !important; justify-content:center !important; height:auto !important; min-height:0 !important; max-height:none !important; margin:0 !important; padding:10px 12px !important; border:1px solid transparent !important; border-radius:0 !important; background:transparent !important; color:rgba(242,242,242,.62) !important; text-decoration:none !important; font-size:13px !important; font-weight:800 !important; text-transform:uppercase !important; letter-spacing:.08em !important; line-height:1 !important; white-space:nowrap !important; } body > header.nopnj-main-header .nopnj-main-nav a:hover, body > header.nopnj-main-header .nopnj-main-nav a:focus-visible{ color:#f2f2f2 !important; border-color:rgba(255,255,255,.14) !important; background:rgba(255,255,255,.035) !important; outline:none !important; } @media(max-width:760px){ body > header.nopnj-main-header, body > header.nopnj-main-header .nopnj-main-header-inner{ height:56px !important; min-height:56px !important; max-height:56px !important; } body > header.nopnj-main-header .nopnj-main-header-inner{ width:calc(100% - 24px) !important; max-width:calc(100% - 24px) !important; gap:10px !important; } body > header.nopnj-main-header .nopnj-main-brand{ height:56px !important; min-height:56px !important; max-height:56px !important; gap:8px !important; font-size:13px !important; } body > header.nopnj-main-header .nopnj-main-brand-mark{ width:11px !important; height:11px !important; } body > header.nopnj-main-header .nopnj-main-nav{ flex:1 1 auto !important; min-width:0 !important; height:56px !important; min-height:56px !important; max-height:56px !important; flex-wrap:nowrap !important; justify-content:flex-start !important; gap:14px !important; overflow-x:auto !important; overflow-y:hidden !important; -webkit-overflow-scrolling:touch !important; scrollbar-width:none !important; } body > header.nopnj-main-header .nopnj-main-nav::-webkit-scrollbar{ display:none !important; } body > header.nopnj-main-header .nopnj-main-nav a{ flex:0 0 auto !important; padding:0 !important; border:0 !important; background:transparent !important; font-size:11.5px !important; } } /* source: /assets/faq-inline-07.css?v=15b5d04d8bbb3480 */ /* === extracted faithful style block 07 from prod faq/index.html === */ @media(min-width:761px){ body > header.nopnj-main-header{ height:auto !important; min-height:76px !important; max-height:none !important; overflow:visible !important; } body > header.nopnj-main-header .nopnj-main-header-inner{ height:auto !important; min-height:76px !important; max-height:none !important; overflow:visible !important; } body > header.nopnj-main-header .nopnj-main-brand, body > header.nopnj-main-header .nopnj-main-nav{ height:auto !important; min-height:0 !important; max-height:none !important; } } /* source: /assets/faq-inline-08.css?v=15b5d04d8bbb3480 */ /* === extracted faithful style block 08 from prod faq/index.html === */ @media(min-width:761px){ body > header{ height:auto !important; min-height:76px !important; max-height:none !important; margin:0 !important; padding:0 !important; overflow:visible !important; } body > header .shell, body > header .nopnj-main-header-inner{ width:min(1220px, calc(100% - 36px)) !important; max-width:min(1220px, calc(100% - 36px)) !important; margin:0 auto !important; padding:0 !important; } body > header .shell.nav, body > header .nopnj-main-header-inner{ height:auto !important; min-height:76px !important; max-height:none !important; display:flex !important; align-items:center !important; justify-content:space-between !important; flex-direction:row !important; flex-wrap:nowrap !important; gap:22px !important; overflow:visible !important; } body > header .brand, body > header .nopnj-main-brand{ display:flex !important; align-items:center !important; gap:12px !important; flex:0 0 auto !important; height:auto !important; min-height:0 !important; max-height:none !important; margin:0 !important; padding:0 !important; font-family:Arial, Helvetica, sans-serif !important; font-size:22px !important; font-weight:950 !important; letter-spacing:-.06em !important; line-height:normal !important; text-transform:none !important; white-space:nowrap !important; } body > header .brand-mark, body > header .nopnj-main-brand-mark{ width:18px !important; height:18px !important; flex:0 0 auto !important; margin:0 !important; padding:0 !important; } body > header .nav-links, body > header .nopnj-main-nav{ height:auto !important; min-height:0 !important; max-height:none !important; display:flex !important; align-items:center !important; justify-content:flex-end !important; flex-wrap:wrap !important; gap:8px !important; margin:0 !important; padding:0 !important; overflow:visible !important; } body > header .nav-links a, body > header .nopnj-main-nav a{ height:auto !important; min-height:0 !important; max-height:none !important; margin:0 !important; padding:10px 12px !important; font-family:Arial, Helvetica, sans-serif !important; font-size:13px !important; font-weight:800 !important; letter-spacing:.08em !important; line-height:normal !important; text-transform:uppercase !important; white-space:nowrap !important; } } /* source: /assets/nopnj-footer-contract.css?v=15b5d04d8bbb3480 */ /* NO PNJ footer contract: one footer width everywhere in staging */ body > footer[data-testid]{ width:min(var(--max, 1220px), calc(100% - 36px)) !important; max-width:none !important; margin:56px auto 0 !important; padding:28px 0 36px !important; border-top:1px solid var(--line, rgba(255,255,255,.10)) !important; color:rgba(242,242,242,.48) !important; font-size:13px !important; text-align:center !important; box-sizing:border-box !important; background:transparent !important; } body > footer[data-testid] > .shell[data-testid]{ width:100% !important; max-width:none !important; margin-left:auto !important; margin-right:auto !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:10px !important; box-sizing:border-box !important; } /* Dev labels must not be captured by legacy footer > *:first-child rules. */ body > footer[data-testid] > .dev-block-label{ width:auto !important; max-width:none !important; min-width:0 !important; height:auto !important; margin:0 !important; padding:2px 5px !important; display:inline-block !important; flex:0 0 auto !important; align-items:initial !important; justify-content:initial !important; gap:0 !important; font:700 10px/1 Arial,Helvetica,sans-serif !important; } body > footer[data-testid] .nopnj-footer-brand{ color:rgba(242,242,242,.58) !important; font-weight:650 !important; letter-spacing:.02em !important; } body > footer[data-testid] .nopnj-footer-links{ display:flex !important; align-items:center !important; justify-content:center !important; flex-wrap:wrap !important; gap:10px !important; } body > footer[data-testid] .nopnj-footer-links a{ color:rgba(242,242,242,.54) !important; text-decoration:none !important; text-underline-offset:0 !important; font-weight:650 !important; transition:color .18s ease, opacity .18s ease !important; } body > footer[data-testid] .nopnj-footer-links a:hover, body > footer[data-testid] .nopnj-footer-links a:focus-visible, body > footer[data-testid] .nopnj-footer-links a[href*=facebook]:hover{ color:#FFD600 !important; outline:none !important; } body > footer[data-testid] .nopnj-footer-sep, body > footer[data-testid] .sep{ color:rgba(255,214,0,.34) !important; } @media (max-width:760px){ body > footer[data-testid]{ width:calc(100% - 24px) !important; } } /* source: /assets/nopnj-announcement-mode.css?v=15b5d04d8bbb3480 */ /* === NO PNJ announcement banner mode === Default OFF. Reactivate by adding .nopnj-announcement-on on or . */ html:not(.nopnj-announcement-on) body:not(.nopnj-announcement-on) > .prelaunch-notice{ display:none !important; visibility:hidden !important; height:0 !important; min-height:0 !important; max-height:0 !important; margin:0 !important; padding:0 !important; border:0 !important; overflow:hidden !important; } html.nopnj-announcement-on body > .prelaunch-notice, body.nopnj-announcement-on > .prelaunch-notice{ display:flex !important; visibility:visible !important; height:auto !important; max-height:none !important; overflow:visible !important; } /* source: /assets/header-chau-font.css?v=15b5d04d8bbb3480 */ /* === NO PNJ header Chau Philomene final override === */ @font-face{ font-family:"chau-philomene-one.italic"; src:url("/assets/fonts/ChauPhilomeneOne-Italic.woff?v=15b5d04d8bbb3480") 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?v=15b5d04d8bbb3480") format("truetype"); font-style:normal; font-weight:400; font-display:swap; } body > header .brand-main, body > header[data-testid="site.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:-.06em!important; } body > header .brand-declinaison, body > header[data-testid="site.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:.07em!important; } body .hero-copy > .kicker{ font-family:"chau-philomene-one.italic", Impact, "Arial Black", sans-serif!important; font-style:italic!important; font-weight:400!important; } body .hero-copy > .kicker::before{ display:none!important; content:none!important; } @media (hover: hover) and (pointer: fine) { body > header .brand-declinaison{ font-size:0!important; line-height:1!important; } body > header .brand-declinaison::after{ content:"TOUT SAUF UN PNJ"; display:block; color:rgba(242,242,242,.86); font-family:"chau-philomene-one.regular", Impact, "Arial Black", sans-serif!important; font-size:11px!important; font-style:normal!important; font-weight:400!important; letter-spacing:.18em!important; line-height:1!important; text-transform:uppercase; white-space:nowrap; } } @media (min-width: 901px) { body > header .brand-main, body > header[data-testid="site.header"] .brand-main{ font-size: 34px!important; line-height: 1!important; } body .hero-copy > .kicker{ font-size: clamp(13px, 1.08vw, 16px)!important; line-height: 1.08!important; letter-spacing:.13em!important; } } @media (hover: hover) and (pointer: fine) { body .hero-copy > .kicker{ opacity:.78; transform:translateY(-2px); transition:opacity .18s ease, transform .18s ease, text-shadow .18s ease; } body:has(> header .brand:hover) .hero-copy > .kicker, body:has(> header .brand:focus-visible) .hero-copy > .kicker{ opacity:1; transform:translateY(0); text-shadow:0 0 14px rgba(255,214,0,.20); } } @media (hover: hover) and (pointer: fine) { body .hero-copy > .kicker{ opacity:0!important; transform:translateY(-6px)!important; pointer-events:none!important; } body.is-desktop-brand-hover .hero-copy > .kicker, body:has(> header .brand:hover) .hero-copy > .kicker, body:has(> header .brand:focus-visible) .hero-copy > .kicker{ opacity:1!important; transform:translateY(0)!important; } } @media (hover: none), (pointer: coarse) { body .hero-copy > .kicker{ max-width:min(88vw, 620px)!important; opacity:0!important; transform:translateY(-6px)!important; pointer-events:none!important; font-size:clamp(11px, 2.9vw, 14px)!important; line-height:1.12!important; letter-spacing:.10em!important; transition:opacity .18s ease, transform .18s ease, text-shadow .18s ease; } body.is-touch-brand-active .hero-copy > .kicker, body:has(> header .brand.is-brand-active) .hero-copy > .kicker{ opacity:1!important; transform:translateY(0)!important; text-shadow:0 0 14px rgba(255,214,0,.18)!important; } body > header .brand.is-brand-active .brand-declinaison{ opacity:0!important; transform:translateY(-2px)!important; } } @media (hover: none), (pointer: coarse) { body .hero-copy > .kicker{ width:max-content!important; max-width:none!important; white-space:nowrap!important; font-size:clamp(7px, 1.8vw, 11px)!important; line-height:1!important; letter-spacing:.045em!important; } body.is-touch-brand-active .hero-copy > .kicker, body:has(> header .brand.is-brand-active) .hero-copy > .kicker{ opacity:1!important; transform:translateY(0)!important; } body.is-touch-brand-active > header .brand-declinaison, body > header .brand.is-brand-active .brand-declinaison{ opacity:1!important; transform:translateY(0)!important; } } /* NO_PNJ_HEADER_HERO_BASELINE_FINAL_START */ body .hero-copy > .kicker{ color:var(--yellow)!important; white-space:nowrap!important; } @media (hover: hover) and (pointer: fine) { body > header .brand-declinaison, body > header[data-testid="site.header"] .brand-declinaison{ font-size:0!important; line-height:1!important; color:transparent!important; } body > header .brand-declinaison::after, body > header[data-testid="site.header"] .brand-declinaison::after{ content:"TOUT SAUF UN PNJ"!important; display:block!important; color:rgba(242,242,242,.88)!important; font-family:"chau-philomene-one.regular", Impact, "Arial Black", sans-serif!important; font-size:11px!important; font-style:normal!important; font-weight:400!important; letter-spacing:.18em!important; line-height:1!important; text-transform:uppercase!important; white-space:nowrap!important; } body > header .brand:hover .brand-declinaison, body > header .brand:focus-visible .brand-declinaison, body.is-desktop-brand-hover > header .brand-declinaison{ opacity:1!important; transform:translateY(0)!important; } body .hero-copy > .kicker{ font-size:clamp(15px, 1.35vw, 20px)!important; line-height:1.05!important; letter-spacing:.08em!important; opacity:0!important; transform:translateY(-6px)!important; pointer-events:none!important; } body.is-desktop-brand-hover .hero-copy > .kicker, body:has(> header .brand:hover) .hero-copy > .kicker, body:has(> header .brand:focus-visible) .hero-copy > .kicker{ opacity:1!important; transform:translateY(0)!important; text-shadow:0 0 16px rgba(255,214,0,.24)!important; } } @media (hover: none), (pointer: coarse) { body > header .brand-declinaison, body > header .brand.is-brand-active .brand-declinaison, body.is-touch-brand-active > header .brand-declinaison{ opacity:0!important; transform:translateY(-2px)!important; } body .hero-copy > .kicker{ width:max-content!important; max-width:96vw!important; white-space:nowrap!important; overflow:visible!important; color:var(--yellow)!important; font-size:clamp(8px, 2.15vw, 12px)!important; line-height:1!important; letter-spacing:.025em!important; opacity:0!important; transform:translateY(-6px)!important; pointer-events:none!important; } body.is-touch-brand-active .hero-copy > .kicker, body:has(> header .brand.is-brand-active) .hero-copy > .kicker{ opacity:1!important; transform:translateY(0)!important; text-shadow:0 0 14px rgba(255,214,0,.20)!important; } } /* NO_PNJ_HEADER_HERO_BASELINE_FINAL_END */ /* NO_PNJ_TOUCH_HEADER_TOUT_SAUF_VISIBLE_START */ @media (hover: none), (pointer: coarse) { body > header .brand-declinaison, body > header[data-testid="site.header"] .brand-declinaison{ font-size:0!important; line-height:1!important; color:transparent!important; } body > header .brand-declinaison::after, body > header[data-testid="site.header"] .brand-declinaison::after{ content:"TOUT SAUF UN PNJ"!important; display:block!important; color:rgba(242,242,242,.88)!important; font-family:"chau-philomene-one.regular", Impact, "Arial Black", sans-serif!important; font-size:10px!important; font-style:normal!important; font-weight:400!important; letter-spacing:.16em!important; line-height:1!important; text-transform:uppercase!important; white-space:nowrap!important; } body.is-touch-brand-active > header .brand-declinaison, body > header .brand.is-brand-active .brand-declinaison{ opacity:1!important; transform:translateY(0)!important; } } /* NO_PNJ_TOUCH_HEADER_TOUT_SAUF_VISIBLE_END */ /* NO_PNJ_HERO_DECLINAISON_SIZE_UP_START */ @media (hover: hover) and (pointer: fine) { body .hero-copy > .kicker{ font-size:clamp(17px, 1.6vw, 24px)!important; letter-spacing:.065em!important; white-space:nowrap!important; } } @media (hover: none), (pointer: coarse) { body .hero-copy > .kicker{ font-size:clamp(10px, 2.6vw, 14px)!important; letter-spacing:.01em!important; white-space:nowrap!important; max-width:none!important; } } /* NO_PNJ_HERO_DECLINAISON_SIZE_UP_END */ /* NO_PNJ_TOUCH_HEADER_BASELINE_UNDER_LOGO_START */ @media (hover: none), (pointer: coarse) { body > header .brand{ position:relative!important; overflow:visible!important; } body > header .brand-label{ position:relative!important; overflow:visible!important; } body > header .brand-declinaison, body > header[data-testid="site.header"] .brand-declinaison{ position:absolute!important; top:calc(100% + 5px)!important; right:auto!important; bottom:auto!important; left:0!important; z-index:30!important; width:max-content!important; max-width:none!important; text-align:left!important; opacity:0!important; transform:translateY(-3px)!important; pointer-events:none!important; } body > header .brand-declinaison::after, body > header[data-testid="site.header"] .brand-declinaison::after{ font-size:9px!important; letter-spacing:.13em!important; text-align:left!important; } body.is-touch-brand-active > header .brand-declinaison, body > header .brand.is-brand-active .brand-declinaison{ opacity:1!important; transform:translateY(0)!important; } } /* NO_PNJ_TOUCH_HEADER_BASELINE_UNDER_LOGO_END */ /* NO_PNJ_MOBILE_PORTRAIT_HERO_DECLINAISON_UP_START */ @media (hover: none) and (pointer: coarse) and (orientation: portrait) { body .hero-copy > .kicker{ width:100%!important; max-width:100%!important; min-width:0!important; white-space:nowrap!important; overflow:visible!important; text-align:left!important; font-size:clamp(11px, 3.15vw, 15px)!important; letter-spacing:0!important; line-height:1!important; } } /* NO_PNJ_MOBILE_PORTRAIT_HERO_DECLINAISON_UP_END */ /* Keep the declinaison line in Chau, without italic slant. */ body > header .brand-declinaison, body > header[data-testid="site.header"] .brand-declinaison, body > header .brand-declinaison::after, body > header[data-testid="site.header"] .brand-declinaison::after{ font-family:"chau-philomene-one.regular", Impact, "Arial Black", sans-serif!important; font-style:normal!important; font-synthesis-style:none!important; } /* Keep the yellow hero declinaison text in Chau, without italic slant. */ body .hero-copy > .kicker{ font-family:"chau-philomene-one.regular", Impact, "Arial Black", sans-serif!important; font-style:normal!important; font-synthesis-style:none!important; } /* source: /assets/site-header-contract.css?v=15b5d04d8bbb3480 */ /* NO PNJ shared header/nav contract. Loaded last on every storefront page to neutralize page-local header drift. */ :root { --site-header-height: 76px; --site-header-height-mobile: 58px; --site-header-x: 18px; --site-header-x-mobile: 12px; } /* Shared decorative square full stop used by display titles. */ html body .nopnj-square-dot, html body .hero-dot, html body .yellow-dot, html body .lab-title-dot{ display:inline-block!important; position:relative!important; width:.16em!important; height:.16em!important; min-width:7px!important; min-height:7px!important; aspect-ratio:1 / 1!important; margin-left:.10em!important; vertical-align:-.055em!important; overflow:hidden!important; background:rgba(244,244,238,.88)!important; color:transparent!important; border-radius:0!important; font-size:1em!important; line-height:0!important; letter-spacing:0!important; text-indent:-9999px!important; text-shadow:none!important; box-shadow: 0 0 10px rgba(244,244,238,.18), 0 0 18px rgba(244,244,238,.08)!important; } html body .hero-dot, html body .yellow-dot, html body .lab-title-dot{ background:#FFD600!important; box-shadow: 0 0 12px rgba(255,214,0,.34), 0 0 24px rgba(255,214,0,.16)!important; } html body .nopnj-dot-keep{ white-space:nowrap!important; } @media (min-width:761px){ html body .nopnj-square-dot, html body .hero-dot, html body .yellow-dot, html body .lab-title-dot{ width:.16em!important; height:.16em!important; min-width:12px!important; min-height:12px!important; } } html body .nopnj-square-dot::before, html body .nopnj-square-dot::after, html body .hero-dot::before, html body .hero-dot::after, html body .yellow-dot::before, html body .yellow-dot::after, html body .lab-title-dot::before, html body .lab-title-dot::after{ content:none!important; display:none!important; } html body > header[data-testid="site.header"] { position: fixed !important; top: 0 !important; right: 0 !important; bottom: auto !important; left: 0 !important; z-index: 5000 !important; width: 100% !important; height: auto !important; min-height: var(--site-header-height) !important; max-height: none !important; overflow: visible !important; background: rgba(5, 5, 5, .92) !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; } html body > header[data-testid="site.header"] > .shell.nav { width: min(1320px, calc(100% - (var(--site-header-x) * 2))) !important; max-width: min(1320px, calc(100% - (var(--site-header-x) * 2))) !important; height: var(--site-header-height) !important; min-height: var(--site-header-height) !important; max-height: none !important; margin: 0 auto !important; padding: 0 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 22px !important; overflow: visible !important; } html body > header[data-testid="site.header"] .brand, html body > header[data-testid="site.header"] .brand * { box-sizing: border-box !important; text-decoration: none !important; } html body > header[data-testid="site.header"] .brand { flex: 0 0 auto !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 0 !important; position: relative !important; min-width: max-content !important; min-height: 0 !important; overflow: visible !important; color: var(--text, #f2f2f2) !important; font-size: 27px !important; line-height: 1 !important; white-space: nowrap !important; isolation: isolate !important; } html body > header[data-testid="site.header"] .brand-mark { display: none !important; } html body > header[data-testid="site.header"] .brand-label { position: relative !important; display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 13px !important; min-width: 0 !important; max-width: none !important; } html body > header[data-testid="site.header"] .brand-main { display: block !important; color: var(--text, #f2f2f2) !important; font-size: inherit !important; line-height: .9 !important; } html body > header[data-testid="site.header"] .brand-baseline { display: block !important; position: static !important; width: max-content !important; color: rgba(242,242,242,.82) !important; font-family: "chau-philomene-one.regular", Impact, "Arial Black", sans-serif !important; font-size: 13px !important; font-style: normal !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: .14em !important; text-transform: uppercase !important; white-space: nowrap !important; pointer-events: none !important; opacity: 0 !important; transform: translateX(-3px) !important; transition: opacity .18s ease, transform .18s ease !important; } html body > header[data-testid="site.header"] .brand:hover .brand-baseline { opacity: 1 !important; transform: translateY(0) !important; } @media (hover: none), (pointer: coarse), (max-width: 760px) { html body > header[data-testid="site.header"] .brand.is-brand-active .brand-baseline { opacity: 1 !important; transform: translateY(0) !important; } } html body > header[data-testid="site.header"] .nav-links { flex: 0 1 auto !important; min-width: 0 !important; width: auto !important; max-width: 100% !important; height: auto !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: nowrap !important; gap: 8px !important; overflow: visible !important; } html body > header[data-testid="site.header"] .nav-links a { position: relative !important; flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 44px !important; height: auto !important; padding: 0 12px !important; border: 0 !important; background: transparent !important; color: var(--muted, #9a9a9a) !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1 !important; text-transform: uppercase !important; letter-spacing: .08em !important; text-decoration: none !important; white-space: nowrap !important; } html body > header[data-testid="site.header"] .nav-links a::after { content: "" !important; position: absolute !important; left: 12px !important; right: 12px !important; bottom: 8px !important; height: 1px !important; background: var(--yellow, #ffd600) !important; transform: scaleX(0) !important; transform-origin: left center !important; transition: transform .18s ease !important; } html body > header[data-testid="site.header"] .nav-links a:hover, html body > header[data-testid="site.header"] .nav-links a:focus-visible, html body > header[data-testid="site.header"] .nav-links a.is-active { color: var(--text, #f2f2f2) !important; outline: none !important; } html body > header[data-testid="site.header"] .nav-links a:hover::after, html body > header[data-testid="site.header"] .nav-links a:focus-visible::after, html body > header[data-testid="site.header"] .nav-links a.is-active::after { transform: scaleX(1) !important; } @media (max-width: 760px) { html body > header[data-testid="site.header"] { min-height: var(--site-header-height-mobile) !important; } html body > header[data-testid="site.header"] > .shell.nav { width: calc(100% - (var(--site-header-x-mobile) * 2)) !important; max-width: calc(100% - (var(--site-header-x-mobile) * 2)) !important; height: var(--site-header-height-mobile) !important; min-height: var(--site-header-height-mobile) !important; gap: 10px !important; } html body > header[data-testid="site.header"] .brand { height: var(--site-header-height-mobile) !important; font-size: 20px !important; min-width: max-content !important; align-self: center !important; } html body > header[data-testid="site.header"] .brand-main { font-size: 20px !important; } html body > header[data-testid="site.header"] .brand-label { position: relative !important; gap: 7px !important; } html body > header[data-testid="site.header"] .brand-baseline { font-size: clamp(9px, 2.2vw, 11px) !important; letter-spacing: .08em !important; } html body > header[data-testid="site.header"] .nav-links { flex: 1 1 auto !important; height: var(--site-header-height-mobile) !important; justify-content: flex-end !important; gap: clamp(8px, 2.5vw, 14px) !important; margin-left: auto !important; overflow-x: visible !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; } html body > header[data-testid="site.header"] .nav-links::-webkit-scrollbar { display: none !important; } html body > header[data-testid="site.header"] .nav-links a { height: var(--site-header-height-mobile) !important; min-height: var(--site-header-height-mobile) !important; padding: 0 !important; font-size: 10.5px !important; line-height: 1 !important; } html body > header[data-testid="site.header"] .nav-links a::after { left: 0 !important; right: 0 !important; bottom: 12px !important; } } /* source: /assets/nopnj-cursor.css?v=15b5d04d8bbb3480 */ /* NO PNJ cursor layer: desktop precision pointers only. */ @media (hover: hover) and (pointer: fine) { html.nopnj-cursor-loading, html.nopnj-cursor-loading *, html.nopnj-loader-active, html.nopnj-loader-active * { cursor: none !important; } .nopnj-loading-cursor { position: fixed; left: 50vw; top: 50vh; z-index: 2147483647; width: 46px; height: 46px; pointer-events: none; opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.92); transition: opacity .2s ease, transform .2s ease; will-change: left, top, opacity, transform; mix-blend-mode: screen; } html.nopnj-cursor-loading .nopnj-loading-cursor, html.nopnj-loader-active .nopnj-loading-cursor { opacity: .9; transform: translate3d(-50%, -50%, 0) scale(1); } .nopnj-loading-cursor svg { display: block; width: 100%; height: 100%; overflow: visible; animation: nopnjCursorWireSpin 1.35s linear infinite; filter: drop-shadow(0 0 4px rgba(248, 244, 228, .16)) drop-shadow(0 0 10px rgba(248, 244, 228, .08)); transform-origin: 50% 50%; } .nopnj-loading-cursor path { fill: none; stroke: rgba(248, 244, 228, .88); stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } } @media (hover: none), (pointer: coarse) { .nopnj-loading-cursor { display: none !important; } } @keyframes nopnjCursorWireSpin { to { transform: rotate(360deg); } }