/* =====================================================================
   Ï-NAYA — SECTION « POURQUOI Ï-NAYA »
   ===================================================================== */

/* ---------- 0. SOCLE COMMUN (identique au hero : peut être chargé 2 fois) ---------- */
.nx-scope{--nx-navy:#0A2A43;--nx-night:#081F38;--nx-cyan:#00D1C1;--nx-cyan-2:#22E4EC;--nx-teal:#007D79;--nx-blue:#1D7BE8;--nx-violet:#7B6CFF;
  --nx-paper:#F7FAFC;--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);
  font-family:var(--nx-font);color:var(--nx-navy);-webkit-font-smoothing:antialiased}
.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}
:where(.nx-scope) h2,:where(.nx-scope) h3,:where(.nx-scope) h4,:where(.nx-scope) p{margin:0}
.nx-scope :focus-visible{outline:3px solid var(--nx-cyan);outline-offset:4px;border-radius:12px}
@property --nx-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes nxSpin{to{--nx-angle:360deg}}
@keyframes nxDraw{to{stroke-dashoffset:0}}
@keyframes nxPing{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.9);opacity:0}}
@keyframes nxRot{to{transform:rotate(360deg)}}

.nx-btn{--h:54px;position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:14px;height:var(--h);border-radius:999px;
  font:700 14.5px/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)}
.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 8px 0 24px;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 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;
  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 1.5s ease-in-out infinite}
@keyframes nxSheen{0%,70%{background-position:130% 0}100%{background-position:-130% 0}}
.nx-btn--primary:hover{box-shadow:0 20px 44px -12px rgba(0,209,193,.9),0 0 0 6px rgba(0,209,193,.16)}
.nx-btn--ghost{padding:0 8px 0 24px;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:var(--nx-navy);color:#fff}
.nx-btn--ghost:hover{box-shadow:0 16px 36px -16px rgba(8,31,56,.45)}


/* ---------- SECTION « POURQUOI Ï-NAYA » ---------- */
.nxp{--p-ink:#0B2238;--p-txt:#566B7D;--p-teal:#14C2B4;--p-teal-d:#0E9F94;--p-cyan:#22E0D0;
  position:relative;isolation:isolate;overflow:hidden;background:#F5F9FC;padding:clamp(56px,6.5vw,104px) 0}
.nxp-shell{width:min(1520px,calc(100% - 2 * clamp(16px,5vw,96px)));margin-inline:auto;display:grid;grid-template-columns:minmax(0,1.48fr) minmax(0,1fr);gap:clamp(24px,2.6vw,44px);align-items:stretch;position:relative;z-index:2}
.nxp-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.nxp-bg::before{content:"";position:absolute;left:-12%;top:-10%;width:50vw;height:50vw;border-radius:50%;background:radial-gradient(circle,rgba(34,224,208,.12),transparent 65%);filter:blur(40px)}
.nxp-bg::after{content:"";position:absolute;inset:-60px;opacity:.035;mix-blend-mode:multiply;
  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")}

/* Colonne gauche */
.nxp-eyebrow{font-size:13px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--p-teal-d);margin-bottom:clamp(18px,2vw,28px)}
.nxp-title{font-size:clamp(32px,3.5vw,58px);line-height:1.08;font-weight:800;letter-spacing:-.045em;color:var(--p-ink)}
.nxp-title .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.nxp-title .ln>span{display:inline-block}
.nxp-title em{font-style:normal;color:transparent;background:linear-gradient(95deg,#14C2B4,#22E0D0 50%,#14C2B4);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;animation:nxpText 6s ease-in-out infinite alternate}
@keyframes nxpText{to{background-position:100% 0}}
.nxp-lead{margin-top:clamp(18px,2vw,28px);max-width:800px;font-size:clamp(15.5px,1.25vw,20px);line-height:1.75;color:var(--p-txt)}
.nxp-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1vw,16px);margin-top:clamp(24px,2.6vw,40px)}
.nxp-card{--cx:50%;--cy:0%;position:relative;display:flex;gap:clamp(14px,1.4vw,24px);align-items:flex-start;padding:clamp(18px,1.4vw,24px);border-radius:22px;background:#fff;border:1px solid #EAF0F5;
  box-shadow:0 20px 44px -34px rgba(11,34,56,.35);overflow:hidden;isolation:isolate;transition:transform .5s var(--nx-ease),box-shadow .5s,border-color .4s}
.nxp-card::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .45s;background:radial-gradient(340px circle at var(--cx) var(--cy),rgba(34,224,208,.12),transparent 60%)}
.nxp-card:hover{transform:translateY(-5px);border-color:#BFEDE7;box-shadow:0 30px 56px -34px rgba(11,34,56,.45)}
.nxp-card:hover::after{opacity:1}
.nxp-ico{flex-shrink:0;width:clamp(58px,4.6vw,76px);aspect-ratio:1;border-radius:18px;display:grid;place-items:center;background:linear-gradient(150deg,#E2F9F5,#D2F3EE);color:#0FA597;transition:transform .5s var(--nx-ease)}
.nxp-card:hover .nxp-ico{transform:rotate(-6deg) scale(1.06)}
.nxp-ico svg{width:46%;height:46%}
.nxp-ico .s{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nxp-ico .f{fill:currentColor}
.nxp-ico .spin{transform-origin:12px 12px;animation:nxRot 9s linear infinite}
.nxp-ico .bar{transform-box:fill-box;transform-origin:50% 100%;animation:nxpBar 2.6s ease-in-out infinite}
.nxp-ico .bar:nth-child(2){animation-delay:.3s}.nxp-ico .bar:nth-child(3){animation-delay:.6s}
@keyframes nxpBar{50%{transform:scaleY(.6)}}
.nxp-ico .lay{animation:nxpLay 3s ease-in-out infinite}
.nxp-ico .lay:nth-child(2){animation-delay:.2s}.nxp-ico .lay:nth-child(3){animation-delay:.4s}
@keyframes nxpLay{50%{transform:translateY(-1.2px)}}
.nxp-card h3{font-size:clamp(17px,1.3vw,21px);font-weight:800;letter-spacing:-.02em;color:var(--p-ink);margin-bottom:8px;padding-top:6px}
.nxp-card p{font-size:clamp(13.5px,1vw,16px);line-height:1.65;color:var(--p-txt)}
.nxp-diff{display:flex;align-items:center;gap:clamp(14px,1.6vw,26px);margin-top:clamp(10px,1vw,16px);padding:clamp(14px,1.2vw,18px) clamp(16px,1.4vw,22px);border-radius:20px;
  background:linear-gradient(90deg,#E5F8F5,#EEFBF9 60%,#E3F7F4);border:1px solid #D3F0EB}
.nxp-diff__star{position:relative;flex-shrink:0;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#C9F1EB;color:#0FA597}
.nxp-diff__star svg{width:22px;height:22px;fill:currentColor;animation:nxpStar 4s ease-in-out infinite}
@keyframes nxpStar{0%,80%,100%{transform:none}90%{transform:rotate(72deg) scale(1.15)}}
.nxp-diff__star::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid rgba(15,165,151,.35);animation:nxPing 2.8s ease-out infinite}
.nxp-diff i{width:1px;align-self:stretch;background:#BFE6E0}
.nxp-diff p{font-size:clamp(13.5px,1.05vw,17px);color:#3D5466}
.nxp-diff b{color:var(--p-ink)}

/* Panneau sombre */
.nxp-panel{position:relative;border-radius:32px;overflow:hidden;isolation:isolate;color:#fff;padding:clamp(24px,2.6vw,46px) clamp(22px,2.6vw,46px) 0;display:flex;flex-direction:column;
  background:radial-gradient(ellipse 80% 55% at 50% 78%,rgba(34,224,208,.22),transparent 65%),radial-gradient(ellipse 60% 40% at 100% 0%,rgba(34,224,208,.12),transparent 60%),linear-gradient(165deg,#0F3A55 0%,#0B2C45 45%,#082136 100%);
  box-shadow:0 50px 90px -50px rgba(8,33,54,.9)}
.nxp-panel::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(140,240,230,.18) 1px,transparent 1.2px);background-size:14px 14px;
  -webkit-mask-image:radial-gradient(ellipse 60% 45% at 50% 75%,#000,transparent 75%);mask-image:radial-gradient(ellipse 60% 45% at 50% 75%,#000,transparent 75%)}
.nxp-panel__head{display:flex;justify-content:space-between;align-items:center}
.nxp-panel h3{font-size:clamp(20px,1.7vw,28px);font-weight:800;letter-spacing:-.025em}
.nxp-dots{display:flex;gap:9px}
.nxp-dots span{width:11px;height:11px;border-radius:50%;background:rgba(34,224,208,.35);animation:nxpDot 3.6s ease-in-out infinite}
.nxp-dots span:nth-child(1){background:var(--p-cyan)}
.nxp-dots span:nth-child(2){animation-delay:1.2s}.nxp-dots span:nth-child(3){animation-delay:2.4s}
@keyframes nxpDot{0%,30%,100%{transform:scale(1)}15%{transform:scale(1.35);background:var(--p-cyan)}}
.nxp-stats{display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(16px,2vw,30px)}
.nxp-stat{position:relative;padding:clamp(14px,1.4vw,22px) clamp(6px,1vw,16px) clamp(16px,1.6vw,26px) 4px}
.nxp-stat:nth-child(even){padding-left:clamp(14px,2vw,32px)}
.nxp-stat:nth-child(even)::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;background:rgba(160,220,230,.18)}
.nxp-stat::after{content:"";position:absolute;left:0;right:12%;bottom:0;height:1px;background:linear-gradient(90deg,rgba(160,220,230,.28),rgba(160,220,230,0))}
.nxp-stat:nth-child(even)::after{left:clamp(14px,2vw,32px);right:0}
.nxp-stat:nth-child(n+3)::after{opacity:.6}
.nxp-stat b{display:block;font-size:clamp(40px,3.6vw,64px);font-weight:800;letter-spacing:-.04em;line-height:1;color:transparent;background:linear-gradient(180deg,#5BF5E6,#18D0C1);-webkit-background-clip:text;background-clip:text;font-variant-numeric:tabular-nums}
.nxp-stat span{display:block;margin-top:10px;font-size:clamp(13.5px,1.1vw,18px);color:#D3E4EE}

/* Réseau animé */
.nxp-net{position:relative;margin:clamp(10px,1.4vw,24px) calc(-1 * clamp(10px,1.6vw,26px)) 0;flex:1;min-height:260px}
.nxp-net svg{display:block;width:100%;height:100%;overflow:visible}
.nxp-net .wire{fill:none;stroke:rgba(80,230,215,.55);stroke-width:1.4}
.nxp-net .wire.dim{stroke:rgba(80,230,215,.25)}
.nxp-net .pulse{fill:none;stroke:#C8FFF8;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:14 400;filter:drop-shadow(0 0 4px #22E0D0);animation:nxpPulse var(--t,3s) linear infinite;animation-delay:var(--d,0s)}
@keyframes nxpPulse{from{stroke-dashoffset:414}to{stroke-dashoffset:0}}
.nxp-net .bead{fill:#7FF6EA;filter:drop-shadow(0 0 5px #22E0D0)}
.nxp-net .bead{animation:nxpBead 2.4s ease-in-out infinite}
@keyframes nxpBead{50%{opacity:.35}}
.nxp-net .hex{fill:url(#nxpHexG);stroke:rgba(120,240,228,.45);stroke-width:1.4}
.nxp-net .hexTop{fill:url(#nxpHexT);opacity:.7}
.nxp-net .lbl{font:700 15px var(--nx-font);fill:#EAF7FB;text-anchor:middle}
.nxp-net .ic{fill:none;stroke:#3FE6D6;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.nxp-net .icf{fill:#3FE6D6}
.nxp-node{transform-box:fill-box;transform-origin:center;animation:nxpFloat 6s ease-in-out infinite;animation-delay:calc(var(--n,0) * -1.5s)}
@keyframes nxpFloat{50%{translate:0 -6px}}
.nxp-core{transform-box:fill-box;transform-origin:center}
.nxp-core .glow{fill:url(#nxpCoreGlow);animation:nxpCore 3s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes nxpCore{50%{transform:scale(1.15);opacity:.7}}
.nxp-core .tile{fill:url(#nxpTileG);stroke:#E8FFFC;stroke-width:1.5}
.nxp-core .tileSide{fill:#11A89B}
.nxp-core text{font:800 46px var(--nx-font);fill:#0B2C45;text-anchor:middle}

/* Entrées */
.nx-js .nxp [data-in]{opacity:0;translate:0 26px}
.nx-js .nxp.is-in [data-in]{animation:nxpUp 1s cubic-bezier(.16,1,.3,1) forwards;animation-delay:var(--d,0s)}
@keyframes nxpUp{to{opacity:1;translate:0 0}}
.nx-js .nxp .nxp-title .ln>span{transform:translateY(110%)}
.nx-js .nxp.is-in .nxp-title .ln>span{animation:nxpRise 1.1s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(var(--i) * 130ms + .1s)}
@keyframes nxpRise{to{transform:none}}
.nx-js .nxp .wire{stroke-dasharray:420;stroke-dashoffset:420}
.nx-js .nxp.is-in .wire{animation:nxpWire 1.8s cubic-bezier(.45,0,.2,1) forwards;animation-delay:calc(var(--w,0) * 60ms + .9s)}
@keyframes nxpWire{to{stroke-dashoffset:0}}
.nx-js .nxp .nxp-node,.nx-js .nxp .nxp-core{opacity:0}
.nx-js .nxp.is-in .nxp-core{animation:nxpPop .8s .6s cubic-bezier(.3,1.5,.5,1) forwards}
.nx-js .nxp.is-in .nxp-node{animation:nxpPop .8s cubic-bezier(.3,1.5,.5,1) forwards,nxpFloat 6s 2s ease-in-out infinite;animation-delay:calc(var(--n) * 150ms + 1.2s),calc(var(--n) * -1.5s)}
@keyframes nxpPop{from{opacity:0;scale:.6}to{opacity:1;scale:1}}

/* Responsive */
@media (max-width:1100px){.nxp-shell{grid-template-columns:1fr}.nxp-panel{max-width:720px;width:100%;justify-self:center}}
@media (max-width:640px){.nxp-grid{grid-template-columns:1fr}.nxp-net{min-height:220px}.nxp-stat span{font-size:13px}.nxp-net .lbl{font-size:20px}}
@media (prefers-reduced-motion:reduce){
  .nxp *,.nxp *::before,.nxp *::after{animation:none!important;transition:none!important}
  .nx-js .nxp [data-in],.nx-js .nxp .nxp-node,.nx-js .nxp .nxp-core{opacity:1!important;translate:none!important}
  .nx-js .nxp .nxp-title .ln>span{transform:none!important}
  .nx-js .nxp .wire{stroke-dashoffset:0!important}
}
.nxp.is-paused *,.nxp.is-paused *::before,.nxp.is-paused *::after{animation-play-state:paused!important}