/* ============================================================
   N46f (Brain ruling MI, 05-11-2026): Pixel's templates A (client profile), B (client article) and C (the
   standard CTA block), ruled MH. Every value is a token of tokens.css (the rubrique accent through j6.css
   --acc-deep, --acc-wash, --acc-line, with a token fallback); no hex, no important flag, no new font.
   Loaded last (priority 42, after n46c.css).
   ============================================================ */

/* ----- 1. Profile: slider or photo, then the title block (template A parts 1 and 2) ----- */
.phero{
  margin-top:var(--space-5);
  background:none;
  border:0;
  border-radius:0;
  overflow:visible;
}
.phero .shot{
  aspect-ratio:16 / 7;
  border-radius:var(--radius-card);
  overflow:hidden;
}
.phero .shot--slider{
  aspect-ratio:auto;
  background:none;
}
.phero .meta{
  margin-top:var(--space-10);
  padding:0;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--space-12);
}
.phero .meta .tmain{ flex:1 1 auto; min-width:0; }
.phero h1{
  margin:var(--space-3) 0 0;
  font-size:var(--size-profile-h1);
  line-height:var(--lh-profile-h1);
  letter-spacing:var(--ls-profile-h1);
}
.phero p.tag{
  margin:var(--space-4) 0 0;
  font-size:var(--size-standfirst);
  line-height:var(--lh-standfirst);
  color:var(--os-text);
}
.phero .tside{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:var(--space-5);
}
.phero .tside .clogo{ border:1px solid var(--os-line); }
.clogo.is-dark,
.phero .tside .clogo.is-dark{
  background:var(--os-chrome-dark);
  border-color:var(--os-chrome-dark);
}

/* The fr, en, ru chips of the WPML twins (template A part 2). */
.phero p.tlang{
  display:flex;
  gap:var(--space-2);
  margin:0;
  max-width:none;
  font-size:var(--size-chrome);
  line-height:1.6;
}
.tlang a,
.tlang span{
  display:inline-flex;
  align-items:center;
  padding:0 var(--space-5);
  border:1px solid var(--os-line);
  border-radius:var(--radius-pill);
  background:var(--os-card);
  color:var(--os-link);
  text-decoration:none;
}
.tlang a:hover{ border-color:var(--os-link); }
.tlang a:focus-visible{ outline:2px solid var(--os-link); outline-offset:2px; }
.tlang .on{
  background:var(--os-heading);
  border-color:var(--os-heading);
  color:var(--on-dark);
}

/* ----- 2. Profile: the phone contact panel after the lead (ruling KO3, without the form) ----- */
.gpcf-ccpanel{ display:none; }

/* ----- 3. Offers and About (template A parts 5 and 6) ----- */
.desc .gpcf-offers,
.gpcf-about{ margin-top:var(--section-gap); }
.desc .gpcf-offers h2,
.main .gpcf-about h2{
  margin:var(--space-3) 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);
}
.gpcf-offers .gpcf-offers__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--card-gap);
  margin-top:var(--space-10);
}
.gpcf-offers .gpcf-offer{
  margin:0;
  background:var(--os-card);
  border:1px solid var(--os-line);
  border-radius:var(--radius-card);
  overflow:hidden;
}
.gpcf-offers .gpcf-offer__ph img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3 / 2;
  object-fit:cover;
  margin:0;
  border-radius:0;
}
.gpcf-offers .gpcf-offer__bd{ padding:var(--space-7) var(--space-8) var(--space-8); }
.desc .gpcf-offer h3{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-card-title);
  line-height:var(--lh-card-title);
  color:var(--os-heading);
}
.desc .gpcf-offer p{
  margin:var(--space-3) 0 0;
  max-width:none;
  font-size:var(--size-small);
  line-height:1.55;
}
.desc .gpcf-offer p.gpcf-offer__chips{ margin-top:0; }
.gpcf-offer .fact{
  display:inline-block;
  margin:var(--space-4) var(--space-2) 0 0;
  padding:0 var(--space-5);
  background:var(--acc-wash,var(--os-tint));
  border:1px solid var(--acc-line,var(--os-line));
  border-radius:var(--radius-pill);
  font-size:var(--size-caption);
  font-weight:var(--weight-bold);
  line-height:1.6;
  color:var(--os-heading);
}
.main .gpcf-about p{
  margin:var(--space-5) 0 0;
  max-width:70ch;
  font-size:var(--size-body);
  line-height:var(--lh-body);
  color:var(--os-text);
}

/* ----- 4. The standard CTA block (template C) ----- */
.gpcf-cta{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--space-12);
  align-items:center;
  margin:0;
  padding:var(--space-12) var(--space-13);
  background:var(--os-tint);
  border:1px solid var(--os-line);
  border-top:6px solid var(--acc-deep,var(--os-link));
  border-radius:var(--radius-card);
}
.abody .gpcf-cta{ margin-top:var(--section-gap); }
.gpcf-cta .gpcf-cta__t{
  margin: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);
}
.gpcf-cta .gpcf-cta__l{
  margin:var(--space-4) 0 0;
  font-size:var(--size-lead);
  line-height:1.5;
  color:var(--os-text);
}
.gpcf-cta .gpcf-cta__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:var(--tap-comfortable);
  margin-top:var(--space-10);
  padding:0 var(--space-12);
  border-radius:var(--radius-sm);
  background:var(--os-cta);
  color:var(--os-cta-ink);
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-button);
  line-height:1.2;
  text-decoration:none;
  transition:background var(--duration-base) var(--ease);
}
.gpcf-cta .gpcf-cta__btn:hover{ background:var(--os-cta-hover); color:var(--os-cta-ink); }
.gpcf-cta .gpcf-cta__btn:focus-visible{ outline:3px solid var(--os-heading); outline-offset:3px; }
.gpcf-cta .gpcf-cta__logo{
  box-sizing:border-box;
  display:grid;
  place-items:center;
  width:200px;
  height:120px;
  padding:var(--space-7);
  background:var(--os-card);
  border:1px solid var(--os-line);
  border-radius:var(--radius-card);
}
.gpcf-cta .gpcf-cta__logo.is-dark{
  background:var(--os-chrome-dark);
  border-color:var(--os-chrome-dark);
}
.gpcf-cta .gpcf-cta__logo img{
  display:block;
  width:100%;
  height:100%;
  margin:0;
  object-fit:contain;
  border-radius:0;
  background:none;
}
.gpcf-cta .gpcf-cta__form{ grid-column:1 / -1; min-width:0; }

/* ----- 5. Client box (template B part 4) ----- */
.gpcf-cbox{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:var(--space-9);
  align-items:center;
  margin:var(--space-12) 0 0;
  padding:var(--space-9) var(--space-10);
  background:var(--os-card);
  border:1px solid var(--acc-line,var(--os-line));
  border-left:6px solid var(--acc-deep,var(--os-link));
  border-radius:var(--radius-card);
}
.gpcf-cbox .gpcf-cbox__ini,
.gpcf-cbox .gpcf-cbox__logo{
  box-sizing:border-box;
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  border:1px solid var(--acc-line,var(--os-line));
  border-radius:var(--radius-card);
}
.gpcf-cbox .gpcf-cbox__ini{
  background:var(--acc-wash,var(--os-tint));
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-h3);
  color:var(--acc-deep,var(--os-link));
}
.gpcf-cbox .gpcf-cbox__logo{ padding:var(--space-2); background:var(--os-card); }
.gpcf-cbox .gpcf-cbox__logo.is-dark{ background:var(--os-chrome-dark); border-color:var(--os-chrome-dark); }
.gpcf-cbox .gpcf-cbox__logo img{
  display:block;
  width:100%;
  height:100%;
  margin:0;
  object-fit:contain;
  border-radius:0;
}
.gpcf-cbox .gpcf-cbox__n{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-card-title);
  line-height:var(--lh-card-title);
  color:var(--os-heading);
}
.gpcf-cbox .gpcf-cbox__l{
  margin:var(--space-1) 0 0;
  font-size:var(--size-small);
  line-height:1.5;
  color:var(--os-text);
}
.gpcf-cbox .gpcf-cbox__l a,
.gpcf-cbox .gpcf-cbox__go{
  color:var(--os-link);
  font-weight:var(--weight-bold);
  text-decoration:none;
}
.gpcf-cbox .gpcf-cbox__go{ font-size:var(--size-body-sm); white-space:nowrap; }
.gpcf-cbox a:hover{ color:var(--os-heading); text-decoration:underline; }

/* ----- 6. Client article header: the by line (template B part 1) ----- */
.pagehead .by{
  margin:var(--space-5) 0 0;
  font-family:var(--font-body);
  font-size:var(--size-chrome);
  color:var(--on-dark-muted);
}
.abody .gpcf-standfirst{ margin-top:0; }

/* ----- 7. Phone ----- */
@media (max-width:768px){
  .phero .shot{
    aspect-ratio:3 / 2;
    margin:0 calc(-1 * var(--page-gutter-mobile));
    border-radius:0;
  }
  .phero .shot--slider{ aspect-ratio:auto; }
  .phero .meta{
    display:block;
    margin-top:var(--space-10);
    padding:0;
  }
  .phero h1{ font-size:var(--m-size-profile-h1); }
  .phero p.tag{ font-size:var(--size-lead); }
  .phero .tside{ margin-top:var(--space-7); align-items:flex-start; }

  .contact-btn[aria-expanded="true"] + .gpcf-ccpanel{ display:block; }
  .gpcf-ccpanel{ margin-top:var(--space-3); }
  .gpcf-ccpanel .ccard--m{ display:flex; margin:0; }

  .gpcf-offers .gpcf-offers__grid{ grid-template-columns:minmax(0,1fr); }

  .gpcf-cta{
    grid-template-columns:minmax(0,1fr);
    gap:var(--space-9);
    padding:var(--space-10) var(--space-8);
  }
  .gpcf-cta .gpcf-cta__t{ font-size:var(--m-size-h2); }
  .gpcf-cta .gpcf-cta__logo{ order:-1; width:160px; height:96px; }

  .gpcf-cbox{ grid-template-columns:minmax(0,1fr); }
}

/* ----- 8. Addendum (Brain, 05-11-2026 12:12): the golden button to the form, the phone sticky bar ----- */
/* One golden button above the fold: right of the H1 and tagline (in .tside) on a profile, next to the by line on a
   client article. Size of Pixel's btn-gold: 18 px bold, 48 px high, --radius-sm. */
.gpcf-go{
  box-sizing:border-box; /* N46f staging check: full width on a phone must include the padding */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:var(--tap-comfortable);
  padding:0 var(--space-12);
  border-radius:var(--radius-sm);
  background:var(--os-cta);
  color:var(--os-cta-ink);
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-button);
  line-height:1.2;
  white-space:nowrap;
  text-decoration:none;
  transition:background var(--duration-base) var(--ease);
}
.gpcf-go:hover{ background:var(--os-cta-hover); color:var(--os-cta-ink); text-decoration:none; }
.gpcf-go:focus-visible{ outline:3px solid var(--os-heading); outline-offset:3px; }
.pagehead .byrow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-5) var(--space-9);
  margin-top:var(--space-5);
}
.pagehead .byrow .by{ margin:0; }
.pagehead .byrow .gpcf-go:focus-visible{ outline-color:var(--on-dark); }
@media (prefers-reduced-motion:no-preference){
  html:has(.gpcf-go[href="#contact"]){ scroll-behavior:smooth; }
}
#contact{ scroll-margin-top:var(--space-10); }

/* The sticky bar: a phone only, shown by gpcf-n46f.js (class is-on). */
.gpcf-sticky{ display:none; }
@media (max-width:768px){
  .gpcf-sticky{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:90;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-5);
    padding:var(--space-4) var(--page-gutter-mobile) max(var(--space-4), env(safe-area-inset-bottom));
    background:var(--os-card);
    border-top:1px solid var(--os-line);
    box-shadow:var(--shadow-floating);
    transform:translateY(100%);
    visibility:hidden;
    transition:transform var(--duration-base) var(--ease), visibility var(--duration-base) var(--ease);
  }
  .gpcf-sticky.is-on{ transform:none; visibility:visible; }
  .gpcf-sticky .gpcf-sticky__tel{
    display:inline-flex;
    align-items:center;
    gap:var(--space-3);
    min-height:var(--tap-min);
    min-width:0;
    color:var(--os-link);
    font-weight:var(--weight-bold);
    font-size:var(--size-body-sm);
    text-decoration:none;
  }
  .gpcf-sticky .gpcf-sticky__tel svg{ flex:none; width:18px; height:18px; stroke:currentColor; }
  .gpcf-sticky .gpcf-sticky__tel span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .gpcf-sticky .gpcf-go{ flex:none; padding:0 var(--space-9); }
  .phero .tside .gpcf-go{ width:100%; }
  /* The bar never hides the foot of the page, and the back-to-top button (style.css) sits above it. */
  body:has(.gpcf-sticky){ padding-bottom:calc(var(--tap-comfortable) + 2 * var(--space-4)); }
  body:has(.gpcf-sticky.is-on) .gpcf-top{ bottom:calc(var(--tap-comfortable) + 2 * var(--space-4) + var(--space-5)); }
}
