.page-posts-list,
.page-post {
  padding: var(--sec) var(--gutter);
  background: var(--canvas);
}

.posts--all .posts-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.posts--all .filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.posts-archive {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 28px;
  max-width: 720px;
}

.posts-archive h2 {
  margin: 8px 0 0;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.posts-archive .meta-line,
.post-single .meta-line {
  margin: 0;
  font: 500 12px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.posts-archive .excerpt {
  margin: 10px 0 0;
  color: var(--slate);
  line-height: 1.6;
  font-size: 15px;
}

.back-home {
  margin-top: 48px;
}

.post-single {
  max-width: 720px;
  margin: 0 auto;
}

.post-single-head h1 {
  margin: 12px 0 0;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.08;
}

.post-single-media {
  margin: 32px 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
}

.post-single-cover {
  margin: 32px 0;
  border-radius: 16px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px;
}

.post-single-body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
}

.post-single-body p {
  margin: 0 0 1.1em;
}

.post-single-foot {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

/* ---------- v8 : liste des posts en cartes, pages post lisibles ---------- */
html:not(.js) .posts--all .filters{display:none}
.posts--all .posts-head{margin-bottom:clamp(28px,3.5vw,44px)}
.posts-archive{max-width:760px;margin:0 auto;gap:16px}
.posts-archive li[hidden]{display:none}
.archive-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:var(--card-pad);display:flex;flex-direction:column;gap:10px;transition:border-color .2s,box-shadow .3s}
.archive-card:hover{border-color:var(--line-strong);box-shadow:0 18px 40px -28px rgba(3,13,27,.3)}
.posts-archive h2{margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:clamp(1.2rem,2vw,1.45rem);line-height:1.25;letter-spacing:-.03em;text-wrap:balance}
.posts-archive h2 a{color:var(--ink);text-decoration:none}
.posts-archive h2 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.posts-archive .excerpt{margin:0;white-space:pre-line;font-size:16px;line-height:1.55;color:var(--slate);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.posts-archive .pin{color:var(--slate)}
.archive-actions{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:4px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.posts--all .more-wrap{display:flex;justify-content:center;margin-top:28px}
.back-home{margin:36px auto 0;text-align:center}
.back-home a{font:600 14px var(--sans);color:var(--slate);text-decoration:none}
.back-home a:hover{color:var(--ink)}

.post-single{max-width:680px}
.post-single-head h1{font-size:clamp(1.9rem,4vw,2.6rem);text-wrap:balance}
.post-single-head .kicker a{color:inherit;text-decoration:none}
.post-single-media{margin:28px 0;border-radius:var(--radius)}
.post-single-media img{display:block;width:100%;height:auto}
.post-single-figure{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin:24px 0 28px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.post-single-figure b{font-size:clamp(2.2rem,4vw,2.8rem);font-weight:600;letter-spacing:-.05em;line-height:1;color:var(--accent)}
.post-single-figure span{font:500 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.post-single-body{font-size:18px;line-height:1.65;max-width:var(--measure)}
.post-single-body p{margin:0 0 1.15em;white-space:pre-line}
.post-single-foot{justify-content:space-between}

@media(max-width:600px){
 .page-posts-list,.page-post{padding-top:36px;padding-bottom:48px}
 .post-single-body{font-size:17px;line-height:1.6}
 .archive-actions{flex-wrap:wrap}
}

/* À lire aussi + 404 */
.related{max-width:680px;margin:clamp(40px,5vw,64px) auto 0;padding-top:28px;border-top:1px solid var(--line)}
.related-title{margin:0 0 16px;font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.related-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.related-list a{display:flex;flex-direction:column;gap:6px;padding:18px 20px;background:#fff;border:1px solid var(--line);border-radius:16px;text-decoration:none;color:var(--ink);transition:border-color .2s,box-shadow .3s}
.related-list a:hover{border-color:var(--line-strong);box-shadow:0 14px 32px -24px rgba(3,13,27,.3)}
.related-meta{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.related-name{font-size:16.5px;font-weight:600;line-height:1.3;letter-spacing:-.02em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.page-404 h1{margin:8px 0 0;font-size:clamp(2rem,4vw,2.8rem);letter-spacing:-.045em;line-height:1.05}
.page-404 .lead{margin-top:14px}
.page-404 .nf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin:28px 0 40px}
.page-404 .related-title{margin-top:8px}