/* Page d'accueil SmartOF (nouveau design). Styles isolés sous .sof-home :
   l'en-tête et le pied de page restent ceux du site (Tailwind). */
/* Layout : en-tête posé sur un hero plein écran ; colonne de texte centrée (texte HTML réel, lisible et indexable) ;
   cadres vidéo en apesanteur dans les marges, en 3D, reliés au centre par des fils de données. Charte claire SmartOF. */
.sof-home{
  --bg:#FBFAFF; --surface:#FFFFFF; --ink:#2B2B2B; --ink-soft:#475467; --muted:#667085; --logo:#3D3D3D;
  --violet:#7D5FFF; --violet-strong:#6445F2; --violet-tint:#EFEAFF; --line:#E8E3FB;
  --orange:#FF934F; --peach:#FFF4ED; --green:#2D936C; --star:#F5B301;
  --font-display:'Lexend', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --gutter:clamp(16px, 4vw, 48px); --header-h:76px; --radius:18px;
  color-scheme:light;
}
.sof-home, .sof-home *{box-sizing:border-box}
.sof-home{scroll-behavior:smooth}
.sof-home{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.sof-home a{color:inherit}
.sof-home :focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:10px}

/* ---------- en-tête ---------- */

.sof-home .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-body);font-weight:600;font-size:16px;
  line-height:1;border-radius:10px;padding:16px 24px;text-decoration:none;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background-color .2s}
.sof-home .btn-primary{background:var(--violet);color:#fff;box-shadow:0 14px 28px -12px rgba(125,95,255,.7)}
.sof-home .btn-primary:hover{background:var(--violet-strong);transform:translateY(-2px);box-shadow:0 18px 32px -12px rgba(125,95,255,.75)}
.sof-home .btn-primary:active{transform:translateY(0)}
.sof-home .btn-link{color:var(--violet);padding:16px 6px;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}
.sof-home .btn-link:hover{color:var(--violet-strong)}
.sof-home .btn-sm{padding:11px 16px;font-size:14px}

/* ---------- hero ---------- */
.sof-home .hero{position:relative;min-height:100vh;min-height:max(660px, 100svh);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  isolation:isolate;background:var(--bg)}
/* seul le fond animé est découpé : l'ombre de la vidéo déborde sur la section suivante sans y tracer de ligne */
.sof-home .hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;perspective:1300px;perspective-origin:50% 50%}
.sof-home .blob{position:absolute;border-radius:50%;filter:none}
.sof-home .blob.b1{width:1100px;height:1100px;left:-380px;top:-460px;background:radial-gradient(closest-side,rgba(204,191,255,.75),rgba(204,191,255,0))}
.sof-home .blob.b2{width:1000px;height:1000px;right:-360px;bottom:-480px;background:radial-gradient(closest-side,rgba(255,206,175,.62),rgba(255,206,175,0))}
.sof-home .blob.b3{width:760px;height:760px;right:-120px;top:-300px;background:radial-gradient(closest-side,rgba(176,156,255,.30),rgba(176,156,255,0))}
.sof-home .dots{position:absolute;inset:0;background-image:radial-gradient(rgba(125,95,255,.26) 1px,transparent 1.3px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 72% 66% at 50% 50%,transparent 34%,#000 82%);mask-image:radial-gradient(ellipse 72% 66% at 50% 50%,transparent 34%,#000 82%)}
.sof-home .ring{position:absolute;left:50%;top:50%;width:min(96vh,900px);height:min(96vh,900px);transform:translate(-50%,-50%)}
.sof-home .ring .spin{transform-origin:450px 450px;animation:sh-spin 140s linear infinite}
.sof-home .threads{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sof-home .threads path{fill:none;stroke-width:1.7;stroke-linecap:round;stroke-dasharray:2 8;animation:sh-flow 1.3s linear infinite}
.sof-home .scene{position:absolute;inset:0;transform-style:preserve-3d}
.sof-home .hero-fade{position:absolute;left:0;right:0;bottom:0;height:clamp(110px,20vh,220px);pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.18) 38%,rgba(255,255,255,.62) 70%,var(--surface) 100%)}

.sof-home .frame{position:absolute;left:50%;top:50%;width:240px;transform-style:preserve-3d;opacity:0;pointer-events:auto;will-change:transform,opacity}
.sof-home .frame[hidden]{display:none!important}
.sof-home .frame-body{position:relative;background:rgba(255,255,255,.9);border:1px solid rgba(125,95,255,.18);border-radius:var(--radius);padding:6px;
  box-shadow:0 34px 60px -26px rgba(48,30,140,.32),0 2px 6px rgba(48,30,140,.06);
  transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s,border-color .55s}
.sof-home .frame-bar{display:flex;align-items:center;gap:7px;height:24px;padding:0 6px 3px 5px;font-size:10.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;overflow:hidden}
.sof-home .frame-bar .live{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none;box-shadow:0 0 0 0 rgba(45,147,108,.55)}
.sof-home .frame-bar .meta{margin-left:auto;font-weight:500;letter-spacing:.01em;text-transform:none;color:var(--muted);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
.sof-home .frame-media{position:relative;border-radius:12px;overflow:hidden;background:#F3F0FF;aspect-ratio:var(--ratio)}
.sof-home .frame-media video{display:block;width:100%;height:100%;object-fit:cover}
.sof-home .corner{position:absolute;width:15px;height:15px;border:0 solid var(--violet);opacity:.5;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .55s}
.sof-home .corner.tl{left:-9px;top:-9px;border-width:2px 0 0 2px;border-top-left-radius:7px}
.sof-home .corner.tr{right:-9px;top:-9px;border-width:2px 2px 0 0;border-top-right-radius:7px}
.sof-home .corner.bl{left:-9px;bottom:-9px;border-width:0 0 2px 2px;border-bottom-left-radius:7px}
.sof-home .corner.br{right:-9px;bottom:-9px;border-width:0 2px 2px 0;border-bottom-right-radius:7px}
.sof-home .frame:hover .frame-body{transform:scale(1.045);border-color:rgba(125,95,255,.5);box-shadow:0 40px 70px -26px rgba(48,30,140,.42),0 0 0 4px rgba(125,95,255,.08)}
.sof-home .frame:hover .corner{opacity:1}
.sof-home .frame:hover .corner.tl{transform:translate(4px,4px)} .sof-home .frame:hover .corner.tr{transform:translate(-4px,4px)}
.sof-home .frame:hover .corner.bl{transform:translate(4px,-4px)} .sof-home .frame:hover .corner.br{transform:translate(-4px,-4px)}
.sof-home .frame.tx .live{animation:sh-ping .9s cubic-bezier(.2,.8,.2,1)}
.sof-home .frame.phone .frame-body{border-radius:22px;padding:5px}
.sof-home .frame.phone .frame-media{border-radius:17px}
.sof-home .frame.narrow .frame-bar .meta{display:none}
.sof-home .frame.narrow .frame-bar{font-size:9.5px;letter-spacing:.05em}

.sof-home .hero-content{position:relative;z-index:2;width:100%;display:flex;justify-content:center;padding:calc(var(--header-h) + clamp(28px, 7.5vh, 104px)) var(--gutter) 64px}
.sof-home .hero-copy{position:relative;width:min(100%,820px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.sof-home .halo{position:absolute;left:0;top:0;width:0;height:0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(251,250,255,.97) 0%,rgba(251,250,255,.84) 58%,rgba(251,250,255,0) 100%)}
.sof-home .eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0;font-weight:500;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);background:var(--surface);border:1.5px solid var(--orange);border-radius:999px;padding:8px 16px 8px 13px}
.sof-home .eyebrow .pulse{width:8px;height:8px;border-radius:50%;background:var(--violet);animation:sh-ping 2.6s cubic-bezier(.2,.8,.2,1) infinite}
.sof-home .hero h1{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(2.2rem,min(1.1rem + 3.3vw, 7.4vh),4.05rem);line-height:1.05;
  letter-spacing:-0.035em;color:var(--ink);text-wrap:balance;max-width:15.5em}
.sof-home .hero h1 .hl{color:var(--violet)}
.sof-home .lead{margin:0;max-width:58ch;font-size:clamp(1.02rem,.94rem + .35vw,1.24rem);line-height:1.6;color:var(--ink-soft);text-wrap:pretty}
.sof-home .actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 18px;margin-top:4px}
.sof-home .proof{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;font-size:14px;color:var(--muted)}
.sof-home .proof li{display:inline-flex;align-items:center;gap:8px}
.sof-home .proof svg{flex:none}
.sof-home .stars{color:var(--star);letter-spacing:1px;font-size:15px}
.sof-home .scroll-cue{position:absolute;z-index:3;left:50%;bottom:22px;transform:translateX(-50%);display:inline-flex;flex-direction:column;align-items:center;gap:6px;
  font-size:12.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.sof-home .scroll-cue .rail{width:22px;height:34px;border-radius:12px;border:1.5px solid #C9C0F2;position:relative}
.sof-home .scroll-cue .rail::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--violet);animation:sh-wheel 1.9s cubic-bezier(.45,0,.55,1) infinite}

/* ---------- section suivante ---------- */
.sof-home .modules{position:relative;background:var(--surface);padding:clamp(64px,8vw,112px) var(--gutter)}
.sof-home .wrap{max-width:1180px;margin:0 auto}
.sof-home .section-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;margin-bottom:clamp(36px,5vw,56px)}
.sof-home .tag{display:inline-block;font-weight:500;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);border:1.5px solid var(--orange);border-radius:999px;padding:7px 14px;background:var(--surface)}
.sof-home .modules h2{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.8rem,1.1rem + 2.2vw,2.9rem);line-height:1.12;letter-spacing:-0.03em;text-wrap:balance;max-width:22em}
.sof-home .modules h2 .hl{color:var(--violet)}
.sof-home .modules .section-head p{margin:0;max-width:62ch;color:var(--ink-soft);font-size:1.06rem}
.sof-home .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px}
.sof-home .card{display:flex;flex-direction:column;gap:12px;padding:26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  transition:border-color .25s,box-shadow .25s,transform .25s cubic-bezier(.2,.8,.2,1);min-width:0}
.sof-home .card:hover{border-color:#CFC3FF;box-shadow:0 22px 40px -24px rgba(48,30,140,.3);transform:translateY(-3px)}
.sof-home .card .ico{width:48px;height:48px;border-radius:12px;background:var(--peach);display:flex;align-items:center;justify-content:center}
.sof-home .card h3{margin:4px 0 0;font-family:var(--font-display);font-weight:600;font-size:1.22rem;letter-spacing:-0.02em;color:var(--ink)}
.sof-home .card p{margin:0;color:var(--muted);font-size:.98rem}
.sof-home .card a{margin-top:auto;padding-top:6px;color:var(--violet);font-weight:600;font-size:.95rem;text-decoration:none}
.sof-home .card a:hover{text-decoration:underline;text-underline-offset:4px}

@keyframes sh-flow{to{stroke-dashoffset:-20}}
@keyframes sh-spin{to{transform:rotate(360deg)}}
@keyframes sh-ping{0%{box-shadow:0 0 0 0 rgba(125,95,255,.55)}100%{box-shadow:0 0 0 9px rgba(125,95,255,0)}}
@keyframes sh-wheel{0%{transform:translateY(0);opacity:0}25%{opacity:1}70%{transform:translateY(10px);opacity:0}100%{transform:translateY(10px);opacity:0}}
@media (max-width:999px){
  .sof-home .hero{justify-content:flex-start}
  .sof-home .hero-content{padding-top:calc(var(--header-h) + 18px);padding-bottom:clamp(220px,62vw,300px)}
  .sof-home .hero-copy{gap:18px}
  .sof-home .scroll-cue{display:none}
}
@media (max-width:999px) and (min-height:900px){ .sof-home .hero{justify-content:center} }
@media (prefers-reduced-motion:reduce){
  .sof-home{scroll-behavior:auto}
  .sof-home .threads path,.sof-home .ring .spin,.sof-home .eyebrow .pulse,.sof-home .scroll-cue .rail::after{animation:none}
  .sof-home .frame{opacity:1}
  .sof-home .frame-body,.sof-home .corner,.sof-home .btn,.sof-home .card{transition:none}
}

/* ---------- comparatif des variantes du hero ---------- */
.sof-home .hero-bg{perspective:none}
.sof-home .stage{position:absolute;inset:0;perspective:1300px;perspective-origin:50% 50%}
.sof-home .veil{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;display:none;background:rgba(251,250,255,.95);--vx:150px;--vy:80px;
  -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.55) calc(var(--vx) * .5),#000 var(--vx),#000 calc(100% - var(--vx)),rgba(0,0,0,.55) calc(100% - var(--vx) * .5),transparent 100%),
                     linear-gradient(to bottom,transparent 0,rgba(0,0,0,.55) calc(var(--vy) * .5),#000 var(--vy),#000 calc(100% - var(--vy)),rgba(0,0,0,.55) calc(100% - var(--vy) * .5),transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.55) calc(var(--vx) * .5),#000 var(--vx),#000 calc(100% - var(--vx)),rgba(0,0,0,.55) calc(100% - var(--vx) * .5),transparent 100%),
                     linear-gradient(to bottom,transparent 0,rgba(0,0,0,.55) calc(var(--vy) * .5),#000 var(--vy),#000 calc(100% - var(--vy)),rgba(0,0,0,.55) calc(100% - var(--vy) * .5),transparent 100%);
          mask-composite:intersect}
.sof-home .hero-bg[data-variant="mur"] .veil{display:block}
.sof-home .hero-bg:not([data-variant="apesanteur"]) .ring{display:none}
.sof-home .hero-bg[data-variant="mur"] .dots{opacity:.45}
.sof-home .phone > .frame-body{border-radius:22px;padding:5px}
.sof-home .phone .frame-media{border-radius:17px}
.sof-home .narrow .frame-bar .meta{display:none}
.sof-home .narrow .frame-bar{font-size:9.5px;letter-spacing:.05em}

/* mur vidéo */
.sof-home .wall-wrap{position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.3) 13%,#000 34%,#000 84%,rgba(0,0,0,.35) 100%);
          mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.3) 13%,#000 34%,#000 84%,rgba(0,0,0,.35) 100%)}
.sof-home .wall{position:absolute;width:0;height:0;transform-style:preserve-3d}
.sof-home .wcol{position:absolute;top:0;will-change:transform}
.sof-home .wt{position:absolute;left:0;width:100%}
.sof-home .vtile.phone{width:62%;left:19%}
.sof-home .shot{border-radius:var(--r,12px);background:var(--surface);box-shadow:0 16px 30px -18px rgba(48,30,140,.32),0 1px 2px rgba(48,30,140,.06)}
.sof-home .shot img{display:block;width:100%;height:auto;border-radius:inherit}
.sof-home .wall-fade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(251,250,255,.92) 0,rgba(251,250,255,0) 130px)}


/* ---------- page continue : un seul fond, aucune séparation entre les sections ---------- */
.sof-home{background:var(--bg)}
.sof-home{position:relative;overflow-x:clip}
.sof-home .hero-fade{background:linear-gradient(to bottom,rgba(251,250,255,0) 0%,rgba(251,250,255,.4) 42%,rgba(251,250,255,.85) 74%,var(--bg) 100%)}
.sof-home .intro{position:relative;padding:calc(var(--band,48px) - 8px) var(--gutter) clamp(0px,1vw,16px)}
.sof-home .intro .section-head{margin-bottom:0}
.sof-home .intro h2{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.8rem,1.1rem + 2.2vw,2.9rem);line-height:1.12;letter-spacing:-0.03em;text-wrap:balance;max-width:22em;color:var(--ink)}
.sof-home .intro h2 .hl{color:var(--violet)}
.sof-home .intro p{margin:0;max-width:62ch;color:var(--ink-soft);font-size:1.06rem}

.sof-home .feat{position:relative;padding:clamp(48px,7vw,104px) var(--gutter)}
.sof-home .feat::before{content:"";position:absolute;z-index:-1;top:50%;width:min(80vw,1000px);aspect-ratio:1;border-radius:50%;pointer-events:none;transform:translateY(-50%);
  background:radial-gradient(closest-side,rgba(204,191,255,.34),rgba(204,191,255,0))}
.sof-home .feat::before{right:-14vw}
.sof-home .feat.rev::before{right:auto;left:-14vw;background:radial-gradient(closest-side,rgba(255,206,175,.30),rgba(255,206,175,0))}
.sof-home .feat-in{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,5.5fr) minmax(0,6.5fr);gap:clamp(32px,5vw,80px);align-items:center}
.sof-home .feat.rev .feat-in{grid-template-columns:minmax(0,6.5fr) minmax(0,5.5fr)}
.sof-home .feat.rev .feat-text{order:2}
.sof-home .feat-text{display:flex;flex-direction:column;align-items:flex-start;gap:18px;min-width:0}
.sof-home .feat h2{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.7rem,1.05rem + 1.7vw,2.45rem);line-height:1.12;letter-spacing:-0.03em;color:var(--ink);text-wrap:balance}
.sof-home .feat h2 .hl{color:var(--violet)}
.sof-home .feat p{margin:0;font-size:clamp(1rem,.95rem + .2vw,1.1rem);line-height:1.65;color:var(--ink-soft);max-width:56ch;text-wrap:pretty}
.sof-home .feat p strong{color:var(--ink);font-weight:600}
.sof-home .checks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sof-home .checks li{display:flex;align-items:center;gap:12px;font-weight:500;color:var(--ink)}
.sof-home .checks svg{flex:none;width:22px;height:22px}
.sof-home .more{display:inline-flex;align-items:center;gap:8px;color:var(--violet);font-weight:600;text-decoration:none;padding:4px 0}
.sof-home .more:hover{color:var(--violet-strong);text-decoration:underline;text-underline-offset:4px}
.sof-home .more svg{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.sof-home .more:hover svg{transform:translateX(3px)}

/* interfaces animées : un calque = une image positionnée comme dans la maquette */
.sof-home .viz{position:relative;width:100%;max-width:660px;margin:0 auto;aspect-ratio:var(--ar);--py:0px}
.sof-home .ly{position:absolute;left:var(--x);top:var(--y);width:var(--w);z-index:var(--z);transform:translate(-50%,-50%) translate3d(0,calc(var(--py) * var(--dp)),0) rotate(var(--r))}
.sof-home .ly-in{transition:opacity .75s ease var(--d),transform 1.15s var(--ez,cubic-bezier(.16,1,.3,1)) var(--d)}
.js .sof-home .viz:not(.in) .ly-in{opacity:0;transform:translate3d(var(--ex),var(--ey),0) scale(var(--es))}
.sof-home .ly img{display:block;width:100%;height:auto;animation:sh-drift var(--T) ease-in-out var(--ph) infinite alternate;animation-play-state:paused;will-change:transform}
.sof-home .viz.in.on .ly img{animation-play-state:running}
@keyframes sh-drift{
  from{transform:translate3d(calc(var(--ax) * -1),calc(var(--ay) * -1),0) rotate(calc(var(--aw) * -1))}
  to{transform:translate3d(var(--ax),var(--ay),0) rotate(var(--aw))}}
.sof-home .deco{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:40}
.sof-home .deco .dash{fill:none;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:5 6;animation:sh-flow 1.6s linear infinite}
.sof-home .deco .draw{transition:opacity .8s ease var(--d,1s)}
.js .sof-home .viz:not(.in) .deco .draw{opacity:0}
.sof-home .cursor{transition:transform 1s cubic-bezier(.16,1,.3,1) var(--d,1.2s),opacity .6s ease var(--d,1.2s)}
.js .sof-home .viz:not(.in) .cursor{opacity:0;transform:translate(30px,26px)}

/* écosystème des intégrations */
.sof-home .eco-viz{position:relative;width:100%;max-width:640px;margin:0 auto;aspect-ratio:587/514;container-type:inline-size}
.sof-home .eco-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sof-home .eco-link{stroke:#CBBEFF;stroke-width:1.6;stroke-dasharray:3 6;stroke-linecap:round}
.sof-home .eco-ring{fill:none;stroke:#D9D0FF;stroke-width:1.4;stroke-dasharray:2 7;animation:sh-flow 2.6s linear infinite}
.sof-home .eco-dot{fill:#7D5FFF}
.sof-home .eco-glow{fill:#7D5FFF}
.sof-home .eco-tile{position:absolute;left:var(--x);top:var(--y);width:var(--w);transform:translate(-50%,-50%);will-change:transform,opacity}
.sof-home .eco-tile img{display:block;width:100%;height:auto}
.sof-home .eco-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2.4cqw;width:44%;z-index:2}
.sof-home .eco-pill{font-size:max(8.5px,1.9cqw);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:var(--surface);
  border:1.5px solid var(--orange);border-radius:999px;padding:.55em 1.2em;white-space:nowrap;line-height:1}
.sof-home .eco-pill.swap{animation:sh-swap .45s cubic-bezier(.2,.8,.2,1)}
@keyframes sh-swap{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.sof-home .eco-logo{display:flex;align-items:center;justify-content:center;gap:1.6cqw;font-family:var(--font-display);font-weight:600;color:var(--logo);letter-spacing:-0.045em;font-size:7.4cqw;line-height:1}
.sof-home .eco-logo svg{width:7.6cqw;height:7.6cqw;flex:none}
.sof-home .eco-wave{position:absolute;left:50%;top:50%;width:36%;aspect-ratio:1;border-radius:50%;border:2px solid #B9A8FF;transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none}

/* appel final */
.sof-home .cta-final{position:relative;padding:clamp(56px,8vw,112px) var(--gutter) clamp(80px,10vw,150px);text-align:center}
.sof-home .cta-final::before{content:"";position:absolute;z-index:-1;left:50%;top:45%;width:min(90vw,900px);aspect-ratio:1.6;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(204,191,255,.42),rgba(255,206,175,.16) 60%,rgba(255,206,175,0))}
.sof-home .cta-final .wrap{display:flex;flex-direction:column;align-items:center;gap:22px}
.sof-home .cta-final h2{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.9rem,1.2rem + 2.3vw,3rem);line-height:1.1;letter-spacing:-0.03em;color:var(--ink);text-wrap:balance}
.sof-home .cta-final h2 .hl{color:var(--violet)}

@media (max-width:999px){
  .sof-home .feat-in,.sof-home .feat.rev .feat-in{grid-template-columns:minmax(0,1fr)}
  .sof-home .feat.rev .feat-text{order:0}
  .sof-home .viz,.sof-home .eco-viz{max-width:620px}
}
@media (prefers-reduced-motion:reduce){
  .sof-home .ly img{animation:none}
  .sof-home .ly-in,.sof-home .cursor,.sof-home .deco .draw{transition:none}
  .js .sof-home .viz:not(.in) .ly-in{opacity:1;transform:none}
  .js .sof-home .viz:not(.in) .cursor{opacity:1;transform:none}
  .sof-home .deco .dash,.sof-home .eco-ring{animation:none}
  .js .sof-home .viz:not(.in) .deco .draw{opacity:1}
  .sof-home .eco-pill.swap{animation:none}
}
.sof-home .ly img{filter:drop-shadow(0 16px 26px rgba(48,30,140,.14)) drop-shadow(0 2px 4px rgba(48,30,140,.06))}
.sof-home .ly.sm img{filter:drop-shadow(0 10px 18px rgba(48,30,140,.16)) drop-shadow(0 1px 3px rgba(48,30,140,.08))}
.sof-home .eco-tile img{filter:drop-shadow(0 10px 18px rgba(48,30,140,.12)) drop-shadow(0 1px 2px rgba(48,30,140,.06))}

/* =====================================================================
   Sections reprises du site : logos, Qualiopi, accompagnement, avis, tarifs, FAQ
   ===================================================================== */
/* le fond est porté par html : les halos des sections restent visibles d'une section à l'autre */
.sof-home{background:none}

/* apparition générique (cartes, questions) */
.sof-home .rv{transition:opacity .8s ease var(--d,0s),transform 1.1s cubic-bezier(.16,1,.3,1) var(--d,0s)}
.js .sof-home .rv:not(.in){opacity:0;transform:translate3d(0,30px,0)}

/* ---------- logos clients ---------- */
/* même espace (--band) au-dessus du titre, entre le titre et les logos, et entre les logos et la section suivante.
   Les 8 px du rail de logos et les 22 px du repère « Découvrir » sont déduits. */
.sof-home{--band:clamp(32px,4.2vw,60px)}
.sof-home .logos{position:relative;padding:max(20px,calc(var(--band) - 22px)) 0 0;text-align:center}
.sof-home .logos-title{margin:0 auto calc(var(--band) - 8px);padding:0 var(--gutter);font-weight:500;font-size:clamp(1rem,.94rem + .3vw,1.15rem);color:var(--ink-soft);text-wrap:balance}
.sof-home .logos-title .hl{color:var(--violet);font-weight:600}
.sof-home .marquee{position:relative;overflow:hidden}
.sof-home .marquee-track{list-style:none;margin:0 auto;padding:8px var(--gutter);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:22px clamp(40px,6vw,84px)}
.sof-home .marquee img{display:block;height:var(--h,36px);width:auto;opacity:.78;transition:opacity .3s,transform .35s cubic-bezier(.2,.8,.2,1)}
.sof-home .marquee li:hover img{opacity:1;transform:translateY(-2px)}
.sof-home .marquee.run{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.sof-home .marquee.run .marquee-track{flex-wrap:nowrap;justify-content:flex-start;width:max-content;margin:0;padding-inline:0;animation:sh-marquee var(--dur,30s) linear infinite}
.sof-home .marquee.run:hover .marquee-track,.sof-home .marquee.run.off .marquee-track{animation-play-state:paused}
@keyframes sh-marquee{to{transform:translate3d(calc(var(--shift,0px) * -1),0,0)}}

/* ---------- Qualiopi ---------- */
.sof-home .q-logo{display:block;height:clamp(40px,3.6vw,50px);width:auto}
.sof-home .checks.box{gap:14px}
.sof-home .checks.box li{align-items:flex-start;font-weight:400;color:var(--ink-soft);line-height:1.55}
.sof-home .checks.box li strong{color:var(--ink);font-weight:600}
.sof-home .checks.box svg{width:24px;height:24px;margin-top:-1px}

.sof-home .qv{position:relative;width:100%;max-width:620px;margin:0 auto;aspect-ratio:1.08;container-type:inline-size;perspective:1700px;--u:1cqw;--qvt:rotateX(5deg) rotateY(-6deg) rotateZ(5deg)}
.sof-home .qv-bg{position:absolute;left:7%;right:4%;top:8%;bottom:8%;border-radius:calc(4.6 * var(--u));background:linear-gradient(155deg,#F4F0FF 0%,#EBE4FF 100%);
  transition:opacity .9s ease,transform 1.2s cubic-bezier(.16,1,.3,1)}
.js .sof-home .qv:not(.in) .qv-bg{opacity:0;transform:scale(.94)}
.sof-home .qv-float{position:absolute;inset:0;animation:sh-qvDrift 9s ease-in-out infinite alternate;animation-play-state:paused}
.sof-home .qv.in.on .qv-float{animation-play-state:running}
@keyframes sh-qvDrift{from{transform:translate3d(0,calc(-1.1 * var(--u)),0) rotate(-.3deg)}to{transform:translate3d(0,calc(1.1 * var(--u)),0) rotate(.3deg)}}
.sof-home .qv-panel{position:absolute;left:15%;top:10%;width:70%;background:var(--surface);border:1px solid #E6E0FF;border-radius:calc(3 * var(--u));padding:calc(1.2 * var(--u)) calc(2.4 * var(--u)) calc(2.6 * var(--u));
  box-shadow:0 calc(5 * var(--u)) calc(9 * var(--u)) calc(-4 * var(--u)) rgba(48,30,140,.3),0 calc(.4 * var(--u)) calc(1.2 * var(--u)) rgba(48,30,140,.06);transform:var(--qvt);transform-origin:50% 50%;
  transition:opacity .8s ease .05s,transform 1.3s cubic-bezier(.16,1,.3,1) .05s}
.js .sof-home .qv:not(.in) .qv-panel{opacity:0;transform:translate3d(0,calc(9 * var(--u)),0) rotateX(22deg) rotateY(-18deg) rotateZ(12deg)}
.sof-home .qv-crit+.qv-crit{margin-top:calc(1.4 * var(--u))}
.sof-home .qv-ch{position:relative;display:flex;align-items:center;gap:calc(1.3 * var(--u));padding:calc(1.6 * var(--u)) calc(.4 * var(--u)) calc(1.9 * var(--u));font-size:calc(2.6 * var(--u));color:var(--ink);
  transition:opacity .6s ease var(--d),transform .8s cubic-bezier(.16,1,.3,1) var(--d)}
.sof-home .qv-bm,.sof-home .qv-chev{flex:none;display:grid;width:calc(2.7 * var(--u));height:calc(2.7 * var(--u))}
.sof-home .qv-bm{color:#A48FFF}
.sof-home .qv-chev{margin-left:auto;color:var(--ink)}
.sof-home .qv-bm svg,.sof-home .qv-chev svg{width:100%;height:100%}
.sof-home .qv-ch b{font-family:var(--font-display);font-weight:600;white-space:nowrap;letter-spacing:-.01em}
.sof-home .qv-cnt{font-size:calc(1.65 * var(--u));font-weight:600;line-height:1.2;color:var(--muted);background:#F4F2FA;border-radius:99px;padding:calc(.4 * var(--u)) calc(1.1 * var(--u));
  font-variant-numeric:tabular-nums;transition:color .6s,background-color .6s}
.sof-home .qv-crit.done .qv-cnt{color:#15803D;background:#DCFCE7}
.sof-home .qv-prog{position:absolute;left:calc(.4 * var(--u));right:calc(.4 * var(--u));bottom:calc(.55 * var(--u));height:calc(.45 * var(--u));border-radius:99px;background:#F0ECFE;overflow:hidden}
.sof-home .qv-prog i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7D5FFF,#A992FF);transition:width .9s cubic-bezier(.2,.8,.2,1)}
.sof-home .qv-crit.done .qv-prog i{background:linear-gradient(90deg,#22A55B,#5CC79A)}
.sof-home .qv-row{position:relative;display:flex;align-items:center;gap:calc(2 * var(--u));padding:calc(1.5 * var(--u)) calc(1.8 * var(--u)) calc(1.5 * var(--u)) calc(3 * var(--u));margin-top:calc(1 * var(--u));
  border:1px solid #EFEBFF;border-radius:calc(1.6 * var(--u));background:var(--surface);
  transition:background-color .6s,border-color .6s,opacity .6s ease var(--d),transform .8s cubic-bezier(.16,1,.3,1) var(--d)}
.sof-home .qv-row::before{content:"";position:absolute;left:calc(1.1 * var(--u));top:17%;bottom:17%;width:calc(.65 * var(--u));border-radius:99px;background:var(--violet)}
.js .sof-home .qv:not(.in) .qv-row,.js .sof-home .qv:not(.in) .qv-ch{opacity:0;transform:translate3d(calc(3 * var(--u)),0,0)}
.sof-home .qv-row.flash{background:#F6F3FF;border-color:#D9CFFF}
.sof-home .qv-l{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.sof-home .qv-l b{font-family:var(--font-display);font-weight:600;font-size:calc(2.3 * var(--u));color:var(--ink);letter-spacing:-.01em}
.sof-home .qv-l small{font-size:calc(1.75 * var(--u));color:var(--muted);margin-top:calc(.3 * var(--u))}
.sof-home .qv-st{display:grid;flex:none}
.sof-home .qv-st em{grid-area:1/1;justify-self:end;font-style:normal;font-size:calc(1.75 * var(--u));font-weight:600;line-height:1.2;padding:calc(.65 * var(--u)) calc(1.4 * var(--u));border-radius:99px;white-space:nowrap;border:1px solid;opacity:0;transform:scale(.7);
  transition:opacity .35s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.sof-home .qv-st .s-ok{color:#15803D;background:#DCFCE7;border-color:#BBF7D0}
.sof-home .qv-st .s-wip{color:#0369A1;background:#E0F2FE;border-color:#BAE6FD}
.sof-home .qv-st .s-todo{color:#B91C1C;background:#FEE2E2;border-color:#FECACA}
.sof-home .qv-row[data-s=ok] .s-ok,.sof-home .qv-row[data-s=wip] .s-wip,.sof-home .qv-row[data-s=todo] .s-todo{opacity:1;transform:none}
.sof-home .qv-chip{position:absolute;z-index:3;animation:sh-chipDrift var(--T,7s) ease-in-out var(--ph,0s) infinite alternate;animation-play-state:paused}
.sof-home .qv.in.on .qv-chip{animation-play-state:running}
.sof-home .qv-a{right:0;top:2%;--T:6.4s;--ph:-2s}
.sof-home .qv-b{left:0;bottom:3%;--T:7.2s;--ph:-4.5s}
@keyframes sh-chipDrift{from{transform:translate3d(0,calc(-1.3 * var(--u)),0)}to{transform:translate3d(0,calc(1.3 * var(--u)),0)}}
.sof-home .qv-chip-in{display:flex;align-items:center;gap:calc(1.8 * var(--u));padding:calc(1.6 * var(--u)) calc(2.6 * var(--u)) calc(1.6 * var(--u)) calc(1.6 * var(--u));background:var(--surface);border:1px solid #E6E0FF;border-radius:calc(2.4 * var(--u));
  box-shadow:0 calc(3.6 * var(--u)) calc(6 * var(--u)) calc(-2.6 * var(--u)) rgba(48,30,140,.32),0 calc(.3 * var(--u)) calc(1 * var(--u)) rgba(48,30,140,.06);transition:opacity .45s ease,transform .7s cubic-bezier(.34,1.56,.64,1)}
.js .sof-home .qv-chip-in:not(.show){opacity:0;transform:translate3d(0,calc(2 * var(--u)),0) scale(.86)}
.sof-home .qv-ic{flex:none;width:calc(5.4 * var(--u));height:calc(5.4 * var(--u));border-radius:calc(1.6 * var(--u));display:grid;place-items:center;background:#F1EDFF;color:var(--violet)}
.sof-home .qv-ic.or{background:#FFF1E7;color:#EE7A31}
.sof-home .qv-ic svg{width:58%;height:58%}
.sof-home .qv-chip-in b{display:block;font-family:var(--font-display);font-weight:600;font-size:calc(2.15 * var(--u));line-height:1.25;color:var(--ink);white-space:nowrap}
.sof-home .qv-chip-in small{display:block;font-size:calc(1.75 * var(--u));line-height:1.3;color:var(--muted);white-space:nowrap}

/* ---------- accompagnement ---------- */
.sof-home .feat p.feat-lead{font-size:clamp(1.12rem,1rem + .45vw,1.32rem);line-height:1.5;color:var(--ink-soft)}

.sof-home .ac{position:relative;width:100%;max-width:580px;margin:0 auto;container-type:inline-size;--u:1cqw}
.sof-home .ac-bg{position:absolute;inset:0;border-radius:calc(5 * var(--u));background:linear-gradient(200deg,#FFF2E8 0%,#F4EFFF 55%,#EBE4FF 100%);
  transition:opacity .9s ease,transform 1.2s cubic-bezier(.16,1,.3,1)}
.sof-home .ac-bg::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:.9;background-image:radial-gradient(rgba(125,95,255,.22) 1px,transparent 1.3px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,transparent 28%,#000 92%);mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,transparent 28%,#000 92%)}
.js .sof-home .ac:not(.in) .ac-bg{opacity:0;transform:scale(.94)}
.sof-home .ac-steps{position:relative;list-style:none;margin:0;padding:calc(8 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)) calc(7 * var(--u));display:flex;flex-direction:column;gap:calc(4.2 * var(--u))}
/* une étape : la pastille numérotée sur le rail, la carte à sa droite */
.sof-home .ac-step{position:relative;display:grid;grid-template-columns:calc(8 * var(--u)) minmax(0,1fr);column-gap:calc(3.4 * var(--u));align-items:center;
  transition:opacity .6s ease calc(.2s + var(--k) * .14s),transform .9s cubic-bezier(.16,1,.3,1) calc(.2s + var(--k) * .14s)}
.js .sof-home .ac:not(.in) .ac-step{opacity:0;transform:translate3d(calc(3 * var(--u)),0,0)}
/* le rail : pointillé clair, puis rempli de violet au fil des étapes */
.sof-home .ac-step::before,.sof-home .ac-step::after{content:"";position:absolute;left:calc(4 * var(--u) - 1px);width:2px;top:calc(-2.1 * var(--u));bottom:calc(-2.1 * var(--u));border-radius:2px}
.sof-home .ac-step:first-child::before,.sof-home .ac-step:first-child::after{top:50%}
.sof-home .ac-step:last-child::before,.sof-home .ac-step:last-child::after{bottom:50%}
.sof-home .ac-step::before{background:repeating-linear-gradient(to bottom,#CFC4FF 0 calc(1 * var(--u)),transparent calc(1 * var(--u)) calc(2 * var(--u)))}
.sof-home .ac-step::after{background:linear-gradient(to bottom,#7D5FFF,#A992FF);transform-origin:50% 0;transform:scaleY(0);transition:transform .9s cubic-bezier(.65,0,.35,1)}
.sof-home .ac-step[data-s=done]::after{transform:scaleY(1)}
.sof-home .ac-n{position:relative;z-index:1;display:grid;place-items:center;width:calc(8 * var(--u));height:calc(8 * var(--u));border-radius:50%;background:#F1EDFF;color:var(--violet);
  font-family:var(--font-display);font-weight:600;font-size:max(14px,calc(3.2 * var(--u)));line-height:1;box-shadow:0 0 0 calc(.8 * var(--u)) rgba(251,250,255,.9);
  transition:background-color .45s,color .45s,transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .45s}
.sof-home .ac-n i{grid-area:1/1;display:grid;place-items:center;width:100%;height:100%;font-style:normal;transition:opacity .3s ease,transform .45s cubic-bezier(.34,1.56,.64,1)}
.sof-home .ac-ok{opacity:0;transform:scale(.4)}
.sof-home .ac-ok svg{width:52%;height:52%}
.sof-home .ac-step[data-s=active] .ac-n{background:linear-gradient(140deg,#FFA86C,#FF934F);color:#fff;transform:scale(1.1);
  box-shadow:0 0 0 calc(.8 * var(--u)) rgba(251,250,255,.9),0 calc(1.6 * var(--u)) calc(3 * var(--u)) calc(-1 * var(--u)) rgba(255,147,79,.7)}
.sof-home .ac-step[data-s=active] .ac-n::after{content:"";position:absolute;inset:0;border-radius:50%;animation:sh-acPing 1.7s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes sh-acPing{0%{box-shadow:0 0 0 0 rgba(255,147,79,.5)}100%{box-shadow:0 0 0 calc(2.6 * var(--u)) rgba(255,147,79,0)}}
.sof-home .ac-step[data-s=done] .ac-n{background:#DCFCE7;color:#15803D}
.sof-home .ac-step[data-s=done] .ac-num{opacity:0;transform:scale(.4)}
.sof-home .ac-step[data-s=done] .ac-ok{opacity:1;transform:none}
.sof-home .ac-txt{display:block;padding:calc(3 * var(--u)) calc(3.8 * var(--u));background:var(--surface);border:1px solid #E6E0FF;border-radius:calc(2.6 * var(--u));
  font-weight:500;font-size:max(15px,calc(3.25 * var(--u)));line-height:1.35;color:var(--ink);text-wrap:pretty;
  box-shadow:0 calc(3.2 * var(--u)) calc(5.6 * var(--u)) calc(-2.8 * var(--u)) rgba(48,30,140,.2),0 calc(.3 * var(--u)) calc(1 * var(--u)) rgba(48,30,140,.05);
  transition:border-color .5s,box-shadow .5s,transform .7s cubic-bezier(.16,1,.3,1),color .5s}
.sof-home .ac-txt em{font-style:normal;font-weight:600;color:var(--violet-strong)}
.sof-home .ac-step[data-s=active] .ac-txt{border-color:#D3C6FF;transform:translate3d(calc(.8 * var(--u)),0,0);
  box-shadow:0 calc(5 * var(--u)) calc(9 * var(--u)) calc(-3 * var(--u)) rgba(48,30,140,.3),0 0 0 calc(.7 * var(--u)) rgba(125,95,255,.1)}
.sof-home .ac-step[data-s=done] .ac-txt{color:var(--ink-soft)}
.sof-home .ac-step[data-s=done] .ac-txt em{color:var(--violet)}

/* ---------- avis clients ---------- */
.sof-home .reviews,.sof-home .pricing,.sof-home .faq{position:relative;padding:clamp(56px,8vw,112px) var(--gutter)}
.sof-home .reviews::before,.sof-home .pricing::before,.sof-home .faq::before{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.sof-home .reviews::before{left:50%;top:56%;width:min(110vw,1300px);aspect-ratio:1.9;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(204,191,255,.34),rgba(204,191,255,0))}
.sof-home .reviews h2,.sof-home .pricing h2{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.8rem,1.1rem + 2.2vw,2.9rem);line-height:1.12;letter-spacing:-0.03em;text-wrap:balance;max-width:22em;color:var(--ink)}
.sof-home .reviews h2 .hl,.sof-home .pricing h2 .hl,.sof-home .faq h2 .hl{color:var(--violet)}
.sof-home .pricing .section-head p{margin:0;max-width:62ch;color:var(--ink-soft);font-size:1.06rem}
.sof-home .rev-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,2vw,24px);max-width:1120px;margin:0 auto}
.sof-home .rev-item{display:flex}
.sof-home .rev-card{position:relative;flex:1;margin:0;display:flex;flex-direction:column;gap:16px;padding:clamp(24px,2.4vw,32px);background:var(--surface);border:1px solid #ECE8FB;border-radius:22px;
  box-shadow:0 26px 50px -34px rgba(48,30,140,.35),0 1px 3px rgba(48,30,140,.05);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.sof-home .rev-card:hover{transform:translateY(-4px);border-color:#DCD3FF;box-shadow:0 34px 60px -34px rgba(48,30,140,.42),0 1px 3px rgba(48,30,140,.05)}
.sof-home .rev-card:not(.rev-score)::after{content:"\201C" / "";position:absolute;right:24px;top:10px;font-family:Georgia,'Times New Roman',serif;font-size:92px;line-height:1;color:#EEE9FF;pointer-events:none}
.sof-home .stars5{display:inline-flex;gap:3px;color:var(--star);font-size:19px;line-height:1}
.sof-home .stars5 i{font-style:normal;display:inline-block;transition:opacity .4s ease calc(var(--d,0s) + .45s + var(--i) * .09s),transform .6s cubic-bezier(.34,1.56,.64,1) calc(var(--d,0s) + .45s + var(--i) * .09s)}
.sof-home .stars5 i:nth-child(1){--i:0}.sof-home .stars5 i:nth-child(2){--i:1}.sof-home .stars5 i:nth-child(3){--i:2}.sof-home .stars5 i:nth-child(4){--i:3}.sof-home .stars5 i:nth-child(5){--i:4}
.js .sof-home .rev-item:not(.in) .stars5 i{opacity:.15;transform:scale(.4)}
.sof-home .rev-card blockquote{margin:0;flex:1}
.sof-home .rev-card blockquote p{margin:0;font-size:clamp(1.02rem,.98rem + .2vw,1.12rem);line-height:1.6;color:var(--ink);text-wrap:pretty}
.sof-home .rev-card figcaption{display:flex;align-items:center;gap:14px;padding-top:8px;border-top:1px solid #F1EEFB}
.sof-home .rev-logo{height:48px;width:auto;max-width:112px;object-fit:contain;flex:none;margin-top:8px}
.sof-home .rev-card figcaption span{margin-top:8px}
.sof-home .rev-card figcaption b{display:block;font-weight:600;color:var(--ink);line-height:1.3}
.sof-home .rev-card figcaption small{display:block;font-size:.9rem;color:var(--muted);line-height:1.35}
.sof-home .rev-score{justify-content:center;gap:12px;background:linear-gradient(160deg,#F4F0FF 0%,#FFF5EE 100%);border-color:#E4DCFF}
.sof-home .score{margin:0;display:flex;align-items:baseline;gap:4px;font-family:var(--font-display);font-weight:600;color:var(--violet);letter-spacing:-.04em;line-height:1}
.sof-home .score .big{font-size:clamp(3.4rem,2.4rem + 3vw,5rem)}
.sof-home .score .of{font-size:clamp(1.4rem,1.1rem + 1vw,2rem);color:var(--violet-strong);opacity:.75}
.sof-home .score-cap{margin:0;color:var(--ink-soft);font-weight:500}
.sof-home .rev-more{margin:clamp(28px,3.4vw,40px) 0 0;text-align:center}

/* ---------- tarifs ---------- */
.sof-home .pricing::before{left:50%;top:58%;width:min(120vw,1400px);aspect-ratio:2.2;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(255,206,175,.26),rgba(204,191,255,.16) 55%,rgba(204,191,255,0))}
.sof-home .plan-proof{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;font-size:.95rem;font-weight:500;color:var(--ink-soft)}
.sof-home .plan-proof li{display:inline-flex;align-items:center;gap:7px}
.sof-home .plan-proof svg{flex:none;width:18px;height:18px;color:var(--violet)}
.sof-home .plans{list-style:none;margin:0 auto;padding:14px 0 0;max-width:1220px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.sof-home .plan-item{display:flex;position:relative}
.sof-home .plan{position:relative;flex:1;display:flex;flex-direction:column;background:var(--surface);border:1px solid #EAECF0;border-radius:20px;overflow:visible;
  box-shadow:0 22px 44px -34px rgba(48,30,140,.32);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.sof-home .plan:hover{transform:translateY(-5px);border-color:var(--pb);box-shadow:0 30px 56px -30px var(--pg,rgba(48,30,140,.4))}
.sof-home .plan-item.reco .plan{border-color:#C4B5FF;box-shadow:0 30px 60px -30px rgba(125,95,255,.5)}
.sof-home .plan-reco{position:absolute;left:50%;top:0;z-index:2;transform:translate(-50%,-50%);padding:6px 14px;border-radius:999px;background:var(--violet);color:#fff;
  font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;box-shadow:0 10px 20px -10px rgba(125,95,255,.8)}
.sof-home .plan-top{position:relative;display:flex;flex-direction:column;align-items:flex-start;margin:-1px -1px 0;padding:26px 22px 22px;background:var(--pt);border:1px solid var(--pb);border-radius:20px 20px 0 0}
.sof-home .plan h3{margin:0;font-family:var(--font-display);font-weight:600;font-size:1.45rem;letter-spacing:-.02em;color:var(--pc)}
.sof-home .plan-tag{margin:4px 0 0;font-size:.95rem;line-height:1.4;color:var(--ink-soft);min-height:2.8em}
.sof-home .plan-chip{display:inline-block;margin-top:10px;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.75);border:1px solid var(--pb);color:var(--ps);font-size:.82rem;font-weight:600;line-height:1.2}
.sof-home .plan-price{margin:16px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.sof-home .plan-price .amt{font-family:var(--font-display);font-weight:600;font-size:clamp(1.9rem,1.5rem + .9vw,2.4rem);letter-spacing:-.03em;line-height:1;color:var(--pc);white-space:nowrap}
.sof-home .plan-price .per{font-size:.95rem;font-weight:500;color:var(--ps)}
.sof-home .plan-eng{margin:4px 0 0;font-size:.82rem;color:var(--muted)}
.sof-home .plan-top .btn{margin-top:16px;width:100%}
.sof-home .btn-outline{background:var(--surface);color:var(--violet-strong);border:1.5px solid #C9BDFF;box-shadow:none}
.sof-home .btn-outline:hover{background:var(--violet);border-color:var(--violet);color:#fff}
.sof-home .plan-feats{list-style:none;margin:0;padding:20px 22px 24px;display:grid;gap:12px}
.sof-home .plan-feats li{display:flex;align-items:flex-start;gap:10px;color:var(--ink-soft);line-height:1.4}
.sof-home .plan-feats strong{color:var(--ink);font-weight:600}
.sof-home .plan-feats small{display:block;font-size:.82rem;line-height:1.35;color:var(--muted)}
.sof-home .plan-feats svg{flex:none;width:20px;height:20px;color:var(--violet);margin-top:1px}
.sof-home .plan-starter{--pc:#119C4D;--ps:#15803D;--pb:#A3E9BF;--pt:#EEFDF4;--pg:rgba(18,184,90,.35)}
.sof-home .plan-pro{--pc:#7D5FFF;--ps:#6445F2;--pb:#D3C6FF;--pt:#F5F1FF;--pg:rgba(125,95,255,.4)}
.sof-home .plan-premium{--pc:#DE6A20;--ps:#B4541B;--pb:#FDD6B8;--pt:#FFF8F2;--pg:rgba(255,147,79,.38)}
.sof-home .plan-business{--pc:#2457D6;--ps:#1D4FC4;--pb:#BFD3FF;--pt:#EEF3FF;--pg:rgba(36,87,214,.35)}
/* offre de démarrage : bandeau sur toute la largeur */
.sof-home .plan-launch{--pc:#2B2B2B;--ps:#5B6474;max-width:1220px;margin:clamp(14px,1.6vw,20px) auto 0;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.3fr) auto;gap:clamp(20px,3vw,44px);align-items:center;
  padding:clamp(20px,2.4vw,30px) clamp(22px,2.6vw,34px);background:linear-gradient(135deg,#FFFFFF 0%,#F7F5FF 100%);border:1px solid #E6E0FF;border-radius:20px;box-shadow:0 22px 44px -36px rgba(48,30,140,.3)}
.sof-home .pl-tag{display:inline-block;margin-bottom:8px;padding:4px 10px;border-radius:999px;background:#F1EDFF;color:var(--violet-strong);font-size:.74rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
/* survol : même réaction que les cartes d'abonnement (l'apparition .rv garde son fondu) */
.sof-home .plan-launch{transition:opacity .8s ease var(--d,0s),transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.sof-home .plan-launch:hover{transform:translateY(-5px);border-color:#C4B5FF;box-shadow:0 30px 56px -30px rgba(125,95,255,.4)}
.sof-home .plan-launch h3{margin:0;font-family:var(--font-display);font-weight:600;font-size:1.45rem;letter-spacing:-.02em;color:var(--ink)}
.sof-home .pl-text p{margin:6px 0 0;font-size:.98rem;line-height:1.5;color:var(--ink-soft);max-width:34ch}
.sof-home .pl-feats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
.sof-home .pl-feats li{display:flex;align-items:flex-start;gap:9px;font-size:.95rem;line-height:1.4;color:var(--ink-soft)}
.sof-home .pl-feats strong{color:var(--ink);font-weight:600}
.sof-home .pl-feats svg{flex:none;width:19px;height:19px;color:var(--violet);margin-top:1px}
.sof-home .pl-price{display:flex;flex-direction:column;align-items:flex-start;min-width:200px}
.sof-home .pl-price .plan-price{margin:0}
.sof-home .pl-price .btn{margin-top:14px;width:100%}
/* au-delà de 5 000 apprenants */
.sof-home .plan-xl{max-width:1220px;margin:clamp(14px,1.6vw,20px) auto 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;
  padding:clamp(16px,2vw,22px) clamp(22px,2.6vw,34px);border:1px dashed #D3C6FF;border-radius:20px}
.sof-home .plan-xl p{flex:1 1 560px;min-width:0;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:1rem;line-height:1.5;color:var(--ink-soft)}
.sof-home .plan-xl .more{flex:none}
.sof-home .plan-xl p .pl-tag{margin:0}
.sof-home .plan-xl p strong{color:var(--ink);font-weight:600}
.sof-home .pricing-cta{display:flex;justify-content:center;margin-top:clamp(28px,3.4vw,44px)}

/* ---------- FAQ ---------- */
.sof-home .faq::before{left:-16vw;top:40%;width:min(80vw,900px);aspect-ratio:1;transform:translateY(-50%);background:radial-gradient(closest-side,rgba(255,206,175,.28),rgba(255,206,175,0))}
.sof-home .faq-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,4.2fr) minmax(0,7.8fr);gap:clamp(28px,5vw,80px);align-items:start}
.sof-home .faq-side{position:sticky;top:110px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.sof-home .faq h2{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.9rem,1.2rem + 2vw,2.9rem);line-height:1.1;letter-spacing:-0.03em;color:var(--ink);text-wrap:balance}
.sof-home .faq-side p{margin:0;color:var(--ink-soft);font-size:1.05rem;max-width:32ch}
.sof-home .faq-list{display:flex;flex-direction:column;gap:14px}
.sof-home .qa{background:var(--surface);border:1px solid #EAECF0;border-radius:18px;
  transition:border-color .3s,box-shadow .3s,opacity .8s ease var(--d,0s),transform 1.1s cubic-bezier(.16,1,.3,1) var(--d,0s)}
.sof-home .qa:hover{border-color:#DCD3FF}
.sof-home .qa[open]{border-color:#D6CCFF;box-shadow:0 24px 48px -34px rgba(48,30,140,.35)}
.sof-home .qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 24px 22px 28px;border-radius:18px;
  font-weight:600;font-size:clamp(1rem,.96rem + .2vw,1.1rem);line-height:1.45;color:var(--ink)}
.sof-home .qa summary::-webkit-details-marker{display:none}
.sof-home .qa summary svg{flex:none;width:24px;height:24px;color:var(--orange);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.sof-home .qa[open]:not(.closing) summary svg{transform:rotate(180deg)}
.sof-home .qa-body{overflow:hidden}
.sof-home .qa-in{padding:0 28px 24px;color:var(--ink-soft);line-height:1.7;max-width:76ch}
.sof-home .qa-in p,.sof-home .qa-in ul{margin:0 0 12px}
.sof-home .qa-in>:last-child{margin-bottom:0}
.sof-home .qa-in ul{padding-left:1.15em}
.sof-home .qa-in li{margin:8px 0;padding-left:4px}
.sof-home .qa-in li::marker{color:var(--violet)}
.sof-home .qa-in strong{color:var(--ink);font-weight:600}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .sof-home .plans{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px;row-gap:28px}
  .sof-home .plan-launch{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);row-gap:18px;max-width:760px}
  .sof-home .pl-text{grid-column:1 / -1}
  .sof-home .pl-text p{max-width:none}
  .sof-home .pl-price{min-width:0;align-self:center}
  .sof-home .plan-xl{max-width:760px}
}
@media (max-width:640px){
  .sof-home .plan-launch{grid-template-columns:minmax(0,1fr)}
  .sof-home .pl-price{width:100%}
}
@media (max-width:999px){
  .sof-home .qv{max-width:560px}
  .sof-home .ac{max-width:520px}
}
@media (max-width:899px){
  .sof-home .rev-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}
  .sof-home .rev-item:first-child{grid-column:1 / -1}
  .sof-home .rev-score{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 22px}
  .sof-home .faq-in{grid-template-columns:minmax(0,1fr)}
  .sof-home .faq-side{position:static}
}
@media (max-width:640px){
  .sof-home .rev-grid{grid-template-columns:minmax(0,1fr);max-width:560px}
}
@media (max-width:640px){
  .sof-home .plans{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;gap:12px;margin:0 calc(var(--gutter) * -1);
    padding:10px var(--gutter) 22px;scroll-padding-inline:var(--gutter);scrollbar-width:none;max-width:none}
  .sof-home .plans::-webkit-scrollbar{display:none}
  .sof-home .plan-item{flex:0 0 min(80vw,310px);scroll-snap-align:start}
  .sof-home .plans{padding-top:16px}
  .sof-home .pl-feats{grid-template-columns:minmax(0,1fr)}
  .sof-home .qa summary{padding:18px 18px 18px 20px}
  .sof-home .qa-in{padding:0 20px 20px}
  .sof-home .qv{--u:1.2cqw;aspect-ratio:.88}
  .sof-home .qv-panel{left:6%;width:88%;top:12%}
  .sof-home .qv-bg{left:2%;right:2%}
}
@media (prefers-reduced-motion:reduce){
  .sof-home .rv,.sof-home .qv-panel,.sof-home .qv-row,.sof-home .qv-ch,.sof-home .qv-chip-in,.sof-home .ac-bg,.sof-home .ac-step,.sof-home .ac-n,.sof-home .ac-n i,.sof-home .ac-txt,.sof-home .plan,.sof-home .btn-outline,.sof-home .qa,.sof-home .marquee img{transition:none}
  .sof-home .ac-step::after{transition:none}
  .sof-home .ac-step[data-s=active] .ac-n::after{animation:none}
  .js .sof-home .rv:not(.in),.js .sof-home .qv:not(.in) .qv-row,.js .sof-home .qv:not(.in) .qv-ch,.js .sof-home .ac:not(.in) .ac-bg,.js .sof-home .ac:not(.in) .ac-step,.js .sof-home .qv-chip-in:not(.show){opacity:1;transform:none}
  .js .sof-home .qv:not(.in) .qv-panel{opacity:1;transform:var(--qvt)}
  .js .sof-home .qv:not(.in) .qv-bg{opacity:1;transform:none}
  .sof-home .qv-bg{transition:none}
  .sof-home .qv-float,.sof-home .qv-chip,.sof-home .marquee-track{animation:none}
  .sof-home .stars5 i,.sof-home .rev-card{transition:none}
  .js .sof-home .rev-item:not(.in) .stars5 i{opacity:1;transform:none}
}

/* =====================================================================
   Interfaces : réaction discrète au passage de la souris (hors mur vidéo)
   ===================================================================== */
.sof-home .viz,.sof-home .qv,.sof-home .eco-viz{--px:0;--pq:0}
.sof-home .ly-in{transition:opacity .75s ease var(--d),transform 1.15s var(--ez,cubic-bezier(.16,1,.3,1)) var(--d),scale .55s cubic-bezier(.2,.8,.2,1),translate .55s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover) and (pointer:fine){
  .sof-home .viz,.sof-home .qv{transform:perspective(1400px) rotateY(calc(var(--px) * 3.4deg)) rotateX(calc(var(--pq) * -2.4deg))}
  .sof-home .eco-viz{transform:perspective(1400px) rotateY(calc(var(--px) * 2.2deg)) rotateX(calc(var(--pq) * -1.6deg))}
  .sof-home .ly{translate:calc(var(--px) * var(--dp) * -14px) calc(var(--pq) * var(--dp) * -10px)}
  .sof-home .qv-panel{translate:calc(var(--px) * -5px) calc(var(--pq) * -4px)}
  .sof-home .qv-chip{translate:calc(var(--px) * -13px) calc(var(--pq) * -9px)}
  .sof-home .viz.in .ly:hover .ly-in{scale:var(--hs,1.03);translate:0 -3px}
  .sof-home .viz.in .ly:hover img{filter:drop-shadow(0 22px 34px rgba(48,30,140,.2)) drop-shadow(0 2px 5px rgba(48,30,140,.08))}
}
.sof-home .ly img{transition:filter .5s ease}

/* =====================================================================
   Démo mise en avant : en-tête fixe, liens secondaires vers l'essai
   ===================================================================== */
.sof-home main section[id]{scroll-margin-top:80px}
.sof-home .cta-final .cta-sub{margin:0;max-width:56ch;color:var(--ink-soft);font-size:clamp(1.02rem,.96rem + .3vw,1.16rem);line-height:1.6;text-wrap:pretty}
.sof-home .pricing-cta{flex-wrap:wrap;align-items:center;gap:10px 22px}
.sof-home .pricing-cta .more{padding:12px 4px}
@media (prefers-reduced-motion:reduce){
  .sof-home .viz,.sof-home .qv,.sof-home .eco-viz{transform:none}
  .sof-home .ly,.sof-home .qv-panel,.sof-home .qv-chip{translate:none}
  .sof-home .ly-in,.sof-home .ly img{transition:none}
}

/* =====================================================================
   Contenus repris du site en ligne : promesses du hero, blocs CRM, satisfaction et LMS,
   cartes intégrations, carrousel d'avis, demande de contact, menus et pied de page
   ===================================================================== */
.sof-home button.btn{border:0;cursor:pointer}

/* ---------- hero : trois promesses ---------- */
.sof-home .hero-points{list-style:none;margin:-6px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px}
.sof-home .hero-points li{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:clamp(.95rem,.9rem + .2vw,1.05rem);color:var(--ink)}
.sof-home .hero-points svg{flex:none;width:20px;height:20px}

/* puces des blocs : l'icône reste sur la première ligne quand le texte passe à la ligne */
.sof-home .feat .checks:not(.box) li{align-items:flex-start;line-height:1.5}
.sof-home .feat .checks:not(.box) li>svg{margin-top:1px}

/* ---------- évaluation de la satisfaction ---------- */
.sof-home .sv{position:relative;width:100%;max-width:640px;margin:0 auto;aspect-ratio:1.08;container-type:inline-size;--u:1cqw;--svt:rotateX(4deg) rotateY(-7deg);--px:0;--pq:0}
.sof-home .sv-bg{position:absolute;left:5%;right:6%;top:8%;bottom:7%;border-radius:calc(4.6 * var(--u));background:linear-gradient(200deg,#FFF2E8 0%,#F4EFFF 55%,#EBE4FF 100%);
  transition:opacity .9s ease,transform 1.2s cubic-bezier(.16,1,.3,1)}
.js .sof-home .sv:not(.in) .sv-bg{opacity:0;transform:scale(.94)}
.sof-home .sv-float{position:absolute;inset:0;animation:sh-qvDrift 10s ease-in-out infinite alternate;animation-play-state:paused}
.sof-home .sv.in.on .sv-float{animation-play-state:running}
.sof-home .sv-panel{position:absolute;left:8%;top:15%;width:82%;background:var(--surface);border:1px solid #E6E0FF;border-radius:calc(2.6 * var(--u));padding:calc(2.4 * var(--u)) calc(2.6 * var(--u)) calc(2.8 * var(--u));
  box-shadow:0 calc(5 * var(--u)) calc(9 * var(--u)) calc(-4 * var(--u)) rgba(48,30,140,.3),0 calc(.4 * var(--u)) calc(1.2 * var(--u)) rgba(48,30,140,.06);transform:var(--svt);
  transition:opacity .8s ease .05s,transform 1.3s cubic-bezier(.16,1,.3,1) .05s}
.js .sof-home .sv:not(.in) .sv-panel{opacity:0;transform:translate3d(0,calc(8 * var(--u)),0) rotateX(18deg) rotateY(-16deg)}
.sof-home .sv-head{display:flex;align-items:center;gap:calc(1.2 * var(--u));margin-bottom:calc(2.2 * var(--u))}
.sof-home .sv-back{flex:none;display:grid;width:calc(2.5 * var(--u));height:calc(2.5 * var(--u));color:var(--ink)}
.sof-home .sv-back svg{width:100%;height:100%}
.sof-home .sv-head b{flex:1;min-width:0;font-family:var(--font-display);font-weight:600;font-size:calc(2.15 * var(--u));letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sof-home .sv-send{flex:none;display:inline-flex;align-items:center;gap:calc(.8 * var(--u));padding:calc(1 * var(--u)) calc(1.7 * var(--u));border-radius:calc(1 * var(--u));background:var(--violet);color:#fff;
  font-weight:600;font-size:calc(1.7 * var(--u));line-height:1.2;box-shadow:0 calc(1.2 * var(--u)) calc(2.2 * var(--u)) calc(-1 * var(--u)) rgba(125,95,255,.7);transition:transform .18s ease,background-color .2s}
.sof-home .sv-send svg{width:calc(2 * var(--u));height:calc(2 * var(--u))}
.sof-home .sv.press .sv-send{transform:scale(.93);background:var(--violet-strong)}
.sof-home .sv-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(1.2 * var(--u));margin-bottom:calc(2.2 * var(--u))}
.sof-home .sv-stat{min-height:calc(8.6 * var(--u));padding:calc(1.4 * var(--u)) calc(1.6 * var(--u)) calc(1.3 * var(--u));border-radius:calc(1.4 * var(--u));background:#F7F6FB}
.sof-home .sv-stat small{display:block;font-size:calc(1.6 * var(--u));line-height:1.3;font-weight:500;color:var(--ink-soft);white-space:nowrap}
.sof-home .sv-stat p{margin:calc(.9 * var(--u)) 0 0;display:flex;align-items:baseline;gap:calc(.4 * var(--u));line-height:1}
.sof-home .sv-stat p b{display:inline-block;font-family:var(--font-display);font-weight:600;font-size:calc(3.4 * var(--u));letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.sof-home .sv-stat .sv-avg{color:#15803D}
.sof-home .sv-stat p span{font-size:calc(1.7 * var(--u));font-weight:500;color:var(--muted)}
.sof-home .sv-stat b.pop{animation:sh-svPop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes sh-svPop{from{transform:scale(1.28)}to{transform:none}}
.sof-home .sv-sk{display:flex;flex-direction:column;justify-content:center;gap:calc(1.1 * var(--u))}
.sof-home .sv-sk i{display:block;width:80%;height:calc(1.2 * var(--u));border-radius:99px;background:#E9E7F2}
.sof-home .sv-sk i+i{width:36%;height:calc(2.4 * var(--u));border-radius:calc(.8 * var(--u))}
.sof-home .sv-table{border:1px solid #ECEAF3;border-radius:calc(1.4 * var(--u));overflow:hidden}
.sof-home .sv-tr{display:grid;grid-template-columns:calc(1.8 * var(--u)) minmax(0,1.7fr) minmax(0,1fr) calc(11 * var(--u));align-items:center;gap:calc(1.4 * var(--u));
  padding:calc(1.2 * var(--u)) calc(1.6 * var(--u));border-top:1px solid #F0EEF6;font-size:calc(1.7 * var(--u));line-height:1.25;
  transition:background-color .6s,opacity .6s ease var(--d,0s),transform .8s cubic-bezier(.16,1,.3,1) var(--d,0s)}
.sof-home .sv-th{border-top:0;background:#F7F6FB;font-size:calc(1.55 * var(--u));font-weight:600;color:var(--ink-soft)}
.js .sof-home .sv:not(.in) .sv-tr:not(.sv-th){opacity:0;transform:translate3d(calc(3 * var(--u)),0,0)}
.sof-home .sv-tr.flash{background:#F3FCF6}
.sof-home .sv-cb{width:calc(1.6 * var(--u));height:calc(1.6 * var(--u));border:1.5px solid #C9C6D6;border-radius:calc(.4 * var(--u))}
.sof-home .sv-name{font-weight:500;color:var(--violet-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sof-home .sv-nt{display:grid;align-items:center;justify-items:start}
.sof-home .sv-nt>*{grid-area:1/1}
.sof-home .sv-nt i{display:block;width:calc(6.5 * var(--u));height:calc(.9 * var(--u));border-radius:99px;background:#EEEDF4;transition:opacity .3s}
.sof-home .sv-nt b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;opacity:0;transform:translateY(40%);transition:opacity .35s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.sof-home .sv-nt small{font-size:.86em;font-weight:500;color:var(--muted)}
.sof-home .sv-tr[data-s=done] .sv-nt i{opacity:0}
.sof-home .sv-tr[data-s=done] .sv-nt b{opacity:1;transform:none}
.sof-home .sv-st{display:grid}
.sof-home .sv-st em{grid-area:1/1;justify-self:start;font-style:normal;font-size:calc(1.5 * var(--u));font-weight:600;line-height:1.2;padding:calc(.6 * var(--u)) calc(1.25 * var(--u));border:1px solid;border-radius:99px;white-space:nowrap;
  opacity:0;transform:scale(.7);transition:opacity .35s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.sof-home .sv-st .s-wait{color:#475467;background:#F2F4F7;border-color:#E4E7EC}
.sof-home .sv-st .s-done{color:#15803D;background:#DCFCE7;border-color:#BBF7D0}
.sof-home .sv-tr[data-s=wait] .s-wait,.sof-home .sv-tr[data-s=done] .s-done{opacity:1;transform:none}
.sof-home .sv-cur{position:absolute;z-index:4;left:66%;top:84%;width:calc(3.4 * var(--u));pointer-events:none;opacity:0;
  transition:left 1.1s cubic-bezier(.45,0,.2,1),top 1.1s cubic-bezier(.45,0,.2,1),opacity .5s ease,transform .18s ease}
.sof-home .sv.in .sv-cur{opacity:1}
.sof-home .sv.aim .sv-cur{left:calc(100% - 4.4 * var(--u));top:calc(4.1 * var(--u))}
.sof-home .sv.press .sv-cur{transform:scale(.86)}
.sof-home .sv-cur svg{display:block;width:100%;height:auto;filter:drop-shadow(0 3px 5px rgba(48,30,140,.22))}
.sof-home .sv-chip{position:absolute;z-index:3;animation:sh-chipDrift var(--T,7s) ease-in-out var(--ph,0s) infinite alternate;animation-play-state:paused}
.sof-home .sv.in.on .sv-chip{animation-play-state:running}
.sof-home .sv-a{right:0;top:1.5%;--T:6.8s;--ph:-1.6s}
.sof-home .sv-b{left:0;bottom:3%;--T:7.6s;--ph:-3.8s}
.sof-home .sv-chip-in{display:flex;align-items:center;gap:calc(1.8 * var(--u));padding:calc(1.4 * var(--u)) calc(2.6 * var(--u)) calc(1.4 * var(--u)) calc(1.4 * var(--u));background:var(--surface);border:1px solid #E6E0FF;border-radius:calc(2.4 * var(--u));
  box-shadow:0 calc(3.6 * var(--u)) calc(6 * var(--u)) calc(-2.6 * var(--u)) rgba(48,30,140,.32),0 calc(.3 * var(--u)) calc(1 * var(--u)) rgba(48,30,140,.06);transition:opacity .45s ease,transform .7s cubic-bezier(.34,1.56,.64,1)}
.js .sof-home .sv-chip-in:not(.show){opacity:0;transform:translate3d(0,calc(2 * var(--u)),0) scale(.86)}
.sof-home .sv-chip-in b{display:block;font-family:var(--font-display);font-weight:600;font-size:calc(2.1 * var(--u));line-height:1.25;color:var(--ink);white-space:nowrap}
.sof-home .sv-chip-in small{display:block;font-size:calc(1.7 * var(--u));line-height:1.3;color:var(--muted);white-space:nowrap}
.sof-home .sv-qr{flex:none;display:block;width:calc(6.6 * var(--u));height:calc(6.6 * var(--u));padding:calc(.5 * var(--u));border:1px solid #ECE8FB;border-radius:calc(1.3 * var(--u));background:#fff;color:#2B2340}
.sof-home .sv-qr svg{display:block;width:100%;height:100%}
.sof-home .sv-an{flex-direction:column;align-items:stretch;gap:calc(1.3 * var(--u));padding:calc(1.8 * var(--u)) calc(2.4 * var(--u)) calc(2 * var(--u))}
.sof-home .sv-an ul{list-style:none;margin:0;padding:0;display:grid;gap:calc(1 * var(--u))}
.sof-home .sv-an li{display:grid;grid-template-columns:calc(10.5 * var(--u)) calc(15 * var(--u)) auto;align-items:center;gap:calc(1.2 * var(--u));font-size:calc(1.6 * var(--u));line-height:1.2;color:var(--ink-soft)}
.sof-home .sv-an i{position:relative;height:calc(.9 * var(--u));border-radius:99px;background:#F0ECFE;overflow:hidden}
.sof-home .sv-an i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#7D5FFF,#A992FF);transform-origin:0 50%;transform:scaleX(var(--v));
  transition:transform 1.1s cubic-bezier(.2,.8,.2,1) .25s}
.sof-home .sv-an li:nth-child(2) i::after{background:linear-gradient(90deg,#FF934F,#FFB98A);transition-delay:.38s}
.sof-home .sv-an li:nth-child(3) i::after{background:linear-gradient(90deg,#22A55B,#5CC79A);transition-delay:.5s}
.js .sof-home .sv-an:not(.show) i::after{transform:scaleX(0);transition-duration:.3s;transition-delay:0s}
.sof-home .sv-an em{font-style:normal;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- intégrations : trois engagements ---------- */
.sof-home .feat-int .int-cards{list-style:none;margin:clamp(36px,4.6vw,60px) auto 0;padding:0;max-width:1200px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.sof-home .int-cards>li{display:flex}
.sof-home .int-card{flex:1;padding:clamp(22px,2.3vw,30px);background:var(--surface);border:1px solid #ECE8FB;border-radius:20px;
  box-shadow:0 22px 44px -36px rgba(48,30,140,.35);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.sof-home .int-card:hover{transform:translateY(-4px);border-color:#DCD3FF;box-shadow:0 30px 56px -36px rgba(48,30,140,.42)}
.sof-home .int-ic{display:grid;place-items:center;width:46px;height:46px;margin-bottom:16px;border-radius:14px;background:#F1EDFF;color:var(--violet)}
.sof-home .int-ic.i1{background:#FFF1E7;color:#EE7A31}
.sof-home .int-ic.i2{background:#E9FBF1;color:#15803D}
.sof-home .int-ic svg{width:24px;height:24px}
.sof-home .int-card h3{margin:0 0 8px;font-family:var(--font-display);font-weight:600;font-size:1.14rem;line-height:1.3;letter-spacing:-.015em;color:var(--ink)}
.sof-home .feat .int-card p{margin:0;max-width:none;font-size:.98rem;line-height:1.6;color:var(--ink-soft)}

/* ---------- avis : note moyenne et carrousel ---------- */
.sof-home .rev-wrap{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(16px,2vw,24px);max-width:1200px;margin:0 auto;align-items:stretch}
.sof-home .rev-side{display:flex;margin-bottom:76px}
.sof-home .rev-side .rev-score{align-items:flex-start;justify-content:center}
.sof-home .rev-score .more{margin-top:4px}
.sof-home .rev-car{position:relative;min-width:0;display:flex;flex-direction:column;--g:clamp(14px,1.6vw,20px);--ml:0px;--mr:56px}
.sof-home .rev-car.at-end{--mr:0px}
.sof-home .rev-car:not(.at-start){--ml:40px}
.sof-home .rev-track{list-style:none;margin:-8px -18px -26px;padding:8px 18px 40px;display:flex;gap:var(--g);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:18px;
  scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--ml),#000 calc(100% - var(--mr)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--ml),#000 calc(100% - var(--mr)),transparent 100%)}
.sof-home .rev-track::-webkit-scrollbar{display:none}
.sof-home .rev-track:focus-visible{outline-offset:-3px;border-radius:24px}
.sof-home .rev-slide{flex:0 0 calc((100% - 2 * var(--g)) / 2.25);display:flex;scroll-snap-align:start}
.sof-home .rev-slide .rev-card{flex:1}
.sof-home .rev-card .rev-logo{display:flex;align-items:center;flex:none;height:48px;width:auto;max-width:none;margin-top:8px}
.sof-home .rev-logo img{display:block;object-fit:contain}
.sof-home .rev-ctrl{display:flex;align-items:center;gap:10px;margin-top:18px}
.sof-home .rev-btn{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #E1D9FF;border-radius:50%;background:var(--surface);color:var(--violet);cursor:pointer;
  box-shadow:0 10px 20px -14px rgba(48,30,140,.4);transition:background-color .25s,border-color .25s,color .25s,transform .25s,opacity .25s}
.sof-home .rev-btn:hover:not(:disabled){background:var(--violet);border-color:var(--violet);color:#fff;transform:translateY(-1px)}
.sof-home .rev-btn:disabled{opacity:.38;cursor:default;box-shadow:none}
.sof-home .rev-btn svg{width:20px;height:20px}
.sof-home .rev-prog{flex:1;height:3px;margin-left:10px;border-radius:99px;background:#ECE8FB;overflow:hidden}
.sof-home .rev-prog i{display:block;height:100%;width:var(--p,16%);border-radius:inherit;background:linear-gradient(90deg,#7D5FFF,#A992FF);transition:width .45s cubic-bezier(.2,.8,.2,1)}
.sof-home .rev-count{flex:none;min-width:4.6em;text-align:right;font-size:.92rem;color:var(--muted);font-variant-numeric:tabular-nums}
.sof-home .rev-count b{font-weight:600;color:var(--ink)}

/* ---------- demande de contact ---------- */
.sof-home .simplify{position:relative;padding:clamp(40px,6vw,88px) var(--gutter)}
.sof-home .simp-panel{position:relative;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,4.5vw,64px);align-items:center;
  padding:clamp(24px,4.4vw,64px);border-radius:clamp(24px,2.8vw,36px);overflow:hidden;isolation:isolate;color:var(--ink);
  background:linear-gradient(135deg,#FFFFFF 0%,#F7F4FF 52%,#FFF6EE 100%);border:1px solid #E8E3FB;box-shadow:0 50px 90px -56px rgba(48,30,140,.38),0 2px 8px rgba(48,30,140,.05)}
/* halos du hero (violet et pêche) : la page se referme comme elle s'ouvre */
.sof-home .simp-orb{position:absolute;z-index:-2;aspect-ratio:1;border-radius:50%;pointer-events:none;animation:orbA 18s ease-in-out infinite alternate}
.sof-home .simp-orb.o1{width:78%;left:-30%;top:-46%;background:radial-gradient(closest-side,rgba(204,191,255,.62),rgba(204,191,255,0))}
.sof-home .simp-orb.o2{width:66%;right:-22%;bottom:-48%;background:radial-gradient(closest-side,rgba(255,206,175,.58),rgba(255,206,175,0));animation-name:orbB;animation-duration:21s}
/* trame de points en grille sur tout le panneau */
.sof-home .simp-panel::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background-image:radial-gradient(rgba(125,95,255,.22) 1.1px,transparent 1.6px);background-size:24px 24px;background-position:12px 12px}
.sof-home .simp-text{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,30px)}
.sof-home .simp-text h2{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.7rem,1.1rem + 1.7vw,2.5rem);line-height:1.14;letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.sof-home .simp-text h2 .hl{color:var(--violet)}
.sof-home .simp-checks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sof-home .simp-checks li{display:flex;align-items:center;gap:12px;font-weight:500;font-size:clamp(1rem,.96rem + .2vw,1.08rem);color:var(--ink)}
.sof-home .simp-checks svg{flex:none;width:26px;height:26px;color:var(--violet)}
.sof-home .simp-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;padding:clamp(20px,2.6vw,32px);border-radius:clamp(18px,2vw,24px);background:var(--surface);color:var(--ink);border:1px solid #E6E0FF;
  box-shadow:0 34px 64px -34px rgba(48,30,140,.38),0 1px 3px rgba(48,30,140,.05)}
.sof-home .f{display:flex;flex-direction:column;gap:6px;min-width:0}
.sof-home .f-full{grid-column:1 / -1}
.sof-home .f label{font-size:.9rem;font-weight:500;color:var(--ink)}
.sof-home .f label i{margin-left:2px;font-style:normal;color:#D93A3F}
.sof-home .f input,.sof-home .f select,.sof-home .f textarea{width:100%;padding:12px 14px;font:inherit;font-size:.98rem;color:var(--ink);background:#FBFAFF;border:1px solid #E1DCF3;border-radius:12px;outline:none;
  transition:border-color .2s,box-shadow .2s,background-color .2s}
.sof-home .f textarea{min-height:108px;resize:vertical}
.sof-home .f input:focus,.sof-home .f select:focus,.sof-home .f textarea:focus{border-color:var(--violet);background:#fff;box-shadow:0 0 0 4px rgba(125,95,255,.16)}
.sof-home .f-sel{position:relative;display:block}
.sof-home .f-sel select{-webkit-appearance:none;appearance:none;padding-right:42px;cursor:pointer}
.sof-home .f-sel svg{position:absolute;right:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.sof-home .f-act{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin-top:4px}
.sof-home .f-act .btn{width:100%}
.sof-home .simp-note{margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px;font-size:.9rem;color:var(--ink-soft)}
.sof-home .simp-note span{display:inline-flex;align-items:center;gap:6px}
.sof-home .simp-note svg{width:16px;height:16px;color:var(--violet)}
.sof-home .simp-msg{margin:0;padding:10px 12px;border-radius:12px;background:#F5F2FF;font-size:.92rem;line-height:1.45;color:var(--violet-strong);text-align:center}
.sof-home .simp-msg:empty{display:none}

/* ---------- en-tête : menus déroulants et menu mobile ---------- */

/* ---------- pied de page ---------- */

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .sof-home .rev-wrap{grid-template-columns:minmax(0,1fr);max-width:900px}
  .sof-home .rev-side{margin-bottom:0}
  .sof-home .rev-side .rev-score{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 22px}
}
@media (max-width:999px){
  .sof-home .simp-panel{grid-template-columns:minmax(0,1fr)}
  .sof-home .sv{max-width:580px}
}
@media (max-width:899px){
  .sof-home .feat-int .int-cards{grid-template-columns:minmax(0,1fr);max-width:620px}
}
@media (max-width:640px){
  .sof-home .rev-slide{flex-basis:calc(100% - 44px)}
  .sof-home .rev-car{--mr:24px}
  .sof-home .rev-car:not(.at-start){--ml:16px}
}
@media (max-width:640px){
  .sof-home .sv{--u:1.45cqw;aspect-ratio:.84}
  .sof-home .sv-panel{left:2%;width:96%;top:15%}
  .sof-home .sv-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sof-home .sv-sk{display:none}
  .sof-home .sv-bg{left:1%;right:1%}
  .sof-home .sv-a{top:1%}
  .sof-home .sv-b{bottom:2%}
}
@media (max-width:640px){
  .sof-home .simp-form{grid-template-columns:minmax(0,1fr)}
}

/* ---------- réaction à la souris et mouvement réduit ---------- */
@media (hover:hover) and (pointer:fine){
  .sof-home .sv{transform:perspective(1400px) rotateY(calc(var(--px) * 3.4deg)) rotateX(calc(var(--pq) * -2.4deg))}
  .sof-home .sv-panel{translate:calc(var(--px) * -5px) calc(var(--pq) * -4px)}
  .sof-home .sv-chip{translate:calc(var(--px) * -13px) calc(var(--pq) * -9px)}
}
@media (prefers-reduced-motion:reduce){
  .sof-home .sv{transform:none}
  .sof-home .sv-panel,.sof-home .sv-chip{translate:none}
  .sof-home .sv-bg,.sof-home .sv-panel,.sof-home .sv-tr,.sof-home .sv-chip-in,.sof-home .sv-nt b,.sof-home .sv-nt i,.sof-home .sv-st em,.sof-home .sv-an i::after,.sof-home .int-card,.sof-home .rev-btn,.sof-home .rev-prog i{transition:none}
  .js .sof-home .sv:not(.in) .sv-bg,.js .sof-home .sv:not(.in) .sv-tr:not(.sv-th),.js .sof-home .sv-chip-in:not(.show){opacity:1;transform:none}
  .js .sof-home .sv:not(.in) .sv-panel{opacity:1;transform:var(--svt)}
  .js .sof-home .sv-an:not(.show) i::after{transform:scaleX(var(--v))}
  .sof-home .sv-float,.sof-home .sv-chip,.sof-home .simp-orb,.sof-home .sv-stat b.pop{animation:none}
  .sof-home .sv-cur{display:none}
}

/* l'appel final précède désormais le pied de page */
.sof-home .cta-final{padding-bottom:clamp(56px,7vw,100px)}

/* =====================================================================
   Assistant IA : la consigne se tape, l'IA rédige l'e-mail et joint les documents
   (sans JavaScript ou en mouvement réduit : la composition s'affiche complète, comme la maquette)
   ===================================================================== */
.sof-home .ai-stage{position:relative;animation:sh-drift var(--T) ease-in-out var(--ph) infinite alternate;animation-play-state:paused}
.sof-home .viz.in.on .ai-stage{animation-play-state:running}
.sof-home .ly .ai-stage img{animation:none;filter:none;will-change:auto}
.sof-home .viz.in .ly:hover .ai-stage img{filter:none}
.sof-home .ai-stage .ai-ov{position:absolute;display:block;max-width:none}
.sof-home .ai.live .ai-body{clip-path:inset(0 0 100% 0)}
.sof-home .ai.live.gen .ai-body{clip-path:inset(0 0 0 0);transition:clip-path 1.7s cubic-bezier(.45,.05,.4,1)}
.sof-home .ai-scan{position:absolute;z-index:1;overflow:hidden;pointer-events:none}
.sof-home .ai-scan i{position:absolute;left:0;right:0;top:0;height:24%;transform:translateY(-100%);opacity:0;
  background:linear-gradient(to bottom,rgba(125,95,255,0),rgba(125,95,255,.08) 55%,rgba(125,95,255,.2) 94%,rgba(125,95,255,0))}
.sof-home .ai.live.gen .ai-scan i{animation:sh-aiScan 1.7s cubic-bezier(.45,.05,.4,1) both}
@keyframes sh-aiScan{0%{top:0;opacity:0}12%{opacity:1}82%{opacity:1}100%{top:100%;opacity:0}}
.sof-home .ai-chip{transition:opacity .4s ease calc(var(--i) * .16s),transform .6s cubic-bezier(.34,1.56,.64,1) calc(var(--i) * .16s)}
.sof-home .ai.live .ai-chip{opacity:0;transform:translateY(16%) scale(.94)}
.sof-home .ai.live.att .ai-chip{opacity:1;transform:none}
.sof-home .ai.live .ai-p{clip-path:inset(0 100% 0 0)}
.sof-home .ai.live.t1 .ai-p1,.sof-home .ai.live.t2 .ai-p2{clip-path:inset(0 0 0 0)}
.sof-home .ai.live.t1 .ai-p1{transition:clip-path 1.3s steps(34,end)}
.sof-home .ai.live.t2 .ai-p2{transition:clip-path .38s steps(9,end)}
.sof-home .ai-caret{position:absolute;z-index:2;left:var(--l);width:max(1.5px,.2%);border-radius:1px;background:var(--violet);opacity:0;pointer-events:none}
.sof-home .ai.live .k1{opacity:1;animation:sh-aiBlink 1.05s steps(1,end) infinite}
.sof-home .ai.live:not(.on) .ai-caret{animation-play-state:paused}
.sof-home .ai.live.t1 .k1{left:calc(var(--l) + var(--w));animation:none;transition:left 1.3s steps(34,end)}
.sof-home .ai.live.t2 .k1{opacity:0}
.sof-home .ai.live.t2 .k2{opacity:1;left:calc(var(--l) + var(--w));transition:left .38s steps(9,end)}
.sof-home .ai.live.typed .k2{animation:sh-aiBlink 1.05s steps(1,end) infinite}
.sof-home .ai.live.press .ai-caret,.sof-home .ai.live.gen .ai-caret{opacity:0;animation:none}
@keyframes sh-aiBlink{0%{opacity:1}50%{opacity:0}}
.sof-home .ai-glow,.sof-home .ai-ping{position:absolute;z-index:2;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.sof-home .ai-glow{width:12%;background:radial-gradient(closest-side,rgba(255,255,255,.92),rgba(255,255,255,.55) 45%,rgba(255,255,255,0));opacity:.8;transition:opacity .6s ease}
.sof-home .ai.live .ai-glow{opacity:0}
.sof-home .ai.live.aim .ai-glow{opacity:.8}
.sof-home .ai-ping{width:5%;border:2px solid rgba(125,95,255,.55);opacity:0}
.sof-home .ai.live.gen .ai-ping{animation:sh-aiPing .9s cubic-bezier(.2,.8,.2,1)}
@keyframes sh-aiPing{0%{opacity:.85;transform:translate(-50%,-50%) scale(.6)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.6)}}
.sof-home .ai-cur{position:absolute;z-index:3;width:9.1%;pointer-events:none;--cx:-9.09%;--cy:-8.7%;--cs:1;
  transform:translate(var(--cx),var(--cy)) scale(var(--cs));transform-origin:9.09% 8.7%;transition:transform .95s cubic-bezier(.45,0,.2,1),opacity .5s ease 1.1s}
.sof-home .ai-cur svg{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 10px rgba(48,30,140,.18))}
.js .sof-home .viz.ai:not(.in) .ai-cur{opacity:0}
.sof-home .ai.live .ai-cur{--cx:52%;--cy:66%}
.sof-home .ai.live.aim .ai-cur{--cx:-9.09%;--cy:-8.7%}
.sof-home .ai.live.press .ai-cur{--cs:.86;transition:transform .16s ease}
.sof-home .ai.live.rel .ai-cur{transition:transform .3s ease}
.sof-home .ai.live.gen .ai-lab-r .ly-in{animation:sh-aiGlow 1.9s ease-out}
@keyframes sh-aiGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(255,147,79,0))}30%{filter:drop-shadow(0 0 16px rgba(255,147,79,.55))}}
.sof-home .ai.live.fade .ai-ov{opacity:0;transition:opacity .6s ease}
.sof-home .ai.snap .ai-stage *{transition:none!important}
@media (prefers-reduced-motion:reduce){
  .sof-home .ai-stage{animation:none}
  .sof-home .ai-cur,.sof-home .ai-glow{transition:none}
}

/* =====================================================================
   Mur du hero : interfaces mieux mélangées et petits signes de vie
   ===================================================================== */
/* une interface remplacée par une autre de format voisin est recadrée par le haut, jamais déformée */
.sof-home .wt.shot img{height:100%;object-fit:cover;object-position:50% 0}
.sof-home .wt.shot img.nx{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;transition:opacity .9s ease}
.sof-home .wt.shot img.nx.on{opacity:1}
/* mise à jour : un halo violet discret accompagne le changement d'interface */
.sof-home .wt.shot::after{content:"";position:absolute;inset:-3px;border-radius:calc(var(--r,12px) + 3px);pointer-events:none;opacity:0;
  box-shadow:0 0 0 2px rgba(125,95,255,.5),0 0 26px 3px rgba(125,95,255,.3)}
.sof-home .wt.fx-glow::after{animation:sh-wtGlow 1.9s ease-out}
@keyframes sh-wtGlow{0%{opacity:0}22%{opacity:1}100%{opacity:0}}
/* lecture par l'IA : un reflet traverse l'interface */
.sof-home .wt.shot::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,rgba(255,255,255,0) 36%,rgba(255,255,255,.75) 47%,rgba(205,192,255,.5) 52%,rgba(255,255,255,0) 64%) no-repeat;
  background-size:280% 100%;background-position:115% 0}
.sof-home .wt.fx-scan::before{animation:sh-wtScan 1.6s cubic-bezier(.45,0,.3,1)}
@keyframes sh-wtScan{0%{opacity:0;background-position:115% 0}18%{opacity:1}82%{opacity:1}100%{opacity:0;background-position:-15% 0}}
/* validation ou suggestion de l'IA : une pastille apparaît dans le coin */
.sof-home .fx-badge{position:absolute;z-index:2;top:calc(var(--bd,26px) * -.32);right:calc(var(--bd,26px) * -.32);width:var(--bd,26px);height:var(--bd,26px);border-radius:50%;
  display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,#8E73FF,#6445F2);box-shadow:0 6px 14px -6px rgba(100,69,242,.8);
  animation:sh-wtBadge 2.1s cubic-bezier(.34,1.56,.64,1) both}
.sof-home .fx-badge svg{width:58%;height:58%}
.sof-home .fx-badge.ok{background:linear-gradient(140deg,#3CCB82,#15803D);box-shadow:0 6px 14px -6px rgba(21,128,61,.7)}
@keyframes sh-wtBadge{0%{opacity:0;transform:scale(.3)}16%{opacity:1;transform:scale(1)}80%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.85)}}
/* synchronisation : une fine barre se remplit en bas de l'interface */
.sof-home .fx-bar{position:absolute;z-index:2;left:12%;right:12%;bottom:6%;height:max(2px,1.4%);border-radius:3px;background:rgba(125,95,255,.16);overflow:hidden;animation:sh-wtFade 1.8s ease both}
.sof-home .fx-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7D5FFF,#B5A3FF);transform-origin:0 50%;animation:sh-wtBar 1.3s cubic-bezier(.45,0,.2,1) .1s both}
@keyframes sh-wtBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sh-wtFade{0%{opacity:0}12%{opacity:1}80%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .sof-home .wt.fx-glow::after,.sof-home .wt.fx-scan::before,.sof-home .fx-badge,.sof-home .fx-bar,.sof-home .fx-bar i{animation:none}
}
/* hero sur mobile : les trois promesses s'alignent en liste, icônes alignées */
@media (max-width:640px){
  .sof-home .hero-points{flex-direction:column;align-items:flex-start;width:fit-content;max-width:100%;margin-inline:auto;gap:8px}
  .sof-home .hero-points li{align-items:flex-start;text-align:left}
  .sof-home .hero-points svg{margin-top:1px}
}

/* =====================================================================
   Logos clients : défilement lent vers la droite, en gris, couleur au centre
   ===================================================================== */
.sof-home .marquee.run .marquee-track{animation:none;will-change:transform}
.sof-home .marquee img{filter:grayscale(calc(1 - var(--c,0)));opacity:calc(.58 + .42 * var(--c,0));transform:scale(calc(1 + .05 * var(--c,0)));
  transition:filter .3s ease,opacity .3s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.sof-home .marquee li:hover img{filter:none;opacity:1;transform:translateY(-2px) scale(1.05)}
@media (prefers-reduced-motion:reduce){ .sof-home .marquee img{transition:none} }

/* =====================================================================
   CRM : suivi des inscriptions, une carte validée glisse dans sa colonne
   ===================================================================== */
.sof-home .deco-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;overflow:visible;pointer-events:none;transition:opacity 1.1s ease .1s}
.js .sof-home .viz:not(.in) .deco-bg{opacity:0}
.sof-home .crm-dash{fill:none;stroke:rgba(102,102,153,.5);stroke-width:4;stroke-linecap:round;stroke-dasharray:13 13;animation:sh-crmFlow 2.6s linear infinite;animation-play-state:paused}
.sof-home .viz.crm.in.on .crm-dash{animation-play-state:running}
@keyframes sh-crmFlow{to{stroke-dashoffset:-52}}
/* la carte : drift sur l'ensemble carte + curseur */
.sof-home .crm-stage{position:relative;animation:sh-drift var(--T) ease-in-out var(--ph) infinite alternate;animation-play-state:paused}
.sof-home .viz.in.on .crm-stage{animation-play-state:running}
.sof-home .ly .crm-stage img{animation:none}
/* glisser-déposer : la carte part de « À vérifier / compléter » et se pose dans « Validées / en cours » */
.sof-home .viz.crm .crm-card .ly-in{transition:opacity .35s ease 1.05s,transform 1.5s cubic-bezier(.55,0,.18,1.06) 1.05s,scale .55s cubic-bezier(.2,.8,.2,1),translate .55s cubic-bezier(.2,.8,.2,1)}
.js .sof-home .viz.crm:not(.in) .crm-card .ly-in{opacity:0;transform:translate(var(--gx),var(--gy)) rotate(-5deg) scale(1.04)}
.sof-home .crm-ring{position:absolute;left:3.6%;right:3.4%;top:4.6%;bottom:8.2%;border-radius:4.4% / 6.2%;border:2px solid rgba(125,95,255,.6);opacity:0;pointer-events:none}
.sof-home .viz.crm.in .crm-ring{animation:sh-crmRing 1.1s cubic-bezier(.2,.8,.2,1) 2.5s}
@keyframes sh-crmRing{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(1.07)}}
.sof-home .crm-glow{position:absolute;z-index:1;width:24%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.9),rgba(255,255,255,.5) 45%,rgba(255,255,255,0))}
.sof-home .crm-cur{position:absolute;z-index:2;pointer-events:none;transform:translate(-9.09%,-8.7%);transform-origin:9.09% 8.7%}
.sof-home .viz.crm.in .crm-cur{animation:sh-crmDrop .5s cubic-bezier(.34,1.56,.64,1) 2.45s}
@keyframes sh-crmDrop{0%{transform:translate(-9.09%,-8.7%) scale(1)}35%{transform:translate(-9.09%,-8.7%) scale(.86)}100%{transform:translate(-9.09%,-8.7%) scale(1)}}
.sof-home .crm-cur svg{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 10px rgba(48,30,140,.18))}
@media (prefers-reduced-motion:reduce){
  .sof-home .deco-bg{transition:none}
  .js .sof-home .viz:not(.in) .deco-bg{opacity:1}
  .sof-home .crm-dash,.sof-home .crm-stage,.sof-home .viz.crm.in .crm-ring,.sof-home .viz.crm.in .crm-cur{animation:none}
  .sof-home .viz.crm .crm-card .ly-in{transition:none}
  .js .sof-home .viz.crm:not(.in) .crm-card .ly-in{opacity:1;transform:none}
}

/* =====================================================================
   Intégration LMS : fiche apprenant, planning hybride, espace e-learning
   ===================================================================== */
/* les calques composés (image + éléments animés) flottent d'un seul bloc */
.sof-home .viz.lms .lms-stage{position:relative;animation:sh-drift var(--T) ease-in-out var(--ph) infinite alternate;animation-play-state:paused}
.sof-home .viz.lms.in.on .lms-stage{animation-play-state:running}
.sof-home .viz.lms .ly .lms-stage img{animation:none;will-change:auto}
/* ombres et halos repris de la maquette */
.sof-home .viz.lms .ly.lms-ses img,.sof-home .viz.lms .ly .lms-stage img.lms-bar{filter:none}
.sof-home .viz.lms .ly.lms-ext img{filter:drop-shadow(0 14px 22px rgba(100,45,150,.24)) drop-shadow(0 2px 4px rgba(48,30,140,.07))}
.sof-home .viz.lms .ly.lms-go img{filter:drop-shadow(0 4px 14px rgba(255,166,110,.5)) drop-shadow(0 1px 3px rgba(255,140,80,.12))}
.sof-home .viz.lms .ly.lms-gv img{filter:drop-shadow(0 8px 16px rgba(125,95,255,.45)) drop-shadow(0 1px 3px rgba(80,50,200,.15))}
.sof-home .viz.lms .ly.lms-gp img{filter:drop-shadow(0 6px 14px rgba(255,166,110,.22))}
.sof-home .viz.lms .ly.lms-gl img{filter:drop-shadow(0 6px 14px rgba(125,95,255,.12))}
/* le planning se remplit : modules e-learning (asynchrones) puis séance en présentiel (synchrone) */
.sof-home .viz.lms .lms-stage .lms-bar{position:absolute;display:block;max-width:none;clip-path:inset(0 0 0 0 round var(--rr) / 50%);
  transition:clip-path 1.15s cubic-bezier(.55,0,.25,1) var(--bd)}
.js .sof-home .viz.lms:not(.in) .lms-bar{clip-path:inset(0 100% 0 0 round var(--rr) / 50%)}
/* « Gestion hybride » relié aux deux modes */
.sof-home .lms-links{position:absolute;overflow:visible;pointer-events:none;transition:opacity .8s ease 1.2s}
.js .sof-home .viz.lms:not(.in) .lms-links{opacity:0}
.sof-home .lms-dash{fill:none;stroke:rgba(110,100,170,.55);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:6 7;animation:sh-lmsFlow 2.2s linear infinite;animation-play-state:paused}
.sof-home .viz.lms.in.on .lms-dash{animation-play-state:running}
@keyframes sh-lmsFlow{to{stroke-dashoffset:-26}}
.sof-home .lms-dot{fill:#5B4FB5}
.sof-home .lms-spark{fill:#fff;transform-box:fill-box;transform-origin:50% 50%;animation:sh-lmsTw 2.8s ease-in-out infinite;animation-play-state:paused}
.sof-home .lms-spark:nth-of-type(2){animation-delay:-1.1s}
.sof-home .lms-spark:nth-of-type(3){animation-delay:-1.9s}
.sof-home .viz.lms.in.on .lms-spark{animation-play-state:running}
@keyframes sh-lmsTw{0%,100%{opacity:.35;transform:scale(.55)}50%{opacity:1;transform:scale(1.1) rotate(45deg)}}
/* l'apprenant ouvre son module : clic sur « Accéder au module », de temps en temps */
.sof-home .lms-press{position:absolute;pointer-events:none;opacity:0;border-radius:5% / 22%;background:#fff;transition:opacity .3s ease}
.sof-home .viz.lms.pressed .lms-press{opacity:.32;transition-duration:.08s}
@media (prefers-reduced-motion:reduce){
  .sof-home .viz.lms .lms-stage,.sof-home .lms-dash,.sof-home .lms-spark{animation:none}
  .sof-home .viz.lms .lms-stage .lms-bar,.sof-home .lms-links{transition:none}
  .js .sof-home .viz.lms:not(.in) .lms-bar{clip-path:inset(0 0 0 0 round var(--rr) / 50%)}
  .js .sof-home .viz.lms:not(.in) .lms-links{opacity:1}
}

/* =====================================================================
   Petite vie à l'intérieur des interfaces : gestion administrative, planification, inscriptions
   (boucles lentes, en pause hors écran ; supprimées si le visiteur réduit les animations)
   ===================================================================== */
.sof-home .viz .ly .mx-stage{position:relative;animation:sh-drift var(--T) ease-in-out var(--ph) infinite alternate;animation-play-state:paused}
.sof-home .viz.in.on .ly .mx-stage{animation-play-state:running}
.sof-home .viz .ly .mx-stage img{animation:none;will-change:auto}
.sof-home .mx{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sof-home .mx .mx-bar,.sof-home .mx .mx-un,.sof-home .mx .mx-sheen,.sof-home .mx .mx-fill{transform-box:fill-box}
.sof-home .mx .mx-bar,.sof-home .mx .mx-fill{transform-origin:0 50%}
.sof-home .mx .mx-un{transform-origin:50% 50%}
.sof-home .mx .mx-glow,.sof-home .mx .mx-swap,.sof-home .mx .mx-ring,.sof-home .mx .mx-bar{opacity:0}

/* 01 : au clic sur l'étape « Convocation », l'envoi groupé part et le statut passe à OK ; puis la convention revient signée
   (états pilotés par le scénario : .s2/.d2 pour la convocation, .s3/.d3 pour la signature) */
.sof-home .k01 .mx-bar{opacity:1;transform:scaleX(0);transition:transform .9s cubic-bezier(.4,0,.2,1),opacity .35s ease}
.sof-home .k01.s2 .mx-bar.st2,.sof-home .k01.s3 .mx-bar.st3{transform:scaleX(1)}
.sof-home .k01.d2 .mx-bar.st2,.sof-home .k01.d3 .mx-bar.st3{opacity:0}
.sof-home .k01 .mx-glow{transition:opacity .45s ease}
.sof-home .k01.s2 .mx-glow.st2,.sof-home .k01.s3 .mx-glow.st3{opacity:.9}
.sof-home .k01.d2 .mx-glow.st2,.sof-home .k01.d3 .mx-glow.st3{opacity:0}
.sof-home .k01 .mx-swap{transition:opacity .4s ease}
.sof-home .k01.d2 .mx-swap.st2,.sof-home .k01.d3 .mx-swap.st3{opacity:1}

/* 02 : au clic sur « Tout sélectionner », les formateurs sont cochés ; leurs créneaux se synchronisent ensuite dans le planning (.s1 puis .s2) */
.sof-home .k02 .mx-un{opacity:1;transform:scale(1);transition:opacity .3s ease,transform .45s cubic-bezier(.34,1.56,.64,1)}
.sof-home .k02.s1 .mx-un{opacity:0;transform:scale(.55)}
.sof-home .k02.s1 .mx-un.c2{transition-delay:.3s}
.sof-home .k02.s1 .mx-un.c3{transition-delay:.6s}
.sof-home .k02 .mx-sheen{transform:translateX(0);transition:transform 1.05s cubic-bezier(.45,0,.35,1)}
.sof-home .k02.s2 .mx-sheen{transform:translateX(var(--d))}
.sof-home .k02.s2 .mx-sheen.p2{transition-delay:.3s}
.sof-home .k02.s2 .mx-sheen.p3{transition-delay:.6s}
.sof-home .k02.s2 .mx-ring{animation:sh-mxRingOnce 1.7s ease both}
.sof-home .k02.s2 .mx-ring.p2{animation-delay:.3s}
.sof-home .k02.s2 .mx-ring.p3{animation-delay:.6s}
@keyframes sh-mxRingOnce{0%{opacity:0}22%{opacity:.75}100%{opacity:0}}

/* 03 : au clic, l'interrupteur « Visible dans le catalogue en ligne » s'allume (.s0) ; puis une inscription arrive : 7/15 devient 8/15 (.s1) */
.sof-home .k03 .mx-tog{opacity:1;transition:opacity .3s ease .14s}
.sof-home .k03 .mx-tog .knob{transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.sof-home .k03.s0 .mx-tog{opacity:0}
.sof-home .k03.s0 .mx-tog .knob{transform:translateX(24px)}
.sof-home .k03 .mx-glow.r1{transition:opacity .5s ease}
.sof-home .k03.s1 .mx-glow.r1{animation:sh-mxRowOnce 1.9s ease both}
@keyframes sh-mxRowOnce{0%{opacity:0}18%{opacity:.85}100%{opacity:0}}
.sof-home .k03 .mx-swap{transition:opacity .35s ease}
.sof-home .k03.s1 .mx-swap.d8,.sof-home .k03.s1 .mx-swap.p7{opacity:1}
.sof-home .k03.s1 .mx-swap.p7{transition-delay:.15s}
.sof-home .k03 .mx-fill{transform:scaleX(.894);transition:transform .7s cubic-bezier(.4,0,.2,1) .25s}
.sof-home .k03.s1 .mx-fill{transform:scaleX(1)}
/* remise à zéro instantanée en fin de scénario */
.sof-home .viz.snap .mx *,.sof-home .viz.snap .lms-press{transition:none!important;animation:none!important}

@media (prefers-reduced-motion:reduce){
  .sof-home .mx{display:none}
  .sof-home .viz .ly .mx-stage{animation:none}
}

/* ---------- SEO (audit du 09/10) : balises alignées sur le site en ligne, affichage inchangé ---------- */
.sof-home .feat h3.ft{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.7rem,1.05rem + 1.7vw,2.45rem);line-height:1.12;letter-spacing:-0.03em;color:var(--ink);text-wrap:balance}
.sof-home .feat h3.ft .hl{color:var(--violet)}
.sof-home .feat p.acc-title{margin:0;max-width:none;font-family:var(--font-display);font-weight:600;font-size:clamp(1.7rem,1.05rem + 1.7vw,2.45rem);line-height:1.12;letter-spacing:-0.03em;color:var(--ink);text-wrap:balance}
.sof-home .feat p.acc-title .hl{color:var(--violet)}
.sof-home .feat h2.feat-lead{margin:0;max-width:56ch;font-family:inherit;font-weight:400;font-size:clamp(1.12rem,1rem + .45vw,1.32rem);line-height:1.5;letter-spacing:normal;color:var(--ink-soft);text-wrap:pretty}
.sof-home .cta-final .cta-title{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.9rem,1.2rem + 2.3vw,3rem);line-height:1.1;letter-spacing:-0.03em;color:var(--ink);text-wrap:balance}
.sof-home .cta-final .cta-title .hl{color:var(--violet)}
/* H1 repris du site en ligne, plus long que celui de la maquette : trois lignes sur ordinateur, quatre sur mobile */
.sof-home .hero h1{font-size:clamp(1.75rem,min(1rem + 2.6vw,6.4vh),3.45rem);max-width:none}
/* sans JavaScript : image fixe du mur à la place du mur animé */
.sof-home .wall-poster{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;pointer-events:none}
/* liens dans le texte (maillage interne) : discrets, soulignés, couleur de la marque */
.sof-home .feat .checks a,.sof-home .feat-text>p a,.sof-home .intro .section-head p a,.sof-home .qa-in a{color:var(--violet-strong);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(125,95,255,.45);transition:text-decoration-color .2s}
.sof-home .feat .checks a:hover,.sof-home .feat-text>p a:hover,.sof-home .intro .section-head p a:hover,.sof-home .qa-in a:hover{text-decoration-color:currentColor}

/* =====================================================================
   Responsive : règles communes à toutes les tailles d'écran
   Points de rupture : 400 (petits téléphones) · 640 (téléphones) · 899 (tablettes portrait)
   · 999 (blocs sur une colonne) · 1080 (menu mobile) · 1100 (avis et tarifs) : ces deux derniers suivent la largeur de leur contenu
   + écrans bas (téléphone en paysage) : (orientation:landscape) and (max-height:540px)
   Tactile : (pointer:coarse) pour les cibles de 44 px, (hover:none) pour les effets de survol
   ===================================================================== */

/* ---------- base ---------- */
/* iOS : pas d'agrandissement automatique du texte en paysage */
.sof-home{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* marges latérales : jamais sous l'encoche d'un téléphone en paysage */
.sof-home{--gutter:max(clamp(16px,4vw,48px),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))}
/* retour visuel au toucher, sans délai */
.sof-home a,.sof-home button,.sof-home summary,.sof-home label,.sof-home select{-webkit-tap-highlight-color:rgba(125,95,255,.14);touch-action:manipulation}

/* ---------- cibles tactiles ---------- */
/* liens isolés (« Découvrir… », « Nous contacter », mentions) : 44 px de haut */
.sof-home .more{min-height:44px}
.sof-home .plan-contact{display:inline-flex;align-items:center;min-height:44px}
/* bouton de l'en-tête : zone tactile agrandie, même dessin */

/* ---------- formulaire ---------- */
/* 16 px minimum : en dessous, iOS zoome sur le champ touché */
.sof-home .f input,.sof-home .f select,.sof-home .f textarea{font-size:16px}

/* ---------- survol et appui ---------- */
/* sur écran tactile, un élément touché ne reste pas « soulevé » */
@media (hover:none){
  .sof-home .card:hover,.sof-home .int-card:hover,.sof-home .rev-card:hover,.sof-home .plan:hover,.sof-home .btn-primary:hover{transform:none}
  .sof-home .marquee li:hover img{filter:grayscale(calc(1 - var(--c,0)));opacity:calc(.58 + .42 * var(--c,0));transform:scale(calc(1 + .05 * var(--c,0)))}
  .sof-home .rev-btn:hover:not(:disabled){background:var(--surface);border-color:#E1D9FF;color:var(--violet);transform:none}
  /* défilement plus léger : fond d'en-tête opaque, sans flou recalculé à chaque image */
}
.sof-home .btn:active{transform:scale(.98)}
.sof-home .rev-btn:active:not(:disabled){transform:scale(.94)}

/* ---------- en-tête ---------- */
/* téléphone en paysage : l'en-tête se retire quand on descend et revient dès que l'on remonte */
@media (max-width:1080px){
  .sof-home{--header-h:68px}
  /* menu mobile : chaque lien des sous-menus fait au moins 44 px de haut */
}
@media (max-width:640px){
  .sof-home{--header-h:60px}
}
@media (max-width:400px){
  /* H1 sur cinq lignes au plus, même sur 320 px */
  .sof-home .hero h1{font-size:clamp(1.5rem,7.2vw,1.75rem)}
}
/* très petits écrans : la démo reste dans le hero et dans le menu */

/* ---------- téléphones ---------- */
@media (max-width:640px){
  .sof-home .hero-copy{gap:16px}
  /* introduction alignée à gauche, comme les blocs qui suivent : plus facile à lire sur un écran étroit */
  .sof-home .intro .section-head{align-items:flex-start;text-align:left}
  /* blocs : rythme vertical resserré */
  .sof-home .feat{padding-block:44px}
  .sof-home .feat-in{gap:28px}
  .sof-home .feat-text{gap:16px}
  .sof-home .reviews,.sof-home .pricing,.sof-home .faq{padding-block:48px}
  /* tarifs : les trois garanties en liste alignée à gauche, icônes alignées */
  .sof-home .plan-proof{flex-direction:column;align-items:flex-start;width:fit-content;max-width:100%;margin-inline:auto;gap:8px;text-align:left}
  .sof-home .plan-proof li{align-items:flex-start}
  .sof-home .plan-proof svg{margin-top:2px}
  /* demande de contact : champs plus larges */
  .sof-home .simplify{padding-block:32px}
  .sof-home .simp-panel{gap:24px;padding:26px 16px 16px;border-radius:24px}
  .sof-home .simp-form{gap:14px;padding:18px 16px}
  /* apparitions plus rapides, sans décalage entre éléments : le contenu est là dès que l'on défile */
  .sof-home .rv{--d:0s!important;transition-duration:.55s,.7s}
  .js .sof-home .rv:not(.in){transform:translate3d(0,16px,0)}
}

/* ---------- tarifs : repères du carrousel (téléphones) ---------- */
.sof-home .plans-dots{display:none}
@media (max-width:640px){
  .sof-home .plans-dots{display:flex;justify-content:center;gap:8px;margin-top:2px}
  .sof-home .plans-dots i{display:block;width:8px;height:8px;border-radius:4px;background:#DCD3FF;transition:width .3s cubic-bezier(.2,.8,.2,1),background-color .3s}
  .sof-home .plans-dots i.on{width:22px;background:var(--violet)}
}

/* ---------- tablettes et téléphones en paysage : texte et visuel côte à côte ---------- */
@media (min-width:700px) and (max-width:999px) and (orientation:landscape){
  .sof-home .feat-in,.sof-home .feat.rev .feat-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,40px)}
  .sof-home .feat.rev .feat-text{order:2}
}

/* ---------- écrans bas (téléphone en paysage) ---------- */
@media (orientation:landscape) and (max-height:540px){
  /* hero : le texte et les boutons tiennent dans le premier écran */
  .sof-home .hero{min-height:auto}
  .sof-home .hero-content{padding-top:calc(var(--header-h) + 14px);padding-bottom:150px}
  .sof-home .hero-copy{gap:12px}
  /* chaque visuel tient dans la hauteur de l'écran */
  .sof-home .viz{max-width:min(620px,calc((100svh - 96px) * var(--ar)))}
  .sof-home .qv,.sof-home .sv{max-width:min(560px,calc((100svh - 96px) * 1.08))}
  .sof-home .eco-viz{max-width:min(620px,calc((100svh - 96px) * 1.142))}
  .sof-home .ac{max-width:min(520px,calc((100svh - 96px) * 1.3))}
}

/* ---------- mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  .sof-home .plans-dots i{transition:none}
  .sof-home .btn:active,.sof-home .rev-btn:active:not(:disabled){transform:none}
}

/* logo : zone tactile de 44 px, même dessin */

/* =====================================================================
   Vidéo de présentation : section sous les logos clients ; mur d'interfaces du hero en retrait
   ===================================================================== */
/* même espace au-dessus (depuis les logos) et au-dessous (jusqu'à l'étiquette suivante) : --pres-gap ;
   en bas, on déduit le haut de la section .intro (--band - 8px) */
.sof-home .pres{--pres-gap:clamp(64px,7vw,104px);position:relative;padding:var(--pres-gap) var(--gutter) calc(var(--pres-gap) - var(--band) + 8px);text-align:center}
.sof-home .pres .tag{margin-bottom:16px}
.sof-home .pres h2{margin:0 auto clamp(24px,3vw,40px);max-width:22em;font-family:var(--font-display);font-weight:600;font-size:clamp(1.4rem,1rem + 1.3vw,2.05rem);line-height:1.12;letter-spacing:-0.03em;color:var(--ink);text-wrap:balance}
.sof-home .pres h2 .hl{color:var(--violet)}
.sof-home .pres h2:has(+ .pres-sub){margin-bottom:12px}
.sof-home .pres-sub{margin:0 auto clamp(24px,3vw,40px);max-width:52em;color:var(--ink-soft);font-size:clamp(1rem,.95rem + .25vw,1.12rem);line-height:1.55;text-wrap:balance}
.sof-home .pres-video{width:min(100%,880px);margin:0 auto;text-align:left}
/* pas de bordure : la boîte fait exactement 16/9, le lecteur la remplit sans bande noire ; le liseré est porté par l'ombre */
.sof-home .hv{position:relative;display:block;aspect-ratio:16 / 9;border-radius:22px;overflow:hidden;isolation:isolate;background:#F3F0FF;
  box-shadow:0 0 0 1px rgba(125,95,255,.2),0 44px 90px -40px rgba(48,30,140,.5),0 2px 8px rgba(48,30,140,.08);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.sof-home .hv:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(125,95,255,.28),0 52px 100px -40px rgba(48,30,140,.58),0 2px 8px rgba(48,30,140,.08)}
.sof-home .hv:focus-visible{outline:3px solid var(--violet);outline-offset:4px}
.sof-home .hv-poster{display:block;width:100%;height:100%;object-fit:cover}
/* un voile très léger pour que le bouton ressorte sur l'affiche claire */
.sof-home .hv::before{content:"";position:absolute;inset:0;background:radial-gradient(closest-side at 50% 50%,rgba(48,30,140,.08),rgba(48,30,140,0) 70%);pointer-events:none;transition:opacity .3s}
.sof-home .hv-play{position:absolute;left:50%;top:50%;width:clamp(64px,8vw,88px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;
  background:var(--violet);color:#fff;box-shadow:0 18px 40px -12px rgba(125,95,255,.85),0 0 0 10px rgba(255,255,255,.4);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),background-color .3s}
.sof-home .hv-play::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(255,255,255,.7);animation:sh-hvPing 2.6s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes sh-hvPing{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.sof-home .hv-play svg{width:40%;height:40%;margin-left:7%}
.sof-home .hv:hover .hv-play{transform:translate(-50%,-50%) scale(1.08);background:var(--violet-strong)}
.sof-home .hv-cap{position:absolute;left:16px;bottom:14px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--ink);box-shadow:0 6px 16px -8px rgba(48,30,140,.3)}
.sof-home .hv iframe,.sof-home .hv video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#F3F0FF}
.sof-home .hv video{object-fit:cover}
/* mur d'interfaces : en retrait derrière la composition */
.sof-home .hero-v .wall{filter:saturate(.85)}
@media (max-width:999px){
  .sof-home .hero-v .hero-content{padding-bottom:clamp(110px,28vw,170px)}
  .sof-home .hv{border-radius:16px}
  .sof-home .hv-cap{left:12px;bottom:10px;font-size:12px;padding:6px 10px}
}
/* téléphone en portrait : la vidéo verticale (Short), affiche 9/16 centrée */
@media (max-width:640px) and (orientation:portrait){
  .sof-home .pres-video{width:min(100%,330px)}
  .sof-home .hv{aspect-ratio:9 / 16;border-radius:20px}
  .sof-home .hv video{object-fit:contain}
}
@media (orientation:landscape) and (max-height:540px){
  .sof-home .pres-video{width:min(100%,520px)}
}
@media (prefers-reduced-motion:reduce){
  .sof-home .hv,.sof-home .hv-play{transition:none}
  .sof-home .hv-play::after{animation:none}
  .sof-home .hv:hover{transform:none}
}

/* ---------- fenêtre vidéo : styles dans src/shared/video-lightbox.css (chargé sur toutes les pages) ---------- */

/* =====================================================================
   Scénarios sur les interfaces : curseur qui agit, zone cliquée, étiquettes de résultat
   (même langage que le bloc satisfaction : étiquettes blanches, icône dans un carré teinté)
   ===================================================================== */
.sof-home .viz{container-type:inline-size;--u:1cqw}
.sof-home .scn{position:absolute;inset:0;z-index:60;pointer-events:none}
.sof-home .scn-cur{position:absolute;left:var(--cx,60%);top:var(--cy,80%);width:calc(5.2 * var(--u));opacity:0;transform:translate(-9%,-9%) scale(var(--cs,1));transform-origin:9% 9%;
  transition:left 1.05s cubic-bezier(.45,0,.2,1),top 1.05s cubic-bezier(.45,0,.2,1),opacity .5s ease,transform .18s ease}
.sof-home .viz.in .scn-cur{opacity:1}
.sof-home .scn-cur svg{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 10px rgba(48,30,140,.2))}
.sof-home .scn-cur.press{--cs:.84}
.sof-home .scn-glow{position:absolute;left:var(--cx,60%);top:var(--cy,80%);width:calc(9 * var(--u));aspect-ratio:1;border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.45);
  border:2px solid rgba(125,95,255,.6);background:radial-gradient(closest-side,rgba(125,95,255,.28),rgba(125,95,255,0))}
.sof-home .scn-glow.ping{animation:sh-scnPing .85s cubic-bezier(.2,.8,.2,1)}
@keyframes sh-scnPing{0%{opacity:.9;transform:translate(-50%,-50%) scale(.45)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.3)}}
.sof-home .scn-ring{position:absolute;left:var(--rx,0);top:var(--ry,0);width:var(--rw,0);height:var(--rh,0);border-radius:calc(1.2 * var(--u));opacity:0;background:rgba(125,95,255,.16)}
.sof-home .scn-ring.flash{animation:sh-scnRing 1.1s ease-out}
@keyframes sh-scnRing{0%{opacity:1}100%{opacity:0}}
/* ancrage par la propriété translate : indépendante du transform animé par chipDrift */
.sof-home .scn-chip{position:absolute;left:var(--x);top:var(--y);translate:-50% -50%}
.sof-home .scn-chip.r{translate:-100% -50%}
.sof-home .scn-chip.l{translate:0 -50%}
.sof-home .scn-chip{animation:sh-chipDrift var(--T,7s) ease-in-out var(--ph,0s) infinite alternate;animation-play-state:paused}
.sof-home .viz.in.on .scn-chip{animation-play-state:running}
.sof-home .scn-chip-in{display:flex;align-items:center;gap:calc(1.8 * var(--u));padding:calc(1.5 * var(--u)) calc(2.4 * var(--u)) calc(1.5 * var(--u)) calc(1.5 * var(--u));
  background:var(--surface);border:1px solid #E6E0FF;border-radius:calc(2.4 * var(--u));
  box-shadow:0 calc(3.6 * var(--u)) calc(6 * var(--u)) calc(-2.6 * var(--u)) rgba(48,30,140,.32),0 calc(.3 * var(--u)) calc(1 * var(--u)) rgba(48,30,140,.06);
  opacity:0;transform:translate3d(0,calc(2 * var(--u)),0) scale(.86);transition:opacity .45s ease,transform .7s cubic-bezier(.34,1.56,.64,1)}
.sof-home .scn-chip.show .scn-chip-in{opacity:1;transform:none}
.sof-home .scn-ic{flex:none;width:calc(5.2 * var(--u));height:calc(5.2 * var(--u));border-radius:calc(1.5 * var(--u));display:grid;place-items:center;background:#F1EDFF;color:var(--violet)}
.sof-home .scn-ic.or{background:#FFF1E7;color:#EE7A31}
.sof-home .scn-ic.ok{background:#DCFCE7;color:#15803D}
.sof-home .scn-ic svg{width:58%;height:58%}
.sof-home .scn-chip-in b{display:block;font-family:var(--font-display);font-weight:600;font-size:max(11px,calc(2.1 * var(--u)));line-height:1.25;color:var(--ink);white-space:nowrap}
.sof-home .scn-chip-in small{display:block;font-size:max(10px,calc(1.7 * var(--u)));line-height:1.3;color:var(--muted);white-space:nowrap}
/* ---------- un seul curseur : même dessin, même taille sur toutes les interfaces (satisfaction, CRM, assistant IA, scénarios) ---------- */
.sof-home .viz,.sof-home .sv{--cur:clamp(15px,3.5cqw,24px)}
.sof-home .scn-cur,.sof-home .sv-cur,.sof-home .ai-cur,.sof-home .crm-cur{width:var(--cur)}
.sof-home .scn-cur svg,.sof-home .sv-cur svg,.sof-home .ai-cur svg,.sof-home .crm-cur svg{filter:drop-shadow(0 4px 7px rgba(48,30,140,.2))}
.sof-home .ai.live .ai-cur{--cx:calc(-9.09% - 5cqw);--cy:calc(-8.7% + 5cqw)}
/* ---------- les interfaces ne jouent que sous la souris (.on) ; les flèches en pointillés suivent la même règle ---------- */
.sof-home .deco .dash{animation-play-state:paused}
.sof-home .viz.in.on .deco .dash{animation-play-state:running}
@media (hover:hover) and (pointer:fine){
  .sof-home .viz,.sof-home .sv,.sof-home .qv{cursor:default}
}
/* les visuels satisfaction et Qualiopi flottent désormais sans panneau de fond, comme les autres interfaces */
.sof-home .sv-bg,.sof-home .qv-bg{display:none}
@media (prefers-reduced-motion:reduce){
  .sof-home .scn-cur,.sof-home .scn-glow,.sof-home .scn-ring{display:none}
  .sof-home .scn-chip{animation:none}
  .sof-home .scn-chip-in{opacity:1;transform:none;transition:none}
}


/* ---------- intégration au thème ---------- */
/* en-tête du site : fixe, 16 px de marge + 80 px de haut, posé sur le hero */
.sof-home{--header-h:96px}
/* fond porté par body (comme html sur la maquette) : les halos des sections (z-index négatif)
   restent visibles, et le conteneur ne crée pas de contexte d'empilement qui ferait passer
   l'en-tête fixe du site au-dessus de la fenêtre vidéo */
body.sof-design{background:#FBFAFF}
/* formulaire HubSpot dans la carte du bloc « Simplifiez » */
.sof-home .simp-form{display:block}
.sof-home .simp-form .hs-form-placeholder{min-height:120px;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.sof-home .simp-form .simp-note{margin-top:14px}
/* hero sans vidéo (ordinateur) : hauteur ajustée au contenu, plus de grand vide sous le texte ;
   les logos clients arrivent juste après */
@media (min-width:1000px){
  .sof-home .hero{min-height:auto}
  .sof-home .hero-content{padding-top:calc(var(--header-h) + clamp(56px,9vh,112px));padding-bottom:clamp(72px,11vh,128px)}
}