/* EcomPilot — Landing. Tous les espacements sont des multiples de 8 px. */
.wrap{width:100%;max-width:1264px;margin:0 auto;padding:0 32px}
a{color:inherit;text-decoration:none}

/* Boutons */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:var(--r-pill);font-weight:700;transition:transform .2s,box-shadow .2s,background .2s;white-space:nowrap}
.btn.sm{height:40px;padding:0 16px;font-size:15px}
.btn.lg{height:56px;padding:0 24px 0 32px;font-size:17px}
.btn.primary{background:var(--laterite-btn);color:#fff;box-shadow:0 8px 24px rgba(176,74,49,.32)}
.btn.primary:hover{background:#9A3F29;transform:translateY(-2px)}
.btn.ghost{color:var(--fleuve);box-shadow:inset 0 0 0 1.5px var(--sable-300)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--fleuve);background:#fff}
.btn.ghost.lg{padding:0 32px 0 24px}
.btn.light{background:var(--sable);color:var(--fleuve)}
.btn.light:hover{background:#fff;transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid var(--laterite);outline-offset:3px}

/* Logotype */
.logo{display:inline-flex;align-items:center;gap:8px;font:600 26px/1 var(--f-title);letter-spacing:-.01em;color:var(--fleuve)}
.logo b{font-weight:600;color:var(--laterite-ink)}
.logo.light{color:var(--sable)}.logo.light b{color:#E3876F}

/* Navigation */
.nav{display:flex;align-items:center;justify-content:space-between;height:88px;position:relative;z-index:3}
.links{display:flex;gap:40px;font-weight:500;color:var(--gris)}
.links a:hover{color:var(--fleuve)}
.nav-cta{display:flex;gap:8px}

/* Hero */
.hero{position:relative;overflow:hidden;padding-bottom:48px}
.hero-motif{position:absolute;right:-80px;top:-88px;width:720px;height:820px;opacity:.13;
  -webkit-mask:radial-gradient(closest-side,#000 40%,transparent);mask:radial-gradient(closest-side,#000 40%,transparent)}
.hero-route{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero-route path{fill:none;stroke:var(--laterite);stroke-width:2;stroke-dasharray:2 10;stroke-linecap:round;opacity:.55}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:5fr 7fr;gap:32px;align-items:center;min-height:600px;padding-top:32px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 16px;border-radius:var(--r-pill);background:#fff;font-size:14px;font-weight:500;color:var(--fleuve);box-shadow:var(--shadow-1)}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--laterite);box-shadow:0 0 0 4px var(--laterite-100)}
h1{font:600 72px/1.02 var(--f-title);letter-spacing:-.01em;color:var(--fleuve);margin:24px 0}
h1 em{font-style:normal;color:var(--laterite-ink);position:relative}
h1 em::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M2 6C50 1 120 1 198 5' fill='none' stroke='%23C8553D' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.lead{font-size:19px;line-height:1.6;color:var(--gris);max-width:480px}
.cta-row{display:flex;gap:16px;margin:40px 0 24px}
.reassure{display:flex;gap:24px;padding:0;list-style:none;font-size:14px;color:var(--gris)}
.reassure li{display:flex;align-items:center;gap:8px}
.reassure .ico{width:16px;height:16px;color:var(--ok);stroke-width:2.5}

/* Scène */
.stage{position:relative;height:600px;perspective:1800px}
.device{position:absolute;left:40px;top:72px;width:600px;transform:rotateY(-16deg) rotateX(8deg) rotateZ(1deg);transform-style:preserve-3d;transform-origin:50% 60%}
.screen{background:#16201F;border-radius:20px;padding:12px;box-shadow:var(--shadow-2),0 0 0 1px rgba(0,0,0,.4)}
.base{height:16px;margin:0 -40px;background:linear-gradient(#D9D2C4,#B8AF9E);border-radius:0 0 24px 24px;box-shadow:0 40px 60px -20px rgba(15,61,58,.45)}
.base::before{content:"";display:block;width:120px;height:6px;margin:0 auto;background:#A79E8D;border-radius:0 0 8px 8px}
.mini{display:grid;grid-template-columns:48px 1fr;height:384px;border-radius:10px;overflow:hidden;background:var(--sable)}
.mini-side{background:var(--fleuve);display:flex;flex-direction:column;align-items:center;gap:16px;padding-top:16px}
.mini-side i{width:20px;height:6px;border-radius:3px;background:rgba(244,237,225,.25)}
.mini-side i.on{background:var(--laterite)}
.mini-main{padding:16px;display:flex;flex-direction:column;gap:12px}
.mini-top{display:flex;justify-content:space-between;align-items:center;font:600 15px var(--f-title);color:var(--fleuve)}
.mini-search{width:120px;height:20px;border-radius:10px;background:#fff}
.mini-kpis{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:8px}
.mini-kpis div{background:#fff;border-radius:10px;padding:8px 12px;display:flex;flex-direction:column}
.mini-kpis small{font-size:10px;color:var(--gris)}
.mini-kpis strong{font-size:17px;color:var(--encre)}
.mini-kpis em{font-style:normal;font-size:10px;color:var(--ok);font-weight:700}
.mini-chart{background:#fff;border-radius:10px;padding:12px;height:112px}
.mini-chart svg{width:100%;height:100%}
.mini-rows{background:#fff;border-radius:10px;padding:4px 12px}
.mini-rows p{display:grid;grid-template-columns:1fr 1fr auto;align-items:center;height:28px;font-size:11px;border-bottom:1px solid var(--sable-200)}
.mini-rows p:last-child{border:0}
.mini-rows .pill{height:18px;font-size:10px;padding:0 8px 0 6px;gap:4px}
.mini-rows .pill::before{width:6px;height:6px}

.float{position:absolute;z-index:2;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;background:#fff;border-radius:var(--r-md);box-shadow:var(--shadow-2);animation:bob 6s ease-in-out infinite}
.float small{display:block;font-size:12px;color:var(--gris)}
.float b{font-size:15px;color:var(--encre)}
.f-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;flex:none}
.f-ico.laterite{background:var(--laterite-100);color:var(--laterite-ink)}
.f-ico.fleuve{background:var(--fleuve);color:var(--sable);--ico-fill:var(--fleuve)}
.f-ico.momo{background:var(--momo);color:#1B1B1B;font:700 11px var(--f-text)}
.ok-ico{color:var(--ok);stroke-width:2.5;margin-left:8px}
.f-order{left:0;top:24px}
.f-momo{right:0;top:232px;animation-delay:-2s}
.f-deliv{left:120px;bottom:24px;animation-delay:-4s}
@keyframes bob{50%{transform:translateY(-8px)}}
.city{position:absolute;display:flex;align-items:center;gap:4px;font:600 12px var(--f-text);letter-spacing:.06em;text-transform:uppercase;color:var(--fleuve);background:var(--sable);padding:4px 8px;border-radius:var(--r-sm)}
.city .ico{width:16px;height:16px;color:var(--laterite)}
.c-bzv{right:24px;top:16px}.c-pnr{left:-8px;bottom:120px}

/* Preuve sociale */
.proof{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:32px;padding-top:40px;padding-bottom:16px;border-top:1px solid var(--sable-300);margin-top:24px}
.proof p{font-size:14px;color:var(--gris);max-width:320px}
.tag{display:inline-block;margin-left:4px;padding:0 8px;border-radius:var(--r-sm);background:var(--sable-200);font-size:12px;font-weight:500}
.brands{display:flex;gap:40px;list-style:none;padding:0;font:600 18px var(--f-title);color:#6B665C;letter-spacing:-.01em}
.brands span{color:var(--laterite);margin-right:4px}

/* Sections */
.sec-head{text-align:center;margin:0 auto 40px;max-width:880px}
.kicker{font:700 13px var(--f-text);letter-spacing:.14em;text-transform:uppercase;color:var(--laterite-ink);margin-bottom:16px}
.kicker.light{color:#E3876F}
h2{font:600 48px/1.08 var(--f-title);letter-spacing:-.005em;color:var(--fleuve)}
.features{padding-top:120px;padding-bottom:120px;position:relative}
.feat-route{display:block;width:100%;height:40px;margin-bottom:-20px;position:relative;z-index:0}
.feat-route path{fill:none;stroke:var(--laterite);stroke-width:2;stroke-dasharray:2 10;stroke-linecap:round}
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;z-index:1}
.feat{position:relative;background:#fff;border-radius:var(--r-lg);padding:32px 24px 24px;box-shadow:var(--shadow-1);display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.feat:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.step{position:absolute;top:24px;right:24px;font:500 13px var(--f-num);color:#8A8478}
.feat-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--fleuve);color:var(--sable);--ico-fill:var(--fleuve)}
.feat-ico .ico{width:24px;height:24px}
.feat h3{font:600 24px var(--f-title);letter-spacing:-.02em;color:var(--fleuve);margin:24px 0 8px}
.feat>p{font-size:15px;color:var(--gris);flex:1}
.viz{margin-top:24px;background:var(--surface-2);border:1px solid var(--sable-200);border-radius:var(--r-md);padding:16px;height:136px}
.viz-orders p{display:flex;justify-content:space-between;align-items:center;height:32px;font-size:13px}
.viz-route svg{width:100%;height:80px}
.r-bg{fill:none;stroke:var(--sable-300);stroke-width:4;stroke-linecap:round}
.r-fg{fill:none;stroke:var(--laterite);stroke-width:4;stroke-linecap:round;stroke-dasharray:150 400}
.r-a{fill:var(--laterite)}.r-b{fill:#fff;stroke:var(--fleuve);stroke-width:3}.r-van{fill:var(--fleuve);stroke:#fff;stroke-width:3}
.viz-route p{display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:var(--fleuve)}
.viz-route .num{color:var(--gris);font-weight:400}
.viz-stock p{display:grid;grid-template-columns:1fr 72px;align-items:center;gap:8px;height:34px;font-size:13px}
.bar{height:8px;border-radius:4px;background:var(--sable-200);overflow:hidden}
.bar i{display:block;height:100%;background:var(--fleuve);border-radius:4px}
.bar.low i{background:var(--laterite)}
.viz-stats{display:flex;align-items:center;gap:16px}
.ring{--p:74;width:96px;height:96px;flex:none;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--laterite) calc(var(--p)*1%),var(--sable-200) 0)}
.ring span{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--surface-2);font-size:17px;font-weight:700;color:var(--fleuve)}
.viz-stats small{display:block;font-size:12px;color:var(--gris)}
.viz-stats b{display:block;white-space:nowrap;font-size:20px;color:var(--encre)}
.viz-stats em{font-style:normal;font-size:12px;color:var(--gris)}

/* Bande paiements */
.pay-band{position:relative;overflow:hidden;background:var(--fleuve);color:var(--sable);padding:104px 0}
.pay-motif{position:absolute;inset:0;opacity:.08}
.pay-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.pay-band h2{color:var(--sable)}
.lead.light{color:#C5D6D1;margin-top:24px}
.pay-cards{list-style:none;padding:0;display:flex;flex-direction:column;gap:16px}
.pay-cards li{display:flex;align-items:center;gap:16px;padding:16px 24px 16px 16px;border-radius:var(--r-md);background:rgba(244,237,225,.06);border:1px solid rgba(244,237,225,.14)}
.pay-cards .pay i{width:48px;height:48px;border-radius:12px;font-size:12px}
.pay-cards div{flex:1}
.pay-cards b{display:block;font-size:17px}
.pay-cards small{color:#A8C1BA;font-size:14px}
.pay-cards>li>.num{font-size:24px;font-weight:700}

/* Citation */
.quote-sec{padding-top:120px;padding-bottom:104px;display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:center}
.q-mark{width:48px;height:48px;fill:var(--laterite)}
.quote blockquote{font:500 32px/1.3 var(--f-title);letter-spacing:0;color:var(--fleuve);margin:16px 0 32px}
.quote figcaption{display:flex;align-items:center;gap:16px;font-size:15px;color:var(--gris)}
.quote figcaption b{color:var(--encre)}
.quote small{display:block;font-size:12px;color:#6B665C}
.avatar{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--laterite-100);color:var(--laterite-ink);font:600 16px var(--f-title)}
.stats{display:grid;gap:16px}
.stats div{display:flex;justify-content:space-between;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--sable-300)}
.stats dt{color:var(--gris)}
.stats dd{font-size:32px;font-weight:700;color:var(--fleuve)}
.fineprint{grid-column:2;margin-top:-48px;font-size:12px;color:#6B665C}

/* Appel final */
.final{padding-bottom:120px}
.final-card{position:relative;overflow:hidden;border-radius:32px;background:var(--laterite-btn);padding:80px 64px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.final-motif{position:absolute;inset:0;opacity:.18;filter:brightness(3)}
.final-card h2{position:relative;color:#fff;font-size:48px}
.final-card .btn{position:relative}

/* Pied de page */
.foot{background:var(--fleuve-900);color:#C5D6D1;padding:80px 0 32px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.foot-grid p{margin-top:16px;max-width:280px}
.foot h4{font:600 13px var(--f-text);letter-spacing:.12em;text-transform:uppercase;color:var(--sable);margin-bottom:16px}
.foot-grid a:not(.logo),.foot-grid div>span{display:block;font-size:15px;line-height:32px}
.foot-grid a:not(.logo):hover{color:#fff}
.foot-route{display:flex;align-items:center;gap:16px;margin-top:64px;font:600 12px var(--f-text);letter-spacing:.1em;text-transform:uppercase;color:#E3876F}
.foot-route svg{flex:1;height:20px}
.foot-route path{fill:none;stroke:#E3876F;stroke-width:1.5;stroke-dasharray:2 8;stroke-linecap:round}
.legal{margin-top:24px;font-size:13px;color:#A8B8B3}

/* Téléphone 390 px */
@media (max-width:900px){
  .wrap{padding:0 16px}
  .links,.nav-cta .ghost{display:none}
  .nav{height:72px}
  .hero-grid{grid-template-columns:1fr;min-height:0;padding-top:8px}
  h1{font-size:44px;margin:16px 0}
  .lead{font-size:17px}
  .cta-row{flex-direction:column;margin:32px 0 16px}
  .btn.lg{justify-content:center}
  .reassure{flex-wrap:wrap;gap:8px 16px}
  .stage{height:400px;margin:16px -16px 0;perspective:1200px}
  .device{left:24px;top:56px;width:560px;transform:scale(.6) rotateY(-14deg) rotateX(8deg);transform-origin:0 0}
  .float{transform:scale(.86);padding:8px 12px 8px 8px}
  .f-order{left:8px;top:0}.f-momo{right:-8px;top:176px}.f-deliv{left:16px;bottom:8px}
  .city{display:none}
  .hero-motif{width:400px;right:-160px}
  .proof{flex-direction:column;align-items:flex-start;gap:16px}
  .brands{flex-wrap:wrap;gap:16px 24px;font-size:16px}
  .features{padding-top:80px;padding-bottom:80px}
  h2,.final-card h2{font-size:32px}
  .sec-head{text-align:left}
  .feat-route{display:none}
  .feat-grid,.pay-grid,.quote-sec,.foot-grid{grid-template-columns:1fr}
  .pay-band{padding:80px 0}.pay-grid{gap:40px}
  .quote-sec{padding-top:80px;padding-bottom:80px;gap:40px}
  .quote blockquote{font-size:24px}
  .fineprint{grid-column:1;margin-top:-24px}
  .final{padding-bottom:80px}
  .final-card{flex-direction:column;align-items:flex-start;padding:48px 24px}
  .foot-route{margin-top:40px}
}