/* ============================================================
   Article de blog — mise en page éditoriale + 3 modèles
   (classic / magazine / feature) + contenu riche CKEditor.
   Base partagée : Inter (corps) + Playfair (`--font-display`).
   ============================================================ */
.post-wrap { max-width: 760px; margin: 0 auto; padding: clamp(40px,6vw,80px) clamp(20px,4vw,44px) clamp(56px,8vw,110px); }
.post-back { display: inline-block; font-size: 15px; font-weight: 600; text-decoration: none; color: var(--ink); opacity: .7; }
.post-back:hover { opacity: 1; }
.post-meta { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 26px 0 8px; }
.post-wrap h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(34px,5vw,60px); line-height: 1.06; letter-spacing: -.01em; margin: 0 0 24px; }
.post-cover { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); margin: 6px 0 38px; }
.post-cover img { width: 100%; max-height: 480px; object-fit: cover; display: block; }

/* ---- Rich body content ---- */
.post-body { font-size: 1.12rem; line-height: 1.8; color: var(--ink-soft); }
.post-body > *:first-child { margin-top: 0; }
.post-body h2 { font-family: var(--font-display); font-weight: 500; color: var(--ink); font-size: clamp(24px,3vw,34px); line-height: 1.15; margin: 1.6em 0 .5em; }
.post-body h3 { color: var(--ink); font-weight: 700; font-size: 1.3rem; margin: 1.5em 0 .4em; }
.post-body p { margin: 0 0 1.15em; }
.post-body a { color: var(--brick); text-decoration: underline; text-underline-offset: 2px; }
.post-body ul, .post-body ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.post-body li { margin: .35em 0; }
.post-body blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--brick);
  font-family: var(--font-display); font-style: italic; font-size: 1.3rem; line-height: 1.5; color: var(--ink);
}
.post-body img { max-width: 100%; height: auto; border-radius: var(--r); margin: 1.6em 0; display: block; }
.post-body figure { margin: 1.8em 0; }
.post-body figure img { margin: 0; }
.post-body figcaption { margin-top: .6em; font-size: .9rem; color: var(--muted); text-align: center; }
.post-body table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: .98rem; }
.post-body th, .post-body td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; }
.post-body th { background: var(--paper-2); font-weight: 700; }

/* Responsive media embeds (YouTube iframes saved by CKEditor MediaEmbed).
   CKEditor nests its own ratio box (padding-bottom) inside; we neutralise those
   inner wrappers and impose a single clean 16:9 — otherwise the two ratio boxes
   stack and leave a big empty gap above the video. */
.post-body figure.media {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  margin: 2em 0; border-radius: var(--r); overflow: hidden; background: #000;
}
.post-body figure.media > div,
.post-body figure.media > div > div {
  position: static !important; padding: 0 !important; height: auto !important; margin: 0 !important;
}
.post-body figure.media iframe {
  position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; border: 0;
}

/* ---- Modèle : Magazine (hero pleine largeur, titre en overlay) ---- */
.post--magazine .post-hero {
  position: relative; min-height: clamp(360px, 60vh, 620px); display: flex; align-items: flex-end;
  background: var(--cover, #222) center / cover no-repeat; color: #fff;
}
.post--magazine .post-hero__scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.05) 40%, rgba(0,0,0,.78) 100%); }
.post--magazine .post-hero__in { position: relative; width: 100%; max-width: var(--wrap); margin: 0 auto;
  padding: 0 clamp(20px,4vw,44px) clamp(34px,5vw,64px); }
.post--magazine .post-back--light, .post--magazine .post-meta--light { color: #fff; }
.post--magazine .post-meta--light { opacity: .85; }
.post--magazine .post-hero__in h1 { font-family: var(--font-display); font-weight: 500; color: #fff;
  font-size: clamp(34px, 5.5vw, 72px); line-height: 1.04; margin: 8px 0 0; max-width: 20ch; text-shadow: 0 2px 30px rgba(0,0,0,.3); }
.post--magazine .post-wrap { max-width: 720px; padding-top: clamp(40px,6vw,72px); }

/* ---- Modèle : Grand format (couverture immersive, colonne large) ---- */
.post--feature .post-wrap { max-width: 900px; }
.post--feature .post-wrap h1 { font-size: clamp(40px, 6vw, 76px); }
.post--feature .post-cover { border-radius: var(--r-lg); margin: 10px 0 44px; }
.post--feature .post-cover img { max-height: 620px; }
.post--feature .post-body { font-size: 1.18rem; }

:where(.post a, .post button):focus-visible { outline: 2px solid var(--brick); outline-offset: 3px; border-radius: 8px; }

/* ---- Like + share bar ---- */
.post-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px;
  margin-top:clamp(24px,3.5vw,40px); padding-top:20px; border-top:1px solid var(--line,#EBDFD3); }
.like-btn { display:inline-flex; align-items:center; gap:9px; height:44px; padding:0 18px;
  border:1px solid var(--line,#EBDFD3); border-radius:999px; background:#fff; color:#2A211E;
  font:inherit; font-size:15px; font-weight:600; cursor:pointer;
  transition:border-color .15s ease, background .15s ease, color .15s ease, transform .12s ease; }
.like-btn:hover { border-color:#D9D5CE; background:#FBF6F0; }
.like-btn:active { transform:translateY(1px); }
.like-btn svg { color:#B23A34; transition:transform .15s ease; }
.like-btn.is-liked { background:#B23A34; border-color:#B23A34; color:#fff; cursor:default; }
.like-btn.is-liked svg { color:#fff; fill:#fff; }
.like-count { font-variant-numeric:tabular-nums; }
.share { display:inline-flex; flex-wrap:wrap; align-items:center; gap:8px; margin-left:auto; }
.share__label { font-size:13px; color:#8A7C74; letter-spacing:.02em; }
.share__btn { display:inline-flex; align-items:center; height:34px; padding:0 12px; border-radius:999px;
  border:1px solid var(--line,#EBDFD3); background:#fff; color:#4A3F3A; font-size:13px; font-weight:600;
  text-decoration:none; cursor:pointer; transition:border-color .15s ease, background .15s ease; }
.share__btn:hover { border-color:#D9D5CE; background:#FBF6F0; }
@media (max-width:560px){ .share { margin-left:0; width:100%; } }

/* ---- Article tags: one tint per tag ---- */
.post-tags { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.post-tags__label { font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:#A89B90; margin-right:4px; }
.tagchip--tinted { background:var(--tc-bg); color:var(--tc-fg); border:1px solid transparent;
  font-size:12px; font-weight:600; line-height:1; padding:6px 11px; border-radius:999px;
  text-decoration:none; transition:transform .12s ease, box-shadow .15s ease, filter .15s ease; }
.tagchip--tinted:hover { transform:translateY(-1px); filter:saturate(1.15);
  box-shadow:0 4px 12px -6px var(--tc-fg); }