.section { padding: 76px max(40px, calc(50% - 720px)); }
    .kicker { margin: 0; color: var(--terra); font-family: var(--mono); font-size: 12px; font-weight: 780; letter-spacing: .13em; text-transform: uppercase; }
    .kicker.line { display: flex; align-items: center; gap: 14px; }
    .kicker.line::before { content: ""; width: 26px; height: 1px; background: currentColor; }
    .section-head { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(310px, .58fr); align-items: end; gap: 80px; }
    .section-head h2 { max-width: 940px; margin: 25px 0 0; font-size: clamp(43px, 4.6vw, 70px); font-weight: 480; letter-spacing: -.057em; line-height: 1.04; }
    .section-head > p { margin: 0; color: var(--muted); font-size: 18px; line-height: 1.65; }

    .hero { width: var(--wrap); min-height: 690px; margin: 0 auto; padding: 64px 0 48px; display: grid; grid-template-columns: .94fr 1.06fr; align-items: center; gap: 68px; }
    .hero-copy { max-width: 720px; }
    .hero h1 { margin: 34px 0 28px; font-size: clamp(55px, 5.35vw, 82px); font-weight: 480; letter-spacing: -.064em; line-height: 1.01; }
    .hero h1 em { color: var(--terra); font-style: normal; }
    .hero-lede { max-width: 660px; margin: 0; color: var(--muted); font-size: 18px; line-height: 1.62; }
    .hero-note { max-width: 660px; margin: 21px 0 0; padding-left: 18px; border-left: 3px solid var(--terra); color: var(--muted); font-size: 15px; line-height: 1.62; }
    .hero-note strong { color: var(--ink); }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
    .hero-proof { display: flex; flex-wrap: wrap; gap: 23px; margin-top: 28px; color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
    .hero-proof span::before { content: "✓"; margin-right: 8px; color: var(--terra); }

    .pst-context { display: grid; grid-template-columns: minmax(260px, .62fr) minmax(0, 1.38fr); width: var(--wrap); margin: 0 auto 54px; border: 1px solid var(--line); border-left: 6px solid var(--terra); color: var(--ink); background: var(--white); }
    .pst-context-heading { padding: 36px; border-right: 1px solid var(--line); background: var(--cream); }
    .pst-context .kicker { color: var(--terra); }
    .pst-context h2 { margin: 28px 0 0; color: var(--ink); font-size: clamp(28px, 2.4vw, 38px); font-weight: 540; letter-spacing: -.045em; line-height: 1.12; }
    .pst-context-copy { padding: 36px; }
    .pst-context-lede { max-width: 920px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.65; }
    .pst-context-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 30px; border: 1px solid var(--line); }
    .pst-context-grid article { min-height: 188px; padding: 24px 22px; border-right: 1px solid var(--line); background: var(--paper-light); }
    .pst-context-grid article:nth-child(even) { background: var(--paper); }
    .pst-context-grid article:last-child { border-right: 0; }
    .pst-context-grid span { color: var(--terra); font-family: var(--mono); font-size: 11px; }
    .pst-context-grid strong { display: block; margin-top: 22px; color: var(--ink); font-size: 17px; line-height: 1.4; }
    .pst-context-grid p { margin: 10px 0 0; color: var(--muted); font-size: 15px; line-height: 1.62; }
    .pst-context-conclusion { margin: 24px 0 0; padding: 18px 20px; border-left: 4px solid var(--terra); color: var(--ink); background: var(--cream); font-size: 16px; font-weight: 620; line-height: 1.62; }
    .pst-context-source { margin: 18px 0 0; color: var(--muted); font-family: var(--mono); font-size: 11px; line-height: 1.62; }
    .pst-context-source a { color: var(--terra); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
    .pst-context-source a:hover { color: var(--ink); }

    .artwork { margin: 0; border: 1px solid var(--line); background: var(--white); }
    .artwork-label { min-height: 62px; padding: 0 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-family: var(--mono); font-size: 11px; }
    .artwork-label strong { display: inline-flex; align-items: center; gap: 10px; color: var(--green); }
    .artwork-label strong::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
    .artwork img { width: 100%; aspect-ratio: 1.48 / 1; object-fit: cover; object-position: center; filter: saturate(.84) contrast(.97); }
    .artwork figcaption { display: grid; grid-template-columns: 180px 1fr; gap: 26px; padding: 22px; border-top: 1px solid var(--line); }
    .artwork figcaption span { color: var(--terra); font-family: var(--mono); font-size: 11px; font-weight: 780; letter-spacing: .06em; line-height: 1.5; text-transform: uppercase; }
    .artwork figcaption p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.62; }
    .artwork figcaption a { color: var(--terra); font-weight: 750; }

    .uses { background: var(--cream); }
    .use-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 52px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
    .use-card { min-height: 280px; padding: 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255, 249, 242, .5); }
    .use-card:nth-child(even) { background: var(--paper); }
    .use-card > span { display: flex; justify-content: space-between; gap: 18px; color: var(--terra); font-family: var(--mono); font-size: 11px; font-weight: 800; text-transform: uppercase; }
    .use-card > span b { color: var(--muted); font-weight: 700; }
    .use-card h3 { margin: 51px 0 14px; font-size: 22px; letter-spacing: -.035em; }
    .use-card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.62; }
    .use-card small { display: block; margin-top: 19px; padding-top: 15px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 13px; line-height: 1.55; }
    .use-card small strong { color: var(--terra); }
    .use-note { display: grid; grid-template-columns: .55fr 1.45fr; gap: 40px; align-items: center; padding: 26px 30px; border-left: 4px solid var(--terra); color: var(--paper); background: var(--green-dark); }
    .use-note span { color: var(--lavender); font-family: var(--mono); font-size: 11px; font-weight: 800; text-transform: uppercase; }
    .use-note p { margin: 0; font-size: 19px; font-weight: 620; line-height: 1.55; }

    .study { background: var(--white); }
    .study-card { display: grid; grid-template-columns: 1.08fr .92fr; margin-top: 48px; border: 1px solid var(--line); background: var(--white); }
    .study-intro { padding: 40px; border-left: 5px solid var(--terra); color: var(--ink); background: var(--cream); }
    .study-intro .kicker { color: var(--terra); }
    .study-intro h3 { max-width: 690px; margin: 34px 0 18px; color: var(--ink); font-size: clamp(29px, 2.7vw, 38px); letter-spacing: -.045em; line-height: 1.14; }
    .study-intro p { max-width: 760px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
    .study-origin { margin-top: 24px !important; padding: 18px 20px; border: 1px solid var(--line); border-left: 3px solid var(--terra); background: var(--paper-light); }
    .study-origin strong { color: var(--terra); }
    .study-intro .button { margin-top: 30px; }
    .study-intro .button.light { border-color: var(--terra); color: var(--paper); background: var(--terra); }
    .study-intro .button.light:hover { border-color: var(--terra-interactive); color: var(--paper); background: var(--terra-interactive); }
    .study-findings { padding: 12px 34px; border-left: 1px solid var(--line); background: var(--paper-light); }
    .study-finding { display: grid; grid-template-columns: 105px 1fr; gap: 24px; min-height: 118px; padding: 24px 0; border-bottom: 1px solid var(--line); align-items: center; }
    .study-finding:last-child { border-bottom: 0; }
    .study-finding b { color: var(--terra); font-size: 32px; font-weight: 540; letter-spacing: -.045em; }
    .study-finding strong { display: block; font-size: 16px; }
    .study-finding p { margin: 7px 0 0; color: var(--muted); font-size: 14px; line-height: 1.58; }
    .study-note { display: grid; grid-template-columns: .45fr 1.55fr; gap: 40px; align-items: center; margin-top: 28px; padding: 28px 31px; border: 1px solid var(--line); border-left: 4px solid var(--terra); color: var(--ink); background: var(--cream); }
    .study-note span { color: var(--terra); font-family: var(--mono); font-size: 11px; font-weight: 800; text-transform: uppercase; }
    .study-note p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.62; }

    .pilot { background: var(--white); }
    .pilot-flow { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 52px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .pilot-step { min-height: 278px; padding: 26px 22px; border-right: 1px solid var(--line); }
    .pilot-step:last-child { border-right: 0; }
    .pilot-step span { color: var(--terra); font-family: var(--mono); font-size: 11px; }
    .pilot-step h3 { margin: 52px 0 13px; font-size: 20px; letter-spacing: -.025em; }
    .pilot-step p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.58; }

    .roles { background: var(--paper); }
    .role-table { margin-top: 52px; border: 1px solid var(--line); }
    .role-row { display: grid; grid-template-columns: .65fr 1fr 1fr; gap: 26px; min-height: 126px; padding: 24px 27px; border-bottom: 1px solid var(--line); align-items: center; }
    .role-row:last-child { border-bottom: 0; }
    .role-row > strong { font-size: 17px; }
    .role-row div span, .role-row div strong { display: block; }
    .role-row div span { color: var(--terra); font-family: var(--mono); font-size: 11px; font-weight: 800; text-transform: uppercase; }
    .role-row div strong { margin-top: 10px; color: var(--muted); font-size: 14px; font-weight: 560; line-height: 1.55; }

    .contact { display: grid; grid-template-columns: 1.05fr .95fr; gap: 80px; align-items: end; color: var(--paper); background: var(--green-dark); }
    .contact .kicker { color: var(--lavender); }
    .contact h2 { max-width: 820px; margin: 24px 0 0; font-size: clamp(43px, 4.8vw, 68px); font-weight: 480; letter-spacing: -.058em; line-height: 1.04; }
    .contact-copy > p { margin: 0; color: rgba(244, 235, 218, .8); font-size: 18px; line-height: 1.65; }
    .contact-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 27px; }
    .contact-copy small { display: block; margin-top: 16px; color: rgba(244, 235, 218, .62); font-size: 11px; }

    .site-footer { padding: 55px max(40px, calc(50% - 720px)) 28px; color: var(--cream); background: var(--terracotta-deep); }
    .footer-grid { display: grid; grid-template-columns: 1.35fr repeat(3, .72fr); gap: 58px; }
    .footer-brand strong { color: var(--paper); font-size: 18px; }
    .footer-brand p { max-width: 340px; margin: 18px 0 0; color: rgba(244, 235, 218, .68); font-size: 13px; line-height: 1.58; }
    .footer-col { display: grid; align-content: start; gap: 11px; }
    .footer-col span { margin-bottom: 6px; color: var(--lavender); font-family: var(--mono); font-size: 11px; font-weight: 800; text-transform: uppercase; }
    .footer-col a { color: rgba(244, 235, 218, .78); font-size: 13px; }
    .footer-col a:hover { color: var(--paper); }
    .footer-bottom { grid-column: 1 / -1; margin-top: 32px; padding-top: 23px; border-top: 1px solid var(--line-light); display: flex; justify-content: space-between; gap: 24px; color: rgba(244, 235, 218, .62); font-family: var(--mono); font-size: 11px; line-height: 1.58; }

    @media (max-width: 1180px) {
      .nav-links { display: none; }
      .hero { grid-template-columns: 1fr 1fr; gap: 42px; }
      .hero h1 { font-size: clamp(52px, 6.6vw, 74px); }
      .pilot-flow { grid-template-columns: repeat(3, 1fr); }
      .pilot-step { border-bottom: 1px solid var(--line); }
      .pilot-step:nth-child(3n) { border-right: 0; }
    }
    @media (max-width: 920px) {
      :root { --wrap: min(100% - 44px, 1440px); }
      .section { padding: 64px 22px; }
      .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 60px; }
      .hero-copy { max-width: none; }
      .artwork { max-width: 780px; }
      .section-head, .pst-context, .use-note, .study-card, .study-note, .contact { grid-template-columns: 1fr; gap: 34px; }
      .pst-context, .study-card { gap: 0; }
      .pst-context-heading { border-right: 0; border-bottom: 1px solid var(--line); }
      .pst-context-grid { grid-template-columns: 1fr; }
      .pst-context-grid article { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
      .pst-context-grid article:last-child { border-bottom: 0; }
      .study-findings { border-top: 1px solid var(--line); border-left: 0; }
      .use-grid { grid-template-columns: 1fr 1fr; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
      .footer-bottom { display: grid; }
    }
    @media (max-width: 640px) {
      :root { --wrap: calc(100% - 30px); }
      .section { padding: 54px 15px; }
      .nav { min-height: 78px; gap: 14px; }
      .brand { gap: 10px; }
      .brand-mark { width: 44px; height: 44px; }
      .brand-mark img { width: 31px; height: 31px; }
      .brand-copy strong { font-size: 15px; }
      .brand-copy small, .language, .nav-cta { display: none; }
      .menu-dropdown > summary { min-width: 68px; min-height: 44px; }
      .menu-panel { right: -1px; width: calc(100vw - 30px); grid-template-columns: 1fr; max-height: calc(100vh - 100px); overflow: auto; }
      .hero h1 { font-size: clamp(43px, 13.3vw, 59px); }
      .hero-lede { font-size: 16px; }
      .hero-actions { flex-direction: column; align-items: stretch; }
      .pst-context { gap: 0; margin-bottom: 38px; }
      .pst-context-heading, .pst-context-copy { padding: 25px 23px; }
      .pst-context h2 { font-size: 28px; }
      .section-head h2, .contact h2 { font-size: 40px; }
      .artwork figcaption, .study-finding { grid-template-columns: 1fr; }
      .study-findings { padding: 8px 24px; }
      .use-grid, .pilot-flow { grid-template-columns: 1fr; }
      .use-card { min-height: 0; }
      .use-card h3 { margin-top: 35px; }
      .pilot-step { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line) !important; }
      .pilot-step:last-child { border-bottom: 0 !important; }
      .role-row { grid-template-columns: 1fr; gap: 18px; }
      .contact-actions { flex-direction: column; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

    .spsti-breadcrumb { width: var(--wrap); margin: 0 auto; padding: 24px 0 0; }
    .spsti-breadcrumb ol { margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; list-style: none; color: var(--muted); font: 700 10px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
    .spsti-breadcrumb li + li::before { margin-right: 10px; color: var(--terra); content: "→"; }
    .spsti-breadcrumb a { text-decoration: none; }
    .spsti-breadcrumb a:hover { color: var(--terra); }
    .spsti-breadcrumb abbr { text-decoration: none; }

    .article-meta { max-width: 690px; margin: -10px 0 25px; color: var(--muted); font: 700 10px/1.6 var(--mono); letter-spacing: .02em; }
    .article-meta time { color: var(--terra); }

    .page-essential { width: var(--wrap); margin: 0 auto 64px; padding: 38px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .page-essential-layout { display: grid; grid-template-columns: minmax(220px, .55fr) minmax(0, 1.45fr); gap: 72px; }
    .page-essential h2 { max-width: 300px; margin: 24px 0 0; font-size: clamp(34px, 3.3vw, 52px); font-weight: 480; letter-spacing: -.05em; line-height: 1.05; }
    .page-essential-answer { margin: 0; color: var(--ink-soft); font-size: 17px; line-height: 1.72; }
    .essential-points { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 28px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
    .essential-points article { min-height: 142px; padding: 21px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .essential-points span { color: var(--terra); font: 800 10px/1 var(--mono); }
    .essential-points strong { display: block; margin-top: 22px; font-size: 15px; line-height: 1.45; }
    .related-questions { margin: 25px 0 0; display: flex; flex-wrap: wrap; gap: 12px 24px; }
    .related-questions a,
    .section-link-row a,
    .role-governance a { color: var(--terra); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

    .study-citable { margin: 30px 0 0; padding-left: 18px; border-left: 3px solid var(--terra); color: var(--ink-soft); font-size: 16px; line-height: 1.7; }
    .study-citable + .study-card { margin-top: 30px; }
    .section-link-row { margin: 28px 0 0; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; line-height: 1.7; }
    .role-governance { margin: 22px 0 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
    .site-footer .footer-grid { grid-template-columns: 1.35fr repeat(2, .72fr); }

    @media (max-width: 920px) {
      .page-essential-layout { grid-template-columns: 1fr; gap: 28px; }
      .essential-points { grid-template-columns: 1fr; }
      .essential-points article { min-height: 0; }
      .site-footer .footer-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 640px) {
      .spsti-breadcrumb,
      .page-essential { width: calc(100% - 30px); }
      .page-essential { margin-bottom: 38px; padding: 30px 0; }
      .page-essential-answer { font-size: 16px; }
      .site-footer .footer-grid { grid-template-columns: 1fr; }
    }

/* Hub IA en SPSTI — version intégrée 2026 */
body.spsti-hub .site-system-header .page-nav-links { font-size: 12px; }
body.spsti-hub .site-system-header .page-nav-label { font-size: 10px; }
body.spsti-hub .article-meta { font-size: 12px; }
body.spsti-hub .hero-proof { font-size: 11px; }
body.spsti-hub .pst-context-source { font-size: 13px; }

.source-inline,
.card-source,
.table-source {
  color: var(--terra-interactive, var(--terra));
  font-weight: 720;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.source-inline { font-size: .88em; white-space: normal; }
.card-source { display: inline-block; margin-top: 18px; font-size: 13px; line-height: 1.45; }
.table-source { display: block; margin-top: 7px; font-size: 13px; line-height: 1.4; }
.source-inline:hover,
.card-source:hover,
.table-source:hover { color: var(--ink); }
.essential-points .card-source { margin-top: 14px; }

.family-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 52px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.hub-family {
  min-height: 310px;
  padding: 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 253, 249, .72);
}
.hub-family:nth-child(even) { background: var(--paper-light); }
.hub-family > span,
.terrain-card > span,
.shadow-intro > span,
.measurement-grid > article > span,
.sources-grid article > span {
  color: var(--terra);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.45;
  text-transform: uppercase;
}
.hub-family h3 { margin: 46px 0 15px; font-size: 22px; letter-spacing: -.035em; line-height: 1.16; }
.hub-family p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.64; }

.evidence-browser { margin-top: 34px; border: 1px solid var(--line); background: var(--white); }
.filter-bar { min-height: 76px; padding: 14px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.filter-bar > span { color: var(--muted); font-family: var(--mono); font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter { min-height: 40px; padding: 0 15px; border: 1px solid var(--line); color: var(--ink); cursor: pointer; background: var(--paper-light); font-size: 14px; font-weight: 700; }
.filter:hover,
.filter.active { color: var(--paper); border-color: var(--terra); background: var(--terra); }
.table-scroll { overflow-x: auto; }
.usage-table { width: 100%; min-width: 920px; border-collapse: collapse; }
.usage-table th { padding: 17px 20px; color: var(--muted); background: var(--cream); font-family: var(--mono); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.usage-table td { padding: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; line-height: 1.55; vertical-align: top; }
.usage-table td:first-child { color: var(--ink); font-weight: 720; }
.usage-table tr[hidden] { display: none; }
.status { display: inline-flex; padding: 7px 9px; border: 1px solid var(--line); color: var(--green); font-family: var(--mono); font-size: 11px; font-weight: 800; line-height: 1; text-transform: uppercase; }
.study-status { color: var(--terra); border-color: var(--terra); }
.sensitive-status { color: var(--terra); border-color: rgba(178, 77, 36, .5); }
.light-note { display: grid; grid-template-columns: .48fr 1.52fr; gap: 38px; align-items: center; padding: 27px 30px; border: 1px solid var(--line); border-left: 4px solid var(--terra); color: var(--ink); background: var(--paper-light); }
.light-note span { color: var(--terra); font-family: var(--mono); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.light-note p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.65; }

.terrain-section { background: var(--white); }
.terrain-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 52px; border: 1px solid var(--line); }
.terrain-card { min-height: 390px; padding: 31px; border-right: 1px solid var(--line); background: var(--paper-light); }
.terrain-card:nth-child(even) { background: var(--cream); }
.terrain-card:last-child { border-right: 0; }
.terrain-card h3 { margin: 54px 0 16px; font-size: 28px; letter-spacing: -.045em; line-height: 1.1; }
.terrain-card p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.65; }
.terrain-card .measure { margin-top: 23px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; }
.terrain-card .measure strong { color: var(--ink); }

.charter-section { background: var(--paper-light); }
.principles-grid { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 52px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.principles-grid article { min-height: 150px; padding: 25px 27px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); display: grid; grid-template-columns: 42px minmax(150px, .7fr) 1fr; gap: 20px; align-items: center; }
.principles-grid article:nth-child(4n+2),
.principles-grid article:nth-child(4n+3) { background: var(--cream); }
.principles-grid article > span { color: var(--terra); font-family: var(--mono); font-size: 12px; font-weight: 800; }
.principles-grid article > strong { font-size: 17px; line-height: 1.4; }
.principles-grid article > p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.58; }
.principles-grid article > a { grid-column: 3; color: var(--terra-interactive, var(--terra)); font-size: 13px; font-weight: 720; text-decoration: underline; text-underline-offset: 4px; }

.matrix-section { background: var(--cream); }
.project-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 42px; }
.project-tab { min-height: 44px; padding: 0 16px; border: 1px solid var(--line); color: var(--ink); cursor: pointer; background: var(--white); font-size: 14px; font-weight: 700; }
.project-tab:hover,
.project-tab.active { color: var(--paper); border-color: var(--terra); background: var(--terra); }
.matrix-lab { display: grid; grid-template-columns: .82fr 1.18fr; margin-top: 15px; border: 1px solid var(--line); background: var(--white); }
.matrix-plot-wrap { padding: 32px; border-right: 1px solid var(--line); }
.matrix-title { display: flex; justify-content: space-between; gap: 18px; align-items: center; color: var(--muted); font-family: var(--mono); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.matrix-title strong { color: var(--terra); }
.matrix-plot { position: relative; height: 440px; margin: 30px 0 0 40px; border-left: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: linear-gradient(90deg, rgba(45,75,71,.055) 50%, rgba(178,77,36,.06) 50%), linear-gradient(0deg, transparent 50%, rgba(205,200,241,.13) 50%); }
.matrix-plot::before,
.matrix-plot::after { position: absolute; color: var(--muted); font-family: var(--mono); font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.matrix-plot::before { content: "Valeur métier →"; left: -108px; top: 50%; transform: rotate(-90deg); }
.matrix-plot::after { content: "Risque global →"; left: 50%; bottom: -31px; transform: translateX(-50%); }
.quadrant { position: absolute; max-width: 135px; color: var(--muted); font-family: var(--mono); font-size: 11px; font-weight: 800; line-height: 1.45; letter-spacing: .04em; text-transform: uppercase; }
.q1 { top: 17px; left: 17px; color: var(--green); }
.q2 { top: 17px; right: 17px; color: var(--terra); text-align: right; }
.q3 { bottom: 17px; left: 17px; }
.q4 { right: 17px; bottom: 17px; text-align: right; }
.matrix-dot { position: absolute; z-index: 2; left: 34%; bottom: 84%; width: 25px; height: 25px; border: 5px solid var(--white); border-radius: 50%; background: var(--terra); box-shadow: 0 0 0 1px var(--terra), 0 8px 22px rgba(178,77,36,.25); transform: translate(-50%, 50%); transition: left .35s ease, bottom .35s ease; }
.matrix-detail { padding: 33px; }
.matrix-detail > span { color: var(--terra); font-family: var(--mono); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.matrix-detail h3 { margin: 19px 0 10px; font-size: 34px; letter-spacing: -.045em; line-height: 1.12; }
.matrix-detail > p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.62; }
.score-list { margin-top: 28px; border-top: 1px solid var(--line); }
.score-row { display: grid; grid-template-columns: 1fr 1.25fr 32px; gap: 14px; align-items: center; min-height: 62px; border-bottom: 1px solid var(--line); }
.score-row span { font-size: 15px; font-weight: 680; }
.score-track { height: 6px; background: var(--cream); }
.score-track i { display: block; height: 100%; background: var(--terra); transition: width .35s ease; }
.score-row b { color: var(--terra); font-family: var(--mono); font-size: 13px; text-align: right; }
.verdict { margin-top: 27px; padding: 23px; border: 1px solid var(--line); border-left: 4px solid var(--terra); background: var(--paper-light); }
.verdict span { color: var(--terra); font-family: var(--mono); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.verdict strong { display: block; margin-top: 11px; font-size: 16px; line-height: 1.5; }
.matrix-caveat { margin-top: 20px !important; font-size: 14px !important; }

.shadow-section { background: var(--white); }
.shadow-layout { display: grid; grid-template-columns: .86fr 1.14fr; margin-top: 52px; border: 1px solid var(--line); }
.shadow-intro { min-height: 480px; padding: 36px; border-left: 6px solid var(--terra); background: var(--cream); display: flex; flex-direction: column; justify-content: space-between; }
.shadow-intro h3 { max-width: 560px; margin: 42px 0 18px; font-size: 43px; font-weight: 510; letter-spacing: -.055em; line-height: 1.05; }
.shadow-intro p { margin: auto 0 0; color: var(--muted); font-size: 16px; line-height: 1.65; }
.shadow-steps { padding: 10px 34px; background: var(--paper-light); }
.shadow-steps article { display: grid; grid-template-columns: 48px 1fr; gap: 19px; min-height: 112px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: center; }
.shadow-steps article:last-child { border-bottom: 0; }
.shadow-steps article > span { color: var(--terra); font-family: var(--mono); font-size: 12px; font-weight: 800; }
.shadow-steps strong { font-size: 17px; }
.shadow-steps p { margin: 7px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; }

.voices-section { background: var(--paper-light); }
.voice-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 52px; border: 1px solid var(--line); }
.voice-grid article { min-height: 300px; padding: 31px; border-right: 1px solid var(--line); background: var(--white); }
.voice-grid article:nth-child(even) { background: var(--cream); }
.voice-grid article:last-child { border-right: 0; }
.voice-grid b { color: var(--terra); font-size: 56px; font-weight: 480; letter-spacing: -.06em; }
.voice-grid strong { display: block; margin-top: 39px; font-size: 18px; line-height: 1.4; }
.voice-grid p { margin: 11px 0 0; color: var(--muted); font-size: 15px; line-height: 1.6; }

body.spsti-hub .study-note,
body.spsti-hub .study-intro,
body.spsti-hub .study-findings { color: var(--ink); background: var(--paper-light); }
body.spsti-hub .study-finding p { font-size: 15px; }

body.spsti-hub .pilot-step p { font-size: 15px; line-height: 1.62; }
body.spsti-hub .pilot-step h3 { font-size: 21px; }
.measurement-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 34px; border: 1px solid var(--line); }
.measurement-grid article { padding: 36px 40px; background: var(--white); }
.measurement-grid article + article { border-left: 1px solid var(--line); background: var(--cream); }
.measurement-grid h3 { margin: 38px 0 17px; font-size: 31px; letter-spacing: -.04em; }
.measurement-grid ul { margin: 0; padding: 0; list-style: none; }
.measurement-grid li { position: relative; padding: 14px 0 14px 25px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; line-height: 1.55; }
.measurement-grid li::before { position: absolute; left: 0; color: var(--terra); content: "→"; }

.answer-section { background: var(--paper-light); }
.answer-grid { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 52px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.answer-card { min-height: 280px; padding: 31px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); }
.answer-card:nth-child(even) { background: var(--cream); }
.answer-card:last-child { grid-column: 1 / -1; min-height: 220px; }
.answer-card h3 { max-width: 660px; margin: 0 0 25px; font-size: 25px; letter-spacing: -.035em; line-height: 1.22; }
.answer-card p { max-width: 850px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.68; }
.answer-card p strong { color: var(--ink); }
.answer-card a { color: var(--terra-interactive, var(--terra)); font-weight: 720; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

.sources-section { background: var(--cream); }
.sources-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 52px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.sources-grid article { min-height: 260px; padding: 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,253,249,.78); }
.sources-grid article:nth-child(even) { background: var(--paper-light); }
.sources-grid h3 { margin: 38px 0 13px; font-size: 22px; letter-spacing: -.03em; }
.sources-grid p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.62; }
.sources-grid a { display: inline-block; margin: 18px 18px 0 0; color: var(--terra-interactive, var(--terra)); font-size: 14px; font-weight: 720; text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 1180px) {
  .family-grid { grid-template-columns: repeat(3, 1fr); }
  .principles-grid article { grid-template-columns: 38px .75fr 1fr; }
}
@media (max-width: 920px) {
  .family-grid { grid-template-columns: repeat(2, 1fr); }
  .terrain-grid,
  .principles-grid,
  .voice-grid,
  .answer-grid,
  .sources-grid { grid-template-columns: 1fr 1fr; }
  .principles-grid { grid-template-columns: 1fr; }
  .terrain-card,
  .voice-grid article { border-bottom: 1px solid var(--line); }
  .terrain-card:nth-child(2n),
  .voice-grid article:nth-child(2n) { border-right: 0; }
  .terrain-card:last-child,
  .voice-grid article:last-child { border-right: 1px solid var(--line); }
  .matrix-lab,
  .shadow-layout { grid-template-columns: 1fr; }
  .matrix-plot-wrap { border-right: 0; border-bottom: 1px solid var(--line); }
  .shadow-intro { min-height: 390px; }
  .measurement-grid { grid-template-columns: 1fr; }
  .measurement-grid article + article { border-top: 1px solid var(--line); border-left: 0; }
}
@media (max-width: 640px) {
  body.spsti-hub .site-system-header .page-nav-links { font-size: 11px; }
  .family-grid,
  .terrain-grid,
  .principles-grid,
  .voice-grid,
  .answer-grid,
  .sources-grid { grid-template-columns: 1fr; }
  .hub-family,
  .terrain-card,
  .voice-grid article,
  .answer-card,
  .sources-grid article { min-height: 0; border-right: 1px solid var(--line) !important; }
  .answer-card:last-child { grid-column: auto; }
  .hub-family h3,
  .terrain-card h3 { margin-top: 34px; }
  .filter-bar { align-items: flex-start; flex-direction: column; }
  .principles-grid article { grid-template-columns: 34px 1fr; gap: 15px; }
  .principles-grid article > p,
  .principles-grid article > a { grid-column: 2; }
  .project-tabs { flex-wrap: nowrap; padding-bottom: 6px; overflow-x: auto; }
  .project-tab { min-width: max-content; }
  .matrix-plot-wrap,
  .matrix-detail { padding: 23px; }
  .matrix-plot { height: 355px; }
  .quadrant { max-width: 105px; font-size: 9px; }
  .score-row { grid-template-columns: 1fr .85fr 25px; }
  .score-row span { font-size: 14px; }
  .shadow-intro { min-height: 0; }
  .shadow-intro h3 { font-size: 36px; }
  .light-note { grid-template-columns: 1fr; gap: 14px; }
  .measurement-grid article { padding: 28px 24px; }
  .measurement-grid h3 { margin-top: 28px; font-size: 27px; }
}