/* ============================================================
   AMALAB — panel-steps.css (V20.3)
   Partner panel « Une équipe en renfort… » : pinned step journey.
   Same family as the home « Notre métier » benefits journey
   (js/benefits-journey.js): the block pins for 540svh and scroll
   makes the 7 mission steps APPEAR one at a time — each beat lands
   a row (fade-up + motion-beats hairline draw + idx ignition) in
   sync with the photo crossfade and the counter chip. Steps
   accumulate: passed rows stay, dimmed — the keys being handed
   over, one by one. Bidirectional scrub, reading dwells between
   beats (js/panel-steps.js).
   Left column keeps the 528px-class rounded-square photo (1:1,
   radius 18, navy-deep shadow); the active image rides above the
   outgoing one (z 2 > z 1) so backward swaps never dip to navy.
   Degrades: reduced motion / no JS → static photo + plain 7-item
   list; ≤880px → the V20.2 sticky-photo scroll (no pin), steps
   activate at a 42% focus line.
   ============================================================ */

/* Escape the home editorial cap: .home main .editorial-list-block
   is 780px site-wide; this block alone spans the full container. */
.home main .editorial-list-block--wide {
  max-width: none;
}

/* ---------- pin : scroll room for 7 continuous beats ----------
   Timeline is 7 units (MORPH 1 × 7, no dwell freeze — see panel-steps.js,
   which scrubs the rows 1:1 with scroll). At 240svh that's ~34svh per beat
   — the steps land in brisk succession, short scroll distance between
   points (the continuous scrub keeps it readable at this pace). svh
   self-compresses with the window; short laptops get a shorter pin below. */
.panel-steps-pin { height: calc(240svh - var(--nav-h)); }
.panel-steps-viewport {
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  height: calc(100svh - var(--nav-h));
  display: flex;
  flex-direction: column;
}

/* Persistent header of the pinned stage — « Comment nous allons travailler
   ensemble : ». V24: the panel's section-head (h2 + intro p) was removed on
   owner brief, so this line IS the section heading now — promoted p → h2 and
   sized up to subtitle scale. It stays deliberately BELOW --step-h2 (32→48):
   it lives inside the sticky stage and has to share the viewport with the
   photo + 7 rows, so a full h2 would push step 07 off the bottom. */
.panel-steps-kicker {
  flex: none;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); /* 24 → 36 */
  line-height: 1.2;
  padding-top: clamp(12px, 2.6svh, 28px);
  padding-bottom: clamp(10px, 2svh, 22px);
}

/* V24 (owner): lift the whole group — step 07 used to land too low in the
   stage. Bottom padding shrinks the centred content box, raising the group
   by half the padding; the rows also step down slightly (below). Photo and
   list share the padding so they rise together and stay optically aligned. */
.panel-steps {
  flex: 1;
  min-height: 0;
  display: grid;
  /* photo ≈ half the container (~530px at the 1200px cap) */
  grid-template-columns: minmax(0, 11fr) minmax(0, 10fr);
  gap: clamp(32px, 5vw, 72px);
  align-content: center;
  align-items: center;
  /* Bounded, viewport-proportional — the group must still CENTRE inside what
     is left, so this stays well under the slack the row pass below frees up
     (~76px at 900h). A fixed lift would overflow short windows, where the
     rows keep their width-driven height but the stage shrinks. */
  padding-bottom: clamp(12px, 6svh, 80px);
}

/* ---------- media column (inside the pinned stage) ---------- */
.panel-steps-media {
  /* the 1:1 frame must always clear the stage: cap the width by the
     viewport height minus the kicker + breathing budget */
  /* V24: budget raised 190 → 215 — the kicker grew to subtitle scale and the
     stage took a bottom padding, so the frame needs to give back that room. */
  /* Floored at 140px: on a wide-but-short window (a landscape phone reports
     932×430) the subtraction goes negative and the frame collapses. */
  width: min(100%, max(140px, calc(100svh - var(--nav-h) - 215px)));
  margin-inline: auto;
}
/* Rounded square — the brand-mark motif at surface scale.
   Radius + depth reuse the quote-card family (18px, navy-deep
   ink shadow; alphas lifted so the lift registers on the navy
   band). */
.panel-steps-frame {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--inv-border);
  border-radius: 18px;
  background: var(--navy-dark);
  box-shadow: 0 2px 6px rgba(10, 26, 32, 0.22), 0 28px 56px rgba(10, 26, 32, 0.30);
}
.panel-steps-frame img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.045);
  transition: opacity 0.9s var(--ease-out), transform 1.4s var(--ease-out);
}
/* Incoming step rides on top (z 2 > outgoing z 1) so it always
   cross-dissolves OVER the outgoing one regardless of DOM order —
   swapping to an earlier-DOM image no longer fades in behind its
   sibling and lets the navy frame bleed through mid-swap. The slower
   0.9s opacity + slow 1.4s scale drift keep the dissolve silky, calm. */
.panel-steps-frame img.is-active {
  z-index: 2;
  opacity: 1;
  transform: scale(1);
}
/* Count chip: flush in the corner — the frame's overflow clip
   bends its bottom-left into the same 18px curve; the outer
   corner echoes the card radius token. */
.panel-steps-count {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3; /* above the active image (z 2) so the count never dips under a swap */
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px 16px;
  background: var(--navy);
  border-top: 1px solid var(--inv-border);
  border-right: 1px solid var(--inv-border);
  border-top-right-radius: var(--radius-card);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--inv-fg);
}
.panel-steps-count .cur { color: var(--orange); font-size: 1.25rem; }

/* ---------- step rows : the appearing stack ----------
   All 7 rows reserve their slot from the start (no layout shift);
   the journey engine adds .is-in when a step's beat lands and keeps
   .is-active on the newest one. Rows must fit the stage 7-high, so
   the rule-list padding steps down; the copy stays one step up the
   scale (step-lead → step-h3) so the mission reads at panel scale. */
/* V24 (owner): step 07 sat too low. The stack's height is driven by WRAPPING,
   not by min-height — 5 of the 7 lines run to two rows at --step-h3 in this
   column, so leading is the real lever. Tightening 1.35 → 1.25 and trimming
   the block padding reclaims ~76px across the stack (624 → 548) without
   touching the type scale; .panel-steps then biases the whole group upward.
   The column can't be widened instead: the 1:1 photo beside it is already
   width-constrained, and single-line rows would need ~19px type. */
.steps-list > li {
  min-height: clamp(48px, 7svh, 64px);
  padding-block: clamp(6px, 1.1svh, 10px);
  font-size: var(--step-h3);
  line-height: 1.25;
}
/* Wayfinding numerals scale with the copy, holding a constant ~6px lead
   over it (parallel 0.5vw slope) so 01–07 stay dominant. The fixed 48px
   idx column (components.css) still clears "07" at 34px. */
.steps-list .idx {
  font-size: clamp(1.75rem, 1.625rem + 0.5vw, 2.125rem); /* 28 → 34 */
  line-height: 1.2;
}

/* Journey appearance — desktop pin only (mobile keeps every row visible
   and scrolls past the sticky photo instead). The engine (js/panel-steps.js)
   scrubs opacity + translateY per frame from the eased scroll position, so
   there is NO transition here — a CSS transition would trail the per-frame
   inline writes and smear the scrub. These class rules stay only as the
   pre-paint / no-rAF fallback (inline styles from the engine override them).
   The .is-in hairline draw + idx ignition remain on the discrete beat
   (css/motion-beats.css). */
@media (min-width: 881px) {
  html.js .panel-steps-pin:not(.is-static) .steps-list > li {
    opacity: 0;
    transform: translateY(14px);
    transition: none;
  }
  html.js .panel-steps-pin:not(.is-static) .steps-list > li.is-in {
    opacity: 0.35;
    transform: none;
  }
  html.js .panel-steps-pin:not(.is-static) .steps-list > li.is-in.is-active {
    opacity: 1;
  }
}

/* ---------- scroll-linked arrival (desktop pin only) ----------
   js/panel-steps.js writes --arr (0→1) while the block enters the viewport,
   spilling ~15% into the pin: the kicker settles first, the photo follows,
   still finishing as row 01 starts to arrive — the entrance and the journey
   read as one continuous chain. Scrubbed from scroll (reversible): no
   transition, and the kicker rule outweighs the Layer-1 one-shot .reveal
   (base.css) so the scrub owns it here; ≤880px keeps the one-shot reveal.
   var(--arr, 1) defaults to the settled state (no JS / reduced motion /
   engine off / deep links). */
@media (min-width: 881px) {
  html.js .panel-steps-pin:not(.is-static) .panel-steps-kicker {
    --arr-kicker: clamp(0, calc(var(--arr, 1) / 0.5), 1);
    opacity: var(--arr-kicker);
    transform: translateY(calc((1 - var(--arr-kicker)) * 18px));
    transition: none;
  }
  html.js .panel-steps-pin:not(.is-static) .panel-steps-media {
    --arr-media: clamp(0, calc((var(--arr, 1) - 0.15) / 0.75), 1);
    opacity: var(--arr-media);
    transform: translateY(calc((1 - var(--arr-media)) * 30px));
  }
}

/* ---------- static layout : no JS, or reduced motion (JS adds .is-static)
   The pin collapses to normal flow: photo sticky beside a plain 7-item
   list, first image held. ---------- */
html:not(.js) .panel-steps-pin,
.panel-steps-pin.is-static { height: auto; }
html:not(.js) .panel-steps-viewport,
.panel-steps-pin.is-static .panel-steps-viewport {
  position: static;
  height: auto;
  display: block;
}
html:not(.js) .panel-steps-kicker,
.panel-steps-pin.is-static .panel-steps-kicker {
  padding-top: 0;
  padding-bottom: var(--s-4);
}
html:not(.js) .panel-steps,
.panel-steps-pin.is-static .panel-steps { align-items: start; }
html:not(.js) .panel-steps-media,
.panel-steps-pin.is-static .panel-steps-media {
  position: sticky;
  top: clamp(calc(var(--nav-h) + 24px), 22vh, 200px);
  width: 100%;
}
html:not(.js) .panel-steps-frame img:first-child { opacity: 1; transform: none; }

/* ---------- short windows : compress the pin + the type ----------
   Same pass as the benefits journey, opening earlier (720 vs 620):
   the 7-row stack needs more of the stage than the one-item benefits
   reel, and at ≤720px heights the last row clipped past the viewport.
   Rows step back down (step-lead) and the pin shortens to keep the
   per-beat scroll distance comfortable. */
@media (min-width: 881px) and (max-height: 720px) {
  .panel-steps-pin { height: calc(220svh - var(--nav-h)); }
  .panel-steps-media { width: min(100%, max(140px, calc(100svh - var(--nav-h) - 175px))); }
  /* Short windows can't afford both the subtitle and the lift — the kicker
     drops back toward lead scale and the stage keeps only a token padding. */
  .panel-steps-kicker { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); }
  .panel-steps { padding-bottom: clamp(12px, 3svh, 32px); }
  .steps-list > li {
    min-height: clamp(44px, 7.4svh, 60px);
    padding-block: clamp(6px, 1.2svh, 10px);
    font-size: var(--step-lead);
  }
  .steps-list .idx { font-size: 1.5rem; }
}

/* ---------- mobile : V20.2 sticky-photo scroll, no pin ----------
   The photo sticks under the header while the full list scrolls past a
   42% focus line (js/panel-steps.js mobile engine). Rows are always
   visible; the active one leads, the others dim. */
@media (max-width: 880px) {
  .panel-steps-pin { height: auto; }
  .panel-steps-viewport {
    position: static;
    height: auto;
    display: block;
  }
  .panel-steps-kicker {
    padding-top: 0;
    padding-bottom: var(--s-4);
  }
  .panel-steps { display: block; }
  .panel-steps-media {
    position: sticky;
    top: var(--nav-h);
    z-index: 5;
    background: var(--navy);
    padding-block: 10px;
    margin-bottom: var(--s-5);
    width: 100%;
  }
  /* A full-width square is too heavy for the sticky bar — cap it
     near the old 3:2 bar's footprint, centred in the navy strip. */
  .panel-steps-frame {
    max-width: 244px;
    margin-inline: auto;
  }
  .panel-steps-count { padding: 6px 12px; }
  .panel-steps-count .cur { font-size: 1.1rem; }
  .steps-list > li { min-height: clamp(84px, 12vh, 120px); }
  html.js .panel-steps-pin:not(.is-static) .steps-list > li {
    transition: opacity 0.35s var(--ease-out);
  }
  html.js .panel-steps-pin:not(.is-static) .steps-list > li:not(.is-active) {
    opacity: 0.35;
  }
}

/* ---------- degrade ---------- */
@media (prefers-reduced-motion: reduce) {
  .panel-steps-frame img {
    transition: none;
    transform: none;
  }
  .steps-list > li {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}