.he-pc-dossier {
  --he-pc-bg: #ffffff;
  --he-pc-surface: #f5f7fb;
  --he-pc-surface-2: #eef2f8;
  --he-pc-text: #172033;
  --he-pc-muted: #5c687d;
  --he-pc-border: rgba(23, 32, 51, 0.13);
  --he-pc-blue: #164da8;
  --he-pc-blue-2: #0c397e;
  --he-pc-red: #b82432;
  --he-pc-gold: #c88a13;
  --he-pc-success: #12704f;
  --he-pc-shadow: 0 18px 48px rgba(18, 38, 73, 0.09);
  color: var(--he-pc-text);
  font-size: 16px;
  line-height: 1.65;
}

html[data-theme="dark"] .he-pc-dossier,
[data-theme="dark"] .he-pc-dossier,
body.dark-mode .he-pc-dossier {
  --he-pc-bg: #0f141e;
  --he-pc-surface: #171e2a;
  --he-pc-surface-2: #202a39;
  --he-pc-text: #f3f6fb;
  --he-pc-muted: #b2bdcc;
  --he-pc-border: rgba(255, 255, 255, 0.12);
  --he-pc-blue: #6da4ff;
  --he-pc-blue-2: #a9c7ff;
  --he-pc-red: #ff7f89;
  --he-pc-gold: #e3b24e;
  --he-pc-success: #66d2a7;
  --he-pc-shadow: 0 20px 54px rgba(0, 0, 0, 0.27);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .he-pc-dossier {
    --he-pc-bg: #0f141e;
    --he-pc-surface: #171e2a;
    --he-pc-surface-2: #202a39;
    --he-pc-text: #f3f6fb;
    --he-pc-muted: #b2bdcc;
    --he-pc-border: rgba(255, 255, 255, 0.12);
    --he-pc-blue: #6da4ff;
    --he-pc-blue-2: #a9c7ff;
    --he-pc-red: #ff7f89;
    --he-pc-gold: #e3b24e;
    --he-pc-success: #66d2a7;
    --he-pc-shadow: 0 20px 54px rgba(0, 0, 0, 0.27);
  }
}

.he-pc-dossier *,
.he-pc-dossier *::before,
.he-pc-dossier *::after { box-sizing: border-box; }
.he-pc-dossier a { color: var(--he-pc-blue); }
.he-pc-dossier h2,
.he-pc-dossier h3 { color: var(--he-pc-text); line-height: 1.2; margin-top: 0; }

.he-pc-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 5vw, 58px);
  border: 1px solid var(--he-pc-border);
  border-radius: 24px;
  background:
    radial-gradient(circle at 88% 15%, rgba(200, 138, 19, 0.18), transparent 26%),
    radial-gradient(circle at 8% 88%, rgba(184, 36, 50, 0.13), transparent 30%),
    linear-gradient(135deg, var(--he-pc-surface), var(--he-pc-bg));
  box-shadow: var(--he-pc-shadow);
}
.he-pc-hero::after {
  content: "PC";
  position: absolute;
  right: -0.04em;
  bottom: -0.24em;
  font-size: clamp(130px, 24vw, 310px);
  font-weight: 900;
  line-height: 1;
  color: var(--he-pc-blue);
  opacity: 0.045;
  pointer-events: none;
}
.he-pc-eyebrow,
.he-pc-kicker {
  display: inline-flex;
  color: var(--he-pc-red);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.he-pc-hero h2 { max-width: 860px; margin: 8px 0 12px; font-size: clamp(2rem, 5vw, 4rem); }
.he-pc-lead { max-width: 840px; margin: 0; color: var(--he-pc-muted); font-size: clamp(1.02rem, 2vw, 1.24rem); }
.he-pc-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 22px; color: var(--he-pc-muted); font-size: 0.88rem; }

.he-pc-nav {
  position: sticky;
  top: 12px;
  z-index: 20;
  margin: 18px 0 0;
  padding: 10px;
  border: 1px solid var(--he-pc-border);
  border-radius: 16px;
  background: var(--he-pc-bg);
  background: color-mix(in srgb, var(--he-pc-bg) 92%, transparent);
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 30px rgba(18, 38, 73, 0.08);
}
.he-pc-nav-links { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: thin; }
.he-pc-nav-links a { flex: 0 0 auto; padding: 8px 11px; border-radius: 10px; color: var(--he-pc-text); font-size: 0.86rem; font-weight: 700; text-decoration: none; }
.he-pc-nav-links a:hover,
.he-pc-nav-links a:focus-visible { background: var(--he-pc-surface-2); color: var(--he-pc-blue); }
.he-pc-nav-toggle { display: none; width: 100%; border: 0; background: transparent; color: var(--he-pc-text); font: inherit; font-weight: 800; text-align: left; }

.he-pc-section { scroll-margin-top: 86px; margin-top: clamp(44px, 7vw, 82px); }
.he-pc-section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.he-pc-section-head h2 { margin: 4px 0 0; font-size: clamp(1.55rem, 3vw, 2.35rem); }
.he-pc-section-head--with-tools { align-items: center; }

.he-pc-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.he-pc-stat { min-height: 155px; padding: 22px; border: 1px solid var(--he-pc-border); border-radius: 18px; background: linear-gradient(150deg, var(--he-pc-surface), var(--he-pc-bg)); box-shadow: 0 12px 32px rgba(18, 38, 73, 0.055); }
.he-pc-stat strong { display: block; margin-bottom: 10px; color: var(--he-pc-blue); font-size: clamp(1.7rem, 4vw, 2.55rem); line-height: 1; }
.he-pc-stat span { display: block; color: var(--he-pc-muted); font-size: 0.92rem; }
.he-pc-stat:nth-child(2) strong { color: var(--he-pc-red); }
.he-pc-stat:nth-child(3) strong { color: var(--he-pc-gold); }
.he-pc-stat:nth-child(4) strong { color: var(--he-pc-success); }

.he-pc-note { margin-top: 18px; padding: 16px 18px; border-left: 4px solid var(--he-pc-blue); border-radius: 0 14px 14px 0; background: var(--he-pc-surface); color: var(--he-pc-muted); }
.he-pc-note strong { color: var(--he-pc-text); }
.he-pc-note--method { border-left-color: var(--he-pc-gold); }

.he-pc-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.he-pc-flow > div { position: relative; min-height: 180px; padding: 22px 18px; border: 1px solid var(--he-pc-border); border-radius: 18px; background: var(--he-pc-surface); }
.he-pc-flow > div:not(:last-child)::after { content: "→"; position: absolute; right: -18px; top: 50%; z-index: 2; width: 24px; color: var(--he-pc-blue); font-weight: 900; text-align: center; transform: translateY(-50%); }
.he-pc-flow span { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 18px; border-radius: 50%; background: var(--he-pc-blue); color: #fff; font-weight: 800; }
.he-pc-flow strong { display: block; margin-bottom: 7px; color: var(--he-pc-text); }
.he-pc-flow small { display: block; color: var(--he-pc-muted); font-size: 0.88rem; line-height: 1.5; }

.he-pc-timeline { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.he-pc-timeline-item { padding: 22px; border: 1px solid var(--he-pc-border); border-radius: 18px; background: var(--he-pc-surface); }
.he-pc-timeline-item time { color: var(--he-pc-red); font-weight: 800; }
.he-pc-timeline-item h3 { margin: 6px 0 8px; font-size: 1.08rem; }
.he-pc-timeline-item p { margin: 0; color: var(--he-pc-muted); font-size: 0.92rem; }

.he-pc-document-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.he-pc-document-card { display: flex; flex-direction: column; min-height: 285px; padding: 22px; border: 1px solid var(--he-pc-border); border-radius: 18px; background: var(--he-pc-surface); }
.he-pc-document-type { width: max-content; margin-bottom: 16px; padding: 5px 9px; border-radius: 999px; background: var(--he-pc-surface-2); color: var(--he-pc-blue); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.he-pc-document-card h3 { margin-bottom: 5px; font-size: 1.08rem; }
.he-pc-document-date { margin: 0 0 10px; color: var(--he-pc-red); font-size: 0.84rem; font-weight: 700; }
.he-pc-document-card > p:not(.he-pc-document-date) { color: var(--he-pc-muted); font-size: 0.9rem; }
.he-pc-button { display: inline-flex; width: max-content; margin-top: auto; padding: 9px 13px; border-radius: 10px; background: var(--he-pc-blue); color: #fff !important; font-size: 0.84rem; font-weight: 800; text-decoration: none; }
.he-pc-button:hover { filter: brightness(1.08); }
.he-pc-document-missing { margin-top: auto; color: var(--he-pc-muted); font-size: 0.76rem; font-style: italic; }

.he-pc-table-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.he-pc-table-tools button { padding: 8px 11px; border: 1px solid var(--he-pc-border); border-radius: 10px; background: var(--he-pc-surface); color: var(--he-pc-text); font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.he-pc-table-tools button:hover,
.he-pc-table-tools button:focus-visible { border-color: var(--he-pc-blue); color: var(--he-pc-blue); }
.he-pc-table-wrap { overflow-x: auto; border: 1px solid var(--he-pc-border); border-radius: 16px; background: var(--he-pc-bg); }
.he-pc-table { width: 100%; min-width: 900px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.he-pc-table th,
.he-pc-table td { padding: 13px 14px; border-bottom: 1px solid var(--he-pc-border); text-align: right; white-space: nowrap; }
.he-pc-table th:first-child,
.he-pc-table td:first-child { text-align: left; }
.he-pc-table thead th { background: var(--he-pc-blue-2); color: #fff; font-size: 0.78rem; letter-spacing: 0.03em; text-transform: uppercase; }
.he-pc-table tbody tr:hover { background: var(--he-pc-surface); }
.he-pc-table tfoot th,
.he-pc-table tfoot td { border-bottom: 0; background: var(--he-pc-surface-2); font-weight: 800; }
.he-pc-caption { margin: 10px 2px 0; color: var(--he-pc-muted); font-size: 0.82rem; }

.he-pc-responsibility-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.he-pc-responsibility-card { padding: 18px; border: 1px solid var(--he-pc-border); border-radius: 16px; background: var(--he-pc-surface); }
.he-pc-responsibility-card h3 { margin-bottom: 8px; font-size: 1rem; }
.he-pc-responsibility-card p { margin: 0; color: var(--he-pc-muted); font-size: 0.88rem; }

.he-pc-subtitle { margin: 28px 0 14px; font-size: 1.14rem; }
.he-pc-article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.he-pc-article-card { overflow: hidden; border: 1px solid var(--he-pc-border); border-radius: 18px; background: var(--he-pc-surface); }
.he-pc-article-card.is-featured { box-shadow: var(--he-pc-shadow); }
.he-pc-article-image { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--he-pc-surface-2); }
.he-pc-article-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; }
.he-pc-article-card:hover .he-pc-article-image img { transform: scale(1.035); }
.he-pc-article-body { padding: 18px; }
.he-pc-article-body time { color: var(--he-pc-red); font-size: 0.76rem; font-weight: 800; }
.he-pc-article-body h3 { margin: 7px 0 8px; font-size: 1.02rem; }
.he-pc-article-body h3 a { color: var(--he-pc-text); text-decoration: none; }
.he-pc-article-body h3 a:hover { color: var(--he-pc-blue); }
.he-pc-article-body p { margin: 0; color: var(--he-pc-muted); font-size: 0.88rem; }
.he-pc-empty { padding: 18px; border: 1px dashed var(--he-pc-border); border-radius: 14px; color: var(--he-pc-muted); }

.he-pc-method-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.he-pc-method-grid article { padding: 22px; border: 1px solid var(--he-pc-border); border-radius: 18px; background: var(--he-pc-surface); }
.he-pc-method-grid h3 { font-size: 1.05rem; }
.he-pc-method-grid ul { margin: 0; padding-left: 1.2em; color: var(--he-pc-muted); }
.he-pc-source-line { margin-top: 18px; color: var(--he-pc-muted); font-size: 0.84rem; }

@media (max-width: 980px) {
  .he-pc-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .he-pc-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .he-pc-flow > div:not(:last-child)::after { display: none; }
  .he-pc-document-grid,
  .he-pc-responsibility-grid,
  .he-pc-article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .he-pc-hero { border-radius: 18px; }
  .he-pc-nav { position: relative; top: auto; }
  .he-pc-nav-toggle { display: block; }
  .he-pc-nav-links { display: none; flex-direction: column; margin-top: 8px; }
  .he-pc-nav.is-open .he-pc-nav-links { display: flex; }
  .he-pc-nav-links a { width: 100%; }
  .he-pc-section-head,
  .he-pc-section-head--with-tools { align-items: flex-start; flex-direction: column; }
  .he-pc-stat-grid,
  .he-pc-flow,
  .he-pc-timeline,
  .he-pc-document-grid,
  .he-pc-responsibility-grid,
  .he-pc-article-grid,
  .he-pc-method-grid { grid-template-columns: 1fr; }
  .he-pc-stat { min-height: 0; }
  .he-pc-flow > div { min-height: 0; }
  .he-pc-document-card { min-height: 0; }
  .he-pc-button,
  .he-pc-document-missing { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .he-pc-dossier *,
  .he-pc-dossier *::before,
  .he-pc-dossier *::after { scroll-behavior: auto !important; transition: none !important; }
}

.he-pc-debt-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.he-pc-debt-panel > div {
  padding: 24px;
  border: 1px solid var(--he-pc-border);
  border-radius: 18px;
  background: var(--he-pc-surface);
}
.he-pc-debt-panel h3 { margin-bottom: 8px; font-size: 1.05rem; }
.he-pc-debt-panel p { margin: 0; color: var(--he-pc-muted); }
.he-pc-debt-panel .he-pc-button,
.he-pc-debt-panel .he-pc-document-missing { margin-top: 14px; }

@media (max-width: 720px) {
  .he-pc-debt-panel { grid-template-columns: 1fr; }
}
