/* ============================================================
   ATECO BOIS — Blog package (porto-child)
   Front-end stylesheet.
   Enqueued by inc/ateco-blog.php only on blog views
   (is_home / is_archive / single post).

   Scope: every rule lives under .ateco-blog so it cannot leak
   into the rest of the Porto theme. The magazine layout (.bl-*,
   .pk-bl*) is lifted verbatim from the ateco-showcase mockups;
   the editorial content styling (.zprose) targets the NATIVE
   Gutenberg / WordPress markup that the_content() outputs.
   ============================================================ */

/* ---------- 1 · BRAND / SURFACE TOKENS ----------
   porto-child ships none of these, so we define them here.
   Everything downstream references these variables — no
   arbitrary hex scattered through the rules.                 */
.ateco-blog {
  --brand-primary: #374e54;
  --brand-primary-hover: #425d64;
  --brand-accent: #e86012;
  --brand-accent-hover: #c95210;
  --brand-accent-light: #ff9551; /* orange legible on slate/dark surfaces */
  --brand-wood: #8b5a2b;

  --neutral-ink: #1a2326;
  --neutral-600: #5e6c70;
  --neutral-400: #9ba6a9;
  --neutral-200: #e4e6e7;
  --neutral-white: #ffffff;
  --surface-cream: hsl(34, 50%, 97%);

  /* per-surface semantic aliases (light surface defaults) */
  --s-title: var(--neutral-ink);
  --s-ink: var(--neutral-ink);
  --s-ink-soft: var(--neutral-600);
  --s-border: var(--neutral-200);

  --ab-shadow-card: 0 12px 28px rgba(15, 26, 20, .10);
  --ab-shadow-sm: 0 6px 18px rgba(15, 26, 20, .06);
  --ab-ease: cubic-bezier(.22, 1, .36, 1);
  --ab-green: #109040;

  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--neutral-ink);
  -webkit-font-smoothing: antialiased;
}
.ateco-blog *,
.ateco-blog *::before,
.ateco-blog *::after { box-sizing: border-box; }

/* Anti-Porto guard: Porto forces nude h1..h5 rules
   (letter-spacing, color, fixed font-size). We neutralise
   them with a LOW-specificity :where() so our component rules
   and .zprose rules always win, while still beating Porto's
   bare selectors. color:inherit lets each surface drive its
   own heading colour. */
.ateco-blog :where(h1, h2, h3, h4, h5, h6) {
  color: inherit;
  font-family: inherit;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
}

/* ---------- 2 · SHARED HELPERS ---------- */
.ateco-blog .shell { max-width: 1280px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.ateco-blog .section { padding: clamp(40px, 6vw, 72px) 0; }
.ateco-blog .section--cream { background: var(--surface-cream); }
.ateco-blog .section-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* buttons — hc-* prefix: no Porto rule targets it (Porto styles .btn) */
.ateco-blog .hc-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; border-radius: 999px;
  cursor: pointer; font-family: inherit; font-weight: 600;
  text-decoration: none; white-space: nowrap; line-height: 1;
  transition: transform .15s ease, background-color .15s ease, opacity .15s ease;
}
.ateco-blog .hc-btn--primary { background: var(--brand-primary); color: var(--neutral-white); padding: 12px 18px; font-size: 14px; }
.ateco-blog .hc-btn--primary:hover { background: var(--brand-primary-hover); transform: translateY(-1px); }
.ateco-blog .hc-btn--accent { background: var(--brand-accent); color: var(--neutral-white); padding: 12px 18px; font-size: 14px; }
.ateco-blog .hc-btn--accent:hover { background: var(--brand-accent-hover); transform: translateY(-1px); }
.ateco-blog .hc-btn--lg { padding: 14px 28px; font-size: 16px; }
.ateco-blog .hc-btn--block { width: 100%; justify-content: center; padding: 14px 18px; }
.ateco-blog .hc-btn [data-icon], .ateco-blog .hc-btn i { font-size: 1em; line-height: 1; flex: none; }

/* icon helpers (FontAwesome glyphs live inside [data-icon] spans) */
.ateco-blog [data-icon] { display: inline-flex; align-items: center; justify-content: center; line-height: 0; text-align: center; }
.ateco-blog [data-icon] i { font-size: 1em; line-height: 1; display: inline-block; flex: none; }

/* ============================================================
   3 · BLOG INDEX (magazine layout) — from blog-index.html
   ============================================================ */
.ateco-blog .bl-wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px 64px; }

/* masthead + search */
.ateco-blog .bl-mast { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; padding: 42px 0 26px; border-bottom: 1px solid var(--neutral-200); flex-wrap: wrap; }
.ateco-blog .bl-mast .kicker { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--brand-accent); }
.ateco-blog .bl-mast h1 { font-size: clamp(30px, 4vw, 44px); letter-spacing: -.02em; color: var(--s-title); margin: 8px 0 8px; line-height: 1.05; }
.ateco-blog .bl-mast p { color: var(--s-ink-soft); font-size: 16px; margin: 0; max-width: 46ch; line-height: 1.55; }
.ateco-blog .bl-mast-search { display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--neutral-200); border-radius: 12px; padding: 11px 16px; min-width: 300px; }
.ateco-blog .bl-mast-search i { color: var(--s-ink-soft); }
.ateco-blog .bl-mast-search input { border: 0; outline: 0; font: 500 14px 'Poppins'; background: transparent; flex: 1; color: var(--neutral-ink); }

/* lead = featured + 3 minis */
.ateco-blog .bl-lead { display: grid; grid-template-columns: 1.7fr 1fr; gap: 22px; margin: 30px 0 0; }
.ateco-blog .bl-lead-main { position: relative; border-radius: 20px; overflow: hidden; min-height: 470px; display: flex; align-items: flex-end; background-size: cover; background-position: center; background-color: var(--brand-primary); text-decoration: none; }
.ateco-blog .bl-lead-main::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 28, 30, .05) 35%, rgba(20, 28, 30, .92)); }
.ateco-blog .bl-lead-main .in { position: relative; z-index: 1; padding: 34px; max-width: 580px; }
.ateco-blog .bl-tag-light { display: inline-block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #fff; background: var(--brand-accent); border-radius: 999px; padding: 5px 12px; }
.ateco-blog .bl-lead-main h2 { color: #fff; font-size: clamp(24px, 2.9vw, 34px); margin: 14px 0 10px; line-height: 1.12; letter-spacing: -.01em; }
.ateco-blog .bl-lead-main p { color: rgba(255, 255, 255, .86); font-size: 15.5px; line-height: 1.55; margin: 0 0 14px; }
.ateco-blog .bl-meta-light { display: flex; align-items: center; gap: 9px; font-size: 13px; color: rgba(255, 255, 255, .82); flex-wrap: wrap; }
.ateco-blog .bl-lead-side { display: grid; grid-template-rows: 1fr 1fr 1fr; gap: 18px; }
.ateco-blog .bl-mini { display: grid; grid-template-columns: 130px 1fr; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--neutral-200); border-radius: 16px; overflow: hidden; transition: box-shadow .18s, transform .18s; }
.ateco-blog .bl-mini:hover { box-shadow: 0 14px 30px rgba(15, 26, 20, .10); transform: translateY(-2px); }
.ateco-blog .bl-mini-img { background-size: cover; background-position: center; background-color: var(--neutral-200); min-height: 110px; }
.ateco-blog .bl-mini .in { padding: 16px 18px; display: flex; flex-direction: column; justify-content: center; gap: 8px; align-items: flex-start; }
.ateco-blog .bl-mini h3 { font-size: 16px; color: var(--s-title); margin: 0; line-height: 1.3; }

/* topics (categories) */
.ateco-blog .bl-topics { margin: 40px 0 0; }
.ateco-blog .bl-topics-h { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--s-ink-soft); font-weight: 700; margin: 0 0 16px; }
.ateco-blog .bl-topics-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.ateco-blog .bl-topic { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; background: #fff; border: 1px solid var(--neutral-200); border-radius: 14px; padding: 18px; text-decoration: none; color: inherit; transition: all .18s; }
.ateco-blog .bl-topic:hover { border-color: var(--brand-accent); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(15, 26, 20, .08); }
.ateco-blog .bl-topic-ic { width: 42px; height: 42px; border-radius: 11px; background: rgba(232, 96, 18, .12); color: var(--brand-accent); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.ateco-blog .bl-topic b { font-size: 15px; color: var(--s-title); }
.ateco-blog .bl-topic span { font-size: 12.5px; color: var(--s-ink-soft); }

/* body = feed + sticky sidebar */
.ateco-blog .bl-body { display: grid; grid-template-columns: 1fr 320px; gap: 50px; margin-top: 48px; align-items: start; }
.ateco-blog .bl-main { min-width: 0; }
.ateco-blog .bl-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 26px; padding-bottom: 16px; border-bottom: 1px solid var(--neutral-200); flex-wrap: wrap; }
.ateco-blog .bl-toolbar h2 { font-size: 21px; color: var(--s-title); margin: 0; letter-spacing: -.01em; }
.ateco-blog .bl-pills { display: flex; gap: 7px; flex-wrap: wrap; }
.ateco-blog .bl-pill { border: 1px solid var(--neutral-200); background: #fff; border-radius: 999px; padding: 7px 14px; font: 600 13px 'Poppins'; color: var(--s-ink); cursor: pointer; text-decoration: none; transition: all .15s; }
.ateco-blog .bl-pill:hover { border-color: var(--brand-accent); color: var(--brand-accent); }
.ateco-blog .bl-pill.on { background: var(--brand-accent); border-color: var(--brand-accent); color: #fff; }
.ateco-blog .bl-feed { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 26px; }
.ateco-blog .bl-fcard { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.ateco-blog .bl-fcard-img { aspect-ratio: 16/10; border-radius: 14px; background-size: cover; background-position: center; background-color: var(--neutral-200); transition: transform .25s ease; }
.ateco-blog .bl-fcard:hover .bl-fcard-img { transform: scale(1.025); }
.ateco-blog .bl-fcard-bd { padding: 15px 2px 0; display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.ateco-blog .bl-fcard h3 { font-size: 17px; color: var(--s-title); margin: 0; line-height: 1.3; }
.ateco-blog .bl-fcard p { font-size: 14px; line-height: 1.5; color: var(--s-ink-soft); margin: 0; }

/* sidebar */
.ateco-blog .bl-side { display: grid; gap: 22px; position: sticky; top: 92px; }
.ateco-blog .bl-w { background: #fff; border: 1px solid var(--neutral-200); border-radius: 16px; padding: 22px; }
.ateco-blog .bl-w h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--s-ink-soft); margin: 0 0 14px; }
.ateco-blog .bl-catlist a { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--neutral-200); font-size: 14.5px; color: var(--s-ink); text-decoration: none; font-weight: 500; }
.ateco-blog .bl-catlist a:last-child { border-bottom: 0; }
.ateco-blog .bl-catlist a:hover { color: var(--brand-accent); }
.ateco-blog .bl-catlist span { font-size: 12px; color: var(--s-ink-soft); background: var(--surface-cream); border-radius: 999px; padding: 2px 9px; }
.ateco-blog .bl-w--cta { background: var(--surface-cream); }
.ateco-blog .bl-w--cta h3 { font-size: 17px; color: var(--s-title); margin: 8px 0 6px; }
.ateco-blog .bl-w--cta p { font-size: 14px; color: var(--s-ink-soft); line-height: 1.5; margin: 0 0 14px; }

/* "most read" sidebar list (pk-blpop, sidebar variant) */
.ateco-blog .pk-blpop { display: grid; gap: 12px; }
.ateco-blog .pk-bl-cat { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--brand-accent); display: inline-flex; align-items: center; gap: 7px; }
.ateco-blog .bl-pop-side .pk-blpop-i { display: grid; grid-template-columns: 26px 1fr; gap: 16px; align-items: center; border: 0; border-radius: 0; padding: 10px 0; border-bottom: 1px solid var(--neutral-200); box-shadow: none; text-decoration: none; color: inherit; }
.ateco-blog .bl-pop-side .pk-blpop-i:last-child { border-bottom: 0; }
.ateco-blog .pk-blpop-n { font-size: 26px; font-weight: 800; color: rgba(232, 96, 18, .4); text-align: center; }
.ateco-blog .bl-pop-side .pk-blpop-i h3 { font-size: 14.5px; color: var(--s-title); margin: 0 0 4px; line-height: 1.3; }
.ateco-blog .bl-pop-side .pk-blpop-i:hover h3 { color: var(--brand-accent); }

/* shared card meta (avatar + name + dot separators) */
.ateco-blog .pk-bl-tag { display: inline-block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--brand-accent); background: rgba(232, 96, 18, .1); border-radius: 999px; padding: 4px 11px; }
.ateco-blog .pk-bl-meta { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--s-ink-soft); flex-wrap: wrap; }
.ateco-blog .pk-bl-meta b { color: var(--s-ink); }
.ateco-blog .pk-bl-meta--lg { font-size: 14px; margin-top: 6px; }
.ateco-blog .pk-bl-av { width: 30px; height: 30px; border-radius: 999px; background-size: cover; background-position: center; background-color: var(--neutral-200); flex: none; }
.ateco-blog .pk-bl-meta--lg .pk-bl-av { width: 40px; height: 40px; }
.ateco-blog .pk-bl-dot { width: 3px; height: 3px; border-radius: 999px; background: currentColor; opacity: .4; }
.ateco-blog .bl-feed .pk-bl-av, .ateco-blog .bl-mini .pk-bl-av { width: 22px; height: 22px; }
.ateco-blog .bl-feed .pk-bl-meta, .ateco-blog .bl-mini .pk-bl-meta { gap: 7px; font-size: 12.5px; }

/* pagination (paginate_links output is wrapped in .pk-blpag) */
.ateco-blog .pk-blpag { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 44px; }
.ateco-blog .pk-blpag .page-numbers { min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--neutral-200); background: #fff; border-radius: 11px; font: 600 14px 'Poppins'; color: var(--s-ink); text-decoration: none; transition: all .15s; padding: 0 12px; }
.ateco-blog .pk-blpag a.page-numbers:hover { border-color: var(--brand-accent); color: var(--brand-accent); }
.ateco-blog .pk-blpag .page-numbers.current { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.ateco-blog .pk-blpag .page-numbers.dots { border: 0; background: transparent; color: var(--s-ink-soft); min-width: auto; }

/* newsletter band (page closing) */
.ateco-blog .bl-news-band { background: var(--brand-primary); color: #fff; margin-top: 8px; }
.ateco-blog .bl-news-band .shell { padding-top: 48px; padding-bottom: 48px; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.ateco-blog .bl-news-band .tx { max-width: 46ch; }
.ateco-blog .bl-news-band .kicker { color: var(--brand-accent-light); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; display: inline-flex; gap: 7px; align-items: center; }
.ateco-blog .bl-news-band .kicker [data-icon] { color: var(--brand-accent-light); }
.ateco-blog .bl-news-band h2 { color: #fff; font-size: clamp(24px, 2.8vw, 32px); margin: 10px 0 8px; letter-spacing: -.01em; }
.ateco-blog .bl-news-band p { color: rgba(255, 255, 255, .8); margin: 0; font-size: 15px; line-height: 1.55; }
.ateco-blog .bl-news-band-form { display: flex; gap: 10px; flex: 1; min-width: 300px; max-width: 480px; }
.ateco-blog .bl-news-band-form input { flex: 1; border: 0; border-radius: 12px; padding: 15px 18px; font: 400 15px 'Poppins'; outline: 0; color: var(--neutral-ink); }

/* ============================================================
   4 · ARTICLE CHROME — from blog-article.html
   (the editorial body itself is .zprose, see section 5)
   ============================================================ */
.ateco-blog .bl-progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; background: rgba(0, 0, 0, .06); z-index: 1000; }
.ateco-blog .bl-progress-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brand-accent), var(--brand-accent-light)); }

/* article header */
.ateco-blog .pk-blah { max-width: 860px; margin: 0 auto; }
.ateco-blog .pk-bl-crumb { font-size: 13px; color: var(--s-ink-soft); margin-bottom: 16px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ateco-blog .pk-bl-crumb a { color: var(--s-ink-soft); text-decoration: none; }
.ateco-blog .pk-bl-crumb a:hover { color: var(--brand-accent); }
.ateco-blog .pk-bl-crumb [data-icon] { font-size: .8em; opacity: .5; }
.ateco-blog .pk-blah h1 { font-size: clamp(28px, 4vw, 46px); line-height: 1.08; color: var(--s-title); letter-spacing: -.02em; margin: 12px 0 18px; }
.ateco-blog .pk-blah-cover { aspect-ratio: 16/8; border-radius: 20px; background-size: cover; background-position: center; background-color: var(--neutral-200); margin-top: 26px; box-shadow: 0 18px 40px rgba(15, 26, 20, .14); }

/* article grid = TOC + prose */
.ateco-blog .bl-art { display: grid; grid-template-columns: 230px 1fr; gap: 56px; align-items: start; max-width: 1000px; margin: 0 auto; }
.ateco-blog .pk-bltoc { background: #fff; border: 1px solid var(--neutral-200); border-radius: 14px; padding: 20px; }
.ateco-blog .bl-art-toc { position: sticky; top: 96px; }
.ateco-blog .pk-bltoc b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--s-ink-soft); margin-bottom: 12px; }
.ateco-blog .pk-bltoc a { display: block; font-size: 14px; color: var(--s-ink-soft); text-decoration: none; padding: 7px 0 7px 14px; border-left: 2px solid var(--neutral-200); transition: all .15s; }
.ateco-blog .pk-bltoc a.on, .ateco-blog .pk-bltoc a:hover { color: var(--brand-accent); border-color: var(--brand-accent); }
.ateco-blog .pk-bltoc--empty { display: none; }

/* tags row */
.ateco-blog .pk-bltags { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 34px 0 0; padding-top: 24px; border-top: 1px solid var(--neutral-200); }
.ateco-blog .pk-bltags-lbl { font-size: 13px; color: var(--s-ink-soft); font-weight: 600; }
.ateco-blog .pk-bltags a { font-size: 13px; color: var(--s-ink); background: var(--surface-cream); border: 1px solid var(--neutral-200); border-radius: 999px; padding: 7px 13px; text-decoration: none; transition: all .15s; }
.ateco-blog .pk-bltags a:hover { border-color: var(--brand-accent); color: var(--brand-accent); }

/* share row */
.ateco-blog .bl-share-inline { text-align: left; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--neutral-200); }
.ateco-blog .pk-blshare-lbl { display: block; font-size: 15px; font-weight: 600; color: var(--s-title); margin-bottom: 14px; }
.ateco-blog .pk-blshare-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.ateco-blog .pk-shb { display: inline-flex; align-items: center; gap: 9px; border-radius: 11px; padding: 10px 16px; font: 600 13px 'Poppins'; text-decoration: none; color: #fff; transition: opacity .15s; }
.ateco-blog .pk-shb:hover { opacity: .88; }
.ateco-blog .pk-shb--fb { background: #1877f2; }
.ateco-blog .pk-shb--x { background: #111; }
.ateco-blog .pk-shb--li { background: #0a66c2; }
.ateco-blog .pk-shb--cp { background: var(--brand-primary); }

/* author block (rendered outside .zprose, article footer) */
.ateco-blog .pk-blauthor { display: grid; grid-template-columns: 96px 1fr; gap: 24px; align-items: center; max-width: 760px; margin: 0 auto; background: #fff; border: 1px solid var(--neutral-200); border-radius: 18px; padding: 26px; }
.ateco-blog .pk-blauthor-av { width: 96px; height: 96px; border-radius: 18px; background-size: cover; background-position: center; background-color: var(--neutral-200); overflow: hidden; }
.ateco-blog .pk-blauthor-av img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 18px; }
.ateco-blog .pk-blauthor-bd h3 { font-size: 20px; color: var(--s-title); margin: 6px 0 8px; }
.ateco-blog .pk-blauthor-bd p { font-size: 14.5px; line-height: 1.6; color: var(--s-ink-soft); margin: 0 0 10px; }
.ateco-blog .pk-blauthor-links a { color: var(--brand-accent); text-decoration: none; font-size: 13.5px; font-weight: 600; }
.ateco-blog .pk-blauthor-links a:hover { text-decoration: underline; }

/* related + prev/next */
.ateco-blog .bl-h2 { font-size: clamp(22px, 2.8vw, 30px); color: var(--s-title); margin: 0; letter-spacing: -.01em; }
.ateco-blog .bl-center { text-align: center; }
.ateco-blog .pk-blrel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ateco-blog .pk-blrelcard { background: #fff; border: 1px solid var(--neutral-200); border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; padding-bottom: 18px; transition: box-shadow .18s, transform .18s; }
.ateco-blog .pk-blrelcard:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15, 26, 20, .10); }
.ateco-blog .pk-blrelcard-img { aspect-ratio: 16/9; background-size: cover; background-position: center; background-color: var(--neutral-200); margin-bottom: 14px; }
.ateco-blog .pk-blrelcard .pk-bl-tag { margin: 0 16px; }
.ateco-blog .pk-blrelcard h3 { font-size: 15.5px; color: var(--s-title); margin: 10px 16px 0; line-height: 1.3; }
.ateco-blog .pk-blnav { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ateco-blog .pk-blnav-i { background: #fff; border: 1px solid var(--neutral-200); border-radius: 14px; padding: 20px 22px; text-decoration: none; color: inherit; transition: box-shadow .18s, border-color .18s; }
.ateco-blog .pk-blnav-i:hover { box-shadow: 0 12px 26px rgba(15, 26, 20, .08); border-color: var(--brand-accent); }
.ateco-blog .pk-blnav-next { text-align: right; }
.ateco-blog .pk-blnav-dir { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--brand-accent); display: flex; gap: 7px; align-items: center; }
.ateco-blog .pk-blnav-prev .pk-blnav-dir [data-icon] { transform: rotate(180deg); }
.ateco-blog .pk-blnav-next .pk-blnav-dir { justify-content: flex-end; }
.ateco-blog .pk-blnav-i b { display: block; margin-top: 8px; font-size: 16px; color: var(--s-title); line-height: 1.3; }

/* comments (WordPress comment list, restyled) */
.ateco-blog .pk-blcom { max-width: 760px; margin: 0 auto; }
.ateco-blog .pk-blcom .commentlist, .ateco-blog .pk-blcom ol.comment-list { list-style: none; margin: 0; padding: 0; }
.ateco-blog .pk-blcom .comment-body { background: #fff; border: 1px solid var(--neutral-200); border-radius: 16px; padding: 20px 22px; margin-bottom: 16px; }
.ateco-blog .pk-blcom .comment-author { display: flex; align-items: center; gap: 12px; }
.ateco-blog .pk-blcom .comment-author cite { font-style: normal; font-weight: 600; color: var(--s-title); }
.ateco-blog .pk-blcom .comment-author img { border-radius: 999px; }
.ateco-blog .pk-blcom .comment-meta { font-size: 13px; color: var(--s-ink-soft); margin: 4px 0 8px; }
.ateco-blog .pk-blcom .comment-meta a { color: var(--s-ink-soft); text-decoration: none; }
.ateco-blog .pk-blcom .comment-content p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--s-ink-soft); }
.ateco-blog .pk-blcom .reply a { font-size: 13px; font-weight: 600; color: var(--brand-accent); text-decoration: none; }
.ateco-blog .pk-blcom .comment-respond { background: #fff; border: 1px solid var(--neutral-200); border-radius: 16px; padding: 22px; margin-top: 8px; }
.ateco-blog .pk-blcom .comment-respond .comment-reply-title { font-size: 18px; color: var(--s-title); margin: 0 0 14px; }
.ateco-blog .pk-blcom input[type="text"], .ateco-blog .pk-blcom input[type="email"], .ateco-blog .pk-blcom input[type="url"], .ateco-blog .pk-blcom textarea { width: 100%; border: 1px solid var(--neutral-200); border-radius: 10px; padding: 12px 14px; font: 400 15px 'Poppins'; resize: vertical; outline: 0; color: var(--neutral-ink); margin-bottom: 10px; }
.ateco-blog .pk-blcom input:focus, .ateco-blog .pk-blcom textarea:focus { border-color: var(--brand-accent); box-shadow: 0 0 0 3px rgba(232, 96, 18, .14); }
.ateco-blog .pk-blcom .form-submit .submit { background: var(--brand-accent); color: #fff; border: 0; border-radius: 999px; padding: 12px 22px; font: 600 14px 'Poppins'; cursor: pointer; }
.ateco-blog .pk-blcom .form-submit .submit:hover { background: var(--brand-accent-hover); }

/* ============================================================
   5 · .zprose — EDITORIAL STYLING OF NATIVE GUTENBERG CONTENT
   ------------------------------------------------------------
   These rules deliberately target the markup that
   the_content() / Gutenberg core blocks emit:
     - core/heading  -> <h2 class="wp-block-heading">
     - core/paragraph-> <p>
     - core/list     -> <ul|ol class="wp-block-list"><li>
     - core/quote    -> <blockquote class="wp-block-quote">
     - core/pullquote-> <figure class="wp-block-pullquote">
     - core/image    -> <figure class="wp-block-image"><img>
     - drop cap      -> <p class="has-drop-cap">
     - callout group -> <div class="wp-block-group is-style-callout">
                        (or any element with .zcallout)
   Nothing here assumes custom markup: an article authored
   normally in Gutenberg gets the editorial look for free.
   The editor stylesheet (ateco-blog-editor.css) mirrors these
   rules so the back-office matches the front (WYSIWYG).
   ============================================================ */
.ateco-blog .zprose { max-width: 720px; color: var(--s-ink-soft); }

/* paragraphs — reading size ~18px, generous leading */
.ateco-blog .zprose p { font-size: 18px; line-height: 1.75; color: var(--s-ink-soft); margin: 0 0 20px; }

/* optional intro lead (apply the "Lead/Chapô" paragraph style,
   or wrap the first paragraph in .is-style-lead in Gutenberg) */
.ateco-blog .zprose p.is-style-lead,
.ateco-blog .zprose .is-style-lead > p { font-size: 20px; line-height: 1.6; color: var(--s-ink); font-weight: 500; margin: 0 0 22px; }

/* headings — clear hierarchy + spacing above/below.
   Targets both bare tags and Gutenberg's .wp-block-heading. */
.ateco-blog .zprose h2,
.ateco-blog .zprose .wp-block-heading.wp-block-heading { /* doubled class lifts specificity over Porto */
  font-size: 26px; color: var(--s-title); font-weight: 700;
  margin: 36px 0 14px; letter-spacing: -.01em; line-height: 1.2;
  scroll-margin-top: 96px;
}
.ateco-blog .zprose h3 { font-size: 21px; color: var(--s-title); font-weight: 700; margin: 28px 0 10px; line-height: 1.25; scroll-margin-top: 96px; }
.ateco-blog .zprose h4 { font-size: 18px; color: var(--s-title); font-weight: 600; margin: 24px 0 8px; line-height: 1.3; scroll-margin-top: 96px; }
.ateco-blog .zprose h5, .ateco-blog .zprose h6 { font-size: 15px; color: var(--brand-primary); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin: 22px 0 8px; }
.ateco-blog .zprose :is(h2, h3, h4):first-child { margin-top: 0; }

/* links */
.ateco-blog .zprose a { color: var(--brand-accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: color .15s ease; }
.ateco-blog .zprose a:hover { color: var(--brand-accent-hover); }

/* inline emphasis */
.ateco-blog .zprose strong, .ateco-blog .zprose b { color: var(--s-title); font-weight: 600; }
.ateco-blog .zprose em, .ateco-blog .zprose i { font-style: italic; }
.ateco-blog .zprose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--surface-cream); border: 1px solid var(--neutral-200); border-radius: 6px; padding: 1px 6px; color: var(--brand-primary); }

/* lists — bullets / numbers in brand accent.
   Targets bare ul/ol and Gutenberg's .wp-block-list. */
.ateco-blog .zprose ul,
.ateco-blog .zprose ol { margin: 0 0 20px; padding-left: 0; }
.ateco-blog .zprose ul.wp-block-list,
.ateco-blog .zprose ul:not([class]) { list-style: none; display: grid; gap: 11px; }
.ateco-blog .zprose ul.wp-block-list li,
.ateco-blog .zprose ul:not([class]) li { position: relative; padding-left: 26px; font-size: 17px; line-height: 1.6; color: var(--s-ink-soft); }
.ateco-blog .zprose ul.wp-block-list li::before,
.ateco-blog .zprose ul:not([class]) li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 8px; height: 8px; border-radius: 999px; background: var(--brand-accent); }
.ateco-blog .zprose ol { list-style: decimal; padding-left: 24px; display: grid; gap: 9px; }
.ateco-blog .zprose ol li { font-size: 17px; line-height: 1.6; color: var(--s-ink-soft); padding-left: 4px; }
.ateco-blog .zprose ol li::marker { color: var(--brand-accent); font-weight: 700; }
.ateco-blog .zprose li > ul, .ateco-blog .zprose li > ol { margin: 11px 0 0; }

/* drop cap — Gutenberg's native "has-drop-cap" toggle */
.ateco-blog .zprose p.has-drop-cap:first-letter,
.ateco-blog .zprose p.dropcap:first-letter { float: left; font-size: 62px; line-height: .78; font-weight: 800; color: var(--brand-accent); margin: 8px 12px 0 0; text-transform: uppercase; }

/* citations — core/quote (.wp-block-quote) + bare blockquote.
   This is the project's standard quote block: accent bar,
   italic, brand colours. */
.ateco-blog .zprose blockquote,
.ateco-blog .zprose .wp-block-quote { margin: 28px 0; padding: 6px 0 6px 26px; border-left: 3px solid var(--brand-accent); border-radius: 0; font-style: italic; }
.ateco-blog .zprose blockquote p,
.ateco-blog .zprose .wp-block-quote p { font-size: 22px; line-height: 1.45; font-weight: 600; color: var(--s-title); margin: 0 0 8px; }
.ateco-blog .zprose blockquote p:last-child,
.ateco-blog .zprose .wp-block-quote p:last-child { margin-bottom: 0; }
.ateco-blog .zprose .wp-block-quote cite,
.ateco-blog .zprose blockquote cite { display: block; margin-top: 10px; font-size: 14px; font-style: normal; font-weight: 600; color: var(--brand-accent); }

/* pull quote — core/pullquote (.wp-block-pullquote) */
.ateco-blog .zprose .wp-block-pullquote { margin: 32px 0; padding: 26px 0; border-top: 3px solid var(--brand-accent); border-bottom: 3px solid var(--brand-accent); text-align: center; font-style: normal; }
.ateco-blog .zprose .wp-block-pullquote p { font-size: clamp(20px, 2.4vw, 26px); line-height: 1.4; font-weight: 700; color: var(--brand-primary); margin: 0; }
.ateco-blog .zprose .wp-block-pullquote cite { display: block; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--brand-accent); text-transform: none; }

/* images / figures — core/image + bare figure */
.ateco-blog .zprose figure,
.ateco-blog .zprose .wp-block-image { margin: 26px 0; }
.ateco-blog .zprose figure img,
.ateco-blog .zprose .wp-block-image img { display: block; width: 100%; height: auto; border-radius: 14px; }
.ateco-blog .zprose figcaption,
.ateco-blog .zprose .wp-block-image figcaption { font-size: 13px; color: var(--s-ink-soft); padding: 10px 2px 0; text-align: left; }
/* alignment variants Gutenberg emits */
.ateco-blog .zprose .wp-block-image.aligncenter { text-align: center; }
.ateco-blog .zprose .alignwide { margin-left: -60px; margin-right: -60px; max-width: none; }
.ateco-blog .zprose .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; }

/* separators / hr — core/separator */
.ateco-blog .zprose hr,
.ateco-blog .zprose .wp-block-separator { border: 0; height: 1px; background: var(--neutral-200); margin: 36px 0; }

/* tables — core/table */
.ateco-blog .zprose .wp-block-table table, .ateco-blog .zprose table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 15px; }
.ateco-blog .zprose th, .ateco-blog .zprose td { border: 1px solid var(--neutral-200); padding: 10px 14px; text-align: left; }
.ateco-blog .zprose th { background: var(--surface-cream); color: var(--s-title); font-weight: 600; }

/* code blocks — core/code, core/preformatted */
.ateco-blog .zprose .wp-block-code, .ateco-blog .zprose pre { background: var(--neutral-ink); color: #e9edee; border-radius: 12px; padding: 18px 20px; overflow: auto; font-size: 14px; margin: 0 0 20px; }
.ateco-blog .zprose pre code { background: transparent; border: 0; color: inherit; padding: 0; }

/* buttons block — core/buttons */
.ateco-blog .zprose .wp-block-button__link { display: inline-flex; align-items: center; gap: 8px; background: var(--brand-accent); color: #fff; border-radius: 999px; padding: 12px 22px; font-weight: 600; text-decoration: none; }
.ateco-blog .zprose .wp-block-button__link:hover { background: var(--brand-accent-hover); }

/* ---------- CALLOUT "à savoir / conseil" ----------
   In Gutenberg: a Group block with the "Encadré conseil"
   style (is-style-callout) OR any element given .zcallout.
   Authors can also add an optional .zcallout__title heading. */
.ateco-blog .zprose .is-style-callout,
.ateco-blog .zprose .zcallout {
  margin: 26px 0; border-radius: 14px; padding: 20px 22px;
  border: 1px solid rgba(232, 96, 18, .22);
  background: rgba(232, 96, 18, .06);
}
.ateco-blog .zprose .is-style-callout > *:first-child,
.ateco-blog .zprose .zcallout > *:first-child { margin-top: 0; }
.ateco-blog .zprose .is-style-callout > *:last-child,
.ateco-blog .zprose .zcallout > *:last-child { margin-bottom: 0; }
.ateco-blog .zprose .is-style-callout p,
.ateco-blog .zprose .zcallout p { font-size: 14.5px; line-height: 1.6; color: var(--s-ink-soft); }
/* the first heading inside a callout reads as the "title" */
.ateco-blog .zprose .is-style-callout :is(h2, h3, h4, h5),
.ateco-blog .zprose .zcallout :is(h2, h3, h4, h5),
.ateco-blog .zprose .zcallout__title {
  font-size: 14px !important; color: var(--brand-accent) !important;
  font-weight: 700; text-transform: none; letter-spacing: 0;
  margin: 0 0 4px !important; scroll-margin-top: 0;
}

/* ---------- INLINE CTA (Group with .is-style-inline-cta) ---------- */
.ateco-blog .zprose .is-style-inline-cta,
.ateco-blog .zprose .zcta {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 28px 0;
  background: var(--surface-cream); border: 1px solid var(--neutral-200);
  border-left: 4px solid var(--brand-accent); border-radius: 0 16px 16px 0; padding: 22px 26px;
}

/* ============================================================
   6 · RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .ateco-blog .bl-body { grid-template-columns: 1fr; }
  .ateco-blog .bl-side { position: static; grid-template-columns: 1fr 1fr; }
  .ateco-blog .bl-lead { grid-template-columns: 1fr; }
  .ateco-blog .bl-lead-side { grid-template-rows: none; grid-template-columns: repeat(3, 1fr); }
  .ateco-blog .bl-lead-main { min-height: 380px; }
}
@media (max-width: 900px) {
  .ateco-blog .bl-art, .ateco-blog .pk-blauthor, .ateco-blog .pk-blnav { grid-template-columns: 1fr; gap: 26px; }
  .ateco-blog .pk-blrel { grid-template-columns: 1fr 1fr; }
  .ateco-blog .bl-art-toc { position: static; }
  .ateco-blog .bl-topics-grid { grid-template-columns: repeat(3, 1fr); }
  .ateco-blog .bl-news-band .shell { flex-direction: column; align-items: flex-start; }
  .ateco-blog .zprose .alignwide { margin-left: 0; margin-right: 0; }
}
@media (max-width: 640px) {
  .ateco-blog .bl-feed { grid-template-columns: 1fr; }
  .ateco-blog .bl-side { grid-template-columns: 1fr; }
  .ateco-blog .bl-lead-side { grid-template-columns: 1fr; }
  .ateco-blog .bl-mini { grid-template-columns: 120px 1fr; }
  .ateco-blog .bl-mast { align-items: flex-start; }
  .ateco-blog .bl-mast-search { min-width: 0; width: 100%; }
  .ateco-blog .pk-blrel { grid-template-columns: 1fr; }
  .ateco-blog .bl-news-band-form { min-width: 0; width: 100%; }
}
@media (max-width: 560px) {
  .ateco-blog .bl-topics-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   COMPAT THÈME PORTO / ELEMENTOR (vues blog uniquement)
   Porto rend les articles dans un layout « boxed » + .col-lg-9
   + sa propre sidebar droite (.porto-blog-sidebar), et une barre
   de titre / fil d'Ariane (.page-top, .breadcrumbs-wrap) qui répète
   le titre de l'article. On rend la pleine largeur au gabarit Ateco
   (qui a son propre sommaire) et on retire ces doublons. Sélecteurs
   inertes sur un thème non-Porto (les classes n'existent pas).
   ============================================================ */
body.single-post .porto-blog-sidebar,
body.blog .porto-blog-sidebar,
body.archive .porto-blog-sidebar { display: none !important; }

body.single-post .main-content.col-lg-9,
body.blog .main-content.col-lg-9,
body.archive .main-content.col-lg-9 { -ms-flex: 0 0 100% !important; flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; }

body.single-post .page-wrapper .container,
body.blog .page-wrapper .container,
body.archive .page-wrapper .container { max-width: 1320px !important; }

body.single-post .page-top,
body.blog .page-top,
body.archive .page-top,
body.single-post .breadcrumbs-wrap,
body.blog .breadcrumbs-wrap,
body.archive .breadcrumbs-wrap { display: none !important; }

/* ============================================================
   HÉRO D'ARTICLE — bandeau crème (rend « designed » même sans
   image à la une ; grand cover arrondi si une image est définie).
   ============================================================ */
.ateco-blog .bl-hero { background: var(--surface-cream); border-bottom: 1px solid var(--s-border); padding-top: 54px; padding-bottom: 48px; }
.ateco-blog .bl-hero .pk-blah { max-width: 880px; }
.ateco-blog .bl-hero .pk-bl-tag { margin-bottom: 2px; }
.ateco-blog .bl-hero .pk-blah h1 { font-size: clamp(30px, 4.4vw, 50px); margin-top: 14px; margin-bottom: 16px; }
.ateco-blog .bl-hero .pk-blah-cover { aspect-ratio: 16/7; margin-top: 30px; box-shadow: 0 22px 50px rgba(15, 26, 20, .16); }
/* la 1re section de contenu colle au bandeau : on remet de l'air en haut */
.ateco-blog .bl-hero + .section { padding-top: 44px; }

/* ============================================================
   COMPAT PORTO — masque le « page top » Elementor/Porto (bandeau
   orange « Our Blog » vide/redondant) sur les vues blog. C'est le
   .porto-block enfant DIRECT de .page-wrapper ; le footer
   (.footer > .porto-block) n'est donc pas affecté. Notre héro
   d'article remplace ce page-top.
   ============================================================ */
body.single-post .page-wrapper > .porto-block,
body.blog .page-wrapper > .porto-block,
body.archive .page-wrapper > .porto-block { display: none !important; }


/* ============================================================
   REDESIGN « zones-inspired » (juin 2026)
   Hero immersif pleine largeur (la cover devient le fond de la
   section, posee en background-image par le template) + surfaces
   a plat, sans cadres ni cartes flottantes. Reprend le langage
   visuel du plugin ateco-zones. Bloc en fin de fichier : prevaut
   par l'ordre de cascade.
   ============================================================ */

/* Espacements resserres entre sections */
.ateco-blog .section { padding: clamp(28px, 3.6vw, 48px) 0; }
.ateco-blog .bl-hero + .section { padding-top: clamp(28px, 3.2vw, 44px); }

/* Porto pousse le contenu de 20px : on colle le hero au header */
body.single-post .main-content.col-lg-9 { padding-top: 0 !important; }

/* --- Hero immersif full-bleed --- */
.ateco-blog .bl-hero {
  position: relative; overflow: hidden; border-bottom: 0; padding: 0;
  background-color: var(--brand-primary);
  background-size: cover; background-position: center;
  width: 100vw; margin-left: calc(50% - 50vw);
  min-height: clamp(360px, 46vw, 520px);
  display: flex; align-items: flex-end;
  --s-title: #fff; --s-ink: rgba(255, 255, 255, .92);
  --s-ink-soft: rgba(255, 255, 255, .82); --s-border: rgba(255, 255, 255, .4);
}
.ateco-blog .bl-hero--has-cover::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(18, 26, 28, .30) 0%, rgba(18, 26, 28, .55) 48%, rgba(18, 26, 28, .86) 100%);
}
.ateco-blog .bl-hero .section-inner {
  position: relative; z-index: 2; width: 100%; max-width: 1180px;
  padding: clamp(46px, 6.5vw, 88px) clamp(20px, 5vw, 44px) clamp(38px, 4.5vw, 56px);
}
.ateco-blog .bl-hero .pk-blah { max-width: 860px; margin: 0; }
.ateco-blog .bl-hero .pk-blah h1 { color: #fff; margin-top: 14px; }
.ateco-blog .bl-hero .pk-bl-crumb,
.ateco-blog .bl-hero .pk-bl-crumb a { color: rgba(255, 255, 255, .86); }
.ateco-blog .bl-hero .pk-bl-meta,
.ateco-blog .bl-hero .pk-bl-meta span,
.ateco-blog .bl-hero .pk-bl-meta b { color: rgba(255, 255, 255, .94); }
.ateco-blog .bl-hero .pk-bl-tag { background: var(--brand-accent); color: #fff; }
.ateco-blog .bl-hero .pk-bl-av { border: 2px solid rgba(255, 255, 255, .55); }
.ateco-blog .bl-hero .pk-blah-cover { display: none; }

/* --- Corps : surfaces a plat, plus de cartes encadrees --- */
.ateco-blog .pk-bltoc { background: transparent; border: 0; border-radius: 0; padding: 0; }
.ateco-blog .pk-blauthor { background: transparent; border: 0; border-radius: 0; padding: 0; }
.ateco-blog .pk-blrelcard { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding-bottom: 0; }
.ateco-blog .pk-blrelcard:hover { transform: none; box-shadow: none; }
.ateco-blog .pk-blrelcard-img { border-radius: 12px; }
.ateco-blog .pk-blnav-i { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 18px 2px; border-top: 1px solid var(--neutral-200); }
.ateco-blog .pk-blnav-i:hover { box-shadow: none; }

/* Bandes creme edge-to-edge (auteur / commentaires) */
.ateco-blog .section--cream { width: 100vw; margin-left: calc(50% - 50vw); }
.ateco-blog .section--cream .section-inner { padding-left: clamp(20px, 5vw, 44px); padding-right: clamp(20px, 5vw, 44px); }

/* Colle le hero immersif sous le header Porto (espace de chrome
   structurel ~56px). Scope desktop pour ne pas perturber l'entete
   mobile. */
@media (min-width: 992px) {
  .ateco-blog .bl-hero { margin-top: -56px; }
}

/* ============================================================
   CORRECTIFS (juin 2026) — boite grise Porto + cartes showcase
   Supersede l'aplatissement « surfaces a plat » plus haut : la
   plainte « cadres » visait les BOITES GRISES de Porto (.section
   heritait #f4f4f4 + marge 30px + bordure-haute 5px grise), PAS les
   cartes subtiles du showcase. On neutralise Porto ET on restaure les
   cartes (TOC/auteur/related/prev-next) + lettrine auto + encart
   .pk-callout + FAQ <details>. Meme footgun que le plugin ateco-zones.
   ============================================================ */

/* 1. Neutralise la collision Porto sur .section */
.ateco-blog .section { background: transparent; margin: 0; border-top: 0; }
.ateco-blog .section--cream { background: var(--surface-cream); margin-left: calc(50% - 50vw); }
.ateco-blog .section--slate { background: var(--brand-primary); }
.ateco-blog .bl-hero { background-color: var(--brand-primary); margin-left: calc(50% - 50vw); }

/* 2. Restaure les cartes subtiles du showcase */
.ateco-blog .pk-bltoc { background: #fff; border: 1px solid var(--neutral-200); border-radius: 14px; padding: 20px; }
.ateco-blog .pk-blauthor { background: #fff; border: 1px solid var(--neutral-200); border-radius: 18px; padding: 26px; }
.ateco-blog .pk-blrelcard { background: #fff; border: 1px solid var(--neutral-200); border-radius: 14px; padding-bottom: 18px; overflow: hidden; }
.ateco-blog .pk-blrelcard:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15, 26, 20, .10); }
.ateco-blog .pk-blrelcard-img { border-radius: 0; margin-bottom: 14px; }
.ateco-blog .pk-blnav-i { background: #fff; border: 1px solid var(--neutral-200); border-radius: 14px; padding: 20px 22px; }
.ateco-blog .pk-blnav-i:hover { box-shadow: 0 12px 26px rgba(15, 26, 20, .08); border-color: var(--brand-accent); }

/* 3. Lettrine auto sur le 1er paragraphe (facon showcase) */
.ateco-blog .zprose > p:first-of-type::first-letter { float: left; font-size: 62px; line-height: .78; font-weight: 800; color: var(--brand-accent); margin: 8px 12px 0 0; }

/* 4. Encart « Bon a savoir » facon showcase (.pk-callout) */
.ateco-blog .zprose .pk-callout { margin: 26px 0; border-radius: 14px; padding: 20px 22px; display: flex; gap: 14px; align-items: flex-start; border: 1px solid rgba(232, 96, 18, .22); background: rgba(232, 96, 18, .06); }
.ateco-blog .zprose .pk-callout-ic { width: 38px; height: 38px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 17px; background: rgba(232, 96, 18, .14); color: var(--brand-accent); }
.ateco-blog .zprose .pk-callout b { display: block; margin-bottom: 4px; font-size: 14px; color: var(--brand-accent); }
.ateco-blog .zprose .pk-callout p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--s-ink-soft); }

/* 5. FAQ = bloc Details Gutenberg en accordeon */
.ateco-blog .zprose .wp-block-details, .ateco-blog .zprose details { margin: 12px 0; border: 1px solid var(--neutral-200); border-radius: 12px; padding: 2px 20px; background: #fff; }
.ateco-blog .zprose .wp-block-details summary, .ateco-blog .zprose details summary { cursor: pointer; font-weight: 600; color: var(--s-title); padding: 15px 0; list-style: none; position: relative; }
.ateco-blog .zprose details summary::-webkit-details-marker { display: none; }
.ateco-blog .zprose details summary::after { content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font-size: 22px; line-height: 1; color: var(--brand-accent); }
.ateco-blog .zprose details[open] summary::after { content: "–"; }
.ateco-blog .zprose details[open] summary { border-bottom: 1px solid var(--neutral-200); }
.ateco-blog .zprose details > *:not(summary) { padding: 12px 0 14px; margin: 0; }

/* 6. Re-colle le hero sous le header (apres le reset margin du point 1) */
@media (min-width: 992px) { .ateco-blog .bl-hero { margin-top: -56px; } }

/* 7. Citation/pull-quote : Porto + core (.is-layout-flow) imposent une
   bordure 5px grise + padding/marge ; on force le style showcase
   (barre gauche orange). !important car le selecteur core gagne. */
.ateco-blog .zprose blockquote.wp-block-quote,
.ateco-blog .zprose .wp-block-quote,
.ateco-blog .zprose blockquote {
  border-left: 3px solid var(--brand-accent) !important;
  border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important;
  padding: 6px 0 6px 26px !important; margin: 28px 0 !important; background: transparent !important;
}

/* ============================================================
   VARIANTES SHOWCASE (juin 2026) — reponse aux retours :
   titres par niveau + air en haut ; TOC hors-boite (Sommaire A) ;
   tableaux designes (.ztable) ; pull-quote .zprose-pull ; encart
   « A retenir » (.zedito-take, Editorial B premium) ; encadrés
   .zcallout--info/--tip (« Bon a savoir » / « conseil de l'artisan »,
   Editorial C) ; FAQ accordeon <details> facon .hc-faq-item (A).
   ============================================================ */
.ateco-blog .zprose h2, .ateco-blog .zprose h2.wp-block-heading.wp-block-heading { font-size: 30px !important; margin: 56px 0 16px !important; line-height: 1.2; }
.ateco-blog .zprose h3, .ateco-blog .zprose h3.wp-block-heading.wp-block-heading { font-size: 21px !important; margin: 40px 0 10px !important; line-height: 1.25; }
.ateco-blog .zprose h4, .ateco-blog .zprose h4.wp-block-heading.wp-block-heading { font-size: 18px !important; margin: 32px 0 8px !important; }
.ateco-blog .zprose :is(h2, h3, h4):first-child { margin-top: 0 !important; }
.ateco-blog .pk-bltoc { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; }
.ateco-blog .zprose .wp-block-table { border: 1px solid var(--neutral-200); border-radius: 14px; overflow: hidden; margin: 26px 0; }
.ateco-blog .zprose .wp-block-table table, .ateco-blog .zprose table { width: 100%; border-collapse: collapse; background: #fff; margin: 0; font-size: 14px; }
.ateco-blog .zprose th, .ateco-blog .zprose thead td { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--neutral-400); font-weight: 700; padding: 14px 20px; background: var(--surface-cream); border: 0 !important; border-bottom: 1px solid var(--neutral-200) !important; }
.ateco-blog .zprose table tr:first-child td { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--neutral-400); font-weight: 700; padding: 14px 20px; background: var(--surface-cream); }
.ateco-blog .zprose td { padding: 15px 20px; border: 0 !important; border-bottom: 1px solid var(--neutral-200) !important; font-size: 14px; color: var(--neutral-600); }
.ateco-blog .zprose tbody tr:last-child td { border-bottom: 0 !important; }
.ateco-blog .zprose tbody tr:hover { background: var(--surface-cream); }
.ateco-blog .zprose .wp-block-quote, .ateco-blog .zprose blockquote { font-style: normal !important; }
.ateco-blog .zprose .wp-block-quote p, .ateco-blog .zprose blockquote p { font-size: 23px; font-style: normal; }
.ateco-blog .zprose .zedito-take { margin: 36px 0; background: var(--surface-cream); border: 1px solid var(--neutral-200); border-radius: 16px; padding: 24px 26px; }
.ateco-blog .zprose .zedito-take h4 { margin: 0 0 14px !important; font-size: 13px !important; text-transform: uppercase; letter-spacing: .6px; color: var(--brand-accent); display: flex; gap: 8px; align-items: center; }
.ateco-blog .zprose .zedito-take ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ateco-blog .zprose .zedito-take li { display: flex; gap: 10px; padding-left: 0; font-size: 15px; color: var(--s-ink); }
.ateco-blog .zprose .zedito-take li::before { display: none; }
.ateco-blog .zprose .zedito-take li i, .ateco-blog .zprose .zedito-take li [data-icon] { color: var(--brand-accent); flex: none; margin-top: 3px; }
.ateco-blog .zprose .zcallout { margin: 26px 0; border-radius: 14px; padding: 20px 22px; display: flex; gap: 14px; border: 1px solid; align-items: flex-start; }
.ateco-blog .zprose .zcallout-ic { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex: none; }
.ateco-blog .zprose .zcallout b { display: block; margin-bottom: 4px; font-size: 14px; }
.ateco-blog .zprose .zcallout p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--s-ink-soft); }
.ateco-blog .zprose .zcallout--info { background: rgba(232, 96, 18, .06); border-color: rgba(232, 96, 18, .22); }
.ateco-blog .zprose .zcallout--info .zcallout-ic { background: rgba(232, 96, 18, .14); color: var(--brand-accent); }
.ateco-blog .zprose .zcallout--info b { color: var(--brand-accent); }
.ateco-blog .zprose .zcallout--tip { background: #fff; border-color: var(--neutral-200); }
.ateco-blog .zprose .zcallout--tip .zcallout-ic { background: var(--brand-primary); color: #fff; }
.ateco-blog .zprose .zcallout--tip b { color: var(--s-title); }
.ateco-blog .zprose .wp-block-details, .ateco-blog .zprose details { border: 0 !important; border-bottom: 1px solid var(--neutral-200) !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; background: transparent !important; }
.ateco-blog .zprose details:first-of-type { border-top: 1px solid var(--neutral-200) !important; }
.ateco-blog .zprose .wp-block-details summary, .ateco-blog .zprose details summary { display: flex !important; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 4px !important; font-size: 17px; font-weight: 600; color: var(--neutral-ink); cursor: pointer; list-style: none; position: static; }
.ateco-blog .zprose details summary:hover { color: var(--brand-accent); }
.ateco-blog .zprose details summary::after { content: "+" !important; position: static !important; top: auto !important; right: auto !important; width: 30px; height: 30px; border-radius: 999px; background: var(--surface-cream); color: var(--brand-accent); display: flex; align-items: center; justify-content: center; font-size: 18px; flex: none; transform: none; transition: transform .25s, background .2s, color .2s; }
.ateco-blog .zprose details[open] summary::after { content: "+" !important; transform: rotate(45deg); background: var(--brand-accent); color: #fff; }
.ateco-blog .zprose details > *:not(summary) { padding: 0 44px 22px 4px !important; margin: 0 !important; font-size: 15px; line-height: 1.7; color: var(--neutral-600); }

/* ============================================================
   COMPOSANTS EXACTS LIBRARY (juin 2026) — FAQ .hc-faq-item + JS
   data-faq ; pull-quote .zprose-pull ; tableau .zcmp-ptable ;
   TOC tronquee (actif non tronque) ; titres plus aeres.
   ============================================================ */
.ateco-blog .zprose h2, .ateco-blog .zprose h2.wp-block-heading.wp-block-heading { margin-top: 72px !important; margin-bottom: 18px !important; }
.ateco-blog .zprose h3, .ateco-blog .zprose h3.wp-block-heading.wp-block-heading { margin-top: 46px !important; }
.ateco-blog .zprose :is(h2, h3, h4):first-child { margin-top: 0 !important; }
.ateco-blog .pk-bltoc a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ateco-blog .pk-bltoc a.on { white-space: normal; overflow: visible; text-overflow: clip; }
.ateco-blog .zprose .zprose-pull { margin: 30px 0 !important; padding: 4px 0 4px 26px !important; border-left: 3px solid var(--brand-accent) !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; background: none !important; border-radius: 0 !important; font-size: 23px !important; line-height: 1.4; font-weight: 600; font-style: normal !important; color: var(--s-title); }
.ateco-blog .zprose .zprose-pull p { margin: 0; font-size: 23px; font-weight: 600; color: var(--s-title); }
.ateco-blog .zprose .faq-list { max-width: 820px; margin: 30px 0 0; background: transparent; }
.ateco-blog .zprose .hc-faq-item { border-bottom: 1px solid var(--neutral-200); }
.ateco-blog .zprose .hc-faq-item:first-child { border-top: 1px solid var(--neutral-200); }
.ateco-blog .zprose .faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 4px; background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 17px; font-weight: 600; color: var(--neutral-ink); text-align: left; transition: color .15s ease; }
.ateco-blog .zprose .faq-q:hover { color: var(--brand-accent); }
.ateco-blog .zprose .faq-q .pm { width: 30px; height: 30px; border-radius: 999px; background: var(--surface-cream); color: var(--brand-accent); flex: none; display: flex; align-items: center; justify-content: center; font-size: 13px; transition: transform .25s ease, background .2s ease, color .2s ease; }
.ateco-blog .zprose .hc-faq-item.is-open .faq-q .pm { transform: rotate(45deg); background: var(--brand-accent); color: #fff; }
.ateco-blog .zprose .faq-a { max-height: 0; overflow: hidden; transition: max-height .3s cubic-bezier(.22, 1, .36, 1); }
.ateco-blog .zprose .faq-a-inner { padding: 0 44px 24px 4px; font-size: 15px; line-height: 1.7; color: var(--neutral-600); }
.ateco-blog .zprose .hc-faq-item.is-open .faq-a { max-height: 600px; }
.ateco-blog .zprose .wp-block-table { border-radius: 14px; overflow: hidden; box-shadow: 0 12px 32px rgba(15, 26, 20, .07); border: 1px solid var(--neutral-200); margin: 26px 0; }
.ateco-blog .zprose .wp-block-table table, .ateco-blog .zprose table { width: 100%; border-collapse: collapse; background: #fff; margin: 0; }
.ateco-blog .zprose table tr:first-child td, .ateco-blog .zprose th { font: 600 11.5px 'Poppins', sans-serif !important; text-transform: uppercase; letter-spacing: .5px; color: var(--s-ink-soft) !important; padding: 13px 18px !important; border: 0 !important; border-bottom: 1px solid var(--neutral-200) !important; background: rgba(0, 0, 0, .02) !important; }
.ateco-blog .zprose td { padding: 15px 18px !important; border: 0 !important; border-bottom: 1px solid var(--neutral-200) !important; vertical-align: middle; color: var(--s-ink); font-size: 14px; }
.ateco-blog .zprose tbody tr:last-child td, .ateco-blog .zprose table tr:last-child td { border-bottom: 0 !important; }
.ateco-blog .zprose table td:last-child { font-weight: 800; color: var(--brand-accent); white-space: nowrap; }
.ateco-blog .zprose table tr:first-child td:last-child { font-weight: 600 !important; color: var(--s-ink-soft) !important; }

/* ============================================================
   v4 (juin 2026) — hero cadre (cover/center), colonne de tableau
   mise en avant configurable (.feat-N) + responsive, sections
   Newsletter (#47) et Blog-CTA (#53).
   ============================================================ */
.ateco-blog .bl-hero { background-size: cover !important; background-position: center center !important; }
.ateco-blog .zprose .wp-block-table { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
.ateco-blog .zprose .wp-block-table table { min-width: 460px; }
.ateco-blog .zprose table td:last-child { font-weight: 400; color: var(--s-ink); white-space: normal; }
.ateco-blog .zprose .wp-block-table.feat-1 td:nth-child(1),
.ateco-blog .zprose .wp-block-table.feat-2 td:nth-child(2),
.ateco-blog .zprose .wp-block-table.feat-3 td:nth-child(3),
.ateco-blog .zprose .wp-block-table.feat-4 td:nth-child(4),
.ateco-blog .zprose .wp-block-table.feat-5 td:nth-child(5) { background: rgba(232, 96, 18, .05); color: var(--brand-accent); font-weight: 800; }
.ateco-blog .zprose .wp-block-table.feat-1 tr:first-child td:nth-child(1),
.ateco-blog .zprose .wp-block-table.feat-2 tr:first-child td:nth-child(2),
.ateco-blog .zprose .wp-block-table.feat-3 tr:first-child td:nth-child(3),
.ateco-blog .zprose .wp-block-table.feat-4 tr:first-child td:nth-child(4),
.ateco-blog .zprose .wp-block-table.feat-5 tr:first-child td:nth-child(5) { background: rgba(232, 96, 18, .12) !important; color: var(--brand-accent) !important; }
.ateco-blog .section--slate { --s-title: #fff; --s-ink: rgba(255, 255, 255, .92); --s-ink-soft: rgba(255, 255, 255, .82); --s-border: rgba(255, 255, 255, .2); }
.ateco-blog .znews { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
.ateco-blog .znews-title { color: var(--s-title); margin: 0 0 8px; font-size: clamp(22px, 2.6vw, 26px); line-height: 1.2; }
.ateco-blog .znews-text { color: var(--s-ink-soft); margin: 0; font-size: 15px; line-height: 1.6; }
.ateco-blog .znews-form { display: flex; gap: 10px; flex-wrap: wrap; }
.ateco-blog .znews-input { flex: 1; min-width: 200px; padding: 13px 16px; border-radius: 10px; border: 1px solid var(--s-border); background: #fff; color: var(--neutral-ink); font: 400 15px 'Poppins', sans-serif; }
.ateco-blog .znews-input::placeholder { color: var(--neutral-400); }
.ateco-blog .znews-input:focus { outline: none; border-color: var(--brand-accent); }
.ateco-blog .znews-note { color: var(--s-ink-soft); margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; opacity: .85; }
@media (max-width: 900px) { .ateco-blog .znews { grid-template-columns: 1fr; gap: 24px; } }
.ateco-blog .zblcta { max-width: 760px; margin: 32px 0; display: flex; align-items: center; gap: 18px; background: var(--surface-cream); border: 1px solid var(--neutral-200); border-left: 4px solid var(--brand-accent); border-radius: 0 16px 16px 0; padding: 22px 26px; flex-wrap: wrap; }
.ateco-blog .zblcta-ic { width: 46px; height: 46px; border-radius: 12px; background: rgba(232, 96, 18, .14); color: var(--brand-accent); display: flex; align-items: center; justify-content: center; font-size: 20px; flex: none; }
.ateco-blog .zblcta-bd { flex: 1; min-width: 200px; }
.ateco-blog .zblcta-title { display: block; font-size: 16px; color: var(--s-title); font-weight: 700; }
.ateco-blog .zblcta-text { margin: 3px 0 0; font-size: 14px; color: var(--s-ink-soft); }
.ateco-blog .zblcta-cta { flex: none; }

/* ============================================================
   v5 (juin 2026) — marge FAQ (collision Porto .faq-list), CTA
   pleine largeur, comparatifs EXACTS library : A (.zcmp) et B (.zcmp-ptable).
   ============================================================ */
.ateco-blog .zprose .faq-list { padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.ateco-blog .zblcta--full { max-width: none; }
.ateco-blog .bl-cta-section { padding-top: clamp(20px, 3vw, 36px); }
.ateco-blog .zprose .zcmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 26px 0; max-width: 100%; }
.ateco-blog .zprose .zcmp { width: 100%; min-width: 460px; border-collapse: separate; border-spacing: 0; font-size: 15px; background: transparent; }
.ateco-blog .zprose .zcmp th, .ateco-blog .zprose .zcmp td { padding: 15px 18px !important; text-align: left; border: 0 !important; border-bottom: 1px solid var(--neutral-200) !important; background: transparent; }
.ateco-blog .zprose .zcmp thead th { font-size: 13px !important; text-transform: uppercase; letter-spacing: .5px; color: var(--s-ink-soft) !important; font-weight: 700; text-align: center; }
.ateco-blog .zprose .zcmp tbody td:not(:first-child) { text-align: center; color: var(--s-ink) !important; font-weight: 400; }
.ateco-blog .zprose .zcmp td:first-child { color: var(--s-ink) !important; font-weight: 500; }
.ateco-blog .zprose .zcmp thead th.feat { background: rgba(232, 96, 18, .08) !important; border-radius: 12px 12px 0 0; color: var(--brand-accent) !important; }
.ateco-blog .zprose .zcmp tbody td.is-feat { background: rgba(232, 96, 18, .05) !important; }
.ateco-blog .zprose .zcmp-yes { color: var(--brand-green, #109040); font-weight: 700; }
.ateco-blog .zprose .zcmp-no { color: var(--neutral-400); }
.ateco-blog .zprose .zcmp-ptable { width: 100%; min-width: 460px; border-collapse: collapse; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 12px 32px rgba(15, 26, 20, .07); border: 1px solid var(--neutral-200); }
.ateco-blog .zprose .zcmp-ptable th { text-align: left; font: 600 11.5px 'Poppins', sans-serif !important; text-transform: uppercase; letter-spacing: .5px; color: var(--s-ink-soft) !important; padding: 13px 18px !important; border: 0 !important; border-bottom: 1px solid var(--neutral-200) !important; background: rgba(0, 0, 0, .02) !important; }
.ateco-blog .zprose .zcmp-ptable td { padding: 15px 18px !important; border: 0 !important; border-bottom: 1px solid var(--neutral-200) !important; vertical-align: middle; color: var(--s-ink) !important; font-weight: 400; white-space: normal; }
.ateco-blog .zprose .zcmp-ptable tr:last-child td { border-bottom: 0 !important; }
.ateco-blog .zprose .zcmp-ptable td b { display: block; color: var(--s-title); font-size: 15px; }
.ateco-blog .zprose .zcmp-ptable td span { display: block; font-size: 12.5px; color: var(--s-ink-soft); margin-top: 2px; font-weight: 400; }
.ateco-blog .zprose .zcmp-ptable td.zcmp-p { font: 800 20px 'Poppins', sans-serif !important; color: var(--brand-accent) !important; white-space: nowrap; }
.ateco-blog .zprose .zcmp-ptable th:nth-child(2), .ateco-blog .zprose .zcmp-ptable td:nth-child(2), .ateco-blog .zprose .zcmp-ptable th:nth-child(3), .ateco-blog .zprose .zcmp-ptable td:nth-child(3) { text-align: right; }
.ateco-blog .zprose .zcmp-note { text-align: center; color: var(--s-ink-soft); font-size: 13px; margin: 18px auto 0; max-width: 640px; }

/* v5.1 — annule la fuite de la regle generique tr:first-child td sur la
   1re ligne du tbody des comparatifs (qui ont un vrai thead). */
.ateco-blog .zprose .zcmp-ptable tbody tr:first-child td { text-transform: none !important; background: transparent !important; font-size: 14px !important; letter-spacing: normal !important; color: var(--s-ink) !important; font-weight: 400 !important; padding: 15px 18px !important; }
.ateco-blog .zprose .zcmp-ptable tbody tr:first-child td b { color: var(--s-title) !important; font-size: 15px !important; font-weight: 500 !important; }
.ateco-blog .zprose .zcmp-ptable tbody tr:first-child td.zcmp-p { color: var(--brand-accent) !important; font: 800 20px 'Poppins', sans-serif !important; }
.ateco-blog .zprose .zcmp tbody tr:first-child td { text-transform: none !important; background: transparent !important; font-size: 15px !important; letter-spacing: normal !important; color: var(--s-ink) !important; font-weight: 400 !important; }
.ateco-blog .zprose .zcmp tbody tr:first-child td:first-child { font-weight: 500 !important; }

/* ============================================================
   v6 (juin 2026) — tableau : colonne mise en avant plus petite +
   alignee droite, bordure nette, PAS de hover. + responsive renforce.
   ============================================================ */
.ateco-blog .zprose .zcmp-ptable td.zcmp-p,
.ateco-blog .zprose .zcmp-ptable tbody tr:first-child td.zcmp-p { font: 700 16px 'Poppins', sans-serif !important; color: var(--brand-accent) !important; text-align: right !important; white-space: nowrap; }
.ateco-blog .zprose .zcmp-ptable { border: 1px solid #cfd4d6 !important; box-shadow: 0 3px 12px rgba(15, 26, 20, .04) !important; }
.ateco-blog .zprose .zcmp { border: 1px solid #cfd4d6 !important; border-radius: 14px; overflow: hidden; }
.ateco-blog .zprose tbody tr:hover { background: transparent !important; }
@media (max-width: 820px) {
  .ateco-blog .bl-hero { min-height: 320px; }
  .ateco-blog .bl-hero .section-inner { padding: 42px 20px 34px; }
  .ateco-blog .bl-hero .pk-blah h1 { font-size: clamp(26px, 7vw, 34px); margin-top: 12px; margin-bottom: 12px; }
  .ateco-blog .zblcta { gap: 14px; }
  .ateco-blog .zblcta-cta { width: 100%; }
  .ateco-blog .zblcta-cta .hc-btn { width: 100%; justify-content: center; }
  .ateco-blog .pk-bltoc a { white-space: normal; overflow: visible; text-overflow: clip; }
  .ateco-blog .zprose .zcmp-ptable td.zcmp-p { font-size: 15px !important; }
}
@media (max-width: 600px) {
  .ateco-blog .section .section-inner,
  .ateco-blog .bl-hero .section-inner,
  .ateco-blog .section--cream .section-inner { padding-left: 18px; padding-right: 18px; }
  .ateco-blog .bl-hero .pk-blah h1 { font-size: 24px; }
  .ateco-blog .zprose p, .ateco-blog .zprose li { font-size: 16px; }
  .ateco-blog .znews-form { flex-direction: column; align-items: stretch; }
  .ateco-blog .znews-form .hc-btn { width: 100%; justify-content: center; }
  .ateco-blog .znews-input { min-width: 0; }
  .ateco-blog .zprose .zcmp-ptable td, .ateco-blog .zprose .zcmp-ptable th { padding: 12px 14px !important; }
  .ateco-blog .zprose .zcmp-ptable td b { font-size: 14px; }
}

/* ============================================================
   v7 (juin 2026) — newsletter full-bleed, icones FA non-italiques,
   À retenir (liste sans indent), tableau (1re colonne non-gras +
   bordure nette + separateurs de colonnes).
   ============================================================ */
.ateco-blog .section--slate { width: 100vw; margin-left: calc(50% - 50vw); }
.ateco-blog .zprose i.fa-solid,
.ateco-blog .zprose i.fa-brands,
.ateco-blog .zprose i.fa-regular,
.ateco-blog .zprose i[class*="fa-"] { font-style: normal !important; }
.ateco-blog .zprose .zedito-take ul { padding-left: 0 !important; margin-left: 0 !important; }
.ateco-blog .zprose .zedito-take li { padding-left: 0 !important; margin-left: 0 !important; }
.ateco-blog .zprose .zcmp-ptable td b { font-weight: 500 !important; }
.ateco-blog .zprose .zcmp-ptable { border: 1px solid #bcc3c5 !important; }
.ateco-blog .zprose .zcmp-ptable th { border-right: 1px solid #e4e8e9 !important; }
.ateco-blog .zprose .zcmp-ptable td { border-right: 1px solid #eef1f1 !important; }
.ateco-blog .zprose .zcmp-ptable th:last-child,
.ateco-blog .zprose .zcmp-ptable td:last-child { border-right: 0 !important; }

/* ============================================================
   v8 (juin 2026) — COMPOSANTS GUTENBERG NATIFS (block styles).
   Chaque composant editorial est desormais un bloc natif editable
   (group / quote / table / details) stylise via .is-style-*, au lieu
   de HTML perso (core/html). Memes visuels que les versions .zcmp-*,
   .zcallout, .zedito-take, .zprose-pull, .hc-faq-item.
   Markup natif cible :
     core/group   .wp-block-group.is-style-callout-info|-tip|-take
     core/quote   .wp-block-quote.is-style-pull
     core/table   .wp-block-table.is-style-ptable|-compare
     core/details .wp-block-details.is-style-faq
   ============================================================ */

/* --- Encadres « Bon a savoir » / « Conseil de l'artisan » (core/group) --- */
.ateco-blog .zprose .is-style-callout-info,
.ateco-blog .zprose .is-style-callout-tip { margin: 26px 0; border-radius: 14px; padding: 20px 22px; border: 1px solid; }
.ateco-blog .zprose .is-style-callout-info { background: rgba(232, 96, 18, .06); border-color: rgba(232, 96, 18, .22); }
.ateco-blog .zprose .is-style-callout-tip { background: #fff; border-color: var(--neutral-200); }
.ateco-blog .zprose .is-style-callout-info > *,
.ateco-blog .zprose .is-style-callout-tip > * { margin-top: 0; }
.ateco-blog .zprose .is-style-callout-info :is(h2, h3, h4, h5, h6),
.ateco-blog .zprose .is-style-callout-tip :is(h2, h3, h4, h5, h6) { margin: 0 0 6px; font-size: 14px !important; line-height: 1.3 !important; display: flex; gap: 10px; align-items: center; }
.ateco-blog .zprose .is-style-callout-info :is(h2, h3, h4, h5, h6) { color: var(--brand-accent) !important; }
.ateco-blog .zprose .is-style-callout-tip :is(h2, h3, h4, h5, h6) { color: var(--s-title) !important; }
.ateco-blog .zprose .is-style-callout-info :is(h2, h3, h4, h5, h6)::before,
.ateco-blog .zprose .is-style-callout-tip :is(h2, h3, h4, h5, h6)::before { font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 16px; flex: none; }
.ateco-blog .zprose .is-style-callout-info :is(h2, h3, h4, h5, h6)::before { content: "\f05a"; color: var(--brand-accent); }
.ateco-blog .zprose .is-style-callout-tip :is(h2, h3, h4, h5, h6)::before { content: "\f0eb"; color: var(--brand-primary); }
.ateco-blog .zprose .is-style-callout-info p,
.ateco-blog .zprose .is-style-callout-tip p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--s-ink-soft); }
.ateco-blog .zprose .is-style-callout-info p + p,
.ateco-blog .zprose .is-style-callout-tip p + p { margin-top: 10px; }

/* --- « A retenir » (core/group) : pas d'icone de titre, liste a coches --- */
.ateco-blog .zprose .is-style-take { margin: 36px 0; background: var(--surface-cream); border: 1px solid var(--neutral-200); border-radius: 16px; padding: 24px 26px; }
.ateco-blog .zprose .is-style-take > *:first-child { margin-top: 0; }
.ateco-blog .zprose .is-style-take :is(h2, h3, h4, h5, h6) { margin: 0 0 14px !important; font-size: 13px !important; text-transform: uppercase; letter-spacing: .6px; color: var(--brand-accent) !important; }
.ateco-blog .zprose .is-style-take ul { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 10px; }
.ateco-blog .zprose .is-style-take li { display: flex; gap: 10px; align-items: flex-start; padding-left: 0; margin-left: 0; font-size: 15px; color: var(--s-ink); }
.ateco-blog .zprose .is-style-take ul.wp-block-list li::before,
.ateco-blog .zprose .is-style-take ul li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 13px; color: var(--brand-accent); flex: none; margin-top: 3px; position: static; left: auto; top: auto; background: none; width: auto; height: auto; border-radius: 0; }

/* --- Citation mise en avant (core/quote) facon .zprose-pull --- */
.ateco-blog .zprose .is-style-pull { margin: 30px 0 !important; padding: 4px 0 4px 26px !important; border-left: 3px solid var(--brand-accent) !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; background: none !important; border-radius: 0 !important; font-size: 23px !important; line-height: 1.4; font-weight: 600; font-style: normal !important; color: var(--s-title); }
.ateco-blog .zprose .is-style-pull p { margin: 0; font-size: 23px; font-weight: 600; font-style: normal; color: var(--s-title); }
.ateco-blog .zprose .is-style-pull cite { display: block; margin-top: 12px; font-size: 14px; font-style: normal; font-weight: 500; color: var(--s-ink-soft); }

/* --- Tableau de prix (core/table) facon .zcmp-ptable --- */
.ateco-blog .zprose .is-style-ptable { margin: 30px 0; overflow: hidden; border: 1px solid #bcc3c5; border-radius: 14px; box-shadow: 0 3px 12px rgba(15, 26, 20, .04); }
.ateco-blog .zprose .is-style-ptable table { width: 100%; border-collapse: collapse; margin: 0; border: 0; }
.ateco-blog .zprose .is-style-ptable thead th { text-align: left; font: 600 11.5px 'Poppins', sans-serif; text-transform: uppercase; letter-spacing: .5px; color: var(--s-ink-soft); padding: 13px 18px; background: rgba(0, 0, 0, .02); border: 0; border-bottom: 1px solid var(--neutral-200); }
.ateco-blog .zprose .is-style-ptable thead th:last-child { text-align: right; }
.ateco-blog .zprose .is-style-ptable tbody td { padding: 15px 18px; border: 0; border-bottom: 1px solid var(--neutral-200); vertical-align: middle; color: var(--s-ink); font-weight: 400; }
.ateco-blog .zprose .is-style-ptable tbody td:first-child { font-weight: 500; color: var(--s-title); }
.ateco-blog .zprose .is-style-ptable tbody td:last-child { text-align: right; white-space: nowrap; font: 700 16px 'Poppins', sans-serif; color: var(--brand-accent); }
.ateco-blog .zprose .is-style-ptable tbody tr:last-child td { border-bottom: 0; }
.ateco-blog .zprose .is-style-ptable th:not(:last-child) { border-right: 1px solid #e4e8e9; }
.ateco-blog .zprose .is-style-ptable td:not(:last-child) { border-right: 1px solid #eef1f1; }
.ateco-blog .zprose .is-style-ptable tbody tr:hover { background: transparent; }

/* --- Comparatif (core/table) : cellules centrees, libelle 1re colonne --- */
.ateco-blog .zprose .is-style-compare { margin: 30px 0; overflow: hidden; border: 1px solid #cfd4d6; border-radius: 14px; box-shadow: 0 3px 12px rgba(15, 26, 20, .04); }
.ateco-blog .zprose .is-style-compare table { width: 100%; border-collapse: collapse; margin: 0; border: 0; }
.ateco-blog .zprose .is-style-compare thead th { font: 600 11.5px 'Poppins', sans-serif; text-transform: uppercase; letter-spacing: .5px; color: var(--s-ink-soft); padding: 13px 18px; background: rgba(0, 0, 0, .02); border: 0; border-bottom: 1px solid var(--neutral-200); text-align: center; }
.ateco-blog .zprose .is-style-compare thead th:first-child { text-align: left; }
.ateco-blog .zprose .is-style-compare thead th:last-child { color: var(--brand-accent); }
.ateco-blog .zprose .is-style-compare tbody td { padding: 14px 18px; border: 0; border-bottom: 1px solid var(--neutral-200); text-align: center; color: var(--s-ink); }
.ateco-blog .zprose .is-style-compare tbody td:first-child { text-align: left; font-weight: 500; color: var(--s-title); }
.ateco-blog .zprose .is-style-compare tbody tr:last-child td { border-bottom: 0; }
.ateco-blog .zprose .is-style-compare td:not(:last-child),
.ateco-blog .zprose .is-style-compare th:not(:last-child) { border-right: 1px solid #eef1f1; }
.ateco-blog .zprose .is-style-compare tbody tr:hover { background: transparent; }

/* --- FAQ (core/details natif) facon .hc-faq-item, SANS JS --- */
.ateco-blog .zprose .is-style-faq { border-bottom: 1px solid var(--neutral-200); margin: 0; padding: 0; }
.ateco-blog .zprose .is-style-faq:first-of-type { border-top: 1px solid var(--neutral-200); }
.ateco-blog .zprose .is-style-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 4px; font-size: 17px; font-weight: 600; color: var(--neutral-ink); transition: color .15s ease; }
.ateco-blog .zprose .is-style-faq summary::-webkit-details-marker { display: none; }
.ateco-blog .zprose .is-style-faq summary:hover { color: var(--brand-accent); }
.ateco-blog .zprose .is-style-faq summary::after { content: "\2b"; font-family: 'Poppins', sans-serif; font-weight: 400; width: 30px; height: 30px; border-radius: 999px; background: var(--surface-cream); color: var(--brand-accent); flex: none; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: background .2s ease, color .2s ease; }
.ateco-blog .zprose .is-style-faq[open] summary::after { content: "\2212"; background: var(--brand-accent); color: #fff; }
.ateco-blog .zprose .is-style-faq > *:not(summary) { margin: 0; padding: 0 44px 24px 4px; font-size: 15px; line-height: 1.7; color: var(--neutral-600); }


/* ============================================================
   v8.1 (juin 2026) — la regle generique .zprose table tr:first-child td
   (en-tete des tables SANS thead) fuit sur la 1re ligne du tbody des
   is-style-ptable/compare (qui ont un vrai thead) : majuscules, gris,
   600. On l'annule, comme pour .zcmp-ptable (v5.1).
   ============================================================ */
.ateco-blog .zprose .is-style-ptable tbody tr:first-child td,
.ateco-blog .zprose .is-style-compare tbody tr:first-child td { font: 400 15px 'Poppins', sans-serif !important; text-transform: none !important; letter-spacing: normal !important; background: transparent !important; color: var(--s-ink) !important; padding: 15px 18px !important; }
.ateco-blog .zprose .is-style-ptable tbody tr:first-child td:first-child { font-weight: 500 !important; color: var(--s-title) !important; }
.ateco-blog .zprose .is-style-ptable tbody tr:first-child td:last-child { text-align: right !important; white-space: nowrap !important; font: 700 16px 'Poppins', sans-serif !important; color: var(--brand-accent) !important; }
.ateco-blog .zprose .is-style-compare tbody tr:first-child td { text-align: center !important; padding: 14px 18px !important; }
.ateco-blog .zprose .is-style-compare tbody tr:first-child td:first-child { text-align: left !important; font-weight: 500 !important; color: var(--s-title) !important; }


/* ============================================================
   v9 (juin 2026) — tableaux épurés (sans ligne sous l'en-tête ni
   séparateurs de colonnes), padding callouts, titre/liste « À retenir »,
   anti-débordement horizontal mobile (sections full-bleed width:100vw).
   ============================================================ */

/* 1. Tableaux de prix (is-style-ptable + .zcmp-ptable) : retirer la ligne
   sous la rangée de légendes ET les séparateurs de colonnes ; on garde les
   filets entre lignes, la bordure extérieure et le prix orange. */
.ateco-blog .zprose .is-style-ptable thead th,
.ateco-blog .zprose .zcmp-ptable thead th { border-bottom: 0 !important; }
.ateco-blog .zprose .is-style-ptable th,
.ateco-blog .zprose .is-style-ptable td,
.ateco-blog .zprose .zcmp-ptable th,
.ateco-blog .zprose .zcmp-ptable td { border-right: 0 !important; }

/* 2. Encadrés « Bon à savoir » / « Conseil de l'artisan » : moins de padding
   en haut + titre collé en haut (annule la marge-haute héritée de .zprose hN). */
.ateco-blog .zprose .is-style-callout-info,
.ateco-blog .zprose .is-style-callout-tip { padding-top: 15px !important; padding-bottom: 17px !important; }
.ateco-blog .zprose .is-style-callout-info :is(h2, h3, h4, h5, h6).wp-block-heading.wp-block-heading,
.ateco-blog .zprose .is-style-callout-tip :is(h2, h3, h4, h5, h6).wp-block-heading.wp-block-heading { margin-top: 0 !important; }

/* 3. « À retenir » : titre plus petit + liste sans indentation gauche. */
.ateco-blog .zprose .is-style-take :is(h2, h3, h4, h5, h6).wp-block-heading.wp-block-heading { font-size: 13px !important; margin-top: 0 !important; }
.ateco-blog .zprose .is-style-take ul.wp-block-list li { padding-left: 0 !important; }

/* 4. Responsive : empêche les sections pleine largeur (width:100vw) de
   provoquer un défilement horizontal sur mobile (overflow-x:clip n'établit
   PAS de conteneur de défilement → ne casse pas le sticky du sommaire) +
   colonne de contenu réductible + césure des mots longs. */
body.single-post,
body.single,
body.blog,
body.archive { overflow-x: clip; }
.ateco-blog .bl-art > * { min-width: 0; }
.ateco-blog .zprose { overflow-wrap: break-word; }


/* ============================================================
   v10 (juin 2026) — tableaux : (1) retirer la bordure 3px de <thead>
   (règle core WP .wp-block-table thead{border-bottom:3px}) sur les tableaux
   natifs ; (2) cadre extérieur visible sur .zcmp-ptable (core/html) :
   border-collapse:collapse + cellules sans bordure = le bord du <table> ne
   s'affichait plus → passer en border-collapse:separate (comme .zcmp).
   ============================================================ */
.ateco-blog .zprose .is-style-ptable thead,
.ateco-blog .zprose .zcmp-ptable thead { border-bottom: 0 !important; }
.ateco-blog .zprose .zcmp-ptable { border-collapse: separate !important; border-spacing: 0 !important; }


/* ============================================================
   v11 (juin 2026) — (1) bordure de tableau plus DISCRÈTE (même couleur que
   les séparateurs de lignes = neutral-200) + suppression de l'ombre ;
   (2) colonne PRIX configurable via classe additionnelle du bloc
   (oco-price-2 / oco-price-3) pour les tableaux à 3 colonnes où le prix
   n'est PAS la dernière colonne (ex. Surface | Budget | Commentaires).
   ============================================================ */
.ateco-blog .zprose .is-style-ptable,
.ateco-blog .zprose .zcmp-ptable { border-color: var(--neutral-200) !important; box-shadow: none !important; }

/* neutraliser la dernière colonne (qui est orange par défaut) quand une
   position explicite est donnée → elle redevient une colonne de texte normale */
.ateco-blog .zprose .is-style-ptable.oco-price-2 tbody td:last-child,
.ateco-blog .zprose .is-style-ptable.oco-price-3 tbody td:last-child,
.ateco-blog .zprose .is-style-ptable.oco-price-2 tbody tr:first-child td:last-child,
.ateco-blog .zprose .is-style-ptable.oco-price-3 tbody tr:first-child td:last-child { text-align: left !important; white-space: normal !important; font: 400 15px 'Poppins', sans-serif !important; color: var(--s-ink) !important; }
.ateco-blog .zprose .is-style-ptable.oco-price-2 thead th:last-child,
.ateco-blog .zprose .is-style-ptable.oco-price-3 thead th:last-child { text-align: left !important; }

/* colonne prix = la position indiquée (orange, alignée droite, nowrap) */
.ateco-blog .zprose .is-style-ptable.oco-price-2 tbody td:nth-child(2),
.ateco-blog .zprose .is-style-ptable.oco-price-3 tbody td:nth-child(3),
.ateco-blog .zprose .is-style-ptable.oco-price-2 tbody tr:first-child td:nth-child(2),
.ateco-blog .zprose .is-style-ptable.oco-price-3 tbody tr:first-child td:nth-child(3) { text-align: right !important; white-space: nowrap !important; font: 700 16px 'Poppins', sans-serif !important; color: var(--brand-accent) !important; }
.ateco-blog .zprose .is-style-ptable.oco-price-2 thead th:nth-child(2),
.ateco-blog .zprose .is-style-ptable.oco-price-3 thead th:nth-child(3) { text-align: right !important; }


/* Newsletter CF7 (stockage Flamingo) — fond sombre, aligne le design. */
.znews-cf7 .wpcf7-form,.bl-news-band-cf7 .wpcf7-form{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.znews-cf7 .wpcf7-form>p,.bl-news-band-cf7 .wpcf7-form>p{margin:0;flex:1 1 220px;display:flex}
.znews-cf7 input[type=email],.bl-news-band-cf7 input[type=email]{width:100%;padding:13px 16px;border:1px solid rgba(255,255,255,.25);border-radius:10px;background:rgba(255,255,255,.10);color:#fff;font-family:inherit;font-size:15px;box-sizing:border-box}
.znews-cf7 input[type=email]::placeholder,.bl-news-band-cf7 input[type=email]::placeholder{color:rgba(255,255,255,.65)}
.znews-cf7 input[type=email]:focus,.bl-news-band-cf7 input[type=email]:focus{outline:none;border-color:var(--brand-accent,#e86012);background:rgba(255,255,255,.16)}
.znews-cf7 .wpcf7-submit,.bl-news-band-cf7 .wpcf7-submit{padding:13px 24px;border:0;border-radius:10px;background:var(--brand-accent,#e86012);color:#fff;font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap}
.znews-cf7 .wpcf7-submit:hover,.bl-news-band-cf7 .wpcf7-submit:hover{filter:brightness(1.06)}
.znews-cf7 .wpcf7-response-output,.bl-news-band-cf7 .wpcf7-response-output{flex-basis:100%;margin:8px 0 0!important;color:#fff;font-size:13px;border-radius:8px}
.znews-cf7 .wpcf7-not-valid-tip,.bl-news-band-cf7 .wpcf7-not-valid-tip{color:#ffd0c0;font-size:12px}