/* ============================================================
   BEFOX - Basic page (page de contenu) · style B
   Réutilise .prose de article.css pour le corps.
   ============================================================ */
.page-hero{
  border-bottom:1px solid var(--hair);
  background:radial-gradient(90% 80% at 80% -20%, rgba(240,128,24,.12), transparent 55%), var(--ink-900);
}
.page-hero .wrap{ padding-block:clamp(40px,6vw,76px); max-width:900px; margin-inline:auto; }
.page-hero .breadcrumb{ font-family:var(--mono); font-size:12.5px; color:var(--fg-mute); margin-bottom:22px; display:flex; gap:8px; flex-wrap:wrap; }
.page-hero .breadcrumb a:hover{ color:var(--orange); }
.page-hero .breadcrumb .sep{ opacity:.5; }
.page-hero h1{ font-size:clamp(32px,5.5vw,56px); font-weight:800; letter-spacing:-.035em; line-height:1.02; text-wrap:balance; }
.page-hero h1 em{ font-style:normal; color:var(--orange); }
.page-hero .dek{ color:var(--fg-soft); font-size:clamp(16px,2.1vw,20px); margin-top:18px; max-width:60ch; }

/* layout: content + sticky TOC aside */
.page-body{ padding-block:clamp(40px,6vw,72px); }
.page-layout{
  display:grid; grid-template-columns:240px 1fr; gap:clamp(32px,5vw,64px);
  max-width:1080px; margin-inline:auto; align-items:start;
}
.toc{ position:sticky; top:94px; }
.toc h4{ font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--fg-mute); margin-bottom:14px; }
.toc a{ display:block; font-size:14px; color:var(--fg-soft); padding:7px 0 7px 14px; border-left:1px solid var(--hair); transition:.15s; }
.toc a:hover{ color:var(--orange); border-color:var(--orange); }

/* the prose itself reuses article.css .prose, but here it can be wider/left-aligned */
.page-layout .prose{ max-width:none; margin:0; padding-bottom:0; }

/* key facts card inside content */
.facts{
  border:1px solid var(--hair-strong); border-radius:16px; background:var(--ink-850);
  padding:24px 26px; margin-block:1.8em; display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.facts .f .big{ font-size:30px; font-weight:800; color:var(--orange); letter-spacing:-.03em; line-height:1; }
.facts .f span{ display:block; color:var(--fg-mute); font-size:13.5px; margin-top:8px; }

/* values grid */
.values{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-block:1.6em; }
.values .v{ border:1px solid var(--hair); border-radius:14px; background:var(--ink-850); padding:22px 24px; }
.values .v .k{ font-family:var(--mono); font-size:11.5px; color:var(--orange); }
.values .v b{ display:block; font-size:16.5px; margin:8px 0 6px; }
.values .v p{ color:var(--fg-mute); font-size:14px; margin:0; }

@media (max-width:860px){
  .page-layout{ grid-template-columns:1fr; gap:8px; }
  .toc{ position:static; border:1px solid var(--hair); border-radius:12px; padding:18px 20px; background:var(--ink-850); margin-bottom:8px; }
  .toc a{ border-left:0; padding:6px 0; }
  .facts{ grid-template-columns:1fr; gap:16px; }
  .values{ grid-template-columns:1fr; }
}