/* =====================================================================
   Ï-NAYA — HERO (Piste 01 « Signature » + Piste 03 « Encadré »)
   CSS autonome, préfixé .nx-*  →  aucun conflit avec le reste du site.
   Police : Plus Jakarta Sans (400–800) à charger dans le <head>.
   ===================================================================== */

/* ---------- 1. TOKENS (charte Ï-NAYA) ---------- */
.nx-scope{
  --nx-navy:#0A2A43;        /* Bleu Profond — titres          */
  --nx-night:#081F38;       /* Nuit — fond piste 01            */
  --nx-cyan:#00D1C1;        /* Cyan Naya — boutons, accents    */
  --nx-cyan-2:#22E4EC;      /* Cyan lumière (logo)             */
  --nx-blue:#1D7BE8;        /* Bleu pont / Finance & SAP       */
  --nx-violet:#7B6CFF;      /* Halo droit (style Peritis)      */
  --nx-paper:#F7FAFC;       /* Blanc cassé — fond              */
  --nx-line:#DBE6ED;
  --nx-muted:#4F6577;
  --nx-ease:cubic-bezier(.2,.8,.2,1);
  --nx-ease-out:cubic-bezier(.16,1,.3,1);
  --nx-font:"Plus Jakarta Sans",Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --nx-gutter:clamp(20px,5.2vw,80px);
  --nx-header-h:84px;
  font-family:var(--nx-font);
  color:var(--nx-navy);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.nx-scope *,.nx-scope *::before,.nx-scope *::after{box-sizing:border-box}
.nx-scope img,.nx-scope svg{display:block;max-width:100%}
:where(.nx-scope) a{color:inherit;text-decoration:none}
.nx-scope :focus-visible{outline:3px solid var(--nx-cyan);outline-offset:4px;border-radius:12px}
.nx-shell{width:min(1280px,calc(100% - 2 * var(--nx-gutter)));margin-inline:auto;position:relative}
.nx-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@property --nx-angle{syntax:"<angle>";inherits:false;initial-value:0deg}

/* ---------- 2. HEADER ---------- */
.nx-header{position:sticky;top:0;z-index:50;height:var(--nx-header-h);
  background:rgba(255,255,255,.86);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);
  border-bottom:1px solid rgba(10,42,67,.07);transition:box-shadow .4s var(--nx-ease),height .4s var(--nx-ease)}
.nx-header.is-scrolled{box-shadow:0 10px 40px -18px rgba(8,31,56,.28)}
.nx-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--nx-cyan) 30%,var(--nx-blue) 70%,transparent);
  transform:scaleX(0);transform-origin:left;opacity:.9}
.nx-js .nx-header::after{animation:nxScan 1.6s .3s var(--nx-ease-out) forwards}
@keyframes nxScan{0%{transform:scaleX(0)}60%{transform:scaleX(1);opacity:.9}100%{transform:scaleX(1);opacity:.25}}
.nx-header .nx-shell{height:100%;display:flex;align-items:center;justify-content:space-between;gap:28px}

.nx-brand{display:inline-flex;align-items:center;line-height:0;flex-shrink:0}
.nx-logo{width:168px;height:auto;overflow:visible}

/* Logo — animation d'entrée */
.nx-logo .nx-l{transform-box:fill-box;transform-origin:50% 100%}
.nx-js .nx-logo .nx-l{opacity:0;transform:translateY(55%)}
.nx-js .nx-logo.is-on .nx-l{animation:nxLetter .8s var(--nx-ease-out) forwards;animation-delay:calc(var(--i) * 70ms + 80ms)}
@keyframes nxLetter{to{opacity:1;transform:none}}
.nx-logo .nx-dot{transform-box:fill-box;transform-origin:50% 100%}
.nx-js .nx-logo .nx-dot{opacity:0;transform:translateY(-260%)}
.nx-js .nx-logo.is-on .nx-dot{animation:nxDrop .9s cubic-bezier(.3,1.4,.5,1) forwards;animation-delay:calc(var(--i) * 110ms + 640ms)}
@keyframes nxDrop{0%{opacity:0;transform:translateY(-260%)}40%{opacity:1}70%{transform:translateY(12%) scaleY(.86)}100%{opacity:1;transform:none}}
.nx-js .nx-logo .nx-wave{clip-path:inset(0 100% 0 0)}
.nx-js .nx-logo.is-on .nx-wave{animation:nxWipe 1.15s .42s var(--nx-ease-out) forwards}
@keyframes nxWipe{to{clip-path:inset(0 0 0 0)}}
.nx-logo .nx-shine{mix-blend-mode:screen;opacity:.95}
.nx-brand:hover .nx-dot{animation:nxHop .6s var(--nx-ease) both!important;animation-delay:calc(var(--i) * 90ms)!important;opacity:1}
@keyframes nxHop{0%,100%{transform:none}45%{transform:translateY(-55%)}}

/* Nav */
.nx-nav{display:flex;align-items:center;gap:clamp(20px,2.6vw,38px)}
.nx-nav a{position:relative;font-size:14px;font-weight:600;letter-spacing:-.005em;color:var(--nx-navy);padding:10px 0;transition:color .3s}
.nx-nav a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--nx-cyan),var(--nx-blue));transform:scaleX(0);transition:transform .45s var(--nx-ease)}
.nx-nav a:hover{color:#06727A}
.nx-nav a:hover::after,.nx-nav a[aria-current]::after{transform:scaleX(1)}
.nx-js .nx-nav a{opacity:0;transform:translateY(-8px);animation:nxFadeDown .7s var(--nx-ease-out) forwards;animation-delay:calc(var(--i) * 60ms + 350ms)}
@keyframes nxFadeDown{to{opacity:1;transform:none}}

.nx-burger{display:none;width:46px;height:46px;border-radius:14px;border:1px solid var(--nx-line);background:#fff;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;padding:0}
.nx-burger span{display:block;width:20px;height:2px;border-radius:2px;background:var(--nx-navy);transition:transform .45s var(--nx-ease),opacity .3s}
.nx-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nx-burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.2)}
.nx-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nx-mnav{position:absolute;left:0;right:0;top:100%;background:#fff;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--nx-line);box-shadow:0 30px 60px -30px rgba(8,31,56,.35);
  display:grid;gap:4px;padding:14px var(--nx-gutter) 26px;clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path .55s var(--nx-ease-out),visibility 0s .55s}
.nx-mnav.is-open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .55s var(--nx-ease-out)}
.nx-mnav a{font-size:18px;font-weight:650;padding:14px 4px;border-bottom:1px solid #EDF2F6;display:flex;justify-content:space-between;align-items:center;
  opacity:0;transform:translateY(10px);transition:opacity .4s,transform .5s var(--nx-ease-out)}
.nx-mnav a svg{width:18px;color:var(--nx-cyan)}
.nx-mnav.is-open a{opacity:1;transform:none;transition-delay:calc(var(--i) * 50ms + 120ms)}
.nx-mnav .nx-btn{margin-top:14px;justify-content:center;border-bottom:0}

/* ---------- 3. BOUTONS ---------- */
.nx-btn{--h:56px;position:relative;display:inline-flex;align-items:center;gap:14px;height:var(--h);border-radius:999px;
  font:700 15px/1 var(--nx-font);letter-spacing:-.01em;white-space:nowrap;cursor:pointer;border:0;isolation:isolate;
  transition:transform .35s var(--nx-ease),box-shadow .35s var(--nx-ease),background-color .3s;will-change:transform}
.nx-btn__icon{position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;overflow:hidden;flex-shrink:0}
.nx-btn__icon svg{width:18px;height:18px;grid-area:1/1;transition:transform .5s var(--nx-ease)}
.nx-btn__icon svg+svg{transform:translateX(-160%)}
.nx-btn:hover .nx-btn__icon svg:first-child{transform:translateX(160%)}
.nx-btn:hover .nx-btn__icon svg+svg{transform:none}

.nx-btn--primary{padding:0 9px 0 26px;color:var(--nx-navy);
  background:linear-gradient(180deg,#2BE6D6 0%,var(--nx-cyan) 55%,#00BFB1 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 -2px 0 rgba(0,0,0,.06) inset,0 14px 34px -12px rgba(0,209,193,.75),0 2px 6px rgba(8,31,56,.12)}
.nx-btn--primary .nx-btn__icon{background:var(--nx-navy);color:var(--nx-cyan)}
.nx-btn--primary::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;overflow:hidden;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%) no-repeat;background-size:250% 100%;background-position:130% 0;
  animation:nxSheen 5.5s 2.6s ease-in-out infinite}
@keyframes nxSheen{0%,70%{background-position:130% 0}100%{background-position:-130% 0}}
.nx-btn--primary:hover{box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 20px 44px -12px rgba(0,209,193,.9),0 0 0 6px rgba(0,209,193,.16)}

.nx-btn--ghost{padding:0 9px 0 26px;color:var(--nx-navy);border:1.5px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(var(--nx-angle),#BCD0DC,var(--nx-cyan),var(--nx-blue),#BCD0DC) border-box;
  animation:nxSpin 6s linear infinite;box-shadow:0 8px 24px -16px rgba(8,31,56,.35)}
.nx-btn--ghost .nx-btn__icon{background:rgba(10,42,67,.06);color:var(--nx-navy)}
.nx-btn--ghost:hover{box-shadow:0 16px 36px -16px rgba(8,31,56,.45)}
@keyframes nxSpin{to{--nx-angle:360deg}}
.nx-btn--sm{--h:46px;font-size:13.5px;padding-left:20px;padding-right:6px;gap:10px}
.nx-btn--sm .nx-btn__icon{width:34px;height:34px}
.nx-btn--sm .nx-btn__icon svg{width:16px;height:16px}

/* ---------- 4. HERO — STRUCTURE COMMUNE ---------- */
.nx-hero{position:relative;overflow:hidden;isolation:isolate;--mx:50%;--my:40%}
.nx-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.nx-grid{position:absolute;inset:-1px;background-size:64px 64px}
.nx-aurora{position:absolute;border-radius:50%;filter:blur(90px);opacity:.9;will-change:transform}
.nx-aurora--a{width:46vw;height:46vw;left:-14vw;top:30%;animation:nxDriftA 22s ease-in-out infinite alternate}
.nx-aurora--b{width:38vw;height:38vw;right:-8vw;top:-16vw;animation:nxDriftB 26s ease-in-out infinite alternate}
.nx-aurora--c{width:30vw;height:30vw;left:34%;top:-12vw;animation:nxDriftC 30s ease-in-out infinite alternate}
@keyframes nxDriftA{to{transform:translate3d(8vw,-6vw,0) scale(1.15)}}
@keyframes nxDriftB{to{transform:translate3d(-6vw,7vw,0) scale(.9)}}
@keyframes nxDriftC{to{transform:translate3d(-9vw,5vw,0) scale(1.2)}}
.nx-spot{position:absolute;inset:0;transition:opacity .6s}
.nx-grain{position:absolute;inset:-60px;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:nxGrain 1.2s steps(6) infinite}
@keyframes nxGrain{0%{transform:translate(0,0)}20%{transform:translate(-22px,14px)}40%{transform:translate(18px,-26px)}60%{transform:translate(-30px,-8px)}80%{transform:translate(26px,22px)}100%{transform:translate(0,0)}}

.nx-hero__grid{display:grid;align-items:center;position:relative;z-index:2}
.nx-copy{position:relative;z-index:3;min-width:0}

/* Eyebrow */
.nx-eyebrow{display:inline-flex;align-items:center;gap:12px;margin:0 0 26px;padding:9px 16px 9px 12px;border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.nx-eyebrow__dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--nx-cyan)}
.nx-eyebrow__dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--nx-cyan);animation:nxPing 2.2s var(--nx-ease) infinite}
@keyframes nxPing{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.9);opacity:0}}
.nx-eyebrow__link{position:relative;width:34px;height:1.5px;border-radius:2px;overflow:hidden}
.nx-eyebrow__link::after{content:"";position:absolute;top:0;bottom:0;width:12px;border-radius:2px;background:var(--nx-cyan);box-shadow:0 0 8px var(--nx-cyan);animation:nxTravel 2.4s ease-in-out infinite}
@keyframes nxTravel{0%{left:-12px}55%,100%{left:34px}}

/* Titre */
.nx-title{margin:0 0 26px;font-size:clamp(40px,4.6vw,66px);line-height:1.04;font-weight:750;letter-spacing:-.036em}
.nx-title .nx-ln{display:block;overflow:hidden;padding:0 .06em .12em 0;margin-bottom:-.12em}
.nx-title .nx-ln>span{display:inline-block;position:relative}
.nx-js .nx-title .nx-ln>span{transform:translateY(110%) rotate(2deg);transform-origin:0 100%}
.nx-js .is-in .nx-title .nx-ln>span{animation:nxRise 1.1s var(--nx-ease-out) forwards;animation-delay:calc(var(--i) * 110ms + 250ms)}
@keyframes nxRise{to{transform:none}}
.nx-swoosh{position:absolute;left:-2%;right:-4%;bottom:-.24em;width:106%;height:.36em;overflow:visible;pointer-events:none}
.nx-swoosh path{fill:none;stroke-width:7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.nx-js .nx-swoosh path{stroke-dashoffset:1}
.nx-js .is-in .nx-swoosh path{animation:nxDraw 1.3s 1.15s var(--nx-ease-out) forwards}
@keyframes nxDraw{to{stroke-dashoffset:0}}

.nx-intro{margin:0 0 34px;max-width:520px;font-size:clamp(16px,1.2vw,18px);line-height:1.75;font-weight:450}
.nx-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* Entrées génériques */
.nx-js [data-nx-in]{opacity:0;transform:translateY(24px)}
.nx-js .is-in [data-nx-in]{animation:nxUp 1s var(--nx-ease-out) forwards;animation-delay:var(--d,0s)}
@keyframes nxUp{to{opacity:1;transform:none}}

/* ---------- 5. VISUEL PHOTO + LUMIÈRES DU PONT ---------- */
.nx-photo{position:relative;aspect-ratio:3/2;width:100%}
.nx-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nx-deck{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;mix-blend-mode:screen}
.nx-deck path{fill:none;stroke-linecap:round}
.nx-deck .nx-p1{stroke:#8AFBF2;stroke-width:5;stroke-dasharray:90 910;animation:nxFlow 4.2s linear infinite}
.nx-deck .nx-p2{stroke:#9CC8FF;stroke-width:4;stroke-dasharray:60 940;animation:nxFlowR 5.6s 1.2s linear infinite}
.nx-deck .nx-glow{filter:blur(6px);opacity:.9}
@keyframes nxFlow{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
@keyframes nxFlowR{from{stroke-dashoffset:-1000}to{stroke-dashoffset:0}}

/* Points d'ancrage « Finance & SAP » / « Data & IA » sur le pont */
.nx-pin{position:absolute;left:var(--x);top:var(--y);z-index:3;transform:translate(-50%,-50%)}
.nx-pin__dot{display:block;position:relative;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(0,209,193,.35),0 0 18px var(--nx-cyan)}
.nx-pin__dot::before,.nx-pin__dot::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1.5px solid rgba(0,209,193,.8);animation:nxPing 2.6s var(--nx-ease) infinite}
.nx-pin__dot::after{animation-delay:1.3s}
.nx-pin__stem{position:absolute;left:50%;bottom:6px;width:1.5px;height:46px;transform:translateX(-50%);background:linear-gradient(to top,rgba(0,209,193,.9),rgba(0,209,193,0))}
.nx-pin__label{position:absolute;left:50%;bottom:52px;transform:translateX(-50%);display:flex;align-items:center;gap:9px;white-space:nowrap;
  padding:9px 14px 9px 10px;border-radius:14px;color:#fff;font-size:13px;font-weight:650;
  background:rgba(8,31,56,.62);border:1px solid rgba(160,230,240,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 16px 40px -14px rgba(0,0,0,.6)}
.nx-pin__label small{display:block;text-transform:uppercase;font-size:10px;font-weight:700;letter-spacing:.14em;color:#8FE9EE;margin-bottom:2px}
.nx-pin__label .nx-ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(0,209,193,.14);color:var(--nx-cyan)}
.nx-pin__label .nx-ico svg{width:17px;height:17px}
.nx-pin--b .nx-pin__label .nx-ico{background:rgba(29,123,232,.2);color:#7DB8FF}
.nx-js .nx-pin{opacity:0}
.nx-js .is-in .nx-pin{animation:nxPop .9s var(--nx-ease-out) forwards;animation-delay:var(--d)}
@keyframes nxPop{from{opacity:0;transform:translate(-50%,-30%) scale(.85)}to{opacity:1;transform:translate(-50%,-50%)}}

.nx-tag{display:inline-flex;align-items:center;gap:10px;padding:11px 18px 11px 12px;border-radius:999px;font-size:13px;font-weight:600;color:#fff;
  background:rgba(8,31,56,.55);border:1px solid rgba(170,225,240,.3);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nx-tag__ico{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--nx-cyan);color:var(--nx-navy)}
.nx-tag__ico svg{width:14px;height:14px}

/* ---------- 6. CHIFFRES ---------- */
.nx-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;position:relative;z-index:3}
.nx-stat{--cx:50%;--cy:50%;position:relative;display:flex;align-items:center;gap:20px;padding:26px 26px;border-radius:20px;min-height:126px;overflow:hidden;
  transition:transform .5s var(--nx-ease),box-shadow .5s var(--nx-ease),border-color .4s}
.nx-stat::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(320px circle at var(--cx) var(--cy),rgba(0,209,193,.16),transparent 60%)}
.nx-stat:hover{transform:translateY(-6px)}
.nx-stat:hover::before{opacity:1}
.nx-stat__idx{position:absolute;top:16px;right:20px;font-size:11px;font-weight:700;letter-spacing:.14em;opacity:.55}
.nx-stat__num{display:flex;align-items:baseline;gap:7px;font-size:clamp(34px,3vw,42px);font-weight:750;letter-spacing:-.04em;line-height:1}
.nx-stat__num em{font-style:normal;font-size:20px;font-weight:700;letter-spacing:-.02em}
.nx-stat p{margin:9px 0 0;font-size:13.5px;line-height:1.5;font-weight:500}
.nx-js .nx-stat{opacity:0;translate:0 30px}
.nx-js .is-in .nx-stat{animation:nxUpT 1s var(--nx-ease-out) forwards;animation-delay:calc(var(--i) * 120ms + 1.05s)}
@keyframes nxUpT{to{opacity:1;translate:0 0}}

/* Tuile d'icône (dégradé + tracé animé) */
.nx-icon{position:relative;width:58px;height:58px;flex-shrink:0;border-radius:17px;display:grid;place-items:center;isolation:isolate}
.nx-icon::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;z-index:-1;
  background:conic-gradient(from var(--nx-angle),var(--nx-cyan),var(--nx-blue),var(--nx-violet),var(--nx-cyan));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:nxSpin 7s linear infinite}
.nx-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.nx-icon svg [pathLength]{stroke-dasharray:1;stroke-dashoffset:0}
.nx-js .nx-icon svg [pathLength]{stroke-dashoffset:1}
.nx-js .is-in .nx-icon svg [pathLength]{animation:nxDraw 1.4s var(--nx-ease-out) forwards;animation-delay:calc(var(--i) * 120ms + 1.35s)}
.nx-icon .nx-bar{transform-box:fill-box;transform-origin:50% 100%;animation:nxBars 2.8s ease-in-out infinite}
.nx-icon .nx-bar:nth-of-type(2){animation-delay:.25s}.nx-icon .nx-bar:nth-of-type(3){animation-delay:.5s}
@keyframes nxBars{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.55)}}
.nx-icon .nx-spark{transform-box:fill-box;transform-origin:center;animation:nxTwinkle 3.4s ease-in-out infinite}
@keyframes nxTwinkle{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(45deg) scale(.82)}}
.nx-icon .nx-chain{transform-box:fill-box;transform-origin:center;animation:nxChain 3.2s ease-in-out infinite}
@keyframes nxChain{0%,100%{transform:translate(0,0)}50%{transform:translate(1.2px,-1.2px)}}

/* Bandeau signature */
.nx-sign{display:flex;align-items:center;justify-content:center;gap:18px;padding:30px 0 34px;font-size:12px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;text-align:center}
.nx-sign i{display:block;width:clamp(30px,8vw,90px);height:1.5px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--nx-cyan));transform-origin:right}
.nx-sign i:last-child{background:linear-gradient(90deg,var(--nx-cyan),transparent);transform-origin:left}
.nx-js .nx-sign i{transform:scaleX(0)}
.nx-js .is-in .nx-sign i{animation:nxGrow 1.2s 1.6s var(--nx-ease-out) forwards}
@keyframes nxGrow{to{transform:scaleX(1)}}

/* =====================================================================
   7. PISTE 01 — « LE PONT SIGNATURE » (sombre, photo pleine largeur)
   ===================================================================== */
.nx-hero--signature{background:var(--nx-night);color:#fff}
.nx-hero--signature .nx-grid{background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 18% 35%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 80% at 18% 35%,#000 20%,transparent 75%)}
.nx-hero--signature .nx-aurora--a{background:radial-gradient(circle,rgba(0,209,193,.42),transparent 65%)}
.nx-hero--signature .nx-aurora--b{background:radial-gradient(circle,rgba(123,108,255,.38),transparent 65%)}
.nx-hero--signature .nx-aurora--c{background:radial-gradient(circle,rgba(29,123,232,.35),transparent 65%)}
.nx-hero--signature .nx-spot{background:radial-gradient(520px circle at var(--mx) var(--my),rgba(0,209,193,.11),transparent 60%)}
.nx-hero--signature .nx-grain{opacity:.09}
/* flux de données sur la grille */
.nx-streams{position:absolute;inset:0;opacity:.6}
.nx-streams i{position:absolute;left:0;height:1px;width:140px;background:linear-gradient(90deg,transparent,rgba(0,209,193,.9),transparent);
  transform:translateX(-160px);animation:nxStream var(--t,7s) linear infinite;animation-delay:var(--d,0s)}
.nx-streams i.v{top:0;width:1px;height:140px;background:linear-gradient(180deg,transparent,rgba(96,160,255,.8),transparent);transform:translateY(-160px);animation-name:nxStreamV}
@keyframes nxStream{to{transform:translateX(62vw)}}
@keyframes nxStreamV{to{transform:translateY(900px)}}

.nx-hero--signature .nx-hero__grid{grid-template-columns:minmax(0,560px) 1fr;min-height:clamp(540px,42vw,680px);padding:clamp(48px,6vw,84px) 0 24px}
.nx-hero--signature .nx-eyebrow{color:#9DEBF0;background:rgba(0,209,193,.08);border:1px solid rgba(0,209,193,.25)}
.nx-hero--signature .nx-eyebrow__link{background:rgba(157,235,240,.3)}
.nx-hero--signature .nx-title{color:#fff}
.nx-hero--signature .nx-accent{background:linear-gradient(100deg,var(--nx-cyan) 0%,#7CF5EA 30%,var(--nx-cyan) 55%,#22B8F0 100%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:nxText 7s ease-in-out infinite alternate}
@keyframes nxText{to{background-position:100% 0}}
.nx-hero--signature .nx-swoosh path{stroke:url(#nxSwooshD)}
.nx-hero--signature .nx-intro{color:#C9DAE6}
.nx-hero--signature .nx-btn--ghost{color:#fff;background:linear-gradient(rgba(8,31,56,.72),rgba(8,31,56,.72)) padding-box,linear-gradient(var(--nx-angle),rgba(140,200,215,.45),var(--nx-cyan),var(--nx-blue),rgba(140,200,215,.45)) border-box;backdrop-filter:blur(8px)}
.nx-hero--signature .nx-btn--ghost .nx-btn__icon{background:rgba(255,255,255,.1);color:#fff}

/* Photo pleine hauteur, fondue dans la nuit — l'image entière reste lisible (ratio 3:2 conservé) */
.nx-hero--signature .nx-stage{position:absolute;top:0;right:calc((min(1280px,100vw - 2 * var(--nx-gutter)) - 100vw) / 2);width:min(64vw,1180px);z-index:1}
.nx-hero--signature .nx-photo{
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%),linear-gradient(0deg,transparent 0%,#000 20%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0%,#000 22%),linear-gradient(0deg,transparent 0%,#000 20%);mask-composite:intersect}
.nx-js .nx-hero--signature .nx-photo{opacity:0;transform:scale(1.06);filter:blur(8px)}
.nx-js .nx-hero--signature.is-in .nx-photo{animation:nxPhoto 2s .15s var(--nx-ease-out) forwards}
@keyframes nxPhoto{to{opacity:1;transform:none;filter:none}}
.nx-hero--signature .nx-tag{position:absolute;right:5%;bottom:20%;z-index:3}
.nx-js .nx-hero--signature .nx-tag{opacity:0}
.nx-js .nx-hero--signature.is-in .nx-tag{animation:nxUp 1s 2.1s var(--nx-ease-out) forwards}
.nx-hero--signature .nx-stats{margin-top:-8px}
.nx-hero--signature .nx-stat{color:#fff;background:linear-gradient(155deg,rgba(18,56,92,.72),rgba(8,31,56,.62));
  border:1px solid rgba(120,180,210,.22);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 60px -30px rgba(0,0,0,.7)}
.nx-hero--signature .nx-stat:hover{border-color:rgba(0,209,193,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 30px 60px -26px rgba(0,209,193,.35)}
.nx-hero--signature .nx-stat p{color:#B8CCDA}
.nx-hero--signature .nx-stat__idx{color:#8FE9EE}
.nx-hero--signature .nx-icon{color:#5EF0E6;background:radial-gradient(circle at 30% 20%,rgba(0,209,193,.28),rgba(10,42,67,.6))}
.nx-hero--signature .nx-sign{color:#AFC6D6;border-top:1px solid rgba(255,255,255,.09);margin-top:44px}

/* =====================================================================
   8. PISTE 03 — « LE PONT ENCADRÉ » (clair, photo encadrée)
   ===================================================================== */
.nx-hero--frame{background:var(--nx-paper)}
.nx-hero--frame .nx-grid{background-image:linear-gradient(rgba(10,42,67,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(10,42,67,.055) 1px,transparent 1px);background-size:58px 58px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 78%);mask-image:linear-gradient(180deg,#000 0%,transparent 78%)}
.nx-hero--frame .nx-aurora{filter:blur(100px)}
.nx-hero--frame .nx-aurora--a{background:radial-gradient(circle,rgba(0,209,193,.30),transparent 65%);top:12%}
.nx-hero--frame .nx-aurora--b{background:radial-gradient(circle,rgba(123,108,255,.26),transparent 65%);top:-6vw}
.nx-hero--frame .nx-aurora--c{background:radial-gradient(circle,rgba(29,123,232,.16),transparent 65%);left:auto;right:18%;top:40%}
.nx-hero--frame .nx-spot{background:radial-gradient(480px circle at var(--mx) var(--my),rgba(0,209,193,.10),transparent 60%)}
.nx-hero--frame .nx-grain{opacity:.045;mix-blend-mode:multiply}

.nx-hero--frame .nx-hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(40px,5vw,76px);padding:clamp(56px,6.4vw,92px) 0 clamp(48px,4.6vw,64px)}
.nx-hero--frame .nx-eyebrow{color:var(--nx-navy);background:#fff;border:1px solid var(--nx-line);box-shadow:0 6px 20px -12px rgba(8,31,56,.25)}
.nx-hero--frame .nx-eyebrow__link{background:#C5D5DF}
.nx-hero--frame .nx-title{color:var(--nx-navy)}
.nx-hero--frame .nx-accent-2{color:transparent;background:linear-gradient(100deg,var(--nx-navy) 0%,var(--nx-navy) 40%,#0E6E8C 55%,var(--nx-navy) 70%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;animation:nxText 6s ease-in-out infinite alternate}
.nx-hero--frame .nx-swoosh path{stroke:url(#nxSwooshL)}
.nx-hero--frame .nx-intro{color:var(--nx-muted)}

.nx-frame-wrap{position:relative;--rx:0deg;--ry:0deg;--gx:50%;--gy:50%;transform:perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .6s var(--nx-ease);transform-style:preserve-3d}
.nx-frame-wrap.is-tilting{transition:transform .12s linear}
.nx-frame{position:relative;border-radius:30px;padding:2px;isolation:isolate;
  background:conic-gradient(from var(--nx-angle),rgba(0,209,193,.9),rgba(29,123,232,.7),rgba(123,108,255,.5),rgba(219,230,237,.9) 60%,rgba(0,209,193,.9));
  animation:nxSpin 8s linear infinite;box-shadow:0 50px 90px -40px rgba(8,31,56,.55),0 18px 40px -24px rgba(8,31,56,.4)}
.nx-frame .nx-photo{border-radius:28px;overflow:hidden;background:var(--nx-night)}
.nx-frame .nx-photo::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,31,56,.62) 0%,rgba(8,31,56,0) 30%,rgba(8,31,56,0) 52%,rgba(8,31,56,.86) 100%)}
.nx-frame .nx-photo::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;
  background:radial-gradient(500px circle at var(--gx) var(--gy),rgba(255,255,255,.16),transparent 45%);opacity:0;transition:opacity .4s}
.nx-frame-wrap.is-tilting .nx-photo::after{opacity:1}
.nx-frame .nx-deck{z-index:2}
.nx-frame__top{position:absolute;z-index:3;left:28px;right:28px;top:26px;transform:translateZ(40px)}
.nx-frame__kicker{margin:0 0 14px;font-size:11px;font-weight:700;letter-spacing:.22em;color:#CDEBF5;text-transform:uppercase}
.nx-pills{display:flex;flex-wrap:wrap;gap:9px}
.nx-pill{display:inline-flex;align-items:center;gap:8px;padding:9px 14px 9px 10px;border-radius:999px;font-size:13px;font-weight:600;color:#fff;
  background:rgba(8,31,56,.45);border:1px solid rgba(208,238,255,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.nx-pill svg{width:16px;height:16px;color:#63EAE5;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nx-frame__bottom{position:absolute;z-index:3;left:30px;right:26px;bottom:28px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.nx-frame__caption{margin:0;color:#fff;font-size:clamp(20px,1.9vw,28px);line-height:1.3;font-weight:650;letter-spacing:-.025em;max-width:430px;text-shadow:0 2px 20px rgba(0,0,0,.35)}
.nx-frame__caption span{display:inline-block}
.nx-js .nx-frame__caption span{opacity:0;transform:translateY(14px);filter:blur(6px)}
.nx-js .is-in .nx-frame__caption span{animation:nxWord .8s var(--nx-ease-out) forwards;animation-delay:calc(var(--i) * 60ms + 1.5s)}
@keyframes nxWord{to{opacity:1;transform:none;filter:none}}
.nx-round{position:relative;flex-shrink:0;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:var(--nx-cyan);
  background:rgba(8,31,56,.5);border:1px solid rgba(204,244,255,.45);backdrop-filter:blur(8px);transition:transform .5s var(--nx-ease),background .3s,color .3s}
.nx-round svg{width:20px;height:20px}
.nx-round::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px dashed rgba(0,209,193,.55);animation:nxRot 14s linear infinite}
@keyframes nxRot{to{transform:rotate(360deg)}}
.nx-round:hover{background:var(--nx-cyan);color:var(--nx-navy);transform:rotate(-45deg) scale(1.06)}
.nx-js .nx-hero--frame .nx-frame-wrap{opacity:0;translate:0 50px;scale:.96}
.nx-js .nx-hero--frame.is-in .nx-frame-wrap{animation:nxFrameIn 1.5s .35s var(--nx-ease-out) forwards}
@keyframes nxFrameIn{to{opacity:1;translate:0 0;scale:1}}
.nx-js .nx-hero--frame .nx-frame .nx-photo img{clip-path:inset(100% 0 0 0);transform:scale(1.12)}
.nx-js .nx-hero--frame.is-in .nx-frame .nx-photo img{animation:nxReveal 1.6s .55s var(--nx-ease-out) forwards}
@keyframes nxReveal{to{clip-path:inset(0 0 0 0);transform:none}}
/* orbite décorative derrière le cadre */
.nx-orbit{position:absolute;z-index:-1;width:300px;height:300px;right:-90px;top:-90px;border-radius:50%;border:1.5px dashed rgba(10,42,67,.16);animation:nxRot 40s linear infinite}
.nx-orbit::before,.nx-orbit::after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:var(--nx-cyan);box-shadow:0 0 0 6px rgba(0,209,193,.15);top:50%;left:-6px}
.nx-orbit::after{background:var(--nx-violet);box-shadow:0 0 0 6px rgba(123,108,255,.15);top:6%;left:70%}
.nx-orbit--2{width:180px;height:180px;right:auto;left:-70px;top:auto;bottom:-60px;border-color:rgba(0,209,193,.3);animation-duration:28s;animation-direction:reverse}
.nx-orbit--2::after{display:none}

.nx-hero--frame .nx-stat{background:rgba(255,255,255,.9);border:1px solid var(--nx-line);box-shadow:0 1px 0 #fff inset,0 18px 40px -30px rgba(8,31,56,.35)}
.nx-hero--frame .nx-stat::after{content:"";position:absolute;left:24px;right:24px;top:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--nx-cyan),var(--nx-blue));transform:scaleX(0);transform-origin:left;transition:transform .6s var(--nx-ease)}
.nx-hero--frame .nx-stat:hover{border-color:#C3E9EC;box-shadow:0 30px 60px -30px rgba(8,31,56,.4)}
.nx-hero--frame .nx-stat:hover::after{transform:scaleX(1)}
.nx-hero--frame .nx-stat p{color:var(--nx-muted)}
.nx-hero--frame .nx-stat__idx{color:#0E8F94}
.nx-hero--frame .nx-icon{color:#0A8A90;background:linear-gradient(150deg,#E9FBFA,#F2F6FF)}
.nx-hero--frame .nx-sign{color:var(--nx-muted);margin-top:40px;border-top:1px solid #DFE9EF}

/* ---------- 9. RESPONSIVE ---------- */
@media (max-width:1199px){
  .nx-hero--signature .nx-stage{width:62vw}
  .nx-hero--signature .nx-hero__grid{grid-template-columns:minmax(0,500px) 1fr}
  .nx-pin__label{font-size:12px;padding:7px 11px 7px 8px}
  .nx-pin__label .nx-ico{width:26px;height:26px}
  .nx-stat{padding:22px 20px;gap:16px}
  .nx-icon{width:52px;height:52px;border-radius:15px}
}
@media (max-width:979px){
  .nx-scope{--nx-header-h:72px}
  .nx-logo{width:146px}
  .nx-nav,.nx-header .nx-btn--sm{display:none}
  .nx-burger{display:inline-flex}
  /* Piste 01 : la photo passe sous le texte, pleine largeur, ratio 3:2 conservé */
  .nx-hero--signature .nx-hero__grid{grid-template-columns:1fr;min-height:0;padding-bottom:0}
  .nx-hero--signature .nx-stage{position:relative;right:auto;width:auto;margin:8px calc(-1 * var(--nx-gutter)) 0}
  .nx-hero--signature .nx-photo{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 80%,transparent 100%);-webkit-mask-composite:source-over;mask-composite:add}
  .nx-hero--signature .nx-stats{margin-top:-28px}
  .nx-hero--frame .nx-hero__grid{grid-template-columns:1fr}
  .nx-orbit{right:-40px;top:-60px;width:200px;height:200px}
  .nx-streams{display:none}
  .nx-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .nx-stat{flex-direction:column;align-items:flex-start;gap:14px;padding:20px 18px;min-height:0}
  .nx-stat__num{font-size:34px}
}
@media (max-width:699px){
  .nx-title{font-size:clamp(36px,10.6vw,44px)}
  .nx-eyebrow{font-size:11px;letter-spacing:.12em;gap:10px}
  .nx-actions{flex-direction:column;align-items:stretch}
  .nx-actions .nx-btn{justify-content:space-between}
  .nx-stats{grid-template-columns:1fr}
  .nx-stat{flex-direction:row;align-items:center}
  .nx-pin__stem{height:30px}
  .nx-pin__label{bottom:36px;font-size:11px;gap:7px;padding:6px 10px 6px 7px;border-radius:11px}
  .nx-pin__label small{display:none}
  .nx-pin__label .nx-ico{width:22px;height:22px;border-radius:7px}
  .nx-pin__label .nx-ico svg{width:13px;height:13px}
  .nx-hero--signature .nx-tag{display:none}
  .nx-frame{border-radius:24px}
  .nx-frame .nx-photo{border-radius:22px}
  .nx-frame__top{left:18px;right:18px;top:18px}
  .nx-frame__kicker{font-size:10px;margin-bottom:10px}
  .nx-pill{font-size:12px;padding:7px 11px 7px 8px}
  .nx-frame__bottom{left:18px;right:16px;bottom:16px}
  .nx-frame__caption{font-size:18px}
  .nx-round{width:44px;height:44px}
  .nx-sign{letter-spacing:.14em;font-size:10.5px;gap:10px}
  .nx-sign i{width:22px}
  .nx-orbit{display:none}
}
@media (max-width:420px){ .nx-hero--frame .nx-frame__top .nx-frame__kicker{display:none} }

/* ---------- 10. ACCESSIBILITÉ : mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  .nx-scope *,.nx-scope *::before,.nx-scope *::after{animation:none!important;transition:none!important}
  .nx-js .nx-scope [data-nx-in],.nx-js .nx-stat,.nx-js .nx-pin,.nx-js .nx-tag,.nx-js .nx-photo,.nx-js .nx-frame-wrap,
  .nx-js .nx-title .nx-ln>span,.nx-js .nx-frame__caption span,.nx-js .nx-logo .nx-l,.nx-js .nx-logo .nx-dot,.nx-js .nx-nav a{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;translate:none!important;scale:none!important}
  .nx-js .nx-photo img,.nx-js .nx-logo .nx-wave{clip-path:none!important;transform:none!important}
  .nx-js .nx-swoosh path,.nx-js .nx-icon svg [pathLength]{stroke-dashoffset:0!important}
  .nx-js .nx-sign i{transform:none!important}
  .nx-pin{transform:translate(-50%,-50%)!important}
  .nx-grain,.nx-streams,.nx-deck{display:none}
}
/* Pause des animations hors écran (perf) */
.nx-hero.is-paused *,.nx-hero.is-paused *::before,.nx-hero.is-paused *::after{animation-play-state:paused!important}