/* =============================================================================
   Styles PARTAGÉS des pages d'atterrissage par métier (/plombier, /cvac, …).
   Une seule feuille pour toutes les niches : une correction se fait une fois.
   Le contenu change par page, jamais la mise en forme.
   Palette = couleurs NovaFlows (les pages demo-* gardent celles du client).
   ============================================================================= */
:root{
  --bg:#08090D;--panel:#0F1218;--panel2:#0C0F15;
  --line:rgba(255,255,255,.055);--line2:rgba(255,255,255,.1);--line3:rgba(255,255,255,.16);
  --text:#E8ECF3;--muted:#8A94A6;--dim:#565F70;
  --a1:#00AAFF;--a2:#8B5CF6;--good:#48D597;--alert:#F87171;
  --r:16px;--rl:22px;--e:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.6}
a{color:inherit}
:focus-visible{outline:2px solid var(--a1);outline-offset:3px;border-radius:6px}
.glow{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.glow::before{content:"";position:absolute;top:-30%;left:50%;transform:translateX(-50%);width:90%;height:72%;border-radius:50%;filter:blur(180px);opacity:.18;background:radial-gradient(circle,rgba(0,170,255,.9),transparent 65%)}
.glow::after{content:"";position:absolute;bottom:-20%;right:-10%;width:55%;height:50%;border-radius:50%;filter:blur(180px);opacity:.12;background:radial-gradient(circle,rgba(139,92,246,.9),transparent 65%)}
.page{position:relative;z-index:1}
.wrap{max-width:760px;margin:0 auto;width:100%;padding:0 20px}
h1,h2,h3{font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:-.02em}
.grad{background:linear-gradient(120deg,var(--a1),var(--a2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------- Apparition au défilement ----------------------------------------
   Posée par JS seulement (classe .js sur <html>) : sans JS, rien n'est caché.
   Une page qui compte sur le JS pour AFFICHER son texte est une page blanche
   quand le script ne charge pas. */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--e),transform .6s var(--e)}
.js .reveal.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
}

/* ---------- Hero ---------- */
.hero{text-align:center;padding:clamp(34px,7vw,74px) 0 44px}
.eyebrow{display:inline-block;font-family:'Plus Jakarta Sans',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--a1);padding:7px 15px;border-radius:100px;background:rgba(0,170,255,.09);border:1px solid rgba(0,170,255,.3);margin-bottom:22px}
h1{font-size:clamp(29px,5.6vw,46px);font-weight:800;line-height:1.1;margin-bottom:18px;text-wrap:balance}
.sub{font-size:clamp(15.5px,1.7vw,18px);line-height:1.62;color:var(--muted);max-width:560px;margin:0 auto;text-wrap:balance}
.sub b{color:var(--text);font-weight:600}
.cta{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:700;padding:14px 24px;border-radius:13px;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:transform .18s var(--e),box-shadow .18s var(--e),border-color .18s var(--e)}
.btn svg{width:17px;height:17px;flex:none}
.btn-1{background:linear-gradient(120deg,var(--a1),var(--a2));color:#fff;box-shadow:0 10px 30px rgba(0,170,255,.22)}
.btn-1:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(0,170,255,.3)}
.btn-2{background:rgba(255,255,255,.035);border-color:var(--line2);color:var(--text)}
.btn-2:hover{border-color:var(--line3);transform:translateY(-2px)}
.fine{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:18px;font-size:12.5px;color:var(--dim)}
.fine span{display:inline-flex;align-items:center;gap:6px}
.fine svg{width:13px;height:13px;color:var(--good)}

/* ---------- Sections ---------- */
section{padding:clamp(40px,6vw,64px) 0}
.stitle{font-size:clamp(22px,3.4vw,30px);font-weight:800;line-height:1.16;margin-bottom:12px;text-wrap:balance}
.slede{font-size:15.5px;color:var(--muted);max-width:580px;margin-bottom:28px}
.center{text-align:center}
.center .slede{margin-left:auto;margin-right:auto}

/* ---------- Les trois fuites ---------- */
.holes{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.hole{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.hole .tag{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--alert);margin-bottom:9px}
.hole h3{font-size:16px;font-weight:700;margin-bottom:8px;line-height:1.3}
.hole p{font-size:14px;color:var(--muted);line-height:1.58}
.hole .fix{display:flex;gap:8px;margin-top:13px;padding-top:13px;border-top:1px solid var(--line);font-size:13.5px;color:var(--text)}
.hole .fix svg{width:14px;height:14px;flex:none;margin-top:4px;color:var(--good)}

/* ---------- Tes options aujourd'hui ---------- */
.opts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.opt{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.opt.win{border-color:rgba(0,170,255,.4);background:linear-gradient(140deg,rgba(0,170,255,.07),rgba(139,92,246,.05))}
.opt h3{font-size:15.5px;font-weight:700;margin-bottom:9px;display:flex;align-items:center;gap:8px}
.opt h3 i{width:7px;height:7px;border-radius:50%;background:var(--alert);flex:none}
.opt.win h3 i{background:var(--good)}
.opt ul{list-style:none;display:grid;gap:6px}
.opt li{font-size:13.8px;color:var(--muted);line-height:1.5;padding-left:16px;position:relative}
.opt li::before{content:"\2013";position:absolute;left:0;color:var(--dim)}
.opt.win li::before{content:"\2713";color:var(--good);font-size:11px;top:1px}

/* ---------- Timeline du système ---------- */
.steps{list-style:none;counter-reset:s;display:grid;gap:11px;margin-top:6px}
.steps li{counter-increment:s;position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:19px 21px 19px 60px}
.steps li::before{content:"0" counter(s);position:absolute;left:19px;top:19px;font-family:'Plus Jakarta Sans',sans-serif;font-size:12.5px;font-weight:800;color:var(--a1);background:rgba(0,170,255,.1);border:1px solid rgba(0,170,255,.24);border-radius:8px;width:29px;height:25px;display:grid;place-items:center}
.steps h3{font-size:15.5px;font-weight:700;margin-bottom:7px;line-height:1.35}
.steps p{font-size:14.2px;color:var(--muted);line-height:1.6}
.steps p b{color:var(--text);font-weight:600}
.steps .outil{display:inline-block;margin-top:11px;font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--dim);background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:7px;padding:4px 9px}
.punch{margin-top:24px;background:linear-gradient(120deg,rgba(0,170,255,.09),rgba(139,92,246,.09));border:1px solid var(--line2);border-radius:var(--rl);padding:22px 24px;font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(17px,2.3vw,21px);font-weight:700;line-height:1.35;text-wrap:balance}

/* ---------- Le fil de texto (preuve visuelle de la relance) ---------- */
.thread{max-width:330px;margin:0 auto;background:var(--panel);border:1px solid var(--line2);border-radius:26px;padding:14px 12px 16px;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.thread .bar{display:flex;align-items:center;gap:8px;padding:2px 8px 12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.thread .bar .who{font-size:13px;font-weight:600}
.thread .bar .av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--a1),var(--a2));flex:none}
.thread .day{text-align:center;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:12px 0 8px}
.msg{max-width:84%;font-size:13.2px;line-height:1.5;padding:9px 12px;border-radius:15px;margin-bottom:7px}
.msg.out{margin-left:auto;background:linear-gradient(135deg,rgba(0,170,255,.9),rgba(139,92,246,.9));color:#fff;border-bottom-right-radius:5px}
.msg.in{background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--text);border-bottom-left-radius:5px}
.ping{display:flex;align-items:center;gap:8px;margin-top:14px;padding:10px 12px;border-radius:12px;background:rgba(72,213,151,.08);border:1px solid rgba(72,213,151,.26);font-size:12.5px;color:var(--text)}
.ping svg{width:15px;height:15px;flex:none;color:var(--good)}
.threadwrap{display:grid;grid-template-columns:1fr 330px;gap:30px;align-items:center}
.threadwrap .txt p{font-size:14.5px;color:var(--muted);line-height:1.62;margin-bottom:12px}
.threadwrap .txt p b{color:var(--text);font-weight:600}

/* ---------- Démo ---------- */
.demo{background:var(--panel2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.demobox{margin:26px auto 0;max-width:460px;border-radius:20px;transition:box-shadow .5s var(--e)}
.demobox.flash{box-shadow:0 0 0 3px rgba(0,170,255,.45),0 0 60px rgba(0,170,255,.3)}
.hint{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--a1);margin-top:4px}
.hint svg{width:16px;height:16px;flex:none}
.tries{list-style:none;display:grid;gap:9px;margin:26px auto 0;max-width:600px;text-align:left}
.tries li{display:flex;gap:11px;align-items:flex-start;font-size:14px;line-height:1.55;color:var(--muted);background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:12px;padding:13px 15px}
.tries li svg{width:15px;height:15px;flex:none;margin-top:4px;color:var(--a2)}
.tries b{color:var(--text);font-weight:600;display:block;margin-bottom:2px}
.note{margin:26px auto 0;max-width:600px;text-align:left;border-left:2px solid var(--a2);padding:4px 0 4px 16px;font-size:13.5px;line-height:1.62;color:var(--muted)}
.note b{color:var(--text);font-weight:600}

/* ---------- Ce que ça demande ---------- */
.todo{list-style:none;display:grid;gap:10px}
.todo li{display:flex;gap:12px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;font-size:14.2px;line-height:1.58;color:var(--muted)}
.todo li svg{width:16px;height:16px;flex:none;margin-top:4px;color:var(--a1)}
.todo b{color:var(--text);font-weight:600}
.filet{margin-top:13px;background:rgba(72,213,151,.06);border:1px solid rgba(72,213,151,.24);border-radius:14px;padding:18px 20px;display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.58;color:var(--text)}
.filet svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--good)}

/* ---------- Pour qui, et combien (le filtre) ---------- */
.anchor{background:var(--panel);border:1px solid var(--line2);border-radius:var(--rl);padding:24px 26px}
.anchor h3{font-size:17px;font-weight:700;margin-bottom:14px}
.anchor .two{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.anchor .two h4{font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;letter-spacing:.09em;text-transform:uppercase;margin-bottom:9px}
.anchor .yes h4{color:var(--good)}
.anchor .no h4{color:var(--dim)}
.anchor ul{list-style:none;display:grid;gap:6px}
.anchor li{font-size:14px;color:var(--muted);line-height:1.5}
.anchor .price{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);font-size:14.5px;line-height:1.6;color:var(--text)}
.anchor .price b{font-weight:700}

/* ---------- Preuve ---------- */
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.quote{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.quote p{font-size:14px;line-height:1.6;color:var(--text);margin-bottom:12px}
.quote .who{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.quote .who .av{width:30px;height:30px;border-radius:50%;background:var(--surface-2,rgba(255,255,255,.07));border:1px solid var(--line2);flex:none;object-fit:cover}
.logos{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:center;margin-top:22px;opacity:.75}
.logos img{height:26px;width:auto;filter:grayscale(1) brightness(1.7)}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:8px}
details{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
summary{cursor:pointer;list-style:none;padding:16px 19px;font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:700;display:flex;justify-content:space-between;gap:14px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:20px;font-weight:600;color:var(--dim);flex:none;line-height:1}
details[open] summary::after{content:"\2013"}
details p{padding:0 19px 17px;font-size:14.2px;color:var(--muted);line-height:1.62}
details p b{color:var(--text);font-weight:600}

/* ---------- Fin ---------- */
.end{text-align:center;padding:clamp(44px,7vw,78px) 0}
.end .stitle{margin-bottom:14px}
footer{border-top:1px solid var(--line);padding:26px 0 34px;color:var(--dim);font-size:12.5px;text-align:center}
footer a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line2)}
footer a:hover{color:var(--text)}

@media(max-width:760px){
  .threadwrap{grid-template-columns:1fr;gap:24px}
  .proof{grid-template-columns:1fr}
}
@media(max-width:700px){
  .holes,.opts{grid-template-columns:1fr}
  .anchor .two{grid-template-columns:1fr;gap:18px}
  .steps li{padding:17px}
  .steps li::before{position:static;margin-bottom:10px}
  .demobox{max-width:100%}
  .btn{width:100%;justify-content:center}
  .cta{gap:9px}
}