/* Editorial artwork with a complete HTML explanation, independent of JS or images. */
/* A stable surface keeps navigation legible over both pale copy and dark artwork. */
.pz-editorial-nav { --nav-fg: #0e1e30; background: #f1f5f9; border-bottom: 1px solid #cbd5df; }
.pz-diagram {
  --diagram-ink: #0e1e30;
  --diagram-muted: #526170;
  --diagram-line: #cbd5df;
  --diagram-green: #087e6b;
  --diagram-blue: #3156b5;
  margin: 0;
  padding: 56px 0;
  color: var(--diagram-ink);
  font: 400 16px/1.55 'Hanken Grotesk', system-ui, sans-serif;
  letter-spacing: 0;
  scroll-margin-top: 110px;
}
.pz-diagram *, .pz-diagram *::before, .pz-diagram *::after { box-sizing: border-box; letter-spacing: 0; }
html:not([lang="fr"]) .pz-diagram [data-lang="fr"], html[lang="fr"] .pz-diagram [data-lang="en"] { display: none; }
.pz-diagram figcaption, .pz-diagram-details { max-width: 1240px; margin: 0 auto; padding: 0 40px; }
.pz-diagram h2 { max-width: 32ch; margin: 0 0 14px; font-size: 40px; line-height: 1.12; font-weight: 750; }
.pz-diagram p { margin: 0; }
.pz-diagram-intro { max-width: 70ch; color: var(--diagram-muted); font-size: 18px; }
.pz-diagram h3 { margin: 0 0 10px; font-size: 22px; line-height: 1.25; font-weight: 700; }
.pz-diagram strong { font-weight: 700; }
.pz-diagram-note { margin-top: 18px !important; max-width: 90ch; font-size: 14px; color: var(--diagram-muted); }
.pz-diagram a { color: var(--diagram-green); text-underline-offset: 4px; text-decoration: underline; }
.pz-diagram a:focus-visible { outline: 2px solid var(--diagram-green); outline-offset: 5px; }
.pz-diagram ol, .pz-diagram ul { list-style: none; margin: 0; padding: 0; }
.pz-diagram li, .pz-diagram h2, .pz-diagram h3, .pz-diagram p, .pz-diagram strong { min-width: 0; overflow-wrap: anywhere; }

/* Intrinsic dimensions reserve space even on slow or failed image requests. */
.pz-diagram-art { max-width: 1536px; margin: 32px auto 36px; background: #0b202d; }
.pz-diagram-art picture { display: block; }
.pz-diagram-art img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; color: #f4f8fc; font-size: 14px; }

.pz-model-activities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.pz-model-node { min-width: 0; }
.pz-model-node + .pz-model-node { padding-left: 40px; border-left: 1px solid var(--diagram-line); }
.pz-model-node p { color: var(--diagram-muted); max-width: 44ch; }
.pz-model-connection { margin-top: 28px !important; padding-top: 24px; border-top: 1px solid var(--diagram-line); }

.pz-thesis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.pz-thesis > li { min-width: 0; }
.pz-thesis > li + li { padding-left: 28px; border-left: 1px solid var(--diagram-line); }
.pz-thesis p { color: var(--diagram-muted); }
.pz-thesis-examples { margin-top: 14px; font-weight: 600; font-size: 15px; color: var(--diagram-green); }
.pz-thesis > li:nth-child(2) .pz-thesis-examples { color: var(--diagram-blue); }
.pz-agency { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--diagram-line); }
.pz-agency strong { display: block; margin-bottom: 8px; font-size: 22px; line-height: 1.25; }
.pz-agency p { color: var(--diagram-muted); }

.pz-cycle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.pz-cycle > li { min-width: 0; }
.pz-cycle-number { display: block; margin-bottom: 14px; font: 400 18px/1.2 'Space Mono', monospace; color: var(--diagram-green); }
.pz-cycle > li:nth-child(even) .pz-cycle-number { color: var(--diagram-blue); }
.pz-cycle p { color: var(--diagram-muted); }
.pz-cycle-return { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--diagram-line); }

.pz-ai-human { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; align-items: start; }
.pz-ai-human h3 { margin: 0; }
.pz-ai-human p { color: var(--diagram-muted); }
.pz-ai-work { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 28px 0 !important; padding: 28px 0 !important; border-top: 1px solid var(--diagram-line); border-bottom: 1px solid var(--diagram-line); }
.pz-ai-work p { color: var(--diagram-muted); }

@media (max-width: 980px) {
  .pz-diagram figcaption, .pz-diagram-details { padding-left: 22px; padding-right: 22px; }
  .pz-thesis { gap: 24px; }
  .pz-thesis > li + li { padding-left: 20px; }
  .pz-model-activities { gap: 28px; }
  .pz-model-node + .pz-model-node { padding-left: 28px; }
  .pz-cycle { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
}
@media (max-width: 700px) {
  .pz-diagram { padding: 34px 0; }
  .pz-diagram h2 { font-size: 28px; }
  .pz-diagram-intro { font-size: 17px; }
  .pz-diagram-art { margin-top: 24px; margin-bottom: 28px; }
  .pz-model-activities, .pz-thesis, .pz-ai-work, .pz-ai-human { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pz-model-node + .pz-model-node, .pz-thesis > li + li { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--diagram-line); }
  .pz-cycle { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pz-cycle > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 16px; }
  .pz-cycle-number { grid-row: span 2; margin-top: 4px; }
  .pz-cycle p { grid-column: 2; }
  .pz-ai-human { gap: 12px; }
}