/* =====================================================================
   SylphCloud — structures pour le moteur de scroll
   ===================================================================== */

/* état initial des révélations scroll-liées (seulement si le JS tourne) */
.has-scrollfx [data-scrub]{ opacity:0; will-change:transform, opacity; }

/* parallaxe : couche GPU */
[data-par]{ will-change:transform; }

/* ====================================================== APPROCHE : ligne de progression */
.process{ position:relative; }
.proc-line{
  position:absolute; left:26px; top:0; bottom:0; width:2px; border-radius:2px;
  background:var(--line);
}
.steps{ position:relative; }
.steps .proc-line{ left:26px; }
.steps .proc-line .fill{
  position:absolute; inset:0; transform-origin:top center; transform:scaleY(0);
  background:linear-gradient(180deg, var(--blue), var(--violet));
  border-radius:2px;
}
.step{ transition:opacity .5s, transform .5s; }
.step .idx{ transition:background .5s, color .5s, border-color .5s, box-shadow .5s, transform .5s; }
.has-scrollfx .step:not(.step-on){ opacity:.5; }
.has-scrollfx .step:not(.step-on) .idx{ background:#fff; color:var(--ink-faint); }
.step.step-on .idx{ background:linear-gradient(180deg,var(--blue-600),var(--blue)); color:#fff; border-color:transparent; box-shadow:var(--glow-blue); transform:scale(1.04); }
.step.step-on{ opacity:1; }

/* ====================================================== POURQUOI : pin horizontal */
.why-h{ position:relative; padding:0; }
.why-h-wrap{ position:relative; height:300vh; }
.why-h-sticky{ position:sticky; top:0; height:100vh; overflow:hidden; display:flex; flex-direction:column; justify-content:center; }
.why-h-head{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); width:100%; margin-bottom:clamp(24px,4vh,48px); display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.why-h-head .prog{ display:flex; align-items:center; gap:12px; color:var(--ink-faint); font-family:var(--font-display); font-weight:600; font-size:14px; }
.why-h-head .prog .bar{ width:120px; height:4px; border-radius:4px; background:var(--line); overflow:hidden; }
.why-h-head .prog .bar i{ display:block; height:100%; width:100%; transform-origin:left; transform:scaleX(var(--hp,0)); background:linear-gradient(90deg,var(--blue),var(--violet)); border-radius:4px; }
.why-h-viewport{ overflow:hidden; padding-inline:var(--gut); }
.why-h-row{ display:flex; gap:22px; width:max-content; will-change:transform; padding-block:10px; }
.why-h-card{
  flex:0 0 clamp(280px, 32vw, 380px); padding:32px; border-radius:var(--r-lg);
  background:linear-gradient(165deg,#fff,var(--paper-2)); border:1px solid var(--line); box-shadow:none;
  display:flex; flex-direction:column; min-height:clamp(300px,42vh,380px);
}
.why-h-card .num{ font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--violet); letter-spacing:.04em; }
.why-h-card .ic{ width:54px; height:54px; border-radius:15px; display:grid; place-items:center; background:linear-gradient(160deg,var(--blue-tint),#fff); border:1px solid var(--line); color:var(--blue-600); }
.why-h-card .ic svg{ width:27px; height:27px; }
.why-h-card h3{ margin-top:22px; font-size:22px; }
.why-h-card p{ margin-top:12px; color:var(--ink-soft); font-size:15.5px; line-height:1.55; }
.why-h-card .tail{ margin-top:auto; padding-top:20px; font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--blue-600); }
.why-h-card.cta-card{ background:linear-gradient(160deg,#11203f,#0f1730); color:#fff; border-color:transparent; justify-content:center; align-items:flex-start; }
.why-h-card.cta-card h3{ color:#fff; } .why-h-card.cta-card p{ color:#9fb0cf; }

/* fallback : pas de pin (mobile / reduced) → scroll horizontal tactile */
@media (max-width:740px){
  .why-h-wrap{ height:auto; }
  .why-h-sticky{ position:static; height:auto; padding-block:clamp(60px,10vw,90px); }
  .why-h-viewport{ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
  .why-h-row{ padding-bottom:18px; }
  .why-h-card{ scroll-snap-align:start; flex-basis:78vw; }
  .why-h-head .prog{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .why-h-wrap{ height:auto; }
  .why-h-sticky{ position:static; height:auto; padding-block:clamp(60px,10vw,90px); }
  .why-h-viewport{ overflow-x:auto; }
}

/* ====================================================== INCLUS : checklist scrub */
.incl-item{ transition:transform .5s, opacity .5s; }

/* ====================================================== fallback statique global */
html.no-anim [data-scrub]{ opacity:1 !important; transform:none !important; }
html.no-anim [data-par]{ transform:none !important; }
html.no-anim [data-hero-out]{ opacity:1 !important; transform:none !important; }
html.no-anim .step:not(.step-on){ opacity:1 !important; }
html.no-anim .step .idx{ background:linear-gradient(180deg,var(--blue-600),var(--blue)) !important; color:#fff !important; }
html.no-anim .steps .proc-line .fill{ transform:scaleY(1) !important; }
html.no-anim [data-curtain]{ clip-path:none !important; }
html.no-anim [data-flow]{ opacity:1 !important; transform:none !important; }
html.no-anim .section-head h2, html.no-anim .why-h-head h2{ filter:none !important; opacity:1 !important; transform:none !important; }

/* ====================================================== v2 — effets haut niveau */

/* APPROCHE — étapes empilées */
[data-stack]{ display:flex; flex-direction:column; gap:22px; }
[data-stack] .stack-card{ position:sticky; will-change:transform; }
.steps .step{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,32px); box-shadow:0 -8px 36px -18px rgba(24,40,86,.16), var(--shadow-md);
}
.steps .step:last-child{ border-bottom:1px solid var(--line); }
.steps .step:hover{ padding-left:clamp(22px,2.6vw,32px); }

/* INCLUS — rideau */
[data-curtain]{ will-change:clip-path; }

/* APPROCHE — compteur morphing */
.num-big{ display:inline-block; }
.num-big.pop{ animation:numpop .45s cubic-bezier(.2,.8,.2,1); }
@keyframes numpop{ 0%{ transform:scale(1.12); } 100%{ transform:scale(1); } }

/* TRUST — marquee à vélocité */
.trust .wrap{ flex-direction:column; gap:20px; }
.trust .row-clip{ width:100%; }
.trust.marquee-on .row-clip{
  overflow:hidden;
  -webkit-mask:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.trust.marquee-on .row{ flex-wrap:nowrap; justify-content:flex-start; width:max-content; gap:clamp(34px,4vw,56px); will-change:transform; }
.trust.marquee-on .lg{ white-space:nowrap; }

/* FOND caméléon — les bandes .tone laissent place au morphing global */
html.has-scrollfx .tone{ background:none; }
html.no-anim .tone{ background:linear-gradient(180deg, rgba(240,245,252,0) 0%, #F0F5FC 16%, #F0F5FC 84%, rgba(240,245,252,0) 100%) !important; }

/* mobile */
@media (max-width:740px){
  .steps .step{ grid-template-columns:48px 1fr; gap:14px; }
}