/* =========================================================
   Peau Neuve — Détatouage laser Pully · Lausanne
   Direction visuelle : Swiss Quiet Precision
   ========================================================= */

/* --- Tokens ---------------------------------------------- */
:root {
  --pn-bg:        #F4F1EA;
  --pn-surface:   #FFFFFF;
  --pn-ink:       #1A1714;
  --pn-ink-soft:  #5C544A;
  --pn-line:      #E2DCD0;
  --pn-accent:    #A8704C;
  --pn-accent-soft: #E8D9CC;
  --pn-danger:    #B23A3A;

  --pn-serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --pn-sans:  "Inter Tight", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --pn-mono:  "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --pn-section: 120px;
  --pn-gap:     36px;
  --pn-max:     1280px;
  --pn-pad-x:   48px;

  --pn-ease:    cubic-bezier(.22,.61,.36,1);
}

@media (max-width: 900px) {
  :root { --pn-section: 80px; --pn-pad-x: 24px; --pn-gap: 24px; }
}
@media (max-width: 600px) {
  :root { --pn-section: 64px; --pn-pad-x: 20px; }
}

/* --- Reset & base ---------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
figure { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
body {
  margin: 0;
  background: var(--pn-bg);
  color: var(--pn-ink);
  font-family: var(--pn-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
img { background: var(--pn-line); }

a { color: inherit; text-decoration: none; transition: opacity .15s var(--pn-ease); }
a:hover { opacity: .65; }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--pn-ink);
  outline-offset: 3px;
  opacity: 1;
}
button { font: inherit; cursor: pointer; background: transparent; border: 0; color: inherit; }

::selection { background: var(--pn-accent); color: var(--pn-bg); }

/* Skip link */
.pn-skip {
  position: absolute; top: -100px; left: 0;
  background: var(--pn-ink); color: var(--pn-bg);
  padding: 12px 18px; font-family: var(--pn-mono); font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase;
  z-index: 100; transition: top .2s var(--pn-ease);
}
.pn-skip:focus { top: 0; opacity: 1; }

/* Honeypot — accessibility safe */
.pn-honeypot {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --- Layout primitives ----------------------------------- */
.pn-container {
  max-width: var(--pn-max);
  margin: 0 auto;
  padding: 0 var(--pn-pad-x);
}
.pn-section { padding: var(--pn-section) 0; }
.pn-section--narrow { padding: calc(var(--pn-section) * .7) 0; }

.pn-grid { display: grid; gap: var(--pn-gap); }
.pn-grid--2 { grid-template-columns: 1fr 1fr; }
.pn-grid--3 { grid-template-columns: repeat(3, 1fr); }
.pn-grid--4 { grid-template-columns: repeat(4, 1fr); }
.pn-grid--hero { grid-template-columns: 1.1fr .9fr; align-items: end; gap: 64px; }
.pn-grid--studio { grid-template-columns: 1fr 1.1fr; align-items: center; gap: 80px; }
.pn-grid--faq { grid-template-columns: .7fr 1.3fr; align-items: start; gap: 80px; }
.pn-grid--quote { grid-template-columns: 1fr 1.2fr; align-items: start; gap: 80px; }
.pn-grid--page { grid-template-columns: 1.4fr 1fr; align-items: end; gap: 64px; }

@media (max-width: 1100px) {
  .pn-grid--hero, .pn-grid--studio, .pn-grid--faq,
  .pn-grid--quote, .pn-grid--page { grid-template-columns: 1fr; gap: 48px; }
  .pn-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .pn-grid--2 { grid-template-columns: 1fr !important; gap: 32px !important; }
}
@media (max-width: 720px) {
  .pn-grid--3, .pn-grid--4 { grid-template-columns: 1fr; }
}

/* --- Typography ------------------------------------------ */
.pn-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--pn-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--pn-ink-soft); margin: 0 0 18px;
}
.pn-eyebrow::before {
  content: ""; width: 24px; height: 1px;
  background: var(--pn-ink); display: block;
}

.pn-h1 {
  font-family: var(--pn-serif); font-weight: 400;
  font-size: clamp(40px, 6.4vw, 96px);
  line-height: 1.02; letter-spacing: -.025em;
  margin: 0; color: var(--pn-ink);
  text-wrap: balance;
}
.pn-h1 em, .pn-h2 em, .pn-h3 em { font-style: italic; color: var(--pn-accent); }
.pn-h1 .pn-dot { font-style: italic; color: var(--pn-accent); }

.pn-h2 {
  font-family: var(--pn-serif); font-weight: 400;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.05; letter-spacing: -.02em;
  margin: 0; color: var(--pn-ink);
  max-width: 720px; text-wrap: balance;
}
.pn-h3 {
  font-family: var(--pn-serif); font-weight: 400;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.15; letter-spacing: -.01em;
  margin: 0; color: var(--pn-ink);
}
.pn-lead {
  font-size: 17px; line-height: 1.55;
  color: var(--pn-ink-soft); max-width: 460px;
}
.pn-prose p { font-size: 16px; line-height: 1.65; color: var(--pn-ink-soft); }
.pn-prose p + p { margin-top: 14px; }

.pn-mono {
  font-family: var(--pn-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--pn-ink-soft);
}

.pn-section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 48px; flex-wrap: wrap;
}
.pn-section-head__right { font-size: 14px; color: var(--pn-ink); }
.pn-link-underline {
  border-bottom: 1px solid var(--pn-ink);
  padding-bottom: 4px;
}

/* --- Buttons --------------------------------------------- */
.pn-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--pn-sans); font-size: 14px;
  padding: 16px 26px; letter-spacing: .005em;
  border: 1px solid transparent; cursor: pointer;
  transition: opacity .15s, background .2s, color .2s, border-color .2s;
}
.pn-btn--solid { background: var(--pn-ink); color: var(--pn-bg); }
.pn-btn--solid:hover { opacity: .88; }
.pn-btn--ghost {
  background: transparent; color: var(--pn-ink);
  border: 1px solid var(--pn-line);
}
.pn-btn--ghost:hover { border-color: var(--pn-ink); opacity: 1; }
.pn-btn--link {
  padding: 16px 4px; background: transparent; color: var(--pn-ink);
  border-bottom: 1px solid var(--pn-ink);
  border-radius: 0;
}
.pn-btn[disabled] {
  background: var(--pn-line); color: var(--pn-ink-soft);
  cursor: not-allowed;
}
.pn-btn__arrow { width: 14px; height: 10px; flex-shrink: 0; }

/* --- Header ---------------------------------------------- */
.pn-header {
  position: sticky; top: 0; z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .25s var(--pn-ease), border-color .25s var(--pn-ease), backdrop-filter .25s var(--pn-ease);
}
.pn-header--scrolled {
  background: rgba(244,241,234,.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--pn-line);
}
.pn-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 0;
}
.pn-logo { display: inline-flex; align-items: center; gap: 10px; }
.pn-logo svg { display: block; flex-shrink: 0; }
.pn-logo__word {
  font-family: var(--pn-serif); font-size: 16px; font-weight: 500;
  letter-spacing: .01em; color: var(--pn-ink);
}
.pn-logo__sub {
  color: var(--pn-ink-soft); font-style: italic; font-size: 14px;
}
.pn-nav { display: flex; gap: 36px; }
.pn-nav a {
  font-size: 13px; letter-spacing: .005em; color: var(--pn-ink);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  opacity: .75;
}
.pn-nav a[aria-current="page"] {
  border-bottom-color: var(--pn-ink); opacity: 1;
}
.pn-header__cta { white-space: nowrap; }

.pn-burger {
  display: none; width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border: 1px solid var(--pn-line);
}
.pn-burger__bars, .pn-burger__bars::before, .pn-burger__bars::after {
  content: ""; display: block; width: 18px; height: 1.5px; background: var(--pn-ink);
  transition: transform .25s var(--pn-ease), opacity .25s var(--pn-ease);
}
.pn-burger__bars { position: relative; }
.pn-burger__bars::before { position: absolute; top: -6px; left: 0; }
.pn-burger__bars::after  { position: absolute; top:  6px; left: 0; }
.pn-burger[aria-expanded="true"] .pn-burger__bars { background: transparent; }
.pn-burger[aria-expanded="true"] .pn-burger__bars::before { transform: translateY(6px) rotate(45deg); }
.pn-burger[aria-expanded="true"] .pn-burger__bars::after  { transform: translateY(-6px) rotate(-45deg); }

.pn-mobile-nav {
  display: none;
  position: fixed; inset: 64px 0 0 0; z-index: 49;
  background: var(--pn-bg);
  padding: 32px var(--pn-pad-x);
  flex-direction: column; gap: 8px;
  border-top: 1px solid var(--pn-line);
}
.pn-mobile-nav[aria-hidden="false"] { display: flex; }
.pn-mobile-nav a {
  font-family: var(--pn-serif); font-size: 28px;
  padding: 10px 0; border-bottom: 1px solid var(--pn-line);
  color: var(--pn-ink);
}
.pn-mobile-nav a.pn-btn {
  font-family: var(--pn-sans); font-size: 14px;
  padding: 16px 26px; border-bottom: 0;
  margin-top: 24px; justify-content: center;
}
.pn-mobile-nav a.pn-btn--solid { color: var(--pn-bg); background: var(--pn-ink); }
.pn-mobile-nav a.pn-btn--ghost  { color: var(--pn-ink); border: 1px solid var(--pn-line); }

@media (max-width: 900px) {
  .pn-nav, .pn-header__cta { display: none; }
  .pn-burger { display: inline-flex; }
}

/* --- Hero ------------------------------------------------ */
.pn-hero { padding: calc(var(--pn-section) * .6) 0 var(--pn-section); }
.pn-hero__cta-row {
  display: flex; gap: 14px; align-items: center;
  margin: 36px 0 56px; flex-wrap: wrap;
}
.pn-hero__trust {
  display: flex; gap: 28px; flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid var(--pn-line);
}
.pn-trust-item { display: flex; flex-direction: column; gap: 4px; }
.pn-trust-item__label {
  font-family: var(--pn-mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--pn-ink-soft);
}
.pn-trust-item__value { font-size: 13px; color: var(--pn-ink); }

/* Hero card with stats */
.pn-hero__media { position: relative; }
.pn-hero__cardstack {
  position: absolute; bottom: -32px; left: -32px;
  background: var(--pn-surface); padding: 20px 24px;
  border: 1px solid var(--pn-line); width: 260px;
  z-index: 2;
}
.pn-hero__cardstack-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px;
  font-size: 13px;
}
@media (max-width: 600px) {
  .pn-hero__cardstack {
    position: static; width: auto; margin-top: 24px;
  }
}

/* --- Hero editorial photo (replaces fake slider) --------- */
.pn-hero__photo {
  position: relative;
  aspect-ratio: 5/6;
  width: 100%;
  overflow: hidden;
  background: #1A1714;
}
.pn-hero__photo img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.pn-hero__photo-label {
  position: absolute; top: 16px; left: 16px;
  background: rgba(255,255,255,.92);
  padding: 8px 12px;
  font-family: var(--pn-mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--pn-ink);
}

/* --- Team subsection (in dark Studio band) --------------- */
.pn-team {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,.15);
}
.pn-team__heading {
  font-family: var(--pn-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.5); margin-bottom: 24px;
}
.pn-team__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
}
.pn-team__member {
  display: flex; gap: 16px; align-items: center;
}
.pn-team__photo {
  width: 80px; height: 80px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0;
  background: #2A2522;
}
.pn-team__photo img {
  width: 100%; height: 100%; object-fit: cover;
}
.pn-team__name {
  font-family: var(--pn-serif); font-size: 22px;
  font-weight: 400; color: var(--pn-bg);
  line-height: 1.1;
}
.pn-team__role {
  font-size: 12px; color: rgba(255,255,255,.6);
  margin-top: 4px;
}
@media (max-width: 600px) { .pn-team__grid { grid-template-columns: 1fr; } }

/* --- CTA case card (last in 3-up grid) ------------------- */
.pn-case--cta {
  background: var(--pn-ink);
  color: var(--pn-bg);
  padding: 28px;
  display: flex; flex-direction: column; gap: 16px;
  justify-content: space-between;
  aspect-ratio: 4/5;
  position: relative;
}
.pn-case--cta .pn-case__zone { color: var(--pn-bg); font-size: 28px; }
.pn-case--cta .pn-case__type { color: rgba(255,255,255,.65); font-size: 14px; line-height: 1.5; }
.pn-case--cta .pn-mono { color: var(--pn-accent-soft); }
.pn-case--cta::after {
  content: "→"; position: absolute; bottom: 28px; right: 28px;
  font-size: 24px; color: var(--pn-accent-soft);
}

/* --- Transparency banner (results page) ------------------ */
.pn-banner {
  background: var(--pn-accent-soft);
  border-left: 3px solid var(--pn-accent);
  padding: 20px 24px;
  margin: 0 0 32px;
  font-size: 14px; line-height: 1.55;
  color: var(--pn-ink);
}
.pn-banner strong { font-weight: 500; }

/* --- Before/After slider --------------------------------- */
.pn-ba {
  position: relative; aspect-ratio: 5/6; width: 100%;
  cursor: ew-resize; user-select: none;
  background: #1A1714; overflow: hidden;
  touch-action: none;
}
.pn-ba__layer { position: absolute; inset: 0; overflow: hidden; }
.pn-ba__layer img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.pn-ba__before {
  clip-path: polygon(0 0, var(--pos,50%) 0, var(--pos,50%) 100%, 0 100%);
}
.pn-ba__label {
  position: absolute;
  font-family: var(--pn-mono); font-size: 10px;
  letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255,255,255,.85); padding: 4px 8px;
  background: rgba(0,0,0,.4);
}
.pn-ba__label--before { bottom: 18px; left: 20px; }
.pn-ba__label--after  { bottom: 18px; right: 20px; }
.pn-ba__divider {
  position: absolute; top: 0; bottom: 0;
  left: var(--pos,50%); width: 1px;
  background: rgba(255,255,255,.85);
  transform: translateX(-.5px);
  pointer-events: none;
}
.pn-ba__handle {
  position: absolute; top: 50%; left: 50%;
  width: 40px; height: 40px; border-radius: 50%;
  background: #FFFFFF; border: 1px solid var(--pn-accent);
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.pn-ba input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: ew-resize; margin: 0;
}

/* --- Marquee bar ----------------------------------------- */
.pn-marquee {
  border-top: 1px solid var(--pn-line);
  border-bottom: 1px solid var(--pn-line);
  padding: 20px 0; overflow: hidden;
  background: var(--pn-bg);
}
.pn-marquee__track {
  display: flex; gap: 56px; white-space: nowrap;
  animation: pn-marquee 38s linear infinite;
  font-family: var(--pn-mono); font-size: 11px;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--pn-ink-soft); will-change: transform;
}
.pn-marquee__item { display: inline-flex; align-items: center; gap: 56px; }
.pn-marquee__dot {
  width: 4px; height: 4px; background: var(--pn-accent); border-radius: 50%;
}
@keyframes pn-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.333%); }
}
@media (prefers-reduced-motion: reduce) {
  .pn-marquee__track { animation: none; }
}

/* --- How it works ---------------------------------------- */
.pn-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 64px; }
.pn-step { border-top: 1px solid var(--pn-ink); padding-top: 24px; }
.pn-step__num {
  font-family: var(--pn-mono); font-size: 11px;
  letter-spacing: .1em; color: var(--pn-accent); margin-bottom: 24px;
}
.pn-step__num span { color: var(--pn-ink-soft); }
.pn-step__title { margin-bottom: 14px; }
.pn-step__body { font-size: 14px; line-height: 1.55; color: var(--pn-ink-soft); margin: 0; }
@media (max-width: 1100px) { .pn-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .pn-steps { grid-template-columns: 1fr; } }

/* --- Results --------------------------------------------- */
.pn-filters {
  display: flex; gap: 8px; margin: 48px 0 32px;
  flex-wrap: wrap;
}
.pn-filter {
  font-family: var(--pn-sans); font-size: 13px; padding: 10px 18px;
  border: 1px solid var(--pn-line); background: transparent;
  color: var(--pn-ink); letter-spacing: .005em;
}
.pn-filter[aria-pressed="true"] {
  border-color: var(--pn-ink); background: var(--pn-ink); color: var(--pn-bg);
}

.pn-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pn-case { display: flex; flex-direction: column; gap: 14px; }
.pn-case__media {
  position: relative; aspect-ratio: 4/5; overflow: hidden;
  background: var(--pn-line);
}
.pn-case__media img {
  width: 100%; height: 100%; object-fit: cover;
}
.pn-case__tag {
  position: absolute; top: 0; right: 0;
  font-family: var(--pn-mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--pn-surface); padding: 6px 10px; color: var(--pn-ink);
}
.pn-case__num {
  position: absolute; bottom: 12px; left: 12px;
  background: var(--pn-surface); padding: 6px 10px;
  font-family: var(--pn-mono); font-size: 10px;
  letter-spacing: .1em; color: var(--pn-accent);
}
.pn-case__zone { font-family: var(--pn-serif); font-size: 22px; color: var(--pn-ink); }
.pn-case__type { font-size: 13px; color: var(--pn-ink-soft); margin-top: 2px; }
.pn-case__meta {
  display: flex; gap: 16px; margin-top: 12px;
  font-family: var(--pn-mono); font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--pn-ink-soft);
}
@media (max-width: 1100px) { .pn-cases { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .pn-cases { grid-template-columns: 1fr; } }

/* Featured 2-col layout: 1 real case + 1 large CTA card (resultats page) */
.pn-cases--featured {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.95fr);
  gap: 32px; align-items: stretch;
}
@media (max-width: 820px) {
  .pn-cases--featured { grid-template-columns: 1fr !important; }
}

/* --- Studio (dark band) ---------------------------------- */
.pn-studio {
  background: var(--pn-ink); color: var(--pn-bg);
  padding: var(--pn-section) 0;
}
.pn-studio__media {
  aspect-ratio: 5/6; overflow: hidden; background: #0E0C0A;
}
.pn-studio__media img { width: 100%; height: 100%; object-fit: cover; }
.pn-studio .pn-eyebrow { color: rgba(255,255,255,.5); }
.pn-studio .pn-eyebrow::before { background: var(--pn-bg); }
.pn-studio .pn-h2 { color: var(--pn-bg); }
.pn-studio .pn-h2 em { color: var(--pn-accent-soft); }
.pn-studio__lede {
  font-size: 16px; line-height: 1.6;
  color: rgba(255,255,255,.75); max-width: 520px; margin-top: 32px;
}
.pn-studio__stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  margin-top: 48px; padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,.15);
}
.pn-stat__num {
  font-family: var(--pn-serif); font-size: 40px;
  color: var(--pn-accent-soft); line-height: 1;
}
.pn-stat__label {
  font-size: 13px; color: rgba(255,255,255,.6); margin-top: 8px;
}

/* --- Pricing --------------------------------------------- */
.pn-pricing {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--pn-line); margin-top: 56px;
  border: 1px solid var(--pn-line);
}
.pn-tier {
  background: var(--pn-surface); padding: 32px 28px;
  display: flex; flex-direction: column; min-height: 280px;
}
.pn-tier--featured { background: var(--pn-ink); color: var(--pn-bg); }
.pn-tier__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 24px;
}
.pn-tier__size { font-family: var(--pn-serif); font-size: 48px; line-height: 1; }
.pn-tier__num {
  font-family: var(--pn-mono); font-size: 10px;
  letter-spacing: .1em; color: var(--pn-ink-soft);
}
.pn-tier--featured .pn-tier__num { color: rgba(255,255,255,.5); }
.pn-tier__desc { font-size: 14px; margin-bottom: 6px; }
.pn-tier__note {
  font-size: 13px; line-height: 1.5;
  color: var(--pn-ink-soft); margin-bottom: auto;
}
.pn-tier--featured .pn-tier__note { color: rgba(255,255,255,.6); }
.pn-tier__foot {
  margin-top: 32px; padding-top: 20px;
  border-top: 1px solid var(--pn-line);
}
.pn-tier--featured .pn-tier__foot { border-top-color: rgba(255,255,255,.2); }
.pn-tier__foot-label {
  font-family: var(--pn-mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--pn-ink-soft); margin-bottom: 4px;
}
.pn-tier--featured .pn-tier__foot-label { color: rgba(255,255,255,.55); }
.pn-tier__price { font-family: var(--pn-serif); font-size: 32px; }
.pn-tier__price small { font-size: 16px; color: var(--pn-ink-soft); }
.pn-tier--featured .pn-tier__price small { color: rgba(255,255,255,.6); }
.pn-tier__price--quote { font-size: 22px; }
.pn-pricing-note {
  font-size: 13px; color: var(--pn-ink-soft);
  margin-top: 24px; max-width: 640px;
}
@media (max-width: 1100px) { .pn-pricing { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .pn-pricing { grid-template-columns: 1fr; } }

/* --- FAQ ------------------------------------------------- */
.pn-faq__sticky { position: sticky; top: 100px; }
.pn-faq__list { padding: 0; margin: 0; list-style: none; }
.pn-faq__item { border-bottom: 1px solid var(--pn-line); }
.pn-faq__btn {
  width: 100%; padding: 28px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  text-align: left; cursor: pointer;
}
.pn-faq__q { font-family: var(--pn-serif); font-size: clamp(18px, 2vw, 22px); color: var(--pn-ink); }
.pn-faq__icon {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--pn-ink);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 18px; line-height: 1;
  transition: all .2s var(--pn-ease);
}
.pn-faq__btn[aria-expanded="true"] .pn-faq__icon {
  background: var(--pn-ink); color: var(--pn-bg);
  transform: rotate(45deg);
}
.pn-faq__panel {
  max-height: 0; overflow: hidden;
  transition: max-height .35s var(--pn-ease), padding .35s var(--pn-ease);
}
.pn-faq__panel[aria-hidden="false"] {
  max-height: 600px; padding-bottom: 28px;
}
.pn-faq__panel p {
  font-size: 15px; line-height: 1.6;
  color: var(--pn-ink-soft); margin: 0; max-width: 640px;
}

/* --- Quote form ------------------------------------------ */
.pn-quote {
  background: var(--pn-surface);
  border-top: 1px solid var(--pn-line);
  border-bottom: 1px solid var(--pn-line);
  padding: var(--pn-section) 0;
}
.pn-quote__intro { max-width: 440px; }
.pn-quote__phone {
  margin-top: 40px; padding-top: 28px;
  border-top: 1px solid var(--pn-line);
  font-size: 14px; color: var(--pn-ink-soft); line-height: 1.7;
}
.pn-quote__phone strong { color: var(--pn-ink); font-weight: 500; }
.pn-quote__panel {
  background: var(--pn-bg); padding: 40px;
  border: 1px solid var(--pn-line);
}
@media (max-width: 600px) { .pn-quote__panel { padding: 24px; } }

.pn-stepper {
  display: flex; gap: 8px; margin-bottom: 32px;
}
.pn-stepper__bar {
  flex: 1; height: 2px; background: var(--pn-line);
  transition: background .3s var(--pn-ease);
}
.pn-stepper__bar.is-active { background: var(--pn-ink); }
.pn-stepper__label {
  font-family: var(--pn-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--pn-ink-soft); margin-bottom: 24px;
}

.pn-step-panel { display: none; flex-direction: column; gap: 20px; }
.pn-step-panel.is-active { display: flex; }

.pn-field { display: flex; flex-direction: column; gap: 8px; }
.pn-field__label {
  font-family: var(--pn-mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--pn-ink-soft);
}
.pn-input, .pn-textarea {
  width: 100%; padding: 14px 14px;
  font-family: var(--pn-sans); font-size: 14px;
  color: var(--pn-ink); background: transparent;
  border: 1px solid var(--pn-line);
  outline: none; box-sizing: border-box;
  transition: border-color .15s var(--pn-ease);
}
.pn-textarea { min-height: 88px; resize: vertical; }
.pn-input:focus, .pn-textarea:focus { border-color: var(--pn-ink); }
.pn-input[aria-invalid="true"], .pn-textarea[aria-invalid="true"] {
  border-color: var(--pn-danger);
}
.pn-error {
  font-size: 12px; color: var(--pn-danger);
  font-family: var(--pn-mono); letter-spacing: .04em;
  display: none;
}
.pn-error[aria-hidden="false"] { display: block; }

.pn-dropzone {
  border: 1px dashed var(--pn-line);
  background: transparent;
  padding: 32px 16px; text-align: center;
  font-size: 14px; color: var(--pn-ink);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  position: relative;
}
.pn-dropzone:hover, .pn-dropzone.is-hover {
  border-color: var(--pn-accent); background: var(--pn-accent-soft);
}
.pn-dropzone.has-file {
  border-color: var(--pn-accent); background: var(--pn-accent-soft);
}
.pn-dropzone input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
}
.pn-dropzone__hint { font-size: 11px; color: var(--pn-ink-soft); }

.pn-options { display: grid; gap: 6px; }
.pn-options--3 { grid-template-columns: repeat(3, 1fr); }
.pn-options--4 { grid-template-columns: repeat(4, 1fr); }
.pn-option {
  padding: 12px 8px; font-family: var(--pn-sans); font-size: 13px;
  border: 1px solid var(--pn-line); background: transparent;
  color: var(--pn-ink); cursor: pointer;
}
.pn-option[aria-pressed="true"] {
  background: var(--pn-ink); border-color: var(--pn-ink); color: var(--pn-bg);
}

.pn-consent {
  display: flex; gap: 12px; margin-top: 8px;
  font-size: 13px; color: var(--pn-ink-soft); line-height: 1.5;
  cursor: pointer;
}
.pn-consent input { margin-top: 3px; accent-color: var(--pn-ink); }
.pn-consent a { color: var(--pn-ink); text-decoration: underline; }

.pn-step-actions { display: flex; gap: 8px; margin-top: 12px; }
.pn-step-actions .pn-btn--solid { flex: 1; justify-content: center; }

.pn-success {
  text-align: center; padding: 20px 0 8px;
}
.pn-success__circle {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 24px;
  background: var(--pn-accent);
  display: flex; align-items: center; justify-content: center;
}
.pn-success h3 { font-family: var(--pn-serif); font-size: 28px; font-weight: 400; margin: 0; }
.pn-success p { font-size: 14px; color: var(--pn-ink-soft); margin: 14px 0 0; line-height: 1.6; }

/* --- Page header (sub-page hero) ------------------------- */
.pn-page-header {
  padding: calc(var(--pn-section) * .55) 0 calc(var(--pn-section) * .35);
}
.pn-page-header__lede {
  font-size: 17px; line-height: 1.55; color: var(--pn-ink-soft);
  margin: 0; padding-bottom: 8px;
}

/* --- Indication / contra-indication cards ---------------- */
.pn-cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 56px; }
.pn-card {
  padding: 28px 24px; background: var(--pn-surface);
  border: 1px solid var(--pn-line);
}
.pn-card__num {
  font-family: var(--pn-mono); font-size: 10px;
  letter-spacing: .1em; color: var(--pn-accent); margin-bottom: 16px;
}
.pn-card__title { margin: 0; }
.pn-card__body { font-size: 14px; line-height: 1.55; color: var(--pn-ink-soft); margin-top: 12px; }
@media (max-width: 1100px) { .pn-cards-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .pn-cards-4 { grid-template-columns: 1fr; } }

.pn-contra-list {
  list-style: none; padding: 0; margin: 0;
}
.pn-contra-list li {
  padding: 20px 0; font-size: 17px;
  color: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; gap: 16px;
}
.pn-contra-list li:first-child { border-top: 1px solid rgba(255,255,255,.2); }
.pn-contra-list span {
  font-family: var(--pn-mono); font-size: 11px;
  color: var(--pn-accent-soft);
  letter-spacing: .1em; min-width: 32px;
}

/* --- Includes grid (tarif page) --------------------------- */
.pn-includes { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 48px; }
.pn-includes > div { padding-top: 24px; border-top: 1px solid var(--pn-line); }
.pn-includes h3 { margin: 0; }
.pn-includes p { font-size: 15px; line-height: 1.55; color: var(--pn-ink-soft); margin-top: 8px; }
@media (max-width: 720px) { .pn-includes { grid-template-columns: 1fr; } }

/* --- Contact channels grid ------------------------------- */
.pn-channels {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--pn-line); border: 1px solid var(--pn-line);
}
.pn-channel {
  background: var(--pn-surface); padding: 32px 28px;
}
.pn-channel__label {
  font-family: var(--pn-mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--pn-ink-soft); margin-bottom: 14px;
}
.pn-channel__value {
  font-family: var(--pn-serif); font-size: 22px; color: var(--pn-ink);
}
.pn-channel__value a { color: inherit; }
.pn-channel__note {
  font-size: 13px; color: var(--pn-ink-soft);
  margin-top: 12px; line-height: 1.5;
}
@media (max-width: 900px) { .pn-channels { grid-template-columns: 1fr; } }

/* --- Footer ---------------------------------------------- */
.pn-footer {
  background: var(--pn-bg); padding: 80px 0 40px;
  border-top: 1px solid var(--pn-line);
}
.pn-footer__top {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px;
}
.pn-footer__brand p {
  font-size: 13px; color: var(--pn-ink-soft); line-height: 1.6;
  margin-top: 24px; max-width: 320px;
}
.pn-footer__col-title {
  font-family: var(--pn-mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--pn-ink-soft); margin-bottom: 16px;
}
.pn-footer__col ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.pn-footer__col a { font-size: 14px; color: var(--pn-ink); }
.pn-footer__bottom {
  margin-top: 80px; padding-top: 28px;
  border-top: 1px solid var(--pn-line);
  display: flex; justify-content: space-between; gap: 16px;
  font-family: var(--pn-mono); font-size: 11px;
  letter-spacing: .08em; color: var(--pn-ink-soft);
  text-transform: uppercase; flex-wrap: wrap;
}
@media (max-width: 1100px) {
  .pn-footer__top { grid-template-columns: 1fr 1fr; }
  .pn-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .pn-footer__top { grid-template-columns: 1fr; }
}

/* --- Utilities ------------------------------------------- */
.pn-sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.pn-mt-md { margin-top: 24px; }
.pn-mt-lg { margin-top: 56px; }
.pn-text-center { text-align: center; }

/* Reveal on scroll (subtle, optional) */
.pn-reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s var(--pn-ease), transform .6s var(--pn-ease);
}
.pn-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .pn-reveal { opacity: 1; transform: none; transition: none; }
}

/* Print */
@media print {
  .pn-header, .pn-footer, .pn-marquee, .pn-quote, .pn-burger, .pn-mobile-nav { display: none !important; }
  body { background: white; color: black; }
}