/* ───────────────────────────────────────────────────────────────────────────────────────────────────────────────
   SubmitX — story.css : le parcours au défilement de l'accueil (FR et EN), sous le hero.
   Contenu généré par scripts/build-sections.mjs (bloc sxs:journey) ; comportement dans assets/site/story.js.

   1. Cinéma (épinglé) : établi → la caméra monte vers le bureau (vrai écran, page Projets réelle, chantier par la fenêtre)
      → zoom dans l'écran → « éparpillée » (les vrais logos arrivent de leur côté de l'écran, tournés et flous, et se posent
      avec un rebond) → ils se rassemblent au centre → « Avec SubmitX… » et la « pieuvre » : SubmitX au centre, modules et
      intégrations reliés par des fils orange (classes sxs-hub-* de sections.css ; bulles en cercle sur téléphone).
   2. Étapes : liste à gauche, écran ou téléphone à droite qui joue l'enregistrement réel du logiciel (sinon une capture).
   JS pose les variables (--benchY, --deskY, --dl/--dt/--dw, --zs/--zx/--zy, --m1O, --conv, --hubO…). Sans JS : scène figée.
   ─────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.sxst{background:var(--sxs-bg);color:var(--sxs-ink);padding:0}
.sxst-track{position:relative}
.sxst.js .sxst-track{height:820vh}
.sxst-pin{position:relative;height:100vh;height:100svh;overflow:hidden;background:#0E0D0C}
.sxst.js .sxst-pin{position:sticky;top:0}

/* ── Cinéma ─────────────────────────────────────────────────────────────────────────────────────────────── */
.sxst-cine{position:absolute;inset:0;overflow:hidden}
/* scène vidéo : le JS place la scène 1280 × 720 (couvre sur grand écran, contenue sur téléphone) et la fait zoomer dans l'écran */
.sxst-cine{background:#1a120c}
.sxst-stage{position:absolute;left:var(--sl,0px);top:var(--st,0px);width:var(--sw,100vw);aspect-ratio:1280/720;transform-origin:0 0;
  transform:translate(var(--zx,0px),var(--zy,0px)) scale(var(--zs,1))}
.sxst-canvas,.sxst-poster{position:absolute;inset:0;width:100%;height:100%;display:block}
.sxst.js .sxst-poster{visibility:hidden}
.sxst-stage{overflow:hidden}
/* entrée : la vidéo est d'abord une carte arrondie posée sur la page (--ci de 1 à 0), puis s'ouvre plein écran */
/* entrée : on sort du hero (sombre) dans la pénombre d'un chantier ; le plan se dévoile (net, éclairé) en défilant */
.sxst-pin{background:#0E0D0C}
.sxst.js .sxst-stage{scale:calc(1 + var(--ci,0) * .18);filter:blur(calc(var(--ci,0) * 16px)) brightness(calc(1 - var(--ci,0) * .7)) saturate(calc(1 - var(--ci,0) * .4))}
.sxst-cine::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,13,12,var(--ci,0)) 0%,rgba(14,13,12,calc(var(--ci,0) * .35)) 45%,rgba(14,13,12,calc(var(--ci,0) * .8)) 100%)}
/* bande de chantier qui glisse pendant l'entrée */
.sxst-cine::before{content:"";position:absolute;z-index:3;left:0;right:0;bottom:0;height:8px;opacity:var(--ci,0);
  background:repeating-linear-gradient(-45deg,#FF6B2C 0 14px,#111 14px 28px);background-size:40px 8px;animation:sxstHaz 1.2s linear infinite}
@keyframes sxstHaz{to{background-position:40px 0}}
.sxst-open{position:absolute;z-index:5;left:0;right:0;top:50%;transform:translateY(calc(-50% - (1 - var(--openO,1)) * 40px));display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 20px;opacity:var(--openO,1);pointer-events:none}
.sxst-open .sxs-kicker{margin:0 0 10px;color:#FFD2B8}
.sxst-open .sxs-kicker::before{background:repeating-linear-gradient(-45deg,#FF6B2C 0 5px,#fff 5px 10px)}
.sxst-open p.sxst-open-h{margin:0;font-size:clamp(28px,4.4vw,58px);font-weight:850;letter-spacing:-.035em;line-height:1.05;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.55)}
.sxst-open p.sxst-open-h span{color:#FF8A4C}
.sxst-open small{margin-top:14px;display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.85);font:600 14px/1 'Inter',system-ui,sans-serif;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.sxst-open small svg{width:16px;height:16px;animation:sxstBob 1.6s ease-in-out infinite}
@keyframes sxstBob{50%{transform:translateY(4px)}}
.sxst:not(.js) .sxst-open{display:none}

/* ── Entrée « du plan à la réalité » : bleu de plan d'architecte, le plan se dessine, puis se pose sur le plan imprimé de la
   vidéo. Variables posées par story.js : --draw (0 à 1, tracé), --bpO (opacité du bleu), --bx/--by/--br/--bs (position,
   rotation et échelle du dessin), --lc (couleur du trait), --lO (opacité du trait), --tape (ruban à mesurer). */
.sxst-bp{position:absolute;inset:0;z-index:4;pointer-events:none;color:#EAF4FF}
.sxst-bp::before{content:"";position:absolute;inset:0;opacity:var(--bpO,1);
  background-color:#0F3A66;
  background-image:linear-gradient(rgba(234,244,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(234,244,255,.07) 1px,transparent 1px),
    linear-gradient(rgba(234,244,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(234,244,255,.16) 1px,transparent 1px),
    radial-gradient(120% 90% at 50% 40%,#16508C 0%,#0F3A66 55%,#0A2747 100%);
  background-size:24px 24px,24px 24px,120px 120px,120px 120px,100% 100%}
.sxst-bp-haz{position:absolute;left:0;right:0;top:0;height:12px;opacity:var(--bpO,1);
  background:repeating-linear-gradient(-45deg,#FFC21A 0 16px,#111 16px 32px);box-shadow:0 4px 18px rgba(0,0,0,.35)}
.sxst-bp-box{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;
  transform:translate(var(--bx,0px),var(--by,0px)) rotate(var(--br,0deg)) scale(var(--bs,1))}
.sxs .sxst-bp-plan{max-width:none;position:absolute;left:-110px;top:-110px;width:1220px;height:796px;overflow:visible;opacity:var(--lO,1)}
.sxst-bp-plan path{fill:none;stroke:var(--lc,#EAF4FF);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;
  stroke-dashoffset:calc(1 - clamp(0, var(--draw,0) * var(--n) - var(--i), 1))}
.sxst-bp-plan .bp-wall{stroke-width:9}
.sxst-bp-plan .bp-door{stroke-width:3;stroke-dasharray:1}
.sxst-bp-plan .bp-win{stroke-width:3}
.sxst-bp-plan .bp-furn{stroke-width:2.5;opacity:.8}
.sxst-bp-plan .bp-dim{stroke:#FF8A4C;stroke-width:3;opacity:var(--bpO,1)}
.sxst-bp-plan text{fill:var(--lc,#EAF4FF);font:700 22px/1 'Inter',system-ui,sans-serif;letter-spacing:.12em;text-anchor:middle;
  opacity:clamp(0, var(--draw,0) * var(--n) - var(--i), 1)}
.sxst-bp-plan text.bp-dimt{fill:#FF8A4C;font-size:26px;letter-spacing:.02em;opacity:calc(clamp(0, var(--draw,0) * var(--n) - var(--i), 1) * var(--bpO,1))}
.sxst-bp-title{position:absolute;right:28px;bottom:44px;display:grid;gap:2px;padding:12px 16px;border:1.5px solid rgba(234,244,255,.55);
  font:600 12px/1.45 'Inter',system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:rgba(234,244,255,.85);
  opacity:calc(var(--bpO,1) * clamp(0, var(--draw,0) * 3 - 1, 1))}
.sxst-bp-title b{font-size:15px;letter-spacing:.02em;text-transform:none;color:#fff}
.sxst-bp-tape{position:absolute;left:0;right:0;bottom:0;height:26px;opacity:var(--bpO,1);overflow:hidden}
.sxst-bp-tape i{display:block;height:100%;width:calc(var(--tape,0) * 100%);background-color:#FFC21A;border-top:2px solid #E0A400;
  background-image:repeating-linear-gradient(90deg,#1A1405 0 2px,transparent 2px 10px),repeating-linear-gradient(90deg,#1A1405 0 2px,transparent 2px 50px);
  background-size:100% 9px,100% 16px;background-repeat:no-repeat;background-position:0 0,0 0;box-shadow:4px 0 0 #8A6A00}
/* le titre d'ouverture vit au-dessus du plan qui se dessine */
.sxst-open{top:15%;transform:translateY(calc((1 - var(--openO,1)) * -30px))}
.sxst-open p.sxst-open-h{text-shadow:none}
.sxst-open .sxs-kicker{color:#FFC27A}
.sxst:not(.js) .sxst-bp{display:none}
@media (max-aspect-ratio:1/1){
  .sxst-open{top:13%}
  .sxst-bp-title{right:14px;bottom:40px;padding:8px 10px;font-size:10px}
  .sxst-bp-title b{font-size:13px}
  .sxst-bp-plan text{font-size:26px}
}
@media (prefers-reduced-motion:reduce){ .sxst-bp-plan path{stroke-dashoffset:0} .sxst-bp-plan text{opacity:1} }
.sxst-open{padding:0 22px}
@media (max-aspect-ratio:1/1){.sxst-open p.sxst-open-h{font-size:clamp(24px,7.4vw,34px)}}
@media (max-aspect-ratio:1/1){.sxst-cine{background:radial-gradient(120% 60% at 50% 50%,#3a2a1c,#120c08)}}
/* fond flou derrière la bande de la vidéo (téléphone et écrans plus hauts que larges) */
.sxst-bgc{display:none}
@media (max-aspect-ratio:1/1){.sxst-bgc{display:block;position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);filter:blur(22px) brightness(.55) saturate(1.1);transform:scale(1.1)}
  .sxst.js .sxst-stage{-webkit-mask-image:linear-gradient(transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(transparent,#000 7%,#000 93%,transparent)}}

/* ── Messages (le fond suit le thème du site) ──────────────────────────────────────────────────────────── */
.sxst-msg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:90px 6vw 40px;background:var(--sxs-bg)}
.sxst.js .sxst-msg1{opacity:var(--m1O,0);visibility:var(--m1V,hidden)}
.sxst.js .sxst-msg2{opacity:var(--m2O,0);visibility:var(--m2V,hidden);background:transparent}
.sxst.js .sxst-msg1 .sxst-big,.sxst.js .sxst-msg1 .sxst-legal{opacity:var(--t1O,1)}
.sxst-big{position:relative;z-index:2;margin:0;max-width:980px;text-align:center;font-size:clamp(25px,3.3vw,46px);line-height:1.22;font-weight:600;letter-spacing:-.025em}
.sxst-line{display:inline}
.sxst-msg .sxst-line + .sxst-line{display:block;margin-top:.7em}
.sxst-w{color:var(--sxs-line2);transition:color .25s ease}
.sxst-w.on{color:var(--sxs-ink)}
.sxst-w.hl.on{color:var(--sxs-brand-ink)}
.sxst-legal{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:11px;color:var(--sxs-ink3)}

/* logos des outils éparpillés : arrivent de leur bord, tournés et flous, se posent avec un rebond et une onde */
.sxst-logos{position:absolute;inset:70px 0 30px;pointer-events:none}
.sxst-logo{position:absolute;left:calc(var(--x) + (50% - var(--x)) * var(--conv,0));top:calc(var(--y) + (50% - var(--y)) * var(--conv,0));
  width:calc(var(--s) * clamp(48px,5.4vw,86px));aspect-ratio:1;opacity:0;filter:blur(10px);
  transform:translate(-50%,-50%) translate(var(--fx),var(--fy)) rotate(var(--fr)) scale(.35);
  transition:transform 1s cubic-bezier(.22,1.45,.36,1),opacity .45s ease,filter .7s ease}
.sxst-logo.on{opacity:calc(1 - var(--conv,0));filter:none;transform:translate(-50%,-50%) scale(calc(1 - var(--conv,0) * .65))}
.sxst-logo > img,.sxst-logo > svg{position:absolute;inset:0;margin:auto;width:58%;height:58%;object-fit:contain}
.sxst-logo::before{content:"";position:absolute;inset:0;border-radius:24%;background:var(--sxs-surface);border:1px solid var(--sxs-line);box-shadow:0 14px 34px rgba(17,24,39,.14)}
.sxst-logo::after{content:"";position:absolute;inset:-2px;border-radius:26%;border:2px solid var(--sxs-brand);opacity:0;pointer-events:none}
.sxst-logo.on::after{animation:sxstRing .9s ease-out .35s 1}
.sxst-logo > *{z-index:1;animation:sxstFloat 5.5s ease-in-out var(--d) infinite}
.sxst-logo.gen svg{width:44%;height:44%;color:var(--sxs-ink2);margin-top:22%}
.sxst-logo.gen em{position:absolute;left:0;right:0;bottom:16%;text-align:center;font-style:normal;font-size:clamp(9px,.75vw,12px);font-weight:700;color:var(--sxs-ink2)}
@keyframes sxstFloat{50%{transform:translateY(-7px)}}
@keyframes sxstRing{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(1.45)}}

/* « pieuvre » SubmitX */
.sxst-msg2{justify-content:flex-start;padding-top:96px}
.sxst.js .sxst-msg2 .sxst-big{transform:translateY(calc((1 - var(--hubO,0)) * 28vh));font-size:clamp(22px,2.7vw,38px)}
.sxst-hubwrap{position:relative;margin-top:22px;width:min(1100px,94vw,calc((100svh - 290px) * 1100 / 760));opacity:var(--hubO,1)}
.sxst-hub.sxs-hub{aspect-ratio:1100/760;max-width:none;margin:0}
.sxst-hub .sxs-hub-lines{display:block}
.sxst-hub .sxs-hub-core{height:16%}
.sxst-hub .sxs-hub-node{min-height:0;height:7.6%;padding:4px 10px;font-size:14px}
.sxst-hub .sxs-hub-node img{max-height:24px;width:auto}
.sxst-mi{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:7px;background:var(--sxs-soft);color:var(--sxs-brand-ink)}
.sxst-mi svg{width:18px;height:18px}
.sxs-hub-node.mod{border-color:var(--sxs-brand)}
.sxst-hubm{display:none}

@media (max-width:900px){
  /* pieuvre : bulles en cercle autour de SubmitX */
  .sxst-hub{display:none}
  .sxst-hubm.sxs-hub{display:block;aspect-ratio:1;max-width:none;margin:0}
  .sxst-hubwrap{width:min(92vw,calc(100svh - 300px))}
  .sxst-hubm-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .sxst-hubm .sxs-hub-core{top:50%;width:38%;height:auto;min-height:0;padding:8px 6px;gap:3px;box-shadow:5px 5px 0 var(--sxs-hard)}
  .sxst-hubm .sxs-hub-core img{height:20px}
  .sxst-hubm .sxs-hub-core span{font-size:9px;letter-spacing:.06em}
  .sxst-bubs{list-style:none;margin:0;padding:0}
  .sxst-bub{position:absolute;left:var(--mx);top:var(--my);width:13.5%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;
    background:var(--sxs-surface);border:1px solid var(--sxs-line2);box-shadow:0 6px 16px rgba(17,24,39,.12);transition:transform .5s cubic-bezier(.22,1.45,.36,1) calc(var(--i) * .05s),opacity .4s calc(var(--i) * .05s)}
  .sxst-bub img{width:56%;height:56%;object-fit:contain}
  .sxst-bub svg{width:52%;height:52%}
  .sxst-bub.mod{border-color:var(--sxs-brand);color:var(--sxs-brand-ink);background:var(--sxs-soft)}
  .sxst-hubm:not(.in) .sxst-bub{opacity:0;transform:translate(-50%,-50%) scale(.3)}
  .sxst.js .sxst-msg2 .sxst-big{transform:translateY(calc((1 - var(--hubO,0)) * 22vh))}
}
@media (max-width:640px){
  .sxst.js .sxst-track{height:720vh}
  .sxst-msg{padding:80px 20px 40px}
  .sxst-logos{inset:64px 0 24px}
  .sxst-logo{top:calc(var(--ym) + (50% - var(--ym)) * var(--conv,0));width:calc(var(--s) * 44px)}
  .sxst-msg2{padding-top:84px}
}

/* ── Sans JavaScript ─────────────────────────────────────────────────────────────────────────────────────── */
.sxst:not(.js) .sxst-msg{position:relative;inset:auto;min-height:0;padding:72px 20px}
.sxst:not(.js) .sxst-pin{height:auto;overflow:visible;background:transparent}
.sxst:not(.js) .sxst-cine{position:relative;height:min(100vh,760px)}
.sxst:not(.js) .sxst-w{color:var(--sxs-ink)}
.sxst:not(.js) .sxst-w.hl{color:var(--sxs-brand-ink)}
.sxst:not(.js) .sxst-logo{opacity:1;filter:none;transform:translate(-50%,-50%)}

@media (prefers-reduced-motion:reduce){
  .sxst-logo > *,.sxst-logo.on::after{animation:none}
  .sxst-logo{filter:none;transform:translate(-50%,-50%)}
  .sxst-w,.sxst-logo,.sxst-bub{transition:none}
}

/* ── Téléphone (≤ 768 px) : mode léger (classe posée par story.js) — pas de plan ni de vidéo du bureau ; la piste ne garde
   que la partie « éparpillée » → pieuvre (60 % de la piste d'origine, en plus de l'écran épinglé). Ordinateur inchangé. */
.sxst.sxst-lite .sxst-cine,.sxst.sxst-lite .sxst-bp,.sxst.sxst-lite .sxst-open{display:none}
.sxst.js.sxst-lite .sxst-track{height:532vh}
@media (max-width:640px){ .sxst.js.sxst-lite .sxst-track{height:472vh} }