/* ============================================================
   franco-media.com - single article template. TASK-N05 Block B5,
   05-09-2026. Values from BUILD-SPEC.md sections 6, 7, 8, 9 and
   reference/03-article-desktop-1440.html, section numbers below
   matching that file's own comments. Only loaded on is_singular for
   the "post" post type (see gpcf_enqueue_styles()).

   The reference file's own .ahead flat header (breadcrumbs + H1 +
   standfirst) is NOT used here - Brain's ruling of 05-09-2026 puts
   the new page-header-variant-C photo header (page-header.css) at
   the top of every article instead, so the reference's plain .shot
   photo directly under the header is also dropped: showing the
   featured image twice (once as the header background, once again
   as a big inline photo) would be redundant. Everything below the
   header - body typography, pull-quote, fiche annonceur, tags,
   sidebar - is unchanged from the approved reference.
   ============================================================ */

.wrap{
  max-width:var(--content-max);
  margin:0 auto;
  padding-left:var(--page-gutter);
  padding-right:var(--page-gutter);
}
.eyebrow{
  margin:0 0 6px;
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:13.5px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--os-link);
}

.asplit{
  display:grid;
  grid-template-columns:1fr var(--sidebar-width);
  gap:var(--split-gap);
  align-items:start;
  margin-top:30px;
}

/* ---------- 4 · Body typography ---------- */

.abody{ max-width:100%; }
.abody p{
  margin:16px 0 0;
  font-family:var(--font-body);
  font-size:var(--size-article-body);
  line-height:var(--lh-article-body);
  color:var(--os-text);
}
.abody h2{
  margin:30px 0 0;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-h2);
  line-height:var(--lh-h2);
  color:var(--os-heading);
}
.abody h3{
  margin:26px 0 0;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-h3);
  line-height:var(--lh-h3);
  color:var(--os-heading-2); /* N40 (H1) */
  --hc:var(--os-heading-2); /* read by the h3[style] rule below, so that rule keeps its weight and changes only the colour */
}
.abody img{ max-width:100%; height:auto; border-radius:var(--radius-md); margin-top:16px; }
.abody a{ color:var(--os-link); text-decoration:underline; text-underline-offset:2px; }
.abody a:hover{ color:var(--os-heading); }
.abody strong{ color:var(--os-heading); }
.abody ul,
.abody ol{ margin:16px 0 0; padding-left:22px; font-family:var(--font-body); font-size:var(--size-article-body); line-height:var(--lh-article-body); color:var(--os-text); }
.abody li{ margin-top:6px; }

/* TASK-N18b item 2 (ruling BG, Fabrice's correction): heading-to-text
   gap halved, existing token only (--space-3, 8px, exactly half of the
   16px this overrides). Scoped to content immediately after a heading
   only, general paragraph rhythm elsewhere is untouched. */
.abody h2 + p,
.abody h3 + p,
.abody h2 + ul,
.abody h2 + ol,
.abody h3 + ul,
.abody h3 + ol{ margin-top:var(--space-3); }

/* TASK-N18b item 2, continued (Fabrice: "check just in case there is a
   block containing a space"). Confirmed live on the crepes article:
   most headings are each their own separate WPBakery text block, so
   the rule above never fires for them (heading and following paragraph
   are not DOM siblings). The real gap for that majority case is
   WPBakery's own per-block trailing margin, wp-content/uploads/
   js_composer/js_composer_front_custom.css, .wpb_content_element{
   margin-bottom:35px}, a plugin default, not this theme, confirmed via
   the page's own stylesheet list, unconditional, no mobile override.
   Measured live: 51px total (35px block margin plus the next block's
   16px paragraph margin-top, itself untouched since not adjacent to
   the heading). Scoped to WPBakery blocks that end in a heading only,
   via :has(), so ordinary block-to-block rhythm elsewhere (paragraph
   block to paragraph block) is untouched. Same existing token as
   above, so both cases land on the same reduced value: new total
   24px (8px block margin plus the unchanged 16px), a 53% reduction. */
.abody .wpb_text_column:has(> .wpb_wrapper > h2:last-child),
.abody .wpb_text_column:has(> .wpb_wrapper > h3:last-child){
  margin-bottom:var(--space-3);
}

/* TASK-N18c (ruling BH2, Fabrice: N18b's two fixes confirmed good on his
   iPhone, remaining correction "still a gap in between, can you make the
   space a bit less", his screenshot showing the space ABOVE headings).
   Measured live on the crepes article: for the dominant pattern, a heading
   opening a new WPBakery block (first element of its own wpb_wrapper,
   following a different block that ends in an image or text), the real
   total visible gap is 65px, not just the heading's own 30px margin-top.
   The other 35px is the same js_composer_front_custom.css .wpb_content_
   element{margin-bottom:35px} plugin default used in N18b: it is spent
   inside the preceding row's own rendered box (confirmed by comparing the
   row's bottom edge to its last visible child's bottom edge, they differ
   by exactly 35px) rather than escaping outside it, but it still renders
   as blank space the reader sees before the row ends, so it counts in the
   visible total. 5 of the article's 7 in-scope headings measured exactly
   65px this way; two headings sit in their own bespoke, padded highlight
   rows (a CTA box and a callout box) and were left alone as out of scope,
   same as N18b's outlier handling.
   Fix reduces the heading's own margin-top, the externally visible part,
   from 30px to the existing token --space-1 (4px): new total 39px, a 40%
   reduction, comfortably inside "a third to a half" and still above the
   24px established below-heading value from N18b, so the classic rhythm
   (more space above a heading than below it) holds. Scoped with :first-
   child to the wrapper so it only reaches a heading that OPENS a new
   block: a heading immediately following text within the SAME block (for
   example the subtitle directly under the article's H1) keeps its
   original margin-top, confirmed unchanged live (26px), since that is a
   different, same-block pattern the brief does not ask to touch. Applied
   to h3 in the same structural position too, for template consistency;
   not present in this sample article, so not itself measured here. */
.abody .wpb_wrapper > h2:first-child,
.abody .wpb_wrapper > h3:first-child{
  margin-top:var(--space-1);
}

/* Old per-post inline WPBakery colours (maroon/purple hex on h1/h2/h3, tinted
   backgrounds on the old CTA block) are neutralised for headings only, so
   existing articles read in the new palette without a content rewrite. This
   is the narrow, template-level version of the CTA-restyle proposal in the
   B5 report - full inline-style remapping across every article's body is
   NOT attempted here, that is the proposal itself, pending your ruling. */
.abody h1[style],
.abody h2[style],
.abody h3[style]{ color:var(--hc, var(--os-heading)) !important; } /* N40 (H1): an h3 resolves --hc to --os-heading-2, h1 and h2 to --os-heading as before */

/* TASK-N18d Task 3a (ruling BI3c: no gradients, no new hex, existing
   tokens only). The same maroon-era WPBakery styling above also shows
   up one level down, as a subline directly under certain h2 sections:
   a vc_custom_heading rendered as h4 with an inline maroon colour and
   the browser's default serif (no font-family at all was ever set for
   h4, so it fell back to Times New Roman) - for example "The drink
   worth the detour" under "Karak tea" on the EN Breakfast/Croissants/
   Karak Tea article, and its FR/RU translations. Confirmed via live
   DOM check: computed color #AA1C41 (or #5E244E depending on the
   post), font-family Times New Roman, 16px, weight 700, before this
   rule. Narrowed to h4[style*="color"] specifically (not a bare
   h4[style] the way the h1/h2/h3 rule above is) because this template
   also renders unrelated related-post teaser titles as plain h4 with
   only a text-align inline style and no color - confirmed live on the
   crepes article ("Le Celtique", "Cuisine thaïe à Rawai" cards) - and
   those must stay untouched, out of scope here.
   Font swaps to the frozen body stack (PT Sans) rather than the
   heading stack (Montserrat 800), since a subline is body-level, not
   a heading. Size and line-height use --size-body/--lh-body (16px/
   1.65), the token pair that already matches the subline's original
   16px close enough to keep the same visual weight in the layout.
   Colour uses --os-muted, the token this stylesheet's own palette
   names for "secondary text, meta, labels" i.e. the neutral tone the
   brief asks for, not the article's ink-teal (that's reserved for
   real headings) and not a new hex. Weight kept at the existing
   --weight-bold (700) so the line still reads as a label, not body
   copy. No gradient, per ruling BI3c. */
.abody h4[style*="color"]{
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-body);
  line-height:var(--lh-body);
  color:var(--os-muted) !important;
}

/* ---------- 5 · Pull quote (BUILD-SPEC section 6) ---------- */

.abody blockquote,
.pquote{
  margin:26px 0 0;
  padding:18px 24px;
  border-left:5px solid var(--os-highlight);
  background:var(--os-tint-warm);
  border-radius:0 12px 12px 0;
  max-width:64ch;
}
.abody blockquote p,
.pquote p{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-quote);
  line-height:var(--lh-quote);
  color:var(--os-heading);
  max-width:none;
}
.abody blockquote cite,
.pquote cite{
  display:block;
  margin-top:10px;
  font-family:var(--font-body);
  font-style:normal;
  font-weight:var(--weight-bold);
  font-size:13px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--os-heading);
}

/* ---------- 6 · Fiche annonceur, D02 "A2 tint card" (restyled TASK-N21, 07 Templates slice 7) ---------- */

.fiche{
  margin-top:34px;
  background:var(--acc-tint, var(--os-tint)); /* TASK-N18 ruled 2b, kept: D02's own #ECF0F0 tint for a shopping-category demo client is this exact mechanism in action, not a separate fixed colour */
  border:1px solid var(--os-line);
  border-radius:var(--radius-card);
  display:flex;
  align-items:stretch;
  overflow:hidden;
}
.fiche .ph{
  flex:0 0 220px;
  background:var(--os-sunken);
}
.fiche .ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.fiche .txt{
  flex:1;
  min-width:0;
  padding:28px 32px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}
.fiche .chip{ margin-bottom:2px; } /* sitewide .chip, shared-components.css, reused as-is */
.fiche h3{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-h2); /* TASK-N21 token close-out: D02 shows a ~30px title, var(--size-h2) is the nearest already-declared heading size, no new value */
  line-height:var(--lh-h2);
  color:var(--os-heading);
}
.fiche p{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--size-article-body);
  line-height:1.5;
  color:var(--os-muted);
}
.fiche .btn{
  box-sizing:border-box; /* TASK-N18b item 1: matches .pagehead .cta's own pattern (page-header.css), fixes mobile width:100% overflowing the card at 320/390, no desktop effect (desktop width is unconstrained) */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  flex:0 0 auto;
  margin-top:6px;
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:16px;
  line-height:1.2;
  padding:13px 22px;
  border-radius:var(--radius-sm);
  white-space:nowrap;
  background:var(--os-dark-teal); /* TASK-N21 token close-out: D01/D02 CTA base #005F73, reserved for this wiring since TASK-N15 (tokens.css section 10), no new hex, AQ2 */
  color:#fff;
  text-decoration:none; /* TASK-N21c (ruling CD): no sitewide link underline on the "Voir le profil" button */
  transition:background var(--duration-base) var(--ease);
}
.fiche .btn:hover{ background:var(--os-heading); text-decoration:none; } /* existing universal hover-darken token, not the mockup's raw hex */
.fiche .btn svg{ width:17px; height:17px; stroke:currentColor; display:block; }

/* ---------- 7 · Tag chips ---------- */

.tags{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:30px;
  padding-top:22px;
  border-top:1px solid var(--os-line);
}
.tags .lab{
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-label);
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--os-muted);
  margin-right:4px;
}
.tags a{
  white-space:nowrap;
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-chrome); /* N37c (GK): a sentence-case chip is chrome, 14px floor; was 13px */
  padding:6px 13px;
  border-radius:var(--radius-pill);
  border:1px solid var(--os-line);
  background:var(--os-card);
  color:var(--os-heading); /* N28 (DY4): chip text is ink on the tint, the accent never carries 13px text; was var(--acc) from TASK-N18 */
}
.tags a:hover{ background:var(--acc-tint, var(--os-tint)); } /* TASK-N18, ruled 2b */

/* ---------- Mobile (390px) ---------- */

@media (max-width:768px){
  .wrap{ padding-left:var(--page-gutter-mobile); padding-right:var(--page-gutter-mobile); }
  .asplit{ grid-template-columns:1fr; gap:0; margin-top:22px; }

  .abody{ font-size:var(--m-size-article-body); }
  .abody p,
  .abody ul,
  .abody ol{ font-size:var(--m-size-article-body); }

  .abody blockquote,
  .pquote{ padding:16px 18px; }
  .abody blockquote p,
  .pquote p{ font-size:var(--m-size-quote); }

  .fiche{ flex-direction:column; align-items:stretch; }
  .fiche .ph{ flex:0 0 auto; width:100%; height:160px; }
  .fiche .txt{ padding:18px; gap:10px; }
  .fiche .btn{ width:100%; min-height:var(--tap-comfortable); }
}