/* Night palette for the whole site: every page takes the colours of the
   "18 systèmes qui travaillent pour vous" block (night background, pink and cyan glows,
   white text, orange / pink / violet / blue neon accents).
   Loaded last on every page, after neon.css. The round yellow logo is left untouched. */
:root{
  --bg:#0b0710; --surface:#161022; --surface-2:#1d1530; --card:rgba(255,255,255,.05); --field:rgba(255,255,255,.06);
  --text:#fff; --muted:rgba(255,255,255,.74); --line:rgba(255,255,255,.13);
  --pink:#ff4fa3; --hl:#ff4fa3; --accent:#fff; --accent-2:#ff4fa3; --on-accent:#0b0710;
  --net:#a99bd0; --g1:#ffb547; --g2:#ff4fa3; --g3:#22d3ee; --scheme:dark;
  /* words in gradient: bright version, made for a night background */
  --n-warm:linear-gradient(90deg,#ffb547,#ff4fa3 50%,#8b3dff);
  color-scheme:dark;
}
html{background:#0b0710}
body{background-color:#0b0710!important;color:#fff;
  background-image:radial-gradient(60% 50% at 10% 0%,rgba(255,79,163,.22),transparent 62%),radial-gradient(55% 50% at 96% 100%,rgba(34,211,238,.16),transparent 62%),radial-gradient(circle,rgba(255,255,255,.06) 1.2px,transparent 1.5px)!important;
  background-size:auto,auto,26px 26px!important;background-attachment:fixed!important}
::selection{background:#ff4fa3;color:#fff}
:focus-visible{outline-color:#ff4fa3}

/* ---------- shared bits ---------- */
.top{background:color-mix(in srgb,#0b0710 82%,transparent)!important;border-bottom-color:rgba(255,255,255,.08)!important}
.menu a:hover{background:rgba(255,255,255,.08)}
.menu a[aria-current="page"]{background:#fff;color:#0b0710}
.burger{background:#fff;color:#0b0710}
.bar nav a,.menu a{color:rgba(255,255,255,.86)}
.bar nav a:hover,.menu a:hover{color:#fff}
.menu a.n-on,.bar nav#topnav a.n-on{color:#ffb547!important}
@media (max-width:860px){.menu,.bar nav#topnav{background:#0b0710!important;border-bottom-color:rgba(255,255,255,.1)!important}}
/* 8 links: a little tighter on medium screens so the menu stays on one line */
@media (min-width:861px) and (max-width:1240px){
  .menu,.bar nav#topnav{font-size:14px!important;gap:0!important}
  .menu a,.bar nav#topnav a{padding:8px 8px!important}
  .menu .cta{margin-left:4px}
}
@media (min-width:861px) and (max-width:1020px){.menu,.bar nav#topnav{font-size:13px!important}.menu a,.bar nav#topnav a{padding:7px 6px!important}}

/* cards: glass panes over the night, so the 3D background shows through */
.card{background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.12)!important;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 26px 60px -36px rgba(0,0,0,.9)}
.card:hover{box-shadow:0 30px 60px -32px rgba(139,61,255,.55),0 10px 30px -20px rgba(255,79,163,.5)}
.btn-ink{background:#fff;color:#0b0710}
.btn:hover{box-shadow:0 14px 30px -14px rgba(139,61,255,.8)}
.note{color:rgba(255,255,255,.7)}
.kicker{color:rgba(255,255,255,.72)}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.45)}
/* text halo over the 3D shapes: now a night halo */
.kicker,.phero p,.blk h2,.quote p,.note{text-shadow:0 0 2px #0b0710,0 0 10px #0b0710,0 0 22px #0b0710}

/* selected states: neon instead of black-on-yellow */
.pill[aria-pressed="true"],.day[aria-pressed="true"],.toc a.on,.recap,.cal-head button,.tab[aria-selected="true"]{
  background:linear-gradient(90deg,#ff5e3a,#ff4fa3,#8b3dff)!important;color:#fff!important}
.day[aria-pressed="true"] small{color:#fff!important}
.toc a.on{border-left-color:#ffb547!important}
.warn{background:linear-gradient(90deg,rgba(255,94,58,.16),rgba(139,61,255,.16))!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(255,79,163,.4)}
.todo{background:rgba(255,79,163,.12);color:#ff8fc4;border-color:#ff4fa3}

/* ---------- home ---------- */
.hero .sub,.sec-head p,.head p,.pr-intro p{color:rgba(255,255,255,.86)}
.btn--accent{background:linear-gradient(90deg,#ff5e3a,#ff4fa3,#8b3dff)!important;color:#fff!important;box-shadow:0 12px 30px -12px rgba(139,61,255,.8)}
.btn--ghost{color:#fff;border-color:rgba(255,255,255,.25)}
.btn--ghost:hover{border-color:#ff4fa3}
/* the dark bands become see-through: same night everywhere, 3D background visible */
#vit,#film{background:transparent!important}
.film{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 120px -30px rgba(255,64,160,.45),0 30px 160px -50px rgba(0,210,255,.35)!important}
/* automation */
.wf3 .nd rect{fill:#1b1329;stroke:rgba(255,255,255,.28);filter:drop-shadow(0 8px 14px rgba(0,0,0,.6))}
.wf3 .nd.on rect{fill:#2a1640;stroke:#ff4fa3}
.wf3 .nd.done rect{stroke:rgba(255,255,255,.7)}
.wf3 .edge{stroke:rgba(255,255,255,.26)}
.wf3 .nd text.sub{fill:rgba(255,255,255,.62)}
.wf-card{background:rgba(22,16,34,.82)!important;border-color:rgba(255,255,255,.12)!important;box-shadow:0 18px 40px -18px rgba(0,0,0,.8)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.wf-steps div{background:rgba(255,255,255,.05)!important;border-color:rgba(255,255,255,.12)!important}
.wf-stats span,.wf-note,.wf-steps p,.pub-notes,.film-meta,.c-small{color:rgba(255,255,255,.74)!important}
/* process */
.step{background:rgba(255,255,255,.05)!important;border-color:rgba(255,255,255,.12)!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.step p,.step .get span{color:rgba(255,255,255,.82)!important}
.step.on{background:rgba(255,255,255,.09)!important;border-color:rgba(255,79,163,.6)!important;box-shadow:0 18px 40px -22px rgba(255,79,163,.55)!important}
.step .get b{color:#ffb547!important}
.pr-promise span{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.14)!important}
.talk .t2{-webkit-text-stroke-color:rgba(255,255,255,.8)}
.film-play span{background:#fff;color:#0b0710}

/* ---------- inner pages ---------- */
.portrait{background:radial-gradient(70% 60% at 30% 20%,rgba(255,79,163,.3),transparent 65%),linear-gradient(160deg,#1d1530,#0b0710)!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.portrait b{color:#ffb547}
/* tool logos: each one sits on a small white chip so dark logos stay visible on the night */
.lg{background:rgba(255,255,255,.05)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)!important;color:#fff}
.lg img{box-sizing:content-box;padding:8px;border-radius:12px;background:#fff;box-shadow:0 6px 16px -8px rgba(255,79,163,.6)}
.tools-names{color:rgba(255,255,255,.8)}
.fq-search input{color:#fff}