:root{
  --bg:#000000;
  --surface:#0B0B0D;
  --surface-2:#131317;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --ink:#FFFFFF;
  --muted:#9CA3AF;
  --muted-2:#6B7280;
  --em:#34D399;
  --em-dim:rgba(52,211,153,.14);
  --blue:#60A5FA;
  --violet:#A78BFA;
  --amber:#FBBF24;
  --rose:#FB7185;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Poppins",-apple-system,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{margin:0; font-weight:600; letter-spacing:-.04em; line-height:1.1; text-wrap:balance}
p{margin:0}
a{color:inherit; text-decoration:none}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px}

.grad-text{
  background:linear-gradient(to bottom,#fff,#fff,rgba(255,255,255,.6));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

@keyframes fadeIn{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
@keyframes slideDown{from{opacity:0; transform:translateY(-10px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* ─────────────  Boutons  ───────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap;
  font-family:inherit; font-weight:500; font-size:14px; cursor:pointer;
  border:1px solid transparent; border-radius:8px; padding:0 18px; height:40px;
  transition:all .2s;
}
.btn-lg{height:48px; padding:0 30px; font-size:16px}
.btn-grad{background:linear-gradient(to bottom,#fff,rgba(255,255,255,.95),rgba(255,255,255,.6)); color:#000}
.btn-grad:hover{transform:scale(1.04)}
.btn-grad:active{transform:scale(.97)}
.btn-white{background:#fff; color:#000}
.btn-white:hover{background:#E9E9E9}
.btn-ghost{color:#fff; background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn-outline{color:#fff; border-color:var(--line-2); background:rgba(255,255,255,.02)}
.btn-outline:hover{border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.06)}
.btn:focus-visible, .seg button:focus-visible{outline:2px solid var(--em); outline-offset:3px}

/* ─────────────  En-tête  ───────────── */
header.top{position:fixed; top:0; left:0; right:0; z-index:60; border-bottom:1px solid var(--line); background:rgba(0,0,0,.8); backdrop-filter:blur(12px)}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:20px; height:70px}
.brand{display:flex; align-items:center; gap:10px; font-weight:600; font-size:17px; letter-spacing:-.03em}
.mark{width:28px; height:28px; border-radius:8px; flex:none; display:grid; place-items:center; font-size:13px; font-weight:700; color:#04120D;
  background:linear-gradient(140deg,#6EE7B7,#34D399 55%,#10B981)}
.top-cta{display:flex; align-items:center; gap:10px}

/* ─────────────  Navigation à survol  ───────────── */
.nv{position:relative}
.nv-list{display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0}
.nv-li{position:static}
.nv-trigger{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-family:inherit; font-size:14px; font-weight:500; color:var(--muted);
  background:none; border:0; border-radius:9px; padding:9px 14px; cursor:pointer;
  transition:background .2s, color .2s;
}
.nv-trigger:hover, .nv-li.open .nv-trigger, .nv-trigger[aria-current]{background:rgba(255,255,255,.07); color:#fff}
.nv-trigger svg{width:13px; height:13px; flex:none; transition:transform .25s; opacity:.65}
.nv-li.open .nv-trigger svg{transform:rotate(180deg)}
.nv-trigger:focus-visible{outline:2px solid var(--em); outline-offset:2px}

.nv-panel{
  position:absolute; top:100%; margin-top:12px; z-index:70;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
  border:1px solid var(--line-2); border-radius:14px; padding:10px;
  background:#0E0E11; box-shadow:0 24px 60px -18px rgba(0,0,0,.95);
}
.nv-panel::before{content:""; position:absolute; left:0; right:0; top:-14px; height:14px}
.nv-li.open .nv-panel{opacity:1; visibility:visible; transform:translateY(0)}
.nv-panel.left{left:0}
.nv-panel.right{right:0}

.nv-cols{display:grid; grid-template-columns:210px 1fr; gap:10px; width:640px}
.nv-cols-2{display:grid; grid-template-columns:1fr 1fr; gap:4px; width:560px}
.nv-cols-1{display:grid; gap:2px; width:320px}

.nv-featured{
  display:flex; flex-direction:column; justify-content:flex-end; gap:8px; padding:20px;
  border-radius:10px; text-decoration:none; position:relative; overflow:hidden;
  background:linear-gradient(160deg, rgba(52,211,153,.16), rgba(255,255,255,.03) 55%, rgba(255,255,255,.02));
  border:1px solid var(--line);
}
.nv-featured::after{content:""; position:absolute; left:-30%; top:-60%; width:160%; height:110%; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(52,211,153,.28), transparent 65%); filter:blur(28px)}
.nv-featured b{font-size:16px; font-weight:600; color:#fff; position:relative; letter-spacing:-.02em}
.nv-featured p{font-size:12.5px; color:var(--muted); line-height:1.5; position:relative}
.nv-featured span{font-size:12px; color:var(--em); display:inline-flex; align-items:center; gap:5px; position:relative; margin-top:4px}
.nv-featured:hover span{gap:9px}
.nv-featured span svg{width:12px; height:12px; transition:transform .2s}

.nv-item{display:flex; gap:11px; align-items:flex-start; padding:11px 12px; border-radius:9px; transition:background .18s}
.nv-item:hover{background:rgba(255,255,255,.06)}
.nv-item-ic{width:30px; height:30px; border-radius:8px; flex:none; display:grid; place-items:center; border:1px solid var(--line); background:rgba(255,255,255,.04)}
.nv-item-ic svg{width:15px; height:15px; color:var(--ic,#fff)}
.nv-item b{display:block; font-size:13.5px; font-weight:500; color:#fff; margin-bottom:2px}
.nv-item p{font-size:12px; color:var(--muted-2); line-height:1.45}

.burger{display:none; background:none; border:0; color:#fff; cursor:pointer; padding:6px}
.mobile{display:none; border-top:1px solid var(--line); background:rgba(0,0,0,.96); backdrop-filter:blur(12px); animation:slideDown .3s ease-out}
.mobile.on{display:block}
.mobile-in{display:flex; flex-direction:column; gap:2px; padding:14px 24px 22px}
.mobile a{padding:12px 0; color:var(--muted); font-size:15px}
.mobile a:hover{color:#fff}
.mobile .sep{border-top:1px solid var(--line); margin-top:10px; padding-top:14px; display:flex; flex-direction:column; gap:10px}

/* ─────────────  Pages  ───────────── */
.page{display:none}
.page.on{display:block; animation:fadeIn .6s ease-out}
main{padding-top:70px}

/* ─────────────  Hero  ───────────── */
.hero{display:flex; flex-direction:column; align-items:center; padding:76px 24px 0; position:relative}
.badge{display:inline-flex; align-items:center; gap:9px; padding:7px 15px; border-radius:999px;
  border:1px solid var(--line-2); background:rgba(255,255,255,.04); backdrop-filter:blur(6px); margin-bottom:30px}
.badge span{font-size:12px; color:var(--muted)}
.badge a{display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--em); transition:.2s}
.badge a:hover{opacity:.75}
.hero h1{font-size:clamp(36px,5.2vw,62px); text-align:center; max-width:16ch; margin-bottom:22px}
.hero .lede{font-size:16px; color:var(--muted); text-align:center; max-width:56ch; margin-bottom:34px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; position:relative; z-index:10}
.hero-note{margin-top:18px; font-size:12.5px; color:var(--muted-2)}

.showcase{width:100%; max-width:1020px; margin:64px auto 0; position:relative; padding-bottom:90px}
.halo{position:absolute; left:50%; top:-32%; width:110%; height:70%; transform:translateX(-50%); z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(52,211,153,.30), transparent 70%),
             radial-gradient(ellipse 40% 45% at 30% 55%, rgba(96,165,250,.24), transparent 70%),
             radial-gradient(ellipse 40% 45% at 72% 50%, rgba(167,139,250,.22), transparent 70%);
  filter:blur(46px)}

/* ─────────────  Maquette tableau de bord  ───────────── */
.app{position:relative; z-index:1; border:1px solid var(--line-2); border-radius:14px; overflow:hidden;
  background:linear-gradient(to bottom,#0E0E12,#08080A); box-shadow:0 40px 90px -30px rgba(0,0,0,.95)}
.app-bar{display:flex; align-items:center; gap:9px; padding:12px 16px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.02)}
.dot{width:10px; height:10px; border-radius:50%; background:#2A2A31}
.app-url{margin-left:12px; font-size:11px; color:var(--muted-2); letter-spacing:.02em}
.app-body{display:grid; grid-template-columns:190px 1fr; min-height:380px}
.app-side{border-right:1px solid var(--line); padding:16px 12px; display:flex; flex-direction:column; gap:3px}
.app-side i{display:block; height:9px; border-radius:4px; background:rgba(255,255,255,.07)}
.side-row{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:7px; font-size:12.5px; color:var(--muted-2)}
.side-row.on{background:rgba(255,255,255,.06); color:#fff}
.side-row svg{width:14px; height:14px; flex:none}
.app-main{padding:20px}
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:11px; margin-bottom:16px}
.kpi{border:1px solid var(--line); border-radius:10px; padding:12px; background:rgba(255,255,255,.02)}
.kpi small{display:block; font-size:10px; color:var(--muted-2); letter-spacing:.05em; text-transform:uppercase}
.kpi b{display:block; font-size:19px; font-weight:600; letter-spacing:-.03em; margin-top:5px}
.kpi u{display:block; text-decoration:none; font-size:10.5px; color:var(--em); margin-top:2px}
.chart{border:1px solid var(--line); border-radius:10px; padding:15px; background:rgba(255,255,255,.02); margin-bottom:16px}
.chart-h{display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted-2); margin-bottom:14px}
.bars{display:flex; align-items:flex-end; gap:8px; height:86px}
.bars div{flex:1; border-radius:4px 4px 0 0; background:linear-gradient(to top, rgba(52,211,153,.85), rgba(52,211,153,.25))}
.rows{border:1px solid var(--line); border-radius:10px; overflow:hidden}
.row{display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; padding:10px 14px; font-size:12px; color:var(--muted)}
.row + .row{border-top:1px solid var(--line)}
.tag{font-size:10px; padding:2px 8px; border-radius:999px; border:1px solid}
.t-ok{color:var(--em); border-color:rgba(52,211,153,.35); background:rgba(52,211,153,.1)}
.t-wait{color:var(--amber); border-color:rgba(251,191,36,.3); background:rgba(251,191,36,.08)}
.t-late{color:var(--rose); border-color:rgba(251,113,133,.3); background:rgba(251,113,133,.08)}

/* ─────────────  Sections  ───────────── */
.sec{padding:96px 0}
.eyebrow{display:inline-flex; align-items:center; gap:9px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--em); margin-bottom:16px}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--em); opacity:.55}
.sec-head{max-width:40rem; margin-bottom:48px}
.sec-head h2{font-size:clamp(27px,3.4vw,42px)}
.sec-head p{color:var(--muted); margin-top:18px; font-size:16.5px}
.center{margin-left:auto; margin-right:auto; text-align:center}
.center .eyebrow{justify-content:center}

.strip{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.strip div{padding:28px 22px; border-left:1px solid var(--line)}
.strip div:first-child{border-left:0; padding-left:0}
.strip b{display:block; font-size:31px; font-weight:600; letter-spacing:-.045em; margin-bottom:7px}
.strip span{font-size:12.5px; color:var(--muted-2); line-height:1.5; display:block}

.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.card{position:relative; border:1px solid var(--line); border-radius:14px; padding:26px 24px 28px; overflow:hidden;
  background:linear-gradient(to bottom, rgba(255,255,255,.045), rgba(255,255,255,.012)); transition:border-color .3s}
.card:hover{border-color:var(--line-2)}
.card::after{content:""; position:absolute; inset:-40% 30% 60% 30%; background:var(--grad); opacity:0; transition:opacity .4s; pointer-events:none; filter:blur(30px)}
.card:hover::after{opacity:1}
.card-ic{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; border:1px solid var(--line-2); background:rgba(255,255,255,.04); margin-bottom:16px; position:relative; z-index:1}
.card-ic svg{width:17px; height:17px; color:var(--ic)}
.card h3{font-size:17px; margin-bottom:9px; position:relative; z-index:1}
.card p{font-size:14px; color:var(--muted); line-height:1.6; position:relative; z-index:1}

.split{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center}
.checks{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:14px}
.checks li{display:flex; gap:12px; font-size:15px; color:var(--muted)}
.checks li svg{width:18px; height:18px; flex:none; color:var(--em); margin-top:3px}
.panel{border:1px solid var(--line); border-radius:14px; padding:28px; background:linear-gradient(to bottom, rgba(255,255,255,.045), rgba(255,255,255,.012))}
.panel h3{font-size:18px}
.kv{display:grid; margin-top:18px}
.kv div{display:flex; justify-content:space-between; gap:18px; padding:13px 0; border-top:1px solid var(--line); font-size:14px; color:var(--muted)}
.kv span:last-child{color:#fff; font-variant-numeric:tabular-nums; text-align:right}
.quote{margin-top:26px; padding-left:15px; border-left:2px solid var(--amber); font-size:13.5px; color:var(--muted-2)}

/* ─────────────  Tableau  ───────────── */
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:var(--surface)}
table{border-collapse:collapse; width:100%; min-width:860px}
th,td{text-align:left; padding:15px 20px; border-top:1px solid var(--line); font-size:14px; color:var(--muted)}
thead th{border-top:0; vertical-align:bottom; background:rgba(255,255,255,.03); color:#fff}
.plan-name{font-size:15px; font-weight:600; color:#fff; letter-spacing:-.01em}
.plan-price{display:block; font-size:32px; font-weight:600; letter-spacing:-.045em; margin:8px 0 2px; font-variant-numeric:tabular-nums}
.plan-per{display:block; font-size:11px; color:var(--muted-2)}
td.mid{text-align:center; font-variant-numeric:tabular-nums}
td.feat{color:#D1D5DB}
.yes{color:var(--em)}
.no{color:#3F3F46}
th.hi, td.hi{background:rgba(52,211,153,.055)}
th.hi{box-shadow:inset 0 1px 0 var(--em)}
.pill{display:inline-block; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; padding:3px 9px; border-radius:999px; margin-bottom:10px;
  background:var(--em-dim); color:var(--em); border:1px solid rgba(52,211,153,.3)}
.pack{font-size:11px; letter-spacing:.1em}

.seg{display:inline-flex; gap:4px; padding:4px; border-radius:11px; border:1px solid var(--line); background:rgba(255,255,255,.03); margin-bottom:34px}
.seg button{font-family:inherit; font-size:13.5px; border:0; background:none; color:var(--muted); padding:8px 16px; border-radius:8px; cursor:pointer; transition:.2s}
.seg button.on{background:rgba(255,255,255,.1); color:#fff}

/* ─────────────  Formulaire  ───────────── */
.form-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:start}
.field{display:grid; gap:7px; margin-bottom:17px}
.field label{font-size:13px; font-weight:500; color:#E5E7EB}
.field input, .field select{
  font-family:inherit; font-size:14.5px; padding:11px 13px; border-radius:9px; color:#fff;
  border:1px solid var(--line-2); background:rgba(255,255,255,.04);
}
.field select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 20px, calc(100% - 13px) 20px; background-size:5px 5px; background-repeat:no-repeat}
.field option{background:#111; color:#fff}
.field input::placeholder{color:var(--muted-2)}
.field input:focus, .field select:focus{outline:none; border-color:var(--em); box-shadow:0 0 0 3px rgba(52,211,153,.15)}
.field small{font-size:12px; color:var(--muted-2)}
.two{display:grid; grid-template-columns:1fr 1fr; gap:13px}
.steps{display:grid; margin-top:20px}
.step{display:flex; gap:15px; padding:16px 0; border-top:1px solid var(--line)}
.step b{font-size:11px; color:var(--em); flex:none; padding-top:4px; font-weight:500}
.step strong{display:block; font-size:14px; font-weight:500; color:#fff; margin-bottom:3px}
.step p{font-size:13.5px; color:var(--muted); line-height:1.55}
.recap{position:sticky; top:96px}

.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line); padding:19px 0}
.faq summary{cursor:pointer; font-size:15.5px; color:#fff; font-weight:500; list-style:none; display:flex; justify-content:space-between; gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--muted-2)}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin-top:12px; color:var(--muted); font-size:14.5px; max-width:62ch}

.cta-band{position:relative; overflow:hidden; border:1px solid var(--line-2); border-radius:18px; padding:56px 40px; text-align:center;
  background:linear-gradient(to bottom, rgba(255,255,255,.06), rgba(255,255,255,.015))}
.cta-band::before{content:""; position:absolute; left:50%; top:-90%; width:80%; height:150%; transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(52,211,153,.3), transparent 65%); filter:blur(52px)}
.cta-band h2{font-size:clamp(25px,3.2vw,38px); position:relative}
.cta-band p{color:var(--muted); margin:16px auto 30px; max-width:44ch; position:relative}
.cta-band .btn{position:relative}

footer{border-top:1px solid var(--line); padding:44px 0 60px; margin-top:40px}
.foot{display:flex; justify-content:space-between; gap:28px; flex-wrap:wrap; font-size:13.5px; color:var(--muted-2)}
.foot a:hover{color:#fff}

@media (max-width:1000px){
  .nv, .top-cta .btn-ghost{display:none}
  .burger{display:block}
  .split,.form-grid{grid-template-columns:1fr; gap:40px}
  .cards{grid-template-columns:1fr}
  .strip{grid-template-columns:1fr 1fr}
  .strip div:nth-child(3){border-left:0; padding-left:0}
  .app-body{grid-template-columns:1fr}
  .app-side{display:none}
  .kpis{grid-template-columns:1fr 1fr}
  .recap{position:static}
  .sec{padding:64px 0}
  .hero{padding-top:52px}
  .showcase{margin-top:44px; padding-bottom:56px}
}

/* ─────────────  Formulaire : erreurs et champ piege  ───────────── */
.alert{
  border:1px solid rgba(251,113,133,.4); background:rgba(251,113,133,.09);
  border-radius:10px; padding:15px 17px; margin-bottom:22px;
}
.alert strong{display:block; color:#fff; font-size:14px; font-weight:600; margin-bottom:7px}
.alert ul{margin:0; padding-left:18px; display:grid; gap:5px}
.alert li{font-size:13.5px; color:var(--muted); line-height:1.5}
.alert a{color:var(--em); text-decoration:underline}

/* Champ piege anti-robot : sorti du flux sans display:none,
   que les robots savent detecter. */
.pot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ─────────────  Pages de texte (CGV, confidentialite, contact)  ───────────── */
.prose{max-width:70ch}
.prose h2{font-size:clamp(24px,3vw,34px); margin-bottom:10px}
.prose h3{font-size:17px; margin:34px 0 10px; color:#fff}
.prose p, .prose li{color:var(--muted); font-size:15px; line-height:1.7}
.prose p + p{margin-top:12px}
.prose ul{padding-left:20px; display:grid; gap:8px; margin:12px 0}
.prose a{color:var(--em)}
.prose .maj{font-size:12.5px; color:var(--muted-2); margin-top:6px}