/* Section « Comment ça se passe » / « How it works » : trois cartes reliées.
   Composant partagé (accueil + pages US). Le texte reste dans le HTML (SEO). */
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:980px;margin:0 auto;padding:0;list-style:none;position:relative}
.etape-bloc{position:relative;background:#fff;border-radius:22px;padding:30px 24px 26px;box-shadow:0 10px 30px rgba(43,36,64,.09);
  border:1px solid var(--line,#EFE6DD);display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.etape-tete{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:12px}
.etape-num{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:"Baloo 2",system-ui,sans-serif;
  font-weight:800;font-size:28px;line-height:1;padding-top:3px;background:var(--cta,linear-gradient(135deg,#FF9A5A,#F2668A));
  box-shadow:0 8px 18px color-mix(in srgb,var(--brand,#F2704A) 32%,transparent)}
.etape-ico{width:46px;height:46px;color:var(--brand,#F2704A)}
.etape-bloc h3{margin:0 0 6px;font-size:1.2rem;line-height:1.25}
.etape-bloc p{margin:0;color:var(--encre-doux,#6A6480);font-size:.97rem;line-height:1.6}
/* Liaison discrète entre deux cartes : trait + pointe, au centre de l'espace. */
.etape-bloc:not(:last-child)::after{content:"";position:absolute;top:57px;left:100%;width:30px;height:2px;
  background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--brand,#F2704A) 55%,#fff) 0 6px,transparent 6px 10px)}
.etape-bloc:not(:last-child)::before{content:"";position:absolute;top:52px;left:calc(100% + 22px);width:9px;height:9px;z-index:1;
  border-top:2px solid color-mix(in srgb,var(--brand,#F2704A) 70%,#fff);border-right:2px solid color-mix(in srgb,var(--brand,#F2704A) 70%,#fff);transform:rotate(45deg)}
@media (max-width:760px){
  .etapes{grid-template-columns:1fr;gap:34px;max-width:480px}
  .etape-bloc:not(:last-child)::after{top:100%;left:51px;width:2px;height:34px;
    background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--brand,#F2704A) 55%,#fff) 0 6px,transparent 6px 10px)}
  .etape-bloc:not(:last-child)::before{top:calc(100% + 24px);left:47px;transform:rotate(135deg)}
}
/* Apparition douce au scroll (la classe .etapes-anim est posée par etapes.js). */
.etapes-anim .etape-bloc{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.etapes-anim .etape-bloc:nth-child(2){transition-delay:.12s}
.etapes-anim .etape-bloc:nth-child(3){transition-delay:.24s}
.etapes-anim.vu .etape-bloc{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.etapes-anim .etape-bloc{opacity:1;transform:none;transition:none}}