/* Nexia — « plan de flux ».
   Couche visuelle partagée : chargée après les styles de chaque page, elle ne touche ni au contenu ni au référencement.
   Le fil (spine), les nœuds de section, les schémas animés et les réactions au curseur sont pilotés par flux.js. */

body.fx{
  --fx-bg:#05090c;--fx-bg2:#0a1217;--fx-panel:#0d181e;--fx-panel2:#11222a;
  --fx-line:rgba(120,190,205,.16);--fx-line2:rgba(120,190,205,.30);
  --fx-ink:#eef6f7;--fx-soft:#b9cbd0;--fx-mute:#7f969d;
  --fx-sig:#5ee6f5;--fx-sig2:#b5f6ff;--fx-amb:#ffb547;--fx-ok:#7cf0b8;--fx-bad:#ff8b7e;
  --fx-mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  --fx-head:'Space Grotesk',system-ui,sans-serif;
  --fx-ease:cubic-bezier(.16,1,.3,1);
  --fx-x:clamp(10px,2.1vw,34px);
  --bg:var(--fx-bg);--dark:var(--fx-bg);--accent:var(--fx-sig);--link:var(--fx-sig);
  background:var(--fx-bg);color:var(--fx-ink);
}
body.fx::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1200px 700px at 85% -10%,rgba(94,230,245,.10),transparent 60%),
    radial-gradient(900px 600px at -10% 40%,rgba(255,181,71,.05),transparent 60%),
    radial-gradient(rgba(140,210,225,.13) 1px,transparent 1.4px) 0 0/26px 26px;
  -webkit-mask:linear-gradient(#000,#000 70%,rgba(0,0,0,.55));mask:linear-gradient(#000,#000 70%,rgba(0,0,0,.55));
}
body.fx ::selection{background:var(--fx-sig);color:#03161b}

/* ---------- surfaces : on laisse respirer la grille de points ---------- */
body.fx .hero,body.fx .band,body.fx .band.on-dark,body.fx .band.alt,body.fx .contact,body.fx main,body.fx .end,
body.fx section:has(>.container.stack),body.fx .ex-hero,body.fx .article,body.fx .nx-content{background:transparent!important}
body.fx .band.alt,body.fx .end,body.fx section:has(>.container.stack){
  background:linear-gradient(180deg,transparent,rgba(13,24,30,.72) 14%,rgba(13,24,30,.72) 86%,transparent)!important}

/* ---------- en-tête : verre sombre + barre de progression en circuit ---------- */
body.fx header.site{
  --ink:var(--fx-ink);--ink-soft:var(--fx-soft);--bg:transparent;--link:var(--fx-sig);
  background:rgba(5,9,12,.62)!important;border-bottom:1px solid var(--fx-line)!important;
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  box-shadow:none!important;transition:background .4s,border-color .4s}
body.fx header.site.fx-scrolled{background:rgba(5,9,12,.86)!important}
body.fx header.site .brand .n{color:var(--fx-ink)!important}
body.fx header.site .brand .a{color:var(--fx-sig)!important}
body.fx header.site .brand-logo{border-radius:6px;background:#fff;padding:2px;box-shadow:0 0 0 1px var(--fx-line2),0 0 18px rgba(94,230,245,.25)}
body.fx nav.menu a{color:var(--fx-soft)!important;position:relative;transition:color .25s}
body.fx nav.menu a:hover,body.fx nav.menu a.active,body.fx nav.menu a[aria-current]{color:var(--fx-ink)!important}
body.fx nav.menu a::after{content:"";position:absolute;left:50%;bottom:-6px;width:5px;height:5px;border-radius:50%;background:var(--fx-sig);
  transform:translateX(-50%) scale(0);box-shadow:0 0 10px var(--fx-sig);transition:transform .35s var(--fx-ease)}
body.fx nav.menu a:hover::after,body.fx nav.menu a.active::after,body.fx nav.menu a[aria-current]::after{transform:translateX(-50%) scale(1)}
body.fx header.site .burger span{background:var(--fx-ink)!important}
@media (max-width:960px){
  body.fx nav.menu{background:rgba(5,9,12,.97)!important}
}
body.fx .nx-reading-progress{height:2px!important;background:linear-gradient(90deg,var(--fx-sig),var(--fx-amb))!important;box-shadow:0 0 12px rgba(94,230,245,.7)}

/* ---------- typographie ---------- */
body.fx h1,body.fx h2,body.fx h3,body.fx .h-xl,body.fx .h-lg,body.fx .h-md,body.fx .big-line{font-family:var(--fx-head);color:var(--fx-ink)}
body.fx .h-xl{letter-spacing:-.055em;line-height:.98}
body.fx .h-lg{letter-spacing:-.05em}
body.fx .sub,body.fx .lede,body.fx .lead{color:var(--fx-soft)}
body.fx .eyebrow,body.fx .ln-title,body.fx .tag,body.fx .crumbs{font-family:var(--fx-mono)!important;font-size:12px!important;letter-spacing:.14em!important;text-transform:uppercase!important;font-weight:500!important}
body.fx .eyebrow{color:var(--fx-sig)!important;display:inline-flex;align-items:center;gap:10px}
body.fx .eyebrow::before{content:"";width:8px;height:8px;border-radius:2px;border:1.5px solid currentColor;box-shadow:0 0 10px currentColor;flex:none}
body.fx .center .eyebrow,body.fx .center>.eyebrow{justify-content:center}
body.fx .big-line .grad,body.fx .grad{color:var(--fx-sig)!important;-webkit-text-fill-color:currentColor;text-shadow:0 0 34px rgba(94,230,245,.35)}
body.fx .fact .big,body.fx .fig .big,body.fx .plan .amount{color:var(--fx-sig)!important;text-shadow:0 0 40px rgba(94,230,245,.28);font-variant-numeric:tabular-nums}

/* mots révélés (flux.js découpe les titres) */
.fx-w{display:inline-block;white-space:pre}
.fx-split .fx-w{opacity:0;transform:translateY(.55em) rotate(2deg);filter:blur(8px);
  transition:opacity .8s var(--fx-ease),transform .9s var(--fx-ease),filter .8s var(--fx-ease);transition-delay:calc(var(--i)*55ms)}
.fx-split.fx-on .fx-w{opacity:1;transform:none;filter:none}

/* ---------- boutons : courant qui traverse + aimant ---------- */
body.fx .btn{position:relative;overflow:hidden;isolation:isolate;border-radius:999px!important;font-weight:600;letter-spacing:-.005em;
  transition:transform .35s var(--fx-ease),box-shadow .35s,background-color .25s,color .25s!important}
body.fx .btn-blue,body.fx .btn-light,body.fx .nav-cta,body.fx .ln-cta{background:var(--fx-sig)!important;color:#03161b!important;border-color:var(--fx-sig)!important;
  box-shadow:0 0 0 0 rgba(94,230,245,.0),0 10px 30px -12px rgba(94,230,245,.7)}
body.fx .btn::after{content:"";position:absolute;inset:-2px;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.75) 48%,transparent 62%);transform:translateX(-120%);transition:transform .8s var(--fx-ease)}
body.fx .btn:hover::after{transform:translateX(120%)}
body.fx .btn:hover{box-shadow:0 0 0 4px rgba(94,230,245,.18),0 14px 40px -10px rgba(94,230,245,.85)!important;background:var(--fx-sig2)!important}
body.fx .more{color:var(--fx-sig)!important;font-weight:600;display:inline-flex;align-items:center;gap:.35em}
body.fx .more::after{transition:transform .3s var(--fx-ease)}
body.fx .more:hover::after{transform:translateX(5px)}

/* ---------- cartes = nœuds d'un flux (lueur qui suit le curseur) ---------- */
body.fx :is(.card,.tile,.plan,.story-card,.panel,.xcard,.finding,.invoice,.fact,.fig,.step,.cta-card,.keypoints,.table-card,.compare-wrap,.anom,.guide-list>li,.guide-list>a,.aside){
  --mx:50%;--my:50%;}
body.fx :is(.tile,.plan,.story-card,.panel,.xcard,.finding,.cta-card,.keypoints,.table-card,.compare-wrap,.anom,.aside){
  background:
    radial-gradient(420px circle at var(--mx) var(--my),rgba(94,230,245,.10),transparent 45%),
    linear-gradient(180deg,rgba(17,34,42,.92),rgba(10,19,24,.92))!important;
  border:1px solid var(--fx-line)!important;border-radius:16px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 30px 60px -40px rgba(0,0,0,.8)!important;
  transition:border-color .35s,transform .45s var(--fx-ease),box-shadow .45s!important}
body.fx :is(.tile,.plan,.story-card,.panel,.xcard,.finding,.cta-card,.anom):hover{border-color:rgba(94,230,245,.45)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(94,230,245,.12),0 40px 80px -40px rgba(94,230,245,.35)!important}
body.fx .plan.premium{border-color:rgba(94,230,245,.55)!important;
  background:radial-gradient(420px circle at var(--mx) var(--my),rgba(94,230,245,.16),transparent 45%),linear-gradient(180deg,#123039,#0b1a20)!important}
body.fx .card{border-radius:16px!important;overflow:hidden;border:1px solid var(--fx-line);transition:transform .5s var(--fx-ease),border-color .3s!important}
body.fx .card:hover{border-color:rgba(94,230,245,.5);transform:translateY(-6px)}
body.fx .card .card-media img{transition:transform 1.2s var(--fx-ease),filter .6s;filter:saturate(.75) contrast(1.05)}
body.fx .card:hover .card-media img{transform:scale(1.06);filter:saturate(1)}

/* petit port de connexion en haut à gauche des nœuds */
.fx-port{position:absolute;top:-5px;left:22px;width:10px;height:10px;border-radius:50%;background:var(--fx-bg);border:1.5px solid var(--fx-line2);pointer-events:none;z-index:2;transition:border-color .4s,box-shadow .4s}
.fx-port::after{content:"";position:absolute;left:50%;bottom:100%;width:1px;height:26px;background:linear-gradient(transparent,var(--fx-line2));transform:translateX(-50%)}
:is(.fx-node-on,:hover)>.fx-port{border-color:var(--fx-sig);box-shadow:0 0 12px var(--fx-sig)}

/* étapes « Comment ça marche » : le fil s'allume étape par étape */
body.fx #comment .step{border-left-color:var(--fx-line)!important}
body.fx #comment .step::before{background:linear-gradient(var(--fx-sig),var(--fx-amb))!important;box-shadow:0 0 14px var(--fx-sig)}
body.fx #comment .num{color:transparent!important;-webkit-text-stroke:1.2px var(--fx-sig);text-shadow:none;transition:color .6s}
body.fx #comment .step.in .num{color:var(--fx-sig)!important;text-shadow:0 0 30px rgba(94,230,245,.45)}

/* FAQ */
body.fx .faq details{border-color:var(--fx-line)!important;transition:background .4s}
body.fx .faq details[open]{background:rgba(17,34,42,.7)!important;border-radius:14px}
body.fx .faq summary{font-family:var(--fx-head)}
body.fx .faq summary:hover{color:var(--fx-sig)!important}

/* tableaux */
body.fx table.compare thead th{background:rgba(94,230,245,.08)!important;font-family:var(--fx-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
body.fx table.compare tbody tr{transition:background .25s}
body.fx table.compare tbody tr:hover{background:rgba(94,230,245,.05)}

/* photos larges : se dévoilent comme un écran qui s'allume */
body.fx .hero-media,body.fx .wide-media{border-radius:18px!important;overflow:hidden;position:relative;
  clip-path:inset(0 var(--fx-clip,0%) 0 var(--fx-clip,0%) round 18px)}
body.fx .hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,9,12,0) 40%,rgba(5,9,12,.85)),repeating-linear-gradient(0deg,rgba(94,230,245,.05) 0 1px,transparent 1px 4px)}

/* guides : article lisible, tables des matières en nœuds */
body.fx .prose{color:var(--fx-soft)}
body.fx .prose h2{scroll-margin-top:100px}
body.fx .prose strong{color:var(--fx-ink)}
body.fx .prose a{color:var(--fx-sig)}
body.fx .keypoints li::marker,body.fx .prose li::marker{color:var(--fx-sig)}

/* pied de page : le mot NEXIA se trace au trait */
body.fx footer,body.fx .nx-footer{background:linear-gradient(180deg,transparent,#03070a 30%)!important;border-top:1px solid var(--fx-line)}
body.fx :is(.nx-site-endmark,.nx-endmark){color:transparent!important;-webkit-text-stroke:1px rgba(94,230,245,.35);
  background:linear-gradient(90deg,var(--fx-sig),var(--fx-amb)) 0 0/var(--fx-fill,0%) 100% no-repeat;-webkit-background-clip:text;background-clip:text;
  transition:background-size .2s linear}

/* bouton pause existant */
body.fx :is(.nx-site-pause,.nx-page-motion){background:rgba(5,9,12,.78)!important;border:1px solid var(--fx-line2)!important;color:var(--fx-soft)!important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-family:var(--fx-mono);font-size:11px!important;letter-spacing:.08em}

/* ---------- le fil ---------- */
.fx-spine{position:absolute;left:var(--fx-x);top:0;width:2px;pointer-events:none;z-index:6}
.fx-spine-track{position:absolute;inset:0;background:repeating-linear-gradient(180deg,var(--fx-line2) 0 4px,transparent 4px 10px)}
.fx-spine-fill{position:absolute;left:0;top:0;width:2px;height:100%;transform-origin:top;transform:scaleY(var(--fx-p,0));
  background:linear-gradient(180deg,rgba(94,230,245,.15),var(--fx-sig) 30%,var(--fx-sig));box-shadow:0 0 10px rgba(94,230,245,.6)}
.fx-spine-fill::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0 60px,rgba(255,255,255,.95) 60px 64px,transparent 64px 180px);
  animation:fx-flow 2.2s linear infinite;mix-blend-mode:screen}
@keyframes fx-flow{to{background-position:0 180px}}
.fx-spark{position:absolute;left:1px;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:radial-gradient(circle,#fff 0 18%,var(--fx-sig) 34%,rgba(94,230,245,0) 70%);transform:translateY(var(--fx-y,0));filter:drop-shadow(0 0 8px var(--fx-sig))}
.fx-node{position:absolute;left:1px;width:0;height:0}
.fx-node i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:4px;background:var(--fx-bg);border:1.5px solid var(--fx-line2);transform:rotate(45deg);
  transition:border-color .5s,background .5s,box-shadow .5s,transform .6s var(--fx-ease)}
.fx-node b{display:none;position:absolute;left:16px;top:-8px;font:500 10px/16px var(--fx-mono);letter-spacing:.12em;color:var(--fx-mute);white-space:nowrap;transition:color .5s}
.fx-node s{position:absolute;left:8px;top:0;height:1px;width:var(--fx-reach,0px);background:linear-gradient(90deg,var(--fx-sig),rgba(94,230,245,0));
  transform-origin:left;transform:scaleX(0);transition:transform .9s var(--fx-ease) .1s}
.fx-node.on i{background:var(--fx-sig);border-color:var(--fx-sig);box-shadow:0 0 0 4px rgba(94,230,245,.15),0 0 18px var(--fx-sig);transform:rotate(225deg)}
.fx-node.on b{color:var(--fx-sig)}
.fx-node.on s{transform:scaleX(1)}
.fx-lit{text-shadow:0 0 40px rgba(94,230,245,.18)}
.fx-node.roomy b{display:block}
@media (max-width:760px){.fx-spine{display:none}.fx-node i{width:10px;height:10px;left:-5px;top:-5px}.fx-node s{display:none}}

/* lueur du curseur */
.fx-glow{position:fixed;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,rgba(94,230,245,.09),rgba(94,230,245,.03) 35%,transparent 65%);transform:translate3d(var(--gx,-999px),var(--gy,-999px),0);transition:opacity .6s;mix-blend-mode:screen}

/* ---------- schémas des héros (.nx-art / .nx-guide-art) ---------- */
body.fx .nx-art::before,body.fx .nx-guide-art::before{display:none!important}
body.fx :is(.nx-art,.nx-guide-art,.feature-media).fx-has-schema{aspect-ratio:1;position:relative;pointer-events:auto;
  transform:perspective(1200px) rotateX(var(--fx-rx,0deg)) rotateY(var(--fx-ry,0deg));transition:transform .6s var(--fx-ease)}
body.fx :is(.nx-art,.nx-guide-art,.feature-media).fx-has-schema>img{display:none!important}
.fx-schema{position:absolute;inset:0;width:100%;height:100%;overflow:visible;font-family:var(--fx-mono)}
.fx-schema text{font-family:var(--fx-mono)}
.fx-schema .t-h{font-family:var(--fx-head);font-weight:700}
.fx-schema .pn{fill:#0c171c;stroke:var(--fx-line2);stroke-width:1}
.fx-schema .pn2{fill:#10232b;stroke:rgba(94,230,245,.4);stroke-width:1}
.fx-schema .ln{stroke:rgba(185,203,208,.22);stroke-width:6;stroke-linecap:round}
.fx-schema .sig{stroke:var(--fx-sig);fill:none}
.fx-schema .glow{filter:url(#fxGlow)}
.fx-schema .mute{fill:var(--fx-mute)}
.fx-schema .soft{fill:var(--fx-soft)}
.fx-schema .ink{fill:var(--fx-ink)}
.fx-schema .cy{fill:var(--fx-sig)}
.fx-schema .am{fill:var(--fx-amb)}
.fx-schema .ok{fill:var(--fx-ok)}
.fx-paused .fx-schema *,.fx-still .fx-schema *{animation-play-state:paused!important}

/* ---------- accessibilité / mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  .fx-split .fx-w{opacity:1;transform:none;filter:none;transition:none}
  .fx-spine-fill::after,.fx-schema *{animation:none!important}
  .fx-glow{display:none}
  body.fx .hero-media,body.fx .wide-media{clip-path:none}
}
.fx-paused .fx-spine-fill::after{animation-play-state:paused}
@media (any-pointer:coarse){.fx-glow{display:none}}

body.fx .feature-media.fx-has-schema::before,body.fx .feature-media.fx-has-schema::after{display:none!important}
body.fx .fx-has-schema .nx-voice{display:none}
body.fx .nx-guide-art.fx-has-schema{position:absolute;right:-24px;top:24px;width:min(320px,30vw);opacity:1;margin:0}
body.fx .fx-guide-net.fx-has-schema{top:40px;right:0;width:min(380px,32vw)}
@media (max-width:900px){body.fx .nx-guide-art.fx-has-schema{display:none}}
body.fx footer .brand-logo,body.fx .nx-footer .brand-logo{background:#fff;border-radius:5px;padding:2px}
body.fx .contact-media.fx-has-schema{position:absolute!important;inset:auto 3vw auto auto!important;top:50%!important;width:min(520px,40vw);aspect-ratio:1;opacity:.5;transform:translateY(-50%)!important;display:block}
@media (max-width:900px){body.fx .contact-media.fx-has-schema{opacity:.18;width:90vw}}