/* Gabarit secteur — socle commun aux variantes A/B/C. Formes inspirées d'une page éditoriale ; palette et carrés Propul. */
.sx-page{--sx-ink:#211a33;--sx-muted:#6a6478;--sx-purple:#6541c8;--sx-lilac:#b7a3e4;--sx-pale:#dcd4e8;--sx-orange:#b54c27;--sx-line:#ded7e9;--sx-soft:#f7f5fb;--sx-col:640px;--sx-wide:1092px;--sx-head:88px;--sx-ease:cubic-bezier(.2,.7,.2,1);font-size:17px;line-height:1.65;color:var(--sx-ink);background:#fff;overflow-x:clip}
.sx-page *{box-sizing:border-box}
.sx-page h1,.sx-page h2,.sx-page h3{font-family:'Source Serif 4',Georgia,serif;font-weight:500;line-height:1.08;letter-spacing:-.025em;text-wrap:balance;margin:0;color:inherit}
.sx-page h1{font-size:clamp(42px,5vw,78px)}.sx-page h2{font-size:clamp(32px,3.4vw,52px)}.sx-page h3{font-size:clamp(22px,2vw,30px)}
.sx-page p{margin:0 0 1.1em;max-width:65ch;text-wrap:pretty}.sx-page em{color:var(--sx-purple);font-style:italic}
.sx-page a{color:inherit}.sx-page a:focus-visible,.sx-page button:focus-visible{outline:3px solid var(--sx-orange);outline-offset:5px}
.sx-col{width:min(var(--sx-col),calc(100% - 48px));margin-inline:auto;padding-block:48px}
.sx-col-open{padding-top:96px}.sx-col-close{padding-bottom:96px}
.sx-wide{width:min(var(--sx-wide),calc(100% - 48px));margin-inline:auto}
.sx-bleed{margin-inline:calc(50% - 50vw);background:var(--sx-soft);border-block:1px solid var(--sx-line);padding-block:56px}
.sx-eyebrow{display:block;font:500 12px/1.4 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--sx-purple);margin-bottom:18px}
.sx-eyebrow b{font-weight:600;color:var(--sx-orange)}
.sx-lead{font-size:clamp(18px,1.4vw,21px);color:var(--sx-muted);line-height:1.6}
.sx-prose{font-family:'Source Serif 4',Georgia,serif;font-size:clamp(19px,1.5vw,22px);line-height:1.62;color:#2d2540}
.sx-prose>p:first-child::first-letter{float:left;font-size:3.6em;line-height:.85;padding:6px 10px 0 0;color:var(--sx-purple)}
.sx-button{display:inline-flex;align-items:center;gap:18px;padding:16px 22px;background:var(--sx-purple);color:#fff!important;text-decoration:none;font:600 15px/1 Inter,system-ui,sans-serif;border-radius:3px;transition:background .2s,transform .2s}
.sx-button:hover{background:#5030aa;transform:translateY(-2px)}
.sx-textlink{display:inline-block;text-decoration:underline;text-underline-offset:6px;font-size:15px}
.sx-rule{height:1px;background:var(--sx-line);width:100vw;margin-left:50%;transform:translateX(-50%)}
/* Entrée du hero en cascade, puis apparition des sections. */
.sx-in{opacity:0;transform:translateY(18px);animation:sx-in .8s var(--sx-ease) forwards;animation-delay:calc(.35s + var(--d,0)*.12s)}
@keyframes sx-in{to{opacity:1;transform:none}}
.sx-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--sx-ease),transform .7s var(--sx-ease)}
.sx-reveal.is-in{opacity:1;transform:none}
/* Hero commun : colonne de texte étroite, cadre de carrés Signature en fond. */
.sx-hero{min-height:calc(100svh - var(--sx-head));display:grid;align-items:center;padding-block:64px;position:relative;isolation:isolate}
.sx-hero-copy{width:min(560px,calc(100% - 48px));margin-inline:auto}
.sx-hero .sx-lead{margin:28px 0 34px}
.sx-hero-foot{font-size:13px;color:var(--sx-muted);margin-top:24px}
.sx-scroll-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font:12px 'JetBrains Mono',ui-monospace,monospace;color:var(--sx-muted);display:flex;flex-direction:column;align-items:center;gap:8px}
.sx-scroll-hint i{width:9px;height:9px;background:var(--sx-purple);animation:sx-pulse 1.8s ease-in-out infinite}
@keyframes sx-pulse{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(8px);opacity:1}}
/* Offres et cas d'usage : liste numérotée dans la colonne étroite. */
.sx-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--sx-line)}
.sx-list li{display:grid;grid-template-columns:52px 1fr;gap:16px;padding:22px 0;border-bottom:1px solid var(--sx-line)}
.sx-list li>span{font:500 12px/1.9 'JetBrains Mono',ui-monospace,monospace;color:var(--sx-purple)}
.sx-list h3{font-size:21px;margin-bottom:6px}.sx-list p{font-size:15px;color:var(--sx-muted);margin:0}
.sx-list a{text-decoration:none}.sx-list a:hover h3{color:var(--sx-purple)}
/* Références : paire, un projet client et un produit interne. */
.sx-refs{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--sx-line);border-radius:8px;overflow:hidden;background:#fff}
.sx-refs a{display:block;padding:34px 32px;text-decoration:none;border-right:1px solid var(--sx-line);transition:background .2s}
.sx-refs a:last-child{border-right:0}.sx-refs a:hover{background:var(--sx-soft)}
.sx-refs a>span{display:block;font:500 12px 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--sx-orange);margin-bottom:14px}
.sx-refs h3{margin-bottom:12px}.sx-refs p{font-size:15px;color:var(--sx-muted);margin:0 0 18px}
.sx-tags{display:flex;gap:8px;flex-wrap:wrap}.sx-tags span{font-size:12px;padding:5px 10px;border:1px solid var(--sx-line);border-radius:2px;color:#584669}
/* FAQ en détails, filet fin. */
.sx-faq details{border-top:1px solid var(--sx-line)}.sx-faq details:last-child{border-bottom:1px solid var(--sx-line)}
.sx-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;padding:20px 0;font:500 19px/1.4 'Source Serif 4',Georgia,serif}
.sx-faq summary::-webkit-details-marker{display:none}.sx-faq summary span{color:var(--sx-purple);transition:transform .25s}
.sx-faq details[open] summary span{transform:rotate(45deg)}.sx-faq details p{padding-bottom:22px;color:var(--sx-muted);font-size:16px;margin:0}
/* Contact et note finale. */
.sx-contact{background:var(--sx-soft);border-top:1px solid var(--sx-line);text-align:center;padding:88px 24px 96px}
.sx-contact h2{margin-bottom:22px}.sx-contact p{margin-inline:auto;color:var(--sx-muted)}
.sx-contact .sx-button{margin-top:10px}.sx-contact-meta{font-size:13px;margin-top:26px!important}
.sx-endnote{font-size:13px;color:var(--sx-muted);border-top:1px solid var(--sx-line);padding-top:18px}
/* Sélecteur de variantes, réservé à la comparaison. */
.sx-switch{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:90;display:flex;align-items:center;gap:4px;padding:6px 8px 6px 14px;background:#211a33;color:#d9d0e8;border-radius:999px;font:12px/1 Inter,system-ui,sans-serif;box-shadow:0 8px 30px #2118441f}
.sx-switch a{color:#fff;text-decoration:none;padding:8px 12px;border-radius:999px;font-weight:600}
.sx-switch a[aria-current=page]{background:var(--sx-purple)}.sx-switch span{margin-right:6px;opacity:.7}
@media(max-width:800px){.sx-col{padding-block:36px}.sx-col-open{padding-top:64px}.sx-refs{grid-template-columns:1fr}.sx-refs a{border-right:0;border-bottom:1px solid var(--sx-line)}.sx-refs a:last-child{border-bottom:0}.sx-hero{min-height:0;padding-block:56px 80px}.sx-bleed{padding-block:40px}}
@media(prefers-reduced-motion:reduce){.sx-in,.sx-reveal{opacity:1;transform:none;animation:none;transition:none}.sx-scroll-hint i{animation:none}.sx-button:hover{transform:none}}