/* Compétences — full redesign reusing the exact split/typography/card
   system already proven on /ai-hub/, /blogs/ and /pricing/ (same 1560px
   matrix, same --page-split-intro/--page-split-gap values, same --li-*
   dark-glass card recipe re-declared locally per this codebase's own
   convention — every one of those files re-declares the same byte-
   identical tokens rather than sharing one file; ai-hub.css/blog.css/
   pricing-cards.css are never touched by this file). */
.skills-hero,
.skills-feed {
  --li-card-bg: rgba(38, 32, 56, 0.55);
  --li-card-blur: blur(24px);
  --li-border: rgba(255, 255, 255, 0.08);
  --li-border-hover: rgba(88, 130, 246, 0.4);
  --li-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  --li-shadow-hover: 0 10px 32px rgba(63, 123, 248, 0.16), 0 4px 16px rgba(184, 107, 248, 0.12);
  --li-text: rgba(255, 255, 255, 0.92);
  --li-text-secondary: rgba(255, 255, 255, 0.6);
}

.skills-hero .section__inner {
  max-width: 1560px;
}

/* Flat value below 1024px (mobile header is shorter, no sticky/stretch
   trick to keep in sync there); above 1024px built from the header's own
   real, measured bottom edge (.site-header: 43px top padding + 64px bar
   height = 107px, header.css) plus a clamped breathing gap — the exact
   same real value/formula faq.css/pricing-cards.css already use, per
   direct instruction to reuse "les mêmes espacements sous le header". */
.skills-hero {
  padding-top: 140px;
  padding-bottom: 90px;
}

@media (min-width: 1024px) {
  .skills-hero {
    --header-height: 107px;
    --skills-top-space: calc(var(--header-height) + clamp(84px, 9vh, 98px));
    padding-top: var(--skills-top-space);
    padding-bottom: 130px;
  }

  /* Proportional split (35-38%, explicit direction), same 1560px matrix
     as ai-hub/blog/pricing/services. Gap widened to 72-104px (explicit
     direction, wider than the other pages' shared 56px) — this column's
     content (a full constellation, not just a title or a compact card)
     needs more air between it and the tree. 0.85fr/1.5fr = 36.2%, inside
     the requested range at every desktop width. */
  .page-split--skills {
    max-width: 1560px;
    --page-split-intro: 0.85fr;
    --page-split-content: 1.5fr;
    --page-split-gap: clamp(72px, 6vw, 104px);
  }
}

.skills-subtitle {
  max-width: 50ch;
  margin-top: clamp(20px, 2.2vw, 28px);
}

/* No button between the subtitle and the qualities composition (explicit
   direction) — .page-cta simply never appears in pages/skills.njk, so
   there's nothing to override here beyond the intro's own spacing. */

/* Centered and effectively static while scrolling — the exact same
   two-layer stretch-parent/sticky-child mechanism as faq.css's
   .faq-intro/.pricing-cards.css's .pricing-intro: pulled back up by its
   own top-space so it starts flush with the true top of the page, then
   stretched to the full row height; the inner sticky child pins right
   under the header (top: 107px) and fills the rest of the viewport,
   centering its content inside that.

   Gated on viewport HEIGHT as well as width (explicit direction, new for
   this page — the constellation is taller/denser than Pricing's or FAQ's
   own left column): below ~820px of height the whole mechanism is simply
   never activated, so .skills-intro falls back to page-split.css's plain
   `align-items: start` default — normal document flow, no sticky, no
   centering, nothing ever clipped. */
@media (min-width: 1024px) and (min-height: 820px) {
  /* Plain padding-bottom, matching the rest of this page's own rhythm.
     Two earlier attempts at preventing the released sticky column from
     ever visually reaching the translucent header were both explicitly
     reverted per direction: a huge compensating padding-bottom here
     (~390px+, scaling with viewport height) fixed it but left an
     oversized dead gap before the footer ("tout le vide ... c trop");
     a JS scroll-driven opacity fade fixed it without the gap but read
     as "the column doesn't stay fixed" once it faded near the very
     bottom of the page ("pas d'effet fondu quand on scroll"). Per that
     explicit direction the column now just stays visible and pinned for
     the whole page, with neither mitigation — see the report for the
     resulting, deliberately-accepted trade-off. */
  .skills-hero {
    padding-bottom: 130px;
  }

  .skills-intro {
    align-self: stretch;
    /* Real CSS Grid intrinsic-sizing bug found and fixed here (confirmed by
       direct measurement, both directions): a negative MARGIN on a
       `align-self: stretch` grid item gets folded into the row's own
       auto-sizing as extra required height — pulling the item up with
       `margin-top: -191px` inflated the stretched row from feedHeight
       (1250px) to feedHeight + 191px (1441px); adding a matching negative
       `margin-bottom` to try to cancel it instead ADDED another 191px
       (1632px) rather than subtracting it. Either way the intro ended up
       taller than the feed column, which is what let its sticky child's
       *released* (unstuck, static) state travel far enough to still be
       showing — overlapping — the translucent fixed header by the time
       the page reached its true bottom.
       Fix: `position: relative; top: <offset>` instead of a margin. A
       relative offset shifts the box purely at paint time — it reserves
       zero space in the layout, so it can't feed into the row's auto-size
       computation the way a margin does. Visually identical pull-up
       (still starts flush with the true top of the page, same as before);
       verified the row now matches feedHeight exactly. */
    position: relative;
    top: calc(-1 * var(--skills-top-space));
  }

  /* Explicit direction — "centre tout sur la hauteur" — the whole block
     (title + subtitle + constellation, back together as one unit)
     centers as a group now, not just the constellation alone. Real
     number found and fixed here, twice: the block's actual natural
     height is ~720px (measured directly, not the ~640px this was first
     sized for), AND `position: sticky`'s own `top` pins the box's TOP
     edge, not its center — so a `min-height` alone, however generous,
     only ever grows the box *downward*; at a 70px top offset the box's
     own bottom kept landing well past the viewport's bottom edge before
     centering could show any real effect. `top` trimmed back down to
     28px (from 70px, giving up most of that "descend un peu" polish —
     it's now in direct tension with "centre tout", and centering wins)
     to free up real room below; `min-height`'s formula mirrors that same
     28px on the far side too, so the box only ever grows as far as the
     viewport can actually still show, capped at 820px so it still
     doesn't grow unbounded at very tall viewports (the earlier, already-
     fixed bug where a literal 100vh-based height competed with the tree
     column's own ~1300px height). No JS fade, no compensating padding-
     bottom — this column simply stays visible and pinned the whole time
     by explicit direction, accepting that at some viewport heights the
     very end of the page can show it near the header (flagged in the
     report, not chased further per direction). */
  .skills-intro__sticky {
    position: sticky;
    top: calc(var(--header-height) + 28px);
    min-height: min(calc(100vh - var(--header-height) - 56px), 820px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* ---- Right column section headers (Certifications / Arbre de
   compétences) — proportioned down from the H1, shared between both
   sections rather than each partial inventing its own size. Satoshi
   (explicit direction: one title font site-wide, no exceptions) — was
   Space Grotesk before, back when this intentionally contrasted with the
   left column's own "petit H2" (skills-constellation.css), which already
   pairs with the H1's Satoshi voice since it sits directly under it; both
   columns now share the same font. Centered (explicit direction) — both
   the title and the tree's subtitle now center themselves within the
   full width of the right column, not just their own text within their
   own box (margin: 0 auto on the subtitle, which has a max-width and
   would otherwise stay flush-left inside it). */
.skills-section-heading {
  margin: 0;
  font-family: var(--font-satoshi);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.25;
  color: #fff;
  text-align: center;
}

.skills-section-desc {
  margin: 10px auto 0;
  font-family: var(--font-satoshi);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--li-text-secondary);
  max-width: 60ch;
  text-align: center;
}