/* « Comment ça se passe ? » — frise verticale.
   Un fil qui descend à gauche, une pastille par étape, le numéro et le texte à
   droite du fil. Rien ne traverse le fil : la pastille s'y pose, le texte est
   décalé.

   Le fil n'est pas un trait unique posé derrière tout le bloc mais un segment
   par étape, du point courant au point suivant. C'est ce qui lui permet de
   s'arrêter net à la dernière pastille, sans mesure ni JavaScript, et de se
   découvrir étape par étape.

   Les classes de maquette cdp-s145 (la carte) et cdp-s146 (la grille) ont été
   retirées du contenu Elementor. Sans elles, la mise en page retombe sur celle
   d'Elementor — `.e-con.e-flex{display:flex}` — qui remet les étapes en ligne.
   D'où le !important sur les seules propriétés de structure : c'est ici, et
   nulle part ailleurs, que la mise en page de ce bloc est décidée.

   Comme ailleurs sur le site, l'état d'attente n'est appliqué que sous
   .hf-etapes--prete, classe posée par le script : sans JavaScript la frise
   s'affiche entière et immobile. */

.hf-etapes{
  position:relative;
  max-width:880px;
  padding-left:36px;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  gap:34px !important;
}

.hf-etape{
  position:relative;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  gap:8px !important;
  padding:0 !important;
  min-width:0;
}
/* Les vignettes de la maquette : conservées dans la page, simplement masquées. */
.hf-etape__icone{display:none !important}

/* ── La pastille ─────────────────────────────────────────────────────────── */
/* Centre à 5,5 px du bord de la grille : la pastille et le segment s'alignent
   sur cette même verticale. */
.hf-etape::before{
  content:"";position:absolute;left:-36px;top:9px;
  width:11px;height:11px;border-radius:50%;
  background:var(--e-global-color-secondary,#C9A96E);
}

/* ── Le segment de fil, d'une pastille à la suivante ─────────────────────── */
.hf-etape::after{
  content:"";position:absolute;left:-31px;top:24px;bottom:-34px;width:1px;
  background-image:repeating-linear-gradient(180deg,
    var(--e-global-color-secondary,#C9A96E) 0 10px,
    transparent 10px 22px);
  background-size:1px 22px;
  background-repeat:repeat-y;
  opacity:.55;
  animation:hf-defile 1.6s linear infinite;
}
.hf-etape:last-child::after{content:none}
@keyframes hf-defile{
  from{background-position-y:0}
  to{background-position-y:22px}
}

.hf-etape__num{
  display:block;
  font-family:"Bodoni Moda",Georgia,serif;font-weight:500;
  font-size:22px;line-height:1;letter-spacing:-.01em;
  color:var(--e-global-color-secondary,#C9A96E);
  margin:0;
}

/* ── État d'attente ──────────────────────────────────────────────────────── */
/* Le segment se découvre du haut vers le bas. Un clip plutôt qu'un scaleY :
   mis à l'échelle, les traits s'étireraient au lieu de défiler. */
.hf-etapes--prete .hf-etape::after{
  clip-path:inset(0 0 100% 0);
  transition:clip-path .5s cubic-bezier(.65,0,.35,1);
  transition-delay:calc(var(--i, 0) * .26s + .30s);
}
.hf-etapes--prete .hf-etape::before{
  transform:scale(.2);
  transition:transform .45s cubic-bezier(.34,1.4,.5,1);
  transition-delay:calc(var(--i, 0) * .26s + .16s);
}
.hf-etapes--prete .hf-etape{
  opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .55s cubic-bezier(.22,.7,.3,1);
  transition-delay:calc(var(--i, 0) * .26s + .16s);
}

/* ── Déclenchement ───────────────────────────────────────────────────────── */
.hf-etapes.est-anime .hf-etape{opacity:1;transform:translateY(0)}
.hf-etapes.est-anime .hf-etape::before{transform:scale(1)}
.hf-etapes.est-anime .hf-etape::after{clip-path:inset(0 0 0 0)}

/* ── Adaptation ──────────────────────────────────────────────────────────── */
@media (max-width:620px){
  .hf-etapes{padding-left:28px;gap:30px !important}
  .hf-etape::before{left:-28px;width:10px;height:10px}
  .hf-etape::after{left:-23.5px;bottom:-30px}
  .hf-etape__num{font-size:20px}
}

@media (prefers-reduced-motion:reduce){
  .hf-etapes .hf-etape::after{animation:none !important;clip-path:none !important;transition:none !important}
  .hf-etapes .hf-etape,.hf-etapes .hf-etape::before{
    opacity:1 !important;transform:none !important;transition:none !important;
  }
}