/* Sendgate — section « Comment ça marche » (3 étapes, animation CSS pure, timeline 16s). Porté du design canvas. */
  @keyframes sgLit1{0%{opacity:.42;transform:scale(.97)}2%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
  @keyframes sgLit2{0%,16%{opacity:.42;transform:scale(.97)}18%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
  @keyframes sgLit3{0%,39%{opacity:.42;transform:scale(.97)}42%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
  /* card 1 */
  @keyframes sgC1check{0%,3%{opacity:0;transform:scale(.6)}6%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
  @keyframes sgC1ring{0%,3%{opacity:0}6%{opacity:1}100%{opacity:1}}
  @keyframes sgC1type{0%,7%{width:0}12%{width:150px}100%{width:150px}}
  @keyframes sgC1ok{0%,12%{opacity:0;transform:translateY(7px)}14%{opacity:1;transform:translateY(0)}100%{opacity:1;transform:translateY(0)}}
  @keyframes sgC1badge{0%,13%{background:#263B6A;color:#fff}15%{background:#EEFABD;color:#263B6A}100%{background:#EEFABD;color:#263B6A}}
  @keyframes sgC1fill{0%{width:0}16%{width:100%}100%{width:100%}}
  /* card 2 */
  @keyframes sgSpin{to{transform:rotate(360deg)}}
  @keyframes sgC2load{0%,17%{opacity:0}19%{opacity:1}22%{opacity:1}24%,100%{opacity:0}}
  @keyframes sgC2sync{0%,22%{opacity:0}25%{opacity:1}100%{opacity:1}}
  @keyframes sgC2list{0%,22%{opacity:0;transform:translateY(7px)}25%{opacity:1;transform:translateY(0)}100%{opacity:1;transform:translateY(0)}}
  @keyframes sgC2menu{0%,27%{opacity:0;transform:scaleY(.2)}29%{opacity:1;transform:scaleY(1)}33%{opacity:1;transform:scaleY(1)}35%,100%{opacity:0;transform:scaleY(.2)}}
  @keyframes sgC2out{0%,33%{opacity:1}35%,100%{opacity:0}}
  @keyframes sgC2chip{0%,33%{opacity:0}36%,100%{opacity:1}}
  @keyframes sgC2fill{0%,17%{width:0}39%{width:100%}100%{width:100%}}
  @keyframes sgC2badge{0%,37%{background:#263B6A;color:#fff}39%{background:#EEFABD;color:#263B6A}100%{background:#EEFABD;color:#263B6A}}
  @keyframes sgC2team{0%,35%{opacity:0;transform:translateY(6px)}39%{opacity:1;transform:translateY(0)}100%{opacity:1;transform:translateY(0)}}
  /* card 3 : Marc voit une nouvelle liste, clique, arrive au builder (fenêtre longue) */
  @keyframes sgC3load{0%,41%{opacity:0}43%{opacity:1}47%{opacity:1}50%,100%{opacity:0}}
  @keyframes sgC3list{0%,48%{opacity:0;transform:translateY(7px)}51%{opacity:1;transform:translateY(0)}100%{opacity:1;transform:translateY(0)}}
  @keyframes sgC3new{0%,50%{box-shadow:0 0 0 0 rgba(130,189,99,0)}54%{box-shadow:0 0 0 4px rgba(130,189,99,.22)}64%{box-shadow:0 0 0 4px rgba(130,189,99,.22)}67%,100%{box-shadow:0 0 0 0 rgba(130,189,99,0)}}
  @keyframes sgC3cur{0%,50%{opacity:0;transform:translate(20px,-14px) scale(1)}54%{opacity:1;transform:translate(0,0) scale(1)}62%{opacity:1;transform:translate(0,0) scale(1)}64%{opacity:1;transform:translate(0,0) scale(.82)}66%{opacity:1;transform:translate(0,0) scale(1)}69%,100%{opacity:0;transform:translate(0,0) scale(1)}}
  @keyframes sgC3build{0%,67%{opacity:0;transform:translateY(14px)}73%{opacity:1;transform:translateY(0)}100%{opacity:1;transform:translateY(0)}}
  @keyframes sgC3sendcur{0%,78%{opacity:0;transform:translate(14px,-12px) scale(1)}81%{opacity:1;transform:translate(0,0) scale(1)}83%{opacity:1;transform:translate(0,0) scale(.82)}85%{opacity:1;transform:translate(0,0) scale(1)}88%,100%{opacity:0;transform:translate(0,0) scale(1)}}
  @keyframes sgC3send{0%,81%{transform:scale(1)}83%{transform:scale(.9)}85%{transform:scale(1)}100%{transform:scale(1)}}
  @keyframes sgC3rip{0%,81%{opacity:0;transform:scale(.4)}83%{opacity:.7}87%,100%{opacity:0;transform:scale(1.8)}}
  @keyframes sgC3ok{0%,86%{opacity:0}89%{opacity:1}100%{opacity:1}}
  @keyframes sgC3fill{0%,41%{width:0}90%{width:100%}100%{width:100%}}
  @keyframes sgC3badge{0%,87%{background:#263B6A;color:#fff}90%{background:#EEFABD;color:#263B6A}100%{background:#EEFABD;color:#263B6A}}
  .sg-canvas-mini{background:#EAECF1;background-image:linear-gradient(rgba(38,59,106,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(38,59,106,0.06) 1px,transparent 1px);background-size:22px 22px;}
.sg-howto-row{display:flex;gap:40px;align-items:flex-start;justify-content:center;flex-wrap:wrap}
@media(max-width:920px){#how .sg-howto-row>div{flex:1 1 100%!important;max-width:420px!important}}

/* Les 3 animations d'étapes ne tournent PAS au chargement : gelées tant que la
   section n'est pas entrée dans le viewport. L'observer (sg-hero.js) ajoute
   .is-visible quand la section défile à l'écran. !important pour battre le
   shorthand `animation:` posé en inline sur les éléments. */
.sg-howto-row *{animation-play-state:paused!important}
.sg-howto-row.is-visible *{animation-play-state:running!important}