/* =================================================================
   NS FX — couche d'effets avancés NS Development
   Vient PAR-DESSUS ns-motion.css, ne le remplace pas.

   Aucune dépendance, aucune bibliothèque externe, aucun téléchargement.
   Uniquement du CSS et du canvas natif : rien à auditer, rien qui casse,
   rien qui ralentisse le site.

   Tout se désactive si le visiteur a coché « réduire les animations »
   dans son système, et les effets de survol s'éteignent au tactile.
   ================================================================= */

/* ---------- 1. Curseur sur-mesure (bureau uniquement) ---------- */
.fx-cursor,.fx-cursor-ring{position:fixed;top:0;left:0;z-index:10000;pointer-events:none;border-radius:50%;
  will-change:transform;opacity:0;transition:opacity .3s}
.fx-cursor{width:6px;height:6px;background:var(--acc2);margin:-3px 0 0 -3px}
.fx-cursor-ring{width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid var(--line2);
  transition:width .28s cubic-bezier(.2,.7,.2,1),height .28s cubic-bezier(.2,.7,.2,1),
             margin .28s cubic-bezier(.2,.7,.2,1),background .28s,border-color .28s,opacity .3s}
body.fx-cursor-on .fx-cursor,body.fx-cursor-on .fx-cursor-ring{opacity:1}
body.fx-cursor-on,body.fx-cursor-on a,body.fx-cursor-on button,body.fx-cursor-on label{cursor:none}
.fx-cursor-ring.is-link{width:62px;height:62px;margin:-31px 0 0 -31px;border-color:var(--acc);background:var(--glow)}
.fx-cursor-ring.is-view{width:86px;height:86px;margin:-43px 0 0 -43px;border-color:transparent;background:var(--acc)}
.fx-cursor-ring .lbl{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);
  font-size:9.5px;font-weight:700;letter-spacing:.1em;color:#fff;opacity:0;transition:opacity .2s}
.fx-cursor-ring.is-view .lbl{opacity:1}
:root[data-theme="mono"] .fx-cursor-ring.is-view .lbl{color:#0a0a0c}

/* Verrou de défilement pendant l'écran d'ouverture */
body.fx-lock{overflow:hidden;height:100vh}

/* ---------- 2. Écran d'ouverture ---------- */
.fx-preload{position:fixed;inset:0;z-index:10001;background:var(--bg);display:grid;place-items:center;
  transition:transform 1s cubic-bezier(.76,0,.24,1)}
.fx-preload.done{transform:translateY(-101%)}
.fx-preload .pl-in{text-align:center}
.fx-preload .pl-mark{font-family:var(--disp);font-weight:800;font-size:clamp(38px,7vw,74px);letter-spacing:-.04em;
  line-height:1;overflow:hidden}
.fx-preload .pl-mark span{display:inline-block;transform:translateY(105%);animation:plUp .9s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes plUp{to{transform:none}}
.fx-preload .pl-bar{width:min(230px,52vw);height:1px;background:var(--line2);margin:22px auto 0;overflow:hidden}
.fx-preload .pl-bar i{display:block;height:100%;width:0;background:var(--acc)}
.fx-preload .pl-num{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--muted);margin-top:12px}

/* ---------- 3. Fond aurore animé ---------- */
.fx-aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fx-aurora i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;will-change:transform}
.fx-aurora i:nth-child(1){width:46vw;height:46vw;background:var(--acc);left:-8vw;top:-12vw;animation:auA 22s ease-in-out infinite}
.fx-aurora i:nth-child(2){width:38vw;height:38vw;background:var(--acc-deep);right:-6vw;top:8vh;animation:auB 27s ease-in-out infinite}
.fx-aurora i:nth-child(3){width:32vw;height:32vw;background:var(--acc2);left:32vw;bottom:-14vw;opacity:.3;animation:auC 31s ease-in-out infinite}
@keyframes auA{50%{transform:translate3d(8vw,6vh,0) scale(1.15)}}
@keyframes auB{50%{transform:translate3d(-7vw,9vh,0) scale(.88)}}
@keyframes auC{50%{transform:translate3d(5vw,-7vh,0) scale(1.2)}}
:root[data-theme="mono"] .fx-aurora i{opacity:.16}
:root[data-theme="mono"] .fx-aurora i:nth-child(3){opacity:.1}

/* ---------- 4. Mot qui défile dans le titre ---------- */
.fx-cycle{display:inline-block;position:relative;white-space:nowrap;perspective:700px}
.fx-cycle .cy-word{display:inline-block;white-space:nowrap;transform-origin:50% 0;
  background:linear-gradient(100deg,var(--ns-g1),var(--ns-g2),var(--ns-g1));
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:cyGrad 5s linear infinite}
@keyframes cyGrad{to{background-position:220% 0}}
.fx-cycle .cy-word.out{animation:cyOut .42s cubic-bezier(.6,0,.9,.4) forwards}
.fx-cycle .cy-word.in{animation:cyIn .55s cubic-bezier(.2,.7,.2,1) forwards,cyGrad 5s linear infinite}
@keyframes cyOut{to{transform:translateY(-72%) rotateX(-70deg);opacity:0;filter:blur(6px)}}
@keyframes cyIn{from{transform:translateY(72%) rotateX(70deg);opacity:0;filter:blur(6px)}to{transform:none;opacity:1;filter:none}}
.fx-cycle .cy-cursor{display:inline-block;width:3px;height:.82em;background:var(--acc);margin-left:6px;
  vertical-align:baseline;animation:cyBlink 1.05s steps(2) infinite}
@keyframes cyBlink{50%{opacity:0}}

/* ---------- 5. Cartes avec halo qui suit la souris ---------- */
.fx-spot{position:relative;isolation:isolate;overflow:hidden}
.fx-spot::before{content:"";position:absolute;inset:-1px;z-index:-1;opacity:0;transition:opacity .35s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),var(--glow),transparent 62%)}
.fx-spot:hover::before{opacity:1}
.fx-spot::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;opacity:0;
  transition:opacity .35s;pointer-events:none;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),var(--acc),transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.fx-spot:hover::after{opacity:.85}

/* ---------- 6. Bandeau défilant ---------- */
.fx-band{position:relative;overflow:hidden;border-block:1px solid var(--line);padding:26px 0;background:var(--bg2)}
.fx-band-track{display:flex;width:max-content;animation:bandRun 34s linear infinite;will-change:transform}
.fx-band:hover .fx-band-track{animation-play-state:paused}
@keyframes bandRun{to{transform:translateX(-50%)}}
.fx-band-track span{display:inline-flex;align-items:center;gap:26px;padding-right:26px;
  font-family:var(--disp);font-weight:800;font-size:clamp(22px,3.4vw,40px);letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1px var(--line2);white-space:nowrap}
.fx-band-track span b{color:var(--ink);-webkit-text-stroke:0;font-weight:800}
.fx-band-track span i{font-style:normal;color:var(--acc);-webkit-text-stroke:0;font-size:.6em}

/* ---------- 7. Rail horizontal piloté au scroll ---------- */
.fx-rail{position:relative}
.fx-rail-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.fx-rail-track{display:flex;gap:26px;padding:0 6vw;will-change:transform}
.fx-rail-card{flex:0 0 min(420px,82vw);position:relative}
.fx-rail-head{position:absolute;top:12vh;left:6vw;right:6vw;z-index:2;pointer-events:none}

/* ---------- 8. Globe hébergement ---------- */
.fx-globe-sec{position:relative;overflow:hidden}
.globe-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.globe-stage{position:relative;aspect-ratio:1;max-width:520px;margin:0 auto;width:100%}
.globe-stage canvas{width:100%;height:100%;display:block}
.globe-halo{position:absolute;inset:6%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,var(--glow),transparent 62%);filter:blur(22px)}
.globe-tag{position:absolute;display:flex;align-items:center;gap:9px;padding:8px 13px;border-radius:11px;
  background:var(--card);border:1px solid var(--line2);font-size:12.5px;white-space:nowrap;
  box-shadow:0 12px 34px rgba(0,0,0,.4);animation:gFloat 6s ease-in-out infinite}
.globe-tag b{font-family:var(--disp);font-size:12.5px}
.globe-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 4px var(--ok-halo)}
.globe-tag.t1{top:12%;right:-4%}
.globe-tag.t2{bottom:16%;left:-6%;animation-delay:-2.4s}
@keyframes gFloat{50%{transform:translateY(-11px)}}
.globe-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
.globe-fact{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:17px 16px}
.globe-fact b{display:block;font-family:var(--disp);font-weight:800;font-size:26px;line-height:1}
.globe-fact span{display:block;font-size:11.5px;color:var(--soft);margin-top:6px;line-height:1.4}

/* ---------- 9. Révélation par masque ---------- */
[data-mask]{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.76,0,.24,1)}
[data-mask].ns-in{clip-path:inset(0 0 0 0)}

/* ---------- 10. Index de section flottant ---------- */
.fx-dots{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:90;display:flex;
  flex-direction:column;gap:13px}
.fx-dots a{width:7px;height:7px;border-radius:50%;background:var(--line2);transition:all .3s;position:relative}
.fx-dots a::after{content:attr(data-t);position:absolute;right:16px;top:50%;transform:translate(6px,-50%);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);
  white-space:nowrap;opacity:0;transition:all .3s;pointer-events:none}
.fx-dots a:hover::after{opacity:1;transform:translate(0,-50%)}
.fx-dots a.on{background:var(--acc);box-shadow:0 0 0 4px var(--glow);height:20px;border-radius:4px}

/* ---------- Vérificateur de nom de domaine ---------- */
.dom-box{max-width:820px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:30px}
.dom-form{display:flex;align-items:stretch;gap:12px;background:var(--card2);border:1px solid var(--line2);
  border-radius:14px;padding:8px;transition:border-color var(--tr),box-shadow var(--tr)}
.dom-form:focus-within{border-color:var(--acc);box-shadow:0 0 0 4px var(--glow)}
.dom-prefix{display:flex;align-items:center;padding-left:14px;font-family:var(--mono);font-size:14px;color:var(--muted)}
.dom-form input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--ink);
  font-family:var(--disp);font-weight:600;font-size:clamp(17px,2.4vw,22px);padding:10px 6px}
.dom-form input::placeholder{color:var(--muted);font-weight:500}
.dom-form button{flex:none;white-space:nowrap}
.dom-hint{margin:14px 2px 0;font-size:12.5px;color:var(--muted)}
.dom-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:22px}
.dom-res{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--card2);
  border:1px solid var(--line);border-radius:13px;padding:15px 16px;opacity:0;transform:translateY(8px);
  animation:domIn .5s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes domIn{to{opacity:1;transform:none}}
.dom-res .dn{font-family:var(--mono);font-size:13.5px;font-weight:700;color:var(--ink)}
.dom-res .dn em{font-style:normal;color:var(--acc2)}
.dom-res .ds{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;white-space:nowrap}
.dom-res .ds::before{content:"";width:8px;height:8px;border-radius:50%;flex:none}
.dom-res.free{border-color:var(--ok-line)}
.dom-res.free .ds{color:var(--ok)}
.dom-res.free .ds::before{background:var(--ok);box-shadow:0 0 0 3px var(--ok-halo)}
.dom-res.taken .ds{color:#ff7a7a}
.dom-res.taken .ds::before{background:#ff7a7a;box-shadow:0 0 0 3px rgba(255,122,122,.18)}
.dom-res.checking .ds{color:var(--soft)}
.dom-res.checking .ds::before{background:var(--soft);animation:domPulse 1s ease-in-out infinite}
.dom-res.error .ds{color:var(--muted)}
.dom-res.error .ds::before{background:var(--muted)}
@keyframes domPulse{50%{opacity:.3}}
.dom-cta{display:none;margin-top:22px;padding:18px 20px;border-radius:14px;
  background:linear-gradient(160deg,var(--glow),transparent 75%);border:1px solid var(--line2);
  align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.dom-cta.on{display:flex;animation:domIn .5s forwards}
.dom-cta p{font-size:13.5px;color:var(--ink);margin:0}
.dom-cta p b{color:var(--acc2)}
.dom-legal{font-size:11px;color:var(--muted);margin-top:16px;text-align:center;line-height:1.5}
@media(max-width:560px){
  .dom-form{flex-wrap:wrap}
  .dom-form input{width:100%}
  .dom-form button{width:100%}
  .dom-prefix{display:none}
}

/* ---------- Carte photo 3D (contact Samir) ---------- */
.tm3d{position:relative;perspective:1100px;max-width:360px;margin:0 auto;width:100%}
.tm3d::before{content:"";position:absolute;inset:-10% -8% -14% -8%;z-index:0;border-radius:34px;
  background:radial-gradient(60% 55% at 50% 32%,var(--glow),transparent 72%);filter:blur(34px);
  opacity:.9;transition:opacity .4s}
.tm3d:hover::before{opacity:1}
.tm3d-card{position:relative;z-index:1;transform-style:preserve-3d;will-change:transform;
  transform:rotateX(calc(var(--ry,0deg) + var(--st,0deg))) rotateY(var(--rx,0deg));
  transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.tm3d-card.dragging{transition:none}
.tm3d-photo{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/5;
  background:var(--card2);border:1px solid var(--line2);
  box-shadow:0 34px 70px rgba(0,0,0,.55),0 4px 14px rgba(0,0,0,.4);transform:translateZ(40px)}
.tm3d-photo img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}
/* reflet qui suit le curseur */
.tm3d-shine{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,10%),rgba(255,255,255,.30),transparent 46%);
  mix-blend-mode:overlay;opacity:0;transition:opacity .3s}
.tm3d:hover .tm3d-shine{opacity:1}
/* liseré lumineux au survol */
.tm3d-photo::after{content:"";position:absolute;inset:0;border-radius:22px;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
/* pastille "disponible" */
.tm3d-dot{position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  padding:6px 11px;border-radius:20px;background:rgba(10,12,17,.55);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;transform:translateZ(70px)}
.tm3d-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 3px var(--ok-halo)}
/* nom sous la photo, en léger relief */
.tm3d-name{text-align:center;margin-top:20px;transform:translateZ(20px)}
.tm3d-name .nm{font-family:var(--disp);font-weight:800;font-size:21px;letter-spacing:-.01em;color:var(--ink)}
.tm3d-name .rl{font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--acc2);margin-top:6px}
@media(hover:none){
  .tm3d-card{transform:rotateX(var(--st,0deg))!important}
  .tm3d-shine{display:none}
}
@media(prefers-reduced-motion:reduce){
  .tm3d-card{transform:none!important;transition:none}
  .tm3d::before{opacity:.7}
}

/* ---------- 11. Bruit de surface ---------- */
.fx-noise{position:fixed;inset:0;z-index:9997;pointer-events:none;opacity:.028;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- 12. Adaptations ---------- */
@media(max-width:960px){
  .globe-grid{grid-template-columns:1fr;gap:36px}
  .fx-dots{display:none}
  .globe-tag.t1{right:2%}.globe-tag.t2{left:2%}
  .fx-rail-sticky{height:auto;position:static;padding:30px 0}
  .fx-rail-track{transform:none!important;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:14px;-webkit-overflow-scrolling:touch}
  .fx-rail-card{scroll-snap-align:center}
  .fx-rail-head{position:static;margin-bottom:24px}
}
@media(max-width:560px){.globe-facts{grid-template-columns:1fr}}
@media(hover:none){
  .fx-cursor,.fx-cursor-ring{display:none}
  body.fx-cursor-on,body.fx-cursor-on a,body.fx-cursor-on button,body.fx-cursor-on label{cursor:auto}
}
@media(prefers-reduced-motion:reduce){
  .fx-cursor,.fx-cursor-ring,.fx-noise{display:none}
  .fx-aurora i,.fx-band-track,.globe-tag,.fx-cycle .cy-word{animation:none!important}
  [data-mask]{clip-path:none!important;transition:none}
  .fx-preload{display:none}
  .fx-rail-sticky{position:static;height:auto}
  .fx-rail-track{transform:none!important;overflow-x:auto}
}