/* ============================================================
   NUTRI.N°1 — "4K Immersion" layer
   Decorative only: no copy changed, no palette changed.
   Every colour below reuses the site's existing tokens:
   green  #29cf70 / #36dc7b / #38e27e / #9be766
   gold   #e5b85a / #e9c568
   dark   #061b13 / #03140c / #04170e / #0a291c
   cream  #f5f4ed / #f5f6ef
   ============================================================ */
:root{
  --n4k-g:#29cf70;--n4k-g2:#36dc7b;--n4k-g3:#38e27e;--n4k-mint:#9be766;
  --n4k-gold:#e5b85a;--n4k-gold2:#e9c568;
  --n4k-d:#061b13;--n4k-d2:#03140c;--n4k-cream:#f5f4ed;--n4k-ink:#0b2117;
  --n4k-e:cubic-bezier(.16,1,.3,1);--n4k-e2:cubic-bezier(.22,.61,.36,1);
}
html.n4k{scroll-behavior:auto}
html.n4k body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html.n4k img{-webkit-user-drag:none}
.n4k-off,.n4k-reduce .n4k-fx,.n4k-reduce #n4k-dust,.n4k-reduce #n4k-cursor{display:none!important}

/* ---------- 1. full-page cinematic layers ---------- */
#n4k-fx{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden}
#n4k-dust{position:fixed;inset:0;z-index:39;pointer-events:none;width:100%;height:100%}
.n4k-grain{position:absolute;inset:-120%;opacity:.05;mix-blend-mode:overlay;will-change:transform;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.9'/></svg>");
  animation:n4k-grain 1.1s steps(5) infinite}
@keyframes n4k-grain{0%{transform:translate3d(0,0,0)}20%{transform:translate3d(-2%,1%,0)}40%{transform:translate3d(1%,-2%,0)}60%{transform:translate3d(-1%,2%,0)}80%{transform:translate3d(2%,1%,0)}100%{transform:translate3d(0,0,0)}}
.n4k-vig{position:absolute;inset:0;box-shadow:inset 0 0 190px #03140c38,inset 0 0 40px #03140c1c;opacity:.9}
.n4k-rays{position:absolute;inset:-30%;mix-blend-mode:screen;opacity:.5}
.n4k-ray{position:absolute;top:-25%;width:38vw;height:150%;filter:blur(36px);opacity:.28;will-change:transform;backface-visibility:hidden;
  background:linear-gradient(180deg,#29cf7000,#29cf7024 32%,#e5b85a12 60%,#29cf7000);transform-origin:top center}
.n4k-ray.r1{left:4%;animation:n4k-sway 26s ease-in-out infinite alternate}
.n4k-ray.r2{left:52%;width:26vw;animation:n4k-sway 34s ease-in-out -8s infinite alternate-reverse;opacity:.22}
.n4k-ray.r3{left:82%;width:22vw;animation:n4k-sway 30s ease-in-out -14s infinite alternate;opacity:.16}
@keyframes n4k-sway{0%{transform:rotate(7deg) translate3d(0,0,0) scaleY(1)}100%{transform:rotate(-5deg) translate3d(3vw,2vh,0) scaleY(1.1)}}
/* one-shot power-on scan when the page appears */
.n4k-scan{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:0}
html.n4k-boot .n4k-scan{opacity:1}
.n4k-scan i{position:absolute;left:0;right:0;height:26vh;top:-30vh;
  background:linear-gradient(180deg,#29cf7000,#29cf7018 40%,#e5b85a12 62%,#29cf7000);
  filter:blur(6px)}
html.n4k-boot .n4k-scan i{animation:n4k-scan .6s var(--n4k-e2) forwards}
@keyframes n4k-scan{0%{top:-30vh;opacity:1}70%{opacity:1}100%{top:110vh;opacity:0}}

/* ---------- 2. scroll progress + section rail ---------- */
#n4k-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:52;pointer-events:none;background:#03140c40}
#n4k-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#29cf70,#9be766 55%,#e5b85a);
  box-shadow:0 0 14px #29cf70cc;position:relative}
#n4k-progress i:after{content:"";position:absolute;right:-3px;top:-2px;width:8px;height:8px;border-radius:50%;
  background:#e5b85a;box-shadow:0 0 16px #e5b85a}
#n4k-rail{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:51;display:flex;flex-direction:column;
  align-items:center;gap:12px;padding:12px 7px;border-radius:99px;background:#03140c33;border:1px solid #ffffff12;
  backdrop-filter:blur(9px);opacity:0;transition:opacity .6s}
html.n4k-lit #n4k-rail{opacity:1}
#n4k-rail u{position:relative;width:7px;height:7px;border-radius:50%;background:#ffffff33;cursor:pointer;
  transition:transform .4s var(--n4k-e),background .4s;text-decoration:none;display:block}
#n4k-rail u:hover{transform:scale(1.7);background:#9be766}
#n4k-rail u.on{background:#29cf70;box-shadow:0 0 0 4px #29cf7024,0 0 14px #29cf70;height:9px;width:9px}
#n4k-rail:before{content:"";position:absolute;top:12px;bottom:12px;width:1px;background:#ffffff1f}
#n4k-rail:after{content:"";position:absolute;left:50%;top:12px;width:1px;transform:translateX(-50%);
  height:calc(var(--n4k-railp,0) * (100% - 24px));background:linear-gradient(#29cf70,#e5b85a);box-shadow:0 0 10px #29cf70aa}
@media (max-width:1180px){#n4k-rail{display:none}}

/* ---------- 3. custom cursor (fine pointers only) ---------- */
#n4k-cursor{position:fixed;left:0;top:0;z-index:58;pointer-events:none;mix-blend-mode:screen;
  transform:translate3d(-100px,-100px,0);opacity:0;transition:opacity .4s}
html.n4k-curs #n4k-cursor{opacity:1}
#n4k-cursor .r{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:1px solid #29cf7080;transition:transform .3s var(--n4k-e),border-color .3s,background .3s}
#n4k-cursor .d{position:absolute;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;
  background:#e5b85a;box-shadow:0 0 12px #e5b85a}
#n4k-cursor .h{position:absolute;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;
  background:radial-gradient(circle,#29cf7014,transparent 68%);transition:transform .5s var(--n4k-e)}
html.n4k-curs-hot #n4k-cursor .r{transform:scale(1.75);border-color:#e5b85acc;background:#29cf700d}
@media (hover:none),(max-width:900px){#n4k-cursor{display:none}}

/* ---------- 4. navigation ---------- */
.n4k-stuck .nav{height:64px;background:#061b13f7;box-shadow:0 20px 60px #03140c59}
.nav{transition:height .45s var(--n4k-e),background .45s,box-shadow .45s;overflow:hidden}
.nav .brand img{border-radius:50%;transition:transform .6s var(--n4k-e),box-shadow .6s}
.nav:hover .brand img{transform:rotate(-8deg) scale(1.06);box-shadow:0 0 0 4px #29cf701f,0 0 26px #29cf7055}
.n4k-stuck .brand img{width:40px;height:40px}
.links{position:relative}
.links a{position:relative;z-index:1;padding:8px 9px;margin:-8px -9px;border-radius:99px;transition:color .3s}
.n4k-navind{position:absolute;z-index:0;left:0;top:50%;height:30px;translate:0 -50%;border-radius:99px;
  background:#29cf7014;border:1px solid #29cf7033;opacity:0;
  transition:transform .55s var(--n4k-e),width .55s var(--n4k-e),opacity .35s;pointer-events:none}
.links a.n4k-cur{color:#fff}
.btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .4s var(--n4k-e),box-shadow .4s var(--n4k-e),filter .4s}
.btn:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,#ffffff8a 47%,transparent 64%);
  transform:translateX(-130%);transition:transform .85s var(--n4k-e2)}
.btn:hover:after{transform:translateX(130%)}
.btn:hover{box-shadow:0 16px 40px #29cf7040}
.btn.green:hover{filter:brightness(1.08)}
.btn:active{transform:scale(.97)}

/* ---------- 5. hero: photo plate, Ken Burns, depth ---------- */
.hero,.p2f-hero,.p2x-hero,.v5-hero{isolation:isolate}
.n4k-photo{position:absolute;inset:0;z-index:-1;overflow:hidden;opacity:0;transition:opacity .55s var(--n4k-e);
  transform:translate3d(0,calc(var(--n4k-syp,0) * 1px),0);will-change:transform}
.n4k-photo-on .n4k-photo{opacity:var(--n4k-po,1)}
.n4k-photo img{width:100%;height:115%;object-fit:cover;object-position:var(--n4k-pos,50% 45%);display:block;will-change:transform;backface-visibility:hidden;
  transform:scale(1.06);animation:n4k-kb var(--n4k-kbd,30s) ease-in-out infinite alternate;
  filter:saturate(1.08) contrast(1.06) brightness(var(--n4k-kbb,.9))}
.n4k-photo:before{content:"";position:absolute;inset:0;background:var(--n4k-sh,linear-gradient(180deg,#061b13e0,#061b13b8 42%,#03140ce8))}
.n4k-photo:after{content:"";position:absolute;inset:0;mix-blend-mode:soft-light;
  background:radial-gradient(circle at 74% 22%,#29cf703d,transparent 46%),radial-gradient(circle at 12% 88%,#e5b85a2e,transparent 42%)}
.n4k-photo.n4k-photo--soft{opacity:0;transition:opacity .8s}
/* hero : la couche est écrite directement dans le HTML avec un LQIP (miniature
   floutée en base64) — elle est donc peinte dès le tout premier rendu, sans
   attendre le JS ni le téléchargement de la photo plein format. Aucun fondu :
   plus de trou noir de 0,5 à 1 s à l'arrivée sur le site. */
.n4k-photo{background-size:cover;background-position:var(--n4k-pos,50% 45%);background-repeat:no-repeat}
.n4k-photo--hero{opacity:var(--n4k-po,1);transition:none;background-size:cover}
.n4k-photo--hero img{opacity:1}
@keyframes n4k-kb{0%{transform:scale(1.04) translate3d(-1.2%,-.8%,0)}100%{transform:scale(1.16) translate3d(1.4%,1%,0)}}
/* hero content depth */
.hero .wrap,.p2f-hero .wrap,.v5-hero .wrap{position:relative;z-index:2;transform:translate3d(calc(var(--n4k-mx,0) * -10px),calc(var(--n4k-my,0) * -7px),0);transition:transform .9s var(--n4k-e)}
.hero .eyebrow,.p2f-badge,.v5-kicker{position:relative;overflow:hidden;isolation:isolate}
.hero .eyebrow:after,.p2f-badge:after,.v5-kicker:after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,transparent 35%,#9be7663d 50%,transparent 65%);transform:translateX(-120%);
  animation:n4k-sweep 7s var(--n4k-e2) infinite}
@keyframes n4k-sweep{0%,70%{transform:translateX(-120%)}92%,100%{transform:translateX(120%)}}

/* ---------- 6. reveal engine ---------- */
.n4k-rv{opacity:0;transform:translate3d(0,var(--n4k-rvy,22px),0) scale(.99);
  transition:opacity .38s var(--n4k-e),transform .42s var(--n4k-e);transition-delay:var(--n4k-rvd,0ms);will-change:opacity,transform}
.n4k-rv.n4k-in{opacity:1;transform:translate3d(0,0,0) scale(1)}
.n4k-rv.n4k-in.n4k-tilt{transform:perspective(1150px) rotateX(var(--n4k-rx,0deg)) rotateY(var(--n4k-ry,0deg)) translate3d(0,var(--n4k-ty,0px),0) scale(var(--n4k-sc,1))}
/* word mask reveal (characters are preserved 1:1)
   overflow is kept visible so tracked negative letter-spacing never clips the
   last glyph (e.g. the final "e." in "de l'Afrique.") and descenders stay whole */
.n4k-w{display:inline-block;overflow:visible;vertical-align:baseline;padding-bottom:0;margin-bottom:0;white-space:nowrap}
/* no blur and no rotation here on purpose: headlines are tracked tight
   (letter-spacing up to -.07em), so a blur fuses the glyphs into one blob that
   looks like every letter is piled on a single point before spreading apart.
   A short, straight rise keeps each letter legible from the first frame.
   The stagger is capped so a long line never trails for seconds. */
.n4k-w>i{display:inline-block;font-style:inherit;transform:translate3d(0,62%,0);opacity:0;
  transition:transform .34s var(--n4k-e),opacity .22s ease;
  transition-delay:calc(var(--w,0) * 11ms);transition-delay:min(calc(var(--w,0) * 11ms),170ms)}
.n4k-in .n4k-w>i{transform:none;opacity:1}
/* calm block reveal for gradient-clipped text (CTA headline & copy):
   no per-word split, no blur, no scale — just a short, smooth fade-up */
.n4k-rv.n4k-soft{opacity:0;transform:translate3d(0,12px,0);
  transition:opacity .32s var(--n4k-e),transform .36s var(--n4k-e);transition-delay:var(--n4k-rvd,0ms);will-change:opacity,transform}
.n4k-rv.n4k-soft.n4k-in{opacity:1;transform:none}
.ctaBox .n4k-soft{backface-visibility:hidden}
.ctaBox h2.n4k-soft{padding-bottom:.06em}
@media(prefers-reduced-motion:reduce){.n4k-rv.n4k-soft{opacity:1!important;transform:none!important}}
/* headings / kickers */
.head,.v5-head,.p2f-head,.p2x-head{position:relative}
.head .kicker,.v5-head small,.p2f-head small,.p2x-head small{display:inline-flex;align-items:center;gap:8px}
.head .kicker:before,.v5-head small:before,.p2f-head small:before,.p2x-head small:before{content:"";width:6px;height:6px;
  border-radius:50%;background:var(--n4k-g);box-shadow:0 0 0 0 #29cf7066;animation:n4k-beat 2.6s var(--n4k-e2) infinite}
@keyframes n4k-beat{0%{box-shadow:0 0 0 0 #29cf7066}60%{box-shadow:0 0 0 9px #29cf7000}100%{box-shadow:0 0 0 0 #29cf7000}}
.head h2:after,.v5-head h2:after,.p2f-head h2:after{content:"";display:block;height:2px;width:0;margin-top:.34em;border-radius:2px;
  background:linear-gradient(90deg,#29cf70,#e5b85a);box-shadow:0 0 14px #29cf7080;transition:width .6s var(--n4k-e) .14s}
.n4k-in h2:after{width:clamp(90px,16%,220px)}

/* ---------- 7. cards: spotlight, glow border, lift ---------- */
.n4k-card{position:relative;isolation:isolate;transition:opacity .38s var(--n4k-e),transform .42s var(--n4k-e),box-shadow .3s var(--n4k-e),border-color .3s}
.n4k-card:before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;pointer-events:none;opacity:0;
  background:radial-gradient(340px circle at var(--n4k-mx2,50%) var(--n4k-my2,50%),#29cf702b,transparent 62%);
  transition:opacity .5s}
.n4k-card:hover:before{opacity:1}
.n4k-card:after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;
  background:linear-gradient(130deg,#29cf70b0,#9be76640 38%,#e5b85a90 72%,#29cf7000);
  -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;transition:opacity .55s}
.n4k-card:hover:after{opacity:1}
.n4k-card:hover{box-shadow:0 30px 70px #03140c33}
.dark .n4k-card:hover,.p2f-dark .n4k-card:hover,.v5-dark .n4k-card:hover{box-shadow:0 34px 80px #03140c73}
.n4k-card > *{position:relative;z-index:1}
.n4k-lite{position:relative;transition:transform .4s var(--n4k-e),box-shadow .4s var(--n4k-e),border-color .4s,background-color .4s,color .4s}
.n4k-lite:hover{box-shadow:0 24px 56px #03140c4d}
.node.n4k-lite:hover,.sat.n4k-lite:hover,.p2f-node.n4k-lite:hover{border-color:#29cf7055;background:#29cf7014}
.n4k-lite.n4k-tilt{transform:perspective(1100px) rotateX(var(--n4k-rx,0deg)) rotateY(var(--n4k-ry,0deg)) translate3d(0,-5px,0) scale(1.015)}
/* numbered icon badge */
.ico,.p2f-num,.p2x-num{position:relative;overflow:hidden;transition:transform .6s var(--n4k-e),box-shadow .6s,color .4s}
.ico:after,.p2f-num:after,.p2x-num:after{content:"";position:absolute;inset:-40%;
  background:linear-gradient(115deg,transparent 42%,#ffffff70 50%,transparent 58%);transform:translateX(-140%)}
.n4k-in .ico:after,.n4k-in .p2f-num:after,.n4k-card:hover .ico:after{animation:n4k-shine .6s var(--n4k-e2) .12s}
@keyframes n4k-shine{0%{transform:translateX(-140%)}100%{transform:translateX(140%)}}
.n4k-card:hover .ico,.n4k-card:hover .p2f-num{transform:translateY(-2px) rotate(-6deg) scale(1.06);box-shadow:0 12px 26px #29cf702e}
/* chip sweep */
.chip{position:relative;overflow:hidden}
.chip:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 38%,#e5b85a3d 52%,transparent 66%);
  transform:translateX(-120%);animation:n4k-sweep 9s var(--n4k-e2) 1.4s infinite}
/* team photo placeholders */
.photo,.v5-photo,.p2x-photo{position:relative;overflow:hidden}
.photo:after,.v5-photo:after{content:"";position:absolute;inset:0;transform:translateX(-120%);
  background:linear-gradient(115deg,transparent 40%,#ffffff6b 50%,transparent 60%);transition:transform 1.1s var(--n4k-e2)}
.n4k-card:hover .photo:after,.n4k-card:hover .v5-photo:after{transform:translateX(120%)}
.photo>*,.v5-photo>*{position:relative;z-index:1}

/* ---------- 8. decorative thumbnails (fields + Togolese plates) ---------- */
.n4k-thumb{position:absolute;top:14px;right:14px;width:62px;height:62px;border-radius:50%;overflow:hidden;z-index:2;
  pointer-events:none;box-shadow:0 12px 30px #03140c4d,0 0 0 1px #29cf7047,0 0 0 6px #29cf700f;
  opacity:0;transform:scale(.72) rotate(-10deg);transition:opacity .32s var(--n4k-e),transform .36s var(--n4k-e);transition-delay:var(--n4k-rvd,0ms)}
.n4k-in .n4k-thumb{opacity:1;transform:none}
.p2f-chain-card.n4k-band .n4k-thumb,.n4k-in .n4k-band .n4k-thumb{opacity:1;transform:none;transition:filter .6s}
.p2f-chain-card.n4k-band:hover .n4k-thumb{filter:brightness(1.16) saturate(1.1)}
.n4k-thumb img{width:100%;height:100%;object-fit:cover;transform:scale(1.14);animation:n4k-kb 24s ease-in-out infinite alternate}
.n4k-thumb:after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,#061b1340,#29cf701f);mix-blend-mode:soft-light}
.n4k-thumb.n4k-thumb--lg{width:104px;height:104px;top:18px;right:18px}
.card,.box,.loopbox,.p2f-card,.p2f-panel,.p2f-chain-card,.p2f-icon,.v5-person,.person{position:relative}
/* the existing copy is never hidden behind a thumbnail: the card reserves a clean
   gutter for it, and chain cards get the photo as a top band instead */
.n4k-hasthumb{padding-right:84px}
.n4k-hasthumb.n4k-thumb-lg{padding-right:130px}
.p2f-chain-card.n4k-hasthumb{padding:58px 17px 22px}
.p2f-chain-card.n4k-band .n4k-thumb{top:0;left:0;right:0;width:auto;height:46px;border-radius:21px 21px 0 0;
  box-shadow:none;opacity:1;transform:none}
.p2f-chain-card.n4k-band .n4k-thumb:after{border-radius:0}
.p2f-chain-card.n4k-band{border-top:1px solid #29cf7024}
@media (max-width:700px){.n4k-thumb{width:44px;height:44px;top:10px;right:10px}.n4k-thumb.n4k-thumb--lg{width:64px;height:64px}}

/* ---------- 9. animated schematics: wires, packets, radar ---------- */
.n4k-wired{position:relative;isolation:isolate}
.n4k-wired .n4k-rv{transform:none!important;opacity:1}
.n4k-wire{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible;pointer-events:none;
  opacity:0;transition:opacity .5s var(--n4k-e)}
.n4k-wired.n4k-wired-on .n4k-wire{opacity:1}
.n4k-wire .n4k-line{fill:none;stroke:#29cf7045;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--n4k-len,2000);stroke-dashoffset:var(--n4k-len,2000);
  transition:stroke-dashoffset .9s var(--n4k-e)}
.n4k-wired-on .n4k-line{stroke-dashoffset:0}
.n4k-wire .n4k-line--glow{stroke:#29cf7022;stroke-width:5;filter:blur(3px)}
.n4k-wire .n4k-pkt{fill:#9be766;filter:drop-shadow(0 0 7px #29cf70)}
.n4k-wire .n4k-pkt--g{fill:#e5b85a;filter:drop-shadow(0 0 8px #e5b85a)}
.n4k-wire .n4k-pkt-t{stroke:#29cf7066;stroke-width:1;fill:none}
.flow span,.p2f-loop .node,.p2f-chain-card,.p2f-loop .arr,.flow i,.p2x-loop .node,.v4-arrow{transition:transform .45s var(--n4k-e),box-shadow .45s,background-color .45s,color .45s,border-color .45s}
.n4k-zap{transform:translateY(-3px) scale(1.045)}
.flow span.n4k-zap{background-color:#1c9d58;box-shadow:0 10px 26px #29cf7055}
.p2f-loop .node.n4k-zap,.p2x-loop .node.n4k-zap{background-color:#145c3d;box-shadow:0 0 0 1px #29cf7066,0 14px 30px #03140c66;color:#fff}
.p2f-chain-card.n4k-zap{box-shadow:0 0 0 1px #29cf7066,0 22px 50px #03140c80;transform:translateY(-5px)}
.flow i.n4k-zap,.p2f-loop .arr.n4k-zap{color:#e5b85a;transform:translateX(4px) scale(1.25)}
.p2f-chain-card:not(:last-child):after{animation:n4k-arrow 3.4s var(--n4k-e2) infinite}
@keyframes n4k-arrow{0%,72%{opacity:.55;transform:translateY(-50%) translateX(0)}84%{opacity:1;transform:translateY(-50%) translateX(4px)}100%{opacity:.55;transform:translateY(-50%) translateX(0)}}
/* hub / cloud radar */
.n4k-radar{position:absolute;inset:-6%;pointer-events:none;border-radius:50%;opacity:.55;
  background:conic-gradient(from 0deg,#29cf7000 0deg,#29cf7026 26deg,#9be76612 44deg,#29cf7000 70deg);
  animation:n4k-spin 9s linear infinite;-webkit-mask:radial-gradient(circle,transparent 14%,#000 16%);
  mask:radial-gradient(circle,transparent 14%,#000 16%)}
.n4k-orbit{position:absolute;inset:0;pointer-events:none;border-radius:50%;border:1px dashed #9be76624;
  animation:n4k-spin 42s linear infinite}
.n4k-orbit.o2{inset:9%;border-style:solid;border-color:#ffffff12;animation-duration:66s;animation-direction:reverse}
@keyframes n4k-spin{to{transform:rotate(360deg)}}
.cloudVisual,.v4-map,.v5-map{isolation:isolate}
.cloudCenter{animation:n4k-breathe 6s var(--n4k-e2) infinite}
@keyframes n4k-breathe{0%,100%{transform:translate(-50%,-50%) scale(1);box-shadow:0 0 0 0 #29cf7040}50%{transform:translate(-50%,-50%) scale(1.045);box-shadow:0 0 0 26px #29cf7000}}
.node,.sat,.p2f-node,.p2x-node,.v5-float,.p2f-icon{animation:n4k-pulse 7.5s ease-in-out infinite;animation-delay:var(--n4k-fd,0s)}
@keyframes n4k-pulse{0%,100%{box-shadow:0 0 0 0 #29cf7000;filter:brightness(1)}
  50%{box-shadow:0 0 26px 2px #29cf7026;filter:brightness(1.13)}}
.sat,.p2f-node,.p2x-node,.v5-float{box-shadow:0 20px 55px #00000059}
.n5.node{transform:translateX(-50%)}
/* orbital hero art */
.art .ring{animation:n4k-ringbreathe 9s var(--n4k-e2) infinite}
@keyframes n4k-ringbreathe{0%,100%{transform:scale(1);box-shadow:0 0 0 55px #9be76608}50%{transform:scale(1.035);box-shadow:0 0 0 78px #9be7660d}}
.art .core,.p2f-core{animation:n4k-breathe2 5.4s var(--n4k-e2) infinite}
@keyframes n4k-breathe2{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.art .sat,.p2f-node{animation:n4k-float 8s ease-in-out infinite;animation-delay:var(--n4k-fd,0s);position:absolute}
.n4k-halo{position:absolute;left:50%;top:50%;width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;
  pointer-events:none;background:conic-gradient(from 0deg,#29cf7000,#29cf7066 18%,#e5b85a4d 30%,#29cf7000 46%);
  filter:blur(9px);animation:n4k-spin 14s linear infinite;opacity:.65;z-index:-1}
.n4k-halo.h2{width:410px;height:410px;margin:-205px 0 0 -205px;animation-duration:26s;animation-direction:reverse;opacity:.4}
.n4k-halo.h3{width:215px;height:215px;margin:-107px 0 0 -107px;animation-duration:9s;filter:blur(14px);opacity:.5}
/* section ambient wash for light sections */
.n4k-wash{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .6s}
.n4k-in-sec .n4k-wash{opacity:1}
.n4k-wash b{position:absolute;border-radius:50%;filter:blur(70px);display:block}
.n4k-wash b.b1{width:44vw;height:44vw;left:-8vw;top:-14vw;background:#29cf700f;animation:n4k-drift1 34s ease-in-out infinite alternate}
.n4k-wash b.b2{width:34vw;height:34vw;right:-6vw;top:22%;background:#e5b85a14;animation:n4k-drift2 40s ease-in-out infinite alternate}
.n4k-wash b.b3{width:26vw;height:26vw;left:36%;bottom:-10vw;background:#0b2b1e0a;animation:n4k-drift1 46s ease-in-out -10s infinite alternate-reverse}
@keyframes n4k-drift1{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(6vw,4vh,0) scale(1.16)}}
@keyframes n4k-drift2{0%{transform:translate3d(0,0,0) scale(1.1)}100%{transform:translate3d(-7vw,-5vh,0) scale(.95)}}
.section,.p2f-section,.v5-section,.cta{position:relative}
/* CTA box photo plate */
.ctaBox{isolation:isolate;overflow:hidden}
.ctaBox > *{position:relative;z-index:2}
.ctaBox .n4k-photo{opacity:0}
.ctaBox.n4k-photo-on .n4k-photo{opacity:.34}
.ctaBox .n4k-photo img{height:100%}
/* visuel « Let's build the future » : fondu doux dans le fond crème (lisible) */
.ctaBox .n4k-cb.n4k-cb-in{opacity:.5!important}
.ctaBox:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(120deg,#f5f4ede6,#f5f6efb3 45%,#fff5dcc9);mix-blend-mode:multiply}
.ctaBox:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;
  background:linear-gradient(90deg,#29cf70,#9be766,#e5b85a,#29cf70);background-size:220% 100%;
  animation:n4k-slide 7s linear infinite;opacity:.85}
@keyframes n4k-slide{to{background-position:220% 0}}
/* notes / loops */
.p2f-note{position:relative;overflow:hidden}
.p2f-note:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(#29cf70,#e5b85a,#29cf70);background-size:100% 240%;animation:n4k-slidev 6s linear infinite}
@keyframes n4k-slidev{to{background-position:0 -240%}}
.loopbox{overflow:hidden}
.loopbox:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,#29cf7088,transparent);background-size:60% 100%;
  animation:n4k-scanline 5s var(--n4k-e2) infinite}
@keyframes n4k-scanline{0%{background-position:-60% 0;opacity:.2}50%{opacity:1}100%{background-position:160% 0;opacity:.2}}
/* footer lift */
footer{position:relative;overflow:hidden}
footer:before{content:"";position:absolute;left:50%;top:-40%;width:60vw;height:80%;transform:translateX(-50%);
  background:radial-gradient(ellipse,#29cf701a,transparent 68%);pointer-events:none}

/* ---------- 10. page transition ---------- */
#n4k-wipe{position:fixed;inset:0;z-index:70;pointer-events:none;transform:translate3d(0,101%,0);
  background:linear-gradient(180deg,#061b13,#0a291c 60%,#03140c);box-shadow:0 -30px 80px #29cf7033}
#n4k-wipe i{position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,#29cf70,#e5b85a,transparent)}
html.n4k-leave #n4k-wipe{transform:translate3d(0,0,0);transition:transform .46s cubic-bezier(.7,0,.3,1)}
html.n4k-leave body{opacity:.15;transition:opacity .3s}

/* ---------- 11. perf / a11y guards ---------- */
@media (prefers-reduced-motion:reduce){
  .n4k-rv{opacity:1!important;transform:none!important}
  .n4k-w>i{transform:none!important;opacity:1!important}
  .n4k-photo img,.n4k-thumb img,.n4k-ray,.n4k-grain,.n4k-radar,.n4k-orbit,.n4k-halo,.n4k-card,
  .p2f-note:before,.loopbox:after,.ctaBox:after{animation:none!important}
  html.n4k{scroll-behavior:smooth}
}
@media (max-width:900px){
  .n4k-rays{opacity:.3}
  .hero .wrap,.p2f-hero .wrap,.v5-hero .wrap{transform:none!important}
}

/* ---------- 12 · section seams, blueprint mesh, hero cue, badge flips ---------- */
.n4k-div{position:absolute;left:0;right:0;top:0;height:1px;z-index:3;pointer-events:none;overflow:hidden;
  background:linear-gradient(90deg,transparent,#29cf7042 22%,#9be76633 48%,#e5b85a33 66%,transparent);opacity:.75}
.n4k-div i{position:absolute;top:-1px;left:0;width:26%;height:3px;border-radius:3px;
  background:linear-gradient(90deg,transparent,#29cf70cc,transparent);filter:blur(1px);animation:n4k-glint 9s var(--n4k-e2) infinite}
@keyframes n4k-glint{0%{transform:translateX(-40%)}55%,100%{transform:translateX(420%)}}
.hero:before,.p2f-hero:before,.v5-hero:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(#9be7660f 1px,transparent 1px),linear-gradient(90deg,#9be7660f 1px,transparent 1px);
  background-size:78px 78px;-webkit-mask:radial-gradient(circle at 70% 45%,#000,transparent 62%);
  mask:radial-gradient(circle at 70% 45%,#000,transparent 62%)}
.n4k-hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:4;width:26px;height:42px;
  border:1px solid #9be76666;border-radius:14px;cursor:pointer;backdrop-filter:blur(3px);
  transition:transform .5s var(--n4k-e),border-color .4s,box-shadow .4s}
.n4k-hint i{position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;border-radius:3px;background:#29cf70;
  box-shadow:0 0 10px #29cf70;animation:n4k-cue 2.1s var(--n4k-e2) infinite}
.n4k-hint:hover{border-color:#e5b85a;box-shadow:0 0 0 6px #29cf700f;transform:translateX(-50%) translateY(3px)}
@keyframes n4k-cue{0%{transform:translateY(0);opacity:0}22%{opacity:1}78%{transform:translateY(15px);opacity:0}100%{transform:translateY(0);opacity:0}}
.n4k-hint.n4k-hide{opacity:0;transform:translateX(-50%) translateY(14px);pointer-events:none;transition:.5s}
.ico,.p2f-num,.p2x-num{backface-visibility:hidden}
.n4k-in .ico,.n4k-in .p2f-num,.n4k-in .p2x-num{animation:n4k-flip .4s var(--n4k-e)}
@keyframes n4k-flip{0%{transform:perspective(600px) rotateX(-72deg) translateY(7px);opacity:.15}
  60%{transform:perspective(600px) rotateX(9deg);opacity:1}100%{transform:none;opacity:1}}
.p2f-icon{overflow:hidden}
.p2f-icon:after{content:"";position:absolute;left:10px;right:10px;bottom:8px;height:1px;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,#38e27e,#e5b85a00);transition:transform .32s var(--n4k-e)}
.n4k-in.p2f-icon:after,.n4k-in .p2f-icon:after{transform:scaleX(1)}
.cloudVisual:hover .n4k-radar,.v4-map:hover .n4k-radar{animation-duration:3.4s}

.hero h1,.p2f-title,.v5-title{position:relative}
.hero h1:after,.p2f-title:after,.v5-title:after{content:"";position:absolute;inset:-4% -6%;pointer-events:none;z-index:3;
  background:linear-gradient(100deg,transparent 38%,#ffffff26 47%,#ffffff10 52%,transparent 62%);mix-blend-mode:overlay;
  transform:translateX(-135%);animation:n4k-hsweep 11s var(--n4k-e2) 1.6s infinite}
@keyframes n4k-hsweep{0%,64%{transform:translateX(-135%)}92%,100%{transform:translateX(135%)}}
.art,.p2f-visual,.p2x-visual,.v4-orb,.v5-orb{transform:translate3d(0,calc(var(--n4k-syp,0) * .3px),0);isolation:isolate}
.hero .art:hover .core{box-shadow:0 0 120px #29cf7066}

/* ============================================================
   13 · card background images — image de fond pour CHAQUE carte
   Rendu photographique net, haute fidélité, marié au texte sans
   dégradation mutuelle (scrim directionnel, dépoli, ombres douces).
   Équivalent statique : attributs data-card-bg / data-card-bg-op.
   ============================================================ */
.n4k-cb-on{
  position:relative;
  isolation:isolate;
  overflow:hidden!important;
  transition:transform .45s var(--n4k-e),box-shadow .45s var(--n4k-e),border-color .4s;
}
.n4k-cb-on > *:not(.n4k-cb):not(.n4k-thumb){
  position:relative;
  z-index:2;
}

/* masque les vignettes rondes quand l'image de fond est active pour éviter la redondance */
.n4k-cb-on .n4k-thumb{display:none!important}
.n4k-cb-on.n4k-hasthumb{padding-right:24px!important}
.p2f-chain-card.n4k-cb-on.n4k-hasthumb{padding:22px 17px!important}

/* Calque photo d'arrière-plan */
.n4k-cb{
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  pointer-events:none;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity .3s var(--n4k-e);
  will-change:opacity;
}
.n4k-card > .n4k-cb{position:absolute;inset:0;z-index:0}
.n4k-cb.n4k-cb-in{opacity:var(--n4k-cbo,1)}

/* Rendu ultra net, contrasté et vibrant de l'image de fond */
.n4k-cb-img{
  position:absolute;
  inset:-3%;
  width:106%;
  height:106%;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  image-rendering:-webkit-optimize-contrast;
  image-rendering:crisp-edges;
  filter:contrast(1.08) saturate(1.15) brightness(1.03);
  transform:translate3d(0,0,0) scale(1);
  transition:transform 1s cubic-bezier(.16,1,.3,1),filter .7s ease;
  will-change:transform,filter;
}
.n4k-cb-on:hover .n4k-cb-img{
  transform:translate3d(0,0,0) scale(1.05);
  filter:contrast(1.12) saturate(1.2) brightness(1.06);
}

/* Scrim directionnel doux : laisse le haut de l'image net et lumineux (sujet/ciel)
   tout en assurant un contraste velouté et protecteur sous le texte */
.n4k-cb-shade,
.n4k-cb:after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:var(--n4k-cbsh,linear-gradient(180deg,rgba(3,18,11,.12) 0%,rgba(3,18,11,.24) 28%,rgba(4,23,14,.58) 60%,rgba(3,18,11,.85) 82%,rgba(2,14,8,.95) 100%));
  transition:background .4s ease,opacity .4s ease;
}

/* Nuance ambiante émeraude/or subtile pour fusionner la photo dans la charte graphique */
.n4k-cb:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:radial-gradient(ellipse at 85% 15%,rgba(41,207,112,.18) 0%,transparent 60%),
             radial-gradient(ellipse at 15% 85%,rgba(229,184,90,.12) 0%,transparent 55%);
  mix-blend-mode:screen;
  opacity:.85;
}

/* --- Typographie mariée avec l'image sur cartes sombres --- */
.n4k-cb-on.dark,
.dark .n4k-cb-on,
.p2f-dark .n4k-cb-on,
.p2x-dark .n4k-cb-on,
.n4k-cb-dark.n4k-cb-on{
  background-color:#051b11!important;
  border-color:rgba(41,207,112,.3)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 18px 46px rgba(2,14,8,.55);
}
.n4k-cb-on.dark:hover,
.dark .n4k-cb-on:hover,
.p2f-dark .n4k-cb-on:hover,
.p2x-dark .n4k-cb-on:hover,
.n4k-cb-dark.n4k-cb-on:hover{
  border-color:rgba(41,207,112,.7)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 28px 65px rgba(2,14,8,.75),0 0 26px rgba(41,207,112,.3);
}

.dark .n4k-cb-on h3,
.p2f-dark .n4k-cb-on h3,
.p2x-dark .n4k-cb-on h3,
.n4k-cb-dark.n4k-cb-on h3,
.n4k-cb-dark.n4k-cb-on h2,
.n4k-cb-dark.n4k-cb-on strong{
  color:#ffffff!important;
  font-weight:900!important;
  letter-spacing:-.02em;
  text-shadow:0 1px 2px rgba(0,0,0,.9),0 2px 8px rgba(0,0,0,.7),0 0 18px rgba(4,23,14,.9);
  transition:color .3s ease,text-shadow .3s ease;
}
.dark .n4k-cb-on:hover h3,
.p2f-dark .n4k-cb-on:hover h3,
.p2x-dark .n4k-cb-on:hover h3,
.n4k-cb-dark.n4k-cb-on:hover h3,
.n4k-cb-dark.n4k-cb-on:hover strong{
  color:#d4fee2!important;
  text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 14px rgba(41,207,112,.5);
}

.dark .n4k-cb-on p,
.p2f-dark .n4k-cb-on p,
.p2x-dark .n4k-cb-on p,
.n4k-cb-dark.n4k-cb-on p{
  color:#e2f2e8!important;
  font-weight:460;
  line-height:1.6;
  text-shadow:0 1px 2px rgba(0,0,0,.9),0 2px 6px rgba(0,0,0,.75);
  transition:color .3s ease;
}
.dark .n4k-cb-on:hover p,
.p2f-dark .n4k-cb-on:hover p,
.p2x-dark .n4k-cb-on:hover p,
.n4k-cb-dark.n4k-cb-on:hover p{
  color:#ffffff!important;
}

/* Badges / numéros façon cristal émeraude dépoli */
.n4k-cb-on .ico,
.n4k-cb-on .p2f-num,
.n4k-cb-on .p2x-num{
  background:rgba(4,23,14,.68)!important;
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  border:1px solid rgba(41,207,112,.48)!important;
  color:#42e787!important;
  box-shadow:0 8px 20px rgba(0,0,0,.4),inset 0 0 12px rgba(41,207,112,.22)!important;
  text-shadow:0 0 10px rgba(41,207,112,.6);
  transition:all .35s var(--n4k-e);
}
.n4k-cb-on:hover .ico,
.n4k-cb-on:hover .p2f-num,
.n4k-cb-on:hover .p2x-num{
  background:rgba(8,38,24,.88)!important;
  border-color:#38e27e!important;
  color:#aaffd0!important;
  box-shadow:0 10px 28px rgba(41,207,112,.4),inset 0 0 16px rgba(41,207,112,.35)!important;
}

/* Cartes chaîne (01 HARVEST, 02 COLLECT...) */
.p2f-chain-card.n4k-cb-on b{
  color:#a5f5c2!important;
  font-weight:900;
  text-shadow:0 1px 3px rgba(0,0,0,.85);
}
.p2f-chain-card.n4k-cb-on strong{
  color:#ffffff!important;
  text-shadow:0 2px 6px rgba(0,0,0,.9),0 0 16px rgba(41,207,112,.45);
}
.p2f-chain-card.n4k-cb-on p{
  color:#e4f4ea!important;
  text-shadow:0 1px 3px rgba(0,0,0,.85);
}

/* --- Typographie sur cartes claires (fond crème) --- */
.light .n4k-cb-on,
.p2f-light .n4k-cb-on,
.n4k-cb-light.n4k-cb-on{
  background-color:#f5f6ef!important;
  border-color:rgba(10,107,61,.28)!important;
  box-shadow:0 18px 45px rgba(10,107,61,.1),0 1px 3px rgba(0,0,0,.04);
}
.light .n4k-cb-on:hover,
.p2f-light .n4k-cb-on:hover,
.n4k-cb-light.n4k-cb-on:hover{
  border-color:rgba(10,107,61,.65)!important;
  box-shadow:0 24px 60px rgba(10,107,61,.18),0 0 20px rgba(41,207,112,.18);
}
.light .n4k-cb-on h3,
.p2f-light .n4k-cb-on h3,
.n4k-cb-light.n4k-cb-on h3{
  color:#042114!important;
  font-weight:950!important;
  text-shadow:0 1px 2px rgba(255,255,255,.98),0 0 14px rgba(255,255,255,.9);
}
.light .n4k-cb-on p,
.p2f-light .n4k-cb-on p,
.n4k-cb-light.n4k-cb-on p{
  color:#0c301e!important;
  font-weight:520;
  line-height:1.6;
  text-shadow:0 1px 2px rgba(255,255,255,.95);
}
.light .n4k-cb-on .ico,
.p2f-light .n4k-cb-on .p2f-num,
.n4k-cb-light.n4k-cb-on .ico{
  background:rgba(255,255,255,.88)!important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(10,107,61,.3)!important;
  color:#0a6b3d!important;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}

/* --- 13.1 chrome de l'éditeur : bascule, panneau, fab, pop-over --- */
#n4k-cb-toggle{position:fixed;left:16px;bottom:16px;z-index:95;display:flex;align-items:center;gap:9px;
  padding:11px 15px;border-radius:99px;border:1px solid #29cf7059;background:#04170ee6;color:#c8ecda;
  font-family:Inter,system-ui,sans-serif;font-size:11px;font-weight:800;letter-spacing:.05em;cursor:pointer;
  backdrop-filter:blur(12px);box-shadow:0 16px 44px #03140c59;
  transition:transform .4s var(--n4k-e),border-color .35s,box-shadow .35s,background .35s}
#n4k-cb-toggle:hover{transform:translateY(-2px);border-color:#29cf70b3;box-shadow:0 20px 52px #03140c73,0 0 22px #29cf7030}
#n4k-cb-toggle svg{width:15px;height:15px;flex:none}
#n4k-cb-toggle u{width:7px;height:7px;border-radius:50%;background:#29cf70;box-shadow:0 0 9px #29cf70;text-decoration:none}
html.n4k-cbmode #n4k-cb-toggle{border-color:#e5b85a99;color:#f2e3bd;background:#171207e6}
html.n4k-cbmode #n4k-cb-toggle u{background:#e5b85a;box-shadow:0 0 11px #e5b85a}
#n4k-cb-panel{position:fixed;left:16px;bottom:66px;z-index:95;width:302px;max-width:calc(100vw - 32px);
  display:none;background:#04170ef0;border:1px solid #29cf7044;border-radius:18px;padding:15px 16px 16px;
  color:#d9efe2;font-family:Inter,system-ui,sans-serif;box-shadow:0 26px 70px #03140c80;backdrop-filter:blur(14px)}
html.n4k-cbmode #n4k-cb-panel{display:block;animation:n4k-cbup .45s var(--n4k-e)}
@keyframes n4k-cbup{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}}
#n4k-cb-panel h5{margin:0 0 6px;font-size:12.5px;font-weight:950;color:#fff;letter-spacing:.02em}
#n4k-cb-panel p{margin:0 0 12px;font-size:11px;line-height:1.5;color:#9db8aa}
#n4k-cb-panel .n4k-cb-acts{display:flex;gap:7px}
.n4k-cb-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 10px;
  border-radius:11px;border:1px solid #29cf7047;background:#29cf7012;color:#b9eccd;font-size:10.5px;font-weight:900;
  cursor:pointer;transition:background .3s,border-color .3s,transform .2s;font-family:inherit}
.n4k-cb-btn:hover{background:#29cf7026;border-color:#29cf7099;transform:translateY(-1px)}
.n4k-cb-btn.warn{border-color:#e5b85a47;background:#e5b85a12;color:#f0dcae}
.n4k-cb-btn.warn:hover{background:#e5b85a22;border-color:#e5b85a99}
#n4k-cb-fab{position:fixed;z-index:96;left:0;top:0;display:none;place-items:center;width:38px;height:38px;
  border-radius:50%;border:1px solid #29cf70aa;background:#04170ef2;color:#7df0a5;cursor:pointer;
  box-shadow:0 14px 38px #03140c99,0 0 18px #29cf7044;backdrop-filter:blur(8px);
  transition:background .25s,color .25s,transform .2s}
#n4k-cb-fab svg{width:17px;height:17px}
#n4k-cb-fab.on{display:grid}
#n4k-cb-fab:hover{background:#29cf70;color:#04170e;transform:scale(1.08)}
html.n4k-cbmode .n4k-cb-target{cursor:pointer}
html.n4k-cbmode .n4k-cb-target:hover{outline:2px dashed #29cf70cc;outline-offset:3px}
html.n4k-cbmode .n4k-cb-target.n4k-cb-has{outline:1.5px solid #e5b85a99;outline-offset:3px}
#n4k-cb-pop{position:fixed;z-index:97;width:336px;max-width:calc(100vw - 24px);
  background:#04170ff2;border:1px solid #29cf7047;border-radius:20px;padding:15px 16px 16px;color:#d9efe2;
  font-family:Inter,system-ui,sans-serif;box-shadow:0 34px 90px #03140cb3,0 0 26px #29cf7026;backdrop-filter:blur(16px)}
#n4k-cb-pop[hidden]{display:none}
#n4k-cb-pop header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:3px}
#n4k-cb-pop h5{margin:0;font-size:13px;font-weight:950;color:#fff;line-height:1.25}
#n4k-cb-pop .n4k-cb-sub{margin:0 0 4px;font-size:9.5px;color:#8fae9e;letter-spacing:.12em;text-transform:uppercase}
#n4k-cb-pop .n4k-cb-close{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid #ffffff22;background:#ffffff0a;
  color:#b9cec3;font-size:13px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:border-color .25s,color .25s}
#n4k-cb-pop .n4k-cb-close:hover{border-color:#29cf70;color:#fff}
.n4k-cb-cap{font-size:9.5px;font-weight:950;letter-spacing:.14em;text-transform:uppercase;color:#63d48e;margin:12px 0 7px}
.n4k-cb-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.n4k-cb-grid button{position:relative;padding:0;border:1px solid #ffffff1e;border-radius:10px;overflow:hidden;
  cursor:pointer;background:#0b2b1e;transition:transform .25s var(--n4k-e),border-color .25s,box-shadow .25s}
.n4k-cb-grid button img{display:block;width:100%;height:50px;object-fit:cover}
.n4k-cb-grid button:hover{transform:scale(1.07);border-color:#29cf70;z-index:1}
.n4k-cb-grid button.n4k-cb-sel{border-color:#29cf70;box-shadow:0 0 0 2px #29cf7055,0 6px 18px #29cf7033}
.n4k-cb-urlrow{display:flex;gap:6px}
.n4k-cb-urlrow input{flex:1;min-width:0;background:#0b2b1e;border:1px solid #ffffff24;border-radius:10px;
  padding:9px 11px;font-size:11px;color:#eaf6ee;outline:none;font-family:inherit}
.n4k-cb-urlrow input:focus{border-color:#29cf70}
.n4k-cb-uprow{display:flex;gap:6px;margin-top:7px}
.n4k-cb-op{margin:12px 0 2px}
.n4k-cb-op label{display:flex;justify-content:space-between;font-size:10px;color:#9db8aa;margin-bottom:5px}
.n4k-cb-op label b{color:#b9eccd;font-weight:900}
.n4k-cb-op input[type=range]{width:100%;accent-color:#29cf70;cursor:pointer}
.n4k-cb-foot{display:flex;gap:7px;margin-top:13px}
#n4k-cb-exp{position:fixed;inset:0;z-index:98;display:none;place-items:center;background:#03140cc4;
  backdrop-filter:blur(6px);padding:18px}
#n4k-cb-exp.on{display:grid}
#n4k-cb-exp .n4k-cb-expbox{width:min(640px,100%);max-height:84vh;display:flex;flex-direction:column;gap:10px;
  background:#04170f;border:1px solid #29cf7047;border-radius:22px;padding:20px;color:#d9efe2;
  font-family:Inter,system-ui,sans-serif;box-shadow:0 40px 120px #03140c}
#n4k-cb-exp h5{margin:0;font-size:14px;font-weight:950;color:#fff}
#n4k-cb-exp p{margin:0;font-size:11px;color:#9db8aa;line-height:1.55}
#n4k-cb-exp textarea{flex:1;min-height:240px;resize:vertical;background:#0b2b1e;border:1px solid #ffffff22;border-radius:14px;
  color:#d5efe0;font:11px/1.6 ui-monospace,Consolas,monospace;padding:12px;outline:none}
#n4k-cb-exp .n4k-cb-foot{margin-top:0}
#n4k-cb-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);z-index:99;max-width:calc(100vw - 32px);
  background:#04170ff2;border:1px solid #e5b85a66;color:#f2e3bd;font-family:Inter,system-ui,sans-serif;font-size:11.5px;font-weight:700;
  padding:11px 16px;border-radius:13px;box-shadow:0 20px 60px #03140c99;opacity:0;pointer-events:none;
  transition:opacity .4s,transform .4s var(--n4k-e)}
#n4k-cb-toast.on{opacity:1;transform:translate(-50%,0)}
#n4k-cb-toggle:focus-visible,.n4k-cb-btn:focus-visible,#n4k-cb-fab:focus-visible,
#n4k-cb-pop .n4k-cb-close:focus-visible,.n4k-cb-grid button:focus-visible{outline:2px solid #29cf70;outline-offset:2px}
@media (max-width:560px){
  #n4k-cb-toggle span{display:none}
  #n4k-cb-toggle{padding:12px}
  .n4k-cb-grid{grid-template-columns:repeat(4,1fr)}
}
@media print{#n4k-cb-toggle,#n4k-cb-panel,#n4k-cb-fab,#n4k-cb-pop,#n4k-cb-exp,#n4k-cb-toast{display:none!important}}

/* ============================================================
   14 · multilingual text safety
   Layout-only: no copy is changed. Long translated words wrap
   inside their container instead of overflowing or being clipped.
   ============================================================ */
body{overflow-wrap:break-word;word-break:normal;hyphens:none}
.heroGrid>*, .arch>*, .grid>*, .teamGrid>*, .cloud>*, .loop>*,
.v5-team>*, .v5-compare>*, .v5-app>*, .v5-flow>*,
.p2f-cards>*, .p2f-chain>*, .p2f-loop>*, .p2f-feature>*, .p2f-icons>*,
.p2x-cards>*, .p2x-steps>*, .p2x-chain>*, .p2x-loop>*,
.v4-app>*, .v4-loop>*, .foot>*, .flow>*{min-width:0}
.eyebrow,.chip{max-width:100%}
.sat,.v5-float{max-width:min(230px,44vw)}
.p2f-node,.p2x-node{max-width:min(210px,40vw)}
/* compact the wider French navigation without changing its wording */
html[lang="fr"] .navin{gap:12px}
html[lang="fr"] .links{gap:10px;font-size:11px}
html[lang="fr"] .links a{padding:7px 6px;margin:-7px -6px;white-space:nowrap}
html[lang="fr"] .nav .btn{padding:10px 13px;font-size:12px}
/* French typography: slightly larger line rhythm and a modest size step so
   longer translated headlines keep their containers balanced */
html[lang="fr"] .hero h1{font-size:clamp(42px,5.4vw,70px)}
html[lang="fr"] .head h2{font-size:clamp(32px,4.1vw,52px)}
html[lang="fr"] .ctaBox h2{font-size:clamp(34px,4.5vw,56px)}
html[lang="fr"] .v5-head h2{font-size:clamp(36px,4.5vw,58px)}
html[lang="fr"] .p2f-head h2,
html[lang="fr"] .p2x-head h2{font-size:clamp(35px,4.4vw,57px)}
html[lang="fr"] .v5-title{font-size:clamp(48px,6vw,84px)}
html[lang="fr"] .p2f-title,
html[lang="fr"] .p2x-title{font-size:clamp(46px,5.7vw,78px)}
html[lang="fr"] .hero h1,
html[lang="fr"] .head h2,
html[lang="fr"] .v5-head h2,
html[lang="fr"] .p2f-head h2,
html[lang="fr"] .p2x-head h2,
html[lang="fr"] .ctaBox h2{line-height:1.02}
html[lang="fr"] .v5-title,
html[lang="fr"] .p2f-title,
html[lang="fr"] .p2x-title{line-height:.96}

/* ============================================================
   15 · stakeholder photo cards (ecosystem / écosystème)
   Investor-grade image-first cards for the "Stakeholders" section:
   a 100 % clear 16:9 photo band on top — NO scrim, NO gradient, NO
   fade over the image — the theme word set over the photo as a crisp
   chip, and the existing copy untouched on the solid card body below.
   Theme words / numerals are rendered via CSS content so the DOM copy
   never changes (tools/n4k-copy-check.js stays valid).
   ============================================================ */
.grid .stake{padding:0;overflow:hidden;display:flex;flex-direction:column}
.grid .stake .stMedia{position:relative;margin:0;aspect-ratio:16/9;overflow:hidden;background:#0a2b1e;flex:none}
.grid .stake .stImg{display:block;width:100%;height:100%;object-fit:cover;filter:none;
  image-rendering:-webkit-optimize-contrast;transform:scale(1.015);transition:transform 1.8s var(--n4k-e)}
.grid .stake:hover .stImg{transform:scale(1.06)}
/* the photo must stay perfectly clear: never let a faded background,
   directional scrim or round thumbnail be injected over these cards */
.grid .stake>.n4k-cb,.grid .stake .n4k-cb-shade,.grid .stake .n4k-thumb{display:none!important}
.grid .stake.n4k-hasthumb{padding-right:0!important}
/* 3 px accent seam between the photo and the body */
.grid .stake .stMedia:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--n4k-g),var(--n4k-mint));opacity:.9}
/* numeral badge, top-left (CSS content — no word added to the DOM) */
.grid .stake .stNum{position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px 7px 10px;border-radius:999px;background:#061b13d9;border:1px solid #29cf7059;color:#8ff0a9;
  font-size:10px;font-weight:950;letter-spacing:.18em;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.grid .stake .stNum:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--n4k-g);box-shadow:0 0 9px #29cf70}
.grid .stake[data-stake="citizens"] .stNum:after{content:"01"}
.grid .stake[data-stake="governments"] .stNum:after{content:"02"}
.grid .stake[data-stake="science"] .stNum:after{content:"03"}
.grid .stake[data-stake="professionals"] .stNum:after{content:"04"}
/* theme word over the photo, bottom-left: crisp chip, no gradient scrim */
.grid .stake .stTag{position:absolute;left:14px;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:8px;
  max-width:calc(100% - 28px);padding:9px 14px;border-radius:999px;background:#061b13d9;border:1px solid #29cf7059;
  color:#eafff2;font-size:10.5px;font-weight:950;letter-spacing:.17em;text-transform:uppercase;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 26px #03140c66}
.grid .stake .stTag:before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--n4k-gold);box-shadow:0 0 10px #e5b85a}
.grid .stake[data-stake="citizens"] .stTag:after{content:"Citizens"}
.grid .stake[data-stake="governments"] .stTag:after{content:"Governments"}
.grid .stake[data-stake="science"] .stTag:after{content:"Science"}
.grid .stake[data-stake="professionals"] .stTag:after{content:"Professionals"}
html[lang="fr"] .grid .stake[data-stake="citizens"] .stTag:after{content:"Citoyens"}
html[lang="fr"] .grid .stake[data-stake="governments"] .stTag:after{content:"Gouvernements"}
html[lang="fr"] .grid .stake[data-stake="science"] .stTag:after{content:"Science"}
html[lang="fr"] .grid .stake[data-stake="professionals"] .stTag:after{content:"Professionnels"}
/* copy on the solid card body below the photo */
.grid .stake .stBody{padding:19px 22px 22px}
.grid .stake .stBody h3{font-size:19px}
@media (prefers-reduced-motion:reduce){.grid .stake .stImg{transition:none;transform:none}}

/* ============================================================
   16 · Government Intelligence photo cards (ecosystem / écosystème)
   Same investor-grade image-first treatment as the stakeholder
   cards (section 15), applied to the three "Government
   Intelligence" cards: a 100 % clear 16:9 photo band on top —
   NO scrim, NO gradient, NO fade over the image — the card's own
   theme text set over the photo as a crisp chip, and the existing
   copy untouched on the solid card body below.
   Theme words / numerals are rendered via CSS content so the DOM
   copy never changes (tools/n4k-copy-check.js stays valid).
   ============================================================ */
.grid .gov{padding:0;overflow:hidden;display:flex;flex-direction:column}
.grid .gov .govMedia{position:relative;margin:0;aspect-ratio:16/9;overflow:hidden;background:#0a2b1e;flex:none}
.grid .gov .govImg{display:block;width:100%;height:100%;object-fit:cover;filter:none;
  image-rendering:-webkit-optimize-contrast;transform:scale(1.015);transition:transform 1.8s var(--n4k-e)}
.grid .gov:hover .govImg{transform:scale(1.06)}
/* the photo must stay perfectly clear: never let a faded background,
   directional scrim or round thumbnail be injected over these cards */
.grid .gov>.n4k-cb,.grid .gov .n4k-cb-shade,.grid .gov .n4k-thumb{display:none!important}
.grid .gov.n4k-hasthumb{padding-right:0!important}
/* 3 px accent seam between the photo and the body — green / gold / mint */
.grid .gov .govMedia:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;opacity:.9}
.grid .gov[data-gov="health"] .govMedia:after{background:linear-gradient(90deg,var(--n4k-g),var(--n4k-mint))}
.grid .gov[data-gov="food"] .govMedia:after{background:linear-gradient(90deg,var(--n4k-gold),var(--n4k-gold2))}
.grid .gov[data-gov="spatial"] .govMedia:after{background:linear-gradient(90deg,var(--n4k-mint),var(--n4k-g))}
/* numeral badge, top-left (CSS content — no word added to the DOM) */
.grid .gov .govNum{position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px 7px 10px;border-radius:999px;background:#061b13d9;border:1px solid #29cf7059;color:#8ff0a9;
  font-size:10px;font-weight:950;letter-spacing:.18em;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.grid .gov .govNum:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--n4k-g);box-shadow:0 0 9px #29cf70}
.grid .gov[data-gov="health"] .govNum:after{content:"01"}
.grid .gov[data-gov="food"] .govNum:after{content:"02"}
.grid .gov[data-gov="spatial"] .govNum:after{content:"03"}
/* theme text over the photo, bottom-left: crisp chip, no gradient scrim */
.grid .gov .govTag{position:absolute;left:14px;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:8px;
  max-width:calc(100% - 28px);padding:9px 13px;border-radius:999px;background:#061b13d9;border:1px solid #29cf7059;
  color:#eafff2;font-size:9.5px;font-weight:950;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 26px #03140c66}
.grid .gov .govTag:before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--n4k-gold);box-shadow:0 0 10px #e5b85a}
.grid .gov[data-gov="health"] .govTag:after{content:"Health Command Center"}
.grid .gov[data-gov="food"] .govTag:after{content:"Food Intelligence Center"}
.grid .gov[data-gov="spatial"] .govTag:after{content:"Spatial Intelligence"}
html[lang="fr"] .grid .gov[data-gov="health"] .govTag:after{content:"Centre de commandement santé"}
html[lang="fr"] .grid .gov[data-gov="food"] .govTag:after{content:"Centre d'intelligence alimentaire"}
html[lang="fr"] .grid .gov[data-gov="spatial"] .govTag:after{content:"Intelligence spatiale"}
/* copy on the solid card body below the photo */
.grid .gov .govBody{padding:19px 22px 22px}
.grid .gov .govBody h3{font-size:18px}
.grid .gov .govBody .ico{margin-bottom:12px}
@media (prefers-reduced-motion:reduce){.grid .gov .govImg{transition:none;transform:none}}

/* ============================================================
   17 · Section 04 cold-chain photo panels (agribusiness / agro-industrie)
   Investor-grade image-first cards for the two panels of
   "04 • STORAGE & CONTROLLED COLD CHAIN": a 100 % clear 16:9 photo
   band on top — NO scrim, NO gradient, NO fade over the image — the
   theme set over the photo as a crisp chip, existing copy untouched
   on the solid card body below. Theme words / numerals rendered via
   CSS content so the DOM copy never changes.
   ============================================================ */
.p2f-feature .cold{padding:0;overflow:hidden;display:flex;flex-direction:column}
.p2f-feature .cold .coldMedia{position:relative;margin:0;aspect-ratio:16/9;overflow:hidden;background:#0a2b1e;flex:none}
.p2f-feature .cold .coldImg{display:block;width:100%;height:100%;object-fit:cover;filter:none;
  image-rendering:-webkit-optimize-contrast;transform:scale(1.015);transition:transform 1.8s var(--n4k-e)}
.p2f-feature .cold:hover .coldImg{transform:scale(1.06)}
/* the photo must stay perfectly clear: never let a faded background,
   directional scrim or round thumbnail be injected over these panels */
.p2f-feature .cold>.n4k-cb,.p2f-feature .cold .n4k-cb-shade,.p2f-feature .cold .n4k-thumb{display:none!important}
.p2f-feature .cold.n4k-hasthumb{padding-right:0!important}
/* 3 px accent seam between the photo and the body */
.p2f-feature .cold .coldMedia:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;opacity:.9}
.p2f-feature .cold[data-cold="temp"] .coldMedia:after{background:linear-gradient(90deg,var(--n4k-mint),var(--n4k-g))}
.p2f-feature .cold[data-cold="solar"] .coldMedia:after{background:linear-gradient(90deg,var(--n4k-gold),var(--n4k-g))}
/* numeral badge, top-left (CSS content — no word added to the DOM) */
.p2f-feature .cold .coldNum{position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px 7px 10px;border-radius:999px;background:#061b13d9;border:1px solid #29cf7059;color:#8ff0a9;
  font-size:10px;font-weight:950;letter-spacing:.18em;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.p2f-feature .cold .coldNum:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--n4k-g);box-shadow:0 0 9px #29cf70}
.p2f-feature .cold[data-cold="temp"] .coldNum:after{content:"01"}
.p2f-feature .cold[data-cold="solar"] .coldNum:after{content:"02"}
/* theme word over the photo, bottom-left: crisp chip, no gradient scrim */
.p2f-feature .cold .coldTag{position:absolute;left:14px;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:8px;
  max-width:calc(100% - 28px);padding:9px 14px;border-radius:999px;background:#061b13d9;border:1px solid #29cf7059;
  color:#eafff2;font-size:10.5px;font-weight:950;letter-spacing:.17em;text-transform:uppercase;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 26px #03140c66}
.p2f-feature .cold .coldTag:before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--n4k-gold);box-shadow:0 0 10px #e5b85a}
.p2f-feature .cold[data-cold="temp"] .coldTag:after{content:"Temperature intelligence"}
.p2f-feature .cold[data-cold="solar"] .coldTag:after{content:"Renewable-powered cold chain"}
html[lang="fr"] .p2f-feature .cold[data-cold="temp"] .coldTag:after{content:"Intelligence de la température"}
html[lang="fr"] .p2f-feature .cold[data-cold="solar"] .coldTag:after{content:"Chaîne du froid • renouvelables"}
/* copy on the solid card body below the photo */
.p2f-feature .cold .coldBody{padding:26px 30px 30px}
.p2f-feature .cold .coldBody h3{font-size:24px}
@media (prefers-reduced-motion:reduce){.p2f-feature .cold .coldImg{transition:none;transform:none}}

/* ============================================================
   15b · stakeholder grid — all 5 cards on ONE single row
   The "International Organisations" card joins the section; the
   five stakeholders now sit side by side in a 5-column row.
   Responsive: 3 columns on small desktops, 2 on tablet, 1 on
   mobile. Chips and body type are compacted so the theme labels
   fit the narrower cards.
   ============================================================ */
.grid .stake[data-stake="organizations"] .stNum:after{content:"05"}
.grid .stake[data-stake="organizations"] .stTag:after{content:"International Organisations"}
html[lang="fr"] .grid .stake[data-stake="organizations"] .stTag:after{content:"Organisations internationales"}
#users .grid.grid4{grid-template-columns:repeat(5,1fr);align-items:stretch;gap:14px}
/* narrower cards → compact numeral / theme chips and body type */
#users .grid.grid4 .stake .stNum{top:10px;left:10px;font-size:9px;letter-spacing:.14em;padding:5px 10px 5px 8px}
#users .grid.grid4 .stake .stTag{left:10px;bottom:10px;max-width:calc(100% - 20px);
  font-size:8px;letter-spacing:.03em;padding:6px 9px;border-radius:11px;line-height:1.3;
  text-transform:none;font-weight:850;white-space:normal}
#users .grid.grid4 .stake .stBody{padding:16px 16px 18px}
#users .grid.grid4 .stake .stBody h3{font-size:16px}
#users .grid.grid4 .stake .stBody .ico{width:38px;height:38px;margin-bottom:11px}
#users .grid.grid4 .stake .stBody p{font-size:12px}
@media(max-width:1100px){
  #users .grid.grid4{grid-template-columns:repeat(3,1fr);gap:16px}
}
@media(max-width:900px){
  #users .grid.grid4{grid-template-columns:repeat(2,1fr);gap:16px}
  #users .grid.grid4 .stake .stTag{font-size:10px;letter-spacing:.14em;padding:9px 14px;border-radius:999px}
}
@media(max-width:600px){
  #users .grid.grid4{grid-template-columns:1fr}
}

/* ============================================================
   18 · Team architecture photo cards (team / équipe)
   Investor-grade image-first treatment for the five "Target
   capabilities" cards of the "Team architecture mirrors product
   architecture" section: a 100 % clear 16:9 photo band on top —
   NO scrim, NO gradient, NO fade over the image — the theme text
   set over the photo as a crisp chip, and the existing copy
   untouched on the solid card body below.
   Theme words / numerals are rendered via CSS content so the DOM
   copy never changes (tools/n4k-copy-check.js stays valid).
   ============================================================ */
.grid .tarch{padding:0;overflow:hidden;display:flex;flex-direction:column}
.grid .tarch .tarcMedia{position:relative;margin:0;aspect-ratio:16/9;overflow:hidden;background:#0a2b1e;flex:none}
.grid .tarch .tarcImg{display:block;width:100%;height:100%;object-fit:cover;filter:none;
  image-rendering:-webkit-optimize-contrast;transform:scale(1.015);transition:transform 1.8s var(--n4k-e)}
.grid .tarch:hover .tarcImg{transform:scale(1.06)}
/* the photo must stay perfectly clear: never let a faded background,
   directional scrim or round thumbnail be injected over these cards */
.grid .tarch>.n4k-cb,.grid .tarch .n4k-cb-shade,.grid .tarch .n4k-thumb{display:none!important}
.grid .tarch.n4k-hasthumb{padding-right:0!important}
/* 3 px accent seam between the photo and the body — one per discipline */
.grid .tarch .tarcMedia:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;opacity:.9}
.grid .tarch[data-tarc="scientific"] .tarcMedia:after{background:linear-gradient(90deg,var(--n4k-mint),var(--n4k-g))}
.grid .tarch[data-tarc="engineering"] .tarcMedia:after{background:linear-gradient(90deg,var(--n4k-g),var(--n4k-gold))}
.grid .tarch[data-tarc="ai"] .tarcMedia:after{background:linear-gradient(90deg,var(--n4k-g),var(--n4k-mint))}
.grid .tarch[data-tarc="product"] .tarcMedia:after{background:linear-gradient(90deg,var(--n4k-gold),var(--n4k-g))}
.grid .tarch[data-tarc="business"] .tarcMedia:after{background:linear-gradient(90deg,var(--n4k-gold),var(--n4k-gold2))}
/* numeral badge, top-left (CSS content — no word added to the DOM) */
.grid .tarch .tarcNum{position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px 7px 10px;border-radius:999px;background:#061b13d9;border:1px solid #29cf7059;color:#8ff0a9;
  font-size:10px;font-weight:950;letter-spacing:.18em;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.grid .tarch .tarcNum:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--n4k-g);box-shadow:0 0 9px #29cf70}
.grid .tarch[data-tarc="scientific"] .tarcNum:after{content:"01"}
.grid .tarch[data-tarc="engineering"] .tarcNum:after{content:"02"}
.grid .tarch[data-tarc="ai"] .tarcNum:after{content:"03"}
.grid .tarch[data-tarc="product"] .tarcNum:after{content:"04"}
.grid .tarch[data-tarc="business"] .tarcNum:after{content:"05"}
/* theme text over the photo, bottom-left: crisp chip, no gradient scrim */
.grid .tarch .tarcTag{position:absolute;left:14px;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:8px;
  max-width:calc(100% - 28px);padding:9px 14px;border-radius:999px;background:#061b13d9;border:1px solid #29cf7059;
  color:#eafff2;font-size:10.5px;font-weight:950;letter-spacing:.17em;text-transform:uppercase;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 26px #03140c66}
.grid .tarch .tarcTag:before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--n4k-gold);box-shadow:0 0 10px #e5b85a}
.grid .tarch[data-tarc="scientific"] .tarcTag:after{content:"Scientific"}
.grid .tarch[data-tarc="engineering"] .tarcTag:after{content:"Engineering"}
.grid .tarch[data-tarc="ai"] .tarcTag:after{content:"AI & Data"}
.grid .tarch[data-tarc="product"] .tarcTag:after{content:"Product"}
.grid .tarch[data-tarc="business"] .tarcTag:after{content:"Business"}
html[lang="fr"] .grid .tarch[data-tarc="scientific"] .tarcTag:after{content:"Scientifique"}
html[lang="fr"] .grid .tarch[data-tarc="engineering"] .tarcTag:after{content:"Ingénierie"}
html[lang="fr"] .grid .tarch[data-tarc="ai"] .tarcTag:after{content:"IA & Données"}
html[lang="fr"] .grid .tarch[data-tarc="product"] .tarcTag:after{content:"Produit"}
html[lang="fr"] .grid .tarch[data-tarc="business"] .tarcTag:after{content:"Développement commercial"}
/* copy on the solid card body below the photo */
.grid .tarch .tarcBody{padding:19px 22px 22px}
.grid .tarch .tarcBody h3{font-size:19px}
.grid .tarch .tarcBody .ico{margin-bottom:12px}
@media (prefers-reduced-motion:reduce){.grid .tarch .tarcImg{transition:none;transform:none}}

/* ============================================================
   19 · FIX .ico supprimé — garde l'espace sans faire remonter le texte
   Tu supprimes la div <div class="ico">…</div> mais la card ne bouge pas :
   - si un .ico existe encore → il reste dans le flux mais invisible
   - si le .ico a été retiré du HTML → un ::before invisible de même
     taille prend exactement sa place. Double-espace évité via :has().
   À retirer simplement : supprime ce bloc et le texte remontera de 59 px.
   ============================================================ */
.ico{
  visibility:hidden!important;
  pointer-events:none!important;
  /* garde width/height/margin existants → le texte ne remonte pas */
}
/* .ico retiré du HTML → on recrée un espace fantôme de 44×44 + margin */
.stkBody:not(:has(.ico))::before,
.tarcBody:not(:has(.ico))::before,
.stBody:not(:has(.ico))::before,
.govBody:not(:has(.ico))::before{
  content:"";
  display:block;
  width:44px;
  height:44px;
  border-radius:13px;
  margin-bottom:15px;
  visibility:hidden;
  pointer-events:none;
}
/* tailles spécifiques déjà définies pour gov / tarch / stake-compact */
.grid .gov .govBody:not(:has(.ico))::before{margin-bottom:12px}
.grid .tarch .tarcBody:not(:has(.ico))::before{margin-bottom:12px}
#users .grid.grid4 .stake .stBody:not(:has(.ico))::before{width:38px;height:38px;margin-bottom:11px}
/* cas général : toute card qui contenait un .ico (stack, tarch, gov, stake)
   — fallback pour navigateurs sans :has() : le ::before agit même si :has
   n'est pas compris, donc l'espace est toujours préservé après suppression */
@supports not selector(:has(*)){
  .stkBody::before,
  .tarcBody::before,
  .stBody::before,
  .govBody::before{
    content:"";
    display:block;
    width:44px;
    height:44px;
    border-radius:13px;
    margin-bottom:15px;
    visibility:hidden;
    pointer-events:none;
  }
  .grid .gov .govBody::before{margin-bottom:12px}
  .grid .tarch .tarcBody::before{margin-bottom:12px}
  #users .grid.grid4 .stake .stBody::before{width:38px;height:38px;margin-bottom:11px}
  /* si un .ico existe encore dans un navigateur sans :has, on cache le double */
  .stkBody:has(.ico)::before,
  .tarcBody:has(.ico)::before,
  .stBody:has(.ico)::before,
  .govBody:has(.ico)::before{display:none}
}