/* Kit de mise en page repris de salys.fr et recoloré aux couleurs de Kerbone (08/11/2026), prête à poser sur n'importe quel site.
   Relevé dans le CSS réel de la landing, 8 novembre 2026. À charger avec salys-kit.js et lenis.min.js.
   Racine : <body class="sx">. Sans script ou en mouvement réduit, tout reste visible. */


:root {
  color-scheme: dark;
  --sx-noir: #07133A; --sx-carte: #0A1A4A; --sx-relief: #102662;
  --sx-orange: #003DD5; --sx-miel: #84A1EA; --sx-ivoire: #E7EDFC; --sx-or: #B9C8F2;
  --sx-orange-texte: #003DD5; --sx-beige: #E7EDFC; --sx-creme: #F5F8FF; --sx-encre: #07133A; --sx-blanc: #FFFFFF;
  --sx-texte: rgb(255 255 255 / .72); --sx-discret: rgb(255 255 255 / .58); --sx-filet: rgb(255 255 255 / .1);
  --sx-encre-2: rgb(7 19 58 / .68); --sx-filet-clair: rgb(7 19 58 / .12); --sx-vert: #22C55E;
  --sx-police: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sx-gouttiere: clamp(1rem, .5rem + 2.4vw, 2.5rem);

  --sx-or-metal: linear-gradient(180deg, #F2F5FE 0%, #B9C8F2 55%, #84A1EA 100%);
  --sx-or-vif: linear-gradient(100deg, #003DD5 0%, #5C86F0 20%, #A6BDF5 38%, #E7EDFC 50%, #A6BDF5 62%, #5C86F0 80%, #003DD5 100%);
  --sx-or-beige: linear-gradient(100deg, #003DD5 0%, #1C55E0 22%, #3A6DE8 40%, #5C86F0 50%, #3A6DE8 60%, #1C55E0 78%, #003DD5 100%);
  --sx-or-montant: linear-gradient(100deg, #F2F5FE 0%, #B9C8F2 45%, #003DD5 100%);
  --sx-brille: linear-gradient(100deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 0) 35%, rgb(255 255 255 / .95) 50%, rgb(255 255 255 / 0) 65%, rgb(255 255 255 / 0) 100%);
  --sx-pied: linear-gradient(100deg, #FFFFFF 0%, #E7EDFC 16%, #84A1EA 30%, #003DD5 42%, #003DD5 50%, #003DD5 58%, #84A1EA 70%, #E7EDFC 84%, #FFFFFF 100%);

  --sx-r-bouton: 12px; --sx-r-carte: 1.75rem; --sx-r-ilot: 2.25rem;
  --sx-disque: cubic-bezier(.19, 1, .22, 1); --sx-entree: cubic-bezier(.16, 1, .3, 1); --sx-glisse: cubic-bezier(.65, 0, .25, 1); --sx-doux: cubic-bezier(.45, .05, .55, .95); --sx-rebond: cubic-bezier(.34, 1.56, .64, 1);

  --sx-carte-fond: radial-gradient(55% 75% at 92% 100%, rgb(0 61 213 / .55), transparent 72%), radial-gradient(35% 45% at 70% 15%, rgb(0 61 213 / .12), transparent 70%), linear-gradient(160deg, #0E2159, #07133A 60%);
  --sx-carte-liseré: inset 0 0 0 1px rgb(255 255 255 / .08);
}

html { background: var(--sx-noir); }
.sx { margin: 0; background: var(--sx-noir); color: var(--sx-blanc); font-family: var(--sx-police); font-size: 16px; font-weight: 400; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.sx *, .sx *::before, .sx *::after { box-sizing: border-box; }
.sx :where(h1, h2, h3, h4, p, ul, figure) { margin: 0; padding: 0; font-weight: 400; }
.sx :where(ul) { list-style: none; }
.sx :where(b, strong) { font-weight: 400; }
.sx :focus-visible { outline: 2px solid var(--sx-miel); outline-offset: 3px; }
.sx-c { width: 100%; max-width: 76rem; margin-inline: auto; padding-left: max(var(--sx-gouttiere), env(safe-area-inset-left, 0px)); padding-right: max(var(--sx-gouttiere), env(safe-area-inset-right, 0px)); }
.sx-bloc { position: relative; padding-block: clamp(5rem, 3.5rem + 5vw, 9rem); }
.sx-nw { white-space: nowrap; }

/* Titres : un mot en or par écran, jamais de gras */
.sx-titre { letter-spacing: -.035em; text-wrap: balance; }
.sx-titre em, .sx-or { font-style: normal; background-image: var(--sx-brille), var(--sx-or-vif); background-size: 45% 100%, 200% 100%; background-repeat: no-repeat, repeat-x; background-position: -120% 50%, 0% 50%; -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .04em; padding-bottom: .08em; }
.sx-t1 { font-size: clamp(2.1rem, 1rem + 3vw, 3.5rem); line-height: 1.06; }
.sx-t2 { font-size: clamp(2rem, 1.1rem + 2.6vw, 3.4rem); line-height: 1.08; }
.sx-t3 { font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.3rem); line-height: 1.1; letter-spacing: -.03em; }
.sx-chapo { font-size: clamp(1rem, .95rem + .3vw, 1.15rem); line-height: 1.55; color: var(--sx-texte); max-width: 40rem; }
.sx-label { display: flex; align-items: center; gap: .9rem; font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sx-discret); }
.sx-label span { color: var(--sx-orange); letter-spacing: .05em; }
.sx-tete-section { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.25rem; }
.sx-clair { color: var(--sx-encre); }
.sx-clair .sx-titre em, .sx-clair .sx-or { background-image: var(--sx-brille), var(--sx-or-beige); }
.sx-clair .sx-chapo { color: var(--sx-encre-2); }
.sx-clair .sx-label { color: var(--sx-encre-2); }
.sx-clair .sx-label span { color: var(--sx-orange-texte); }
@media (prefers-reduced-motion: no-preference) {
  .sx-titre em, .sx-or { animation: sx-brille 7s var(--sx-doux) infinite; }
}
@keyframes sx-brille { 0% { background-position: -120% 50%, 0% 50%; } 45% { background-position: 220% 50%, 90% 50%; } 100% { background-position: 220% 50%, 200% 50%; } }

/* Logo */
.sx-mono { display: block; width: 2.1rem; height: 1.5rem; flex: none; background: currentColor; -webkit-mask: url("../img/kerbone-mark.png") no-repeat center / contain; mask: url("../img/kerbone-mark.png") no-repeat center / contain; }
.sx-logo { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; color: inherit; text-decoration: none; }
.sx-logo b { font-size: 1.3rem; font-weight: 500; letter-spacing: -.02em; }

/* En-tête sans fond : chaque morceau passe en sombre au-dessus du beige */
.sx-tete { position: fixed; z-index: 50; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: max(.85rem, env(safe-area-inset-top, 0px)) max(var(--sx-gouttiere), env(safe-area-inset-right, 0px)) .85rem max(var(--sx-gouttiere), env(safe-area-inset-left, 0px)); pointer-events: none; }
.sx-tete::before { content: ""; position: absolute; inset: 0 0 -2rem; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgb(7 19 58 / .72), rgb(7 19 58 / 0)); opacity: 0; transition: opacity 400ms ease; }
.sx-tete.defile::before { opacity: 1; }
.sx-tete:has(.sur-clair)::before { opacity: 0; }
.sx-tete > * { pointer-events: auto; transition: color 400ms ease; }
.sx-tete__marque { justify-self: start; color: var(--sx-blanc); }
.sx-tete__nav { display: flex; gap: .25rem; }
.sx-tete__nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; color: rgb(255 255 255 / .74); font-size: .9375rem; text-decoration: none; transition: color 300ms ease; }
.sx-tete__nav a:hover { color: var(--sx-blanc); }
.sx-tete__droite { justify-self: end; display: flex; align-items: center; gap: .75rem; }
.sx-tete .sx-btn { min-height: 46px; padding: 0 1.7rem 0 1.5rem; font-size: .8125rem; }
.sx-tete .sur-clair.sx-tete__marque { color: #07133A; }
.sx-tete .sur-clair.sx-tete__nav a { color: rgb(7 19 58 / .72); }
.sx-tete .sur-clair .sx-btn { color: #07133A; border-color: rgb(7 19 58 / .25); }
.sx-roule { display: inline-block; overflow: hidden; height: 1.6em; line-height: 1.6; vertical-align: middle; }
.sx-roule > span { display: block; transition: transform 650ms cubic-bezier(.7, 0, .2, 1); }
.sx-roule > span::after { content: attr(data-t); display: block; }
.sx-tete__nav a:hover .sx-roule > span { transform: translateY(-50%); }
@media (max-width: 860px) { .sx-tete { grid-template-columns: 1fr auto; } .sx-tete__nav { display: none; } }

/* Bouton : le disque orange part du centre */
.sx-btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 2.6rem; border: 1.5px solid rgb(255 255 255 / .28); border-radius: var(--sx-r-bouton); background: transparent; color: var(--sx-blanc); font: inherit; font-size: .9375rem; font-weight: 500; letter-spacing: -.005em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: border-color 600ms cubic-bezier(.23, 1, .32, 1), color 500ms ease, transform 200ms ease; }
.sx-btn:active { transform: scale(.96); }
.sx-btn__txt { position: relative; z-index: 1; transform: translateX(-.75rem); transition: transform 800ms ease-out; }
.sx-btn__g, .sx-btn__d { position: absolute; z-index: 2; top: 50%; width: 16px; height: 16px; translate: 0 -50%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 800ms var(--sx-rebond); }
.sx-btn__g { left: 1rem; transform: translateX(-3.5rem); }
.sx-btn__d { right: 1rem; }
.sx-btn__rond { position: absolute; z-index: 0; left: 50%; top: 50%; width: 380px; height: 380px; translate: -50% -50%; border-radius: 50%; background: var(--sx-orange); opacity: 0; transform: scale(.04); transition: transform 800ms var(--sx-disque), opacity 800ms var(--sx-disque); }
.sx-btn:hover, .sx-btn:focus-visible, .sx-btn.force { border-color: transparent; color: var(--sx-blanc); }
.sx-btn:hover .sx-btn__txt, .sx-btn:focus-visible .sx-btn__txt, .sx-btn.force .sx-btn__txt { transform: translateX(.75rem); }
.sx-btn:hover .sx-btn__g, .sx-btn:focus-visible .sx-btn__g, .sx-btn.force .sx-btn__g { transform: translateX(0); }
.sx-btn:hover .sx-btn__d, .sx-btn:focus-visible .sx-btn__d, .sx-btn.force .sx-btn__d { transform: translateX(3.5rem); }
.sx-btn:hover .sx-btn__rond, .sx-btn:focus-visible .sx-btn__rond, .sx-btn.force .sx-btn__rond { opacity: 1; transform: scale(1); }
.sx-btn--grand { min-height: 60px; padding-inline: 2.9rem; font-size: 1rem; }
.sx-clair .sx-btn { color: #07133A; border-color: rgb(7 19 58 / .25); }
.sx-clair .sx-btn:hover, .sx-clair .sx-btn.force { color: #FFFFFF; border-color: transparent; }
.sx-clair [data-fond="sombre"] .sx-btn { color: #FFFFFF; border-color: rgb(255 255 255 / .28); }

/* Lien qui file */
.sx-lien { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; color: var(--sx-blanc); font-size: .9375rem; text-decoration: none; }
.sx-lien svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 500ms var(--sx-rebond); }
.sx-lien:hover svg { transform: translateY(3px); }

/* Tuiles de verre et portraits */
.sx-tuile-verre { position: relative; display: grid; place-items: center; width: 3.3rem; height: 3.3rem; border-radius: 22.5%; background: linear-gradient(150deg, rgb(255 255 255 / .24) 0%, rgb(255 255 255 / .07) 45%, rgb(255 255 255 / .12) 100%); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); box-shadow: inset 0 1px 1px rgb(255 255 255 / .6), inset 0 -1px 1px rgb(255 255 255 / .14), inset 0 0 0 1px rgb(255 255 255 / .2), 0 12px 30px -12px rgb(0 0 0 / .75); color: #fff; }
.sx-tuile-verre::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(120% 70% at 25% 0%, rgb(255 255 255 / .38), rgb(255 255 255 / 0) 55%); pointer-events: none; }
.sx-tuile-verre img, .sx-tuile-verre svg { position: relative; z-index: 1; width: 58%; height: 58%; }
.sx-tuile-verre--pleine { overflow: hidden; background: none; }
.sx-tuile-verre--pleine img { width: 100%; height: 100%; border-radius: inherit; }
.sx-tuile-verre--orange { color: #FFFFFF; background: linear-gradient(160deg, rgb(0 61 213 / .55), rgb(0 61 213 / .15)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), inset 0 0 0 1px rgb(231 237 252 / .35), 0 0 40px rgb(0 61 213 / .55), 0 14px 34px -12px rgb(0 0 0 / .9); }
.sx-tuile-verre--orange .sx-mono { width: 56%; height: 40%; position: relative; z-index: 1; }
.sx-tuile-verre--trait svg { fill: none; stroke: #E7EDFC; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; width: 50%; height: 50%; }
.sx-av { position: relative; display: block; width: 3rem; height: 3rem; flex: none; border-radius: 50%; }
.sx-av > img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgb(7 19 58), 0 0 0 3.5px rgb(255 255 255 / .55), 0 14px 30px -12px rgb(0 0 0 / .9); }
.sx-av__pastille { position: absolute; left: 50%; top: -.9rem; translate: -50% 0; z-index: 3; width: 1.55rem; height: 1.55rem; border-radius: 26%; overflow: hidden; box-shadow: 0 3px 8px -2px rgb(0 0 0 / .6); }
.sx-av__pastille img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sx-ecran { display: block; width: 4.4rem; aspect-ratio: 16 / 10.5; border-radius: .45rem; object-fit: cover; object-position: top; box-shadow: 0 0 0 1.5px rgb(255 255 255 / .34), 0 14px 30px -12px rgb(0 0 0 / .9); background: #111; }

/* Preuve entre deux lauriers */
.sx-preuve { display: inline-flex; align-items: center; gap: .45rem; font-size: .9375rem; color: rgb(255 255 255 / .82); }
.sx-preuve span { display: inline-flex; align-items: baseline; gap: .4rem; white-space: nowrap; }
.sx-preuve b { font-size: 1.35rem; letter-spacing: -.02em; background: var(--sx-or-metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sx-laurier { width: 1.6rem; height: 2.2rem; flex: none; filter: drop-shadow(0 0 8px rgb(185 200 242 / .35)); }
.sx-laurier--d { transform: scaleX(-1); }

/* Premier écran */
.sx-hero { position: relative; isolation: isolate; overflow: clip; padding-top: clamp(6.25rem, 5rem + 1.6vw, 7.25rem); background: var(--sx-noir); }
.sx-hero__fond { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: radial-gradient(60% 50% at 85% 40%, rgb(0 61 213 / .5), transparent 70%), radial-gradient(40% 40% at 12% 20%, rgb(0 61 213 / .18), transparent 70%), linear-gradient(180deg, #140B06 0%, #07133A 100%); }
.sx-hero__fond i { position: absolute; border-radius: 50%; filter: blur(90px); }
.sx-hero__fond i:nth-child(1) { width: 40rem; height: 40rem; right: -10rem; top: 4rem; background: rgb(0 61 213 / .5); }
.sx-hero__fond i:nth-child(2) { width: 26rem; height: 26rem; right: 22%; top: 16rem; background: rgb(150 178 240 / .25); }
.sx-hero__fond i:nth-child(3) { width: 34rem; height: 34rem; left: -14rem; top: -10rem; background: rgb(0 61 213 / .2); }
@media (prefers-reduced-motion: no-preference) {
  .sx-hero__fond i:nth-child(1) { animation: sx-derive 18s ease-in-out infinite alternate; }
  .sx-hero__fond i:nth-child(2) { animation: sx-derive 23s ease-in-out -6s infinite alternate-reverse; }
  .sx-hero__fond i:nth-child(3) { animation: sx-derive 27s ease-in-out -3s infinite alternate; }
}
@keyframes sx-derive { to { transform: translate(-3rem, 1.5rem) scale(1.08); } }
.sx-hero__centre { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.15rem; }
.sx-hero__centre .sx-chapo { max-width: 44rem; }

/* Le flux vers l'arc : le workflow signature */
.sx-flux { position: relative; margin-top: clamp(1.25rem, .5rem + 2vw, 2.5rem); }
.sx-flux__boite { position: relative; width: min(100%, 76rem); aspect-ratio: 1200 / 250; margin-inline: auto; container-type: inline-size; }
.sx-flux__arc { position: absolute; left: 50%; top: 96.5%; width: max(260vw, 150rem); aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: var(--sx-noir); box-shadow: 0 -1px 0 0 rgb(231 237 252 / .95), 0 -6px 18px 0 rgb(132 161 234 / .55), 0 -30px 80px 0 rgb(0 61 213 / .5), 0 -90px 180px 20px rgb(0 61 213 / .2); }
.sx-flux__eclat { position: absolute; left: 50%; top: 96.5%; width: 34rem; max-width: 80vw; height: 6rem; translate: -50% -50%; background: radial-gradient(50% 50% at 50% 50%, rgb(231 237 252 / .6), rgb(0 61 213 / .28) 45%, transparent 75%); filter: blur(16px); pointer-events: none; }
.sx-flux__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sx-flux__trait { fill: none; stroke: rgb(255 255 255 / .22); stroke-width: 1.25; }
.sx-flux__trait--fin { stroke: rgb(132 161 234 / .34); stroke-width: 1; }
.sx-flux__vif { fill: none; stroke: #84A1EA; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .9; }
.sx-flux.flux-fin .sx-flux__vif { opacity: 0; transition: opacity .4s ease; }
.sx-flux__pt { position: absolute; z-index: 1; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); translate: calc(-50% + var(--rx, 0px)) calc(-50% + var(--ry, 0px)); transition: translate 700ms cubic-bezier(.23, 1, .32, 1); }
.sx-flux__pt--centre { z-index: 2; }
.sx-flux .sx-tuile-verre { width: clamp(2rem, 4.1cqi, 3rem); height: clamp(2rem, 4.1cqi, 3rem); }
.sx-flux .sx-pt-grand .sx-tuile-verre { width: clamp(2.3rem, 4.9cqi, 3.6rem); height: clamp(2.3rem, 4.9cqi, 3.6rem); }
.sx-flux .sx-flux__pt--centre .sx-tuile-verre { width: clamp(2.4rem, 4.6cqi, 3.4rem); height: clamp(2.4rem, 4.6cqi, 3.4rem); }
.sx-flux .sx-av { width: clamp(1.9rem, 3.8cqi, 2.8rem); height: clamp(1.9rem, 3.8cqi, 2.8rem); }
.sx-flux .sx-av__pastille { width: clamp(1.05rem, 2cqi, 1.45rem); height: clamp(1.05rem, 2cqi, 1.45rem); top: -.75rem; }
.sx-flux .sx-ecran { width: clamp(2.6rem, 6.4cqi, 4.6rem); }
.sx-flux__pt::after { content: ""; position: absolute; inset: -45%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgb(150 178 240 / .55), rgb(0 61 213 / .18) 55%, transparent 100%); filter: blur(6px); opacity: 0; pointer-events: none; }
.sx-flux__pt.touche::after { animation: sx-lueur 1.6s cubic-bezier(.25, .1, .25, 1); }
@keyframes sx-lueur { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
.sx-port { position: absolute; z-index: 3; top: 50%; width: 9px; height: 9px; translate: -50% -50%; border-radius: 50%; background: #0B1D52; box-shadow: 0 0 0 1.5px rgb(255 255 255 / .5); transition: background .25s ease, box-shadow .25s ease; }
.sx-port--e { left: 0; } .sx-port--s { left: 100%; }
.sx-flux__pt.tourne .sx-port--e, .sx-flux__pt.ok .sx-port { background: var(--sx-orange); box-shadow: 0 0 0 1.5px #84A1EA, 0 0 10px rgb(0 61 213 / .8); }
.sx-exec { position: absolute; inset: -5px; border-radius: 30%; opacity: 0; padding: 1.5px; background: conic-gradient(from 0deg, transparent 0 60%, #84A1EA 88%, #E7EDFC 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.sx-flux__pt[data-noeud^="p"] .sx-exec { border-radius: 50%; }
.sx-flux__pt.tourne .sx-exec { opacity: 1; animation: sx-tour .75s linear infinite; }
.sx-ok { position: absolute; right: -.3rem; bottom: -.3rem; z-index: 3; display: grid; place-items: center; width: 1rem; height: 1rem; border-radius: 50%; background: var(--sx-orange); opacity: 0; scale: .4; transition: opacity .3s ease, scale .4s var(--sx-rebond); box-shadow: 0 0 10px rgb(0 61 213 / .7); }
.sx-ok svg { width: .62rem; height: .62rem; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sx-flux__pt.ok .sx-ok { opacity: 1; scale: 1; }
.sx-flux.flux-fin .sx-ok { opacity: 0; }
.js-motion .sx-flux .sx-flux__trait[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js-motion .sx-flux .sx-flux__trait[pathLength].vu { stroke-dashoffset: 0; transition: stroke-dashoffset var(--td, .8s) cubic-bezier(.55, 0, .25, 1); }
.js-motion .sx-flux .sx-flux__pt { opacity: 0; scale: .72; transition: opacity 450ms ease, scale 650ms cubic-bezier(.2, .9, .3, 1.3), translate 700ms cubic-bezier(.23, 1, .32, 1); }
.js-motion .sx-flux .sx-flux__pt.vu { opacity: 1; scale: 1; }
.js-motion .sx-flux:not(.en-intro) :is(.sx-flux__trait[pathLength], .sx-flux__pt) { animation: sx-secours .6s ease 6s forwards; }
@keyframes sx-secours { to { opacity: 1; scale: 1; stroke-dashoffset: 0; } }
@media (max-width: 760px) { .sx-flux { padding-inline: .6rem; } .sx-flux__boite { aspect-ratio: 1200 / 700; } .sx-flux .sx-av { width: 1.85rem; height: 1.85rem; } .sx-flux__arc { top: 99%; } .sx-flux__eclat { top: 99%; } }

.sx-constat { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: clamp(1.5rem, 1rem + 1vw, 2rem); padding-bottom: clamp(4rem, 3rem + 4vw, 7rem); }
.sx-t-constat { font-size: clamp(1.45rem, 1rem + 1.1vw, 1.95rem); line-height: 1.16; }

/* Mots qui se relaient */
.sx-mots-avant { margin-top: 1.75rem; color: rgb(255 255 255 / .82); font-size: 1.0625rem; }
.sx-mots { display: grid; justify-items: center; margin-top: .25rem; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); letter-spacing: -.035em; line-height: 1.25; }
.sx-mots > span { grid-area: 1 / 1; opacity: 0; transform: translateY(.55em); filter: blur(6px); transition: opacity .55s ease, transform .75s var(--sx-entree), filter .55s ease; background: var(--sx-or-vif) 0 50% / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; }
.sx-mots > span.est-la { opacity: 1; transform: none; filter: none; }

/* Entrée au défilement : posée sur un élément déjà visible, jouée juste avant qu'il n'entre à l'écran */
.sx-entre { animation: sx-entre 1s var(--sx-entree) both; animation-delay: calc(var(--i, 0) * 110ms); }
@keyframes sx-entre { from { opacity: 0; transform: translateY(28px); filter: blur(6px); } }

/* Cartes qui s'empilent */
.sx-pile { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.sx-etape { position: sticky; top: 6rem; display: grid; grid-template-columns: .85fr 1.15fr; gap: 2rem; align-items: center; min-height: min(32rem, 72vh); margin-bottom: 18vh; padding: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); border-radius: var(--sx-r-carte); overflow: hidden; background: var(--sx-carte-fond); box-shadow: var(--sx-carte-liseré), 0 -30px 60px -30px rgb(0 0 0 / .95); }
.sx-etape:last-child { margin-bottom: 0; }
.sx-etape__texte { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1rem clamp(0rem, 1vw, 1rem); min-width: 0; }
.sx-etape__picto { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; margin-bottom: 1rem; border-radius: 28%; background: linear-gradient(160deg, rgb(255 255 255 / .1), rgb(255 255 255 / .02)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), inset 0 0 0 1px rgb(255 255 255 / .1); color: #84A1EA; }
.sx-etape__picto svg { width: 1.8rem; height: 1.8rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sx-etape__num { font-size: .875rem; color: var(--sx-orange); }
.sx-etape__titre { margin-top: .5rem; }
.sx-etape__ligne { margin-top: .9rem; max-width: 24rem; font-size: 1.0625rem; line-height: 1.5; color: var(--sx-texte); }
.sx-etape__visuel { position: relative; display: grid; place-items: center; min-height: 26rem; min-width: 0; }
@media (max-width: 820px) {
  .sx-etape { top: calc(4.6rem + var(--n, 0) * .55rem); grid-template-columns: minmax(0, 1fr); margin-bottom: 1.1rem; gap: .9rem; }
  .sx-etape:nth-child(2) { --n: 1; } .sx-etape:nth-child(3) { --n: 2; } .sx-etape:nth-child(4) { --n: 3; }
  .sx-etape__visuel { min-height: 14rem; }
}

/* Cartes */
.sx-carte { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; border-radius: var(--sx-r-carte); background: var(--sx-carte-fond); box-shadow: var(--sx-carte-liseré); }
.sx-carte::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / .06) 50%, transparent 65%); transform: translateX(-100%); transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
@media (hover: hover) { .sx-carte:hover::after { transform: translateX(100%); } }
@property --sx-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.sx-vedette::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--sx-angle), transparent 0 55%, rgb(185 200 242 / .9) 70%, #003DD5 80%, transparent 92%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
@media (prefers-reduced-motion: no-preference) { .sx-vedette::before { animation: sx-angle 7s linear infinite; } }
@keyframes sx-angle { to { --sx-angle: 360deg; } }
.sx-pastille { display: inline-flex; align-items: center; padding: .3rem .65rem; border-radius: 999px; font-size: .75rem; background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); color: rgb(255 255 255 / .82); white-space: nowrap; }
.sx-pastille--orange { background: rgb(0 61 213 / .25); box-shadow: inset 0 0 0 1px rgb(0 61 213 / .5); color: #E7EDFC; }
.sx-montant { font-size: clamp(3.2rem, 2.2rem + 3.4vw, 5.2rem); line-height: 1; letter-spacing: -.055em; background: var(--sx-or-montant); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.sx-puce { flex: none; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #84A1EA, #003DD5 70%); box-shadow: 0 0 0 4px rgb(0 61 213 / .14), 0 4px 10px -3px rgb(0 61 213 / .7); }
.sx-puce svg { width: .8rem; height: .8rem; fill: none; stroke: #FFFFFF; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Îlot beige, arrondi et posé sur le noir. Pour une section beige pleine largeur : fondu très long, à cheval sur les deux sections (--raccord, fin de accueil.css du thème salys.fr) */
.sx-ilot { position: relative; border-radius: var(--sx-r-ilot); background: var(--sx-beige); color: var(--sx-encre); padding: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) clamp(1.1rem, .5rem + 3vw, 4rem); }

/* Fenêtre qui grandit au défilement */
.sx-grandit { --e: 0; }
.sx-grandit__cadre { position: relative; overflow: hidden; transform-origin: 50% 0%; will-change: transform; transform: perspective(1600px) rotateX(calc((1 - var(--e)) * 16deg)) scale(calc(.7 + .3 * var(--e))) translateY(calc((1 - var(--e)) * 2.5rem)); border-radius: calc(1.25rem + (1 - var(--e)) * 1.75rem); box-shadow: 0 0 0 1px rgb(255 255 255 / calc(.06 + var(--e) * .06)), 0 calc(20px + var(--e) * 40px) calc(60px + var(--e) * 60px) -30px rgb(0 61 213 / calc(var(--e) * .55)); background: #0D0B0A; }
.sx-grandit__cadre { aspect-ratio: 16 / 10; }
.sx-grandit__cadre img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Radar */
.sx-radar { --s: min(25rem, 72vw); position: relative; width: var(--s); height: var(--s); }
.sx-radar__grille { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(rgb(255 255 255 / .08), rgb(255 255 255 / .08)) center / 1px 100% no-repeat, linear-gradient(rgb(255 255 255 / .08), rgb(255 255 255 / .08)) center / 100% 1px no-repeat, repeating-radial-gradient(circle, transparent 0 calc(var(--s) / 8 - 1px), rgb(255 255 255 / .11) calc(var(--s) / 8 - 1px) calc(var(--s) / 8)), radial-gradient(circle, rgb(0 61 213 / .08), transparent 70%); box-shadow: inset 0 0 0 1px rgb(231 237 252 / .22), 0 0 60px rgb(0 61 213 / .15); -webkit-mask: radial-gradient(circle, #000 69%, transparent 70.5%); mask: radial-gradient(circle, #000 69%, transparent 70.5%); }
.sx-radar__balayage { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg 250deg, rgb(0 61 213 / .05) 280deg, rgb(0 61 213 / .32) 345deg, rgb(231 237 252 / .85) 359.4deg, transparent 360deg); -webkit-mask: radial-gradient(circle, #000 69%, transparent 70%); mask: radial-gradient(circle, #000 69%, transparent 70%); }
.sx-radar__centre { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.sx-radar__pt { position: absolute; left: calc(50% + (var(--x) - 50) / 100 * var(--s)); top: calc(50% + (var(--y) - 50) / 100 * var(--s)); translate: -50% -50%; }
.sx-radar__pt .sx-av { width: 2.7rem; height: 2.7rem; }
.joue .sx-radar__balayage, .joue.sx-radar .sx-radar__balayage { animation: sx-tour 8s linear infinite; }
.joue .sx-radar__pt, .joue.sx-radar .sx-radar__pt { animation: sx-detecte 8s cubic-bezier(.25, .1, .25, 1) infinite both; animation-delay: calc(var(--d) - 8s); }
@keyframes sx-tour { to { transform: rotate(360deg); } }
@keyframes sx-detecte { 0% { opacity: 0; transform: scale(.88); filter: blur(3px); } 9% { opacity: 1; transform: scale(1); filter: blur(0); } 45% { opacity: .9; } 78%, 100% { opacity: 0; transform: scale(.96); filter: blur(2px); } }

/* Tuiles qui flottent et s'écartent */
.sx-flotte { translate: var(--rx, 0px) var(--ry, 0px); transition: translate 700ms cubic-bezier(.23, 1, .32, 1); }
@media (prefers-reduced-motion: no-preference) { .sx-flotte > * { animation: sx-flotte 6s ease-in-out infinite alternate; animation-delay: calc(var(--b, 0) * -1.3s); } }
@keyframes sx-flotte { from { transform: translateY(-4px); } to { transform: translateY(4px); } }

/* Carrousel continu */
.sx-defile { position: relative; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.sx-defile::-webkit-scrollbar { display: none; }
.sx-defile__piste { display: flex; gap: 1.1rem; width: max-content; padding: .5rem 1rem 1rem; }
.sx-defile.defile { overflow: hidden; }
.sx-defile.defile .sx-defile__piste { animation: sx-defile var(--duree, 60s) linear infinite; }
.sx-defile.defile:hover .sx-defile__piste { animation-play-state: paused; }
@keyframes sx-defile { to { transform: translateX(calc(-50% - .55rem)); } }

/* FAQ : s'ouvre au survol */
.sx-faq__item { border-top: 1px solid var(--sx-filet); }
.sx-faq__item:last-child { border-bottom: 1px solid var(--sx-filet); }
.sx-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 44px; padding: 1.2rem 0; cursor: pointer; list-style: none; font-size: 1.0625rem; transition: color 300ms ease; }
.sx-faq__item summary::-webkit-details-marker { display: none; }
.sx-faq__item summary i { position: relative; flex: none; width: 2.2rem; height: 2.2rem; border-radius: 10px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); transition: background-color 400ms ease; }
.sx-faq__item summary i::before, .sx-faq__item summary i::after { content: ""; position: absolute; left: 30%; right: 30%; top: 50%; height: 1.5px; background: var(--sx-orange); transition: transform 500ms cubic-bezier(.23, 1, .32, 1); }
.sx-faq__item summary i::after { transform: rotate(90deg); }
.sx-faq__item[open] summary i { background: rgb(0 61 213 / .14); }
.sx-faq__item[open] summary i::after { transform: rotate(0); }
.sx-faq__item::details-content { block-size: 0; overflow: hidden; opacity: 0; transition: block-size 700ms cubic-bezier(.23, 1, .32, 1), opacity 500ms ease, content-visibility 700ms allow-discrete; }
.sx-faq__item[open]::details-content { block-size: auto; opacity: 1; }
.sx-faq__rep { padding-bottom: 1.25rem; max-width: 44rem; color: var(--sx-texte); line-height: 1.6; }
.sx-clair .sx-faq__item { border-color: var(--sx-filet-clair); }
.sx-clair .sx-faq__item summary i { box-shadow: inset 0 0 0 1px var(--sx-filet-clair); }
.sx-clair .sx-faq__rep { color: var(--sx-encre-2); }

/* Champs et sélecteurs */
.sx-champ { width: 100%; min-height: 48px; padding: 0 .95rem; border: 0; border-radius: var(--sx-r-bouton); background: rgb(255 255 255 / .06); color: #fff; font: inherit; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); transition: box-shadow .3s ease; }
.sx-champ::placeholder { color: rgb(255 255 255 / .55); }
.sx-champ:focus { outline: 0; box-shadow: inset 0 0 0 1.5px var(--sx-orange), 0 0 0 4px rgb(0 61 213 / .18); }
.sx-seg { display: inline-flex; flex-wrap: wrap; gap: .2rem; padding: .25rem; border-radius: 999px; background: rgb(255 255 255 / .07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); }
.sx-seg button { min-height: 42px; padding: 0 1.1rem; border: 0; border-radius: 999px; background: none; color: rgb(255 255 255 / .74); font: inherit; font-size: .9375rem; cursor: pointer; transition: background .3s ease, color .3s ease; }
.sx-seg button[aria-pressed="true"] { background: var(--sx-orange); color: #FFFFFF; }

/* Ordinateur en 3D */
.sx3d { --w: min(46rem, 76vw); position: relative; width: var(--w); height: calc(var(--w) * .68); perspective: calc(var(--w) * 2.1); perspective-origin: 50% 30%; margin-bottom: calc(var(--w) * .16); margin-inline: auto; }
.sx3d__halo { position: absolute; left: 50%; top: 58%; width: 130%; height: 120%; translate: -50% -50%; background: radial-gradient(closest-side, rgb(0 61 213 / .42), transparent); }
.sx3d__scene { --a: 8deg; --rx: -14deg; --ry: -6deg; --ty: 4%; position: absolute; inset: 0; transform-style: preserve-3d; transform: translateY(var(--ty)) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 1.6s var(--sx-entree); }
.sx3d__base { position: absolute; left: 0; top: 62%; width: 100%; height: calc(var(--w) * .62); transform-origin: top; transform: rotateX(90deg); transform-style: preserve-3d; border-radius: 0 0 1.4rem 1.4rem; background: linear-gradient(180deg, #22356E, #1A2B27); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
.sx3d__touches { position: absolute; left: 7%; right: 7%; top: 8%; height: 50%; border-radius: .5rem; background: repeating-linear-gradient(90deg, #07133A 0 calc(var(--w) * .058), transparent 0 calc(var(--w) * .0645)), repeating-linear-gradient(180deg, transparent 0 calc(var(--w) * .058), #1A2B27 0 calc(var(--w) * .0645)); }
.sx3d__pave { position: absolute; left: 34%; right: 34%; top: 63%; height: 30%; border-radius: .7rem; background: linear-gradient(180deg, #2C4070, #22356E); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09); }
.sx3d__capot { position: absolute; left: 0; bottom: 38%; width: 100%; height: calc(var(--w) * .625); transform-origin: bottom; transform: rotateX(var(--a)); padding: calc(var(--w) * .016); border-radius: 1.2rem 1.2rem .3rem .3rem; background: #07133A; box-shadow: inset 0 0 0 1.5px #3A3530; backface-visibility: hidden; transition: transform 1.6s var(--sx-entree); }
.sx3d__ecran { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: .55rem; background: #07133A; }
.sx3d__ecran img { display: block; width: 100%; height: auto; }
.sx3d__reflet { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgb(255 255 255 / .12) 0, rgb(255 255 255 / .03) 26%, transparent 42%); }
.js-motion [data-sx-3d]:not(.ouvert) .sx3d__scene { --a: -90deg; --rx: -28deg; --ry: 14deg; --ty: 12%; }
@media (prefers-reduced-motion: no-preference) { [data-sx-3d].ouvert .sx3d__ecran img { animation: sx-3d-def 18s cubic-bezier(.45, 0, .55, 1) .8s infinite alternate; } }
@keyframes sx-3d-def { to { transform: translateY(calc(-100% + var(--w) * .59)); } }

/* Encart final */
.sx-encart { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 1.1fr .9fr; align-items: stretch; min-height: 30rem; border-radius: var(--sx-r-carte); background: radial-gradient(70% 90% at 100% 100%, rgb(0 61 213 / .75), transparent 72%), linear-gradient(120deg, #070605, #1A120E); box-shadow: var(--sx-carte-liseré); }
.sx-encart__texte { align-self: center; display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; padding: clamp(2rem, 1rem + 3vw, 3.75rem); min-width: 0; }
.sx-encart__duo { display: flex; justify-content: center; align-items: flex-end; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%); mask-image: linear-gradient(90deg, transparent 0, #000 16%); }
.sx-encart__duo img { display: block; width: 52%; height: auto; }
.sx-encart__duo img + img { margin-left: -12%; }
@media (max-width: 820px) { .sx-encart { grid-template-columns: minmax(0, 1fr); } .sx-encart__duo { align-items: flex-start; height: 11.75rem; overflow: hidden; -webkit-mask-image: none; mask-image: none; padding-top: .6rem; } .sx-encart__duo img { width: 52%; } }

/* Pied : le mot géant, rogné */
.sx-pied { position: relative; overflow: clip; padding-top: clamp(2rem, 4vw, 3.5rem); }
.sx-pied__ligne { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 1.5rem; border-top: 1px solid rgb(255 255 255 / .08); color: var(--sx-discret); font-size: .875rem; }
.sx-pied__mot { display: flex; justify-content: center; gap: .02em; margin-top: clamp(1rem, 3vw, 2.5rem); margin-bottom: -.2em; font-size: min(26vw, 30rem); font-weight: 800; line-height: .78; letter-spacing: -.045em; user-select: none; }
.sx-pied__mot span { display: block; padding: 0 .02em; line-height: 1; background: var(--sx-pied) 0 0 / 200% 100% repeat-x; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
@media (prefers-reduced-motion: no-preference) {
  .sx-pied__mot span { animation: sx-glisse 16s linear infinite; }
  @supports (animation-timeline: view()) {
    .sx-pied__mot span { animation: sx-monte linear both, sx-glisse 16s linear infinite; animation-timeline: view(), auto; animation-range: entry calc(var(--i) * 6%) entry calc(70% + var(--i) * 6%), normal; }
  }
}
@keyframes sx-glisse { from { background-position: 0% 0; } to { background-position: 200% 0; } }
@keyframes sx-monte { from { transform: translateY(55%); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .sx *, .sx *::before, .sx *::after { animation: none !important; transition-duration: .01ms !important; }
  .sx-mots > span:not(.est-la) { display: none; }
  .sx-radar__pt { opacity: 1; }
}