/* ───────────────────────────────────────────────────────────────────────────────────────────────────────────────
   SubmitX — sections.css : les sections « parcours » de l'accueil (FR + EN) et de Tarifs / Pricing.
   Généré côté contenu par scripts/build-sections.mjs ; comportement dans assets/site/sections.js.

   Langage visuel repris du parcours de SubmitX Network (components/network/network-brand.css), sans React ni dépendance :
   signalisation de chantier (bandes obliques orange et noir), règle graduée, plaques à coins repérés, rail pointillé qui se
   remplit en orange quand on défile, stations qui apparaissent, ombre « décalée » des boutons, fond de plan quadrillé.
   Les deux thèmes (clair, sombre) passent par les variables --sxs-* ci-dessous. Chaque animation se coupe avec
   prefers-reduced-motion. Aucune police ni ressource externe.
   ─────────────────────────────────────────────────────────────────────────────────────────────────────────────── */
:root{
  --sxs-bg:#FFFFFF; --sxs-bg2:#F7F7F5; --sxs-surface:#FFFFFF; --sxs-surface2:#F9FAFB;
  --sxs-ink:#111827; --sxs-ink2:#374151; --sxs-ink3:#4B5563;
  --sxs-line:#E5E7EB; --sxs-line2:#D1D5DB; --sxs-tint:#E9ECF0;
  --sxs-brand:#FF6B2C; --sxs-brand-ink:#C2410C; --sxs-soft:#FFF0E5; --sxs-soft-ink:#9A3412;
  --sxs-cta:#C2410C; --sxs-hard:#111827; --sxs-stripe:#111827; --sxs-grid:rgba(17,24,39,.06);
  --sxs-ok:#15803D; --sxs-ok-soft:#DCFCE7; --sxs-red:#DC2626; --sxs-red-ink:#B91C1C;
  --sxs-plate:#FFFFFF; --sxs-plate-ink:#111827; --sxs-node-ink:#1B0808; --sxs-focus:#C2410C;
}
:root[data-theme="dark"]{
  --sxs-bg:#0F0F0F; --sxs-bg2:#161616; --sxs-surface:#161616; --sxs-surface2:#1C1C1C;
  --sxs-ink:#F3F4F6; --sxs-ink2:#D1D5DB; --sxs-ink3:#A3A9B5;
  --sxs-line:#2A2A2A; --sxs-line2:#3A3A3A; --sxs-tint:#2A2A2A;
  --sxs-brand:#FF6B2C; --sxs-brand-ink:#FF8A4C; --sxs-soft:rgba(255,107,44,.14); --sxs-soft-ink:#FFB37A;
  --sxs-cta:#C2410C; --sxs-hard:#C2410C; --sxs-stripe:#3A3A3A; --sxs-grid:rgba(255,255,255,.05);
  --sxs-ok:#4ADE80; --sxs-ok-soft:rgba(74,222,128,.14); --sxs-red:#EF4444; --sxs-red-ink:#FCA5A5;
  --sxs-focus:#FF8A4C;
}

.sxs{box-sizing:border-box;position:relative;color:var(--sxs-ink);font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
.sxs *,.sxs *::before,.sxs *::after{box-sizing:border-box}
.sxs img,.sxs svg{max-width:100%}
.sxs-wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.sxs ul.sxs-track,.sxs ul.sxs-lines,.sxs ul.sxs-journal,.sxs ul.sxs-steps,.sxs ul.sxs-one-list{list-style:none;margin-top:0;margin-bottom:0;padding-left:0}
.sxs-card-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sxs-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ── Motifs de chantier ─────────────────────────────────────────────────────────────────────────────────── */
.sxs-hazard{display:block;height:10px;background:repeating-linear-gradient(-45deg,var(--sxs-brand) 0 14px,var(--sxs-stripe) 14px 28px)}
.sxs-hazard.thin{height:6px}
.sxs-ruler{display:block;height:12px;background:
  repeating-linear-gradient(90deg,var(--sxs-line2) 0 1px,transparent 1px 10px) bottom / 100% 6px no-repeat,
  repeating-linear-gradient(90deg,var(--sxs-line2) 0 1px,transparent 1px 50px) bottom / 100% 12px no-repeat}
.sxs-plate{position:relative;background:var(--sxs-surface);border:1px solid var(--sxs-line);border-radius:4px}
.sxs-plate::before,.sxs-plate::after{content:"";position:absolute;width:14px;height:14px;border:0 solid var(--sxs-brand);pointer-events:none}
.sxs-plate::before{top:-1px;left:-1px;border-top-width:3px;border-left-width:3px}
.sxs-plate::after{bottom:-1px;right:-1px;border-bottom-width:3px;border-right-width:3px}

/* ── Sections : fonds, titres ───────────────────────────────────────────────────────────────────────────── */
.sxs-sec{padding:84px 0;background:var(--sxs-bg)}
.sxs-sec.alt{background:var(--sxs-bg2);border-top:1px solid var(--sxs-line);border-bottom:1px solid var(--sxs-line)}
.sxs-sec.blueprint{background-color:var(--sxs-bg2);background-image:linear-gradient(var(--sxs-grid) 1px,transparent 1px),linear-gradient(90deg,var(--sxs-grid) 1px,transparent 1px);background-size:28px 28px;border-top:1px solid var(--sxs-line);border-bottom:1px solid var(--sxs-line)}
.sxs-head{max-width:760px;margin:0 0 8px}
.sxs-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sxs-kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sxs-brand-ink)}
.sxs-kicker::before{content:"";width:26px;height:4px;background:repeating-linear-gradient(-45deg,var(--sxs-brand) 0 5px,var(--sxs-stripe) 5px 10px)}
.sxs h2.sxs-h2{margin:0;font-size:clamp(28px,4.2vw,44px);font-weight:850;letter-spacing:-.035em;line-height:1.08;color:var(--sxs-ink)}
.sxs h2.sxs-h2 .or{color:var(--sxs-brand-ink);background:linear-gradient(transparent 66%,var(--sxs-soft) 66%);padding:0 .05em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sxs-sub{margin:14px 0 0;font-size:clamp(16px,1.6vw,18px);line-height:1.6;color:var(--sxs-ink2)}

/* ── Boutons : ombre décalée ────────────────────────────────────────────────────────────────────────────── */
.sxs-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:6px;border:1.5px solid transparent;background:var(--sxs-cta);color:#fff;font:inherit;font-size:15px;font-weight:800;letter-spacing:.005em;text-decoration:none;cursor:pointer;box-shadow:4px 4px 0 var(--sxs-hard);transition:transform .12s,box-shadow .12s,background .15s}
.sxs-btn:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--sxs-hard);color:#fff}
.sxs-btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--sxs-hard)}
.sxs-btn.ghost{background:var(--sxs-surface);color:var(--sxs-ink);border-color:var(--sxs-line2);box-shadow:4px 4px 0 var(--sxs-line2)}
.sxs-btn.ghost:hover{background:var(--sxs-surface2);color:var(--sxs-ink);box-shadow:6px 6px 0 var(--sxs-line2)}
.sxs-btn.sm{min-height:42px;padding:0 14px;font-size:14px;box-shadow:3px 3px 0 var(--sxs-hard)}
.sxs-btn:focus-visible,.sxs-chip:focus-visible,.sxs-tab:focus-visible,.sxs-st-title:focus-visible,.sxs-car-btn:focus-visible,.sxs-dot:focus-visible,.sxs-trade:focus-visible,.sxs-int:focus-visible{outline:3px solid var(--sxs-focus);outline-offset:3px}
.sxs-btn svg{width:16px;height:16px;flex:none}

/* ── Apparition au défilement (sections.js ajoute .in) ───────────────────────────────────────────────────── */
.sxs-rv{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rv-d,0s)}
/* masqué SEULEMENT quand les scripts tournent (sinon tout reste visible) et que le mouvement est permis */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){.sxs-rv:not(.in){opacity:0;transform:translateY(24px)}}

/* ═══ 1. PARCOURS : de la demande au paiement ═══════════════════════════════════════════════════════════════ */
.sxs-journey{position:relative;margin-top:52px;display:grid;gap:64px;padding-left:64px}
.sxs-rail{position:absolute;left:21px;top:8px;bottom:8px;width:4px;background:repeating-linear-gradient(180deg,var(--sxs-line2) 0 8px,transparent 8px 16px);border-radius:2px}
.sxs-rail-fill{position:absolute;left:0;top:0;width:100%;height:calc(var(--p,0) * 100%);background:repeating-linear-gradient(180deg,var(--sxs-brand) 0 8px,transparent 8px 16px);border-radius:2px}
.sxs-station{position:relative;display:grid;gap:26px;align-items:center;grid-template-columns:minmax(0,1fr)}
.sxs-station>*{min-width:0}
@media (min-width:960px){.sxs-station{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:48px}}
.sxs-node{position:absolute;left:-64px;top:0;width:46px;height:46px;border-radius:4px;display:grid;place-items:center;font-size:20px;font-weight:850;letter-spacing:-.02em;background:var(--sxs-surface);color:var(--sxs-ink3);border:2px solid var(--sxs-line2);transition:background .3s,color .3s,border-color .3s,transform .3s;z-index:1}
.sxs-station.in .sxs-node,.sxs-station.is-active .sxs-node{background:var(--sxs-brand);color:var(--sxs-node-ink);border-color:var(--sxs-brand)}
.sxs-station.is-active .sxs-node{transform:scale(1.1);box-shadow:4px 4px 0 var(--sxs-hard)}
.sxs-st-tag{display:inline-block;margin-top:12px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--sxs-brand-ink)}
.sxs-st-copy h3{margin:6px 0 0}
.sxs-st-title{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;min-height:44px;font-size:clamp(24px,2.6vw,32px);font-weight:850;letter-spacing:-.03em;line-height:1.12;color:var(--sxs-ink)}
.sxs-st-title:hover{color:var(--sxs-brand-ink)}
.sxs-st-copy p.sxs-st-body{margin:10px 0 0;color:var(--sxs-ink2);font-size:16.5px;line-height:1.6;max-width:52ch}
.sxs-actions{margin-top:20px;display:flex;flex-wrap:wrap;gap:12px 14px}

/* Aperçus (plaques interactives) */
.sxs-mock{padding:20px;box-shadow:8px 8px 0 var(--sxs-line);min-height:270px}
.sxs-mock-bar{display:flex;align-items:center;gap:8px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px dashed var(--sxs-line2);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--sxs-ink3)}
.sxs-mock-bar i{width:9px;height:9px;border-radius:1px;background:var(--sxs-brand)}
.sxs-mock-bar em{margin-left:auto;font-style:normal;padding:2px 8px;border:1px solid var(--sxs-line2);border-radius:2px;letter-spacing:.1em}
.sxs-fld{display:grid;gap:4px;margin-bottom:12px}
.sxs-fld>span{font-size:12px;font-weight:700;color:var(--sxs-ink3);letter-spacing:.03em}
.sxs-fld .box{min-height:44px;padding:10px 12px;border-radius:4px;border:1px solid var(--sxs-line2);background:var(--sxs-surface2);color:var(--sxs-ink);font-size:15px;display:flex;align-items:center;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sxs-caret::after{content:"";display:inline-block;width:2px;height:1.1em;margin-left:2px;background:var(--sxs-brand);animation:sxs-blink 1s steps(1) infinite;vertical-align:-.15em}
@keyframes sxs-blink{50%{opacity:0}}
.sxs-chiprow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.sxs-chip{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 13px;border-radius:4px;border:1px solid var(--sxs-line2);background:var(--sxs-surface);color:var(--sxs-ink);font:inherit;font-weight:650;font-size:14px;cursor:pointer;transition:background .15s,border-color .15s,transform .1s}
.sxs-chip:hover{border-color:var(--sxs-brand)}
.sxs-chip:active{transform:scale(.97)}
.sxs-chip[aria-pressed="true"],.sxs-chip[aria-checked="true"]{background:var(--sxs-soft);border-color:var(--sxs-brand);color:var(--sxs-soft-ink)}
.sxs-chip svg{width:16px;height:16px;flex:none}
.sxs-status{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border-radius:3px;background:var(--sxs-tint);color:var(--sxs-ink2);font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.sxs-status.ok{background:var(--sxs-ok-soft);color:var(--sxs-ok)}
.sxs-status.go{background:var(--sxs-soft);color:var(--sxs-soft-ink)}
.sxs-status svg{width:14px;height:14px}
.sxs-mock-foot{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;margin-top:14px;flex-wrap:wrap}
.sxs-mock-foot small{color:var(--sxs-ink3);font-size:12.5px}
.sxs-skel{display:block;height:10px;border-radius:2px;background:var(--sxs-tint)}
.sxs-skel.w40{width:40%}.sxs-skel.w55{width:55%}.sxs-skel.w70{width:70%}.sxs-skel.w85{width:85%}.sxs-skel.w100{width:100%}
.sxs-lines{display:grid;gap:10px;margin:0 0 14px;padding:0;list-style:none}
.sxs-lines li{display:grid;grid-template-columns:minmax(0,1fr) 38%;gap:12px;align-items:center;min-height:30px;padding:6px 0;border-bottom:1px dashed var(--sxs-line2);font-size:14px;color:var(--sxs-ink)}
.sxs-lines li:last-child{border-bottom:0}
.sxs-lines li.flag{background:var(--sxs-soft);margin:0 -8px;padding:6px 8px;border-radius:3px;border-bottom:0}
.sxs-lines .sxs-skel{justify-self:end}
.sxs-lines li.sum{font-weight:800}
/* signature */
.sxs-doc{border:1px solid var(--sxs-line2);border-radius:4px;background:var(--sxs-surface2);padding:14px}
.sxs-doc .sxs-skel{margin:8px 0}
.sxs-sign{position:relative;height:74px;margin-top:12px;border-top:1px solid var(--sxs-line2);display:flex;align-items:flex-end}
.sxs-sign small{position:absolute;left:0;bottom:-20px;color:var(--sxs-ink3);font-size:12px}
.sxs-sign svg{width:100%;height:70px;overflow:visible}
.sxs-sign path{fill:none;stroke:var(--sxs-ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:600;stroke-dashoffset:600}
.sxs-signed .sxs-sign path{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s ease}
.sxs-chain{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px;min-height:28px}
.sxs-chain .sxs-status{opacity:.35}
.sxs-signed .sxs-chain .sxs-status{opacity:1}
/* onglets */
.sxs-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.sxs-tab{min-height:40px;padding:0 14px;border-radius:4px;border:1px solid var(--sxs-line2);background:var(--sxs-surface);color:var(--sxs-ink);font:inherit;font-weight:700;font-size:14px;cursor:pointer}
.sxs-tab[aria-selected="true"]{background:var(--sxs-brand);border-color:var(--sxs-brand);color:var(--sxs-node-ink)}
.sxs-tab:hover{border-color:var(--sxs-brand)}
.sxs-panel[hidden]{display:none}
.sxs-gantt{display:grid;gap:10px;margin:2px 0 4px}
.sxs-g-row{display:grid;grid-template-columns:92px minmax(0,1fr);gap:10px;align-items:center;font-size:13px;color:var(--sxs-ink2)}
.sxs-g-track{position:relative;height:22px;border-radius:3px;background:repeating-linear-gradient(90deg,var(--sxs-tint) 0 1px,transparent 1px 25%)}
.sxs-g-bar{position:absolute;top:3px;bottom:3px;left:var(--l);width:0;border-radius:2px;background:var(--sxs-brand);transition:width .9s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.sxs-panel.on .sxs-g-bar,.sxs-mock.live .sxs-panel:not([hidden]) .sxs-g-bar{width:var(--w)}
.sxs-g-bar.alt{background:var(--sxs-ink3)}
.sxs-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sxs-photo{aspect-ratio:4/3;border-radius:3px;border:1px dashed var(--sxs-line2);background:var(--sxs-surface2);display:grid;place-items:center;color:var(--sxs-ink3);font-size:11.5px;text-align:center;padding:4px}
.sxs-photo svg{width:22px;height:22px;margin-bottom:2px}
.sxs-journal{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.sxs-journal li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--sxs-line);border-radius:3px;background:var(--sxs-surface2);font-size:13.5px;font-weight:650;color:var(--sxs-ink)}
.sxs-journal li svg{width:18px;height:18px;color:var(--sxs-brand-ink)}
.sxs-journal li span{display:grid;gap:5px}
/* facture et paiement */
.sxs-inv-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;font-weight:800;font-size:16px;color:var(--sxs-ink)}
.sxs-steps{display:grid;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.sxs-steps li{display:flex;align-items:center;gap:10px;min-height:38px;padding:6px 10px;border:1px solid var(--sxs-line);border-radius:3px;color:var(--sxs-ink3);font-size:14px;font-weight:650;background:var(--sxs-surface2);transition:background .3s,color .3s,border-color .3s}
.sxs-steps li::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--sxs-line2);transition:background .3s,border-color .3s}
.sxs-steps li.done{color:var(--sxs-ink);border-color:var(--sxs-ok);background:var(--sxs-ok-soft)}
.sxs-steps li.done::before{background:var(--sxs-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat;border-color:var(--sxs-ok)}
@media (max-width:959px){.sxs-journey{padding-left:54px;gap:56px}.sxs-node{left:-54px;width:40px;height:40px;font-size:18px}.sxs-rail{left:18px}}
@media (max-width:400px){.sxs-journey{padding-left:44px}.sxs-node{left:-44px;width:34px;height:34px;font-size:16px}.sxs-rail{left:15px}.sxs-mock{padding:14px;box-shadow:5px 5px 0 var(--sxs-line)}.sxs-g-row{grid-template-columns:70px minmax(0,1fr)}}
.sxs-cta-row{margin-top:56px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px}
.sxs-cta-row .note{color:var(--sxs-ink3);font-size:14px}

/* ═══ 2. RUBAN DES MÉTIERS (défile en continu) ═══════════════════════════════════════════════════════════ */
.sxs-ribbon{position:relative;overflow:hidden;background:var(--sxs-bg2);border-top:1px solid var(--sxs-line);border-bottom:1px solid var(--sxs-line);padding:24px 0 20px}
.sxs-ribbon .sxs-hazard{position:absolute;left:0;right:0;top:0;height:6px}
.sxs-ribbon-label{max-width:1180px;margin:0 auto 14px;padding:0 20px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--sxs-ink3);font-weight:800}
.sxs-track{display:flex;gap:10px;width:max-content;padding:4px 0;animation:sxs-marquee var(--dur,90s) linear infinite}
.sxs-track.rev{animation-direction:reverse}
.sxs-ribbon:hover .sxs-track,.sxs-ribbon:focus-within .sxs-track{animation-play-state:paused}
@keyframes sxs-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.sxs-trade{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 18px 0 10px;border-radius:4px;border:1px solid var(--sxs-line2);background:var(--sxs-surface);color:var(--sxs-ink);font-weight:700;font-size:15px;white-space:nowrap;text-decoration:none;transition:border-color .15s,transform .12s,box-shadow .12s}
.sxs-trade:hover{border-color:var(--sxs-brand);transform:translateY(-2px);box-shadow:0 4px 0 var(--sxs-brand);color:var(--sxs-ink)}
.sxs-trade .ti{width:30px;height:30px;border-radius:3px;display:grid;place-items:center;background:var(--sxs-soft);color:var(--sxs-brand-ink)}
.sxs-trade .ti svg{width:17px;height:17px}
.sxs-ribbon.in-logos{margin-top:36px;border-radius:6px;border:1px solid var(--sxs-line)}
@media (prefers-reduced-motion:reduce){
  .sxs-track{animation:none;flex-wrap:wrap;width:auto;max-width:1180px;margin:0 auto;padding:4px 20px;justify-content:center}
  .sxs-track [data-dup]{display:none}
}

/* ═══ 3. UNE VINGTAINE DE LOGICIELS : défilement, barre rouge « plus besoin » ═════════════════════════════════ */
.sxs-sw{padding:84px 0 70px;background:var(--sxs-bg)}
.sxs-sw-rows{margin-top:40px;display:grid;gap:14px;overflow:hidden;padding:6px 0}
.sxs-sw-rows .sxs-track{gap:16px;padding:6px 0 10px}
.sxs-sw-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;flex:none}
.sxs-sw-plate{position:relative;min-width:150px;height:76px;border-radius:6px;background:var(--sxs-plate);border:1px solid var(--sxs-line2);display:flex;align-items:center;justify-content:center;gap:9px;padding:0 18px;overflow:hidden;color:var(--sxs-plate-ink)}
.sxs-sw-plate.dark{background:#111827;border-color:#111827}
.sxs-sw-plate img{flex:none}
.sxs-sw-plate b{font-size:14px;font-weight:800;letter-spacing:-.01em;color:#111827;white-space:nowrap}
.sxs-sw-plate.dark b{color:#F9FAFB}
.sxs-sw-plate.gen{gap:10px}
.sxs-sw-plate .gi{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:4px;background:#FFF0E5;color:#9A3412}
.sxs-sw-plate .gi svg{width:20px;height:20px}
.sxs-sw-plate.word b{font-size:17px;letter-spacing:.01em}
.sxs-strike{position:absolute;left:-6%;right:-6%;top:50%;height:6px;margin-top:-3px;background:var(--sxs-red);border-radius:3px;transform:rotate(-8deg) scaleX(0);transform-origin:left center;transition:transform .55s cubic-bezier(.7,0,.2,1)}
.sxs-sw-item.is-struck .sxs-strike{transform:rotate(-8deg) scaleX(1)}
.sxs-sw-item small{font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--sxs-red-ink);opacity:0;transform:translateY(-4px);transition:opacity .4s .25s,transform .4s .25s}
.sxs-sw-item.is-struck small{opacity:1;transform:none}
.sxs-sw-plate img,.sxs-sw-plate b{transition:opacity .4s .2s}
.sxs-sw-item.is-struck .sxs-sw-plate img,.sxs-sw-item.is-struck .sxs-sw-plate b{opacity:.55}
@media (prefers-reduced-motion:reduce){
  .sxs-sw-rows .sxs-track{justify-content:center;gap:14px 14px;padding:6px 20px}
  .sxs-strike{transition:none;transform:rotate(-8deg) scaleX(1)}
  .sxs-sw-item small{opacity:1;transform:none;transition:none}
}
.sxs-one{margin-top:44px;display:grid;gap:26px;padding:28px;box-shadow:8px 8px 0 var(--sxs-line)}
@media (min-width:900px){.sxs-one{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;gap:40px;padding:34px 38px}}
.sxs-one-logo{display:block;height:54px;width:auto;margin:0 0 16px}
.sxs-one h3{margin:0;font-size:clamp(24px,3vw,32px);font-weight:850;letter-spacing:-.03em;line-height:1.12;color:var(--sxs-ink)}
.sxs-one h3 .or{color:var(--sxs-brand-ink)}
.sxs-one p.lead{margin:10px 0 0;color:var(--sxs-ink2);font-size:16.5px;line-height:1.6}
.sxs-one-list{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sxs-one-list li{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border:1px solid var(--sxs-line);border-radius:4px;background:var(--sxs-surface2);font-weight:700;font-size:14.5px;color:var(--sxs-ink)}
.sxs-one-list svg{width:18px;height:18px;flex:none;color:var(--sxs-ok)}
@media (max-width:520px){.sxs-one-list{grid-template-columns:minmax(0,1fr)}}
.sxs-est{margin:22px 0 0;color:var(--sxs-ink2);font-size:15px;line-height:1.55}
.sxs-est a{color:var(--sxs-brand-ink);font-weight:800;text-underline-offset:3px}
.sxs-est em{font-style:normal;display:inline-block;margin-right:6px;padding:1px 8px;border:1px solid var(--sxs-line2);border-radius:2px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--sxs-ink3)}
.sxs-legal{margin:26px 0 0;color:var(--sxs-ink3);font-size:13.5px}

/* ═══ 4. HUB D'INTÉGRATIONS : SubmitX au centre, chaque outil relié par une ligne orange ═════════════════════ */
.sxs-int-sec{padding:72px 0 60px;background:var(--sxs-bg2);border-top:1px solid var(--sxs-line);overflow:hidden}
.sxs-hub-box{container-type:inline-size;container-name:sxs-hub}
.sxs-hub{position:relative;max-width:1100px;margin:40px auto 0;aspect-ratio:1100/640}
.sxs-hub-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sxs-hub-lines.m{display:none}
.sxs-hub-link{fill:none;stroke:var(--sxs-brand);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;opacity:.5;stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset 1.1s cubic-bezier(.6,0,.2,1) calc(var(--i) * .09s),opacity .2s,stroke-width .2s}
.sxs-hub-link.hot{opacity:1;stroke-width:3.5}
.sxs-hub-flow{fill:none;stroke:var(--sxs-brand);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:7 200;stroke-dashoffset:7;opacity:0}
.sxs-hub.in .sxs-hub-flow{opacity:1;animation:sxs-flow 3.4s linear infinite;animation-delay:calc(var(--i) * -.41s)}
.sxs-hub-flow.hot{stroke-width:5.5}
@keyframes sxs-flow{to{stroke-dashoffset:-100}}
.sxs-hub-dot{fill:var(--sxs-brand);transition:opacity .4s .9s}
.sxs-hub-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:20%;height:19.4%;min-height:96px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:8px;border:2px solid var(--sxs-brand);box-shadow:8px 8px 0 var(--sxs-hard);transition:opacity .5s,transform .5s cubic-bezier(.2,.7,.2,1)}
.sxs-hub-core img{height:46px;width:auto;max-width:88%}
.sxs-hub-core span{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--sxs-ink3);text-align:center;line-height:1.2}
.sxs-hub-ping{position:absolute;inset:-2px;border:2px solid var(--sxs-brand);border-radius:inherit;opacity:0;pointer-events:none}
.sxs-hub.in .sxs-hub-ping{animation:sxs-ping 3.2s ease-out infinite}
@keyframes sxs-ping{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.22,1.3)}}
.sxs ul.sxs-hub-nodes{list-style:none;margin:0;padding:0}
.sxs-hub-node{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);z-index:1;width:24%;min-height:56px;box-sizing:border-box;margin:0;display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:6px;background:var(--sxs-plate);border:1px solid var(--sxs-line2);color:#111827;font-size:15.5px;font-weight:800;line-height:1.2;transition:opacity .5s calc(var(--i) * .07s),transform .5s cubic-bezier(.2,.7,.2,1) calc(var(--i) * .07s),border-color .15s,box-shadow .15s}
.sxs-hub-node.dark{background:#111827;border-color:#111827;color:#F9FAFB}
.sxs-hub-node img{flex:none}
.sxs-hub-node span{display:grid;min-width:0}
.sxs-hub-node b{font-weight:800;white-space:nowrap}
.sxs-hub-node small{font-size:12px;font-weight:700;color:#4B5563;letter-spacing:.02em}
.sxs-hub-node.dark small{color:#D1D5DB}
.sxs-hub-node:hover{border-color:var(--sxs-brand);box-shadow:0 4px 0 var(--sxs-brand)}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .sxs-hub:not(.in) .sxs-hub-link{stroke-dashoffset:100}
  .sxs-hub:not(.in) .sxs-hub-dot{opacity:0}
  .sxs-hub:not(.in) .sxs-hub-node{opacity:0;transform:translate(-50%,-50%) scale(.9)}
  .sxs-hub:not(.in) .sxs-hub-core{opacity:0;transform:translate(-50%,-50%) scale(.92)}
}
@media (prefers-reduced-motion:reduce){
  .sxs-hub-flow,.sxs-hub-ping{display:none}
  .sxs-hub-link,.sxs-hub-node,.sxs-hub-core,.sxs-hub-dot{transition:none}
}
/* Disposition en deux colonnes sous 900 px de LARGEUR DU CONTENEUR (la page Tarifs a ses propres marges) ; repli en media query pour un navigateur sans requêtes de conteneur */
@media (max-width:899px){
  .sxs-hub{max-width:420px;aspect-ratio:360/700;margin-top:34px}
  .sxs-hub-lines.d{display:none}
  .sxs-hub-lines.m{display:block}
  .sxs-hub-core{top:8.86%;width:52.8%;height:12.9%;min-height:0;gap:4px;padding:6px}
  .sxs-hub-core img{height:32px}
  .sxs-hub-core span{font-size:11px;letter-spacing:.08em}
  .sxs-hub-node{left:var(--mx);top:var(--my);width:43.3%;min-height:50px;padding:6px 7px;gap:6px;font-size:13px}
  .sxs-hub-node img{height:22px;width:auto}
  .sxs-hub-node b{white-space:normal;overflow-wrap:break-word}
  .sxs-hub-node small{display:none}
}
@container sxs-hub (max-width:899px){
  .sxs-hub{max-width:420px;aspect-ratio:360/700;margin-top:34px}
  .sxs-hub-lines.d{display:none}
  .sxs-hub-lines.m{display:block}
  .sxs-hub-core{top:8.86%;width:52.8%;height:12.9%;min-height:0;gap:4px;padding:6px}
  .sxs-hub-core img{height:32px}
  .sxs-hub-core span{font-size:11px;letter-spacing:.08em}
  .sxs-hub-node{left:var(--mx);top:var(--my);width:43.3%;min-height:50px;padding:6px 7px;gap:6px;font-size:13px}
  .sxs-hub-node img{height:22px;width:auto}
  .sxs-hub-node b{white-space:normal;overflow-wrap:break-word}
  .sxs-hub-node small{display:none}
}
@container sxs-hub (max-width:299px){
  .sxs-hub-core{height:15%;gap:3px}
  .sxs-hub-core img{height:26px}
  .sxs-hub-core span{font-size:11px;letter-spacing:.04em}
  .sxs-hub-node{width:46%;padding:5px;gap:5px;font-size:11.5px}
  .sxs-hub-node img{height:18px}
}

/* ═══ 5. AVIS CLIENTS (carrousel) ═══════════════════════════════════════════════════════════════════════ */
.sxs-rev{padding:80px 0 64px;background:var(--sxs-bg)}
.sxs-rev[hidden]{display:none}
.sxs-car{position:relative;margin-top:34px}
.sxs-car-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:6px 4px 14px;margin:0 -4px;overscroll-behavior-x:contain}
.sxs-car-track::-webkit-scrollbar{display:none}
.sxs-car-track:focus-visible{outline:3px solid var(--sxs-focus);outline-offset:2px}
.sxs-card{scroll-snap-align:start;flex:0 0 calc((100% - 32px) / 3);min-width:0;display:flex;flex-direction:column;gap:14px;padding:22px 22px 20px;margin:0}
.sxs-card blockquote{margin:0;flex:1;color:var(--sxs-ink);hyphens:manual;overflow-wrap:break-word}
.sxs-card blockquote p{margin:0;font-size:16px;line-height:1.6}
.sxs-card.q-md blockquote p{font-size:17.5px;line-height:1.55}
.sxs-card.q-lg blockquote p{font-size:22px;line-height:1.35;font-weight:700;letter-spacing:-.01em}
.sxs-card figcaption{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14.5px;color:var(--sxs-ink2)}
.sxs-card figcaption b{color:var(--sxs-ink);font-weight:800}
.sxs-src{display:inline-flex;align-items:center;min-height:26px;padding:0 9px;border:1px solid var(--sxs-line2);border-radius:3px;background:var(--sxs-surface2);color:var(--sxs-ink2);font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.sxs-stars{display:inline-flex;gap:2px;color:var(--sxs-brand-ink);font-size:17px;line-height:1;letter-spacing:1px}
.sxs-stars .off{color:var(--sxs-line2)}
.sxs-card.img{padding:12px}
.sxs-card.img img{display:block;width:100%;height:auto;border-radius:3px}
.sxs-car-ctl{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:6px}
.sxs-car-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:6px;border:1.5px solid var(--sxs-line2);background:var(--sxs-surface);color:var(--sxs-ink);cursor:pointer;box-shadow:3px 3px 0 var(--sxs-line2);transition:transform .1s,box-shadow .1s}
.sxs-car-btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--sxs-line2)}
.sxs-car-btn svg{width:20px;height:20px}
.sxs-dots{display:flex;gap:0;flex-wrap:wrap;justify-content:center;max-width:60%}
.sxs-dot{all:unset;box-sizing:border-box;width:28px;height:44px;display:grid;place-items:center;cursor:pointer}
.sxs-dot::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--sxs-line2);transition:background .2s,transform .2s}
.sxs-dot[aria-current="true"]::before{background:var(--sxs-brand);transform:scale(1.3)}
.sxs-rev-note{margin:10px 0 0;text-align:center;color:var(--sxs-ink3);font-size:13.5px}
@media (max-width:1023px){.sxs-card{flex-basis:calc((100% - 16px) / 2)}}
@media (max-width:640px){.sxs-card{flex-basis:88%}.sxs-rev{padding:60px 0 48px}}

/* ── Petits écrans : jamais de défilement horizontal de la page ─────────────────────────────────────────── */
@media (max-width:640px){.sxs-sec,.sxs-sw{padding:60px 0}.sxs-wrap{padding:0 16px}.sxs-ribbon-label{padding:0 16px}}
/* Tarifs et Pricing : le conteneur de la page a déjà 40 px de marge de chaque côté, on n'en ajoute pas une seconde sur téléphone. */
@media (max-width:640px){.page>.sxs .sxs-wrap,.page>.sxs .sxs-ribbon-label{padding-left:0;padding-right:0}}

/* Deux débordements déjà présents avant ce chantier, mesurés sur les pages d'origine : html{overflow-x:hidden} les coupait en silence.
   1) base de l'ordinateur portable du trio d'appareils (accueil) : 122 % de la largeur, donc 19 px hors de la fenêtre en colonne (409 px à 390 px) ;
   2) barre du haut de l'accueil entre 321 et 440 px : la barre complète exige 383 px (logo + 32 px de marge + préférences + appel + burger),
      le burger était réduit à 24 px et sortait de l'écran (360 et 375 px, les largeurs de téléphone les plus courantes) ;
      sous 360 px, on compacte aussi le logo et les marges (Tarifs anglais : 350 px à 320 px). */
@media (max-width:820px){.sw-dev-base{width:108%;margin-left:-4%}}
@media (max-width:440px){
  html .sx-nav .sx-logo,html .sx-nav.sx-nav--float .sx-logo,html .sx-nav.sx-nav--float.scrolled .sx-logo{margin-right:0}
  html .sx-nav .sx-burger{flex:none}
}
@media (max-width:379px){
  html .sx-nav,html .sx-nav.sx-nav--float{padding:0 14px}
  html .sx-nav .sx-logo img,html .sx-nav.sx-nav--net .sx-logo img{height:44px!important;width:auto}
}
@media (max-width:359px){
  html .sx-nav,html .sx-nav.sx-nav--float{padding:0 12px}
  html .sx-nav .sx-logo img,html .sx-nav.sx-nav--net .sx-logo img{height:36px!important;width:auto}
  html .sx-nav .sx-lang-toggle button{padding:7px 7px}
  html .sx-nav .sx-prefs{margin-right:0;gap:4px}
}
/* Tableau comparatif de Tarifs / Pricing (déplacé en bas de page) : il avait un fond blanc fixe avec un texte clair en thème sombre
   (titres et noms de fonctions illisibles, déjà le cas avant ce chantier). On lui donne une surface sombre en thème sombre. */
html[data-theme="dark"] .compare{background:#161616;border-color:#2E2E2E}
html[data-theme="dark"] .compare .ch{border-bottom-color:#2E2E2E}
html[data-theme="dark"] .compare .ch h3{color:#F5F5F5}
html[data-theme="dark"] .compare .ch p{color:#B3B3B3}
html[data-theme="dark"] .ctable .th{background:#1D1D1D;color:#B3B3B3;border-bottom-color:#2E2E2E}
html[data-theme="dark"] .ctable .td{color:#EDEDED;border-bottom-color:#2E2E2E}
html[data-theme="dark"] .ctable .td.fade{color:#A8A8A8}
html[data-theme="dark"] .ctable .group{background:#1D1D1D;color:#B3B3B3;border-color:#2E2E2E}
html[data-theme="dark"] .ctable .featcol{background:#26180F}
html[data-theme="dark"] .ctable .th.featcol{background:#33200F;color:#FF8A52}
@media (prefers-reduced-motion:reduce){
  .sxs-rv{opacity:1;transform:none;transition:none}
  .sxs-caret::after{animation:none}
  .sxs-g-bar{transition:none;width:var(--w)}
  .sxs-signed .sxs-sign path{transition:none}
}
@media print{.sxs-track{animation:none}}