/**
 * AbayaFemme — article detail.
 *
 * One deliberate cascade: mobile base, tablet enhancement, desktop composition.
 * Layout dimensions use pixels because WoodMart sets the root size to 14px.
 */

body.single-post.af-editorial-active .wd-page-content {
  padding-block: 0;
  background: #fbf8f3;
}

body.single-post.af-editorial-active .main-page-wrapper {
  padding-top: 0;
  background: #fbf8f3;
}

body.single-post.af-editorial-active .main-page-wrapper > .container,
body.single-post.af-editorial-active .wd-content-layout,
body.single-post.af-editorial-active .wd-content-area {
  display: block;
  width: 100%;
  max-width: none;
  padding: 0;
}

body.single-post.af-editorial-active .wd-sidebar-opener {
  display: none !important;
}

.af-article--detail {
  /* Route aliases. These were raw hexes within ΔE 2.5 of the tokens they now
   * point at, so the page looks the same and the palette is finally one
   * palette. The muted tier gains from it: it was #6c655d, noted here as
   * 4.49:1 on the cream and knowingly just under AA; the canonical
   * --af-color-ink-muted lands at 5.47:1 on the same ground. */
  --af-article-ink: var(--af-color-ink);
  --af-article-muted: var(--af-color-ink-muted);
  --af-article-olive: var(--af-color-olive-700);
  --af-article-olive-dark: var(--af-color-olive-900);
  --af-article-sage: var(--af-color-olive-200);
  /* Not aliased to --af-color-blush, and this one is measured rather than
   * taste: the canonical blush is #dcc7ba, ΔE 3.3 darker, and the alert box
   * below sets muted text on this ground. On #ead0c5 that text reads 4.06:1;
   * on the canonical blush it falls to 3.92:1, under AA. A tidier palette is
   * not worth a contrast failure, so this tint keeps its own value. */
  --af-article-blush: #ead0c5;
  --af-article-cream: var(--af-color-olive-100);
  --af-article-paper: var(--af-color-ivory);
  --af-article-line: var(--af-color-blush);
  width: 100%;
  max-width: none;
  margin-inline: 0;
  overflow: clip;
  color: var(--af-article-ink);
  background: var(--af-article-paper);
  font-family: var(--af-font-ui);
  font-size: 16px;
}

.af-article--detail,
.af-article--detail * {
  box-sizing: border-box;
}

.af-article--detail .af-container {
  width: 100%;
  max-width: none;
  margin-inline: auto;
  padding-inline: 16px;
}

.af-article--detail :where(a, button, summary) {
  -webkit-tap-highlight-color: transparent;
}

.af-article--detail :where(a, button, summary):focus-visible {
  outline: 2px solid #315f9b;
  outline-offset: 3px;
}

.af-article--detail :where(h1, h2, h3, h4, p, ul, ol, figure) {
  margin-block-start: 0;
}

.af-article--detail .af-eyebrow {
  margin-bottom: 8px;
  color: var(--af-article-olive);
  font-family: var(--af-font-ui);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.af-article--detail .af-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Hero ------------------------------------------------------------------ */

/* One continuous band, edge to edge: the featured image is a background layer
 * that dissolves into the hero ground, so the copy never meets the photograph
 * on a hard cut. --af-hero-media-h drives both the image height and the copy
 * offset, which is what keeps that overlap stable across viewports.
 * --af-hero-scrim carries the ground colour as RGB channels so the gradient
 * stops can vary its alpha without restating the hex. */
.af-article--detail .af-article-hero {
  --af-hero-scrim: 247 241 233;
  --af-hero-media-h: clamp(250px, 60vw, 420px);
  position: relative;
  overflow: hidden;
  padding-block: 12px 0;
  background: rgb(var(--af-hero-scrim));
  border-bottom: 1px solid #e7dccd;
}

/* Positioned so the hero media, which is itself absolutely positioned, cannot
 * paint over the trail. */
.af-article--detail .af-article-breadcrumbs {
  position: relative;
  z-index: 2;
  min-height: 34px;
  margin-bottom: 12px;
  color: var(--af-article-muted);
  font-size: 12px;
}

.af-article--detail .af-article-breadcrumbs :where(.wd-breadcrumbs, a, span) {
  color: inherit;
  font-size: inherit;
}

/* Negative margins cancel the container gutter so the hero runs full width
 * while the breadcrumbs above it stay aligned with the article body. */
.af-article--detail .af-article-hero__frame {
  position: relative;
  isolation: isolate;
  display: block;
  margin-inline: -16px;
  overflow: hidden;
  background: transparent;
}

.af-article--detail .af-article-hero__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: calc(var(--af-hero-media-h) - 20px) 16px 28px;
  background: transparent;
}

.af-article--detail .af-article-silo {
  align-self: flex-start;
  margin-bottom: 14px;
  color: var(--af-article-olive);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.17em;
  text-decoration: none;
  text-transform: uppercase;
}

/* line-height stays above 1.05: French display capitals carry accents, and the
 * old 1.02 clipped them against the frame's overflow. */
.af-article--detail .af-article-hero h1 {
  max-width: none;
  margin: 0 0 16px;
  color: var(--af-article-ink);
  font-family: var(--af-font-display);
  font-size: clamp(34px, 8.6vw, 46px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.af-article--detail .af-article-intro {
  max-width: 52ch;
  margin: 0 0 22px;
  color: #5f574f;
  font-size: 15px;
  line-height: 1.65;
}

.af-article--detail .af-article-byline {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 2px;
}

.af-article--detail .af-article-byline__avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  object-fit: cover;
  border-radius: 50%;
}

.af-article--detail .af-article-byline__monogram {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  color: #fff;
  background: var(--af-article-olive);
  border-radius: 50%;
  font-family: var(--af-font-display);
  font-size: 13px;
}

.af-article--detail .af-article-byline p {
  display: flex;
  min-width: 0;
  margin: 0;
  flex-wrap: wrap;
  column-gap: 8px;
  color: var(--af-article-muted);
  font-size: 11px;
  line-height: 1.55;
}

.af-article--detail .af-article-byline strong {
  width: 100%;
  color: var(--af-article-ink);
  font-size: 12px;
  font-weight: 650;
}

.af-article--detail .af-article-byline span + span::before {
  content: "·";
  margin-right: 8px;
}

.af-article--detail .af-article-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 21px;
  padding-top: 16px;
  border-top: 1px solid rgb(70 63 53 / 17%);
}

.af-article--detail .af-article-share > span:first-child {
  width: 100%;
  color: var(--af-article-muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.af-article--detail .af-article-share :where(a, button) {
  display: inline-flex;
  min-height: 35px;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  color: var(--af-article-ink);
  background: transparent;
  border: 1px solid #cfc2b3;
  border-radius: 2px;
  font: 600 11px/1.2 var(--af-font-ui);
  text-decoration: none;
  text-transform: none;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.af-article--detail .af-article-share :where(a, button):hover {
  color: #fff;
  background: var(--af-article-olive-dark);
  border-color: var(--af-article-olive-dark);
}

.af-article--detail .af-article-share__icon {
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  font-size: 11px;
}

.af-article--detail .af-article-hero__media {
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  height: var(--af-hero-media-h);
  margin: 0;
  overflow: hidden;
  background: #ddd1c2;
}

.af-article--detail .af-article-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 1;
  object-fit: cover;
  object-position: center 30%;
}

/* The house illustration is a brand plate, not a photograph: its subject sits along the
 * lower band, so it is anchored there instead of at the 30% line used for editorial
 * shots. */
.af-article--detail .af-article-hero__media--fallback img {
  object-position: center 62%;
}

/* The dissolve. Fully opaque where the copy sits, clear where the photograph
 * should stay readable. */
.af-article--detail .af-article-hero__media::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgb(var(--af-hero-scrim) / 34%) 0%,
    rgb(var(--af-hero-scrim) / 0%) 16%,
    rgb(var(--af-hero-scrim) / 6%) 44%,
    rgb(var(--af-hero-scrim) / 58%) 70%,
    rgb(var(--af-hero-scrim) / 95%) 88%,
    rgb(var(--af-hero-scrim) / 100%) 100%
  );
}

.af-article--detail .af-article-hero--without-media .af-article-hero__copy {
  padding-top: 26px;
}

/* Reading layout -------------------------------------------------------- */

.af-article--detail .af-article-layout {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-block: 38px 0;
}

.af-article--detail .af-article-main,
.af-article--detail .af-article-rail {
  min-width: 0;
}

.af-article--detail .af-article-main {
  order: 2;
}

.af-article--detail .af-article-rail {
  order: 1;
}

/* Article typography --------------------------------------------------- */

/* The reading face is set once, here, and inherited. The components the editorial
 * pipeline injects into the post body (key points, notes, comparison tables) pick it up
 * without restating it; the ones that are chrome rather than prose already declare
 * --af-font-ui or --af-font-display explicitly and are unaffected. */
.af-article--detail .af-article-content {
  color: #38332d;
  font-family: var(--af-font-read);
  font-size: 17px;
  line-height: 1.72;
}

.af-article--detail .af-article-content > :where(p, ul, ol, blockquote),
.af-article--detail .af-article-section > :where(p, ul, ol, blockquote) {
  max-width: 64ch;
}

.af-article--detail .af-article-content p {
  margin-bottom: 20px;
}

.af-article--detail .af-article-content a {
  color: #4e522f;
  font-weight: 550;
  text-decoration-color: rgb(78 82 47 / 42%);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.af-article--detail .af-article-lede,
.af-article--detail .af-article-content > p:first-child {
  max-width: 58ch;
  margin-bottom: 28px;
  color: #302c27;
  font-size: 19px;
  line-height: 1.62;
}

.af-article--detail .af-article-section {
  margin-block: 0;
  padding: 0;
}

.af-article--detail .af-article-section + .af-article-section {
  margin-top: 48px;
}

.af-article--detail .af-article-content :where(h2, .af-article-heading) {
  max-width: 22em;
  margin: 50px 0 15px;
  color: var(--af-article-ink);
  font-family: var(--af-font-read);
  font-size: clamp(29px, 4.6vw, 33px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.012em;
  overflow-wrap: break-word;
  text-wrap: balance;
  scroll-margin-top: 145px;
}

.af-article--detail .af-article-section > :where(h2, .af-article-heading):first-child {
  margin-top: 0;
}

.af-article--detail .af-article-content :where(h3, .af-article-subheading) {
  max-width: 34em;
  margin: 32px 0 10px;
  color: var(--af-article-ink);
  font-family: var(--af-font-read);
  font-size: clamp(21px, 3.4vw, 23px);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.006em;
  overflow-wrap: break-word;
  text-wrap: pretty;
  scroll-margin-top: 145px;
}

.af-article--detail .af-article-content :where(h4) {
  max-width: 48em;
  margin: 27px 0 9px;
  color: var(--af-article-ink);
  font: 650 18px/1.35 var(--af-font-ui);
  letter-spacing: -0.01em;
}

.af-article--detail .af-article-content :where(ul, ol) {
  margin-bottom: 22px;
  padding-left: 22px;
}

.af-article--detail .af-article-content li {
  margin-bottom: 8px;
}

.af-article--detail .af-article-content blockquote {
  margin: 30px 0;
  padding: 20px 0 20px 24px;
  color: #403b32;
  border-left: 3px solid var(--af-article-olive);
  font-family: var(--af-font-read);
  font-size: 21px;
  line-height: 1.5;
}

.af-article--detail .af-article-content figure {
  margin: 30px 0;
}

.af-article--detail .af-article-content figure img {
  display: block;
  width: 100%;
  height: auto;
}

.af-article--detail .af-article-content figcaption {
  margin-top: 8px;
  color: var(--af-article-muted);
  font-family: var(--af-font-read);
  font-size: 13px;
  line-height: 1.55;
}

/* Editorial components ------------------------------------------------- */

.af-article--detail .af-key-points,
.af-article--detail .af-article-health-note {
  margin: 28px 0 42px;
  padding: 24px 26px;
  background: #f1eadc;
  border-left: 3px solid var(--af-article-olive);
}

.af-article--detail .af-key-points ul {
  display: grid;
  gap: 9px;
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.af-article--detail .af-key-points li {
  position: relative;
  margin: 0;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.58;
}

.af-article--detail .af-key-points li::before {
  content: "";
  position: absolute;
  top: 0.67em;
  left: 1px;
  width: 6px;
  height: 6px;
  background: var(--af-article-olive);
  border-radius: 50%;
}

.af-article--detail .af-article-health-note strong {
  display: block;
  margin-bottom: 5px;
  color: var(--af-article-olive-dark);
  font-size: 14px;
}

.af-article--detail .af-article-health-note p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

.af-article--detail .af-editorial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 27px 0 34px;
}

.af-article--detail .af-editorial-panel {
  padding: 22px 24px;
  background: var(--af-article-cream);
  border: 1px solid var(--af-article-line);
}

.af-article--detail .af-editorial-panel h3,
.af-article--detail .af-editorial-panel .af-article-subheading {
  margin: 0 0 8px;
  font-size: 23px;
}

/* Drafts emit the panel title as a bare <strong>, not an h3. */
.af-article--detail .af-editorial-panel > strong {
  display: block;
  margin: 0 0 8px;
  font-size: 23px;
  line-height: 1.25;
}

.af-article--detail .af-editorial-panel p {
  margin: 0;
  color: var(--af-article-muted);
  font-size: 15px;
  line-height: 1.62;
}

.af-article--detail .af-note {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 16px;
  margin: 28px 0;
  padding: 22px 24px;
  background: #f4ede2;
  border-block: 1px solid var(--af-article-line);
}

.af-article--detail .af-note__index {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: #fff;
  background: var(--af-article-olive);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 650;
}

.af-article--detail .af-note strong {
  display: block;
  margin-bottom: 4px;
  color: var(--af-article-ink);
  font-size: 15px;
}

.af-article--detail .af-note p {
  margin: 0;
  font-size: 14px;
  line-height: 1.62;
}

.af-article--detail .af-table-scroll {
  width: 100%;
  margin: 28px 0 30px;
  overflow-x: auto;
  border: 1px solid var(--af-article-line);
  scrollbar-width: thin;
}

.af-article--detail .af-comparison-table,
.af-article--detail .af-article-content table {
  width: 100%;
  min-width: 620px;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  background: #fffdfa;
  font-size: 14px;
  line-height: 1.48;
}

.af-article--detail .af-comparison-table :where(th, td),
.af-article--detail .af-article-content table :where(th, td) {
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  border: 0;
  border-bottom: 1px solid var(--af-article-line);
}

.af-article--detail .af-comparison-table th,
.af-article--detail .af-article-content table th {
  color: #fff;
  background: var(--af-article-olive);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.af-article--detail .af-article-checklist,
.af-article--detail .af-article-steps {
  display: grid;
  gap: 0;
  max-width: none;
  margin: 26px 0 34px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--af-article-line);
}

.af-article--detail .af-article-checklist li,
.af-article--detail .af-article-steps li {
  position: relative;
  margin: 0;
  padding: 17px 10px 17px 42px;
  border-bottom: 1px solid var(--af-article-line);
  font-size: 15px;
  line-height: 1.58;
}

.af-article--detail .af-article-checklist li::before {
  content: "✓";
  position: absolute;
  top: 17px;
  left: 10px;
  color: var(--af-article-olive);
  font-weight: 700;
}

.af-article--detail .af-article-steps {
  counter-reset: af-step;
}

.af-article--detail .af-article-steps li {
  counter-increment: af-step;
}

.af-article--detail .af-article-steps li::before {
  content: counter(af-step, decimal-leading-zero);
  position: absolute;
  top: 18px;
  left: 4px;
  color: var(--af-article-olive);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
}

.af-article--detail .af-decision-path {
  display: grid;
  grid-template-columns: 1fr;
  margin: 28px 0 34px;
  border-top: 1px solid var(--af-article-line);
  border-left: 1px solid var(--af-article-line);
}

.af-article--detail .af-decision-path__step {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 13px;
  min-width: 0;
  padding: 20px;
  border-right: 1px solid var(--af-article-line);
  border-bottom: 1px solid var(--af-article-line);
}

.af-article--detail .af-decision-path__step > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: #fff;
  background: var(--af-article-olive);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 650;
}

.af-article--detail .af-decision-path__step strong {
  display: block;
  margin-bottom: 5px;
  color: var(--af-article-ink);
  font-size: 14px;
}

.af-article--detail .af-decision-path__step p {
  margin: 0;
  color: var(--af-article-muted);
  font-size: 14px;
  line-height: 1.58;
}

/* Numbered guide — ordered list with circled step numbers */
.af-article--detail .af-numbered-guide {
  margin: 28px 0 34px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--af-article-line);
}

.af-article--detail .af-numbered-guide > li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 13px;
  padding: 20px;
  border-bottom: 1px solid var(--af-article-line);
}

.af-article--detail .af-numbered-guide > li > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: #fff;
  background: var(--af-article-olive);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 650;
}

.af-article--detail .af-numbered-guide > li > div {
  min-width: 0;
}

.af-article--detail .af-numbered-guide strong {
  display: block;
  margin-bottom: 5px;
  color: var(--af-article-ink);
  font-size: 14px;
}

.af-article--detail .af-numbered-guide p {
  margin: 0;
  color: var(--af-article-muted);
  font-size: 14px;
  line-height: 1.58;
}

/* Recipe / fiche panel — compact summary card with head + grid */
.af-article--detail .af-recipe-panel {
  margin: 28px 0 34px;
  background: var(--af-article-cream);
  border: 1px solid var(--af-article-line);
}

.af-article--detail .af-recipe-panel__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--af-article-line);
  color: var(--af-article-ink);
}

.af-article--detail .af-recipe-panel__head span {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--af-article-olive);
}

.af-article--detail .af-recipe-panel__head strong {
  font-size: 15px;
  font-weight: 600;
}

.af-article--detail .af-recipe-panel__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--af-article-line);
}

.af-article--detail .af-recipe-panel__grid > div {
  padding: 18px 20px;
  background: var(--af-article-cream);
}

.af-article--detail .af-recipe-panel__grid h3 {
  margin: 0 0 8px;
  color: var(--af-article-ink);
  font-size: 14px;
  font-weight: 600;
}

.af-article--detail .af-recipe-panel__grid ul {
  margin: 0;
  padding-left: 1.1em;
  color: var(--af-article-muted);
  font-size: 13px;
  line-height: 1.6;
}

.af-article--detail .af-recipe-panel__grid li + li {
  margin-top: 4px;
}

/* Editorial grid — children are cream cards on hairline borders */
.af-article--detail .af-editorial-grid > article {
  padding: 22px 24px;
  background: var(--af-article-cream);
  border: 1px solid var(--af-article-line);
}

.af-article--detail .af-editorial-grid--two > article {
  padding: 22px 24px;
}

.af-article--detail .af-editorial-grid__index {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--af-article-olive);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.af-article--detail .af-editorial-grid h3 {
  margin: 0 0 8px;
  color: var(--af-article-ink);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
}

.af-article--detail .af-editorial-grid p {
  margin: 0;
  color: var(--af-article-muted);
  font-size: 14px;
  line-height: 1.58;
}

/* Check list — simple list with check marks */
.af-article--detail .af-check-list {
  margin: 24px 0 30px;
  padding: 20px 24px;
  background: var(--af-article-cream);
  border: 1px solid var(--af-article-line);
  list-style: none;
}

.af-article--detail .af-check-list li {
  position: relative;
  padding-left: 28px;
  color: var(--af-article-ink);
  font-size: 14px;
  line-height: 1.6;
}

.af-article--detail .af-check-list li + li {
  margin-top: 10px;
}

.af-article--detail .af-check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--af-article-olive);
  font-size: 14px;
  font-weight: 700;
}

/* Alert — health/safety callout box */
/* Ces encarts posent un fond nettement plus sombre que le papier de
 * l'article, donc --af-article-muted (calé sur le crème) y tombait à 4.17:1
 * et 3.92:1 selon la variante. Le token est redéfini ici, pour l'encart
 * seulement : assombrir le muted global pénaliserait tout le corps du texte
 * au profit de deux blocs. */
.af-article--detail .af-alert {
  --af-article-muted: #625c55;

  margin: 28px 0 34px;
  padding: 22px 24px;
  background: var(--af-article-blush);
  border-left: 3px solid var(--af-article-olive);
}

.af-article--detail .af-alert--health {
  background: #e8d9d0;
  border-left-color: #8c5a4a;
}

.af-article--detail .af-alert__eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--af-article-olive);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* 4.15:1 mesurés sur le fond #e8d9d0 de la variante santé. */
.af-article--detail .af-alert--health .af-alert__eyebrow {
  color: #855546;
}

.af-article--detail .af-alert strong {
  display: block;
  margin-bottom: 6px;
  color: var(--af-article-ink);
  font-size: 15px;
  font-weight: 600;
}

.af-article--detail .af-alert p {
  margin: 0;
  color: var(--af-article-muted);
  font-size: 14px;
  line-height: 1.58;
}

/* Sources — references section */
.af-article--detail .af-sources {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 2px solid var(--af-article-line);
}

.af-article--detail .af-sources ul {
  margin: 16px 0 0;
  padding-left: 1.1em;
  color: var(--af-article-muted);
  font-size: 13px;
  line-height: 1.7;
}

.af-article--detail .af-sources li + li {
  margin-top: 6px;
}

.af-article--detail .af-sources a {
  color: var(--af-article-olive);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.af-article--detail .af-shopping-bridge,
.af-article--detail .af-article-shop-banner {
  position: relative;
  isolation: isolate;
  min-height: 300px;
  margin: 36px 0 44px;
  padding: 176px 24px 26px;
  overflow: hidden;
  background: #ece2d2;
  border: 1px solid #d8cbbb;
}

.af-article--detail .af-shopping-bridge::after,
.af-article--detail .af-article-shop-banner::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 156px;
  background-image: linear-gradient(180deg, transparent 65%, #ece2d2 100%), var(--af-article-image);
  background-position: center;
  background-size: cover;
}

.af-article--detail .af-shopping-bridge__eyebrow {
  display: block;
  margin-bottom: 7px;
  color: var(--af-article-olive);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.af-article--detail .af-shopping-bridge h3,
.af-article--detail .af-article-shop-banner h2 {
  max-width: 13ch;
  margin: 0 0 8px;
  font-family: var(--af-font-display);
  font-size: 29px;
  font-weight: 500;
  line-height: 1.08;
}

.af-article--detail .af-shopping-bridge p,
.af-article--detail .af-article-shop-banner p {
  max-width: 40ch;
  margin: 0 0 14px;
  color: var(--af-article-muted);
  font-size: 14px;
  line-height: 1.55;
}

.af-article--detail .af-shopping-bridge .af-button,
.af-article--detail .af-shopping-bridge__actions > a,
.af-article--detail .af-article-shop-banner a {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 16px;
  justify-content: center;
  padding: 10px 17px;
  color: #fff;
  background: var(--af-article-olive-dark);
  border: 1px solid var(--af-article-olive-dark);
  border-radius: 0;
  font: 650 11px/1.2 var(--af-font-ui);
  letter-spacing: 0.07em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 180ms ease, background-color 180ms ease;
}

.af-article--detail .af-shopping-bridge .af-button:hover,
.af-article--detail .af-shopping-bridge__actions > a:hover,
.af-article--detail .af-article-shop-banner a:hover {
  color: var(--af-article-olive-dark);
  background: transparent;
}

.af-article--detail .af-faq-list {
  max-width: 66ch;
  margin: 24px 0 34px;
  border-top: 1px solid var(--af-article-line);
}

/* Two spellings exist in the corpus, .af-faq-item and .af-faq__item, and both are a
 * <details>. These rules used to read `.af-faq-item,.af-faq__item summary`, which is not
 * "summary inside either item" — it is `.af-faq-item` on its own, plus `.af-faq__item
 * summary`. The consequence was not cosmetic: the ::after rule handed `position:
 * absolute` to every <details>, so the questions left the flow, stacked on a single
 * point and vanished. Articles rendered the FAQ heading and its rule with nothing under
 * them. Each pair is now written out in full. */
.af-article--detail .af-faq-item,
.af-article--detail .af-faq__item {
  color: var(--af-article-muted);
  border-bottom: 1px solid var(--af-article-line);
  font-size: 15px;
  line-height: 1.7;
}

/* Answers are authored both as bare text and wrapped in <p>, so the room below an open
 * answer sits on the item rather than on a paragraph that may not be there. */
.af-article--detail .af-faq-item[open],
.af-article--detail .af-faq__item[open] {
  padding-bottom: 18px;
}

.af-article--detail .af-faq-item > summary,
.af-article--detail .af-faq__item > summary {
  position: relative;
  padding: 17px 38px 17px 0;
  color: var(--af-article-ink);
  cursor: pointer;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.45;
  list-style: none;
}

.af-article--detail .af-faq-item > summary::-webkit-details-marker,
.af-article--detail .af-faq__item > summary::-webkit-details-marker {
  display: none;
}

.af-article--detail .af-faq-item > summary::after,
.af-article--detail .af-faq__item > summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 8px;
  color: var(--af-article-olive);
  font-size: 20px;
  font-weight: 400;
  transform: translateY(-50%);
}

.af-article--detail .af-faq-item[open] > summary::after,
.af-article--detail .af-faq__item[open] > summary::after {
  content: "−";
}

.af-article--detail .af-faq-item p,
.af-article--detail .af-faq__item p {
  max-width: none;
  margin: 0 0 12px;
  font-size: inherit;
  line-height: inherit;
}

.af-article--detail .af-faq-item p:last-child,
.af-article--detail .af-faq__item p:last-child {
  margin-bottom: 0;
}

.af-article--detail .af-article-sources {
  padding: 26px;
  background: #f2ebdf;
  border-top: 3px solid var(--af-article-olive);
}

.af-article--detail .af-article-sources h2 {
  margin-top: 0;
}

.af-article--detail .af-article-sources ul {
  max-width: none;
  margin: 0;
  padding-left: 20px;
}

.af-article--detail .af-article-sources li {
  margin-bottom: 9px;
  font-size: 13px;
  line-height: 1.55;
}

/* Comparison strip — bordered scenario cards (label + title + text) */
.af-article--detail .af-comparison-strip {
  display: grid;
  grid-template-columns: 1fr;
  margin: 28px 0 34px;
  border-top: 1px solid var(--af-article-line);
  border-left: 1px solid var(--af-article-line);
}

.af-article--detail .af-comparison-strip > div {
  min-width: 0;
  padding: 18px 20px;
  border-right: 1px solid var(--af-article-line);
  border-bottom: 1px solid var(--af-article-line);
}

.af-article--detail .af-comparison-strip span {
  display: block;
  margin-bottom: 6px;
  color: var(--af-article-olive);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.af-article--detail .af-comparison-strip strong {
  display: block;
  margin-bottom: 6px;
  color: var(--af-article-ink);
  font-size: 15px;
  font-weight: 600;
}

.af-article--detail .af-comparison-strip p {
  margin: 0;
  color: var(--af-article-muted);
  font-size: 14px;
  line-height: 1.58;
}

/* Comparison grid — numbered framework cards */
.af-article--detail .af-comparison-grid {
  display: grid;
  grid-template-columns: 1fr;
  margin: 28px 0 34px;
  border-top: 1px solid var(--af-article-line);
  border-left: 1px solid var(--af-article-line);
}

.af-article--detail .af-comparison-grid > article {
  min-width: 0;
  padding: 20px;
  border-right: 1px solid var(--af-article-line);
  border-bottom: 1px solid var(--af-article-line);
}

.af-article--detail .af-comparison-grid > article > span {
  display: block;
  margin-bottom: 8px;
  color: var(--af-article-olive);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.af-article--detail .af-comparison-grid h3 {
  margin: 0 0 8px;
  color: var(--af-article-ink);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
}

.af-article--detail .af-comparison-grid p {
  margin: 0;
  color: var(--af-article-muted);
  font-size: 14px;
  line-height: 1.58;
}

/* Editorial panel label — covers .af-editorial-panel__index and bare spans */
.af-article--detail .af-editorial-panel > span {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--af-article-olive);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Editorial card — boxed variant with a list body */
.af-article--detail .af-editorial-card {
  min-width: 0;
  padding: 22px 24px;
  background: var(--af-article-cream);
  border: 1px solid var(--af-article-line);
}

.af-article--detail .af-editorial-card > span {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--af-article-olive);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.af-article--detail .af-editorial-card h3 {
  margin: 0 0 8px;
  color: var(--af-article-ink);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
}

.af-article--detail .af-editorial-card ul {
  margin: 0;
  padding-left: 1.1em;
  color: var(--af-article-muted);
  font-size: 14px;
  line-height: 1.6;
}

.af-article--detail .af-editorial-card li + li {
  margin-top: 4px;
}

/* Editorial quote and pull quote */
.af-article--detail .af-editorial-quote,
.af-article--detail .af-pullquote {
  max-width: 46ch;
  margin: 30px 0;
  padding: 4px 0 4px 26px;
  border-left: 2px solid var(--af-article-olive);
  font-family: var(--af-font-read);
  font-size: 20px;
  line-height: 1.55;
  color: var(--af-article-ink);
}

.af-article--detail .af-editorial-quote p,
.af-article--detail .af-pullquote p {
  margin: 0;
}

/* Checklist — boxed list with an optional heading */
.af-article--detail .af-checklist {
  margin: 24px 0 30px;
  padding: 20px 24px;
  background: var(--af-article-cream);
  border: 1px solid var(--af-article-line);
}

.af-article--detail .af-checklist h3 {
  margin: 0 0 12px;
  color: var(--af-article-ink);
  font-size: 15px;
  font-weight: 600;
}

.af-article--detail .af-checklist ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.af-article--detail .af-checklist li {
  position: relative;
  padding-left: 26px;
  color: var(--af-article-ink);
  font-size: 14px;
  line-height: 1.6;
}

.af-article--detail .af-checklist li + li {
  margin-top: 10px;
}

.af-article--detail .af-checklist li::before {
  content: "✓";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--af-article-olive);
  font-weight: 700;
}

/* Signal list — warning signs of bad information */
.af-article--detail .af-signal-list {
  margin: 24px 0 30px;
  padding: 20px 24px;
  background: var(--af-article-cream);
  border: 1px solid var(--af-article-line);
  list-style: none;
}

.af-article--detail .af-signal-list li {
  position: relative;
  padding-left: 24px;
  color: var(--af-article-ink);
  font-size: 14px;
  line-height: 1.6;
}

.af-article--detail .af-signal-list li + li {
  margin-top: 10px;
}

.af-article--detail .af-signal-list li::before {
  content: "!";
  position: absolute;
  top: 0;
  left: 2px;
  color: var(--af-article-olive-dark);
  font-size: 13px;
  font-weight: 700;
}

/* Resource list — official help links (category + name + description) */
.af-article--detail .af-resource-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 26px 0 32px;
}

.af-article--detail .af-resource-list__item {
  display: block;
  padding: 16px 18px;
  color: var(--af-article-ink);
  background: var(--af-article-cream);
  border: 1px solid var(--af-article-line);
  text-decoration: none;
  transition: border-color 180ms ease;
}

.af-article--detail .af-resource-list__item:hover {
  border-color: var(--af-article-olive);
}

.af-article--detail .af-resource-list__item span {
  display: block;
  margin-bottom: 5px;
  color: var(--af-article-olive);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.af-article--detail .af-resource-list__item strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
}

.af-article--detail .af-resource-list__item small {
  display: block;
  margin-top: 4px;
  color: var(--af-article-muted);
  font-size: 13px;
  line-height: 1.55;
}

/* Safety callout — urgent guidance box, same ground rules as .af-alert */
.af-article--detail .af-safety-callout {
  --af-article-muted: #625c55;

  margin: 28px 0 34px;
  padding: 22px 24px;
  background: var(--af-article-blush);
  border-left: 3px solid var(--af-article-olive-dark);
}

.af-article--detail .af-safety-callout--urgent {
  background: #e8d9d0;
  border-left-color: #8c5a4a;
}

.af-article--detail .af-safety-callout--urgent .af-eyebrow {
  color: #855546;
}

.af-article--detail .af-safety-callout h3 {
  margin: 0 0 8px;
}

.af-article--detail .af-safety-callout p {
  margin: 10px 0 0;
  color: var(--af-article-muted);
  font-size: 14px;
  line-height: 1.6;
}

.af-article--detail .af-safety-callout p:last-child {
  margin-bottom: 0;
}

/* Safety panel — legal caution box with its content wrapper */
.af-article--detail .af-safety-panel {
  margin: 28px 0 34px;
  background: #f1eadc;
  border-left: 3px solid var(--af-article-olive);
}

.af-article--detail .af-safety-panel__content {
  padding: 22px 24px;
}

.af-article--detail .af-safety-panel__content strong {
  display: block;
  margin-bottom: 4px;
  color: var(--af-article-ink);
  font-size: 15px;
  font-weight: 600;
}

.af-article--detail .af-safety-panel__content p {
  margin: 0;
  color: var(--af-article-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* Alert variants beyond health */
.af-article--detail .af-alert--safety {
  background: #e8d9d0;
  border-left-color: #8c5a4a;
}

.af-article--detail .af-alert--safety .af-alert__eyebrow {
  color: #855546;
}

.af-article--detail .af-alert--finance {
  background: var(--af-article-cream);
  border-left-color: var(--af-article-olive-dark);
}

.af-article--detail .af-alert--care {
  background: #f1eadc;
}

/* Note variants */
.af-article--detail .af-note--neutral {
  background: var(--af-article-cream);
}

.af-article--detail .af-note--important {
  background: var(--af-article-blush);
  border-left: 3px solid #8c5a4a;
}

/* Some notes carry no index bubble: fall back to a single content column. */
.af-article--detail .af-note:not(:has(> .af-note__index)) {
  display: block;
}

/* Conclusion paragraph — closing synthesis of pillar articles */
.af-article--detail .af-article-conclusion {
  margin: 30px 0 36px;
  padding: 24px 28px;
  background: #f1eadc;
  border-left: 3px solid var(--af-article-olive);
  font-size: 17px;
  line-height: 1.6;
}

/* FAQ section wrapper (items reuse the .af-faq-item rules above) */
.af-article--detail .af-faq {
  max-width: 66ch;
  margin: 24px 0 34px;
  border-top: 1px solid var(--af-article-line);
}

/* Source lists — ordered or unordered reference lists */
.af-article--detail .af-source-list,
.af-article--detail .af-sources-list {
  margin: 16px 0 0;
  padding-left: 1.1em;
  color: var(--af-article-muted);
  font-size: 13px;
  line-height: 1.7;
}

.af-article--detail .af-source-list li + li,
.af-article--detail .af-sources-list li + li {
  margin-top: 6px;
}

.af-article--detail .af-source-list a,
.af-article--detail .af-sources-list a {
  color: var(--af-article-olive);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Shopping bridge actions row */
.af-article--detail .af-shopping-bridge__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

/* Multi-column layouts for the components above */
@media (min-width: 680px) {
  .af-article--detail .af-comparison-strip {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .af-article--detail .af-comparison-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .af-article--detail .af-resource-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .af-article--detail .af-editorial-grid--three,
  .af-article--detail .af-editorial-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Article footer and author --------------------------------------------- */

.af-article--detail .af-article-footer {
  margin-top: 42px;
  padding-top: 22px;
  border-top: 1px solid var(--af-article-line);
}

.af-article--detail .af-article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.af-article--detail .af-article-tags a {
  color: var(--af-article-muted);
  font-size: 12px;
  text-decoration: underline;
  text-decoration-color: #c2b5a7;
  text-underline-offset: 4px;
}

.af-article--detail .af-article-author {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 18px;
  margin-top: 38px;
  padding-block: 28px;
  border-block: 1px solid var(--af-article-line);
}

.af-article--detail .af-article-author__avatar,
.af-article--detail .af-article-author__monogram {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  object-fit: cover;
  color: #fff;
  background: var(--af-article-olive);
  border-radius: 50%;
  font-family: var(--af-font-display);
  font-size: 20px;
}

.af-article--detail .af-article-author > div {
  min-width: 0;
}

.af-article--detail .af-article-author h2 {
  margin: 0 0 6px;
  font-family: var(--af-font-display);
  font-size: 27px;
  font-weight: 500;
  line-height: 1.1;
}

.af-article--detail .af-article-author p:not(.af-eyebrow) {
  max-width: 52ch;
  margin: 0 0 9px;
  color: var(--af-article-muted);
  font-size: 14px;
  line-height: 1.55;
}

.af-article--detail .af-article-author a {
  color: var(--af-article-olive-dark);
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
}

.af-article--detail .af-article-author a span {
  margin-left: 8px;
}

.af-article--detail .af-article-author__topics {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  padding: 15px 0 0;
  border-top: 1px solid var(--af-article-line);
  list-style: none;
}

.af-article--detail .af-article-author__topics li {
  margin: 0;
  color: var(--af-article-muted);
  font-size: 11px;
}

.af-article--detail .af-article-author__topics li::before {
  content: "✦";
  margin-right: 6px;
  color: var(--af-article-olive);
}

/* Editorial storefront banners ---------------------------------------- */

.af-article--detail .af-article-banner {
  display: grid;
  margin-block: 4px 42px;
  overflow: hidden;
  color: #332d29;
  background: #eee3d5;
  border-block: 1px solid #d9cbbb;
}

.af-article--detail .af-article-banner--closing {
  margin-block: 46px 10px;
  background: #ead7d0;
}

.af-article--detail .af-article-banner__copy {
  padding: 25px 24px 27px;
}

.af-article--detail .af-article-banner .af-eyebrow {
  margin: 0 0 9px;
  color: #6d594c;
  font-size: 9px;
}

.af-article--detail .af-article-banner h2 {
  max-width: 13ch;
  margin: 0 0 12px;
  color: #302824;
  font: 500 clamp(29px, 4vw, 38px)/1 var(--af-font-display);
  letter-spacing: -.025em;
}

.af-article--detail .af-article-banner__copy > p:not(.af-eyebrow) {
  max-width: 47ch;
  margin: 0 0 16px;
  color: #5b514a;
  font-size: 14px;
  line-height: 1.58;
}

.af-article--detail .af-article-banner ul {
  display: grid;
  gap: 9px;
  margin: 0 0 19px;
  padding: 0;
  list-style: none;
}

.af-article--detail .af-article-banner li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  min-height: 34px;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: #443b35;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

.af-article--detail .af-article-banner li > svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: #6b6547;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.35;
}

.af-article--detail .af-article-banner__copy > a,
.af-article--detail .af-article-banner__actions > a:first-child {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 16px;
  color: #faf5ee;
  background: #4a3a34;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 180ms ease-out;
}

.af-article--detail .af-article-banner__copy > a:is(:hover, :focus-visible),
.af-article--detail .af-article-banner__actions > a:first-child:is(:hover, :focus-visible) {
  background: #615047;
}

.af-article--detail .af-article-banner__media {
  min-height: 230px;
  margin: 0;
  overflow: hidden;
}

.af-article--detail .af-article-banner__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.af-article--detail .af-article-banner--opening .af-article-banner__media img {
  object-position: 64% center;
}

.af-article--detail .af-article-banner--closing .af-article-banner__media img {
  object-position: 35% center;
}

.af-article--detail .af-article-banner__promises {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px !important;
}

.af-article--detail .af-article-banner__promises li {
  min-height: 47px;
  border-top: 1px solid #d1bdb5;
}

.af-article--detail .af-article-banner__promises img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.af-article--detail .af-article-banner__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 13px 18px;
}

.af-article--detail .af-article-banner__actions > a:last-child {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: #513f38;
  border-bottom: 1px solid #765f55;
  font-size: 11px;
  font-weight: 750;
  text-decoration: none;
}

@media (min-width: 680px) {
  .af-article--detail .af-article-banner {
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    min-height: 326px;
  }

  .af-article--detail .af-article-banner--closing {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  }

  .af-article--detail .af-article-banner__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 30px clamp(26px, 3vw, 38px);
  }

  .af-article--detail .af-article-banner__media {
    min-height: 326px;
  }
}

@media (max-width: 679px) {
  .af-article--detail .af-article-banner {
    margin-inline: -16px;
  }

  .af-article--detail .af-article-banner--opening .af-article-banner__media {
    order: -1;
  }

  .af-article--detail .af-article-banner__media {
    min-height: 210px;
  }

  .af-article--detail .af-article-banner__promises {
    grid-template-columns: 1fr;
  }

  .af-article--detail .af-article-banner__actions > a {
    width: 100%;
    justify-content: center !important;
  }
}

/* Reading rail --------------------------------------------------------
 * The rail is a storefront assistant: quiet navigation first, then two clear
 * destinations. Only the table of contents owns an internal scrollbar. */

.af-article--detail .af-article-rail__sticky {
  --af-rail-ink: oklch(0.27 0.018 48);
  --af-rail-muted: oklch(0.48 0.018 48);
  --af-rail-line: oklch(0.84 0.018 52);
  --af-rail-paper: oklch(0.975 0.009 65);
  --af-rail-blush: oklch(0.9 0.036 35);
  --af-rail-mocha: oklch(0.32 0.035 43);
  --af-rail-cream: oklch(0.94 0.022 70);
  position: static;
  color: var(--af-rail-ink);
  background: var(--af-rail-paper);
  border-block: 1px solid var(--af-rail-line);
}

.af-article--detail .af-article-toc,
.af-article--detail .af-article-toc details {
  min-width: 0;
}

.af-article--detail .af-article-toc summary {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 20px;
  color: var(--af-rail-ink);
  background: oklch(0.94 0.018 52);
  cursor: pointer;
  list-style: none;
}

.af-article--detail .af-article-toc summary::-webkit-details-marker {
  display: none;
}

.af-article--detail .af-article-toc summary small,
.af-article--detail .af-article-toc summary strong {
  display: block;
}

.af-article--detail .af-article-toc summary small {
  margin-bottom: 4px;
  color: var(--af-rail-muted);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.af-article--detail .af-article-toc summary strong {
  font: 500 25px/.95 var(--af-font-display);
}

.af-article--detail .af-article-toc summary em {
  flex: none;
  color: var(--af-rail-muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.af-article--detail .af-article-toc nav {
  max-height: 232px;
  padding: 4px 10px 10px 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: oklch(0.55 0.035 43) oklch(0.91 0.012 52);
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.af-article--detail .af-article-toc nav::-webkit-scrollbar {
  width: 7px;
}

.af-article--detail .af-article-toc nav::-webkit-scrollbar-track {
  background: oklch(0.91 0.012 52);
}

.af-article--detail .af-article-toc nav::-webkit-scrollbar-thumb {
  background: oklch(0.55 0.035 43);
}

.af-article--detail .af-article-toc ol {
  margin: 0;
  padding: 0;
  counter-reset: af-toc;
  list-style: none;
}

.af-article--detail .af-article-toc li {
  position: relative;
  margin: 0;
  padding-left: 29px;
  counter-increment: af-toc;
  border-top: 1px solid var(--af-rail-line);
}

.af-article--detail .af-article-toc li:first-child {
  border-top: 0;
}

.af-article--detail .af-article-toc li::before {
  content: counter(af-toc, decimal-leading-zero);
  position: absolute;
  top: 50%;
  left: 1px;
  color: oklch(0.62 0.02 48);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  transform: translateY(-50%);
  transition: color 170ms ease-out;
}

.af-article--detail .af-article-toc a {
  display: grid;
  min-height: 46px;
  grid-template-columns: minmax(0, 1fr) 14px;
  align-items: center;
  gap: 8px;
  padding: 8px 3px;
  color: oklch(0.42 0.018 48);
  font-size: 12px;
  line-height: 1.35;
  text-decoration: none;
  transition: color 170ms ease-out, padding-left 170ms cubic-bezier(.22, 1, .36, 1);
}

.af-article--detail .af-article-toc a::after {
  content: "→";
  color: var(--af-rail-mocha);
  font-size: 14px;
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity 170ms ease-out, transform 170ms cubic-bezier(.22, 1, .36, 1);
}

.af-article--detail .af-article-toc li:has(a:is(:hover, :focus-visible, [aria-current="true"]))::before {
  color: var(--af-rail-mocha);
}

.af-article--detail .af-article-toc a:is(:hover, :focus-visible, [aria-current="true"]) {
  padding-left: 5px;
  color: var(--af-rail-ink);
}

.af-article--detail .af-article-toc a:is(:hover, :focus-visible, [aria-current="true"])::after {
  opacity: 1;
  transform: translateX(0);
}

.af-article--detail .af-article-toc a[aria-current="true"] {
  font-weight: 700;
  box-shadow: inset 0 -1px 0 var(--af-rail-mocha);
}

.af-article--detail .af-article-rail-shop {
  min-width: 0;
  padding: 22px 20px 20px;
  color: oklch(0.97 0.012 65);
  background: var(--af-rail-mocha);
  border-top: 1px solid var(--af-rail-mocha);
}

.af-article--detail .af-article-rail-shop__head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  margin-bottom: 17px;
}

.af-article--detail .af-article-rail-shop__icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  color: var(--af-rail-mocha);
  background: var(--af-rail-cream);
}

.af-article--detail .af-article-rail-shop__icon svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.af-article--detail .af-article-rail-shop__head :where(small, strong) {
  display: block;
}

.af-article--detail .af-article-rail-shop__head small {
  margin-bottom: 5px;
  color: oklch(0.83 0.02 65);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.af-article--detail .af-article-rail-shop__head strong {
  color: oklch(0.97 0.012 65);
  font: 500 23px/1.02 var(--af-font-display);
}

.af-article--detail .af-article-rail-shop__product {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  color: oklch(0.97 0.012 65);
  text-decoration: none;
}

.af-article--detail .af-article-rail-shop__product figure {
  width: 76px;
  aspect-ratio: 9 / 16;
  margin: 0;
  overflow: hidden;
  background: oklch(0.82 0.018 50);
}

.af-article--detail .af-article-rail-shop__product figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 260ms cubic-bezier(.22, 1, .36, 1);
}

.af-article--detail .af-article-rail-shop__product:hover figure img {
  transform: scale(1.025);
}

.af-article--detail .af-article-rail-shop__copy,
.af-article--detail .af-article-rail-shop__copy > span,
.af-article--detail .af-article-rail-shop__copy > strong {
  display: block;
  min-width: 0;
}

.af-article--detail .af-article-rail-shop__copy > strong {
  display: -webkit-box;
  overflow: hidden;
  color: oklch(0.98 0.01 65);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.af-article--detail .af-article-rail-shop__price {
  margin-top: 7px;
  color: var(--af-rail-cream);
  font-size: 15px;
  font-weight: 750;
}

.af-article--detail .af-article-rail-shop__price :where(del, ins) {
  color: inherit;
  font-size: inherit;
}

.af-article--detail .af-article-rail-shop__cta,
.af-article--detail .af-article-rail-shop__selection {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--af-rail-mocha);
  background: var(--af-rail-cream);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 170ms ease-out, background-color 170ms ease-out;
}

.af-article--detail .af-article-rail-shop__cta {
  width: max-content;
  margin-top: 11px;
  padding: 9px 11px;
}

.af-article--detail .af-article-rail-shop__selection {
  width: 100%;
  min-height: 48px;
  margin-top: 17px;
  padding-inline: 14px;
}

.af-article--detail :is(.af-article-rail-shop__cta, .af-article-rail-shop__selection):is(:hover, :focus-visible) {
  color: oklch(0.98 0.01 65);
  background: oklch(0.47 0.035 43);
}

.af-article--detail .af-article-rail-shop__intro {
  margin: 0 0 16px;
  color: oklch(0.86 0.018 65);
  font-size: 13px;
  line-height: 1.5;
}

.af-article--detail .af-article-rail-shop--link {
  padding-block: 24px;
}

.af-article--detail .af-article-rail-community {
  position: relative;
  padding: 23px 20px 22px;
  overflow: hidden;
  color: oklch(0.28 0.025 35);
  background: var(--af-rail-blush);
  border-top: 1px solid oklch(0.79 0.035 35);
}

.af-article--detail .af-article-rail-community__icon {
  display: grid;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  place-items: center;
  color: oklch(0.42 0.055 28);
  background: oklch(0.96 0.019 35);
}

.af-article--detail .af-article-rail-community__icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.45;
}

.af-article--detail .af-article-rail-community .af-eyebrow {
  margin: 0 0 6px;
  color: oklch(0.42 0.045 30);
  font-size: 9px;
}

.af-article--detail .af-article-rail-community h2 {
  max-width: 12ch;
  margin: 0 0 9px;
  color: oklch(0.27 0.025 35);
  font: 500 26px/1 var(--af-font-display);
}

.af-article--detail .af-article-rail-community p:not(.af-eyebrow) {
  max-width: 27ch;
  margin: 0 0 17px;
  color: oklch(0.39 0.025 35);
  font-size: 12px;
  line-height: 1.5;
}

.af-article--detail .af-article-rail-community > a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 14px;
  color: oklch(0.96 0.012 55);
  background: oklch(0.38 0.055 28);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
}

.af-article--detail .af-article-rail-community > a:is(:hover, :focus-visible) {
  background: oklch(0.31 0.05 28);
}

.af-article--detail .af-article-rail-trust {
  padding: 18px 20px 16px;
  background: oklch(0.975 0.009 65);
  border-top: 1px solid var(--af-rail-line);
}

.af-article--detail .af-article-rail-trust > .af-eyebrow {
  margin: 0 0 4px;
  color: var(--af-rail-muted);
  font-size: 8px;
}

.af-article--detail .af-article-rail-trust h2 {
  margin: 0 0 10px;
  color: var(--af-rail-ink);
  font: 500 21px/1 var(--af-font-display);
}

.af-article--detail .af-article-rail-trust ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.af-article--detail .af-article-rail-trust li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  min-height: 43px;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: oklch(0.37 0.018 48);
  border-top: 1px solid var(--af-rail-line);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.3;
}

.af-article--detail .af-article-rail-trust li:first-child {
  border-top: 0;
}

.af-article--detail .af-article-rail-trust img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.af-article--detail .af-article-rail-support {
  display: grid;
  min-height: 62px;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 10px 20px;
  color: oklch(0.97 0.012 65);
  background: oklch(0.35 0.032 43);
  text-decoration: none;
}

.af-article--detail .af-article-rail-support > svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.35;
}

.af-article--detail .af-article-rail-support :where(strong, small) {
  display: block;
}

.af-article--detail .af-article-rail-support strong {
  font-size: 12px;
  line-height: 1.25;
}

.af-article--detail .af-article-rail-support small {
  margin-top: 2px;
  color: oklch(0.82 0.015 65);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.af-article--detail .af-article-rail-support > span:last-child {
  font-size: 17px;
  transition: transform 170ms cubic-bezier(.22, 1, .36, 1);
}

.af-article--detail .af-article-rail-support:is(:hover, :focus-visible) > span:last-child {
  transform: translateX(4px);
}

@media (min-width: 680px) and (max-width: 1179px) {
  .af-article--detail .af-article-rail__sticky {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .af-article--detail .af-article-toc,
  .af-article--detail .af-article-rail-help {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1180px) and (min-height: 860px) {
  .af-article--detail .af-article-rail__sticky {
    position: sticky;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 106px);
  }

  .af-article--detail .af-article-toc nav {
    max-height: clamp(150px, 18dvh, 205px);
  }
}

/* Commerce ------------------------------------------------------------- */

.af-article--detail .af-article-commerce {
  display: grid;
  gap: 28px;
  margin-top: 48px;
  padding-block: 34px 40px;
  background: #efe5d8;
  border-block: 1px solid #ded0c0;
  scroll-margin-top: 140px;
}

.af-article--detail .af-article-commerce__intro {
  align-self: center;
}

.af-article--detail .af-article-commerce__icon {
  display: grid;
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  place-items: center;
  color: #fff;
  background: var(--af-article-olive-dark);
}

.af-article--detail .af-article-commerce__icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.af-article--detail .af-article-commerce__intro h2 {
  max-width: 12ch;
  margin: 0 0 12px;
  font-family: var(--af-font-display);
  font-size: clamp(34px, 8vw, 46px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.af-article--detail .af-article-commerce__intro > p:not(.af-eyebrow) {
  max-width: 38ch;
  margin: 0 0 20px;
  color: var(--af-article-muted);
  font-size: 14px;
  line-height: 1.58;
}

.af-article--detail .af-article-commerce__all {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 18px;
  padding: 0 18px;
  color: #fff;
  background: var(--af-article-olive-dark);
  border: 1px solid var(--af-article-olive-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}

.af-article--detail .af-article-commerce__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 12px;
}

.af-article--detail .af-article-commerce .af-product-card {
  min-width: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.af-article--detail .af-article-commerce .af-product-card__media {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #e7ddcf;
}

.af-article--detail .af-article-commerce .af-product-card__media > a,
.af-article--detail .af-article-commerce .af-product-card__media img,
.af-article--detail .af-article-commerce .af-product-card__placeholder {
  display: block;
  width: 100%;
  height: 100%;
}

.af-article--detail .af-article-commerce .af-product-card__media img {
  object-fit: cover;
  object-position: center;
  transition: transform 420ms cubic-bezier(.22, 1, .36, 1);
}

.af-article--detail .af-article-commerce .af-product-card:hover .af-product-card__media img {
  transform: scale(1.015) translateY(-2px);
}

.af-article--detail .af-article-commerce .af-product-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 6px 8px;
  color: #fff;
  background: #69684b;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.af-article--detail .af-article-commerce .af-product-card__wishlist {
  position: absolute;
  z-index: 2;
  top: 9px;
  right: 9px;
}

.af-article--detail .af-article-commerce :where(.af-product-card__wishlist a, .wd-wishlist-btn a) {
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  place-items: center;
  color: #39352f;
  background: rgb(255 252 247 / 90%);
  border: 1px solid rgb(80 72 63 / 16%);
  border-radius: 50%;
  text-decoration: none;
  backdrop-filter: blur(6px);
}

.af-article--detail .af-article-commerce .wd-action-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

.af-article--detail .af-article-commerce .af-product-card__body {
  display: grid;
  gap: 9px;
  padding-top: 13px;
}

.af-article--detail .af-article-commerce .af-product-card h3 {
  min-height: 2.7em;
  margin: 0;
  font: 650 14px/1.35 var(--af-font-ui);
}

.af-article--detail .af-article-commerce .af-product-card h3 a {
  color: var(--af-article-ink);
  text-decoration: none;
}

.af-article--detail .af-article-commerce .af-product-card__rating {
  display: flex;
  gap: 6px;
  color: #9b6a31;
  font-size: 11px;
}

.af-article--detail .af-article-commerce .af-product-card__price {
  min-height: 22px;
  color: var(--af-article-ink);
  font-size: 15px;
  font-weight: 700;
}

.af-article--detail .af-article-commerce .af-product-card__action :where(a, button) {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 9px;
  color: var(--af-article-olive-dark);
  background: transparent;
  border: 1px solid #a99c8a;
  border-radius: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.af-article--detail .af-article-commerce .af-product-card__action .wd-action-icon {
  display: none;
}

.af-article--detail .af-article-commerce .af-product-card__action .wd-action-text {
  position: static !important;
  display: inline !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

.af-article--detail .af-article-commerce .af-product-card__action :where(a, button):hover {
  color: #fff;
  background: var(--af-article-olive-dark);
  border-color: var(--af-article-olive-dark);
}

/* Compact article engagement ------------------------------------------ */

.af-article--detail .af-article-engagement-wrap {
  margin-top: 46px;
  padding-inline: 0;
  background: #ead8cf;
  border-block: 1px solid #d1b8ad;
}

.af-article--detail .af-article-engagement {
  display: grid;
  width: min(100%, 1240px);
  min-height: 0;
  margin-inline: auto;
  padding: 18px clamp(20px, 3vw, 38px);
  color: #2d2724;
  background: #ead8cf;
}

/* 4.49:1 sur #ead8cf — sous le seuil d'un cheveu, et c'est un cheveu de trop. */
.af-article--detail .af-article-engagement__intro .af-eyebrow {
  margin: 0 0 5px;
  color: #745a57;
}

.af-article--detail .af-article-engagement h2 {
  max-width: 13ch;
  margin: 0;
  color: #2d2724;
  font-family: var(--af-font-display);
  font-size: clamp(28px, 7vw, 32px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.03em;
}

.af-article--detail .af-article-engagement__tools,
.af-article--detail .af-article-engagement__reactions,
.af-article--detail .af-article-engagement__secondary,
.af-article--detail .af-article-engagement__actions,
.af-article--detail .af-article-engagement .afc-actions {
  min-width: 0;
}

.af-article--detail .af-article-engagement__tools {
  display: grid;
  gap: 12px;
}

.af-article--detail .af-article-engagement .afc-reactions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.af-article--detail .af-article-engagement .afc-reaction {
  display: inline-flex;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 8px;
  color: #4b403b;
  background: #f7efea;
  border: 1px solid #c8aea5;
  border-radius: 0;
  box-shadow: none;
  font: 650 11px/1 var(--af-font-ui);
  white-space: nowrap;
  transition: color 170ms ease, background-color 170ms ease, border-color 170ms ease, transform 170ms ease;
}

.af-article--detail .af-article-engagement .afc-reaction__symbol {
  display: grid;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  place-items: center;
}

.af-article--detail .af-article-engagement .afc-reaction__symbol svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

.af-article--detail .af-article-engagement .afc-reaction[data-reaction="inspiring"] .afc-reaction__symbol svg {
  fill: currentColor;
  stroke-width: 1;
}

.af-article--detail .af-article-engagement .afc-reaction__count:empty {
  display: none;
}

.af-article--detail .af-article-engagement .afc-reaction__count:not(:empty) {
  min-width: 17px;
  padding-left: 5px;
  border-left: 1px solid currentColor;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  opacity: .78;
  text-align: center;
}

.af-article--detail .af-article-engagement .afc-reaction:is(:hover, :focus-visible) {
  background: #f1e3dd;
  border-color: #9f7f75;
  transform: translateY(-1px);
}

.af-article--detail .af-article-engagement .afc-reaction[data-reaction="heart"]:is(.is-active, [aria-pressed="true"]) { color: #743f43; background: #f1d9d7; border-color: #a66e72; }
.af-article--detail .af-article-engagement .afc-reaction[data-reaction="helpful"]:is(.is-active, [aria-pressed="true"]) { color: #514a35; background: #e8e2cd; border-color: #8e8264; }
.af-article--detail .af-article-engagement .afc-reaction[data-reaction="inspiring"]:is(.is-active, [aria-pressed="true"]) { color: #6a4d28; background: #f0dfc3; border-color: #a98654; }
.af-article--detail .af-article-engagement .afc-reaction[data-reaction="thanks"]:is(.is-active, [aria-pressed="true"]) { color: #62483d; background: #e7d6cd; border-color: #967265; }
.af-article--detail .af-article-engagement .afc-reaction[data-reaction="same_story"]:is(.is-active, [aria-pressed="true"]) { color: #43545a; background: #dce4e3; border-color: #74878b; }

.af-article--detail .af-article-engagement .afc-reaction:is(.is-active, [aria-pressed="true"]) {
  box-shadow: inset 0 0 0 1px currentColor;
}

.af-article--detail .af-article-engagement [aria-busy="true"] {
  opacity: .6;
  pointer-events: none;
}

.af-article--detail .af-article-engagement__reaction-status {
  min-height: 0;
  margin: 6px 0 0;
  color: #67494e;
  font-size: 12px;
  font-weight: 600;
}

.af-article--detail .af-article-engagement__secondary {
  display: grid;
  gap: 9px;
  padding-top: 11px;
  border-top: 1px solid #cfb7ad;
}

.af-article--detail .af-article-engagement .afc-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.af-article--detail .af-article-engagement .afc-action {
  display: inline-flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 9px;
  color: #51443f;
  background: transparent;
  border: 1px solid #bfa69c;
  border-radius: 0;
  font: 650 11px/1.2 var(--af-font-ui);
  transition: color 170ms ease, background-color 170ms ease, border-color 170ms ease;
}

.af-article--detail .af-article-engagement .afc-action__icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
}

.af-article--detail .af-article-engagement .afc-action:is(:hover, :focus-visible, .is-active, [aria-pressed="true"]) {
  color: #5f4147;
  background: #f0dfd8;
  border-color: #956f6a;
}

.af-article--detail .af-article-engagement .afc-report {
  position: relative;
  grid-column: 1 / -1;
  justify-self: start;
}

/* Le lien « Signaler » est posé sur le fond #ead8cf de l'encart d'engagement,
 * où #786963 ne donnait que 3.81:1 pour un texte de 10px. */
.af-article--detail .af-article-engagement .afc-report > summary {
  width: auto;
  min-height: 28px;
  justify-content: flex-start;
  padding: 3px 0;
  color: #6b5d58;
  background: transparent;
  border: 0;
  font-size: 10px;
}

.af-article--detail .af-article-engagement .afc-report > summary::marker {
  content: "";
}

.af-article--detail .af-article-engagement .afc-report__panel {
  position: absolute;
  z-index: 8;
  bottom: calc(100% + 8px);
  left: 0;
  width: min(330px, calc(100vw - 32px));
  padding: 18px;
  color: var(--af-article-ink);
  background: #fffaf5;
  border: 1px solid var(--af-article-line);
  box-shadow: 0 16px 40px rgb(45 38 31 / 14%);
}

.af-article--detail .af-article-engagement .afc-report__intro {
  margin: 0 0 12px;
  color: var(--af-article-muted);
  font-size: 12px;
  line-height: 1.5;
}

.af-article--detail .af-article-engagement .afc-report__field {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  color: var(--af-article-ink);
  font-size: 12px;
  font-weight: 650;
}

.af-article--detail .af-article-engagement .afc-report__field :where(select, textarea) {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  color: var(--af-article-ink);
  background: #fff;
  border: 1px solid #cdbfaf;
  border-radius: 0;
  font: 400 13px/1.4 var(--af-font-ui);
}

.af-article--detail .af-article-engagement .afc-btn {
  min-height: 42px;
  margin-top: 12px;
  padding: 8px 14px;
  color: #fff;
  background: #68484e;
  border: 1px solid #68484e;
  border-radius: 0;
  font: 700 11px/1 var(--af-font-ui);
}

.af-article--detail .af-article-engagement :where(.afc-actions__status, .af-article-engagement__reaction-status):empty {
  display: none;
}

.af-article--detail .af-article-engagement .afc-actions__status {
  grid-column: 1 / -1;
  margin: 0;
  color: #67494e;
  font-size: 12px;
}

.af-article--detail .af-article-engagement__community {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 10px;
  justify-self: start;
  color: #68484e;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .025em;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.af-article--detail .af-article-engagement__community span {
  font-size: 17px;
  transition: transform 170ms ease;
}

.af-article--detail .af-article-engagement__community:is(:hover, :focus-visible) span {
  transform: translateX(3px);
}

@media (max-width: 359px) {
  .af-article--detail .af-article-engagement h2 {
    font-size: 26px;
  }

  .af-article--detail .af-article-engagement .afc-reactions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .af-article--detail .af-article-engagement .afc-reaction:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .af-article--detail .af-article-engagement .afc-reaction {
    gap: 4px;
    padding-inline: 5px;
    font-size: 10px;
  }

  .af-article--detail .af-article-engagement .afc-reaction__symbol {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
  }

  .af-article--detail .af-article-engagement .afc-reaction__count:not(:empty) {
    display: none;
  }
}

@media (min-width: 360px) and (max-width: 479px) {
  .af-article--detail .af-article-engagement .afc-reaction {
    padding-inline: 5px;
    font-size: 10px;
  }

  .af-article--detail .af-article-engagement .afc-reaction__symbol {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
  }

  .af-article--detail .af-article-engagement .afc-reaction__count:not(:empty) {
    padding-left: 3px;
    font-size: 9px;
  }
}

.af-article--detail .af-article-author-wrap {
  margin-top: 24px;
}

@media (max-width: 679px) {
  body.single-post.af-editorial-active .af-site-header .af-header__main {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 4px;
    padding: 8px 12px 10px;
  }

  body.single-post.af-editorial-active .af-site-header .af-header__wordmark {
    max-width: 100%;
    overflow: visible;
    font-size: clamp(28px, 8.2vw, 34px);
    line-height: 1;
    white-space: nowrap;
  }

  body.single-post.af-editorial-active .af-site-header :is(.af-mobile-nav__trigger, .af-header__mobile-cart) {
    width: 44px;
    height: 44px;
  }

  body.single-post.af-editorial-active .af-site-header .af-header-search input[type="search"] {
    height: 44px;
    padding-inline: 14px 44px;
    font-size: 13px;
  }

  .af-article--detail .af-article-hero {
    --af-hero-media-h: clamp(215px, 58vw, 310px);
    padding-block: 6px 0;
  }

  .af-article--detail .af-article-breadcrumbs {
    min-height: 25px;
    margin-bottom: 5px;
    padding-inline: 2px;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .af-article--detail .af-article-breadcrumbs .wd-last,
  .af-article--detail .af-article-breadcrumbs .wd-last + *,
  .af-article--detail .af-article-breadcrumbs .wd-last-link + .wd-delimiter {
    display: none;
  }

  .af-article--detail .af-article-hero__copy {
    padding: calc(var(--af-hero-media-h) - 16px) 16px 22px;
  }

  .af-article--detail .af-article-hero h1 {
    max-width: none;
    margin-bottom: 12px;
    font-size: clamp(30px, 8.8vw, 38px);
    line-height: 1.1;
  }

  .af-article--detail .af-article-intro {
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.55;
  }

  .af-article--detail .af-article-silo {
    margin-bottom: 9px;
    font-size: 9px;
  }

  .af-article--detail .af-article-byline__avatar,
  .af-article--detail .af-article-byline__monogram {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .af-article--detail .af-article-byline p {
    font-size: 10px;
  }

  .af-article--detail .af-article-share {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 15px;
    padding-top: 13px;
  }

  .af-article--detail .af-article-share > span:first-child {
    grid-column: 1 / -1;
  }

  .af-article--detail .af-article-share :where(a, button) {
    min-height: 40px;
    justify-content: center;
    padding-inline: 5px;
    font-size: 10px;
  }

  .af-article--detail .af-article-layout {
    gap: 18px;
    padding-top: 18px;
  }

  .af-article--detail .af-article-content {
    font-size: 17px;
    line-height: 1.7;
  }

  .af-article--detail .af-article-content > p:first-child {
    margin-bottom: 26px;
    font-size: 18px;
    line-height: 1.62;
  }

  .af-article--detail .af-article-section + .af-article-section {
    margin-top: 34px;
  }

  .af-article--detail .af-article-content :where(h2, .af-article-heading) {
    max-width: 100%;
    margin: 36px 0 13px;
    padding: 0;
    color: #302a26;
    font-size: clamp(26px, 6.6vw, 29px);
    font-weight: 600;
    line-height: 1.24;
    letter-spacing: -.008em;
    text-wrap: balance;
    scroll-margin-top: 96px;
  }

  .af-article--detail .af-article-section > :where(h2, .af-article-heading):first-child {
    margin-top: 0;
  }

  .af-article--detail .af-article-content :where(h3, .af-article-subheading) {
    max-width: 100%;
    margin: 29px 0 9px;
    font-size: 21px;
    line-height: 1.34;
    letter-spacing: -.004em;
    scroll-margin-top: 96px;
  }

  .af-article--detail .af-article-content h4 {
    max-width: 100%;
    margin: 25px 0 8px;
    font-size: 17px;
    line-height: 1.35;
  }

  .af-article--detail .af-article-rail__sticky {
    background: transparent;
    border-block: 0;
  }

  .af-article--detail .af-article-toc {
    border-block: 1px solid var(--af-rail-line);
  }

  .af-article--detail .af-article-toc summary {
    min-height: 62px;
    padding: 11px 16px;
  }

  .af-article--detail .af-article-toc summary strong {
    font-size: 22px;
  }

  .af-article--detail .af-article-toc nav {
    max-height: 224px;
  }

  .af-article--detail .af-article-rail-shop {
    padding: 14px 16px 16px;
  }

  .af-article--detail .af-article-rail-shop__head {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 9px;
  }

  .af-article--detail .af-article-rail-shop__icon {
    width: 34px;
    height: 34px;
  }

  .af-article--detail .af-article-rail-shop__icon svg {
    width: 22px;
    height: 22px;
  }

  .af-article--detail .af-article-rail-shop__head small {
    margin-bottom: 3px;
    font-size: 8px;
  }

  .af-article--detail .af-article-rail-shop__head strong {
    font-size: 20px;
  }

  .af-article--detail .af-article-rail-shop__intro {
    display: -webkit-box;
    margin-bottom: 12px;
    overflow: hidden;
    font-size: 12px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .af-article--detail .af-article-rail-shop__product {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 11px;
  }

  .af-article--detail .af-article-rail-shop__product figure {
    width: 48px;
  }

  .af-article--detail .af-article-rail-shop__cta {
    display: none;
  }

  .af-article--detail .af-article-rail-shop__selection {
    min-height: 44px;
    margin-top: 10px;
  }

  .af-article--detail :is(.af-article-rail-community, .af-article-rail-trust, .af-article-rail-help) {
    display: none;
  }

  .af-article--detail .af-article-banner--opening {
    display: grid;
    margin-block: 4px 28px;
    background: #eee3d5;
  }

  .af-article--detail .af-article-banner--opening .af-article-banner__media {
    order: -1;
    min-height: 0;
    aspect-ratio: 16 / 7;
  }

  .af-article--detail .af-article-banner--opening .af-article-banner__media img {
    height: auto;
    aspect-ratio: 16 / 7;
    object-fit: contain;
    object-position: center;
  }

  .af-article--detail .af-article-banner--opening .af-article-banner__copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 7px 12px;
    padding: 16px;
  }

  .af-article--detail .af-article-banner--opening .af-eyebrow,
  .af-article--detail .af-article-banner--opening h2,
  .af-article--detail .af-article-banner--opening .af-article-banner__copy > p {
    grid-column: 1 / -1;
  }

  .af-article--detail .af-article-banner--opening h2 {
    max-width: 18ch;
    margin-bottom: 1px;
    font-size: 27px;
  }

  .af-article--detail .af-article-banner--opening .af-article-banner__copy > p:not(.af-eyebrow) {
    display: -webkit-box;
    margin-bottom: 4px;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .af-article--detail .af-article-banner--opening ul {
    display: none;
  }

  .af-article--detail .af-article-banner--opening .af-article-banner__copy > a {
    min-height: 42px;
    padding-inline: 13px;
    font-size: 9px;
  }

  .af-article--detail .af-article-commerce {
    padding-inline: 16px;
  }

  .af-article--detail .af-article-commerce .af-product-card h3 {
    min-height: 0;
    font-size: 13px;
  }

  .af-article--detail .af-article-commerce .af-product-card__action :where(a, button) {
    min-height: 42px;
    font-size: 9px;
  }

  .af-article--detail .af-article-engagement-wrap {
    margin-inline: -16px;
    padding-inline: 0;
  }

  .af-article--detail .af-article-engagement {
    width: 100%;
    gap: 14px;
    padding: 18px 16px;
  }

  .af-article--detail .af-article-banner--closing {
    margin-block: 34px 8px;
  }

  .af-article--detail .af-article-banner--closing .af-article-banner__media {
    min-height: 0;
    max-height: none;
    aspect-ratio: 16 / 7;
  }

  .af-article--detail .af-article-banner--closing .af-article-banner__media img {
    height: auto;
    aspect-ratio: 16 / 7;
    object-fit: contain;
    object-position: center;
  }

  .af-article--detail .af-article-banner--closing .af-article-banner__copy {
    padding: 18px 16px 20px;
  }

  .af-article--detail .af-article-banner--closing h2 {
    max-width: 15ch;
    margin-bottom: 10px;
    font-size: 27px;
  }

  .af-article--detail .af-article-banner__promises {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px !important;
    margin-bottom: 14px !important;
  }

  .af-article--detail .af-article-banner__promises li {
    min-height: 43px;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 7px;
    font-size: 10px;
  }

  .af-article--detail .af-article-banner__promises img {
    width: 24px;
    height: 24px;
  }

  .af-article--detail .af-article-banner__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .af-article--detail .af-article-banner__actions > a {
    width: 100%;
    min-height: 43px;
    justify-content: center !important;
    padding-inline: 8px;
    font-size: 9px;
    text-align: center;
  }

  .af-article--detail .af-article-engagement .afc-report__panel {
    position: fixed;
    right: 16px;
    bottom: 16px;
    left: 16px;
    width: auto;
  }

  .af-article--detail .af-recipe-panel__grid {
    grid-template-columns: 1fr;
  }

  .af-article--detail .af-recipe-panel__head {
    flex-wrap: wrap;
  }
}

@media (max-width: 340px) {
  body.single-post.af-editorial-active .af-site-header .af-header__main {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    padding-inline: 9px;
  }

  body.single-post.af-editorial-active .af-site-header .af-header__wordmark {
    font-size: 27px;
  }

  body.single-post.af-editorial-active .af-site-header :is(.af-mobile-nav__trigger, .af-header__mobile-cart) {
    width: 40px;
    height: 40px;
  }

  .af-article--detail .af-article-hero h1 {
    font-size: 31px;
  }

  .af-article--detail .af-article-share :where(a, button) {
    font-size: 9px;
  }
}

/* Related reading ------------------------------------------------------ */

.af-article--detail .af-article-related {
  padding-block: 54px 62px;
}

body.single-post.af-editorial-active .af-article--detail .af-article-related {
  padding-bottom: 34px;
}

.af-article--detail .af-blog-section-heading {
  margin-bottom: 24px;
}

.af-article--detail .af-blog-section-heading--split {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.af-article--detail .af-blog-section-heading h2 {
  margin: 0;
  font-family: var(--af-font-display);
  font-size: clamp(31px, 7vw, 41px);
  font-weight: 500;
  line-height: 1.08;
}

.af-article--detail .af-blog-section-heading > a {
  display: none;
  flex: none;
  color: var(--af-article-olive-dark);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}

.af-article--detail .af-blog-section-heading > a span {
  margin-left: 8px;
}

.af-article--detail .af-article-related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.af-article--detail .af-blog-card {
  min-width: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.af-article--detail .af-blog-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #ece4da;
}

.af-article--detail .af-blog-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.af-article--detail .af-blog-card:hover .af-blog-card__media img {
  transform: scale(1.025);
}

.af-article--detail .af-blog-card__body {
  padding: 16px 0 0;
}

.af-article--detail .af-blog-card__silo {
  color: var(--af-article-olive);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-decoration: none;
  text-transform: uppercase;
}

.af-article--detail .af-blog-card h2 {
  margin: 7px 0 8px;
  font-family: var(--af-font-display);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.12;
}

.af-article--detail .af-blog-card h2 a {
  color: var(--af-article-ink);
  text-decoration: none;
}

.af-article--detail .af-blog-card__excerpt {
  display: -webkit-box;
  margin: 0 0 10px;
  overflow: hidden;
  color: var(--af-article-muted);
  font-size: 13px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* 4.04:1 sur le papier #fbf8f3, pour un texte de 10px. */
.af-article--detail .af-blog-card__meta {
  display: flex;
  gap: 6px;
  color: #777068;
  font-size: 10px;
}

.af-article--detail .af-blog-card__link {
  display: inline-block;
  margin-top: 13px;
  color: var(--af-article-olive-dark);
  font-size: 11px;
  font-weight: 650;
  text-decoration: none;
}

.af-article--detail .af-article-discussion {
  padding-block: 0 62px;
}

/* Tablet --------------------------------------------------------------- */

@media (min-width: 680px) {
  .af-article--detail .af-container {
    padding-inline: 28px;
  }

  .af-article--detail .af-article-hero {
    --af-hero-media-h: clamp(330px, 44vw, 460px);
  }

  .af-article--detail .af-article-hero__frame {
    margin-inline: -28px;
  }

  .af-article--detail .af-article-hero__copy {
    padding: calc(var(--af-hero-media-h) - 24px) 28px 38px;
  }

  .af-article--detail .af-article-hero h1 {
    max-width: 24ch;
    font-size: clamp(42px, 6vw, 56px);
  }

  .af-article--detail .af-editorial-grid,
  .af-article--detail .af-decision-path {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .af-article--detail .af-editorial-grid > article {
    padding: 22px 24px;
  }

  .af-article--detail .af-editorial-panel {
    padding: 22px 24px;
  }

  .af-article--detail .af-article-related__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .af-article--detail .af-blog-section-heading > a {
    display: inline-flex;
  }

  .af-article--detail .af-article-commerce__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px 16px;
  }

  .af-article--detail .af-article-layout {
    width: 100%;
    max-width: 816px;
    margin-inline: auto;
  }

  .af-article--detail .af-article-main {
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
  }

  .af-article--detail .af-article-engagement {
    grid-template-columns: minmax(210px, .65fr) minmax(0, 1.35fr);
    align-items: center;
    gap: clamp(24px, 4vw, 44px);
  }

  .af-article--detail .af-article-engagement .afc-reaction {
    width: auto;
    min-width: 120px;
    min-height: 44px;
    padding-inline: 10px;
    font-size: 12px;
  }

  .af-article--detail .af-article-engagement .afc-reactions {
    display: flex;
    flex-wrap: wrap;
  }

  .af-article--detail .af-article-engagement__secondary {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
  }

  .af-article--detail .af-article-engagement .afc-actions {
    display: flex;
    flex-wrap: wrap;
  }

  .af-article--detail .af-article-engagement .afc-action {
    width: auto;
    min-width: 132px;
    padding-inline: 12px;
  }

  .af-article--detail .af-article-engagement .afc-report {
    grid-column: auto;
    margin-left: auto;
  }

  .af-article--detail .af-article-engagement .afc-actions__status {
    flex-basis: 100%;
  }

  .af-article--detail .af-article-engagement__community {
    min-height: 44px;
  }

}

/* Desktop — geometry follows docs/mockups/detailsArticleBlog.png. ------- */

@media (min-width: 1024px) {
  .af-article--detail .af-container {
    width: 100%;
    padding-inline: clamp(24px, 3vw, 56px);
  }

  .af-article--detail .af-article-hero {
    padding-block: 14px 0;
  }

  .af-article--detail .af-article-breadcrumbs {
    min-height: 28px;
    margin-bottom: 12px;
  }

  /* Static, so the media below resolves against .af-article-hero and covers
   * the breadcrumb row too: one uninterrupted band, no horizontal seam. */
  .af-article--detail .af-article-hero__frame {
    position: static;
    display: flex;
    align-items: center;
    min-height: clamp(440px, 41vw, 600px);
    margin-inline: calc(-1 * clamp(24px, 3vw, 56px));
  }

  .af-article--detail .af-article-hero__copy {
    min-width: 0;
    width: min(54%, 780px);
    justify-content: center;
    padding: clamp(46px, 4.6vw, 74px) clamp(24px, 3vw, 56px) clamp(44px, 4.4vw, 70px);
  }

  .af-article--detail .af-article-hero h1 {
    max-width: 20ch;
    margin-bottom: 20px;
    font-size: clamp(46px, 4vw, 68px);
    line-height: 1.05;
  }

  .af-article--detail .af-article-intro {
    max-width: 44ch;
    margin-bottom: 22px;
    font-size: 16px;
    line-height: 1.6;
  }

  .af-article--detail .af-article-share > span:first-child {
    width: auto;
    margin-right: 3px;
  }

  .af-article--detail .af-article-share {
    margin-top: 15px;
    padding-top: 13px;
  }

  .af-article--detail .af-article-share :where(a, button) {
    min-height: 33px;
    padding: 6px 9px;
  }

  .af-article--detail .af-article-hero__media {
    inset: 0;
    height: auto;
  }

  .af-article--detail .af-article-hero__media img {
    object-position: 74% center;
  }

  /* Horizontal dissolve behind the copy, plus a light vertical feather so the
   * photograph does not butt against the breadcrumbs or the article body. */
  .af-article--detail .af-article-hero__media::after {
    background:
      linear-gradient(
        90deg,
        rgb(var(--af-hero-scrim) / 100%) 0%,
        rgb(var(--af-hero-scrim) / 100%) 28%,
        rgb(var(--af-hero-scrim) / 97%) 44%,
        rgb(var(--af-hero-scrim) / 88%) 56%,
        rgb(var(--af-hero-scrim) / 62%) 68%,
        rgb(var(--af-hero-scrim) / 30%) 82%,
        rgb(var(--af-hero-scrim) / 8%) 92%,
        rgb(var(--af-hero-scrim) / 0%) 100%
      ),
      linear-gradient(
        180deg,
        rgb(var(--af-hero-scrim) / 22%) 0%,
        rgb(var(--af-hero-scrim) / 0%) 14% 78%,
        rgb(var(--af-hero-scrim) / 30%) 100%
      );
  }

  /* No photograph to sit beside, so the copy widens — but not to the full
   * bleed, or the byline rule would run the length of the viewport. */
  .af-article--detail .af-article-hero--without-media .af-article-hero__copy {
    width: 100%;
    max-width: 940px;
  }

  .af-article--detail .af-article-layout {
    display: flex;
    width: 100%;
    max-width: 816px;
    gap: 30px;
    margin-inline: auto;
    padding-block: 54px 0;
  }

  .af-article--detail .af-article-main {
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
  }

  .af-article--detail .af-article-content {
    font-size: 17px;
  }

  .af-article--detail .af-article-lede,
  .af-article--detail .af-article-content > p:first-child {
    font-size: 19px;
  }

  .af-article--detail .af-article-content :where(h2, .af-article-heading) {
    font-size: 33px;
  }

  .af-article--detail .af-editorial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .af-article--detail .af-decision-path {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .af-article--detail .af-shopping-bridge,
  .af-article--detail .af-article-shop-banner {
    min-height: 210px;
    padding: 31px 44% 30px 32px;
  }

  .af-article--detail .af-shopping-bridge::after,
  .af-article--detail .af-article-shop-banner::after {
    inset: 0 0 0 auto;
    width: 42%;
    height: auto;
    background-image: linear-gradient(90deg, #ece2d2 0%, transparent 32%), var(--af-article-image);
    background-position: center;
  }

  .af-article--detail .af-article-commerce {
    grid-template-columns: clamp(230px, 20vw, 310px) minmax(0, 1fr);
    gap: clamp(28px, 3vw, 52px);
    margin-top: 58px;
    padding-block: 44px 48px;
  }

  .af-article--detail .af-article-commerce__intro h2 {
    font-size: clamp(38px, 3.4vw, 52px);
  }

  .af-article--detail .af-article-commerce__grid {
    align-items: start;
  }

  .af-article--detail .af-article-author {
    grid-template-columns: 72px minmax(0, 1fr) 190px;
    gap: 20px;
    align-items: center;
  }

  .af-article--detail .af-article-author__avatar,
  .af-article--detail .af-article-author__monogram {
    width: 72px;
    height: 72px;
  }

  .af-article--detail .af-article-author__topics {
    grid-column: auto;
    display: grid;
    gap: 8px;
    padding: 0 0 0 20px;
    border-top: 0;
    border-left: 1px solid var(--af-article-line);
  }

  .af-article--detail .af-article-engagement-wrap,
  .af-article--detail .af-article-author-wrap {
    max-width: none;
  }

  .af-article--detail .af-article-engagement-wrap {
    padding-inline: 0;
  }

  .af-article--detail .af-article-engagement {
    max-width: 1240px;
  }

  .af-article--detail .af-article-related {
    padding-block: 52px 34px;
  }

  .af-article--detail .af-article-related__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }
}

/* Large desktop reading assistant. The hero deliberately stays untouched. */

@media (min-width: 1180px) {
  .af-article--detail .af-article-layout {
    display: grid;
    width: 100%;
    max-width: 1340px;
    grid-template-columns: minmax(0, 820px) 348px;
    gap: clamp(44px, 3.6vw, 60px);
    align-items: stretch;
    justify-content: center;
    padding-inline: 32px;
  }

  .af-article--detail .af-article-main,
  .af-article--detail .af-article-rail {
    order: initial;
  }

  .af-article--detail .af-article-main {
    width: 100%;
    max-width: 820px;
    margin-inline: 0;
    align-self: start;
  }

  .af-article--detail .af-article-rail {
    width: 348px;
    align-self: stretch;
  }

}

@media (prefers-reduced-motion: reduce) {
  .af-article--detail *,
  .af-article--detail *::before,
  .af-article--detail *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------------------
 * Shop links inside an article, and the shelf that closes it.
 *
 * The inline link has to read as a reference, not as an advert: same colour as
 * the running text, an underline that only thickens on hover. If it shouted,
 * a reader would learn to skip it.
 * ------------------------------------------------------------------------ */

.af-shop-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--af-color-taupe);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-color 0.18s ease, color 0.18s ease;
}

.af-shop-link:hover,
.af-shop-link:focus-visible {
  color: var(--af-text-accent);
  text-decoration-color: currentcolor;
  text-decoration-thickness: 2px;
}

.af-article-shop {
  margin-block-start: var(--af-space-10, 3rem);
  padding-block-start: var(--af-space-8, 2.5rem);
  border-block-start: 1px solid var(--af-border-default);
}

.af-article-shop__title {
  margin: 0;
  font-family: var(--af-font-display);
  font-size: var(--af-text-h4);
  font-weight: 500;
  line-height: var(--af-leading-heading);
  color: var(--af-text-default);
  text-wrap: balance;
}

.af-article-shop__note {
  margin: var(--af-space-2, 0.5rem) 0 0;
  font-family: var(--af-font-ui);
  font-size: var(--af-text-sm);
  color: var(--af-text-muted);
}

.af-article-shop__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--af-space-5, 1.5rem);
  margin: var(--af-space-6, 2rem) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .af-article-shop__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.af-article-shop__item {
  margin: 0;
}

.af-article-shop__link {
  display: grid;
  gap: var(--af-space-2, 0.5rem);
  color: inherit;
  text-decoration: none;
}

.af-article-shop__media {
  display: block;
  overflow: hidden;
  background: var(--af-surface-sunken);
  border-radius: 2px;
  aspect-ratio: 3 / 4;
}

.af-article-shop__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
  .af-article-shop__media img {
    transition: none;
  }
}

.af-article-shop__link:hover .af-article-shop__media img,
.af-article-shop__link:focus-visible .af-article-shop__media img {
  transform: scale(1.04);
}

.af-article-shop__name {
  font-family: var(--af-font-ui);
  font-size: var(--af-text-sm);
  line-height: 1.35;
  color: var(--af-text-default);
}

.af-article-shop__link:hover .af-article-shop__name {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.af-article-shop__price {
  font-family: var(--af-font-ui);
  font-size: var(--af-text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--af-text-accent);
}

.af-article-shop__price del {
  margin-inline-end: 0.35em;
  color: var(--af-text-faint);
}

.af-article-shop__more {
  margin: var(--af-space-6, 2rem) 0 0;
  font-family: var(--af-font-ui);
  font-size: var(--af-text-sm);
  letter-spacing: var(--af-tracking-eyebrow);
  text-transform: uppercase;
}

.af-article-shop__more a {
  color: var(--af-text-link);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}