/* ==========================================================================
   FX — couche de finition visuelle (boutons, cartes, popups, textes, détails latéraux).
   Purement additive : retirer ce fichier et js/fx.js rend le site à son état précédent.
   Les animations sont désactivées si l'utilisateur demande "réduire les animations".
   ========================================================================== */

::selection{background:rgba(58,214,255,0.28);color:#fff;}
html{scrollbar-width:thin;scrollbar-color:#2a3350 transparent;}
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#2b3a5e,#3b2f66);border-radius:9px;border:2px solid var(--bg);}
::-webkit-scrollbar-track{background:transparent;}

/* ---------- barre de progression de lecture ---------- */
#fx-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:1000;
  background:var(--gradient);transform-origin:left;transform:scaleX(0);
  box-shadow:0 0 12px rgba(58,214,255,0.7);pointer-events:none;
}

/* ---------- lueur qui suit le curseur (souris uniquement) ---------- */
#fx-cursor{
  position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;z-index:90;
  border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(58,214,255,0.075),rgba(155,107,255,0.045) 40%,transparent 68%);
  transition:opacity .5s var(--ease);will-change:transform;
}
#fx-cursor.on{opacity:1;}

/* ---------- rails latéraux (grands écrans) ---------- */
.fx-rail{display:none;}
@media (min-width:1320px){
  .fx-rail{display:block;position:fixed;top:0;bottom:0;z-index:5;pointer-events:none;}
  .fx-rail-l{left:16px;width:1px;background:linear-gradient(180deg,transparent,rgba(58,214,255,0.22) 20%,rgba(155,107,255,0.22) 80%,transparent);}
  .fx-rail-l::after{ /* impulsion lumineuse qui descend le long du rail */
    content:"";position:absolute;left:-1px;width:3px;height:90px;border-radius:3px;
    background:linear-gradient(180deg,transparent,var(--cyan),transparent);opacity:.8;
    top:0;animation:fx-run 7s linear infinite;will-change:transform;
  }
  .fx-rail-l span{
    position:absolute;left:10px;top:50%;
    writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg);
    font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--text-dim);white-space:nowrap;
  }
  .fx-rail-r{right:14px;width:14px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;pointer-events:none;}
  .fx-dot{
    pointer-events:auto;position:relative;width:8px;height:8px;border-radius:50%;padding:0;cursor:pointer;
    border:1px solid var(--text-dim);background:transparent;transition:all .35s var(--ease);
  }
  .fx-dot:hover{border-color:var(--cyan);transform:scale(1.35);}
  .fx-dot.active{background:var(--gradient);border-color:transparent;box-shadow:0 0 12px rgba(58,214,255,0.8);transform:scale(1.3);}
  .fx-dot::before{ /* étiquette au survol */
    content:attr(data-label);position:absolute;right:20px;top:50%;transform:translate(6px,-50%);
    padding:4px 10px;border-radius:999px;font-size:11px;letter-spacing:.06em;white-space:nowrap;
    background:var(--surface);border:1px solid var(--border-strong);color:var(--text);opacity:0;pointer-events:none;
    transition:opacity .25s var(--ease),transform .25s var(--ease);
  }
  .fx-dot:hover::before,.fx-dot:focus-visible::before{opacity:1;transform:translate(0,-50%);}
}
@keyframes fx-run{from{transform:translateY(-100px);}to{transform:translateY(100vh);}}

/* ---------- bandeau défilant ---------- */
.fx-marquee{
  position:relative;z-index:1;overflow:hidden;padding:16px 0;
  border-block:1px solid var(--border);
  background:linear-gradient(90deg,transparent,rgba(58,214,255,0.04),rgba(155,107,255,0.05),transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.fx-marquee-track{display:flex;width:max-content;align-items:center;gap:34px;animation:fx-marquee 38s linear infinite;will-change:transform;}
.fx-marquee:hover .fx-marquee-track{animation-play-state:paused;}
.fx-marquee-track span{
  font-family:"Space Grotesk";font-size:15px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--text-dim);white-space:nowrap;
  transition:color .3s var(--ease);
}
.fx-marquee-track span:hover{color:var(--cyan);}
.fx-marquee-track i{width:7px;height:7px;flex:none;transform:rotate(45deg);background:var(--gradient);opacity:.7;border-radius:1px;}
@keyframes fx-marquee{to{transform:translateX(-50%);}}

/* ---------- textes ---------- */
.fx-word{display:inline-block;opacity:0;transform:translateY(.55em);}
.fx-in .fx-word{animation:fx-word .8s var(--ease) both;animation-delay:calc(var(--i) * 70ms + 80ms);}
@keyframes fx-word{to{opacity:1;transform:none;}}
.fx-in .grad-text.fx-word{animation:fx-word .8s var(--ease) both,fx-grad 9s ease-in-out 1s infinite alternate;animation-delay:calc(var(--i) * 70ms + 80ms),1s;}

.grad-text{background-size:220% 100%;animation:fx-grad 9s ease-in-out infinite alternate;}
@keyframes fx-grad{from{background-position:0% 50%;}to{background-position:100% 50%;}}
.grad-text.fx-off{animation-play-state:paused;}

.in-view .eyebrow .dash,.eyebrow.in-view .dash{animation:fx-dash .9s var(--ease) .15s both;}
.eyebrow.reveal:not(.in-view) .dash{width:0;}
@keyframes fx-dash{to{width:20px;}}

.link-more{position:relative;}
.link-more::after{
  content:"";position:absolute;left:0;bottom:-3px;height:1px;width:100%;
  background:var(--gradient);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
}
.link-more:hover::after{transform:scaleX(1);}

/* ---------- boutons ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;}
.btn-primary{transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease),translate .25s var(--ease);}
.btn-primary::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,0.55) 50%,transparent 70%);
  transform:translateX(-130%);
}
.btn-primary:hover::after{transform:translateX(130%);transition:transform .8s var(--ease);}
.btn-primary:active{transform:translateY(0) scale(.97);}
.btn-outline{transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease),translate .25s var(--ease);}
.btn-outline:hover{background:rgba(58,214,255,0.07);box-shadow:0 0 0 1px rgba(58,214,255,0.25),0 12px 30px -14px rgba(58,214,255,0.55);}
.btn-outline:active{transform:translateY(0) scale(.97);}
.fx-ripple{
  position:absolute;border-radius:50%;pointer-events:none;z-index:-1;
  width:12px;height:12px;margin:-6px 0 0 -6px;background:rgba(255,255,255,0.55);
  animation:fx-ripple .65s ease-out forwards;
}
.btn-outline .fx-ripple{background:rgba(58,214,255,0.4);}
@keyframes fx-ripple{to{transform:scale(28);opacity:0;}}

.hero-actions .btn-primary,.cta .btn-primary{animation:fx-glow 3.6s ease-in-out 3;}
@keyframes fx-glow{0%,100%{box-shadow:0 10px 30px -10px rgba(58,214,255,0.45);}50%{box-shadow:0 12px 42px -8px rgba(155,107,255,0.6);}}

.icon-btn{transition:transform .35s var(--ease),border-color .3s var(--ease),color .3s var(--ease),box-shadow .35s var(--ease);}
.icon-btn:hover{transform:translateY(-2px);border-color:var(--cyan);color:var(--cyan);box-shadow:0 8px 22px -10px rgba(58,214,255,0.7);}
.back-to-top:hover{animation:fx-bounce .6s var(--ease);}
@keyframes fx-bounce{40%{transform:translateY(-8px);}70%{transform:translateY(-1px);}}

/* ---------- cartes : halo qui suit la souris, inclinaison 3D, coins HUD ---------- */
.fx-spot{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;overflow:hidden;}
.fx-spot::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s var(--ease);
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(58,214,255,0.14),rgba(155,107,255,0.06) 45%,transparent 70%);
}
.fx-spot::after{ /* filet lumineux en haut de la carte */
  content:"";position:absolute;top:0;left:50%;height:1px;width:0;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--cyan),var(--violet),transparent);
  transition:width .55s var(--ease);
}
.fx-card:hover>.fx-spot::before{opacity:1;}
.fx-card:hover>.fx-spot::after{width:86%;}

.fx-tilt{
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease),opacity .8s var(--ease),rotate .25s ease-out;
}
.fx-tilt.fx-hot{will-change:rotate,transform;}
.fx-tilt:hover .pole-icon,.fx-tilt:hover .price-icon,.fx-tilt:hover .pole-logo{animation:fx-bob 2.4s ease-in-out infinite;}
@keyframes fx-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
.price-card:hover .price-value{text-shadow:0 0 24px rgba(58,214,255,0.35);}
.quote-item:hover .quote-price{text-shadow:0 0 20px rgba(58,214,255,0.4);}

.fx-hud>.fx-spot{inset:9px;border-radius:0;--c:rgba(58,214,255,0.6);
  background:
    linear-gradient(var(--c),var(--c)) top left/14px 1px no-repeat,
    linear-gradient(var(--c),var(--c)) top left/1px 14px no-repeat,
    linear-gradient(var(--c),var(--c)) top right/14px 1px no-repeat,
    linear-gradient(var(--c),var(--c)) top right/1px 14px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/14px 1px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/1px 14px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/14px 1px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/1px 14px no-repeat;
  transition:inset .4s var(--ease);
}
.fx-hud:hover>.fx-spot{inset:5px;}
.fx-hud>.fx-spot::after{display:none;}

/* ---------- champs de formulaire ---------- */
.bk-field input:focus,.bk-field textarea:focus,.field input:focus,.field textarea:focus,.field select:focus{
  box-shadow:0 0 0 3px rgba(58,214,255,0.14),0 8px 24px -14px rgba(58,214,255,0.6);
}
:focus-visible{outline-color:var(--cyan);}

/* ---------- détails d'interface ---------- */
.nav-list a,.main-nav a{transition:color .3s var(--ease);}
.legal-nav a{transition:all .3s var(--ease);}
.legal-nav a:hover{box-shadow:0 8px 22px -12px rgba(58,214,255,0.7);transform:translateY(-2px);}
.site-footer::before{
  content:"";position:absolute;top:-1px;left:0;height:1px;width:100%;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--violet),transparent);background-size:200% 100%;
  animation:fx-sweep 7s linear infinite;opacity:.55;
}
@keyframes fx-sweep{from{background-position:200% 0;}to{background-position:-200% 0;}}
.social-row .icon-btn:hover{transform:translateY(-4px) rotate(-6deg);}
.hero-bg .sat-1{translate:calc(var(--px,0) * -18px) calc(var(--py,0) * -12px);transition:translate .6s var(--ease);}
.hero-bg .sat-2{translate:calc(var(--px,0) * 26px) calc(var(--py,0) * 16px);transition:translate .6s var(--ease);}
.hero-bg .nebula-cyan{translate:calc(var(--px,0) * 22px) calc(var(--py,0) * 14px);transition:translate .8s var(--ease);}
.hero-bg .nebula-violet{translate:calc(var(--px,0) * -22px) calc(var(--py,0) * -14px);transition:translate .8s var(--ease);}

/* ---------- popups ---------- */
.notify{
  position:relative;overflow:hidden;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  animation:fx-toast .55s cubic-bezier(.2,1.2,.3,1);
}
.notify::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gradient);}
.notify.success::before{background:#4ade80;}
.notify.error::before{background:#f87171;}
.notify::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--gradient);transform-origin:left;animation:fx-toast-bar 4.2s linear forwards;opacity:.8;
}
.notify.success::after{background:#4ade80;}
.notify.error::after{background:#f87171;}
.notify .n-icon{animation:fx-pop .5s cubic-bezier(.2,1.6,.4,1) .15s both;}
@keyframes fx-toast{from{opacity:0;transform:translateX(40px) scale(.94);}to{opacity:1;transform:none;}}
@keyframes fx-toast-bar{to{transform:scaleX(0);}}
@keyframes fx-pop{from{transform:scale(0);}to{transform:scale(1);}}

.cookie-notice{
  border-color:transparent;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(120deg,rgba(58,214,255,0.7),rgba(155,107,255,0.7)) border-box;
  border:1px solid transparent;animation:fx-rise .7s var(--ease) .9s both;
}
@keyframes fx-rise{from{opacity:0;transform:translate(-50%,30px);}to{opacity:1;transform:translate(-50%,0);}}

.cb-fab{overflow:visible;}
.cb-fab::before{
  content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--cyan);
  animation:fx-ring 2.6s ease-out 1.2s 4;opacity:0;pointer-events:none;
}
@keyframes fx-ring{0%{transform:scale(1);opacity:.7;}100%{transform:scale(1.9);opacity:0;}}
.cb-panel{transform-origin:bottom left;animation:fx-panel .38s cubic-bezier(.2,1.1,.3,1);}
@keyframes fx-panel{from{opacity:0;transform:translateY(16px) scale(.9);}to{opacity:1;transform:none;}}
.cb-msg{animation:fx-msg .32s var(--ease);}
@keyframes fx-msg{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.cb-chip{transition:all .25s var(--ease);}
.cb-chip:hover{transform:translateY(-2px);box-shadow:0 8px 18px -10px rgba(155,107,255,0.8);}
.cb-typing{display:flex;gap:5px;padding:12px 14px;}
.cb-typing i{width:6px;height:6px;border-radius:50%;background:var(--text-muted);animation:fx-dot 1s ease-in-out infinite;}
.cb-typing i:nth-child(2){animation-delay:.15s;}
.cb-typing i:nth-child(3){animation-delay:.3s;}
@keyframes fx-dot{0%,60%,100%{transform:translateY(0);opacity:.4;}30%{transform:translateY(-5px);opacity:1;}}
.cb-hint{
  position:fixed;left:92px;bottom:38px;z-index:60;max-width:220px;padding:10px 14px;border-radius:14px 14px 14px 4px;
  background:var(--surface);border:1px solid var(--border-strong);color:var(--text);font-size:13px;line-height:1.4;
  box-shadow:var(--shadow-md);animation:fx-msg .5s var(--ease);
}
@media (max-width:640px){.cb-hint{left:84px;bottom:28px;}}

/* ---------- accessibilité : pas d'animation si demandé ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important;}
  .fx-marquee-track{animation:none;}
  #fx-cursor,.fx-rail-l::after{display:none;}
}

/* ---------- objets en apesanteur (js/zerog.js) ---------- */
/* Couche fixe placée juste après le champ d'étoiles : sous toutes les sections (z-index 1), donc derrière cartes et textes. */
#zg-layer{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.zg-obj{position:absolute;left:0;top:0;will-change:transform;transition:opacity .9s ease;}
.zg-obj svg{display:block;width:100%;height:100%;overflow:visible;}
.zg-obj svg *{vector-effect:non-scaling-stroke;stroke-width:1.4px;}
.hero-bg .sat{display:none;}
.zg-obj.grabbed{filter:drop-shadow(0 0 14px currentColor) brightness(1.4);}
html.zg-hover{cursor:grab;}
html.zg-dragging,html.zg-dragging *{cursor:grabbing !important;user-select:none;-webkit-user-select:none;}

/* Le halo cyan du hero est coupé par le haut du hero (sous l'en-tête) : on le fond en haut plutôt que de laisser un bord net. */
.hero-bg .nebula-cyan{-webkit-mask-image:linear-gradient(to bottom,transparent 150px,#000 300px);mask-image:linear-gradient(to bottom,transparent 150px,#000 300px);}