/* Neon palette shared by every page (same colours as the influencer block and "Nos systèmes").
   Yellow stays the main colour and text stays dark on yellow: neon only goes on accents,
   a few dark bands, icons, the footer and the menu. */
:root{
  --n-orange:#ffb547;--n-red:#ff5e3a;--n-pink:#ff4fa3;--n-violet:#8b3dff;--n-cyan:#22d3ee;--n-blue:#2b6bff;--n-night:#0b0710;
  --n-tri:linear-gradient(90deg,#ff9a3c,#ff4fa3,#8b3dff,#22d3ee,#ff9a3c);
  /* darker version for words on yellow, so they stay readable */
  --n-warm:linear-gradient(90deg,#e0431f,#d81b67 50%,#7a2ff0);
  --n-btn:linear-gradient(90deg,#ff5e3a,#ff4fa3,#8b3dff,#ff4fa3,#ff5e3a)
}

/* highlighted words in the big titles */
.sec-head h2 .pink,.head h2 span,.pr-intro h2 span,.phero h1>span:not(.w),.phero h1 .hl,.story h2 span,.blk h2 span,.talk .t1 span{
  background:var(--n-warm);-webkit-background-clip:text;background-clip:text;color:transparent!important;text-shadow:none!important}

/* home slogan: only the last line ("Avec l'IA.") is in gradient, the rest stays as designed */
.hero h1.split .l3{background:var(--n-warm);-webkit-background-clip:text;background-clip:text;color:transparent;width:max-content;max-width:100%}

/* thin moving neon line under the header */
.top,.bar{isolation:isolate}
.top::after,.bar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--n-tri);background-size:200% 100%;animation:nSlide 8s linear infinite;pointer-events:none}
.bar::after{bottom:0;opacity:.85}
@keyframes nSlide{to{background-position:200% 0}}

/* icons: neon tiles, colours alternate like the system categories */
.ic,.step-ic{background:linear-gradient(145deg,var(--n-orange),var(--n-red))!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 10px 20px -8px rgba(255,94,58,.7)}
.ic svg,.step-ic svg{stroke:#fff!important;color:#fff}
:nth-child(3n+2)>.ic,:nth-child(3n+2)>*>.ic,.step:nth-of-type(3n+2) .step-ic{background:linear-gradient(145deg,#ff6fb5,var(--n-violet))!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 10px 20px -8px rgba(139,61,255,.7)}
:nth-child(3n)>.ic,:nth-child(3n)>*>.ic,.step:nth-of-type(3n) .step-ic{background:linear-gradient(145deg,#3ee6ff,var(--n-blue))!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 10px 20px -8px rgba(43,107,255,.7)}

/* cards: a neon line on top and a coloured glow */
.card,.step,.wf-card{position:relative}
.card::before,.step::after{content:"";position:absolute;left:14px;right:14px;top:-1px;height:3px;border-radius:3px;background:var(--n-tri);opacity:.9;pointer-events:none}
.card:hover,.step:hover{box-shadow:0 30px 60px -32px rgba(139,61,255,.55),0 10px 30px -20px rgba(255,79,163,.5)}

/* dark neon bands, like the influencer block */
#film{background:radial-gradient(60% 80% at 12% 15%,rgba(255,79,163,.35),transparent 60%),radial-gradient(50% 70% at 92% 92%,rgba(34,211,238,.25),transparent 60%),var(--n-night);padding-block:90px!important;color:#fff}
#film .sec-head h2{color:#fff}
#film .sec-head h2 .pink{background:linear-gradient(90deg,var(--n-orange),var(--n-pink),var(--n-violet));-webkit-background-clip:text;background-clip:text}
#film .sec-head p,#film .film-meta{color:rgba(255,255,255,.72);text-shadow:none}
.talk .t1 span{background:var(--n-warm)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
.end{background:radial-gradient(60% 120% at 0% 0%,rgba(255,79,163,.5),transparent 60%),radial-gradient(60% 120% at 100% 100%,rgba(34,211,238,.32),transparent 60%),var(--n-night)!important;color:#fff!important}
.end h2{color:#fff!important}
.end h2 span{background:linear-gradient(90deg,var(--n-orange),var(--n-pink));-webkit-background-clip:text;background-clip:text;color:transparent!important}

/* footer: night band with a neon line */
body>footer,.foot{position:relative;background:var(--n-night)!important;color:rgba(255,255,255,.72)!important;border-top:0!important;margin-top:0}
body>footer::before,.foot::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--n-tri);background-size:200% 100%;animation:nSlide 8s linear infinite}
body>footer a,.foot a,.foot span{color:#fff!important}
body>footer a:hover,.foot a:hover{color:#ff8fc4!important}

/* FAQ "+" buttons */
.qa .pm{background:linear-gradient(145deg,#ff6fb5,var(--n-violet))!important;color:#fff!important}

/* ---------- menu: a sliding pill that follows the mouse, and an animated "Réserver un audit" ---------- */
.btn-pink{background:var(--n-btn)!important;background-size:300% 100%!important;color:#fff!important;animation:nBtn 6s linear infinite;box-shadow:0 10px 26px -10px rgba(139,61,255,.7)}
.menu .cta,.bar nav .cta{position:relative;background:var(--n-btn)!important;background-size:300% 100%!important;color:#fff!important;animation:nBtn 6s linear infinite;box-shadow:0 8px 24px -8px rgba(139,61,255,.65);isolation:isolate}
.menu .cta::before,.bar nav .cta::before{content:"";position:absolute;inset:-3px;z-index:-1;border-radius:inherit;background:conic-gradient(from var(--n-a,0deg),#ff9a3c,#ff4fa3,#8b3dff,#22d3ee,#ff9a3c);filter:blur(6px);opacity:.75;animation:nSpin 4s linear infinite}
@property --n-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes nSpin{to{--n-a:360deg}}
@keyframes nBtn{to{background-position:300% 0}}
.n-pill{display:none}
@media (min-width:861px){
  .menu,.bar nav#topnav{position:relative}
  .bar nav#topnav{gap:4px}
  .bar nav#topnav a{padding:8px 12px;border-radius:8px}
  .menu a,.bar nav#topnav a{position:relative;z-index:1;transition:color .25s}
  .menu a:hover,.bar nav#topnav a:hover{background:transparent}
  .menu a[aria-current="page"]{background:transparent!important;color:var(--text)}
  .n-pill{display:block;position:absolute;z-index:0;top:0;left:0;height:0;width:0;border-radius:8px;background:var(--n-night);pointer-events:none;opacity:0;
    box-shadow:0 0 0 1.5px transparent,0 8px 20px -8px rgba(139,61,255,.7);
    transition:transform .45s cubic-bezier(.3,1.3,.4,1),width .45s cubic-bezier(.3,1.3,.4,1),height .3s,opacity .25s}
  .n-pill.on{opacity:1}
  /* neon ring that turns around the pill */
  .n-pill::before{content:"";position:absolute;inset:-2px;z-index:-1;border-radius:10px;background:conic-gradient(from var(--n-a,0deg),#ff9a3c,#ff4fa3,#8b3dff,#22d3ee,#ff9a3c);animation:nSpin 3s linear infinite}
  .n-pill::after{content:"";position:absolute;inset:0;border-radius:8px;background:var(--n-night)}
  .menu a.n-on,.bar nav#topnav a.n-on{color:#ffd93d!important;text-shadow:none}
  .menu a.cta.n-on,.bar nav#topnav a.cta.n-on{color:#fff!important}
}
@media (prefers-reduced-motion:reduce){
  .top::after,.bar::after,body>footer::before,.foot::before,.menu .cta,.bar nav .cta,.btn-pink,.menu .cta::before,.bar nav .cta::before,.n-pill::before{animation:none}
  .n-pill{transition:opacity .2s}
}