/* ============================================================
   franco-media.com - interior page header, "variant C" (photo).
   TASK-N05 Block B5, 05-09-2026. Values taken verbatim from the
   approved GATE 2 - Page header variant C approved (05-09-2026).html
   (id="hd-c" in that file) - full-width featured-image background,
   dark teal veil overlay for contrast, a soft teal glow behind the
   headline (never white bloom, per that file's own design note),
   a highlight rule, and the "Contactez-nous" call-to-action button.

   Fabrice's ruling (05-09-2026): this is the standard header for
   every interior page that uses it in this block - the single
   article template, the blog listing, and category archives.
   Home keeps its own .hero (Block B3) and the client profile keeps
   its own .phero (Block B4); neither is touched here.

   Honest fallback, per the brief: a page with no featured image
   (or the blog listing / a category archive, which have no single
   photo to show) gets the flat teal gradient band instead of a
   broken or empty photo - reusing the exact .hero gradient already
   approved and shipped in Block B3 (BUILD-SPEC section 2), not a
   new colour. class="pagehead" is the shared shell; add
   "pagehead-photo" when a real photo is present, "pagehead-flat"
   for the gradient fallback.

   Breadcrumbs reuse the existing .crumbs/.sep/.here markup from
   gpcf_breadcrumb_chips() (Block B4) rather than a second breadcrumb
   component - the base chip style is duplicated here (unchanged
   values) because this file loads on templates that do not load
   client-profile.css. See the B5 report for why duplication was
   chosen over refactor.
   ============================================================ */

.pagehead{
  position:relative;
  border-radius:var(--radius-band);
  overflow:hidden;
}
.pagehead .wrap{
  position:relative;
  z-index:2;
  max-width:var(--content-max);
  margin:0 auto;
  padding:56px var(--page-gutter) 58px;
}

/* ---------- Breadcrumb chips (base - duplicated from client-profile.css, values unchanged) ---------- */

.pagehead .crumbs{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
  flex-wrap:nowrap;
}
.pagehead .crumbs a,
.pagehead .crumbs .here{
  flex:0 0 auto;
  white-space:nowrap;
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-chrome);
  letter-spacing:.4px;
  padding:6px 13px;
  border-radius:var(--radius-pill);
}
.pagehead .crumbs .here{
  flex:0 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pagehead .crumbs .sep{
  flex:0 0 auto;
  display:inline-flex;
  opacity:.7;
}
.pagehead .crumbs .sep svg{ width:14px; height:14px; }

/* ---------- Chip + date meta ---------- */

.pagehead .meta{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.pagehead .chip{
  display:inline-flex;
  align-items:center;
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-label);
  letter-spacing:2px;
  text-transform:uppercase;
  padding:6px 12px;
  border-radius:var(--radius-pill);
}
.pagehead .meta time{
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-chrome);
  letter-spacing:2px;
  text-transform:uppercase;
}

/* ---------- Headline, rule, subline, CTA ---------- */

.pagehead h1{
  position:relative;
  z-index:2;
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-page-h1);
  line-height:var(--lh-page-h1);
  letter-spacing:var(--ls-page-h1);
  max-width:22ch;
  color:#fff;
}
.pagehead .sub{
  position:relative;
  z-index:2;
  margin:14px 0 0;
  font-family:var(--font-body);
  font-size:19px;
  line-height:1.45;
  max-width:52ch;
  color:var(--on-dark-hero-sub); /* N28: solid white on band B (the .88 alpha measured 4.36:1) */
}
.pagehead .cta{
  position:relative;
  z-index:2;
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin-top:26px;
  background:var(--os-cta);
  color:var(--os-cta-ink); /* N28: ink on golden orange, never white (2.25:1) */
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:18px;
  line-height:1.2;
  padding:13px 26px;
  border-radius:var(--radius-sm);
  white-space:nowrap;
  transition:background var(--duration-base) var(--ease);
}
.pagehead .cta:hover{ background:var(--os-cta-hover); }
.pagehead .cta .ico{ width:17px; height:17px; }
.pagehead .cta svg{ stroke:currentColor; display:block; }

/* ---------- Flat variant (fallback / blog listing / archives) ----------
   Exactly the Block B3 .hero gradient - no new colour introduced. */

.pagehead-flat{
  background:var(--os-band);
}
.pagehead-flat .crumbs a{ background:rgba(255,255,255,.14); color:#fff; }
.pagehead-flat .crumbs a:hover{ background:rgba(255,255,255,.22); }
.pagehead-flat .crumbs .here{ background:#fff; color:var(--os-heading); }
.pagehead-flat .crumbs .sep{ color:rgba(255,255,255,.6); }
.pagehead-flat .chip{ background:rgba(255,255,255,.16); color:#fff; }
.pagehead-flat .meta time{ color:rgba(255,255,255,.78); }

/* ---------- Photo variant (variant C proper) ---------- */

.pagehead-photo{ border-radius:var(--radius-band); }
.pagehead-photo .photo{
  position:absolute;
  inset:0;
  background:var(--os-sunken);
}
.pagehead-photo .photo img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* Veil (N29, mix changed in N28). The tone is the rubrique accent (--acc, set on the body by
   gpcf_body_accent_attr() for a category or an article in a rubrique) mixed
   60/40 into the chrome dark --os-heading (N28, ruling DY3D; was 50/50), so the accent reads
   and the ground stays deep. With no --acc (no rubrique) the tone is --os-heading itself.
   Same stops and opacities as before. Contrast is measured in the N28 report: with the
   photo assumed pure white (worst case) white text stays at or above 4.5:1 across the text
   zone for all twelve accents; a deeper ink share is one number (the 60%) if a future accent
   ever fails. No new hex. */
.pagehead-photo{
  --veil-tone:var(--os-heading);
  --veil-low:var(--os-heading);
  --veil-glow:var(--os-link);
}
@supports (background:color-mix(in srgb,red 50%,blue)){
  .pagehead-photo{
    --veil-tone:color-mix(in srgb,var(--acc,var(--os-heading)) 60%,var(--os-heading));
    --veil-low:color-mix(in srgb,var(--acc,var(--os-heading)) 60%,var(--os-heading));
    --veil-glow:color-mix(in srgb,var(--acc,var(--os-link)) 60%,var(--os-link));
  }
}
.pagehead-photo .veil{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,rgba(var(--os-ink-rgb),.94) 0%,rgba(var(--os-ink-rgb),.9) 56%,rgba(var(--os-ink-rgb),.5) 80%,rgba(var(--os-ink-rgb),.28) 100%),
    linear-gradient(0deg,rgba(var(--os-ink-rgb),.62) 0%,rgba(var(--os-ink-rgb),.24) 60%,rgba(var(--os-ink-rgb),.12) 100%);
}
@supports (background:color-mix(in srgb,red 50%,blue)){
  .pagehead-photo .veil{
    background:
      linear-gradient(90deg,color-mix(in srgb,var(--veil-tone) 94%,transparent) 0%,color-mix(in srgb,var(--veil-tone) 90%,transparent) 56%,color-mix(in srgb,var(--veil-tone) 50%,transparent) 80%,color-mix(in srgb,var(--veil-tone) 28%,transparent) 100%),
      linear-gradient(0deg,color-mix(in srgb,var(--veil-low) 62%,transparent) 0%,color-mix(in srgb,var(--veil-low) 24%,transparent) 60%,color-mix(in srgb,var(--veil-low) 12%,transparent) 100%);
  }
}
.pagehead-photo .glowspot{
  position:absolute;
  left:-90px;
  top:-120px;
  width:620px;
  height:480px;
  border-radius:50%;
  z-index:1;
  background:radial-gradient(circle,rgba(var(--os-accent-rgb),.58) 0%,rgba(var(--os-accent-rgb),0) 70%);
  pointer-events:none;
}
@supports (background:color-mix(in srgb,red 50%,blue)){
  .pagehead-photo .glowspot{
    background:radial-gradient(circle,color-mix(in srgb,var(--veil-glow) 58%,transparent) 0%,color-mix(in srgb,var(--veil-glow) 0%,transparent) 70%);
  }
}
.pagehead-photo h1{
  text-shadow:0 0 34px rgba(var(--os-accent-rgb),.85),0 0 78px rgba(var(--os-ink-rgb),.6),0 2px 3px rgba(var(--os-ink-rgb),.45);
}
.pagehead-photo .rule{
  position:relative;
  z-index:2;
  width:96px;
  height:5px;
  border-radius:var(--radius-pill);
  background:var(--os-highlight);
  margin:20px 0 0;
  box-shadow:0 0 22px rgba(var(--os-cta-rgb),.55);
}
.pagehead-photo .sub{ margin-top:14px; }
.pagehead-photo .crumbs a{ background:rgba(255,255,255,.16); color:#fff; }
.pagehead-photo .crumbs a:hover{ background:rgba(255,255,255,.26); }
.pagehead-photo .crumbs .here{ background:#fff; color:var(--os-heading); }
.pagehead-photo .crumbs .sep{ color:rgba(255,255,255,.6); }
.pagehead-photo .chip{ background:rgba(255,255,255,.18); color:#fff; }
.pagehead-photo .sub{ color:#fff; }/* N29: was .88 alpha, below 4.5:1 on a bright photo */
@supports (background:color-mix(in srgb,red 50%,blue)){
  /* N29: an opaque lift of the veil tone, so the chip keeps its look but no photo bleeds through it. */
  .pagehead-photo .chip{ background:color-mix(in srgb,#fff 14%,var(--veil-tone)); }
}
.pagehead-photo .meta time{ color:#fff; }/* N29: was .82 alpha, below 4.5:1 on a bright photo */

/* ---------- N40 (A1, C1): the home photo header and the hub header ----------
   The home takes this header in its photo variant (no breadcrumb, no button): the
   stamp, the hero sized h1 and the lead sit over the photo and the article veil. The
   veil tone is --os-heading alone there, because the home body carries no --acc.
   A hub header carries the rubrique accent through the body style; its flat variant
   (a hub without a featured image) is the accent mixed 60/40 into --os-heading, the same
   mix as the veil tone. No new hex. */

.pagehead-photo .photo img{ object-position:center; }
.pagehead .stamp{
  position:relative;
  z-index:2;
  display:inline-block;
  white-space:nowrap;
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-stamp);
  letter-spacing:var(--ls-stamp);
  text-transform:uppercase;
  color:#fff;
  background:var(--on-dark-fill);
  padding:6px 13px;
  border-radius:var(--radius-pill);
  margin-bottom:var(--space-9);
}
.pagehead-home .wrap{ padding-top:70px; padding-bottom:74px; }
.pagehead-home h1{
  font-size:var(--size-hero-h1);
  line-height:var(--lh-hero-h1);
  letter-spacing:var(--ls-hero-h1);
  max-width:20ch;
}
.pagehead-home .sub{
  font-size:var(--size-hero-sub);
  max-width:46ch;
}
.pagehead-hub.pagehead-flat{ background:var(--os-band); }
@supports (background:color-mix(in srgb,red 50%,blue)){
  .pagehead-hub.pagehead-flat{ background:color-mix(in srgb,var(--acc,var(--os-dark-teal)) 60%,var(--os-heading)); }
}

/* ---------- Mobile (390px) ----------
   Not shown in the approved desktop-only mockup; built here following
   BUILD-SPEC's general mobile rules (section 12) and the same scale-down
   ratio the hero band already uses (Block B3). Flagged in the B5 report
   for a visual check once staging has it live. */

@media (max-width:768px){
  .pagehead .wrap{ padding:30px var(--page-gutter-mobile) 34px; }
  .pagehead .crumbs{ font-size:var(--size-chrome); }
  .pagehead .crumbs a, .pagehead .crumbs .here{ font-size:var(--size-chrome); }
  .pagehead .crumbs .sep svg{ width:13px; height:13px; }
  .pagehead h1{ font-size:var(--m-size-page-h1); letter-spacing:-.7px; max-width:none; }
  .pagehead .sub{ font-size:16px; max-width:none; }
  .pagehead .cta{ margin-top:20px; min-height:var(--tap-comfortable); width:100%; }
  .pagehead-photo .glowspot{ width:360px; height:300px; left:-60px; top:-80px; }
  .pagehead .stamp{ margin-bottom:14px; }
  .pagehead-home .wrap{ padding:30px var(--page-gutter-mobile) 34px; }
  .pagehead-home h1{ font-size:var(--m-size-hero-h1); letter-spacing:var(--m-ls-hero-h1); max-width:none; }
  .pagehead-home .sub{ font-size:16px; max-width:none; }
}

/* N29: below 1100px the h1 and subline can run past half the band, so the veil
   becomes a flat deep floor (never below .84) and white text keeps 4.5:1 or
   better over any photo. Above 1100px the text ends before the 56% stop. */
@media (max-width:1100px){
  .pagehead-photo .veil{
    background:
      linear-gradient(90deg,rgba(var(--os-ink-rgb),.94) 0%,rgba(var(--os-ink-rgb),.9) 50%,rgba(var(--os-ink-rgb),.84) 100%),
      linear-gradient(0deg,rgba(var(--os-ink-rgb),.62) 0%,rgba(var(--os-ink-rgb),.24) 60%,rgba(var(--os-ink-rgb),.12) 100%);
  }
}
@media (max-width:1100px){
  @supports (background:color-mix(in srgb,red 50%,blue)){
    .pagehead-photo .veil{
      background:
        linear-gradient(90deg,color-mix(in srgb,var(--veil-tone) 94%,transparent) 0%,color-mix(in srgb,var(--veil-tone) 90%,transparent) 50%,color-mix(in srgb,var(--veil-tone) 84%,transparent) 100%),
        linear-gradient(0deg,color-mix(in srgb,var(--veil-low) 62%,transparent) 0%,color-mix(in srgb,var(--veil-low) 24%,transparent) 60%,color-mix(in srgb,var(--veil-low) 12%,transparent) 100%);
    }
  }
}