.article-page {
  background: #f6f7fb;
  color: #172033;
}

.xtra-article {
  --article-ink: #10213a;
  --article-muted: #647086;
  --article-purple: var(--main-purple, #8a2be2);
  --article-border: #e4e8f0;
  min-height: 70vh;
}

.article-breadcrumb {
  display: flex;
  gap: .65rem;
  align-items: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
  color: var(--article-muted);
  font-size: .8rem;
}

.article-breadcrumb a {
  color: var(--article-purple);
  font-weight: 700;
  text-decoration: none;
}

.article-breadcrumb [aria-current="page"] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.article-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 85% 10%, rgba(138, 43, 226, .48), transparent 34%), linear-gradient(135deg, #091b33 0%, #102b4d 58%, #39155d 100%);
  color: #fff;
}

.article-hero::after {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 32px 32px;
  content: "";
  pointer-events: none;
}

.article-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 940px;
  padding: clamp(3rem, 7vw, 6.5rem) 0;
}

.article-kicker {
  color: #d7b8ff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.article-hero h1 {
  max-width: 900px;
  font-size: clamp(2.65rem, 6.2vw, 5.6rem);
  line-height: .94;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.article-standfirst {
  max-width: 790px;
  color: rgba(255,255,255,.86);
  font-size: clamp(1rem, 1.55vw, 1.2rem);
  line-height: 1.7;
}

/* TinyMCE uses article-standfirst as the editor body class for the intro
   fragment. Recreate the hero backdrop there so the public white standfirst
   remains visible while editing. This selector does not match the public page
   body and therefore does not alter the frontend article layout. */
body.article-standfirst {
  max-width: none;
  min-height: 100%;
  background: radial-gradient(circle at 85% 10%, rgba(138, 43, 226, .48), transparent 34%), linear-gradient(135deg, #091b33 0%, #102b4d 58%, #39155d 100%);
}

.article-standfirst p:last-child { margin-bottom: 0; }

.article-standfirst a,
.article-hero a {
  color: #fff;
  text-decoration-color: rgba(255,255,255,.5);
  text-underline-offset: .2em;
}

.article-meta {
  color: rgba(255,255,255,.62);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(4rem, 7vw, 7rem);
}

.article-main {
  min-width: 0;
  max-width: 900px;
}

.article-cover {
  overflow: hidden;
  margin: 0 0 2rem;
  border-radius: 1rem;
  box-shadow: 0 18px 48px rgba(16,33,58,.14);
}

.article-cover img {
  display: block;
  width: 100%;
  height: auto;
}

.article-summary > .alert {
  margin: 0 0 2.5rem;
  padding: 1.35rem 1.5rem;
  border: 0;
  border-left: 4px solid var(--article-purple);
  border-radius: .25rem .8rem .8rem .25rem;
  background: #fff;
  box-shadow: 0 10px 28px rgba(16,33,58,.08);
  color: var(--article-ink);
}

.article-summary ul { margin-top: .8rem; }
.article-summary li + li { margin-top: .45rem; }

.article-body {
  font-size: 1rem;
  line-height: 1.78;
}

.article-body > section {
  margin-bottom: clamp(3rem, 6vw, 5rem);
  scroll-margin-top: 2rem;
}

.article-body h2,
.article-body h3,
.article-toc-card h2,
.article-toc-card h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  color: var(--article-ink);
}

.article-body h2 {
  padding: 0 0 .8rem;
  margin: 0 0 1.2rem;
  border-bottom: 1px solid var(--article-border);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.01em;
}

.article-body h2::after {
  display: block;
  width: 3.25rem;
  height: 3px;
  margin-top: .8rem;
  background: var(--article-purple);
  content: "";
}

.article-body h3 {
  padding: 0;
  margin: 2rem 0 .8rem;
  font-size: 1.55rem;
}

.article-body p,
.article-body ul,
.article-body ol { max-width: 78ch; }

.article-body a,
.article-summary a {
  color: var(--article-purple);
  font-weight: 600;
  text-underline-offset: .18em;
}

.article-body .row[aria-label] .card {
  border: 1px solid var(--article-border) !important;
  border-top: 3px solid var(--article-purple) !important;
  border-radius: .8rem;
  box-shadow: 0 8px 24px rgba(16,33,58,.07) !important;
}

.article-body .row[aria-label] .fs-3 {
  color: var(--article-ink);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.35rem !important;
}

.article-body .table-responsive {
  margin: 1.5rem 0 2rem;
  border: 1px solid var(--article-border);
  border-radius: .75rem;
  background: #fff;
  box-shadow: 0 8px 24px rgba(16,33,58,.06);
}

.article-body table {
  width: 100% !important;
  margin-bottom: 0 !important;
  font-size: .88rem;
}

.article-body table caption {
  padding: .85rem 1rem;
  color: var(--article-muted);
  caption-side: top;
}

.article-body .limitations {
  padding: 1.5rem !important;
  border-radius: 0 .8rem .8rem 0;
  background: #fffaf0;
}

.article-aside {
  display: grid;
  gap: 1.25rem;
  position: sticky;
  top: 1.5rem;
}

.article-toc-card {
  padding: 1.35rem 1.3rem;
  border: 1px solid var(--article-border);
  border-top: 3px solid var(--article-purple);
  border-radius: .8rem;
  background: #fff;
  box-shadow: 0 10px 30px rgba(16,33,58,.08);
}

.article-toc-card nav::before {
  display: block;
  margin-bottom: .9rem;
  color: var(--article-ink);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.25rem;
  letter-spacing: .04em;
  content: "In this article";
}

html.fr .article-toc-card nav::before { content: "Dans cet article"; }
html.es .article-toc-card nav::before { content: "En este artículo"; }

.article-toc-card ol,
.article-toc-card ul {
  display: grid;
  gap: .7rem;
  padding-left: 1.15rem;
  margin: 0;
  color: var(--article-purple);
  font-size: .84rem;
  line-height: 1.35;
}

.article-toc-card a {
  color: var(--article-ink);
  text-decoration: none;
}

.article-toc-card a:hover,
.article-toc-card a:focus-visible {
  color: var(--article-purple);
  text-decoration: underline;
}

.article-body .dt-container { margin: 1.5rem 0 2rem; }
.article-body .dt-container .table-responsive { margin: 0; }

@media (max-width: 920px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .article-aside {
    position: static;
    grid-row: 1;
  }
  .article-toc-card { box-shadow: none; }
}

@media (max-width: 640px) {
  .article-breadcrumb {
    overflow-x: auto;
    padding-top: .75rem;
    padding-bottom: .75rem;
    white-space: nowrap;
  }
  .article-hero__inner { padding: 3.25rem 0; }
  .article-hero h1 { font-size: clamp(2.35rem, 13vw, 3.65rem); }
  .article-layout { padding-top: 1.5rem; }
  .article-summary > .alert,
  .article-toc-card { padding: 1.1rem; }
  .article-body {
    font-size: .96rem;
    line-height: 1.7;
  }
  .article-body h2 { font-size: 2rem; }
  .article-body .table-responsive { max-width: calc(100vw - 1.5rem); }
}

@media print {
  .article-page { background: #fff; }
  .article-breadcrumb,
  .article-aside,
  .dt-container .dt-layout-row:not(.dt-layout-table) { display: none !important; }
  .article-hero {
    background: #fff !important;
    color: #000;
  }
  .article-hero__inner { padding: 1rem 0 2rem; }
  .article-standfirst,
  .article-meta,
  .article-kicker { color: #333; }
  .article-layout {
    display: block;
    padding: 0;
  }
  .article-body > section,
  .article-summary,
  .article-cover { break-inside: avoid; }
}