/* Com'in Clean - animations des sections des pages services.
   Autonome. Les etats "caches" (sa-pre*) ne sont poses que par services-anim.js. */
:root{--sa-accent:#2AD3D5;--sa-accent-d:#1BA5A7}

/* ---------- Liste "Ce qui est compris" ---------- */
.sa-card{position:relative;overflow:hidden}
.sa-card.sa-pre{opacity:0!important;transform:translateY(46px) scale(.95)!important;transition:none!important}
.sa-card.sa-go{transition:none!important;animation:sa-card-in .85s cubic-bezier(.2,.8,.2,1) backwards}
.sa-card.sa-go::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:34%;pointer-events:none;z-index:3;
  background:linear-gradient(100deg,transparent 0,rgba(255,255,255,.0) 10%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 90%,transparent 100%);
  transform:translateX(-140%) skewX(-18deg);animation:sa-shine 1.5s cubic-bezier(.4,0,.2,1) .55s 1 both}
.sa-bg{position:relative;overflow:hidden}
.sa-bg>*:not(.sa-bubbles){position:relative;z-index:1}
.sa-row{margin-left:-10px;margin-right:-10px;padding-left:10px!important;padding-right:10px!important;border-radius:12px;
  transition:background-color .25s,transform .3s cubic-bezier(.2,.8,.2,1)}
.sa-row.sa-pre{opacity:0;transform:translateX(-26px)}
.sa-row.sa-go{animation:sa-row-in .6s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:var(--sa-d,0ms)}
.sa-row:hover{background-color:rgba(42,211,213,.14);transform:translateX(6px)}
.sa-check{position:relative;background:transparent!important}
.sa-check::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--sa-accent);transform:scale(1);
  box-shadow:0 0 0 0 rgba(42,211,213,.45)}
.sa-check svg{position:relative;z-index:1;color:#fff!important}
.sa-check svg *{stroke-dasharray:1;stroke-dashoffset:0}
.sa-check.sa-pre::before{transform:scale(0)}
.sa-check.sa-pre svg *{stroke-dashoffset:1}
.sa-check.sa-go::before{animation:sa-circle .5s cubic-bezier(.2,.9,.3,1.4) backwards;animation-delay:calc(var(--sa-d,0ms) + 120ms)}
.sa-check.sa-go svg *{animation:sa-draw .45s ease-out backwards;animation-delay:calc(var(--sa-d,0ms) + 380ms)}
.sa-row:hover .sa-check::before{animation:sa-pulse .8s ease-out 1}

/* bulles */
.sa-bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.sa-bubbles i{position:absolute;bottom:-60px;border-radius:50%;opacity:0;
  background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.8) 0,rgba(255,255,255,.12) 22%,rgba(42,211,213,.10) 60%,rgba(42,211,213,.22) 100%);
  border:1px solid rgba(42,211,213,.28);animation:sa-float var(--sa-t,16s) linear var(--sa-w,0s) infinite;animation-play-state:paused}
.sa-bg.sa-live .sa-bubbles i{animation-play-state:running}

/* ---------- Cartes Pour qui / Frequences ---------- */
.sa-cards{perspective:1100px}
.sa-cell.sa-pre{opacity:0!important;transform:perspective(900px) translateY(40px) rotateX(-24deg)!important;transition:none!important}
.sa-cell.sa-go{transition:none!important;transform-origin:50% 100%;
  animation:sa-cell-in .85s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:var(--sa-d,0ms)}
.sa-cell.sa-pre>.hv09>span:first-child{transform:scale(.3)}
.sa-cell.sa-go>.hv09>span:first-child{animation:sa-bounce .8s cubic-bezier(.3,1.4,.5,1) backwards;animation-delay:calc(var(--sa-d,0ms) + 380ms)}
.sa-cell>.hv09{transition:background .3s,transform .3s,box-shadow .35s,border-color .35s!important}
.sa-cell>.hv09:hover{box-shadow:0 18px 40px -12px rgba(42,211,213,.55),0 4px 14px rgba(27,165,167,.18);border-color:var(--sa-accent)!important}
.sa-cell>.hv09:hover>span:first-child{animation:sa-wiggle .6s ease-out 1}

/* ---------- Methode ---------- */
.sa-steps{position:relative}
.sa-seg{position:absolute;height:2px;border-radius:2px;pointer-events:none;z-index:2;transform-origin:left center;
  background:linear-gradient(90deg,var(--sa-accent),var(--sa-accent-d));box-shadow:0 0 10px rgba(42,211,213,.55);transform:scaleX(1);
  transition:transform .6s cubic-bezier(.4,0,.2,1)}
.sa-seg.sa-pre{transform:scaleX(0)}
.sa-seg-track{position:absolute;height:0;border-top:2px dashed rgba(255,255,255,.18);pointer-events:none;z-index:1}
.sa-step>.hv09>span:first-child{position:relative;transition:opacity .5s,filter .5s,box-shadow .5s}
.sa-step.sa-dim>.hv09>span:first-child{opacity:.38;filter:grayscale(.7)}
.sa-step.sa-lit>.hv09>span:first-child{animation:sa-glow 1.1s ease-out 1}
.sa-step.sa-lit>.hv09>span:first-child::after{content:"";position:absolute;inset:-4px;border-radius:18px;border:2px solid var(--sa-accent);
  pointer-events:none;animation:sa-ring 1.1s ease-out 1 both}

/* ---------- FAQ ---------- */
.sa-faq.sa-pre{opacity:0;transform:translateY(24px)}
.sa-faq.sa-go{animation:sa-faq-in .6s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:var(--sa-d,0ms)}

/* ---------- keyframes ---------- */
@keyframes sa-card-in{from{opacity:0;transform:translateY(46px) scale(.95)}to{opacity:1;transform:none}}
@keyframes sa-shine{from{transform:translateX(-140%) skewX(-18deg);opacity:1}to{transform:translateX(420%) skewX(-18deg);opacity:1}}
@keyframes sa-row-in{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@keyframes sa-circle{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes sa-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes sa-pulse{0%{box-shadow:0 0 0 0 rgba(42,211,213,.5)}100%{box-shadow:0 0 0 9px rgba(42,211,213,0)}}
@keyframes sa-float{0%{transform:translate3d(0,0,0) scale(.8);opacity:0}10%{opacity:.9}50%{transform:translate3d(var(--sa-x,14px),-48vh,0) scale(1)}90%{opacity:.7}100%{transform:translate3d(calc(var(--sa-x,14px) * -1),-110vh,0) scale(1.1);opacity:0}}
@keyframes sa-cell-in{from{opacity:0;transform:perspective(900px) translateY(40px) rotateX(-24deg)}to{opacity:1;transform:perspective(900px) translateY(0) rotateX(0)}}
@keyframes sa-bounce{0%{transform:scale(.3)}55%{transform:scale(1.28)}75%{transform:scale(.9)}100%{transform:scale(1)}}
@keyframes sa-wiggle{0%,100%{transform:rotate(0)}30%{transform:rotate(-9deg) scale(1.08)}65%{transform:rotate(7deg) scale(1.08)}}
@keyframes sa-glow{0%{box-shadow:0 0 0 0 rgba(42,211,213,.7)}100%{box-shadow:0 0 0 16px rgba(42,211,213,0)}}
@keyframes sa-ring{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.5);opacity:0}}
@keyframes sa-faq-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

@media (max-width:760px){.sa-seg,.sa-seg-track{display:none}.sa-step.sa-dim>.hv09>span:first-child{opacity:1;filter:none}}
@media (prefers-reduced-motion:reduce){
  .sa-bubbles,.sa-seg,.sa-seg-track{display:none!important}
  .sa-card,.sa-cell,.sa-row,.sa-check,.sa-faq,.sa-card::after,.sa-check::before,.sa-check svg *,.sa-cell>.hv09>span:first-child{animation:none!important;transition:none!important}
  .sa-card::after{display:none!important}
}