/* ── ARTICLE LAYOUT ────────────────────────────────────── */
.article-wrap { padding-top: var(--nav-h); min-height: 80vh; }

.article-header {
  background: var(--ink); padding: 4rem 2rem 3.5rem;
  position: relative; overflow: hidden;
}

.article-header-inner { max-width: 760px; margin: 0 auto; position: relative; z-index: 1; }

.article-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: .8rem; font-weight: 600;
  color: rgba(255,255,255,0.45); margin-bottom: 1.5rem; transition: color .2s;
}
.article-back:hover { color: #fff; }

.article-cat {
  font-family: var(--font-display); font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--red); color: #fff;
  display: inline-block; padding: 4px 10px; border-radius: 4px; margin-bottom: 1rem;
}
.article-title {
  font-family: var(--font-display); font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 800; color: #fff; letter-spacing: -.04em; line-height: 1.12; margin-bottom: 1.2rem;
}
.article-meta {
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--font-display); font-size: .75rem; color: rgba(255,255,255,0.4);
}
.article-meta-sep { color: rgba(255,255,255,0.15); }

/* ── CORPS DE L'ARTICLE ────────────────────────────────── */
.article-body-wrap { max-width: 760px; margin: 0 auto; padding: 3.5rem 2rem 5rem; }
.article-body { font-size: 1.05rem; line-height: 1.85; color: var(--mid); }
.article-body p { margin-bottom: 1.4rem; }
.article-body h2 {
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 700;
  color: var(--ink); letter-spacing: -.03em; margin: 2.5rem 0 1rem;
}
.article-body h3 {
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 700;
  color: var(--ink); margin: 2rem 0 .8rem;
}
.article-body ul, .article-body ol { padding-left: 1.5rem; margin-bottom: 1.4rem; }
.article-body li { margin-bottom: .4rem; }
.article-body blockquote {
  border-left: 3px solid var(--red); padding: 1rem 1.5rem; margin: 1.8rem 0;
  background: var(--pale); border-radius: 0 8px 8px 0;
  font-style: italic; color: var(--mid);
}
.article-body code {
  font-family: monospace; background: var(--pale);
  padding: 2px 6px; border-radius: 4px; font-size: .9em;
}
.article-body strong { color: var(--ink); font-weight: 700; }
.article-body a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }

/* ── TAGS ──────────────────────────────────────────────── */
.article-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.article-tag {
  font-family: var(--font-display); font-size: .7rem; font-weight: 600;
  padding: 4px 10px; border-radius: 20px; border: 1px solid var(--border);
  color: var(--mid); transition: all .2s; cursor: pointer;
}
.article-tag:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ── PARTAGE ───────────────────────────────────────────── */
.article-divider { height: 1px; background: var(--border); margin: 2.5rem 0; }
.article-share { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.share-label {
  font-family: var(--font-display); font-size: .78rem; font-weight: 600; color: var(--mid);
}
.share-btn {
  font-family: var(--font-display); font-size: .78rem; font-weight: 600;
  padding: 7px 14px; border-radius: 6px; border: 1px solid var(--border);
  transition: all .2s; display: flex; align-items: center; gap: 6px;
  cursor: pointer; background: var(--white);
}
.share-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ── ÉTATS ─────────────────────────────────────────────── */
.state-loading, .state-error {
  padding: 6rem 2rem; text-align: center;
  font-family: var(--font-display); color: var(--mid);
}


/* → footer géré par main.css + footer.js *//* ── RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 640px) {
  .article-header { padding: 2.5rem 1.2rem; }
  .article-body-wrap { padding: 2rem 1.2rem 3rem; }
}