/* ============================================================
   POULS — surveillance & pages de statut · produit clair
   Palette : papier froid / encre ardoise / indigo (marque) + abricot ; vert-ambre-rouge = sémantique statut
   Type : Space Grotesk (display & UI) + JetBrains Mono (métriques, code)
   ============================================================ */

@font-face{
  font-family:"Space";
  src:url("../fonts/space-grotesk.woff2") format("woff2");
  font-weight:300 700; font-display:swap; font-style:normal;
}
@font-face{
  font-family:"JBMono";
  src:url("../fonts/jetbrains-mono.woff2") format("woff2");
  font-weight:400 700; font-display:swap; font-style:normal;
}

:root{
  --bg:#F4F5F2;
  --surface:#FFFFFF;
  --ink:#131A24;
  --ink-2:#565f6c;
  --ink-faint:#8b94a0;
  --brand:#5B4BF0;
  --brand-ink:#4636e0;
  --brand-soft:#ECEAFE;
  --apricot:#EE9A57;
  --up:#1FA971;
  --warn:#DF9E32;
  --down:#E0533B;
  --line:#E3E4DE;
  --line-soft:#ECEDE8;
  --font-ui:"Space","Helvetica Neue",sans-serif;
  --mono:"JBMono","SFMono-Regular",ui-monospace,monospace;
  --wrap:1180px;
  --r:18px;
  --shadow:0 24px 60px -30px rgba(19,26,36,.28);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:86px}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-ui); font-weight:400;
  font-size:clamp(15.5px,1vw,17px); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-weight:600; line-height:1.05; margin:0; letter-spacing:-.02em}
p{margin:0}
a{color:inherit; text-decoration:none}
em{font-style:normal; color:var(--brand)}
ul{margin:0; padding:0; list-style:none}
.mono{font-family:var(--mono); font-feature-settings:"tnum" 1}
.wrap{width:min(var(--wrap),92vw); margin-inline:auto}
.center{text-align:center}
.sr-only,.skip{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip:focus{position:fixed; top:12px; left:12px; width:auto; height:auto; clip:auto; z-index:200; background:var(--ink); color:#fff; padding:10px 16px; border-radius:8px}

/* ---------- boutons ---------- */
.btn{display:inline-flex; align-items:center; gap:.4em; font-family:var(--font-ui); font-weight:600; font-size:.96rem; padding:.72em 1.35em; border-radius:11px; cursor:pointer; border:1.5px solid transparent; transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s, background .2s, border-color .2s}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.btn-primary{background:var(--brand); color:#fff; box-shadow:0 10px 24px -12px rgba(91,75,240,.9)}
.btn-primary:hover{background:var(--brand-ink); box-shadow:0 16px 30px -12px rgba(91,75,240,.75)}
.btn-ghost{border-color:var(--line); color:var(--ink); background:var(--surface)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-lg{padding:.9em 1.7em; font-size:1.02rem; border-radius:13px}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--bg) 84%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-soft)}
.nav-in{display:flex; align-items:center; gap:22px; padding:14px 0}
.brand{display:inline-flex; align-items:center; gap:9px; color:var(--brand)}
.brand-word{font-family:var(--font-ui); font-weight:700; font-size:1.32rem; letter-spacing:-.03em; color:var(--ink)}
.nav-links{display:flex; gap:26px; margin-left:auto; font-size:.94rem; font-weight:500; color:var(--ink-2)}
.nav-links a{transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-actions{display:flex; align-items:center; gap:14px}
.ghost-link{font-size:.94rem; font-weight:500; color:var(--ink-2)}
.ghost-link:hover{color:var(--ink)}

/* ---------- layout ---------- */
.section{padding:clamp(64px,9vw,116px) 0}
.kicker{font-family:var(--mono); font-weight:600; text-transform:uppercase; letter-spacing:.14em; font-size:.76rem; color:var(--brand); margin-bottom:16px}
.section-title{font-size:clamp(1.9rem,4vw,3rem); letter-spacing:-.025em}

/* ---------- HERO ---------- */
.hero{padding:clamp(40px,6vw,76px) 0 clamp(48px,7vw,84px)}
.hero-in{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(32px,5vw,64px); align-items:center}
.pill-eyebrow{display:inline-flex; align-items:center; gap:9px; font-size:.84rem; font-weight:500; color:var(--ink-2); background:var(--surface); border:1px solid var(--line); padding:7px 14px; border-radius:999px; margin-bottom:24px}
.live-dot{width:8px; height:8px; border-radius:50%; background:var(--up); box-shadow:0 0 0 0 rgba(31,169,113,.5); animation:live 2.2s infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(31,169,113,.5)}70%{box-shadow:0 0 0 8px rgba(31,169,113,0)}100%{box-shadow:0 0 0 0 rgba(31,169,113,0)}}
.hero-title{font-size:clamp(2.4rem,5vw,4rem); letter-spacing:-.03em; max-width:16ch}
.hero-lede{font-size:clamp(1.06rem,1.4vw,1.2rem); color:var(--ink-2); max-width:48ch; margin-top:22px}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.hero-trust{margin-top:20px; font-size:.86rem; color:var(--ink-faint)}
/* ---- hero : texte animé (révélation mot à mot + soulignement de « avant ») ---- */
.hero-title .word{display:inline-block; opacity:0; transform:translateY(.5em); animation:wordIn .55s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i,0)*.055s)}
@keyframes wordIn{to{opacity:1; transform:none}}
.hero-title em{position:relative}
.hero-title em::after{content:""; position:absolute; left:0; right:0; bottom:-.06em; height:2px; border-radius:2px; background:var(--brand); transform:scaleX(0); transform-origin:left; animation:underlineIn .5s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:1s}
@keyframes underlineIn{to{transform:scaleX(1)}}

/* ---- board (signature) ---- */
.board{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px; box-shadow:var(--shadow)}
.board-head{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px}
.board-title{font-weight:600; font-size:1.05rem}
.board-sub{display:inline-flex; align-items:center; gap:7px; font-size:.9rem; color:var(--ink-2); margin-top:3px}
.s-dot{width:9px; height:9px; border-radius:50%}
.s-dot.up{background:var(--up)} .s-dot.warn{background:var(--warn)} .s-dot.down{background:var(--down)}
.board-uptime{text-align:right}
.up-n{display:block; font-family:var(--mono); font-weight:700; font-size:1.3rem; color:var(--up); letter-spacing:-.02em}
.up-l{font-size:.74rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.08em}
.pulse-wrap{position:relative; background:linear-gradient(180deg,var(--brand-soft),transparent); border-radius:12px; padding:10px 12px 6px; margin-bottom:18px}
.pulse{display:block; width:100%; height:66px; color:var(--brand)}
.pulse-lab{position:absolute; right:12px; top:8px; font-family:var(--mono); font-size:.72rem; color:var(--ink-2)}
.pulse-lab b{color:var(--brand)}
.services{display:flex; flex-direction:column; gap:2px}
.services li{display:grid; grid-template-columns:1fr auto auto auto; align-items:center; gap:12px; padding:9px 4px; border-top:1px solid var(--line-soft)}
.svc-name{font-weight:500; font-size:.95rem}
.svc-lat{font-size:.78rem; color:var(--ink-faint)}
.bars{display:inline-flex; gap:2px}
.bars i{display:block; width:4px; height:18px; border-radius:1.5px; background:var(--up)}
.bars i.warn{background:var(--warn)} .bars i.down{background:var(--down)}
.pill{font-family:var(--mono); font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:3px 8px; border-radius:6px}
.pill.up{color:var(--up); background:rgba(31,169,113,.12)}
.pill.warn{color:#a5751a; background:rgba(223,158,50,.16)}
.pill.down{color:var(--down); background:rgba(224,83,59,.12)}
.board-foot{margin-top:14px; padding-top:12px; border-top:1px solid var(--line-soft); font-size:.74rem; color:var(--ink-faint)}

/* ---------- STRIP ---------- */
.strip{border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); background:var(--surface)}
.strip-in{display:flex; align-items:center; gap:26px; flex-wrap:wrap; padding:20px 0}
.strip-in p{font-size:.9rem; color:var(--ink-faint); font-weight:500}
.strip-in ul{display:flex; gap:10px 26px; flex-wrap:wrap}
.strip-in li{font-family:var(--mono); font-size:.86rem; color:var(--ink-2); font-weight:500}

/* ---------- FEATURES ---------- */
.features .section-title{max-width:20ch; margin-bottom:44px}
.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.feat{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:28px 26px; transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s}
.feat:hover{transform:translateY(-4px); border-color:color-mix(in srgb,var(--brand) 40%,var(--line)); box-shadow:var(--shadow)}
.f-ic{display:grid; place-items:center; width:50px; height:50px; border-radius:13px; background:var(--brand-soft); color:var(--brand); margin-bottom:18px}
.f-ic svg{width:30px; height:30px}
.feat h3{font-size:1.24rem; margin-bottom:10px}
.feat p{color:var(--ink-2); font-size:.97rem}

/* ---------- SETUP ---------- */
.setup{border-top:1px solid var(--line-soft)}
.setup-in{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,5vw,64px); align-items:center}
.setup-lede{color:var(--ink-2); margin:20px 0 22px; max-width:40ch; font-size:1.05rem}
.setup-check{display:grid; gap:11px}
.setup-check li{position:relative; padding-left:28px; color:var(--ink-2); font-size:.98rem}
.setup-check li::before{content:"✓"; position:absolute; left:0; top:-1px; width:18px; height:18px; border-radius:50%; background:var(--brand-soft); color:var(--brand); font-size:.72rem; font-weight:700; display:grid; place-items:center}
.terminal{background:#131A24; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); border:1px solid #26303d}
.term-bar{display:flex; align-items:center; gap:7px; padding:12px 16px; background:#0e141d; border-bottom:1px solid #26303d}
.term-bar span{width:11px; height:11px; border-radius:50%; background:#3a4553}
.term-bar span:nth-child(1){background:#E0533B}.term-bar span:nth-child(2){background:#DF9E32}.term-bar span:nth-child(3){background:#1FA971}
.term-bar b{margin-left:8px; font-family:var(--mono); font-size:.78rem; color:#7d8896; font-weight:500}
.term-body{margin:0; padding:20px 22px; font-size:.82rem; line-height:1.85; color:#c7cfda; overflow-x:auto}
.term-body code{font-family:var(--mono)}
.c-com{color:#6c7787}.c-cmd{color:#a99bff; font-weight:700}.c-flag{color:#EE9A57}.c-ok{color:#37c98a; font-weight:700}

/* ---------- TARIFS ---------- */
.tarifs{border-top:1px solid var(--line-soft)}
.tarifs .section-title{margin-bottom:30px}
.billing{display:flex; width:fit-content; max-width:100%; gap:4px; padding:5px; background:var(--surface); border:1px solid var(--line); border-radius:999px; margin:0 auto 40px}
.bill-btn{font-family:var(--font-ui); font-weight:600; font-size:.92rem; padding:9px 20px; border:0; background:transparent; color:var(--ink-2); border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:background .2s, color .2s}
.bill-btn.is-active{background:var(--ink); color:#fff}
.save{font-family:var(--mono); font-size:.66rem; font-weight:700; color:var(--up); background:rgba(31,169,113,.14); padding:2px 6px; border-radius:5px}
.bill-btn.is-active .save{color:#fff; background:rgba(255,255,255,.18)}
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start}
.plan{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:30px 26px; position:relative}
.plan.is-featured{border-color:var(--brand); box-shadow:var(--shadow); border-width:1.5px}
.plan-badge{position:absolute; top:-11px; left:26px; font-family:var(--mono); font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#fff; background:var(--brand); padding:4px 10px; border-radius:7px}
.plan-name{font-size:1.2rem; margin-bottom:12px}
.plan-price{display:flex; align-items:baseline; gap:5px; margin-bottom:6px}
.amount{font-family:var(--mono); font-weight:700; font-size:2.7rem; letter-spacing:-.03em; color:var(--ink)}
.per{color:var(--ink-faint); font-size:.9rem}
.plan-desc{color:var(--ink-2); font-size:.93rem; margin-bottom:22px; min-height:2.6em}
.plan-feats{display:grid; gap:11px; margin-bottom:26px}
.plan-feats li{position:relative; padding-left:26px; font-size:.95rem; color:var(--ink-2)}
.plan-feats li::before{content:"✓"; position:absolute; left:0; color:var(--brand); font-weight:700}
.plan-cta{width:100%; justify-content:center}
.tarifs-fine{margin-top:26px; color:var(--ink-faint); font-size:.82rem; font-style:italic}

/* ---------- FAQ ---------- */
.faq-in{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(32px,5vw,64px); align-items:start}
.faq-note{margin-top:18px; color:var(--ink-2); font-size:.95rem}
.faq-note a{color:var(--brand); border-bottom:1px solid var(--brand-soft)}
.faq-list{display:flex; flex-direction:column}
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa summary{list-style:none; cursor:pointer; padding:20px 40px 20px 0; font-weight:600; font-size:1.05rem; position:relative; transition:color .2s}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--brand)}
.qa summary:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:4px}
.chev{position:absolute; right:4px; top:24px; width:13px; height:13px; border-right:2px solid var(--ink-faint); border-bottom:2px solid var(--ink-faint); transform:rotate(45deg); transition:transform .3s}
.qa[open] .chev{transform:rotate(-135deg); border-color:var(--brand)}
.qa p{padding:0 40px 22px 0; color:var(--ink-2); max-width:60ch; margin-top:-4px}

/* ---------- CTA BAND ---------- */
.cta-band{padding:clamp(56px,8vw,96px) 0}
.cta-in{background:var(--ink); border-radius:26px; padding:clamp(40px,6vw,72px); text-align:center; position:relative; overflow:hidden}
.cta-in::before{content:""; position:absolute; inset:0; background:radial-gradient(60% 120% at 50% -20%, rgba(91,75,240,.5), transparent 70%); pointer-events:none}
.cta-in h2{color:#fff; font-size:clamp(1.8rem,3.6vw,2.8rem); letter-spacing:-.025em; margin-bottom:26px; position:relative}
.cta-in .btn{position:relative}
.cta-fine{color:rgba(255,255,255,.6); font-size:.86rem; margin-top:16px; position:relative}

/* ---------- FOOTER ---------- */
.foot{border-top:1px solid var(--line); padding:44px 0; background:var(--surface)}
.foot-in{display:flex; justify-content:space-between; gap:26px; flex-wrap:wrap; align-items:flex-start}
.foot-brand .brand-word{font-size:1.3rem; color:var(--brand)}
.foot-brand p{color:var(--ink-2); max-width:34ch; margin-top:6px; font-size:.92rem}
.foot-demo{color:var(--ink-faint); font-size:.8rem; text-align:right; line-height:1.75}
.foot-demo a{color:var(--ink-2); text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--line)}
.foot-demo a:hover{color:var(--brand)}

/* ---------- reveals ---------- */
[data-reveal]{opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1)}
[data-reveal].in{opacity:1; transform:none}

/* ========== SECTIONS DE CONTENU AJOUTÉES (style v1) ========== */
.section-sub{color:var(--ink-2); max-width:54ch; margin-top:16px; font-size:1.02rem}
.section-title.center + .section-sub{margin-inline:auto; text-align:center}

/* — comment ça marche — */
.how-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px}
.step{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:28px 26px; transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s}
.step:hover{transform:translateY(-4px); border-color:color-mix(in srgb,var(--brand) 40%,var(--line)); box-shadow:var(--shadow)}
.step-n{display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:var(--brand-soft); color:var(--brand); font-family:var(--mono); font-weight:700; font-size:.92rem; margin-bottom:18px}
.step h3{font-size:1.18rem; margin-bottom:10px}
.step p{color:var(--ink-2); font-size:.95rem}

/* — exemple de page de statut — */
.statuspage .section-title{margin-bottom:8px}
.sp-wrap{margin-top:40px}
.sp{max-width:820px; margin-inline:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden}
.sp-head{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 26px; border-bottom:1px solid var(--line-soft); flex-wrap:wrap}
.sp-dom{font-size:.86rem; color:var(--ink-2)}
.sp-status{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:.92rem; color:var(--up)}
.sp-comps{padding:6px 26px}
.sp-comp{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px 0; border-top:1px solid var(--line-soft); font-size:.95rem}
.sp-comp:first-child{border-top:0}
.sp-incidents{padding:22px 26px; background:var(--bg); border-top:1px solid var(--line-soft)}
.sp-incidents h4{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-faint); margin-bottom:14px}
.sp-inc{display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:baseline; padding:9px 0; border-top:1px dashed var(--line); font-size:.92rem; color:var(--ink-2)}
.sp-inc:first-of-type{border-top:0}
.sp-date{font-size:.76rem; color:var(--ink-faint); white-space:nowrap}
.sp-dur{font-size:.74rem; color:var(--up); white-space:nowrap}

/* — intégrations — */
.integ-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:40px}
.integ{display:flex; align-items:center; gap:13px; background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:15px 18px; transition:transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s}
.integ:hover{transform:translateY(-3px); border-color:color-mix(in srgb,var(--brand) 35%,var(--line))}
.integ-ic{display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:var(--brand-soft); color:var(--brand); flex:none}
.integ-ic svg{width:20px; height:20px}
.integ-txt b{font-weight:600; font-size:.94rem; display:block}
.integ-txt span{font-size:.73rem; color:var(--ink-faint)}

/* — avis — */
.reviews-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:44px}
.review{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:30px 28px; margin:0; transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s}
.review:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.review-q{font-size:1.08rem; line-height:1.6; color:var(--ink)}
.review-by{display:flex; align-items:center; gap:13px; margin-top:22px}
.review-av{display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--brand-soft); color:var(--brand); font-family:var(--mono); font-weight:700; font-size:.85rem; flex:none}
.review-by b{font-size:.92rem}
.review-by em{font-style:normal; display:block; font-size:.8rem; color:var(--ink-faint)}
.reviews-fine{margin-top:26px; color:var(--ink-faint); font-size:.82rem; font-style:italic}

/* ---------- responsive ---------- */
@media (max-width:920px){
  .hero-in{grid-template-columns:1fr; gap:36px}
  .feat-grid{grid-template-columns:1fr 1fr}
  .setup-in{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr; max-width:440px; margin-inline:auto}
  .plan.is-featured{order:-1}
  .faq-in{grid-template-columns:1fr; gap:24px}
  .integ-grid{grid-template-columns:repeat(2,1fr)}
  .reviews-grid{grid-template-columns:1fr}
  .nav-links{display:none}
}
@media (max-width:560px){
  .ghost-link{display:none}
  .feat-grid{grid-template-columns:1fr}
  .how-grid{grid-template-columns:1fr}
  .integ-grid{grid-template-columns:1fr}
  .sp-inc{grid-template-columns:1fr; gap:2px}
  .sp-head{flex-direction:column; align-items:flex-start; gap:8px}
  .strip-in{gap:12px}
  .board{padding:16px}
  .services li{grid-template-columns:1fr auto auto; gap:8px}
  .bars{display:none}
  .foot-in{flex-direction:column}
  .foot-demo{text-align:left}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  [data-reveal]{opacity:1; transform:none}
}