/* ==========================================================================
   Hero fit — "Pour qui / Pour quoi" pair of stacked rows under the hero
   intro. A single 3-col grid (not flex rows) so each section's trio of
   cards shares row tracks and stretches to match the taller one — that's
   the whole reason .hero__fit's children are a flat, row-major list (heading,
   heading, card, card, card, card, card, card) rather than nested per-section
   wrappers; explicit grid-row/grid-column placement below re-sequences that
   flat list into "Pour qui" row (heading + its 3 cards) above "Pour quoi"
   row (heading + its 3 cards). Cards reuse .glass--card/--light (see
   glass.css) for the bordered white-card treatment; this file only owns
   layout + card-internal type.
   Blocks: .hero__fit, .hero__fit-heading, .hero__fit-card, .hero__fit-icon,
           .hero__fit-pill, .hero__fit-title, .hero__fit-text
   ========================================================================== */

.hero__fit {
  position: relative;
  width: 100%;
  max-width: var(--container-max-width);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--space-5);
  row-gap: var(--space-5);
  align-items: stretch;
}

/* Re-sequence the flat DOM list (heading-qui, heading-quoi, card x6 in
   alternating qui/quoi order) into two stacked rows: "Pour qui" heading + its
   3 cards (nth-of-type 1, 3, 5) side by side, then "Pour quoi" heading + its
   3 cards (nth-of-type 2, 4, 6) side by side below. */
.hero__fit-heading:nth-of-type(1) { grid-row: 1; grid-column: 1 / -1; }
.hero__fit-card:nth-of-type(1) { grid-row: 2; grid-column: 1; }
.hero__fit-card:nth-of-type(3) { grid-row: 2; grid-column: 2; }
.hero__fit-card:nth-of-type(5) { grid-row: 2; grid-column: 3; }

.hero__fit-divider:nth-of-type(2) {
  display: block;
  grid-row: 3;
  grid-column: 1 / -1;
  width: 100%;
  height: 1px;
  margin: 0;
  border: none;
  background: var(--glass-border-strong);
}

/* "Pour quoi" heading is a pair of tab buttons (see .hero__fit-heading--tab
   below) rather than a lone h2, so the row-4 grid slot the old heading used
   to occupy is claimed by this wrapper instead. */
.hero__fit-heading-row {
  grid-row: 4;
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.hero__fit-card:nth-of-type(2) { grid-row: 5; grid-column: 1; }
.hero__fit-card:nth-of-type(4) { grid-row: 5; grid-column: 2; }
.hero__fit-card:nth-of-type(6) { grid-row: 5; grid-column: 3; }

/* The other divider (before the "Pour qui" heading) has no separator role
   once the CTA sits outside .hero__fit — kept in the DOM for the mobile
   re-sequencing below, hidden here. */
.hero__fit-divider {
  display: none;
}

/* Gradient-clip + italic treatment reused from .stat-highlight__number, so
   these column labels read as a deliberate flourish rather than another
   plain heading competing with .hero__fit-title below it. */
.hero__fit-heading {
  position: relative;
  display: inline-block;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, var(--color-red-light) 0%, var(--color-red) 55%, var(--color-red-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: var(--space-3);
}

/* Underline only the first word so the accent sits under real glyphs
   instead of a detached bar centered under the whole (italic-skewed)
   heading box. Repeats the parent's gradient text-clip on this span itself
   — position:relative + display:inline-block gives it its own paint layer,
   and on mobile Safari a positioned descendant like that doesn't inherit
   the ancestor's background-clip:text fill, so without this the word
   renders fully transparent (invisible) instead of gradient-filled. */
.hero__fit-heading-accent {
  position: relative;
  display: inline-block;
  background: linear-gradient(180deg, var(--color-red-light) 0%, var(--color-red) 55%, var(--color-red-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__fit-heading-accent::after {
  content: "";
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: -0.14em;
  height: 4px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-red-light), var(--color-red-dark));
}

/* "Pour quoi" / "Pourquoi nous" switcher — two buttons sharing
   .hero__fit-heading's gradient-italic type, so the active one just IS the
   section heading; the inactive one drops the gradient to a flat muted
   color instead of hiding, so the other option stays visibly reachable.
   Button reset (background/border/padding/font) undoes UA button styling
   since these are <button> elements for click + keyboard access, not h2s. */
.hero__fit-heading--tab {
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  /* font-family only — the full `font` shorthand would also reset
     font-size/weight/style/line-height back to inherit, undoing
     .hero__fit-heading's sizing (this is why the tabs briefly rendered
     body-text-sized instead of matching "Pour qui"). */
  font-family: inherit;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.hero__fit-heading--tab:not(.is-active) {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--color-text-secondary);
  opacity: 0.6;
}

.hero__fit-heading--tab:not(.is-active):hover {
  opacity: 0.85;
}

.hero__fit-heading--tab:not(.is-active) .hero__fit-heading-accent {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: inherit;
}

.hero__fit-heading--tab:not(.is-active) .hero__fit-heading-accent::after {
  display: none;
}

.hero__fit-heading-sep {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 400;
  font-style: normal;
  color: var(--color-text-secondary);
  opacity: 0.4;
}

/* .hero__fit-alt-card (the "Pourquoi nous" cards) shares this look but
   deliberately isn't named .hero__fit-card: that class is also the target
   of the nth-of-type(N) row/column placement rules above, which count
   position among same-tag siblings under the *nearest* parent — since
   these cards sit under .hero__fit-alt instead of .hero__fit, reusing the
   same class would make them pick up those rules too (e.g. the 2nd alt
   card matching :nth-of-type(2)) and get shoved into the desktop 3-col
   grid's row/column slots instead of laying out in .hero__fit-alt's own
   grid below. */
.hero__fit-card,
.hero__fit-alt-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-6);
  text-align: left;
  background: #f9f9f8;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.hero__fit-card:hover,
.hero__fit-alt-card:hover {
  background: var(--color-white);
  border-color: var(--color-red);
}

/* Set by js/hero-fit-switcher.js on the 3 "Pour quoi" cards while
   .hero__fit-alt is showing instead — display:none drops each card out of
   grid flow entirely, freeing row 5 (desktop) / rows 8-10 (stacked mobile)
   for .hero__fit-alt's own auto-placement below. */
.hero__fit-card.is-hidden {
  display: none;
}

.hero__fit-icon {
  color: var(--color-red);
  margin-bottom: var(--space-2);
}

.hero__fit-icon svg {
  width: 26px;
  height: 26px;
  display: block;
}

.hero__fit-pill {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-white);
  border: 1px solid var(--glass-border-strong);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  margin-bottom: var(--space-1);
}

.hero__fit-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text-primary);
}

.hero__fit-text {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

/* Closing line under the "Pour quoi" row, echoing the headings' italic
   treatment but in plain body type so it reads as a summary, not another
   heading. Auto-flows into the grid's next row (row 6) after the "Pour
   quoi" cards (row 5) — grid-column spans the full width since it isn't
   one of the 3 card columns. */
.hero__fit-outro {
  grid-column: 1 / -1;
  margin-top: var(--space-2);
  font-size: var(--fs-md);
  font-weight: 400;
  font-style: italic;
  text-align: center;
  color: var(--color-text-secondary);
}

/* "Pourquoi nous ?" panel — swapped in for the 3 "Pour quoi" cards by
   js/hero-fit-switcher.js. Its 4 items reuse the same card look
   (.hero__fit-alt-card, see the comment above .hero__fit-card) in their
   own 2-col grid rather than trying to force 4 items into the outer
   grid's 3 columns. No explicit grid-row on .hero__fit-alt itself: with
   the 3 cards above gone from grid flow (display:none), row 5 (desktop) /
   rows 8-10 (mobile stack) are free again and this is next in DOM order,
   so the outer grid's auto-placement drops it straight into that freed
   space. */
.hero__fit-alt {
  display: none;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--space-5);
  row-gap: var(--space-5);
}

.hero__fit-alt.is-active {
  display: grid;
}

/* Sized up from the standard .hero__fit-title: these are full sentences
   ("On part de vous, de vos fondamentaux, pas d'une idée"), not the
   2-4 word titles the other cards use, and at the base size they read as
   an afterthought next to how much room each card has on desktop. */
.hero__fit-alt-card .hero__fit-title {
  font-size: 1.75rem;
}

/* Bracket that spans the full width of the grid (its column gaps included),
   echoing the "|______|" shape. Drawn as real borders (not background
   strips) so border-radius can round the bottom corners into a smooth
   curve where the sides meet the base, instead of a hard right angle.
   Sized taller than it needs to be and pulled up with a negative margin
   so its top edge rides up over the cards' bottom edge — reads as a clip
   cupping the columns rather than a bar sitting below them. */
.hero__fit-bracket {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: calc(var(--container-max-width) + 40px);
  height: var(--space-8);
  margin: calc(-1 * var(--space-8) - 8px) auto 0;
  border-left: 3px solid var(--color-red);
  border-right: 3px solid var(--color-red);
  border-bottom: 3px solid var(--color-red);
  border-radius: 0 0 32px 32px;
}

/* Downward-pointing arrowhead hanging off the bracket's bottom edge, as if
   the whole "Pour qui / Pour quoi" block funnels into a single point below. */
.hero__fit-bracket::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -22px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 22px solid var(--color-red);
}

/* Below 1180px the 3-col grid drops to 1 column, so each row's 3 side-by-side
   cards would stack in DOM order (card1, card3, card5 then card2, card4,
   card6) rather than reading top to bottom sensibly, and the divider(2) rule
   above only marks the seam between the two rows, not the one above "Pour
   qui". Re-sequence via explicit grid-row/grid-column so it reads divider ->
   qui-heading -> its 3 cards -> divider -> quoi-heading -> its 3 cards
   instead — the two .hero__fit-divider hr's mark the seams against the CTA
   above and against "Pour quoi" below.
   The threshold sits well above the old 900px: each card's pill badge holds
   a full French phrase ("Fondateurs d'entreprises technologique", "Cycles
   supérieurs : étudiants ou déjà en poste"), and a 3-col track only has
   room for that on one or two lines once the container itself is wide
   enough — between 900-1180px the columns got narrow enough to wrap pills
   to 3 lines and stack the cards unevenly. */
@media (max-width: 1180px) {
  .hero__fit {
    grid-template-columns: 1fr;
  }

  .hero__fit-divider {
    display: block;
    grid-column: 1 / -1;
    width: 100%;
    height: 1px;
    margin: 0;
    border: none;
    background: var(--glass-border-strong);
  }

  .hero__fit-divider:nth-of-type(1) { grid-row: 1; }
  .hero__fit-heading:nth-of-type(1) { grid-row: 2; }
  .hero__fit-card:nth-of-type(1) { grid-row: 3; grid-column: 1; }
  .hero__fit-card:nth-of-type(3) { grid-row: 4; grid-column: 1; }
  .hero__fit-card:nth-of-type(5) { grid-row: 5; grid-column: 1; }

  .hero__fit-divider:nth-of-type(2) { grid-row: 6; }
  .hero__fit-heading-row { grid-row: 7; }
  .hero__fit-card:nth-of-type(2) { grid-row: 8; grid-column: 1; }
  .hero__fit-card:nth-of-type(4) { grid-row: 9; grid-column: 1; }
  .hero__fit-card:nth-of-type(6) { grid-row: 10; grid-column: 1; }

  /* The "Pour qui" heading still spans the full stretched grid track (see
     the block comment above .hero__fit-heading), so its own text-align —
     not justify-self — is what pins it left; the "Pour quoi" side is now a
     tab pair rather than a lone heading, so its row is right-aligned via
     the wrapper's justify-content instead, echoing the desktop pairing
     even though both are now full rows. Sized up from the desktop clamp
     (which floors out at a fairly small 2rem on narrow viewports) and
     pulled closer to the card grid below by shrinking the heading's own
     margin, on top of a tighter row-gap shared by every row in the stack. */
  .hero__fit {
    row-gap: var(--space-4);
  }

  .hero__fit-heading {
    font-size: clamp(1.75rem, 8vw, 2.25rem);
    margin-bottom: var(--space-1);
  }

  .hero__fit-heading:nth-of-type(1) { text-align: left; }
  .hero__fit-heading-row { justify-content: flex-end; }

  .hero__fit-alt {
    grid-template-columns: 1fr;
  }

  .hero__fit-alt-card .hero__fit-title {
    font-size: var(--fs-lg);
  }

  /* The desktop pull-up rides the bracket over the grid's shared bottom
     edge, and its "cup" shape only makes sense spanning the full 3-col
     width — it doesn't read right against a single stacked column, so it's
     hidden entirely on mobile rather than reworked into a smaller pointer. */
  .hero__fit-bracket {
    display: none;
  }
}

/* Below 768px .hero itself drops to a 5px inline padding (see hero.css) so
   its own text/CTA can run wider, but that would drag .hero__fit's cards
   out to nearly full-bleed too — much wider than every section below it,
   which keeps the standard 20px --gutter-inline. Add back the difference
   here so the grid lines up with the rest of the page instead of tracking
   the hero's edge. */
@media (max-width: 768px) {
  .hero__fit {
    padding-inline: calc(var(--gutter-inline) - 5px);
  }

  /* Drop the "/" between the "Pour quoi" / "Pourquoi nous" tabs — with the
     row already right-aligned and tight on width at this size, the
     separator reads as clutter rather than a needed divider. */
  .hero__fit-heading-sep {
    display: none;
  }
}

/* On-load entrance, continuing the hero's fade-in-up stagger after the CTA
   (see hero.css). Reuses .reveal's plain look — 40px travel, no blur — since
   this grid sits inside the hero and should animate in with the rest of it
   rather than wait for a scroll trigger, but row by row (qui heading, qui's
   3 cards, quoi heading, quoi's 3 cards, bracket) so nothing lands at once. */
.hero__fit-heading.fade-in-up,
.hero__fit-heading-row.fade-in-up,
.hero__fit-card.fade-in-up,
.hero__fit-bracket.fade-in-up {
  --fade-up-distance: 40px;
  animation-duration: 0.6s;
}

.hero__fit-heading.fade-in-up:nth-of-type(1) { animation-delay: 1.7s; }

.hero__fit-card.fade-in-up:nth-of-type(1),
.hero__fit-card.fade-in-up:nth-of-type(3),
.hero__fit-card.fade-in-up:nth-of-type(5) { animation-delay: 1.85s; }

/* "Pour quoi" heading is now the .hero__fit-heading-row tab pair, not a
   lone nth-of-type(2) h2 — same slot in the stagger, just a different
   selector to land on. */
.hero__fit-heading-row.fade-in-up { animation-delay: 1.97s; }

.hero__fit-card.fade-in-up:nth-of-type(2),
.hero__fit-card.fade-in-up:nth-of-type(4),
.hero__fit-card.fade-in-up:nth-of-type(6) { animation-delay: 2.09s; }

.hero__fit-bracket.fade-in-up { animation-delay: 2.21s; }

@media (prefers-reduced-motion: reduce) {
  .hero__fit-heading.fade-in-up,
  .hero__fit-card.fade-in-up,
  .hero__fit-bracket.fade-in-up {
    animation: none;
  }
}