/* Process Steps (steps-hm) — bric.css
   Source de vérité des styles, inlinés dans data.bric à la génération. */

.steps-hm-wrap {
  --steps-hm-connector: #2563eb;
  --steps-hm-number: #2563eb;
  --steps-hm-number-text: #ffffff;
  --steps-hm-title-color: inherit;
  --steps-hm-desc-color: inherit;

  display: block;
  width: 100%;
  padding: 2.5rem 1rem;
  box-sizing: border-box;
}

.steps-hm-wrap * {
  box-sizing: border-box;
}

.steps-hm {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
  max-width: 1100px;
  margin: 0 auto;
}

.steps-hm-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  padding: 0 0.75rem;
  opacity: 1;
  transform: none;
}

.steps-hm-marker {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}

.steps-hm-number {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--steps-hm-number);
  color: var(--steps-hm-number-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1;
}

.steps-hm-connector {
  flex: 1 1 auto;
  height: 2px;
  width: auto;
  min-height: 0;
  background: var(--steps-hm-connector);
  margin: 0 0.5rem;
}

.steps-hm-item:last-child .steps-hm-connector {
  display: none;
}

.steps-hm-body {
  margin-top: 1rem;
}

.steps-hm-title {
  margin: 0 0 0.4rem;
  font-size: 1.75rem;
  line-height: 1.3;
  min-height: calc(1.75rem * 1.3 * 2);
  font-weight: 600;
  color: var(--steps-hm-title-color);
  text-align: left;
}

.steps-hm-desc {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--steps-hm-desc-color);
  text-align: left;
}

/* Nombre d'étapes visibles (3 à 5), sans retoucher le CSS */
.steps-hm-wrap[data-count="3"] .steps-hm-item:nth-child(n + 4) {
  display: none;
}
.steps-hm-wrap[data-count="3"] .steps-hm-item:nth-child(3) .steps-hm-connector {
  display: none;
}

.steps-hm-wrap[data-count="4"] .steps-hm-item:nth-child(n + 5) {
  display: none;
}
.steps-hm-wrap[data-count="4"] .steps-hm-item:nth-child(4) .steps-hm-connector {
  display: none;
}

/* Tablette (iPad et similaires) : grille 2 colonnes plutôt que de tasser
   4-5 étapes sur une seule ligne ou de passer en empilement vertical.
   Le connecteur horizontal n'a pas de sens une fois les étapes réparties
   sur plusieurs lignes (à quoi relier la dernière étape d'une ligne ?) —
   les numéros + l'ordre de lecture gauche-à-droite/haut-en-bas suffisent
   à indiquer la progression. */
@media (min-width: 576px) and (max-width: 991.98px) {
  .steps-hm {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 2rem;
    max-width: 640px;
  }

  .steps-hm-connector {
    display: none;
  }

  .steps-hm-marker {
    justify-content: center;
  }
}

/* Mobile : empilement vertical, connecteur qui pivote */
@media (max-width: 575.98px) {
  .steps-hm {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .steps-hm-item {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    padding: 0;
  }

  .steps-hm-marker {
    flex-direction: column;
    width: auto;
    align-items: center;
    align-self: stretch;
    margin-right: 1rem;
  }

  .steps-hm-connector {
    width: 2px;
    height: auto;
    min-height: 28px;
    flex: 1 1 auto;
    margin: 0.4rem 0;
  }

  .steps-hm-body {
    margin-top: 0;
    padding-bottom: 1.75rem;
  }

  .steps-hm-item:last-child .steps-hm-body {
    padding-bottom: 0;
  }
}

/* Apparition progressive au scroll — activée seulement si le JS a pu
   s'exécuter (voir script inline). Sans JS (ex: canvas de construction
   Blocsapp), les étapes restent visibles par défaut. */
.steps-hm-wrap.steps-hm-js .steps-hm-item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: var(--steps-hm-delay, 0ms);
}

.steps-hm-wrap.steps-hm-js .steps-hm-item.steps-hm-in-view {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .steps-hm-wrap.steps-hm-js .steps-hm-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}