/* ---------- Titres-verbes des 5 étapes ----------
   Un par bloc (Générer, Valider…), en tête de sa colonne texte
   (.hp-feature-copy). Quand on arrive sur le bloc, js/main.js
   (initStepTitles) pose :
   - .is-reached (définitif) : le verbe se remplit de gauche à droite ;
   - .is-current (un seul à la fois, le bloc le plus visible) : le numéro
     passe en teal.
   L'état « pas encore atteint » n'existe qu'avec JS (.js-reveal) : sans JS,
   les titres s'affichent normalement. */
.hp-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}

/* Numéro de chapitre : simple chiffre en exposant du verbe, sans pastille,
   suspendu dans la marge gauche : le verbe reste calé sur le bord de la
   colonne, comme le reste du texte. Le « / 06 » reste dans le DOM (lecteurs
   d'écran) mais n'est pas affiché. */
.hp-step-n {
  position: absolute;
  top: 2px;
  right: calc(100% + 10px);
  color: var(--color-faint);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  transition: color 0.4s ease;
}

.hp-step-of {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hp-step-verb {
  flex-shrink: 0;
  /* Cadre-masque (overflow: hidden) : avec line-height: 1, les accents
     (Générer) et jambages (Signer) en dépassent et seraient rognés. On
     agrandit la boîte de tous côtés, et les marges négatives annulent cet
     agrandissement dans la mise en page. */
  overflow: hidden;
  /* À gauche, 0,05em de plus : compense l'approche des capitales de Fraunces
     (P, F, S, G, C ≈ 2px à 44px) pour caler le verbe optiquement sur le
     bord de la colonne. */
  margin: -0.2em -0.08em -0.28em -0.11em;
  padding: 0.2em 0.08em 0.28em 0.06em;
  color: var(--color-black);
  font-family: var(--font-serif);
  font-size: 44px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -2px;
}

.hp-step.is-reached .hp-step-n {
  color: var(--color-muted);
}

.hp-step.is-current .hp-step-n {
  color: var(--color-teal);
}

.hp-step-verb > span {
  display: inline-block;
}

/* Entrée du verbe : il monte depuis sous la ligne, dans son cadre-masque,
   comme le verbe du chapitre du player (css/player.css). */
.js-reveal .hp-step-verb > span {
  transform: translateY(110%);
}

.js-reveal .hp-step.is-reached .hp-step-verb > span {
  transform: none;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .hp-step-verb > span,
  .hp-step-n {
    transition: none !important;
  }
}

/* ---------- Blocs fonctionnalités ---------- */
.hp-feature {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 78px;
  padding: 64px 0;
  scroll-margin-top: 24px;
}

.hp-feature--rev .hp-feature-copy {
  order: 2;
}

.hp-feature-visual {
  position: relative;
  isolation: isolate;
  --reveal-delay: 120ms;
}

/* Fond décoratif derrière chaque mockup : l'englobe entièrement, avec la
   même marge de chaque côté. */
.hp-feature-visual::before {
  content: "";
  position: absolute;
  inset: -34px;
  z-index: -1;
  border-radius: var(--radius-xl);
  background: linear-gradient(200deg, #fbf7ef, #f5eee1);
}

.hp-feature .hp-feature-copy {
  max-width: 500px;
}

@media (max-width: 991px) {
  .hp-feature {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    padding: 56px 0;
  }

  .hp-feature--rev .hp-feature-copy {
    order: 0;
  }

  .hp-feature .hp-feature-copy {
    max-width: 640px;
  }

  .hp-feature-visual::before {
    inset: -16px;
  }
}

@media (max-width: 640px) {
  /* Gouttière trop étroite pour suspendre le numéro : il revient dans le
     flux, devant le verbe. */
  .hp-step-n {
    position: static;
    align-self: flex-start;
    margin-top: 2px;
    font-size: 11px;
  }

  /* Plus petit : « Générez vos contrats » tient sur la largeur d'un mobile */
  .hp-step-verb {
    font-size: 36px;
    letter-spacing: -1px;
  }

  .hp-feature {
    gap: 28px;
    padding: 44px 0;
  }

  .hp-feature-visual::before {
    inset: -10px;
    border-radius: var(--radius-lg);
  }
}