/* ── HERO ARTICLE ── */
    #article-hero {
      padding: 72px 0 0;
    }

    .article-category {
      display: inline-block;
      font-size: .65rem; letter-spacing: .14em; text-transform: uppercase;
      color: var(--accent2); border: 1px solid var(--border);
      padding: 5px 12px; border-radius: 100px; margin-bottom: 24px;
    }

    .article-headline {
      font-size: clamp(2rem, 4.5vw, 3.6rem);
      line-height: 1.15; font-weight: 700; letter-spacing: -.02em;
      color: var(--accent); max-width: 820px;
    }
    .article-headline em { font-style: italic; color: var(--accent2); }

    .article-standfirst {
      font-size: 1.1rem; line-height: 1.75; color: var(--muted);
      max-width: 680px; margin: 24px 0 40px;
    }

    .article-byline {
      display: flex; align-items: center; gap: 16px;
      padding: 20px 0;
      border-top: 1px solid rgba(0,10,71,.1);
    }
    .byline-avatar {
      width: 40px; height: 40px; border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      display: flex; align-items: center; justify-content: center;
      font-size: .75rem; font-weight: 500; color: white; flex-shrink: 0;
    }
    .byline-name { font-size: .875rem; font-weight: 500; color: var(--accent); }
    .byline-meta { font-size: .75rem; color: var(--muted); letter-spacing: .04em; margin-top: 2px; }
    .byline-sep { width: 1px; height: 32px; background: rgba(0,10,71,.12); margin: 0 8px; }
    .byline-info { font-size: .75rem; color: var(--muted); }

    /* ── COVER IMAGE ── */
    .article-cover {
      position: relative;
      width: 100%;
      aspect-ratio: 16/7;
      overflow: hidden;
      border-radius: 10px;
      border: solid var(--border) 1px;
    }
    .article-cover img {
      width: 100%;
    }
    .article-cover-inner {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .cover-pattern {
      position: absolute; inset: 0; opacity: .07;
    }
    .cover-caption {
      position: absolute; bottom: 20px; right: 28px;
      font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
      color: var(--accent);
      background: var(--bg);
      padding-left: 4px;
      padding-right: 4px;
    }

    /* ── BODY LAYOUT ── */
    #article-body {
      padding: 18px 0 100px;
    }

    /* ── PROSE ── */
    .prose {
      font-size: 1.0rem;
      line-height: 1.9;
      color: rgba(0,10,71,.78);
    }

    .prose h2 {
      font-size: 1.8rem; font-weight: 700;
      letter-spacing: -.01em; line-height: 1.3;
      color: var(--accent);
      margin: 52px 0 20px;
    }

    .prose h3 {
      font-weight: 600;
      letter-spacing: .02em; color: var(--accent);
      margin: 36px 0 14px;
      text-transform: uppercase; font-size: 1.1rem; letter-spacing: .14em;
    }

    .prose p { margin-bottom: 22px; }

    .prose p:first-child::first-letter {
      font-size: 3.8rem; font-weight: 700; line-height: .85;
      float: left; margin: 4px 12px 0 0;
      color: var(--accent);
    }

    .prose strong { color: var(--accent); font-weight: 500; }

    .prose a {
      color: var(--accent2); text-decoration: underline;
      text-decoration-color: var(--border);
      text-underline-offset: 3px; transition: text-decoration-color .2s;
    }
    .prose a:hover { text-decoration-color: var(--accent2); }

    /* Pull quote */
    .prose blockquote {
      margin: 40px 0;
      padding: 28px 36px;
      border-left: 3px solid var(--accent2);
      background: #E6D7D1;
      /*border-radius: 0 8px 8px 0;*/
    }
    .prose blockquote p {
      font-size: 1.25rem; line-height: 1.6; font-style: italic;
      color: var(--accent); margin: 0;
    }
    .prose blockquote p::first-letter { all: unset; }
    .prose blockquote cite {
      display: block; margin-top: 14px;
      font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
      color: var(--muted); font-style: normal;
    }

    /* Encart chiffres */
    .prose .stat-inline {
      display: inline-flex; align-items: baseline; gap: 6px;
    }
    .prose .stat-inline .num {
      font-size: 2rem; font-weight: 700; color: var(--accent); line-height: 1;
    }
    .prose .stat-inline .unit {
      font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
    }

    /* Encart info */
    .infobox {
      background: #E6D7D1;
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 28px 32px;
      margin: 40px 0;
    }
    .infobox-label {
      font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
      color: var(--accent2); margin-bottom: 10px;
    }
    .infobox h4 {
      font-size: 1.05rem; color: var(--accent); margin-bottom: 10px;
    }
    .infobox p { font-size: .875rem; color: var(--muted); line-height: 1.75; margin: 0; }

    /* Liste pros dans la prose */
    .prose ul {
      list-style: none; margin: 0 0 22px;
    }
    .prose ul li {
      padding: 7px 0 7px 22px; position: relative;
      font-size: .95rem; color: rgba(0,10,71,.72);
      border-bottom: 1px solid rgba(0,10,71,.06);
    }
    .prose ul li::before {
      content: '';
      position: absolute; left: 0; top: 50%; transform: translateY(-50%);
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--accent2);
    }


    /* ── SIDEBAR ── */
    .sidebar { position: sticky; top: 100px; }

    .sidebar-block {
      border: 1px solid var(--border);
      border-radius: 10px; padding: 24px;
      margin-bottom: 20px;
      background: #FFF3E7;
    }
    .sidebar-block-label {
      font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
      color: var(--accent2); margin-bottom: 14px;
    }

    /* Progress de lecture */
    .reading-bar {
      position: fixed; top: 72px; left: 0; right: 0; height: 2px;
      background: rgba(0,10,71,.06); z-index: 99;
    }
    .reading-bar-fill {
      height: 100%; width: 0%;
      background: linear-gradient(90deg, var(--accent), var(--accent2));
      transition: width .1s linear;
    }

    /* Tags */
    .tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
    .tag {
      font-size: .65rem; letter-spacing: .1em; text-transform: uppercase;
      border: 1px solid var(--border); border-radius: 4px;
      padding: 5px 10px; color: var(--muted);
      text-decoration: none; transition: all .2s;
    }
    .tag:hover { border-color: var(--accent); color: var(--accent); }

    /* Related articles */
    .related-mini {
      display: flex; gap: 12px; align-items: flex-start;
      padding: 14px 0; border-bottom: 1px solid rgba(0,10,71,.08);
      text-decoration: none; color: inherit; transition: opacity .2s;
    }
    .related-mini:last-child { border-bottom: none; padding-bottom: 0; }
    .related-mini:hover { opacity: .7; }
    .related-mini-thumb {
      width: 56px; height: 40px; border-radius: 6px; flex-shrink: 0;
      overflow: hidden;
    }
    .related-mini-thumb div { width: 100%; height: 100%; }
    .related-mini-title {
      font-size: .8rem; line-height: 1.4; font-weight: 500; color: var(--accent);
    }
    .related-mini-date { font-size: .65rem; color: var(--muted); margin-top: 4px; letter-spacing: .06em; }

    /* Share */
    .share-btn {
      display: flex; align-items: center; gap: 8px;
      font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
      border: 1px solid rgba(0,10,71,.15); border-radius: 6px;
      padding: 9px 16px; color: var(--muted); background: none;
      cursor: pointer; transition: all .2s; width: 100%; justify-content: center;
      margin-bottom: 8px;
    }
    .share-btn:hover { border-color: var(--accent); color: var(--accent); }
    .share-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }

    /* ── SECTION "À LIRE AUSSI" ── */
    #related { padding: 80px 0 100px; border-top: 1px solid rgba(0,10,71,.1); }


    /* Image interne inline */
    .inline-img {
      width: 100%; border-radius: 10px;
      aspect-ratio: 16/9; overflow: hidden;
      margin: 8px 0;
      position: relative;
      border: solid var(--border) 1px;
    }
    .inline-img-inner {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .inline-img-caption {
      font-size: .72rem; color: var(--muted); letter-spacing: .06em;
      margin-top: 10px; text-align: center; font-style: italic;
    }