/* ===== Design tokens ===== */
:root{
  --ink:#0a0a0a;
  --ink-soft:#161616;
  --paper:#ffffff;
  --paper-soft:#f7f7f5;
  --line:#e6e6e2;
  --green:#0ecb63;
  --green-dark:#09a350;
  --green-glow:rgba(14,203,99,.35);
  --muted:#8a8a86;
  --muted-dark:#a9a9a5;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 20px 60px -20px rgba(0,0,0,.25);
  --ease:cubic-bezier(.16,1,.3,1);
  --font: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  font-family:var(--font);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}
section{position:relative;}
.wrap{max-width:1160px; margin:0 auto; padding:0 28px;}
.dark{background:var(--ink); color:var(--paper);}
.dark .muted{color:var(--muted-dark);}
.muted{color:var(--muted);}

/* ===== Reveal on scroll ===== */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-stagger > *{opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal-stagger.in > *{opacity:1; transform:translateY(0);}
.reveal-stagger.in > *:nth-child(1){transition-delay:.05s;}
.reveal-stagger.in > *:nth-child(2){transition-delay:.15s;}
.reveal-stagger.in > *:nth-child(3){transition-delay:.25s;}
.reveal-stagger.in > *:nth-child(4){transition-delay:.35s;}
.reveal-stagger.in > *:nth-child(5){transition-delay:.45s;}
.reveal-stagger.in > *:nth-child(6){transition-delay:.55s;}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 26px; border-radius:100px;
  font-weight:600; font-size:15px; letter-spacing:-.01em;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .25s;
  white-space:nowrap;
}
.btn svg{width:16px; height:16px; transition:transform .35s var(--ease);}
.btn:hover svg{transform:translateX(4px);}
.btn-primary{
  background:var(--green); color:#04150a;
  box-shadow:0 8px 24px -6px var(--green-glow);
}
.btn-primary:hover{transform:translateY(-3px) scale(1.02); box-shadow:0 16px 34px -8px var(--green-glow);}
.btn-ghost{
  background:transparent; color:var(--ink); border:1.5px solid var(--line);
}
.btn-ghost:hover{border-color:var(--ink); transform:translateY(-2px);}
.dark .btn-ghost{color:var(--paper); border-color:rgba(255,255,255,.25);}
.dark .btn-ghost:hover{border-color:var(--paper);}

/* ===== Header ===== */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:18px 0;
  transition:padding .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
header.scrolled{
  padding:12px 0;
  background:rgba(255,255,255,.97);
  box-shadow:0 1px 0 var(--line);
}
header .wrap{display:flex; align-items:center; justify-content:space-between;}
.logo{display:flex; align-items:center;}
.logo img{height:26px; width:auto; display:block;}
.footer-brand .logo img, .mobile-nav .logo img{height:24px;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px var(--green-glow);} 50%{box-shadow:0 0 0 8px transparent;}}
nav{display:flex; align-items:center; gap:36px;}
nav .nav-links{display:flex; gap:30px; font-size:14.5px; font-weight:500;}
nav .nav-links a{position:relative; padding:4px 0; color:var(--ink);}
nav .nav-links a::after{content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--green); transition:width .3s var(--ease);}
nav .nav-links a:hover::after{width:100%;}
.burger{display:none; width:38px; height:38px; align-items:center; justify-content:center; border-radius:50%; border:1.5px solid var(--line);}
.burger svg{width:18px; height:18px;}

/* ===== Hero ===== */
.hero{
  padding:170px 0 120px;
  position:relative; overflow:hidden;
  background:
    radial-gradient(600px 400px at 85% -10%, rgba(14,203,99,.16), transparent 60%),
    var(--paper);
}
.hero-grid{position:absolute; top:0; left:0; right:0; height:640px; background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:64px 64px; -webkit-mask-image:linear-gradient(to bottom, black, transparent); mask-image:linear-gradient(to bottom, black, transparent); opacity:.5;}
/* Glow radial (pas de filter:blur — coûteux à composer/animer) : le flou est simulé par le dégradé lui-même. */
.blob{position:absolute; border-radius:50%; opacity:.6; animation:float 14s ease-in-out infinite; will-change:transform;}
.blob-1{width:460px; height:460px; top:-160px; right:-140px; animation-delay:0s; background:radial-gradient(circle, var(--green) 0%, rgba(14,203,99,.25) 45%, transparent 72%);}
.blob-2{width:340px; height:340px; bottom:-40px; left:-140px; animation-delay:-6s; background:radial-gradient(circle, #8ff0c0 0%, rgba(143,240,192,.2) 45%, transparent 72%);}
@keyframes float{0%,100%{transform:translate(0,0);} 50%{transform:translate(16px,-20px);}}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:100px; border:1px solid var(--line);
  font-size:13px; font-weight:600; color:var(--ink-soft);
  background:var(--paper);
}
.eyebrow svg{width:14px; height:14px; color:var(--green-dark);}

.hero-content{position:relative; z-index:2; max-width:760px;}
h1{
  font-size:clamp(38px,6vw,68px); line-height:1.02; letter-spacing:-.03em; font-weight:700;
  margin:22px 0 22px;
}
h1 .accent{color:var(--green-dark); position:relative; white-space:nowrap;}
h1 .strike{position:relative; display:inline-block;}
h1 .strike::after{
  content:''; position:absolute; left:-2%; right:-2%; top:52%; height:.09em;
  background:var(--ink); transform:scaleX(0); transform-origin:left; animation:strike .5s var(--ease) 1.1s forwards;
}
@keyframes strike{to{transform:scaleX(1);}}

.hero-sub{font-size:19px; line-height:1.55; color:var(--muted); max-width:560px; margin-bottom:36px;}
.hero-actions{display:flex; gap:16px; align-items:center; flex-wrap:wrap;}
.hero-note{font-size:13px; color:var(--muted); margin-top:14px;}

.hero-stats{display:flex; gap:36px; margin-top:64px; flex-wrap:wrap;}
.hstat b{display:block; font-size:34px; font-weight:700; letter-spacing:-.02em;}
.hstat b .unit{font-size:20px; color:var(--green-dark);}
.hstat span{font-size:13px; color:var(--muted);}

/* ===== Marquee ===== */
.marquee-band{background:var(--ink); color:var(--paper); padding:16px 0; overflow:hidden; border-top:1px solid #1c1c1c; border-bottom:1px solid #1c1c1c;}
.marquee-track{display:flex; gap:48px; width:max-content; animation:scroll-x 26s linear infinite;}
.marquee-track span{font-size:14px; font-weight:600; letter-spacing:.02em; color:var(--muted-dark); display:flex; align-items:center; gap:10px; white-space:nowrap;}
.marquee-track span svg{width:14px; height:14px; color:var(--green);}
@keyframes scroll-x{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ===== Pillars (réassurance) ===== */
/* Section foncée : deuxième temps du bicolore (voir hero=clair, pillars=foncé, ainsi de suite). */
.pillars{padding:90px 0; background:var(--ink); color:var(--paper);}
.pillars-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px;}
.pillar{
  padding:34px 28px; border-radius:var(--radius); border:1px solid rgba(255,255,255,.08);
  background:var(--ink-soft);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.pillar:hover{transform:translateY(-6px); box-shadow:0 20px 60px -20px rgba(0,0,0,.6); border-color:transparent;}
.pillar-icon{
  width:52px; height:52px; border-radius:14px; background:var(--green); color:var(--ink);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
  transition:transform .4s var(--ease);
}
.pillar:hover .pillar-icon{transform:rotate(-8deg) scale(1.06);}
.pillar-icon svg{width:24px; height:24px;}
.pillar h3{font-size:20px; margin-bottom:10px; letter-spacing:-.01em;}
.pillar p{font-size:14.5px; color:var(--muted-dark); line-height:1.6;}

/* ===== Section heading ===== */
.section-head{max-width:640px; margin-bottom:20px;}
.kicker{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--green-dark); margin-bottom:14px; display:block;}
.section-head h2{font-size:clamp(28px,4vw,42px); letter-spacing:-.025em; line-height:1.08; font-weight:700;}
.section-head p{margin-top:16px; font-size:16.5px; color:var(--muted); line-height:1.6;}

/* ===== Story (contexte) ===== */
.story{padding:100px 0;}
.story-cards{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:50px;}
.story-card{padding:32px; border-radius:var(--radius); position:relative; overflow:hidden;}
.story-card.bad{background:var(--ink); color:var(--paper);}
.story-card.good{background:var(--green); color:#04150a;}
.story-card h4{font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; opacity:.7; margin-bottom:14px;}
.story-card ul{display:flex; flex-direction:column; gap:12px;}
.story-card li{font-size:16px; display:flex; gap:10px; align-items:flex-start; line-height:1.5;}
.story-card li svg{width:18px; height:18px; flex-shrink:0; margin-top:2px;}
.story-card.bad li svg{color:#ff5c5c;}
.story-card.good li svg{color:#04150a;}

/* ===== Features (section foncée) ===== */
.features{padding:100px 0; background:var(--ink); color:var(--paper);}
.features .kicker{color:var(--green);}
.features .section-head p{color:var(--muted-dark);}
.features-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px;}
.feature{
  background:var(--ink-soft); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius);
  padding:28px; transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.feature:hover{transform:translateY(-5px); box-shadow:0 20px 60px -20px rgba(0,0,0,.6);}
.feature-icon{width:44px; height:44px; border-radius:12px; background:rgba(14,203,99,.18); color:var(--green); display:flex; align-items:center; justify-content:center; margin-bottom:18px;}
.feature-icon svg{width:22px; height:22px;}
.feature h3{font-size:17px; margin-bottom:8px; letter-spacing:-.01em;}
.feature p{font-size:14px; color:var(--muted-dark); line-height:1.55;}

/* ===== Dashboard mockup ===== */
.dash{padding:100px 0; overflow:hidden;}
.dash-frame{
  margin-top:50px; border-radius:24px; background:var(--ink); padding:22px;
  box-shadow:var(--shadow); position:relative;
}
.dash-topbar{display:flex; gap:7px; padding:4px 6px 18px;}
.dash-topbar span{width:11px; height:11px; border-radius:50%; background:#333;}
.dash-inner{background:var(--paper); border-radius:16px; padding:28px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.dash-kpi{padding:18px; border-radius:14px; background:var(--paper-soft); border:1px solid var(--line);}
.dash-kpi span{font-size:12.5px; color:var(--muted); display:block; margin-bottom:8px;}
.dash-kpi b{font-size:26px; font-weight:700; letter-spacing:-.02em;}
.dash-kpi b.green{color:var(--green-dark);}
.dash-chart{grid-column:span 4; margin-top:6px; padding:20px; border-radius:14px; background:var(--paper-soft); border:1px solid var(--line);}
.dash-chart-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:18px;}
.dash-chart-head span{font-size:13px; color:var(--muted);}
.bars{display:flex; align-items:flex-end; gap:8px; height:120px;}
.bars i{flex:1; background:linear-gradient(180deg, var(--green), var(--green-dark)); border-radius:6px 6px 2px 2px; height:6%; transition:height 1.1s var(--ease);}
.dash-inner.in .bars i{}
@media(max-width:860px){.dash-inner{grid-template-columns:repeat(2,1fr);} .dash-chart{grid-column:span 2;}}

/* ===== Pricing ===== */
.pricing{padding:110px 0; background:var(--ink); color:var(--paper);}
.pricing-card{
  margin-top:50px; max-width:760px; margin-left:auto; margin-right:auto;
  border-radius:28px; padding:56px 44px; text-align:center;
  background:linear-gradient(160deg, #101410, #0a0a0a);
  border:1px solid #1e1e1e; position:relative; overflow:hidden;
}
.pricing-card::before{
  content:''; position:absolute; width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle, var(--green) 0%, rgba(14,203,99,.25) 45%, transparent 72%); opacity:.5; top:-160px; left:50%; transform:translateX(-50%);
}
.pricing-badge{position:relative; z-index:1; display:inline-flex; align-items:center; gap:8px; padding:7px 16px; border-radius:100px; background:rgba(14,203,99,.14); color:var(--green); font-size:13px; font-weight:700; margin-bottom:22px;}
.pricing-title{position:relative; z-index:1; font-size:clamp(26px,4vw,38px); font-weight:700; letter-spacing:-.02em; margin-bottom:16px;}
.pricing-title .green{color:var(--green);}
.pricing-sub{position:relative; z-index:1; color:var(--muted-dark); font-size:16px; max-width:440px; margin:0 auto 34px;}
.pricing-list{position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:center; margin-bottom:38px;}
.pricing-list li{display:flex; align-items:center; gap:8px; font-size:14.5px; color:var(--paper);}
.pricing-list svg{width:17px; height:17px; color:var(--green);}
.pricing-card .btn{position:relative; z-index:1;}
.pricing-strike{position:relative; z-index:1; margin-top:22px; font-size:13.5px; color:var(--muted-dark);}
.pricing-strike s{color:#ff6b6b; opacity:.8;}

/* ===== FAQ ===== */
.faq{padding:100px 0;}
.faq-list{margin-top:44px; border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:24px 2px; text-align:left; font-size:17px; font-weight:600; letter-spacing:-.01em;
}
.faq-q .plus{width:26px; height:26px; border-radius:50%; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .4s var(--ease), background .3s, border-color .3s;}
.faq-q .plus svg{width:12px; height:12px; transition:transform .3s;}
.faq-item.open .faq-q .plus{background:var(--green); border-color:var(--green);}
.faq-item.open .faq-q .plus svg{transform:rotate(45deg); color:#04150a;}
.faq-a{max-height:0; overflow:hidden; transition:max-height .45s var(--ease);}
.faq-a p{padding:0 2px 24px; font-size:15px; color:var(--muted); line-height:1.65; max-width:640px;}

/* ===== Devis form (section foncée — le formulaire reste une carte claire, net contraste) ===== */
.devis{padding:110px 0; background:var(--ink); color:var(--paper);}
.devis .kicker{color:var(--green);}
.devis .muted{color:var(--muted-dark);}
.devis-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; margin-top:44px;}
.devis-points{display:flex; flex-direction:column; gap:22px; margin-top:30px;}
.devis-point{display:flex; gap:14px; align-items:flex-start;}
.devis-point .num{width:30px; height:30px; border-radius:50%; background:var(--green); color:var(--ink); font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.devis-point b{display:block; font-size:15.5px; margin-bottom:3px;}
.devis-point span{font-size:14px; color:var(--muted-dark);}

form.devis-form{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:36px; box-shadow:0 30px 70px -20px rgba(0,0,0,.55);}
.field{margin-bottom:18px;}
.field.field-error input, .field.field-error textarea{border-color:#e03b3b; box-shadow:0 0 0 4px rgba(224,59,59,.12);}
.field label{display:block; font-size:13px; font-weight:600; margin-bottom:7px; color:var(--ink-soft);}
.field input, .field textarea{
  width:100%; padding:13px 15px; border-radius:10px; border:1.5px solid var(--line);
  font-family:inherit; font-size:14.5px; background:var(--paper);
  transition:border-color .25s, box-shadow .25s;
}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 4px var(--green-glow);}
.field textarea{resize:vertical; min-height:90px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.devis-form .btn{width:100%; justify-content:center; margin-top:6px;}
.form-msg{margin-top:14px; font-size:14px; padding:12px 14px; border-radius:10px; display:none;}
.form-msg.ok{display:block; background:rgba(14,203,99,.12); color:var(--green-dark);}
.form-msg.err{display:block; background:rgba(255,90,90,.12); color:#c73838;}

/* ===== Footer ===== */
footer{background:var(--ink); color:var(--paper); padding:64px 0 28px;}
.footer-top{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:44px; border-bottom:1px solid #1e1e1e;}
.footer-brand .logo{color:var(--paper); margin-bottom:14px;}
.footer-brand p{color:var(--muted-dark); font-size:14px; max-width:280px; line-height:1.6;}
.footer-cols{display:flex; gap:64px; flex-wrap:wrap;}
.footer-col h5{font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-dark); margin-bottom:16px;}
.footer-col a, .footer-col span{display:block; font-size:14.5px; margin-bottom:11px; color:var(--paper);}
.footer-col a:hover{color:var(--green);}
.footer-bottom{display:flex; justify-content:space-between; padding-top:26px; font-size:13px; color:var(--muted-dark); flex-wrap:wrap; gap:10px;}

/* ===== Responsive ===== */
@media(max-width:900px){
  nav .nav-links{display:none;}
  .burger{display:flex;}
  .pillars-grid, .story-cards, .features-grid, .devis-grid{grid-template-columns:1fr;}
  .hero{padding:140px 0 90px;}
  .dash-inner{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:560px){
  .field-row{grid-template-columns:1fr;}
  .hero-stats{gap:24px;}
  .dash-inner{grid-template-columns:1fr;}
  .dash-chart{grid-column:span 1;}
}

/* mobile nav panel */
.mobile-nav{
  position:fixed; inset:0; background:var(--ink); z-index:200;
  display:flex; flex-direction:column; padding:100px 32px 40px;
  transform:translateY(-100%); transition:transform .5s var(--ease);
}
.mobile-nav.open{transform:translateY(0);}
.mobile-nav a{color:var(--paper); font-size:28px; font-weight:600; padding:16px 0; border-bottom:1px solid #1e1e1e; letter-spacing:-.01em;}
.mobile-nav .btn{margin-top:30px;}
.mobile-close{position:absolute; top:24px; right:28px; width:42px; height:42px; border-radius:50%; border:1.5px solid #333; display:flex; align-items:center; justify-content:center; color:var(--paper);}
.mobile-close svg{width:18px; height:18px;}