/* ============================================================
   Psyché Noire — DESIGN SYSTEM (extrait de la maquette validée)
   Tokens + effets + composants .pn-*. Polices auto-hébergées (cf style.css).
   ============================================================ */

/* Psyché Noire — Design System
   Global entry point. Consumers link THIS file only.
   Import order: fonts → tokens → effects. */
/* Psyché Noire — Webfonts
   Titles & quotes: Cormorant Garamond (elegant serif, often italic)
   Body & UI: Inter
   Loaded from Google Fonts. Substitute with self-hosted .woff2 for production. */

/* ============================================================
   Psyché Noire — COLOR SYSTEM
   Clair-obscur. No pure white, no pure black, no vivid color.
   Le noir respire : a graded blue-black, lit by slate violet.
   ============================================================ */
:root {
  /* --- Accent hue (single knob that rotates all violets) --- */
  --pn-accent-h: 258;          /* @kind other */

  /* --- Base ink (ivory, never pure white) --- */
  --pn-ivory:        #E8DED0;  /* primary text */
  --pn-ivory-soft:   #C9BFB2;  /* secondary text */
  --pn-ivory-dim:    #9C9385;  /* tertiary / captions */

  /* --- Graded blue-black surfaces (deep → raised) --- */
  --pn-void:         #08060F;  /* deepest, behind everything */
  --pn-bg:           #0D0B1A;  /* page background */
  --pn-surface-1:    #131022;  /* raised panel */
  --pn-surface-2:    #1A1629;  /* card */
  --pn-surface-3:    #221D33;  /* card hover / inset */

  /* --- Slate violet accents (derived from --pn-accent-h) --- */
  --pn-violet-deep:  hsl(var(--pn-accent-h) 30% 32%);  /* #4A3A6B */
  --pn-violet:       hsl(var(--pn-accent-h) 27% 49%);  /* #6E5A9E */
  --pn-violet-glow:  hsl(var(--pn-accent-h) 35% 62%);  /* lifted hover */
  --pn-mist:         hsl(var(--pn-accent-h) 14% 57%);  /* #8E84A0 brume */
  --pn-mist-faint:   hsl(var(--pn-accent-h) 12% 42%);

  /* --- Hairlines & borders (low-contrast, never harsh) --- */
  --pn-line:         hsl(var(--pn-accent-h) 18% 22%);
  --pn-line-soft:    hsl(var(--pn-accent-h) 16% 16%);
  --pn-line-strong:  hsl(var(--pn-accent-h) 22% 34%);

  /* ---------- Semantic aliases ---------- */
  --text-primary:    var(--pn-ivory);
  --text-secondary:  var(--pn-ivory-soft);
  --text-muted:      var(--pn-ivory-dim);
  --text-accent:     var(--pn-violet-glow);

  --surface-page:    var(--pn-bg);
  --surface-card:    var(--pn-surface-2);
  --surface-raised:  var(--pn-surface-1);

  --border-hairline: var(--pn-line);
  --border-soft:     var(--pn-line-soft);
  --border-accent:   var(--pn-line-strong);

  --focus-ring:      hsl(var(--pn-accent-h) 40% 58% / 0.55);
}

/* ============================================================
   Psyché Noire — TYPOGRAPHY
   Display & quotes: Cormorant Garamond (serif, often italic)
   Body & interface: Inter
   Large titles, generous leading, much emptiness.
   ============================================================ */
:root {
  --pn-font-serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --pn-font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Semantic families */
  --font-display: var(--pn-font-serif);
  --font-quote:   var(--pn-font-serif);
  --font-body:    var(--pn-font-sans);
  --font-ui:      var(--pn-font-sans);

  /* Type scale — fluid, cinematic.  Titles run large. */
  --fs-hero:    clamp(3rem, 7vw, 6rem);         /* @kind font */
  --fs-display: clamp(2.9rem, 6vw, 5.1rem);     /* @kind font */
  --fs-h2:      clamp(2.2rem, 4.2vw, 3.6rem);   /* @kind font */
  --fs-h3:      clamp(1.45rem, 2.3vw, 1.95rem); /* @kind font */
  --fs-quote:   clamp(2rem, 3.8vw, 3.2rem);     /* @kind font */
  --fs-lead:    clamp(1.05rem, 1.5vw, 1.3rem);  /* @kind font */
  --fs-body:    1.0625rem;   /* @kind font */
  --fs-small:   0.9375rem;   /* @kind font */
  --fs-eyebrow: 0.75rem;     /* @kind font */

  /* Leading — generous */
  --lh-tight:   1.08;   /* @kind other */
  --lh-snug:    1.25;   /* @kind other */
  --lh-body:    1.75;   /* @kind other */
  --lh-loose:   1.9;    /* @kind other */

  /* Tracking */
  --ls-eyebrow: 0.28em;   /* @kind other */
  --ls-display: -0.01em;  /* @kind other */
  --ls-body:    0.005em;  /* @kind other */

  /* Weights */
  --fw-light:   300;   /* @kind font */
  --fw-regular: 400;   /* @kind font */
  --fw-medium:  500;   /* @kind font */
  --fw-semi:    600;   /* @kind font */
}

/* ============================================================
   Psyché Noire — SPACING & RHYTHM
   Air is the luxury. Vertical sections breathe.
   --pn-rhythm scales every section's vertical padding (slider knob).
   ============================================================ */
:root {
  /* Base spacing scale (8px grid, with fine steps) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 192px;

  /* Vertical rhythm multiplier — section padding scales with this */
  --pn-rhythm: 1;   /* @kind other */
  --section-pad-y: calc(var(--space-10) * var(--pn-rhythm));
  --section-pad-y-sm: calc(var(--space-9) * var(--pn-rhythm));

  /* Layout widths */
  --measure:        68ch;      /* @kind other */
  --container:      1180px;    /* max content width */
  --container-wide: 1440px;
  --gutter:         clamp(20px, 5vw, 64px);   /* @kind spacing */

  /* Radii — quiet, never bubbly */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;
}

/* ============================================================
   Psyché Noire — EFFECTS
   Grain, subtle black gradients, soft contrasted light.
   Depth, silence, matter. Motion is sober.
   ============================================================ */
:root {
  /* Grain intensity (slider knob) — opacity of the film-grain overlay */
  --pn-grain: 0.06;   /* @kind other */

  /* Subtle black gradients — the void is never flat */
  --grad-vignette:
    radial-gradient(120% 80% at 50% -10%,
      hsl(var(--pn-accent-h) 30% 14% / 0.55) 0%,
      transparent 60%);
  --grad-depth:
    linear-gradient(180deg,
      var(--pn-void) 0%,
      var(--pn-bg) 22%,
      var(--pn-bg) 78%,
      var(--pn-void) 100%);
  --grad-hero:
    radial-gradient(140% 120% at 70% 20%,
      hsl(var(--pn-accent-h) 32% 18% / 0.45) 0%,
      transparent 55%),
    linear-gradient(180deg, var(--pn-void), var(--pn-bg));

  /* Soft contrasted light pooled around a focal point */
  --glow-soft: 0 0 80px -20px hsl(var(--pn-accent-h) 40% 40% / 0.4);

  /* Shadows — diffuse, low, never crisp */
  --shadow-card: 0 24px 60px -30px hsl(var(--pn-void) / 0.9);
  --shadow-lift: 0 36px 90px -40px hsl(var(--pn-accent-h) 40% 6% / 0.95);

  /* Motion — sober. Slow, eased, no bounce. */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */
  --ease-quiet: cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
  --dur-fast:  240ms;   /* @kind other */
  --dur-base:  420ms;   /* @kind other */
  --dur-slow:  720ms;   /* @kind other */
  --dur-fade:  1100ms;   /* @kind other */
}

/* Fine film grain — applied as a fixed overlay element or ::after.
   Reusable utility so the homepage and cards share one texture. */
.pn-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: var(--pn-grain);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+");
  background-size: 160px 160px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast:0ms; /* @kind other */ --dur-base:0ms; /* @kind other */ --dur-slow:0ms; /* @kind other */ --dur-fade:0ms; /* @kind other */ }
}

/* ============================================================
   Psyché Noire — Component interaction states
   Inline styles can't express :hover/:focus, so the sober
   hover/press polish for primitives lives here.
   ============================================================ */

/* ---- Button ---- */
.pn-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.pn-btn[data-variant="primary"]:hover:not(:disabled) {
  border-color: var(--pn-violet);
  background: hsl(var(--pn-accent-h) 30% 28% / 0.32);
  color: #fff0e2;
}
.pn-btn[data-variant="quiet"]:hover:not(:disabled) {
  border-color: var(--border-accent);
  color: var(--text-secondary);
}
.pn-btn[data-variant="ghost"]:hover:not(:disabled) {
  color: var(--text-primary);
}
.pn-btn:active:not(:disabled) { transform: translateY(1px); }

/* ---- Inputs ---- */
.pn-input {
  transition: border-color var(--dur-base) var(--ease-soft),
              background var(--dur-base) var(--ease-soft);
}
.pn-input::placeholder { color: var(--text-muted); opacity: 0.92; }
.pn-input:focus {
  outline: none;
  border-color: var(--pn-violet);
  background: hsl(var(--pn-accent-h) 24% 14% / 0.4);
}

/* Filled newsletter field + button ("La Lettre") */
.pn-lettre .pn-input::placeholder { color: var(--pn-ivory-soft); opacity: 0.85; }
.pn-lettre .pn-btn:hover:not(:disabled) {
  background: #5a4880 !important;
  border-color: var(--pn-violet-glow) !important;
  color: #fff2e6 !important;
}

/* ---- Card / row hover ---- */
.pn-card { transition: transform var(--dur-slow) var(--ease-soft),
                       border-color var(--dur-base) var(--ease-soft); }
.pn-card:hover { border-color: var(--border-accent); }
.pn-card:hover .pn-card__media { transform: scale(1.04); filter: none; }
.pn-card__media { transition: transform var(--dur-fade) var(--ease-soft),
                              filter var(--dur-slow) var(--ease-soft); }

.pn-pillar { transition: padding-left var(--dur-base) var(--ease-soft),
                         color var(--dur-base) var(--ease-soft),
                         border-color var(--dur-base) var(--ease-soft); }
.pn-pillar:hover { padding-left: 14px; border-color: var(--border-accent); }
.pn-pillar:hover .pn-pillar__arrow { opacity: 1; transform: translateX(0); }
.pn-pillar__arrow { opacity: 0; transform: translateX(-8px);
                    transition: all var(--dur-base) var(--ease-soft); }

/* ---- Nav link ---- */
.pn-navlink { position: relative; transition: color var(--dur-base) var(--ease-soft); }
.pn-navlink::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 1px; width: 100%;
  background: var(--pn-violet); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-soft);
}
.pn-navlink:hover { color: var(--text-primary); }
.pn-navlink:hover::after { transform: scaleX(1); }

  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--surface-page);
    color: var(--text-primary);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }
  /* The void breathes: a whole-page depth wash + a faint radial structure
     so the black is never flat. */
  body::before {
    content: ""; position: fixed; inset: 0; z-index: -10; pointer-events: none;
    background:
      radial-gradient(90% 60% at 78% 8%, hsl(var(--pn-accent-h) 32% 12% / 0.30) 0%, transparent 58%),
      radial-gradient(80% 55% at 12% 102%, hsl(var(--pn-accent-h) 28% 9% / 0.30) 0%, transparent 60%),
      var(--grad-depth);
  }
  /* A very fine, ever-present film grain across the whole page — gives the
     black matter and silence, independent of the per-section grain knob. */
  body::after {
    content: ""; position: fixed; inset: 0; z-index: -9; pointer-events: none;
    opacity: 0.05; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxODAnIGhlaWdodD0nMTgwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==");
    background-size: 180px 180px;
  }
  a { color: inherit; }
  ::selection { background: hsl(var(--pn-accent-h) 30% 32% / 0.6); color: #fff2e6; }

  /* Visible focus for keyboard users */
  a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--pn-violet-glow);
    outline-offset: 3px;
    border-radius: 2px;
  }
  /* Skip link — hidden until focused */
  .pn-skip {
    position: fixed; top: 12px; left: 12px; z-index: 100;
    transform: translateY(-160%);
    background: var(--pn-surface-2); color: var(--text-primary);
    border: 1px solid var(--border-accent); border-radius: var(--radius-sm);
    padding: 10px 18px; font-family: var(--font-ui); font-size: 0.85rem;
    letter-spacing: 0.08em; text-decoration: none;
    transition: transform var(--dur-fast) var(--ease-soft);
  }
  .pn-skip:focus { transform: translateY(0); }

  /* Article grid */
  .pn-card-grid {
    display: grid; gap: var(--space-6);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .pn-authority { grid-template-columns: 1fr; }

  /* Newsletter two-column module — phrase | inscription, stacks on mobile */
  .pn-lettre-grid { grid-template-columns: 1fr 1fr; }
  @media (max-width: 760px) { .pn-lettre-grid { grid-template-columns: 1fr; } }

  /* Scroll reveal — base is the visible end state; animate from hidden.
     A soft fondu: fade + rise + a faint blur clearing, staggered per item. */
  @media (prefers-reduced-motion: no-preference) {
    [data-reveal] { opacity: 0; transform: translateY(30px); filter: blur(5px); }
    [data-reveal].is-visible {
      opacity: 1; transform: none; filter: blur(0);
      transition: opacity var(--dur-fade) var(--ease-soft),
                  transform var(--dur-fade) var(--ease-soft),
                  filter var(--dur-fade) var(--ease-soft);
      transition-delay: var(--reveal-delay, 0ms);
    }
  }

  @media (min-width: 920px) {
    .pn-authority { grid-template-columns: 1.1fr 0.9fr; align-items: start; }
  }
  @media (max-width: 860px) {
    .pn-card-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  }
  @media (max-width: 760px) {
    .pn-nav-list { display: none !important; }
    .pn-nav-toggle { display: flex !important; }
  }

/* ============================================================
   Psyché Noire — COMPOSANTS ARTICLE (extrait maquette article)
   .prose, .pn-chapo, .pn-exergue, encadré référence, .pn-faq,
   .pn-sources, .pn-affil, .pn-toc, .pn-related-grid, .pn-note
   ============================================================ */



  /* Footnote markers — quiet superscript links to the Sources list. */
  .pn-note { font-size: 0.62em; line-height: 0; }


  .pn-note a {
    color: var(--text-accent); text-decoration: none; padding: 0 0.1em 0 0.15em;
    font-family: var(--font-ui); font-weight: var(--fw-medium); vertical-align: super;
  }


  .pn-note a:hover { color: var(--pn-violet-glow); }



  /* Sources list. */
  .pn-sources { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }


  .pn-sources li {
    display: grid; grid-template-columns: 2.2ch 1fr; gap: var(--space-4);
    padding: var(--space-4) 0; border-top: 1px solid var(--border-hairline);
    font-family: var(--font-body); font-weight: var(--fw-regular); font-size: 1rem;
    line-height: var(--lh-body); color: var(--text-secondary);
  }


  .pn-sources li:last-child { border-bottom: 1px solid var(--border-hairline); }


  .pn-sources__n { font-family: var(--font-ui); font-size: 0.8rem; letter-spacing: 0.08em; color: var(--text-secondary); }


  /* CORRECTIF 06/08/2026 — « un mot par ligne » dans le bloc Sources.
     `.pn-sources li` est une grille à 2 colonnes (2.2ch pour le numéro, 1fr pour
     le texte) qui suppose un <span class="pn-sources__n"> comme premier enfant.
     Aucun article n'en a jamais émis : le texte nu tombait donc dans la colonne
     de 2.2ch (≈21 px) et se cassait à un mot par ligne. Mesuré le 06/08 :
     42 articles publiés sur 54 touchés, 0 correct.
     La numérotation est désormais GÉNÉRÉE par compteur CSS pour tout <li> sans
     span : la première colonne est toujours occupée, le texte retrouve le 1fr.
     Les <li> qui porteraient un span restent rendus comme avant. */
  .pn-sources ul, .pn-sources ol { list-style: none; margin: 0; padding: 0; counter-reset: pn-src; }

  .pn-sources li:not(:has(> .pn-sources__n)) { counter-increment: pn-src; }

  .pn-sources li:not(:has(> .pn-sources__n))::before {
    content: counter(pn-src);
    font-family: var(--font-ui); font-size: 0.8rem; letter-spacing: 0.08em;
    color: var(--text-secondary); line-height: var(--lh-body);
  }

  /* Filet de sécurité pour les navigateurs sans :has() — la grille se replie sur
     une seule colonne plutôt que d'écraser le texte. */
  @supports not selector(:has(*)) {
    .pn-sources li { grid-template-columns: 1fr; }
  }



  /* Sommaire ancré — fixed left rail (wide screens only). */
  .pn-toc {
    position: fixed; top: 50%; left: max(24px, calc((100vw - var(--read-col)) / 2 - 232px));
    transform: translateY(-50%); width: 210px; z-index: 40; display: none;
  }


  .pn-toc__label {
    display: block; font-family: var(--font-ui); font-size: 0.62rem; letter-spacing: 0.28em;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-4);
    padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-soft);
  }


  .pn-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }


  .pn-toc a {
    display: block; padding: 7px 0 7px 16px; position: relative;
    font-family: var(--font-ui); font-size: 0.8rem; line-height: 1.35; color: var(--text-muted);
    text-decoration: none; transition: color var(--dur-base) var(--ease-soft);
    border-left: 1px solid var(--border-soft);
  }


  .pn-toc a::before {
    content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 1px;
    background: var(--pn-violet); transform: scaleY(0); transform-origin: top;
    transition: transform var(--dur-base) var(--ease-soft);
  }


  .pn-toc a:hover { color: var(--text-secondary); }


  .pn-toc a.is-active { color: var(--text-primary); }


  .pn-toc a.is-active::before { transform: scaleY(1); }



  /* Partage — fixed right rail (wide screens) + inline fallback (header). */
  .pn-share-rail {
    position: fixed; top: 50%; right: max(24px, calc((100vw - var(--read-col)) / 2 - 92px));
    transform: translateY(-50%); z-index: 40; display: none;
  }


  .pn-share-btn {
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-accent);
    background: hsl(var(--pn-accent-h) 26% 12% / 0.4); color: var(--text-secondary);
    font-family: var(--font-ui); font-size: 0.82rem; font-weight: var(--fw-medium);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    text-decoration: none; flex-shrink: 0; padding: 0;
    transition: color var(--dur-base) var(--ease-soft), border-color var(--dur-base) var(--ease-soft), background var(--dur-base) var(--ease-soft);
  }


  .pn-share-btn:hover { color: var(--text-primary); border-color: var(--pn-violet); background: hsl(var(--pn-accent-h) 30% 18% / 0.5); }


  .pn-share-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }



  @media (min-width: 1320px) {
    .pn-toc, .pn-share-rail { display: block; }
    .pn-share-inline { display: none !important; }
  }



  /* À lire aussi — related-article cartouches. */
  .pn-related-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(3, minmax(0, 1fr)); }


  @media (max-width: 860px) { .pn-related-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }



  /* Body prose — ivory on the void, generous leading, much air. */
  .prose > section + section { margin-top: var(--space-8); }


  .prose p {
    font-family: var(--font-body); font-weight: var(--fw-light);
    font-size: var(--read-fs); line-height: var(--read-lh);
    color: var(--text-primary); margin: 0 0 1.5em; text-wrap: pretty;
  }


  .prose p strong { font-weight: var(--fw-semi); color: var(--text-primary); }


  .prose em { font-family: var(--font-quote); font-style: italic; font-size: 1.08em; }


  .prose h2 {
    font-family: var(--font-display); font-weight: var(--fw-regular);
    font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: var(--lh-snug);
    color: var(--text-primary); letter-spacing: var(--ls-display);
    margin: 0 0 0.55em; text-wrap: balance;
  }


  .prose h3 {
    font-family: var(--font-display); font-style: italic; font-weight: var(--fw-regular);
    font-size: clamp(1.4rem, 2vw, 1.85rem); line-height: 1.3;
    color: var(--text-secondary); margin: 1.7em 0 0.45em;
  }



  /* Chapô — lead with a Cormorant drop cap. */
  .pn-chapo {
    font-family: var(--font-body); font-weight: var(--fw-light);
    font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.62;
    color: var(--text-secondary); margin: 0; text-wrap: pretty;
  }


  .pn-chapo::first-letter {
    font-family: var(--font-display); font-weight: 500;
    float: left; font-size: 4.6em; line-height: 0.74;
    padding: 0.02em 0.12em 0 0; color: var(--text-primary);
  }



  /* Pull-quote in exergue. */
  .pn-exergue {
    margin: var(--space-9) 0; padding-left: var(--space-6);
    border-left: 1px solid var(--pn-violet);
    font-family: var(--font-quote); font-style: italic; font-weight: var(--fw-regular);
    font-size: clamp(1.7rem, 2.9vw, 2.4rem); line-height: 1.34;
    color: var(--text-primary); text-wrap: balance;
  }



  /* Référence box — bordered, sober. */
  .pn-ref {
    margin: var(--space-9) 0; padding: var(--space-6);
    border: 1px solid var(--border-accent); border-radius: var(--radius-md);
    background: var(--surface-raised);
    display: flex; flex-direction: column; gap: var(--space-4);
  }



  /* Affiliate rows. */
  .pn-affil { transition: padding-left var(--dur-base) var(--ease-soft), border-color var(--dur-base) var(--ease-soft); }


  .pn-affil:hover { padding-left: 12px; }


  .pn-affil__arrow { opacity: 0; transform: translateX(-8px); transition: all var(--dur-base) var(--ease-soft); }


  .pn-affil:hover .pn-affil__arrow { opacity: 1; transform: translateX(0); }



  /* FAQ accordion — couleur à rôle (20/06/2026).
     Le mauve n'encode que deux choses : l'état ACTIF (question ouverte) et les
     RÉFÉRENCES citées (<strong> = autorités). Le dormant reste en ivoire-dim /
     ardoise. Trois niveaux de lecture : dormant → survol → actif. */
  .pn-faq details {
    border-top: 1px solid var(--border-hairline);
    border-left: 1px solid transparent; padding-left: var(--space-4);
    transition: border-color var(--dur-base) var(--ease-soft), background var(--dur-base) var(--ease-soft);
  }


  .pn-faq details:last-child { border-bottom: 1px solid var(--border-hairline); }


  /* État actif : filet mauve à gauche + voile mauve très discret. */
  .pn-faq details[open] {
    border-left-color: var(--pn-violet);
    background: hsl(var(--pn-accent-h) 40% 55% / 0.06);
  }


  .pn-faq summary {
    list-style: none; cursor: pointer; padding: var(--space-6) 0;
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-5);
    font-family: var(--font-display); font-weight: var(--fw-regular);
    font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: var(--lh-snug);
    color: hsl(var(--pn-accent-h) 18% 62%);         /* dormant = violet sourd (lavande A) */
    transition: color var(--dur-base) var(--ease-soft);
  }


  .pn-faq summary:hover { color: hsl(var(--pn-accent-h) 40% 80%); }            /* survol = lavande */
  .pn-faq details[open] > summary { color: hsl(var(--pn-accent-h) 45% 86%); }  /* actif = lavande lumineuse */


  .pn-faq summary::-webkit-details-marker { display: none; }


  .pn-faq .mark { position: relative; flex-shrink: 0; width: 16px; height: 16px; margin-top: 0.35em; }


  /* Marqueur +/- : ardoise au repos, mauve à l'état actif/survol. */
  .pn-faq .mark::before, .pn-faq .mark::after {
    content: ""; position: absolute; background: hsl(var(--pn-accent-h) 16% 52%);
    transition: opacity var(--dur-base) var(--ease-soft), transform var(--dur-base) var(--ease-soft), background var(--dur-base) var(--ease-soft);
  }


  .pn-faq .mark::before { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }


  .pn-faq .mark::after  { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }


  .pn-faq summary:hover .mark::before, .pn-faq summary:hover .mark::after,
  .pn-faq details[open] .mark::before { background: var(--pn-violet-glow); }


  .pn-faq details[open] .mark::after { opacity: 0; transform: translateX(-50%) scaleY(0); }


  .pn-faq .answer {
    margin: 0; padding: 0 var(--space-5) var(--space-6) 0; max-width: 60ch;
    font-family: var(--font-body); font-weight: var(--fw-regular);
    font-size: var(--read-fs); line-height: var(--read-lh); color: var(--text-secondary);
  }


  .pn-faq .answer p { margin: 0 0 0.8em; }
  .pn-faq .answer p:last-child { margin-bottom: 0; }


  /* Référence citée (autorité clinique/théorique) en mauve — constitution §4.5. */
  .pn-faq .answer strong { font-weight: var(--fw-regular); color: var(--text-accent); }



  /* ----------------------------------------------------------------
     « Pour aller plus loin » — cartes-liens (direction A, 20/06/2026).
     Chaque ressource = une carte cliquable façon lien partagé en
     communauté : badge emoji + titre + note + tier + flèche.
     ---------------------------------------------------------------- */
  .pn-resources { margin: var(--space-9, 56px) 0; }

  .pn-resources > h2 {
    font-family: var(--font-display); font-style: italic;
    color: var(--text-primary); margin: 0 0 var(--space-2, 8px);
  }
  .pn-resources-intro {
    font-family: var(--font-display); font-style: italic;
    color: var(--text-muted); margin: 0 0 var(--space-5);
    font-size: 1.05rem; line-height: 1.5; max-width: 60ch;
  }

  /* En-tête de groupe : pastille emoji + libellé */
  .pn-res-grp {
    display: flex; align-items: center; gap: 0.55em;
    font-family: var(--font-ui); font-size: 0.82rem; font-weight: 500;
    letter-spacing: 0.11em; text-transform: uppercase;
    color: var(--text-accent);
    margin: var(--space-5) 0 var(--space-3); padding: 0;
    border: 0; /* override d'éventuels styles h3 d'article */
  }
  .pn-res-grp:first-of-type { margin-top: var(--space-3); }
  .pn-res-grp-e { font-size: 1.15rem; line-height: 1; }
  /* Spécificité > .pn-prose h3 (qui force l'ivoire) pour garder l'accent violet. */
  .pn-prose .pn-res-grp, .pn-resources .pn-res-grp { color: var(--text-accent); }

  /* Carte */
  .pn-res-card {
    display: flex; align-items: center; gap: var(--space-3);
    background: var(--surface-card); border: 1px solid var(--border-hairline);
    border-radius: 12px; padding: 13px 15px; margin: 0 0 9px;
    text-decoration: none; color: inherit;
    transition: border-color var(--dur-fade, .25s) var(--ease-soft, ease),
                background var(--dur-fade, .25s) var(--ease-soft, ease),
                transform var(--dur-fade, .25s) var(--ease-soft, ease);
  }
  a.pn-res-card:hover, a.pn-res-card:focus-visible {
    border-color: var(--border-accent); background: var(--pn-surface-3);
    transform: translateY(-1px); outline: none;
  }
  a.pn-res-card:focus-visible { box-shadow: 0 0 0 2px var(--focus-ring); }

  .pn-res-badge {
    flex: none; width: 42px; height: 42px; border-radius: 10px;
    background: var(--surface-raised); border: 1px solid var(--border-hairline);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; line-height: 1;
  }
  .pn-res-body { flex: 1 1 auto; min-width: 0; }
  .pn-res-title {
    display: block; font-family: var(--font-display); font-style: italic;
    color: var(--text-primary); font-size: 1.18rem; line-height: 1.3;
  }
  .pn-res-title em { font-style: italic; }
  .pn-res-aff {
    font-family: var(--font-ui); font-style: normal; font-size: 0.78rem;
    letter-spacing: 0.04em; color: var(--text-secondary);
  }
  .pn-res-note {
    display: block; font-family: var(--font-body); font-weight: var(--fw-regular);
    color: var(--text-secondary); font-size: 0.94rem; line-height: 1.5;
    margin-top: 3px;
  }
  .pn-res-tier {
    flex: none; font-family: var(--font-ui); font-size: 0.78rem;
    color: var(--text-secondary); white-space: nowrap;
    background: hsl(var(--pn-accent-h) 27% 49% / 0.16);
    border: 1px solid var(--pn-violet-deep); border-radius: var(--radius-pill);
    padding: 3px 11px;
  }
  .pn-res-arrow {
    flex: none; color: var(--text-accent); font-size: 1.05rem; line-height: 1;
    transition: transform var(--dur-fade, .25s) var(--ease-soft, ease),
                color var(--dur-fade, .25s) var(--ease-soft, ease);
  }
  a.pn-res-card:hover .pn-res-arrow { color: var(--text-accent); transform: translateX(2px); }

  /* WordPress remplace les emojis par <img class="emoji"> : on les dimensionne. */
  .pn-res-badge img.emoji { width: 1.3rem; height: 1.3rem; margin: 0; }
  .pn-res-grp-e img.emoji { width: 1.05rem; height: 1.05rem; margin: 0; vertical-align: -0.15em; }

  @media (max-width: 540px) {
    .pn-res-card { gap: 11px; padding: 11px 12px; }
    .pn-res-badge { width: 36px; height: 36px; font-size: 1.1rem; }
    .pn-res-title { font-size: 1.06rem; }
    .pn-res-tier { display: none; } /* on dégage le tier sur mobile étroit */
  }




  /* Scroll reveal — same fondu as the home. */
  @media (prefers-reduced-motion: no-preference) {
    [data-reveal] { opacity: 0; transform: translateY(30px); filter: blur(5px); }
    [data-reveal].is-visible {
      opacity: 1; transform: none; filter: blur(0);
      transition: opacity var(--dur-fade) var(--ease-soft),
                  transform var(--dur-fade) var(--ease-soft),
                  filter var(--dur-fade) var(--ease-soft);
      transition-delay: var(--reveal-delay, 0ms);
    }
  }