/* XenSupport — WOW FX 2026 : effets interactifs « fou furieux ».
   Chargé après styles.css. Tout est gated : la classe html.wow-fx n'est posée
   par wow-fx.js QUE sur pointeur fin (souris) sans prefers-reduced-motion.
   → tactile et reduced-motion : aucun de ces effets (zéro jank, zéro bug).

   Stacking étudié pour ne JAMAIS couvrir le texte :
   - .hs-pillar  : contenu déjà en z-index:1 (.hs-pillar > *) → spotlight ::after z-index:0
   - .hs-pwr-card: isolation:isolate + overflow:hidden → spotlight ::after z-index:-1
     (même pattern que le .hs-pwr-glow décoratif existant) */

/* ── Cartes : transition douce (tilt qui glisse + retour à plat) ───────────── */
html.wow-fx .hs-pillar,
html.wow-fx .hs-pwr-card {
    transition:
        transform 0.13s ease-out,
        border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    transform-style: preserve-3d;
}

/* ── Spotlight : halo radial qui suit le curseur dans la carte ─────────────── */
html.wow-fx .hs-pillar::after,
html.wow-fx .hs-pwr-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
    background: radial-gradient(circle at var(--wx, 50%) var(--wy, 50%),
        rgba(255, 138, 43, 0.20), transparent 46%);
}
html.wow-fx .hs-pillar::after  { z-index: 0; }
html.wow-fx .hs-pwr-card::after { z-index: -1; }
html.wow-fx .hs-pillar.wow-active::after,
html.wow-fx .hs-pwr-card.wow-active::after { opacity: 1; }

/* ── Boutons magnétiques ───────────────────────────────────────────────────── */
html.wow-fx .wow-mag {
    transition: transform 0.2s ease-out;
    will-change: transform;
}

/* ── Glow curseur sur la carte CTA finale (section sombre) ─────────────────── */
html.wow-fx .hs-final-cta-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;                 /* .hs-final-cta-body est en z-index:1 → contenu au-dessus */
    opacity: 0;
    transition: opacity 0.4s ease;
    background: radial-gradient(circle at var(--cx, 50%) var(--cy, 50%),
        rgba(255, 138, 43, 0.16), transparent 42%);
}
html.wow-fx .hs-final-cta-card.wow-active::after { opacity: 1; }

/* ── Bordure conique animée sur les cartes premium (réutilise le pattern beam) ─
   .wow-ring est un élément injecté → masque = ring 1.4px sur le bord uniquement,
   ne recouvre jamais le texte (qui est loin du bord via le padding). */
@property --wow-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
html.wow-fx .hs-pwr-card .wow-ring {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.4px;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.45s ease;
    background: conic-gradient(from var(--wow-a),
        transparent 0 62%,
        rgba(255, 122, 24, 0.95) 78%,
        rgba(255, 61, 129, 0.95) 88%,
        transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}
html.wow-fx .hs-pwr-card.wow-active .wow-ring {
    opacity: 1;
    animation: wow-ring-spin 4.5s linear infinite;
}
@keyframes wow-ring-spin { to { --wow-a: 360deg; } }

/* La barre de progression de scroll réutilise l'élément natif .scroll-progress
   du layout (pilotée par wow-fx.js initProgress) — pas de doublon ici. */

/* ── Garde-fou reduced-motion (au cas où la classe serait posée) ───────────── */
@media (prefers-reduced-motion: reduce) {
    html.wow-fx .hs-pillar,
    html.wow-fx .hs-pwr-card {
        transition: none;
        transform: none !important;
    }
    html.wow-fx .hs-pillar::after,
    html.wow-fx .hs-pwr-card::after,
    html.wow-fx .hs-final-cta-card::after,
    html.wow-fx .hs-pwr-card .wow-ring { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Fil « journey » qui se DESSINE au scroll (home, desktop large).
   Un rail vertical fixe dans la gouttière gauche : une ligne lumineuse se remplit
   de haut en bas selon la progression de lecture (scaleY GPU), avec une tête
   brillante qui descend et des nœuds (1 par section) qui s'allument au passage.
   Créé par wow-fx.js initJourney(). Masqué < 1240px et en reduced-motion.
   ════════════════════════════════════════════════════════════════════════════ */
/* top piloté en JS = bas de la navbar (le fil démarre SOUS la nav, jamais dedans/sur le bandeau).
   64px = simple fallback avant le 1er calcul. */
.xs-journey { position: fixed; left: 30px; top: 64px; bottom: 0; width: 3px; z-index: 30; pointer-events: none; --xs-vel: 0; }
.xs-journey-track {
    position: absolute; inset: 0; border-radius: 3px;
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.11) 50%, rgba(255,255,255,.03));
}
/* Corps du câble : hauteur pilotée par JS (= progression de lecture) + flux d'énergie qui circule. */
.xs-journey-fill {
    position: absolute; left: 0; right: 0; top: 0; height: 0; border-radius: 3px; overflow: hidden;
    background: linear-gradient(180deg, #ffd07a, #ff7a18 28%, #ff3d81 64%, #8b50ff);
    box-shadow: 0 0 9px rgba(255,122,24,.55), 0 0 20px rgba(255,61,129,.32);
    will-change: height;
}
.xs-journey-fill::after {
    content: ''; position: absolute; inset: -4px;
    background: repeating-linear-gradient(180deg, transparent 0 16px, rgba(255,255,255,.6) 16px 19px, transparent 19px 34px);
    mix-blend-mode: screen; opacity: .65; animation: xsFlow 1.05s linear infinite;
}
@keyframes xsFlow { from { transform: translateY(-34px); } to { transform: translateY(0); } }

/* Tête « comète » : cœur incandescent + halo pulsant + traînée réactive à la vitesse + braises. */
.xs-journey-head {
    position: absolute; left: 50%; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px;
    border-radius: 50%; background: radial-gradient(circle, #fff 0 28%, #ffdaa8 52%, rgba(255,138,43,0) 76%);
    filter: drop-shadow(0 0 9px rgba(255,170,80,.95)); will-change: top;
    animation: xsHeadPulse 1.6s ease-in-out infinite;
}
.xs-journey-head::before {
    content: ''; position: absolute; left: 50%; top: 50%; width: 48px; height: 48px;
    transform: translate(-50%, -50%); border-radius: 50%;
    background: radial-gradient(circle, rgba(255,150,45,.5), rgba(255,60,130,.18) 45%, transparent 70%);
    animation: xsHalo 1.6s ease-in-out infinite;
}
.xs-journey-head::after {
    content: ''; position: absolute; left: 50%; bottom: 50%; width: 5px;
    height: calc(64px + var(--xs-vel, 0) * 150px); transform: translateX(-50%);
    border-radius: 3px; background: linear-gradient(180deg, transparent, rgba(255,150,60,.6));
    filter: blur(2px); transition: height .12s ease-out;
}
.xs-journey-spark {
    position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px;
    border-radius: 50%; background: #ffd6a0; box-shadow: 0 0 6px rgba(255,170,80,.9);
    animation: xsSpark 1.9s ease-out infinite;
}
@keyframes xsSpark {
    0% { opacity: 0; transform: translate(0,0) scale(.6); }
    18% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--dx, 4px), -36px) scale(.2); }
}
@keyframes xsHeadPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.16); } }
@keyframes xsHalo { 0%,100% { opacity: .5; transform: translate(-50%,-50%) scale(.82); } 50% { opacity: .95; transform: translate(-50%,-50%) scale(1.18); } }

/* Nœuds (1 par section) : checkpoint qui s'allume + onde de choc au passage de la comète. */
.xs-journey-node {
    position: absolute; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
    background: rgba(255,255,255,.10); border: 1.5px solid rgba(255,255,255,.30);
    transition: background .4s ease, border-color .4s ease, box-shadow .4s ease, transform .4s cubic-bezier(.2,.9,.3,1.5);
}
.xs-journey-node.is-lit {
    background: radial-gradient(circle, #fff 0 22%, #ff9a4d 58%, #ff6a2b); border-color: transparent;
    transform: scale(1.5); box-shadow: 0 0 10px 2px rgba(255,122,24,.75), 0 0 22px 5px rgba(255,61,129,.4);
}
.xs-journey-node::after {
    content: ''; position: absolute; inset: -3px; border-radius: 50%;
    border: 2px solid rgba(255,140,50,.85); opacity: 0; transform: scale(.6); pointer-events: none;
}
.xs-journey-node.xs-pop::after { animation: xsRipple .72s ease-out; }
@keyframes xsRipple { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(3.4); } }

/* Jalons interactifs : clic = scroll fluide vers la section. Zone de clic élargie (hit invisible). */
.xs-journey-node { pointer-events: auto; cursor: pointer; }
.xs-journey-hit { position: absolute; inset: -10px; border-radius: 50%; pointer-events: auto; }
/* Le nom du jalon surgit (au survol ET ~1.6 s quand la comète l'atteint) → le fil raconte le parcours. */
.xs-journey-tip {
    position: absolute; left: 18px; top: 50%; transform: translateY(-50%) translateX(-7px);
    white-space: nowrap; padding: 5px 11px; border-radius: 9px;
    background: rgba(13,15,23,.92); color: #f6dcbb; font-size: 12px; font-weight: 600; letter-spacing: .01em;
    border: 1px solid rgba(255,140,60,.38); box-shadow: 0 8px 22px rgba(0,0,0,.4);
    opacity: 0; pointer-events: none; transition: opacity .32s ease, transform .32s cubic-bezier(.2,.9,.3,1.3); z-index: 2;
}
.xs-journey-node:hover .xs-journey-tip,
.xs-journey-node.xs-tip-show .xs-journey-tip { opacity: 1; transform: translateY(-50%) translateX(0); }

[data-theme="light"] .xs-journey-track, .theme-light .xs-journey-track { background: linear-gradient(180deg, rgba(15,23,42,.05), rgba(15,23,42,.13) 50%, rgba(15,23,42,.05)); }
/* Nœuds NON allumés en thème clair (on ne touche pas .is-lit, qui doit flamboyer dans les deux thèmes). */
[data-theme="light"] .xs-journey-node:not(.is-lit), .theme-light .xs-journey-node:not(.is-lit) { background: rgba(15,23,42,.10); border-color: rgba(15,23,42,.20); }
[data-theme="light"] .xs-journey-tip, .theme-light .xs-journey-tip {
    background: rgba(255,255,255,.96); color: #b4480f; border-color: rgba(255,140,60,.45); box-shadow: 0 10px 24px rgba(15,23,42,.16);
}
@media (max-width: 1240px) { .xs-journey { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .xs-journey { display: none !important; } }

/* ── Bande de stats (compteurs animés [data-count]) ────────────────────────── */
.hs-stats { padding: 30px 0; }
.hs-stats-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
    max-width: 940px; margin: 0 auto; padding: 28px 24px; border-radius: 20px;
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
    box-shadow: 0 22px 60px -34px rgba(15, 23, 42, 0.28);
}
.hs-stat { position: relative; text-align: center; }
.hs-stat + .hs-stat::before {
    content: ""; position: absolute; left: -9px; top: 50%; transform: translateY(-50%);
    width: 1px; height: 46px; background: var(--border, rgba(15, 23, 42, 0.10));
}
.hs-stat-num {
    display: block; font-size: clamp(30px, 4vw, 46px); font-weight: 800; line-height: 1;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, #ff7a18, #ff3d81);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hs-stat-label {
    display: block; margin-top: 9px; font-size: 12.5px; font-weight: 600;
    letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted, #52525b);
}
@media (max-width: 720px) {
    .hs-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; padding: 24px 16px; }
    .hs-stat + .hs-stat::before { display: none; }
}

/* ── Scroll horizontal des add-ons ─────────────────────────────────────────── */
.hs-hscroll { position: relative; padding: 40px 0; }
.hs-hscroll-head { text-align: center; margin-bottom: 22px; }
.hs-hscroll-head h2 { font-size: clamp(26px, 4vw, 42px); margin: 6px 0 0; }
.hs-hscroll-head em { font-style: normal; background: linear-gradient(120deg, #ff7a18, #ff3d81); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* base (mobile / tablette / reduced-motion) : carousel natif tactile */
.hs-hscroll-viewport { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.hs-hscroll-viewport::-webkit-scrollbar { height: 0; }
.hs-hscroll-track { display: flex; gap: 18px; padding: 6px max(16px, 4vw) 18px; width: max-content; }
.hs-hcard { flex: 0 0 82vw; max-width: 320px; scroll-snap-align: center; }
@media (min-width: 620px) { .hs-hcard { flex-basis: 320px; } }
/* desktop : scrub vertical→latéral (sticky) — désactivé en reduced-motion */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
    .hs-hscroll { height: 300vh; padding: 0; }
    .hs-hscroll-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 30px; }
    .hs-hscroll-head { margin: 0; }
    .hs-hscroll-viewport { overflow: visible; }
    .hs-hscroll-track { gap: 24px; padding: 0 9vw; will-change: transform; }
    .hs-hcard { flex: 0 0 360px; max-width: none; }
}
.hs-hcard-link {
    display: flex; flex-direction: column; height: 100%;
    background: var(--surface, #fff); border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
    border-radius: 18px; overflow: hidden; text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.hs-hcard-link:hover { transform: translateY(-5px); border-color: var(--brand, #ff7a18); box-shadow: 0 26px 54px -30px rgba(255, 122, 24, 0.45); }
.hs-hcard-cover { position: relative; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; overflow: hidden;
    background: radial-gradient(120% 100% at 18% 0%, rgba(255, 122, 24, 0.14), transparent 56%), linear-gradient(135deg, #24242c, #15151a); }
.hs-hcard-cover img { width: 100%; height: 100%; object-fit: cover; }
.hs-hcard-initials { font-size: 32px; font-weight: 800; letter-spacing: 0.06em; color: #ff9a4d; text-shadow: 0 2px 16px rgba(255, 122, 24, 0.3); }
.hs-hcard-body { display: flex; flex-direction: column; gap: 7px; padding: 16px 18px 18px; flex: 1; }
.hs-hcard-name { margin: 0; font-size: 17px; font-weight: 700; color: var(--text, #09090b); }
.hs-hcard-desc { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-muted, #52525b); flex: 1;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hs-hcard-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.hs-hcard-price { font-size: 16px; font-weight: 800; color: var(--brand, #ff7a18); }
.hs-hcard-price--free { color: #16a34a; }
.hs-hcard-cta { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand, #ff7a18); color: #fff; transition: transform 0.25s ease; }
.hs-hcard-cta svg { width: 15px; height: 15px; }
.hs-hcard-link:hover .hs-hcard-cta { transform: translateX(3px); }

/* ── « How it works » : trait qui se dessine + nœuds séquentiels (injecté JS) ── */
.hiw-rail { position: relative; height: 2px; max-width: 78%; margin: 6px auto 34px; }
.hiw-rail-track { position: absolute; inset: 0; border-radius: 2px; background: var(--border, rgba(15, 23, 42, 0.12)); }
.hiw-rail-fill {
    position: absolute; left: 0; top: 0; height: 100%; width: 100%; border-radius: 2px;
    transform: scaleX(0); transform-origin: left center; will-change: transform;
    background: linear-gradient(90deg, #ff7a18, #ff3d81 55%, #8b50ff);
    box-shadow: 0 0 10px rgba(255, 122, 24, 0.5);
}
.hiw-rail-node {
    position: absolute; top: 50%; width: 13px; height: 13px; margin: -7px 0 0 -7px;
    border-radius: 50%; background: var(--surface, #fff); border: 2px solid var(--border, rgba(15, 23, 42, 0.18));
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.hiw-rail-node.is-on { background: #ff9a4d; border-color: transparent; box-shadow: 0 0 13px 3px rgba(255, 122, 24, 0.6); transform: scale(1.25); }
@media (max-width: 760px) { .hiw-rail { display: none; } }

/* ── Réseau line-art qui se DESSINE à l'apparition (CSS one-shot, 0 coût scroll) ─ */
.hs-network { padding: 64px 0; }
.hs-network-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.hs-network-copy h2 { font-size: clamp(26px, 4vw, 40px); margin: 8px 0 14px; }
.hs-network-copy h2 em { font-style: normal; background: linear-gradient(120deg, #ff7a18, #ff3d81); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hs-network-copy p { color: var(--text-muted, #52525b); max-width: 46ch; line-height: 1.6; }
.hs-network-viz { display: flex; justify-content: center; }
.xs-netdraw { width: 100%; max-width: 520px; height: auto; overflow: visible; }
.xs-netdraw .line { fill: none; stroke: url(#xsNetGrad); stroke-width: 2.5; stroke-linecap: round; }
.xs-netdraw .sat { fill: var(--surface, #fff); stroke: #ff9a4d; stroke-width: 2.5; }
.xs-netdraw .sat-dot { fill: #ff9a4d; }
.xs-netdraw .hub-box { fill: url(#xsHubGrad); filter: drop-shadow(0 8px 22px rgba(255, 122, 24, 0.45)); }
.xs-netdraw .hub-x { fill: #fff; font: 800 28px/1 system-ui, -apple-system, 'Segoe UI', sans-serif; }

/* Gate self-healing : caché/animé UNIQUEMENT si le moteur reveal tourne
   (html.xs-reveal). Sinon (no-JS / reduced-motion) → tout reste visible. */
html.xs-reveal .xs-netdraw .line { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.xs-reveal .xs-netdraw .node,
html.xs-reveal .xs-netdraw .hub { opacity: 0; transform: scale(0.4); transform-origin: center; transform-box: fill-box; }
html.xs-reveal [data-animate].xs-in .xs-netdraw .hub { animation: xsNetPop 0.55s cubic-bezier(0.34, 1.45, 0.6, 1) 0.05s forwards; }
html.xs-reveal [data-animate].xs-in .xs-netdraw .line { animation: xsNetDraw 1s cubic-bezier(0.6, 0, 0.2, 1) forwards; }
html.xs-reveal [data-animate].xs-in .xs-netdraw .line:nth-of-type(1) { animation-delay: 0.30s; }
html.xs-reveal [data-animate].xs-in .xs-netdraw .line:nth-of-type(2) { animation-delay: 0.40s; }
html.xs-reveal [data-animate].xs-in .xs-netdraw .line:nth-of-type(3) { animation-delay: 0.50s; }
html.xs-reveal [data-animate].xs-in .xs-netdraw .line:nth-of-type(4) { animation-delay: 0.60s; }
html.xs-reveal [data-animate].xs-in .xs-netdraw .line:nth-of-type(5) { animation-delay: 0.70s; }
html.xs-reveal [data-animate].xs-in .xs-netdraw .line:nth-of-type(6) { animation-delay: 0.80s; }
html.xs-reveal [data-animate].xs-in .xs-netdraw .node { animation: xsNetPop 0.5s cubic-bezier(0.34, 1.45, 0.6, 1) 1s forwards; }
html.xs-reveal [data-animate].xs-in .xs-netdraw .node:nth-of-type(2) { animation-delay: 1.06s; }
html.xs-reveal [data-animate].xs-in .xs-netdraw .node:nth-of-type(3) { animation-delay: 1.12s; }
html.xs-reveal [data-animate].xs-in .xs-netdraw .node:nth-of-type(4) { animation-delay: 1.18s; }
html.xs-reveal [data-animate].xs-in .xs-netdraw .node:nth-of-type(5) { animation-delay: 1.24s; }
html.xs-reveal [data-animate].xs-in .xs-netdraw .node:nth-of-type(6) { animation-delay: 1.30s; }
@keyframes xsNetDraw { to { stroke-dashoffset: 0; } }
@keyframes xsNetPop { to { opacity: 1; transform: scale(1); } }
@media (max-width: 860px) {
    .hs-network-inner { grid-template-columns: 1fr; gap: 26px; }
    .xs-netdraw { max-width: 400px; }
}