/* Shared "split" page layout — the home hero's own composition (title/
   subtitle/CTA on the left, the page's real content on the right)
   generalized into one reusable system instead of each page inventing its
   own grid (previously duplicated near-identically in pricing-cards.css's
   .pricing-layout and skills-layout.css's .skills-layout — both now build
   on this instead, see those files).

   Ratio/gap/breakpoint match the homepage hero exactly (css/components/
   hero.css's .hero__grid: 0.85fr/1.3fr desktop) — .page-split defaults to
   the same 0.85fr/1.15fr already proven on Pricing/Skills (~43%/57%, still
   inside the 38–42/58–62 range), pages needing the wider hero ratio can
   set --page-split-content: 1.3fr locally. */

.page-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  max-width: 1180px;
  margin: 0 auto;
  align-items: start;
}

@media (min-width: 1024px) {
  .page-split {
    grid-template-columns: var(--page-split-intro, 0.85fr) var(--page-split-content, 1.15fr);
    gap: var(--page-split-gap, 56px);
  }
}

.page-split__intro {
  text-align: center;
}

@media (min-width: 1024px) {
  .page-split__intro {
    text-align: left;
  }

  .page-split__intro .page-title,
  .page-split__intro .page-subtitle {
    text-align: left;
    margin-left: 0;
  }

  /* Opt-in, not automatic — a page adds .page-split__intro--sticky itself
     (see docs in the pages that use it) only when its right column is
     genuinely long enough to scroll past the intro (Hub IA, FAQ,
     Compétences, Blog); a short page's intro would otherwise stick around
     awkwardly next to a right column barely taller than it. `top` clears
     the fixed header (see header.css's own padding/height). */
  .page-split__intro--sticky {
    position: sticky;
    top: 130px;
  }
}

.page-split__content {
  min-width: 0; /* lets long/wide children (cards, tables) shrink inside the grid track instead of overflowing it */
}

/* The CTA area under title+subtitle — just a consistent top margin, the
   button itself is always the shared .btn (button.css), never a one-off
   style. */
.page-cta {
  margin-top: 32px;
}

@media (min-width: 1024px) {
  .page-split__intro .page-cta {
    display: flex;
    justify-content: flex-start;
  }
}

.page-split__intro .page-cta {
  display: flex;
  justify-content: center;
}

/* A short lead-in line above the button (e.g. FAQ's "Une autre question ?"
   before "Me contacter") — deliberately plain text, no bordered panel: a
   "petit CTA", not a second boxed block competing with the intro above it. */
.page-cta--stacked {
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

@media (min-width: 1024px) {
  .page-split__intro .page-cta--stacked {
    align-items: flex-start;
  }
}

.page-cta__lead {
  font-family: var(--font-satoshi);
  font-size: 15px;
  color: var(--color-muted-foreground, #9898a6);
  margin: 0;
}

/* Mobile/tablet: intro stacks above content, never sticky, no forced
   min-height — see the audit note in the redesign brief ("aucune hauteur
   100vh inutile, aucun sticky, contenu visible sans scroller plusieurs
   écrans"). The `@media (min-width: 1024px)` rules above are the only
   place stickiness or the two-column split ever apply. */