/*
 * Blog stylesheet — covers /[locale]/blog (index) and /[locale]/blog/[slug]
 * (post page). Mobile-first; the breakpoint that matters is 1000px to
 * stay consistent with the rest of the marketing surface.
 *
 * Brand tokens mirror the inline :root block on qui-sommes-nous.html so
 * the blog reads as a sibling of the existing pages, not a foreign body.
 */

:root {
  --primary:        #15803D;
  --primary-bright: #22C55E;
  --secondary:      #FACC15;
  --bg-main:        #FAFAF9;
  --bg-alt:         #F5F5F4;
  --text-main:      #1C1917;
  --text-muted:     #57534E;
  --border-soft:    #E7E5E4;
  --primary-10:     rgba(34, 197, 94, 0.10);
  --primary-20:     rgba(34, 197, 94, 0.20);
  --secondary-20:   rgba(250, 204, 21, 0.20);
}

/* ─── Resets shared with the rest of the site ──────────── */

body {
  font-family: 'Inter', sans-serif;
  color: var(--text-main);
  background: var(--bg-main);
  margin: 0;
}
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }
a  { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── Hero ─────────────────────────────────────────────── */

.blog-hero {
  position: relative;
  padding: 88px 24px 48px;
  background: var(--bg-main);
  overflow: hidden;
}
.blog-hero::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(34,197,94,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,197,94,.055) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), transparent 80%);
}
.blog-hero__inner {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  text-align: left;
}
.blog-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--primary);
  padding: 6px 14px;
  border: 1px solid var(--primary-20);
  border-radius: 100px;
  background: var(--primary-10);
}
.blog-hero__title {
  font-family: 'Suisse Screen', sans-serif;
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 22px 0 14px;
}
.blog-hero__sub {
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.65;
  font-weight: 300;
  max-width: 620px;
  margin: 0 0 28px;
}
.blog-search { max-width: 480px; }
.blog-search__label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
}
.blog-search__row {
  display: flex;
  background: white;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.blog-search__row input {
  flex: 1;
  border: 0;
  outline: 0;
  padding: 10px 14px;
  font-size: 0.95rem;
  background: transparent;
  font-family: inherit;
}
.blog-search__row button {
  background: var(--primary);
  color: white;
  border: 0;
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  display: inline-flex; align-items: center;
}
.blog-search__row button:hover { background: #166534; }

/* ─── Filters ──────────────────────────────────────────── */

.blog-filters {
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-main);
  z-index: 10;
}
/* On desktop the bar is sticky just below the global navbar
   (sm:h-20 = 80px — see public/js/shared-nav.js). On mobile we let
   it scroll with the page: with `flex-wrap` enabled below, the bar
   can take 2–3 rows on small screens, and pinning that under the
   navbar would eat too much vertical space. */
@media (min-width: 700px) {
  .blog-filters {
    position: sticky;
    top: 80px;
  }
}
.blog-filters__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  gap: 8px;
  /* Mobile: every category fits on screen at once, even if it takes
     two rows. No swipe needed. */
  flex-wrap: wrap;
}
/* Desktop: single horizontal row, scrollable when the page width is
   tight (e.g. small laptop with sidebar). The wrap → nowrap switch
   matches the .post-grid breakpoint so the filter bar's visual width
   tracks the cards below it. */
@media (min-width: 700px) {
  .blog-filters__inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .blog-filters__inner::-webkit-scrollbar { display: none; }
}
.cat-filter {
  flex-shrink: 0;
  padding: 7px 14px;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-alt);
  border-radius: 100px;
  transition: all 0.15s ease;
}
.cat-filter:hover { color: var(--text-main); text-decoration: none; }
.cat-filter--active {
  background: var(--text-main);
  color: white;
}

/* ─── Grid ─────────────────────────────────────────────── */

.blog-list { padding: 32px 24px 64px; }
.blog-list__inner { max-width: 1100px; margin: 0 auto; }

.post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 700px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .post-grid { grid-template-columns: repeat(3, 1fr); }
}

.post-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}
.post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.06);
}
.post-card__cover-link { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-alt); }
.post-card__cover { width: 100%; height: 100%; object-fit: cover; }
.post-card__cover-link--placeholder { display: flex; align-items: center; justify-content: center; }
.post-card__cover-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(34,197,94,0.08) 0%, rgba(250,204,21,0.08) 100%);
}
.post-card__cover-placeholder img { width: 56px; height: 56px; opacity: 0.5; }
.post-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* Wrapper for one-or-more category pills on a card. Flex-gap keeps
   multiple pills separated and wrapping cleanly; the wrapper owns the
   bottom margin so individual pills don't double it up. */
.post-card__categories {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin-bottom: 10px;
}
.post-card__category {
  display: inline-block;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
}
.post-card__category:hover { text-decoration: underline; }
.post-card__title {
  font-family: 'Suisse Screen', sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 0 0 10px;
  color: var(--text-main);
}
.post-card__title a { color: inherit; }
.post-card__title a:hover { color: var(--primary); text-decoration: none; }
.post-card__excerpt {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0 0 14px;
  font-weight: 300;
  flex: 1;
}
.post-card__meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  display: flex;
  gap: 6px;
  align-items: center;
}
.post-card__dot { color: #A8A29E; }

.blog-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted);
}

/* ─── Pagination ───────────────────────────────────────── */

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border-soft);
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pagination__link { color: var(--primary); }
.pagination__link--disabled { color: #C7C2BE; cursor: default; }
.pagination__page { color: var(--text-muted); }

/* ─── Post page chrome ─────────────────────────────────── */

.post-page { background: var(--bg-main); }
.draft-badge {
  background: var(--secondary);
  color: var(--text-main);
  padding: 10px 24px;
  text-align: center;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.post-header {
  /* The global navbar is fixed (position: fixed, top: 0) and 64px tall
     on mobile, 80px on ≥640px. Without this top padding the breadcrumb
     hides under it. Match the .blog-hero spacing for visual rhythm. */
  padding: 96px 24px 24px;
}
@media (max-width: 639px) {
  .post-header { padding-top: 80px; }
}
.post-header__inner {
  max-width: 720px;
  margin: 0 auto;
}
.breadcrumb {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--text-main); text-decoration: none; }
.breadcrumb span { color: #A8A29E; }
/* Wrapper for the post-page category pills (above the title). */
.post-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-bottom: 16px;
}
.post-category {
  display: inline-block;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
}
.post-title {
  font-family: 'Suisse Screen', sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  color: var(--text-main);
}
/* Deck / lede — short italic summary that sits between the title and
   the byline. Sourced from post.excerpt so we don't add a new DB
   column for now; the same string powers SEO/OG descriptions. */
.post-deck {
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.55;
  margin: 0 0 20px;
  color: var(--text-muted);
  max-width: 60ch;
}

/* ─── Designed-HTML iframe ──────────────────────────────
   Posts authored in "HTML mode" (Claude design exports, custom
   layouts, etc.) embed the full standalone document in an iframe
   so its CSS doesn't leak into the WattMatch chrome. The wrapper
   spans the full content column; height is set per-iframe in JS
   to its content's scrollHeight (see blog-post.js#fitHtmlFrames). */
.post-html-frame {
  margin: 0 auto;
  max-width: 100%;
}
.post-html-frame__iframe {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  /* Reasonable fallback before fitHtmlFrames sizes it. */
  min-height: 60vh;
  /* Suppress the iframe's own scrollbar — height is driven by the
     postMessage protocol so the article should always fit. If the
     fit is briefly off we'd rather see a tiny clip during a tab
     switch than a permanent inner scrollbar on the whole article. */
  overflow: hidden;
}
/* The plain-text mirror is for SEO/crawlers only — visually hidden
   from sighted users but still in the rendered DOM so the article's
   words remain indexable when the body lives inside the iframe.
   `display:none` would hide it from crawlers too; the clip-path
   pattern keeps it visible to search engines while removing it
   from the visual flow and from assistive tech focus. */
.post-html-seo {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.post-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  flex-wrap: wrap;
}
.post-meta__dot { color: #A8A29E; }
.post-meta__updated { color: var(--text-muted); }

/* ─── Byline (E-E-A-T author block) ────────────────────── */
.byline {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 20px;
  flex-wrap: wrap;
}
.byline__avatar-link {
  display: block;
  width: 56px; height: 56px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--border-soft);
}
.byline__avatar { width: 100%; height: 100%; object-fit: cover; display: block; }
.byline__avatar--placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #15803D, #166534);
  color: white;
  font-family: 'Suisse Screen', sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
}
.byline__body { flex: 1; min-width: 200px; }
.byline__line {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-bottom: 4px;
}
.byline__by {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.byline__name {
  font-weight: 600;
  color: var(--text-main);
  font-size: 1rem;
}
.byline__name:hover { color: var(--primary); text-decoration: none; }
.byline__role {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 300;
}
.byline__linkedin {
  display: inline-flex; align-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--bg-alt);
  color: var(--text-muted);
  justify-content: center;
}
.byline__linkedin:hover { background: #0A66C2; color: white; text-decoration: none; }
.byline__meta {
  display: flex; gap: 6px; align-items: center;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.byline__sep { color: #A8A29E; }
.byline__updated { color: var(--text-main); }

.post-cover {
  /* 990 px = 1100 × 0.9 — 10 % narrower than before so the cover
     doesn't dominate the page. */
  max-width: 990px;
  margin: 0 auto 32px;
  padding: 0 24px;
}
.post-cover img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  /* No forced aspect-ratio + object-fit:cover — that used to crop
     the top/bottom off any cover that wasn't 16:9 (the current
     Switzerland map is 3:2, so a strip was getting cut). Let the
     image render at its natural aspect. The max-height keeps a
     hypothetical portrait cover from pushing the article below
     the fold. */
  max-height: 70vh;
  object-fit: contain;
}

/* ─── Article body ─────────────────────────────────────── */

.post-body { padding: 0 24px 48px; }
.post-body__inner {
  max-width: 720px;
  margin: 0 auto;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-main);
}
.post-body__inner p,
.post-body__inner ul,
.post-body__inner ol {
  font-size: 1.0625rem;
  margin: 0 0 1.4em;
}
.post-body__inner h2,
.post-body__inner h3,
.post-body__inner h4 {
  font-family: 'Suisse Screen', sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-main);
  margin: 2.2em 0 0.8em;
  line-height: 1.25;
}
.post-body__inner h2 { font-size: 1.7rem; }
.post-body__inner h3 { font-size: 1.32rem; }
.post-body__inner h4 { font-size: 1.1rem; }
.post-body__inner ul,
.post-body__inner ol { padding-left: 1.4em; }
/* Tailwind's preflight resets list-style-type to none on every ul/ol —
   we explicitly restore the bullets and numbers inside the article body
   so EditorJS's `list` blocks render the way authors expect. */
.post-body__inner ul { list-style-type: disc; }
.post-body__inner ol { list-style-type: decimal; }
.post-body__inner ul ul { list-style-type: circle; }
.post-body__inner ol ol { list-style-type: lower-alpha; }
.post-body__inner li { margin-bottom: 0.5em; }
.post-body__inner a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.post-body__inner a:hover { color: #166534; }
.post-body__inner hr {
  border: 0; border-top: 1px solid var(--border-soft);
  margin: 2.2em auto;
  max-width: 80px;
}

/* Quote — italic + yellow vertical bar per the brief. */
.post-body__inner figure.blog-quote {
  margin: 2em 0;
  border-left: 4px solid var(--secondary);
  padding: 0.6em 0 0.6em 1.4em;
}
.post-body__inner figure.blog-quote blockquote {
  margin: 0;
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--text-main);
  font-weight: 400;
}
.post-body__inner figure.blog-quote figcaption {
  margin-top: 0.6em;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Code blocks */
.post-body__inner pre.blog-code {
  background: #111212;
  color: #E5E5E5;
  border-radius: 12px;
  padding: 18px 20px;
  overflow-x: auto;
  margin: 1.6em 0;
  font-size: 0.88rem;
  line-height: 1.6;
}
.post-body__inner pre.blog-code code {
  font-family: 'Space Mono', ui-monospace, 'Courier New', monospace;
}

/* Inline code */
.post-body__inner code {
  background: var(--bg-alt);
  padding: 0.12em 0.4em;
  border-radius: 4px;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 0.92em;
}

/* Image figure */
.post-body__inner figure.blog-image {
  margin: 1.8em 0;
}
.post-body__inner figure.blog-image img {
  width: 100%;
  border-radius: 12px;
}
.post-body__inner figure.blog-image--border img {
  border: 1px solid var(--border-soft);
}
.post-body__inner figure.blog-image--background {
  background: var(--bg-alt);
  padding: 20px;
  border-radius: 12px;
}
.post-body__inner figure.blog-image figcaption {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 0.6em;
  text-align: center;
}

/* Tables */
.post-body__inner .blog-table-wrap {
  overflow-x: auto;
  margin: 1.6em 0;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
}
.post-body__inner table.blog-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.post-body__inner table.blog-table th,
.post-body__inner table.blog-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
}
.post-body__inner table.blog-table th {
  background: var(--bg-alt);
  font-weight: 600;
}

/* ─── Sources (E-E-A-T citations) ──────────────────────── */

.post-sources {
  margin: 2.4em 0 0;
  padding-top: 1.4em;
  border-top: 1px solid var(--border-soft);
}
.post-sources__title {
  font-family: 'Suisse Screen', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  margin: 0 0 0.8em;
  color: var(--text-main);
  letter-spacing: -0.005em;
}
.post-sources__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.post-source {
  display: flex;
  gap: 8px;
  font-size: 0.9rem;
  line-height: 1.5;
  align-items: baseline;
}
.post-source__num {
  color: var(--text-muted);
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  flex-shrink: 0;
}
.post-source__link {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}
.post-source__publisher {
  color: var(--text-muted);
  font-size: 0.82rem;
}

/* ─── Author page ─────────────────────────────────────── */

.author-page__header {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 2em 0 1em;
}
.author-page__avatar {
  width: 128px; height: 128px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.author-page__avatar--placeholder {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #15803D, #166534);
  color: white;
  font-family: 'Suisse Screen', sans-serif;
  font-weight: 900;
  font-size: 3rem;
}
.author-page__head-body { flex: 1; min-width: 240px; }
.author-page__name {
  font-family: 'Suisse Screen', sans-serif;
  font-weight: 900;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  margin: 0 0 0.2em;
  color: var(--text-main);
  letter-spacing: -0.02em;
}
.author-page__role {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 0 0 0.8em;
  font-family: 'Space Mono', ui-monospace, monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.author-page__bio {
  font-size: 1.02rem;
  line-height: 1.65;
  font-weight: 300;
  color: var(--text-main);
  margin: 0 0 1em;
  max-width: 56ch;
}
/* The author page body is rendered inside .post-body__inner, which
   carries a `.post-body__inner a { color: var(--primary) }` rule with
   higher specificity than `.author-page__linkedin`. We re-assert the
   white text + LinkedIn blue here so the badge stays legible. */
.post-body__inner .author-page__linkedin,
.author-page__linkedin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 100px;
  background: #0A66C2;
  color: white;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}
.post-body__inner .author-page__linkedin:hover,
.author-page__linkedin:hover {
  background: #084d92;
  color: white;
  text-decoration: none;
}
.author-page__articles {
  margin-top: 2.4em;
  padding-top: 1.4em;
  border-top: 1px solid var(--border-soft);
}
.author-page__articles-title {
  font-family: 'Suisse Screen', sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  margin: 0 0 1em;
}

/* ─── Tags ────────────────────────────────────────────── */

.post-tags {
  margin: 2.2em 0 1em;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.post-tag {
  display: inline-block;
  padding: 5px 12px;
  background: var(--bg-alt);
  color: var(--text-muted);
  border-radius: 100px;
  font-size: 0.78rem;
  font-family: 'Space Mono', ui-monospace, monospace;
}
.post-tag:hover { background: var(--text-main); color: white; text-decoration: none; }

/* ─── Share bar ────────────────────────────────────────── */

.share-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 2em 0 0;
  padding-top: 1.5em;
  border-top: 1px solid var(--border-soft);
  flex-wrap: wrap;
}
.share-bar__label {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 4px;
}
.share-bar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 36px; height: 36px;
  border-radius: 100px;
  background: var(--bg-alt);
  color: var(--text-main);
  border: 0;
  cursor: pointer;
  transition: all 0.15s ease;
}
.share-bar__copy { width: auto; padding: 0 14px; }
.share-bar__btn-label {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.share-bar__btn:hover { background: var(--text-main); color: white; text-decoration: none; }

/* ─── Lead capture ─────────────────────────────────────── */

.lead-capture {
  position: relative;
  background: var(--text-main);
  color: white;
  padding: 56px 24px;
  margin: 32px 0;
  overflow: hidden;
}
.lead-capture__grid {
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.8) 0%, transparent 70%);
}
.lead-capture__inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}
.lead-capture__headline {
  font-family: 'Suisse Screen', sans-serif;
  font-weight: 800;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}
.lead-capture__sub {
  color: rgba(255,255,255,0.78);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 24px;
  max-width: 560px;
  font-weight: 300;
}
.lead-capture__label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
}
.lead-capture__row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.lead-capture__input {
  flex: 1;
  min-width: 220px;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: white;
  font-size: 0.98rem;
  font-family: inherit;
  outline: none;
  transition: all 0.15s ease;
}
.lead-capture__input:focus { border-color: var(--secondary); background: rgba(255,255,255,0.10); }
.lead-capture__input::placeholder { color: rgba(255,255,255,0.5); }
.lead-capture__btn {
  background: var(--secondary);
  color: var(--text-main);
  border: 0;
  border-radius: 12px;
  padding: 14px 24px;
  font-weight: 700;
  font-size: 0.98rem;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}
.lead-capture__btn:hover { background: #FDE047; }
.lead-capture__btn:disabled { opacity: 0.55; cursor: not-allowed; }
.lead-capture__msg {
  margin: 14px 0 0;
  font-size: 0.92rem;
  min-height: 1.4em;
}
.lead-capture__msg--ok { color: var(--secondary); }
.lead-capture__msg--err { color: #FCA5A5; }

/* For producteur CTA we swap the button to the bright green per the brief
   ("CTA secondary jaune ou primary vert selon le type"). */
.lead-capture[data-cta="producteur"] .lead-capture__btn {
  background: var(--primary-bright);
  color: white;
}
.lead-capture[data-cta="producteur"] .lead-capture__btn:hover { background: var(--primary); }

/* ─── Related ─────────────────────────────────────────── */

.related {
  padding: 48px 24px;
  background: var(--bg-alt);
}
.related__title {
  max-width: 1100px;
  margin: 0 auto 24px;
  font-family: 'Suisse Screen', sans-serif;
  font-weight: 800;
  font-size: 1.6rem;
}
.related__grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 700px) {
  .related__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .related__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ─── Footer nav ───────────────────────────────────────── */

.post-footer-nav { padding: 32px 24px 48px; }
.post-footer-nav__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.back-link {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.back-link:hover { color: var(--text-main); text-decoration: none; }