/* ── Barre de progression lecture ── */
    .reading-progress {
      position: fixed;
      top: 0;
      left: 0;
      height: 3px;
      width: 0%;
      background: var(--orange);
      z-index: 10000;
      transition: width .1s linear;
    }

    /* ── Fil d'Ariane ── */
    .breadcrumb {
      background: var(--beige);
      border-bottom: 1px solid rgba(7, 38, 13, .08);
      padding: .85rem clamp(1.25rem, 4vw, 4rem);
    }
    .breadcrumb__inner {
      max-width: 1200px;
      margin-inline: auto;
      display: flex;
      align-items: center;
      gap: .5rem;
      font-family: var(--mono);
      font-size: var(--label);
      text-transform: uppercase;
      letter-spacing: .04em;
      color: rgba(7, 38, 13, .45);
    }
    .breadcrumb__inner a {
      color: rgba(7, 38, 13, .55);
      font-size: var(--label);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: .04em;
      text-decoration: none;
      transition: color .2s;
    }
    .breadcrumb__inner a:hover { color: var(--orange); text-decoration: none; }
    .breadcrumb__sep { opacity: .35; }

    /* ── Hero article ── */
    .article-hero {
      background: var(--olive);
      padding: clamp(4rem, 7vw, 7rem) clamp(1.25rem, 4vw, 4rem) clamp(3rem, 6vw, 5rem);
    }
    .article-hero__inner {
      max-width: 1200px;
      margin-inline: auto;
    }
    .article-hero__meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: .75rem;
      margin-bottom: 2rem;
    }
    .article-hero__meta .chip {
      border-color: rgba(255, 101, 41, .35);
      background: rgba(255, 101, 41, .12);
      color: var(--orange);
    }
    .article-hero__date,
    .article-hero__read {
      font-family: var(--mono);
      font-size: var(--label);
      text-transform: uppercase;
      letter-spacing: .04em;
      color: rgba(243, 237, 225, .4);
    }
    .article-hero__date::before { content: "— "; }
    .article-hero h1 {
      color: var(--beige);
      max-width: none;
      margin-bottom: 1.75rem;
    }
    .article-hero__excerpt {
      color: rgba(243, 237, 225, .62);
      font-size: clamp(1rem, 1.5vw, 1.15rem);
      line-height: 1.65;
      letter-spacing: -0.04em;
      margin: 0;
    }
    .article-hero__author {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-top: 2.5rem;
      padding-top: 2rem;
      border-top: 1px solid rgba(243, 237, 225, .1);
    }
    .article-hero__avatar {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: var(--orange);
      display: grid;
      place-items: center;
      font-family: var(--display);
      font-size: .9rem;
      font-weight: 700;
      color: #fff;
      flex-shrink: 0;
    }
    .article-hero__author-name {
      font-family: var(--body);
      font-size: .9rem;
      font-weight: 600;
      color: var(--beige);
      letter-spacing: -0.04em;
    }
    .article-hero__author-role {
      font-family: var(--mono);
      font-size: var(--label);
      text-transform: uppercase;
      letter-spacing: .04em;
      color: rgba(243, 237, 225, .38);
      margin-top: .15rem;
    }

    /* ── Corps de l'article ── */
    .article-body {
      background: #fff;
      padding: clamp(3.5rem, 6vw, 6rem) clamp(1.25rem, 4vw, 4rem);
    }
    .article-body__inner {
      max-width: 720px;
      margin-inline: auto;
    }

    /* ── Image à la une ── */
    .article-figure {
      margin: 0 0 clamp(2.5rem, 4vw, 4rem);
    }
    .article-figure img {
      width: 100%;
      height: clamp(240px, 40vw, 480px);
      object-fit: cover;
      border-radius: var(--lg);
      display: block;
    }
    .article-figure figcaption {
      font-family: var(--mono);
      font-size: var(--label);
      text-transform: uppercase;
      letter-spacing: .04em;
      color: rgba(7, 38, 13, .38);
      margin-top: .75rem;
      text-align: center;
    }

    /* ── Sommaire ── */
    .article-toc {
      background: var(--beige);
      border-left: 3px solid var(--orange);
      border-radius: 0 var(--sm) var(--sm) 0;
      padding: 1.5rem 1.75rem;
      margin-bottom: clamp(2rem, 4vw, 3.5rem);
    }
    .article-toc__title {
      font-family: var(--mono);
      font-size: var(--label);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--olive);
      margin-bottom: 1rem;
    }
    .article-toc__list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: .4rem;
    }
    .article-toc__list a {
      font-family: var(--body);
      font-size: .9rem;
      font-weight: 500;
      text-transform: none;
      letter-spacing: -0.03em;
      color: rgba(7, 38, 13, .65);
      text-decoration: none;
      transition: color .2s;
    }
    .article-toc__list a:hover { color: var(--orange); text-decoration: none; }
    .article-toc__list li { counter-increment: toc-item; }
    .article-toc__list li::marker { display: none; }
    .article-toc__list a::before {
      content: counter(toc-item) ". ";
      font-family: var(--accent);
      font-style: italic;
      color: var(--orange);
      margin-right: .35rem;
    }
    .article-toc__list { counter-reset: toc-item; }

    /* ── Prose ── */
    .article-prose p {
      color: rgba(7, 38, 13, .78);
      font-size: var(--para);
      line-height: 1.75;
      letter-spacing: -0.03em;
      margin-top: 1.5rem;
    }
    .article-prose p:first-child { margin-top: 0; }

    .article-prose h2 {
      font-size: clamp(1.5rem, 2.5vw, 2rem);
      margin-top: clamp(2.5rem, 4vw, 3.5rem);
      margin-bottom: 1rem;
      letter-spacing: -0.03em;
    }
    .article-prose h3 {
      font-size: 1rem;
      text-transform: none;
      font-family: 'Work Sans', system-ui, sans-serif;
      letter-spacing: -0.41em;
      margin-top: 1rem;
      margin-bottom: .25rem;
      color: var(--olive);
    }

    .article-prose ul,
    .article-prose ol {
      padding-left: 0;
      margin: 1.5rem 0;
      display: flex;
      flex-direction: column;
      gap: .5rem;
      list-style: none;
    }
    .article-prose ul li,
    .article-prose ol li {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: .75rem;
      font-size: var(--para);
      color: rgba(7, 38, 13, .75);
      line-height: 1.6;
      letter-spacing: -0.03em;
      margin-bottom: 0;
    }
    .article-prose ul li::before {
      content: "▸";
      color: var(--orange);
      font-size: .65rem;
      margin-top: .35em;
    }
    .article-prose ol { counter-reset: ol-item; }
    .article-prose ol li::before {
      content: counter(ol-item);
      counter-increment: ol-item;
      font-family: var(--accent);
      font-style: italic;
      color: var(--orange);
      font-size: 1.1rem;
      line-height: 1.2;
    }

    /* ── Citation mise en avant ── */
    .article-prose blockquote {
      margin: clamp(2rem, 4vw, 3rem) 0;
      padding: 1.5rem 2rem;
      border-left: 3px solid var(--orange);
      background: var(--beige);
      border-radius: 0 var(--sm) var(--sm) 0;
    }
    .article-prose blockquote p {
      font-family: var(--accent);
      font-style: italic;
      font-size: clamp(1.1rem, 2vw, 1.4rem);
      color: var(--olive);
      line-height: 1.45;
      margin: 0;
      letter-spacing: -0.01em;
    }
    .article-prose blockquote cite {
      display: block;
      margin-top: .75rem;
      font-family: var(--mono);
      font-style: normal;
      font-size: var(--label);
      text-transform: uppercase;
      letter-spacing: .06em;
      color: rgba(7, 38, 13, .45);
    }

    /* ── Encadré highlight ── */
    .article-prose .callout {
      margin: clamp(2rem, 4vw, 3rem) 0;
      padding: 1.5rem 2rem;
      background: rgba(255, 101, 41, .06);
      border: 1px solid rgba(255, 101, 41, .2);
      border-radius: var(--sm);
    }
    .article-prose .callout__title {
      font-family: var(--mono);
      font-size: var(--label);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--orange);
      margin-bottom: .65rem;
    }
    .article-prose .callout p {
      margin-top: 0;
      color: var(--orange);
    }

    /* ── Image inline ── */
    .article-prose figure {
      margin: clamp(2rem, 4vw, 3rem) 0;
    }
    .article-prose figure img {
      width: 100%;
      border-radius: var(--sm);
      border: 1px solid rgba(7, 38, 13, .08);
    }
    .article-prose figure figcaption {
      font-family: var(--mono);
      font-size: var(--label);
      text-transform: uppercase;
      letter-spacing: .04em;
      color: rgba(7, 38, 13, .38);
      margin-top: .65rem;
      text-align: center;
    }

    /* ── Séparateur article ── */
    .article-prose hr {
      border: none;
      border-top: 1px solid rgba(7, 38, 13, .1);
      margin: clamp(2.5rem, 5vw, 4rem) 0;
    }

    /* ── Footer article : tags + partage ── */
    .article-footer {
      margin-top: clamp(3rem, 5vw, 5rem);
      padding-top: 2rem;
      border-top: 1px solid rgba(7, 38, 13, .1);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1rem;
    }
    .article-tags {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem;
    }

    /* ── Bio auteur ── */
    .author-bio {
      background: var(--beige);
      padding: clamp(3rem, 5vw, 5rem) clamp(1.25rem, 4vw, 4rem);
      border-top: 1px solid rgba(7, 38, 13, .08);
    }
    .author-bio__inner {
      max-width: 720px;
      margin-inline: auto;
      display: flex;
      gap: 1.75rem;
      align-items: flex-start;
    }
    .author-bio__avatar {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: var(--olive);
      display: grid;
      place-items: center;
      font-family: var(--display);
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--beige);
      flex-shrink: 0;
    }
    .author-bio__name {
      font-family: var(--display);
      font-size: 1.2rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: -0.02em;
      color: var(--olive);
      margin-bottom: .25rem;
    }
    .author-bio__role {
      font-family: var(--mono);
      font-size: var(--label);
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--orange);
      margin-bottom: .75rem;
    }
    .author-bio__desc {
      color: rgba(7, 38, 13, .62);
      font-size: var(--para);
      line-height: 1.6;
      letter-spacing: -0.04em;
      margin: 0;
    }

    /* ── Articles liés ── */
    .related {
      background: #fff;
      padding: clamp(4rem, 7vw, 7rem) clamp(1.25rem, 4vw, 4rem);
      border-top: 1px solid rgba(7, 38, 13, .08);
    }
    .related__inner { max-width: 1200px; margin-inline: auto; }
    .related__header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 2rem;
      padding-bottom: 2rem;
      border-bottom: 1px solid rgba(7, 38, 13, .1);
      margin-bottom: clamp(2rem, 4vw, 3rem);
    }
    .related__header h2 { margin-bottom: 0; }
    .related__grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(1rem, 2vw, 1.5rem);
    }
    .article-card {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      padding: clamp(1.25rem, 2vw, 1.75rem);
      background: var(--beige);
      border-top: 3px solid var(--orange);
      text-decoration: none;
      color: inherit;
      transition: transform .25s var(--rp-ease), box-shadow .25s var(--rp-ease);
    }
    .article-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 48px rgba(7, 38, 13, .1);
      text-decoration: none;
      color: inherit;
    }
    .article-card__meta {
      display: flex;
      align-items: center;
      gap: .65rem;
      flex-wrap: wrap;
    }
    .article-card__date {
      font-family: var(--mono);
      font-size: var(--label);
      text-transform: uppercase;
      letter-spacing: .04em;
      color: rgba(7, 38, 13, .38);
    }
    .article-card__title {
      font-family: var(--display);
      font-size: clamp(1.1rem, 1.8vw, 1.5rem);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: -0.02em;
      color: var(--olive);
      line-height: 1.08;
      margin: 0;
    }
    .article-card__excerpt {
      font-family: var(--body);
      font-size: .88rem;
      color: rgba(7, 38, 13, .55);
      line-height: 1.55;
      letter-spacing: -0.04em;
      margin: 0;
    }
    .article-card__read {
      font-family: var(--mono);
      font-size: var(--label);
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--orange);
      margin-top: auto;
    }

    /* ── CTA final ── */
    .cta-final {
      padding: clamp(5rem, 9vw, 8rem) clamp(1.25rem, 4vw, 4rem);
      background: var(--olive);
      text-align: center;
    }
    .cta-final__inner { max-width: 680px; margin-inline: auto; }
    .cta-final h2 { color: var(--beige); margin-bottom: 1.25rem; }
    .cta-final__desc { color: rgba(243, 237, 225, .62); line-height: 1.6; margin: 0 0 2rem; }

    /* ── Responsive ── */
    @media (max-width: 760px) {
      .author-bio__inner { flex-direction: column; gap: 1.25rem; }
      .related__grid { grid-template-columns: 1fr; }
      .related__header { flex-direction: column; align-items: flex-start; gap: .75rem; }
      .article-footer { flex-direction: column; align-items: flex-start; }
    }