/* Novair — système de design. Aucune ressource externe. @designer, 06/09/2026. */

:root{
  --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.5rem;--s6:2rem;--s7:3rem;--s8:4.5rem;
  --r-sm:10px;--r:14px;--r-lg:20px;--r-pill:999px;
  --w:68rem;--w-text:40rem;
  --font:ui-sans-serif,system-ui,"Segoe UI Variable Display","Segoe UI",-apple-system,Roboto,Inter,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"Cascadia Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.3,1);

  --bg:#fbfcfe;--surface:#fff;--surface-2:#f4f6fa;
  --ink:#0b1120;--ink-2:#39435a;--muted:#69748c;
  --line:#e4e9f2;--line-2:#eef2f8;
  --acc:#0b5fe0;--acc-press:#0a51bf;--acc-soft:#eaf1ff;--acc-line:#cfe0ff;--acc-ink:#fff;
  --aurora:#22d3ee;
  --pro:#b26a00;--pro-bg:#fff7e8;--pro-line:#f3ddb2;
  --ok:#0f6a45;--ok-bg:#e8f5ef;
  --ring:rgba(11,95,224,.32);
  --shadow-1:0 1px 2px rgba(11,17,32,.05),0 1px 1px rgba(11,17,32,.03);
  --shadow-2:0 18px 40px -18px rgba(11,17,32,.22),0 3px 10px -4px rgba(11,17,32,.07);
  --shadow-acc:0 10px 22px -10px rgba(11,95,224,.55);
  --glow:rgba(11,95,224,.10);--glow-2:rgba(34,211,238,.10);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#080b12;--surface:#0e131d;--surface-2:#141b28;
    --ink:#eef2f9;--ink-2:#b3bdd0;--muted:#8c98ae;
    --line:#1e2635;--line-2:#161d29;
    --acc:#4d92ff;--acc-press:#6ea6ff;--acc-soft:#0f1e3a;--acc-line:#1c3363;--acc-ink:#04101f;
    --pro:#f0b429;--pro-bg:#241a05;--pro-line:#4a3712;
    --ok:#4ade9b;--ok-bg:#0c2018;
    --ring:rgba(77,146,255,.45);
    --shadow-1:0 1px 2px rgba(0,0,0,.5);
    --shadow-2:0 20px 44px -20px rgba(0,0,0,.75),0 3px 10px -4px rgba(0,0,0,.5);
    --shadow-acc:0 10px 24px -12px rgba(77,146,255,.5);
    --glow:rgba(77,146,255,.14);--glow-2:rgba(34,211,238,.10);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink-2);
  font-family:var(--font);font-size:1.0625rem;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--acc);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--acc-press)}
:where(a,button,summary,input):focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}
h1,h2,h3,h4{color:var(--ink);font-weight:700;letter-spacing:-.022em;line-height:1.1;margin:0 0 var(--s3)}
h1{font-size:clamp(2.1rem,1.3rem + 3.4vw,3.4rem);line-height:1.06;letter-spacing:-.032em;max-width:19ch}
h2{font-size:clamp(1.65rem,1.2rem + 1.6vw,2.375rem);letter-spacing:-.028em}
h3{font-size:1.25rem;letter-spacing:-.018em}
p{margin:0 0 var(--s4);max-width:var(--w-text)}
ul{margin:0 0 var(--s4);padding-left:1.15rem}
li{margin:0 0 var(--s2)}
code{font-family:var(--mono);font-size:.9em;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:.1em .35em}
.wrap{width:100%;max-width:var(--w);margin-inline:auto;padding-inline:var(--s5)}
@media (max-width:420px){.wrap{padding-inline:var(--s4)}}
section{padding-block:clamp(3.25rem,6vw,5.5rem)}
.lead{font-size:1.1875rem;color:var(--ink-2);max-width:36rem}
.eyebrow{font-size:.8125rem;font-weight:640;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 var(--s3)}
.center{text-align:center;margin-inline:auto}
.center p{margin-inline:auto}
.muted{color:var(--muted);font-size:.9375rem}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font:inherit;font-size:1rem;font-weight:620;letter-spacing:-.01em;
  padding:.72rem 1.15rem;border-radius:var(--r);border:1px solid transparent;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform .16s var(--ease),background-color .16s var(--ease),box-shadow .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease);
}
.btn svg{width:1.15em;height:1.15em;flex:0 0 auto}
.btn-p{background:var(--acc);color:var(--acc-ink);box-shadow:var(--shadow-acc)}
.btn-p:hover{background:var(--acc-press);color:var(--acc-ink);transform:translateY(-1px)}
.btn-p:active{transform:translateY(0)}
.btn-s{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:var(--shadow-1)}
.btn-s:hover{border-color:var(--acc-line);color:var(--ink);transform:translateY(-1px)}
.btn-s:active{transform:translateY(0)}
.btn-g{background:linear-gradient(180deg,#f7b733,#e09000);color:#241a05;box-shadow:0 10px 22px -12px rgba(224,144,0,.7)}
.btn-g:hover{filter:brightness(1.05);color:#241a05;transform:translateY(-1px)}
.btn[aria-disabled="true"]{opacity:.62;pointer-events:none;box-shadow:none}
.btns{display:flex;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s4)}
.btns.center{justify-content:center}

/* ---------- pilules et badges ---------- */
.pill{
  display:inline-flex;align-items:center;gap:.45rem;padding:.3rem .7rem;border-radius:var(--r-pill);
  font-size:.8125rem;font-weight:600;background:var(--acc-soft);color:var(--acc);border:1px solid var(--acc-line);
}
.pill svg{width:.95rem;height:.95rem}
.pill-pro{background:var(--pro-bg);color:var(--pro);border-color:var(--pro-line)}
.pill-soon{background:var(--surface-2);color:var(--muted);border-color:var(--line)}

/* ---------- en-tête ---------- */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:var(--s5);min-height:60px}
.brand{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--ink);font-weight:640;font-size:1.125rem;letter-spacing:-.03em}
.brand svg{width:26px;height:26px;border-radius:7px}
.nav{display:none;gap:var(--s5);margin-left:auto;font-size:.9375rem}
.nav a{color:var(--ink-2);text-decoration:none;font-weight:520}
.nav a:hover{color:var(--ink)}
.top .btn{margin-left:auto;padding:.5rem .85rem;font-size:.9375rem}
.nav+.btn{margin-left:0}
.lang{display:inline-flex;align-items:center;gap:2px;margin-left:auto;padding:3px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface)}
.nav+.lang{margin-left:0}
.lang a{
  display:block;padding:.2rem .5rem;border-radius:var(--r-pill);text-decoration:none;
  font-size:.75rem;font-weight:660;letter-spacing:.045em;line-height:1.35;color:var(--muted);
  transition:color .18s var(--ease),background-color .18s var(--ease);
}
.lang a:hover{color:var(--ink)}
.lang a[aria-current]{background:var(--acc-soft);color:var(--acc)}
.lang+.btn{margin-left:var(--s3)}
@media (min-width:820px){.nav{display:flex}}
@media (max-width:520px){.top .wrap{gap:var(--s3)}.top .btn{padding:.5rem .7rem}}

/* ---------- héros ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(3rem,6vw,5.5rem) clamp(2.5rem,5vw,4rem)}
.hero::before{
  content:"";position:absolute;inset:-40% 0 auto;height:60rem;pointer-events:none;
  background:radial-gradient(48rem 26rem at 22% 0%,var(--glow),transparent 70%),radial-gradient(38rem 22rem at 82% 6%,var(--glow-2),transparent 70%);
}
.hero .wrap{position:relative}
.hero h1{max-width:18ch}
.hero-center{max-width:46rem;margin-inline:auto;text-align:center}
.hero-center h1,.hero-center .lead{margin-inline:auto}
.hero-center .btns{justify-content:center}
.hero-center .trust{justify-content:center}
.hero .lead{margin-bottom:var(--s5)}
.hero-grid{display:grid;gap:var(--s7);align-items:center}
@media (min-width:960px){.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:var(--s8)}}
.trust{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;padding:0;margin:0;list-style:none;font-size:.875rem;color:var(--muted)}
.trust li{display:flex;align-items:center;gap:.35rem;margin:0}
.trust svg{width:1rem;height:1rem;color:var(--ok)}

/* ---------- cadre navigateur (visuel produit) ---------- */
.frame{
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2);
  box-shadow:var(--shadow-2);overflow:hidden;
}
.frame-bar{display:flex;align-items:center;gap:.4rem;padding:.6rem .8rem;border-bottom:1px solid var(--line);background:var(--surface)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--line);flex:0 0 auto}
.frame-url{flex:1;margin-left:.4rem;height:20px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--line)}
.frame-body{padding:var(--s5);display:grid;gap:var(--s3);background:
  linear-gradient(var(--surface-2),var(--surface-2)) padding-box}
.frame img{border-radius:var(--r-sm);border:1px solid var(--line)}
.mock{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-1);padding:var(--s4);display:grid;gap:.6rem}
.mock-head{display:flex;align-items:center;gap:.5rem;font-weight:640;color:var(--ink);font-size:.9375rem}
.mock-head svg{width:18px;height:18px;border-radius:5px}
.mock-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:.55rem .7rem;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);font-size:.875rem}
.mock-row b{color:var(--ink);font-weight:600}
.mock-row .v{font-family:var(--mono);font-size:.8125rem;color:var(--muted)}
.mock-ok{color:var(--ok);background:var(--ok-bg);border-color:color-mix(in srgb,var(--ok) 25%,transparent)}
.mock-warn{color:var(--pro);background:var(--pro-bg);border-color:var(--pro-line)}
.mock-warn b,.mock-warn .v{color:inherit}
.mock-cta{margin-top:.2rem;text-align:center;font-size:.875rem;font-weight:620;color:var(--acc-ink);background:var(--acc);border-radius:var(--r-sm);padding:.5rem}

/* ---------- bandeaux et cartes ---------- */
.band{background:var(--surface-2);border-block:1px solid var(--line)}
.grid{display:grid;gap:var(--s4)}
@media (min-width:640px){.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.grid-auto{grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr))}
@media (min-width:640px) and (max-width:899px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5);
  box-shadow:var(--shadow-1);transition:transform .16s var(--ease),box-shadow .16s var(--ease),border-color .16s var(--ease);
}
.card h3{margin-bottom:var(--s2)}
.card p{margin:0;font-size:.9375rem;color:var(--ink-2)}
a.card{text-decoration:none;display:block;color:inherit}
a.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:var(--acc-line)}
.ico{
  width:2.25rem;height:2.25rem;border-radius:var(--r-sm);display:grid;place-items:center;margin-bottom:var(--s3);
  background:var(--acc-soft);color:var(--acc);border:1px solid var(--acc-line);
}
.ico svg{width:1.25rem;height:1.25rem}
.steps{counter-reset:n;list-style:none;padding:0;display:grid;gap:var(--s4)}
@media (min-width:900px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.steps li{counter-increment:n;margin:0;padding-left:2.75rem;position:relative}
.steps li::before{
  content:counter(n);position:absolute;left:0;top:-.1rem;width:2rem;height:2rem;border-radius:var(--r-pill);
  display:grid;place-items:center;font-size:.9375rem;font-weight:680;color:var(--acc);
  background:var(--acc-soft);border:1px solid var(--acc-line);
}
.steps b{display:block;color:var(--ink);font-weight:640}
.steps span{font-size:.9375rem}

/* ---------- comparatif gratuit / pro ---------- */
.plans{display:grid;gap:var(--s4);align-items:start}
@media (min-width:860px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--shadow-1)}
.plan-pro{border-color:var(--pro-line);box-shadow:var(--shadow-2);position:relative}
.plan h3{font-size:1.125rem;margin-bottom:var(--s1)}
.price{display:flex;align-items:baseline;gap:.5rem;margin:var(--s3) 0 var(--s4)}
.price b{font-size:2.5rem;font-weight:700;letter-spacing:-.04em;color:var(--ink);line-height:1}
.price span{font-size:.9375rem;color:var(--muted)}
.feats{list-style:none;padding:0;margin:0 0 var(--s5);display:grid;gap:.55rem;font-size:.9375rem}
.feats li{display:flex;gap:.6rem;align-items:flex-start;margin:0}
.feats svg{width:1.1rem;height:1.1rem;flex:0 0 auto;margin-top:.25rem;color:var(--ok)}
.feats .no svg{color:var(--muted)}
.feats .no{color:var(--muted)}
.plan .btn{width:100%}
.guarantee{display:flex;gap:.6rem;align-items:flex-start;margin-top:var(--s4);font-size:.875rem;color:var(--muted)}
.guarantee svg{width:1.1rem;height:1.1rem;flex:0 0 auto;margin-top:.2rem}

/* ---------- FAQ ---------- */
.faq{max-width:48rem;margin-inline:auto}
.faq details{border-bottom:1px solid var(--line);padding:var(--s4) 0}
.faq details[open] summary{color:var(--ink)}
.faq summary{
  cursor:pointer;list-style:none;font-weight:620;color:var(--ink);font-size:1.0625rem;
  display:flex;justify-content:space-between;align-items:center;gap:var(--s4);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:.6rem;height:.6rem;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .16s var(--ease);flex:0 0 auto;margin-right:.2rem}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq p{margin:var(--s3) 0 0;font-size:.9375rem;max-width:none}

/* ---------- vitrine : grille produits ---------- */
.prod{display:flex;flex-direction:column;gap:var(--s3);min-height:100%}
.prod-head{display:flex;align-items:center;gap:.7rem}
.prod-head svg{width:34px;height:34px;border-radius:9px;flex:0 0 auto}
.prod-head strong{color:var(--ink);font-size:1.0625rem;font-weight:640;letter-spacing:-.02em}
.prod-meta{display:flex;flex-wrap:wrap;gap:.4rem;padding-top:var(--s1)}
.prod-more{font-weight:600;font-size:.9375rem;color:var(--acc);display:inline-flex;align-items:center;gap:.35rem;margin-top:auto;padding-top:var(--s4);transition:gap .16s var(--ease)}
.prod-more svg{width:1.05rem;height:1.05rem;flex:0 0 auto}
a.card:hover .prod-more{gap:.5rem}

/* ---------- pied ---------- */
.foot{border-top:1px solid var(--line);background:var(--surface-2);padding-block:var(--s6);font-size:.875rem;color:var(--muted)}
.foot .wrap{display:grid;gap:var(--s4)}
@media (min-width:760px){.foot .wrap{grid-template-columns:1fr auto;align-items:start}}
.foot a{color:var(--ink-2);text-decoration:none}
.foot a:hover{color:var(--acc)}
.foot-links{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;margin:0;padding:0;list-style:none}
.foot-links li{margin:0}

.legal{padding-block:var(--s7) var(--s8)}
.legal-wrap{max-width:var(--w-text)}
.legal h1{font-size:clamp(1.9rem,1.4rem + 2vw,2.6rem);max-width:none}
.legal h2{font-size:1.25rem;margin-top:var(--s7)}
.legal p,.legal ul{color:var(--ink-2)}
.legal .eyebrow{margin-bottom:var(--s2)}
.foot p{margin:0 0 var(--s2);max-width:34rem}

/* ---------- utilitaires ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s4);top:var(--s2);z-index:50;background:var(--surface);border:1px solid var(--acc);border-radius:var(--r-sm);padding:.5rem .8rem}
.rise{opacity:0;transform:translateY(10px);animation:rise .5s var(--ease) forwards}
.rise-2{animation-delay:.07s}.rise-3{animation-delay:.14s}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0!important;transition-duration:.001ms!important}
  .rise{opacity:1;transform:none}
}