/* ───────────────────────────────────────────────────────────────────────────────────────────────────────────────
   SubmitX — showcase.css : les sections en vidéo du vrai logiciel qui suivent le parcours de l'accueil (FR et EN) :
   étapes (.sxv-steps, épinglée : le défilement passe de 1 à 7), volet IA (.sxv-ai), appareils (.sxv-dev),
   « Changer… » (.sxv-change, trois temps qui apparaissent l'un après l'autre), et la présentation des chapitres de la
   démo de 2 minutes (.sx-demo, dont le gabarit vit dans la page).
   Gabarit : scripts/lib/showcase-sections.mjs ; comportement : showcase.js. Couleurs : variables --sxs-* (sections.css),
   donc les deux thèmes. Les vidéos ont leur propre fond sombre neutre : elles sont présentées comme un écran.
   ─────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
.sxv{padding:96px 0;background:var(--sxs-bg)}
.sxv-dev{background:var(--sxs-bg2);border-top:1px solid var(--sxs-line);border-bottom:1px solid var(--sxs-line)}
.sxv .sxs-head{margin-bottom:44px}
.sxv .sxs-head.center .sxs-sub{max-width:640px;margin-left:auto;margin-right:auto}

/* écran : la vidéo dans un cadre arrondi, ombre douce */
.sxv-screen{position:relative;overflow:hidden;aspect-ratio:1520/1000;border-radius:16px;background:#121110;border:1px solid var(--sxs-line);
  box-shadow:0 30px 70px -20px rgba(17,24,39,.35),0 10px 24px -12px rgba(17,24,39,.25)}
.sxv-vid,.sxv-screen.still img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sxv-vid{opacity:0;transition:opacity .45s ease}
.sxv-vid.on{opacity:1}
.sxv-screen.still{background:#fff}
.sxv-screen.still img{object-position:top left}
.sxv-more{display:inline-flex;align-items:center;gap:6px;color:var(--sxs-brand-ink);font-size:15px;font-weight:750;text-decoration:none}
.sxv-more svg{width:16px;height:16px;transition:transform .2s}
.sxv-more:hover svg{transform:translateX(3px)}

/* ── Étapes : scène épinglée ──────────────────────────────────────────────────────────────────────── */
.sxv-steps{padding:0;background:var(--sxs-bg2);border-top:1px solid var(--sxs-line);border-bottom:1px solid var(--sxs-line);
  background-image:linear-gradient(var(--sxs-grid) 1px,transparent 1px),linear-gradient(90deg,var(--sxs-grid) 1px,transparent 1px);background-size:32px 32px}
.sxv-track{position:relative;height:calc(7 * 62vh + 100vh)}
.sxv-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
.sxv-stage{width:100%;max-width:1360px;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.38fr);gap:56px;align-items:center;padding-top:64px}
.sxv h2.sxv-h2{margin:0;font-size:clamp(26px,2.6vw,36px);font-weight:850;letter-spacing:-.03em;line-height:1.12;color:var(--sxs-ink)}
.sxv h2.sxv-h2 .or{color:var(--sxs-brand-ink)}
.sxv-texts{position:relative;display:grid;margin-top:34px}
.sxv-text{grid-area:1/1;opacity:0;transform:translateY(18px);transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.sxv-text.on{opacity:1;transform:none;pointer-events:auto}
.sxv-count{display:flex;align-items:baseline;gap:8px;margin:0 0 10px}
.sxv-count b{font-size:64px;line-height:.9;font-weight:900;letter-spacing:-.05em;color:var(--sxs-brand);font-variant-numeric:tabular-nums}
.sxv-count span{font-size:16px;font-weight:750;color:var(--sxs-ink3)}
.sxv-text h3{margin:0;font-size:clamp(24px,2.2vw,30px);font-weight:850;letter-spacing:-.025em;line-height:1.15;color:var(--sxs-ink)}
.sxv-text > p:not(.sxv-count){margin:12px 0 18px;font-size:17px;line-height:1.6;color:var(--sxs-ink2);max-width:46ch}
.sxv ol.sxv-rail{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;max-width:440px}
.sxv-rail button{display:block;width:100%;padding:10px 0;border:0;background:transparent;cursor:pointer}
.sxv-rail i{display:block;height:4px;border-radius:4px;background:var(--sxs-line2);overflow:hidden;position:relative}
.sxv-rail i::after{content:"";position:absolute;inset:0;width:calc(var(--f,0) * 100%);background:var(--sxs-brand);border-radius:4px}
.sxv-rail button:hover i{background:var(--sxs-ink3)}
.sxv-rail button:focus-visible{outline:2px solid var(--sxs-focus);outline-offset:2px;border-radius:4px}
.sxv-media{position:relative}
.sxv-glow{position:absolute;inset:-8% -6%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,107,44,.28),rgba(255,107,44,0));filter:blur(10px);pointer-events:none}
.sxv-steps .sxv-screen{border-radius:18px}
.sxv-toggle{position:absolute;right:14px;bottom:14px;z-index:2;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);background:rgba(17,17,17,.62);color:#fff;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:.75;transition:opacity .2s}
.sxv-toggle:hover,.sxv-toggle:focus-visible{opacity:1}
.sxv-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px}
.sxv-toggle svg{width:16px;height:16px}
.sxv-toggle .sxv-ico-play{display:none}
.sxv-toggle.paused .sxv-ico-play{display:block}
.sxv-toggle.paused .sxv-ico-pause{display:none}
/* sans JavaScript : les sept étapes l'une sous l'autre */
.sxv-steps:not(.js) .sxv-track{height:auto}
.sxv-steps:not(.js) .sxv-pin{position:relative;height:auto;padding:80px 0}
.sxv-steps:not(.js) .sxv-texts{gap:28px}
.sxv-steps:not(.js) .sxv-text{grid-area:auto;opacity:1;transform:none}
.sxv-steps:not(.js) .sxv-rail{display:none}

/* ── Colonnes : texte + écran (IA, appareils) ─────────────────────────────────────────────────────── */
.sxv-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:56px;align-items:center}
.sxv-split.rev .sxv-copy{order:2}
.sxv-copy .sxs-btn{margin-top:28px}
.sxv ul.sxv-feats{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:18px}
.sxv-feats li{display:flex;gap:14px;align-items:flex-start}
.sxv-fi{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--sxs-soft);color:var(--sxs-brand-ink)}
.sxv-fi svg{width:20px;height:20px}
.sxv-feats b{display:block;font-size:16px;font-weight:800;color:var(--sxs-ink)}
.sxv-feats li > span > span{display:block;margin-top:2px;font-size:15px;line-height:1.55;color:var(--sxs-ink2)}
.sxv ul.sxv-points{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.sxv-points li{display:flex;gap:10px;align-items:flex-start;font-size:16px;font-weight:600;color:var(--sxs-ink)}
.sxv-points svg{flex:none;width:20px;height:20px;margin-top:2px;color:var(--sxs-ok)}

/* ── Appareils : ordinateur + téléphone ───────────────────────────────────────────────────────────── */
.sxv-devs{position:relative;padding:0 9% 9% 0}
.sxv-laptop{border-radius:14px}
.sxv-phone{position:absolute;right:0;bottom:0;width:27%;aspect-ratio:828/1736;border-radius:14% / 6.7%;overflow:hidden;
  box-shadow:0 30px 60px -18px rgba(17,24,39,.5)}
.sxv-stores{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.sxv-store{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:8px 18px 8px 14px;border-radius:12px;background:#111;color:#fff;
  border:1px solid #111;text-decoration:none;transition:transform .15s,box-shadow .15s}
.sxv-store:hover{transform:translateY(-2px);box-shadow:0 10px 22px -10px rgba(0,0,0,.5);color:#fff}
.sxv-store:focus-visible{outline:2px solid var(--sxs-focus);outline-offset:3px}
.sxv-store span{display:flex;flex-direction:column;line-height:1.1}
.sxv-store small{font-size:11px;opacity:.8}
.sxv-store b{font-size:17px;font-weight:700}
:root[data-theme="dark"] .sxv-store{border-color:#3A3A3A}

/* ── « Changer n'a jamais été aussi simple » : trois temps reliés par un fil orange ──────────────── */
.sxv-change{background-color:var(--sxs-bg)}
.sxv ol.sxv-ways{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:72px}
.sxv-ways::before{content:"";position:absolute;left:50%;top:24px;bottom:24px;width:2px;margin-left:-1px;
  background:repeating-linear-gradient(to bottom,var(--sxs-brand) 0 10px,transparent 10px 20px);opacity:.55}
.sxv-way{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:96px;align-items:center}
.sxv-way.rev .sxv-way-copy{order:2}
.sxv-node{position:absolute;left:50%;top:50%;z-index:1;display:grid;place-items:center;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:16px;
  background:var(--sxs-brand);color:#fff;box-shadow:0 0 0 8px var(--sxs-bg),0 12px 26px -8px rgba(255,107,44,.6)}
.sxv-node svg{width:26px;height:26px}
.sxv-way-k{margin:0 0 8px;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--sxs-brand-ink)}
.sxv-way h3{margin:0;font-size:clamp(24px,2.4vw,32px);font-weight:850;letter-spacing:-.025em;line-height:1.15;color:var(--sxs-ink)}
.sxv-way-copy > p:not(.sxv-way-k):not(.sxv-ints-h){margin:12px 0 0;font-size:17px;line-height:1.6;color:var(--sxs-ink2)}
.sxv-way .sxs-btn{margin-top:24px}
.sxv-ints-h{margin:22px 0 10px;font-size:14px;font-weight:700;color:var(--sxs-ink3)}
.sxv ul.sxv-ints{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sxv-ints li{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:999px;border:1px solid var(--sxs-line);background:var(--sxs-surface);
  font-size:13px;font-weight:650;color:var(--sxs-ink)}
.sxv-ints img,.sxv-ints svg{width:20px;height:20px;object-fit:contain}
/* apparition : chaque temps monte et se pose quand il arrive à l'écran (showcase.js ajoute .in) */
.js-sxv [data-sxv-reveal]{opacity:0;transform:translateY(36px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.js-sxv [data-sxv-reveal].in{opacity:1;transform:none}
.js-sxv [data-sxv-reveal] .sxv-node{transform:scale(.4);transition:transform .5s cubic-bezier(.3,1.6,.5,1) .25s}
.js-sxv [data-sxv-reveal].in .sxv-node{transform:none}
/* carte de réservation (illustration de « Prendre rendez-vous ») */
.sxv-book{max-width:420px;margin:0 auto;padding:22px;border-radius:18px;background:var(--sxs-surface);border:1px solid var(--sxs-line);
  box-shadow:0 30px 70px -24px rgba(17,24,39,.35),0 0 0 6px var(--sxs-soft)}
.sxv-book-h{display:flex;align-items:center;gap:12px}
.sxv-book-logo{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--sxs-soft);color:var(--sxs-brand-ink)}
.sxv-book-logo svg{width:22px;height:22px}
.sxv-book-h b{display:block;font-size:17px;font-weight:800;color:var(--sxs-ink)}
.sxv-book-h small{display:block;font-size:13px;color:var(--sxs-ink3)}
.sxv-book-days{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:20px}
.sxv-book-days span{display:flex;flex-direction:column;align-items:center;padding:8px 0;border-radius:10px;border:1px solid var(--sxs-line);color:var(--sxs-ink2)}
.sxv-book-days small{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.sxv-book-days b{font-size:18px;font-weight:800;color:var(--sxs-ink)}
.sxv-book-days span.on{background:var(--sxs-ink);border-color:var(--sxs-ink);color:var(--sxs-bg)}
.sxv-book-days span.on b{color:var(--sxs-bg)}
.sxv-book-slots{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:14px}
.sxv-book-slots span{padding:10px 0;border-radius:10px;border:1px solid var(--sxs-line2);text-align:center;font-size:14px;font-weight:700;color:var(--sxs-ink)}
.sxv-book-slots span.on{border-color:var(--sxs-brand);background:var(--sxs-soft);color:var(--sxs-brand-ink);box-shadow:0 0 0 3px rgba(255,107,44,.15)}
.sxv-book-btn{display:block;margin-top:16px;padding:12px;border-radius:10px;background:var(--sxs-cta);color:#fff;text-align:center;font-size:15px;font-weight:800}

/* ── Démo de 2 minutes : chapitres en liste fine (plus de boîtes grises) et « Envie d'essayer » sans encadré ─ */
.sx-demo ol.sxd-chapters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;margin:18px 0 0}
.sx-demo .sxd-chapters li{border-bottom:1px solid var(--sxs-line)}
.sx-demo .sxd-chapters button{display:flex;align-items:center;gap:12px;width:100%;padding:11px 2px;border:0;border-radius:0;background:transparent;box-shadow:none;
  color:var(--sxs-ink);font:650 14px/1.3 'Inter',system-ui,sans-serif;text-align:left;transition:color .15s,padding .15s}
.sx-demo .sxd-chapters button b{flex:none;min-width:38px;color:var(--sxs-brand-ink);font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.sx-demo .sxd-chapters button::after{content:"";margin-left:auto;width:0;height:0;border-left:7px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent;opacity:0;transition:opacity .15s}
.sx-demo .sxd-chapters button:hover{color:var(--sxs-brand-ink);border-color:transparent;box-shadow:none;padding-left:6px}
.sx-demo .sxd-chapters button:hover::after{opacity:1}
.sx-demo .sxd-chapters button:focus-visible{outline:2px solid var(--sxs-focus);outline-offset:2px}
.sx-demo .sxd-cta{margin-top:26px;padding:20px 0 0;border-radius:0;background:transparent;color:var(--sxs-ink);border-top:2px solid var(--sxs-ink)}
.sx-demo .sxd-cta b{font-size:18px;color:var(--sxs-ink)}
.sx-demo .sxd-cta span{color:var(--sxs-ink2);font-size:14px}
.sx-demo .sxd-cta a{border-radius:6px;background:var(--sxs-cta);box-shadow:4px 4px 0 var(--sxs-hard);padding:13px 18px;font-size:14.5px;transition:transform .12s,box-shadow .12s}
.sx-demo .sxd-cta a:hover{background:var(--sxs-cta);transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--sxs-hard)}
html[data-theme="dark"] .sx-demo .sxd-chapters button{background:transparent;border-color:transparent;color:var(--sxs-ink)}

/* ── Tablette et téléphone ────────────────────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .sxv{padding:72px 0}
  .sxv .sxs-head{margin-bottom:28px}
  .sxv-split{grid-template-columns:minmax(0,1fr);gap:28px}
  .sxv-split.rev .sxv-copy{order:0}
  .sxv-split .sxv-media,.sxv-split .sxv-devs{order:-1}
  .sxv-screen{border-radius:12px}
  /* étapes : toujours épinglées, la vidéo en haut, le texte dessous */
  .sxv-steps{padding:0}
  .sxv-track{height:calc(7 * 70vh + 100vh)}
  .sxv-pin{align-items:flex-start}
  .sxv-stage{grid-template-columns:minmax(0,1fr);gap:18px;padding-top:84px}
  .sxv-stage .sxv-media{order:-1}
  .sxv h2.sxv-h2{display:none}
  .sxv-side .sxs-kicker{margin-bottom:0}
  .sxv-texts{margin-top:10px}
  .sxv-count b{font-size:40px}
  .sxv-text h3{font-size:22px}
  .sxv-text > p:not(.sxv-count){font-size:15.5px;margin:8px 0 10px}
  .sxv ol.sxv-rail{margin-top:14px;max-width:none}
  /* « Changer… » : le fil passe à gauche */
  .sxv ol.sxv-ways{gap:56px;padding-left:46px}
  .sxv-ways::before{left:22px}
  .sxv-way{grid-template-columns:minmax(0,1fr);gap:22px}
  .sxv-way.rev .sxv-way-copy{order:0}
  .sxv-way-media{order:-1}
  .sxv-node{left:-46px;top:0;width:44px;height:44px;margin:0;border-radius:12px;box-shadow:0 0 0 6px var(--sxs-bg)}
  .sxv-node svg{width:22px;height:22px}
  .sx-demo ol.sxd-chapters{display:grid;grid-template-columns:minmax(0,1fr);overflow:visible;margin:12px 0 0;padding:0}
  .sx-demo .sxd-chapters button{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  .sxv-vid,.sxv-text,.sxv-store{transition:none}
  .js-sxv [data-sxv-reveal],.js-sxv [data-sxv-reveal] .sxv-node{opacity:1;transform:none;transition:none}
}