/* =============================================================================================
   Le premier pas (préfixe ps-) : ce qui se passe après la prise de contact, juste sous la photo de l'équipe.
   Un grand bloc sombre aux coins arrondis, le texte centré en haut : l'étiquette jaune en mono, le titre, la phrase ;
   dessous, trois cartes numérotées en rangée, les deux premières gris foncé (texte blanc, numéro jaune), la troisième
   jaune (texte noir). Au-dessous de 900 px, les cartes s'empilent. Les proportions sont celles du site public.
   ============================================================================================= */
.ps-premier-pas { width: min(1280px, 100% - 32px); margin: 24px auto 0; font-family: var(--ha-sans); }
.ps-carte {
  padding: clamp(56px, 5.6vw, 80px) clamp(24px, 5.6vw, 80px); border-radius: 40px;
  background: var(--ha-noir); color: var(--ha-blanc); text-align: center;
}
.ps-etiquette {
  margin: 0; font-family: var(--ha-mono); font-size: 14px; line-height: 1.1; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ha-jaune);
}
.ps-titre {
  margin: 16px auto 0; font-weight: 900; font-size: clamp(34px, 3.9vw, 56px); line-height: 1.04; letter-spacing: -.032em;
  color: var(--ha-blanc); text-wrap: balance;
}
.ps-chapeau { max-width: 40em; margin: 16px auto 0; font-size: 18px; line-height: 1.5; color: var(--ha-blanc); text-wrap: pretty; }
.ps-etapes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  margin: 40px 0 0; padding: 0; list-style: none; text-align: left;
}
.ps-etape { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 24px; background: rgba(255, 255, 255, .08); }
.ps-numero { font-family: var(--ha-mono); font-size: 14px; line-height: 1.1; color: var(--ha-jaune); }
.ps-etape-titre { margin: 0; font-weight: 700; font-size: clamp(24px, 2.2vw, 31px); line-height: 1.2; letter-spacing: -.02em; color: var(--ha-blanc); }
.ps-etape-texte { margin: 0; font-size: 18px; line-height: 1.5; color: var(--ha-blanc); text-wrap: pretty; }
.ps-etape-jaune { background: var(--ha-jaune); }
.ps-etape-jaune .ps-numero, .ps-etape-jaune .ps-etape-titre, .ps-etape-jaune .ps-etape-texte { color: var(--ha-noir); }

@media (max-width: 899px) {
  .ps-etapes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .ps-premier-pas { width: calc(100% - 16px); margin-top: 16px; }
  .ps-carte { padding: 48px 16px 16px; border-radius: 28px; }
  .ps-chapeau, .ps-etape-texte { font-size: 16px; }
  .ps-etapes { margin-top: 32px; }
}