:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
/* Concept : une seule grande idée par écran, très grand type, téléphones qui dépassent du cadre.
   Hero sombre sur tableau noir à la craie, puis pages crème façon Apple, puis retour au tableau noir. */
:root{
  --cream:#FAFAF3; --cream2:#F1F1E6; --white:#FFFFFF;
  --lime:#DDFF66; --lime-deep:#A9C250; --green:#76A012; --green-deep:#5C7D0E;
  --ink:#1B1B1D; --muted:#6B675C; --chalk:#1C1C1E; --chalk2:#2B2B2D;
  --line:rgba(27,27,29,.12); --line-d:rgba(250,250,243,.16);
  --f-body:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-chalk:'Permanent Marker','Segoe Print',cursive;
  --f-mark:'Permanent Marker','Segoe Print',cursive;
  --gut:max(20px,env(safe-area-inset-left,0px));
  --gutr:max(20px,env(safe-area-inset-right,0px));
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--lime-deep);outline-offset:3px;border-radius:8px}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gutr)}
section{scroll-margin-top:72px}
.chalk{font-family:var(--f-mark);font-weight:400;letter-spacing:.04em;text-transform:none;font-size:clamp(20px,2vw,26px);line-height:1.1;color:var(--green);filter:url(#chalk);display:inline-flex;align-items:center;gap:12px}
.chalk::before{content:"";width:30px;height:4px;border-radius:4px;background:currentColor;opacity:.75;transform:rotate(-3deg)}
.dark .chalk,.hero .chalk{color:var(--lime)}
h1,h2,h3,h4,p{margin:0}
h2{font-size:clamp(34px,5vw,68px);font-weight:800;letter-spacing:-.045em;line-height:1.04;text-wrap:balance}
.mark{font-family:var(--f-mark);font-weight:400;font-size:1.04em;letter-spacing:.005em;color:var(--green);background:none;padding:0 .04em;filter:url(#chalk);display:inline-block;transform:rotate(-1.2deg)}
.dark .mark{color:var(--lime)}
.partner .mark{color:var(--ink)}
.sec{padding-block:clamp(84px,12vw,168px)}
.sec-head{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:16px;max-width:1000px}
.sec-head.center{margin:0;text-align:left;align-items:flex-start}
.sec-head p.lead{font-size:clamp(18px,2vw,22px);color:var(--muted);max-width:640px;text-wrap:pretty}
.dark .sec-head p.lead{color:rgba(250,250,243,.7)}

/* reveal */
.js .rv{opacity:0;transform:translateY(30px);transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.js .rv.in{opacity:1;transform:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 16px/1 var(--f-body);padding:17px 26px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;transition:transform .25s,background .25s,box-shadow .25s;white-space:nowrap}@media (hover:hover) and (pointer:fine){
.btn:hover{transform:translateY(-2px)}}
.btn-lime{background:var(--lime);color:var(--ink);box-shadow:0 5px 0 var(--lime-deep)}@media (hover:hover) and (pointer:fine){
.btn-lime:hover{box-shadow:0 7px 0 var(--lime-deep)}}
.btn-ink{background:var(--ink);color:var(--cream);box-shadow:0 5px 0 rgba(27,27,29,.25)}
.btn-ghost{border-color:var(--line-d);color:var(--cream);background:rgba(250,250,243,.06)}@media (hover:hover) and (pointer:fine){
.btn-ghost:hover{background:rgba(250,250,243,.14)}}
.btn-line{border-color:var(--ink);color:var(--ink)}@media (hover:hover) and (pointer:fine){
.btn-line:hover{background:var(--ink);color:var(--cream)}}
.btn svg{width:18px;height:18px}

/* nav */
.nav{position:fixed;z-index:50;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));top:calc(12px + env(safe-area-inset-top,0px));display:flex;justify-content:center;pointer-events:none}
.nav-in{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:28px;width:100%;max-width:1040px;padding:9px 10px 9px 22px;border-radius:999px;background:rgba(250,250,243,.5);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);border:1px solid rgba(27,27,29,.08);box-shadow:0 8px 30px -12px rgba(0,0,0,.35)}
.nav .logo img{height:26px;width:auto}
.nav-links{display:flex;gap:28px;font-size:14.5px;font-weight:500;color:#4a4638}
.nav-links a{transition:color .2s}@media (hover:hover) and (pointer:fine){.nav-links a:hover{color:var(--ink)}}
.nav .btn{padding:12px 20px;font-size:14.5px;box-shadow:0 3px 0 var(--lime-deep)}

/* phone */
.phone{--w:320px;width:var(--w);padding:calc(var(--w)*.03);background:#131316;border-radius:calc(var(--w)*.15);position:relative;box-shadow:inset 0 0 0 1.5px #3A3A3D,0 60px 90px -34px rgba(0,0,0,.55),0 20px 40px -20px rgba(0,0,0,.4);flex:none}
.phone::before{content:"";position:absolute;z-index:3;top:calc(var(--w)*.05);left:50%;width:28%;height:calc(var(--w)*.062);transform:translateX(-50%);background:#000;border-radius:99px}
.scr{position:relative;aspect-ratio:866/1662;border-radius:calc(var(--w)*.122);overflow:hidden;background:var(--cream)}
.scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* hero */
.hero{position:relative;background:var(--chalk);color:var(--cream);overflow:hidden;isolation:isolate}
/* Pour une vraie photo en fond : --hero-photo:url(assets/hero.jpg); */
.hero-bg{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(16,14,10,.86) 0%,rgba(16,14,10,.62) 38%,rgba(16,14,10,.18) 78%,rgba(16,14,10,.1) 100%),linear-gradient(0deg,rgba(16,14,10,.5),transparent 35%),url(/__l5e/assets-v1/c864a832-3de3-4440-bd42-dd7e7892aa9a/hero-runner-city.webp) 62% 30%/cover;animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.06)}}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:20px;align-items:end;padding-top:clamp(104px,11vw,128px)}
.hero-copy{padding-bottom:clamp(48px,6vw,80px);display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.hero h1{font-size:clamp(58px,8.4vw,112px);font-weight:700;letter-spacing:-.05em;line-height:.9;display:flex;flex-direction:column}
.hero h1 span:nth-child(3){color:var(--lime)}
.hero .sub{font-size:clamp(21px,2.5vw,30px);font-weight:600;letter-spacing:-.02em;line-height:1.2;max-width:520px;text-wrap:balance}
.hero .lead{color:rgba(250,250,243,.72);max-width:500px;font-size:17px}
.hero-cta{display:flex;flex-wrap:wrap;gap:18px 22px;align-items:center;margin-top:6px}
.qr{display:flex;align-items:center;gap:16px;background:rgba(250,250,243,.96);color:var(--ink);padding:12px 20px 12px 12px;border-radius:24px;box-shadow:0 6px 0 rgba(0,0,0,.28)}
.qr-box{position:relative;width:96px;height:96px;border-radius:14px;background:#fff;padding:8px;overflow:hidden;flex:none}
.qr-box canvas{width:100%;height:100%;display:block;image-rendering:pixelated}
.qr-box.soon canvas{filter:blur(2.4px);opacity:.55}
.qr-box.soon::after{content:"Bientôt";position:absolute;inset:0;display:grid;place-items:center;font:600 13px var(--f-body);color:var(--ink);letter-spacing:.02em}
.qr-t strong{display:block;font-size:15px;line-height:1.25}
.qr-t span{font-size:13px;color:var(--muted);line-height:1.3;display:block;margin-top:3px}
.stores{display:flex;flex-direction:column;gap:10px}
.store{display:flex;align-items:center;gap:10px;padding:10px 18px 10px 14px;border-radius:14px;background:var(--ink);color:var(--cream);border:1px solid rgba(250,250,243,.2);font-size:14px;line-height:1.1;min-width:160px}
.store small{display:block;font-size:10.5px;opacity:.7;font-weight:400}
.store b{font-weight:600;font-size:15px}
.store svg{width:20px;height:20px;flex:none}
.store.soon{opacity:.85;cursor:default}
.how{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:16px;color:var(--cream);padding:6px 2px}
.how i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--lime);color:var(--ink);font-style:normal;animation:nudge 2.2s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.hero-phone{position:relative;display:flex;justify-content:center;margin-bottom:-230px;padding-top:20px}
.hero-phone .phone{--w:clamp(270px,27vw,340px);transform:rotate(3deg) translateY(0);animation:rise 1.2s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:rotate(6deg) translateY(80px)}to{opacity:1;transform:rotate(3deg)}}
.chip{position:absolute;z-index:4;background:rgba(250,250,243,.95);color:var(--ink);border-radius:22px;padding:13px 18px 13px 14px;box-shadow:0 18px 40px -14px rgba(0,0,0,.5);display:flex;align-items:center;gap:12px;font-size:14px;line-height:1.25;animation:float 6s ease-in-out infinite}
.chip b{display:block;font-size:15px}
.chip span{color:var(--muted);font-size:12.5px}
.chip .dot{width:38px;height:38px;border-radius:50%;background:var(--lime);display:grid;place-items:center;flex:none}
.chip .dot svg{width:20px;height:20px}
.chip.a{left:-6%;top:30%}
.chip.b{right:-4%;bottom:330px;animation-delay:-3s}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}

/* steps */
.steps{background:var(--cream)}
.step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(48px,6vw,80px)}
.step{background:var(--white);border:1px solid var(--line);border-radius:36px;padding:14px 14px 34px;display:flex;flex-direction:column;gap:26px;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}@media (hover:hover) and (pointer:fine){
.step:hover{transform:translateY(-8px);box-shadow:0 34px 60px -34px rgba(27,27,29,.4)}}
.step-v{min-height:250px;padding:18px 0;border-radius:26px;background:var(--cream);display:grid;place-items:center;overflow:hidden;position:relative}
.step-v img{width:94%;height:auto;mix-blend-mode:multiply}
.step-t{padding:0 20px;display:flex;flex-direction:column;gap:12px}
.num{width:46px;height:46px;border-radius:50%;background:var(--ink);color:var(--lime);display:grid;place-items:center;font:400 24px/1 var(--f-mark)}
.step h3{font-size:clamp(24px,2.4vw,30px);font-weight:600;letter-spacing:-.025em;line-height:1.12}
.step p{color:var(--muted);font-size:16.5px}
.apps{display:flex;flex-direction:column;gap:10px;width:84%}
.apps div{display:flex;align-items:center;gap:12px;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:12px 16px;font-weight:500;font-size:15px;box-shadow:0 8px 20px -14px rgba(0,0,0,.3)}
.apps div i{width:30px;height:30px;border-radius:50%;background:var(--cream2);display:grid;place-items:center;font-style:normal;flex:none}
.apps div i svg{width:16px;height:16px}
.apps div em{margin-left:auto;width:22px;height:22px;border-radius:50%;background:var(--lime);display:grid;place-items:center;flex:none}
.apps div em svg{width:12px;height:12px}

/* features */
.feat-sec{background:var(--cream)}
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px);margin-top:clamp(40px,5vw,70px)}
.feat{min-height:82vh;display:flex;align-items:center}
.feat-txt{display:flex;flex-direction:column;gap:16px;max-width:460px;transition:opacity .5s;opacity:.28}
.feat.on .feat-txt{opacity:1}
.feat h3{font-size:clamp(32px,4.2vw,56px);font-weight:700;letter-spacing:-.04em;line-height:1.03;text-wrap:balance}
.feat p{color:var(--muted);font-size:clamp(17px,1.6vw,20px);text-wrap:pretty}
.feat .mob{display:none}
.feat-stick{position:relative}
.stick-in{position:sticky;top:max(92px,calc(50vh - 340px));display:flex;justify-content:center;padding-block:10px}
.stick-in .phone{--w:clamp(290px,30vw,350px);z-index:1}
.glow{position:absolute;z-index:0;width:min(520px,92%);aspect-ratio:1;border-radius:50%;left:50%;top:50%;translate:-50% -50%;background:radial-gradient(circle,var(--lime) 0,rgba(221,255,102,0) 68%);opacity:.75}
.scr .layer{opacity:0;transition:opacity .6s ease}
.scr .layer.on{opacity:1}

/* regularity band */
.band{padding-bottom:clamp(60px,8vw,120px);background:var(--cream)}
.band-card{position:relative;overflow:hidden;border-radius:clamp(30px,4vw,56px);background:var(--chalk) url(assets/chalk.webp) center/cover;color:var(--cream);display:grid;grid-template-columns:1.1fr .9fr;gap:30px;padding:clamp(34px,6vw,88px) clamp(26px,6vw,88px) 0}
.band-copy{display:flex;flex-direction:column;gap:22px;padding-bottom:clamp(30px,6vw,88px);align-self:center}
.band h2{font-size:clamp(34px,5vw,64px)}
.band p{color:rgba(250,250,243,.75);max-width:520px;font-size:clamp(17px,1.6vw,20px)}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.pills span{border:1px solid var(--line-d);background:rgba(250,250,243,.07);border-radius:999px;padding:10px 18px;font-size:15px;font-weight:500}
.band-phone{display:flex;justify-content:center;align-items:flex-end;margin-bottom:-60px}
.band-phone .phone{--w:clamp(250px,25vw,310px);transform:rotate(-3deg)}

/* rewards */
.rewards{background:var(--chalk) url(assets/chalk.webp) center/cover;color:var(--cream);overflow:hidden}
.marquee{margin-top:clamp(48px,6vw,80px);overflow:hidden;border-block:1px solid var(--line-d);padding-block:26px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marq 38s linear infinite}@media (hover:hover) and (pointer:fine){
.marquee:hover .marquee-track{animation-play-state:paused}}
.marquee-track span{font-size:clamp(26px,3.4vw,44px);font-weight:700;letter-spacing:-.03em;padding-inline:clamp(26px,3.4vw,48px);display:flex;align-items:center;gap:clamp(26px,3.4vw,48px);white-space:nowrap;color:rgba(250,250,243,.9)}
.marquee-track span::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--lime);flex:none}
.marquee-track span.soon{font-family:var(--f-chalk);font-weight:400;color:var(--lime);letter-spacing:.04em}
@keyframes marq{to{transform:translateX(-50%)}}
.cats{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:clamp(40px,5vw,60px)}
.cats span{padding:11px 22px;border-radius:999px;border:1px solid var(--line-d);font-weight:500;font-size:15.5px}
.cats span:first-child{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr));gap:18px;margin-top:28px}
.offer{background:var(--chalk2);border:1px solid var(--line-d);border-radius:30px;padding:10px 10px 22px;display:flex;flex-direction:column;gap:18px;transition:transform .5s cubic-bezier(.2,.7,.2,1),background .3s}@media (hover:hover) and (pointer:fine){
.offer:hover{transform:translateY(-8px);background:#3b3a35}}
.offer img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:22px;background:#fff}
.offer div{padding:0 12px}
.offer small{font:400 14px var(--f-chalk);letter-spacing:.08em;text-transform:uppercase;color:var(--lime)}
.offer h4{font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.2;margin-top:2px}
.note{text-align:center;margin-top:30px;font-size:14px;color:rgba(250,250,243,.5)}

/* partners */
.partner{background:var(--lime);color:var(--ink)}
.partner-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(30px,6vw,90px);align-items:end}
.partner h2{font-size:clamp(40px,7.2vw,104px);letter-spacing:-.05em;line-height:.96}
.partner .sub{font-family:var(--f-chalk);font-size:clamp(26px,3vw,38px);letter-spacing:.03em;margin-top:18px;opacity:.75}
.partner-side{display:flex;flex-direction:column;gap:22px}
.partner-side p{font-size:18px;font-weight:500;text-wrap:pretty}
.partner-pts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.partner-pts li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.4}
.partner-pts li::before{content:"";width:22px;height:22px;border-radius:50%;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DDFF66' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat;flex:none;margin-top:2px}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* join */
.join{position:relative;background:var(--chalk) url(assets/chalk.webp) center/cover;color:var(--cream);text-align:center;overflow:hidden}
.join h2{font-size:clamp(46px,9vw,128px);letter-spacing:-.05em;line-height:.95}
.join-in{display:flex;flex-direction:column;align-items:center;gap:36px}
.join .qr{padding:16px 26px 16px 16px;gap:22px;text-align:left}
.join .qr-box{width:150px;height:150px;padding:11px;border-radius:18px}
.join .qr-t strong{font-size:19px}.join .qr-t span{font-size:14.5px}
.join .stores{flex-direction:row;flex-wrap:wrap;justify-content:center}

/* faq */
.faq{background:var(--cream)}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,6vw,100px);align-items:start}
.faq h2{font-size:clamp(36px,5vw,64px)}
.faq-head{display:flex;flex-direction:column;gap:18px;position:sticky;top:110px}
.faq-head p{color:var(--muted);max-width:340px}
details{border-bottom:1px solid var(--line)}
details:first-child{border-top:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 4px;font-size:clamp(18px,1.8vw,22px);font-weight:600;letter-spacing:-.02em}
summary::-webkit-details-marker{display:none}
summary i{width:34px;height:34px;border-radius:50%;background:var(--cream2);display:grid;place-items:center;flex:none;transition:transform .35s,background .3s}
summary i::before{content:"";width:12px;height:2px;background:var(--ink);border-radius:2px;box-shadow:0 0 0 0 var(--ink)}
summary i::after{content:"";position:absolute;width:2px;height:12px;background:var(--ink);border-radius:2px;transition:opacity .3s}
summary i{position:relative}
details[open] summary i{transform:rotate(180deg);background:var(--lime)}
details[open] summary i::after{opacity:0}
details p{padding:0 56px 28px 4px;color:var(--muted);font-size:17px;text-wrap:pretty}

/* blog */
.blog{background:var(--cream2)}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px;margin-top:clamp(36px,5vw,60px)}
.post{background:var(--white);border:1px solid var(--line);border-radius:30px;padding:12px 12px 28px;display:flex;flex-direction:column;gap:20px}
.post-img{aspect-ratio:16/10;border-radius:22px;background:var(--chalk) url(assets/chalk.webp) center/cover;display:flex;align-items:flex-end;padding:16px}
.post-img b{background:var(--lime);border-radius:999px;font:600 12px var(--f-body);padding:6px 12px;letter-spacing:.03em}
.post h4{font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.22;padding:0 14px}
.post p{padding:0 14px;color:var(--muted);font-size:15.5px;margin-top:-8px}
.blog-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
.blog h2{font-size:clamp(34px,4.6vw,60px)}

/* contact */
.contact{background:var(--cream2);padding-top:0}
.contact-card{background:var(--ink);color:var(--cream);border-radius:clamp(30px,4vw,52px);padding:clamp(34px,6vw,80px);display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
.contact h2{font-size:clamp(34px,4.6vw,60px)}
.contact p{color:rgba(250,250,243,.72);margin-top:14px;max-width:460px}
.mail{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.mail code{font:500 20px var(--f-body);background:rgba(250,250,243,.08);border:1px solid var(--line-d);padding:16px 22px;border-radius:18px;user-select:all;word-break:break-all}

/* footer */
footer{background:var(--ink);color:var(--cream);padding-block:clamp(56px,7vw,90px) calc(36px + env(safe-area-inset-bottom,0px))}
.foot{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px}
.foot img{height:34px;width:auto}
.foot p{color:rgba(250,250,243,.55);font-size:15px;margin-top:16px;max-width:280px}
.foot h5{margin:0 0 16px;font:400 15px var(--f-chalk);letter-spacing:.1em;text-transform:uppercase;color:var(--lime)}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;font-size:15.5px}
.foot ul a{color:rgba(250,250,243,.8)}@media (hover:hover) and (pointer:fine){.foot ul a:hover{color:var(--cream)}}
.legal{margin-top:56px;padding-top:26px;border-top:1px solid var(--line-d);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:rgba(250,250,243,.5)}

/* step 1 mockup */
.step-grid{grid-template-columns:repeat(2,1fr)}
.step-wide{grid-column:1/-1;flex-direction:row;align-items:center;gap:clamp(20px,4vw,60px);padding:clamp(28px,4vw,60px);overflow:hidden}
.step-wide .step-t{flex:0 0 36%;padding:0;gap:16px}
.step-wide h3{font-size:clamp(30px,3.6vw,48px);letter-spacing:-.035em}
.step-wide p{font-size:clamp(17px,1.5vw,19px)}
.step-wide .fine{font-size:14.5px;color:var(--muted);opacity:.85}
.mock{position:relative;flex:1;min-width:0;min-height:640px;display:grid;place-items:center}
.mock-bg{position:absolute;width:72%;height:84%;left:50%;top:50%;translate:-44% -50%;background:var(--lime);border-radius:clamp(34px,4vw,56px);box-shadow:0 14px 0 var(--lime-deep)}
.mock .phone{--w:clamp(230px,23vw,290px);transform:rotate(-8deg);position:relative;z-index:2}
.pill{position:absolute;z-index:3;display:flex;align-items:center;gap:12px;background:var(--white);border-radius:999px;padding:12px 26px 12px 16px;box-shadow:0 20px 40px -18px rgba(27,27,29,.45);font-size:clamp(14px,1.4vw,19px);color:var(--ink);animation:float 7s ease-in-out infinite}
.pill img{height:34px;width:auto;flex:none;border-radius:8px}
.pill img.wm{height:26px;border-radius:0}
.pill b{font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.pill.p-fitbit,.pill.p-garmin{padding:15px 28px}
.p-strava{left:1%;top:12%}
.p-apple{left:-1%;top:60%;animation-delay:-2s}
.p-fitbit{left:7%;top:76%;animation-delay:-4s}
.p-garmin{right:1%;top:30%;animation-delay:-1s}
.p-samsung{right:3%;top:44%;animation-delay:-3s}
.badge{position:absolute;z-index:3;right:6%;top:6%;display:flex;align-items:center;gap:10px;background:var(--ink);color:var(--lime);border-radius:22px;padding:12px 20px 12px 14px;font:400 26px/1 var(--f-mark);box-shadow:0 18px 30px -14px rgba(0,0,0,.5);transform:rotate(6deg)}
.badge img{width:38px;height:38px;border-radius:50%}
.fcard{position:absolute;z-index:3;right:-1%;bottom:5%;width:min(46%,320px);background:var(--white);border-radius:22px;padding:6px;box-shadow:0 24px 44px -18px rgba(27,27,29,.5);transform:rotate(-3deg)}
.fcard img{width:100%;height:auto;border-radius:16px}
@media (max-width:1000px){
  .step-grid{grid-template-columns:1fr}
  .step-wide{flex-direction:column;align-items:stretch}
  .step-wide .step-t{flex:none}
  .mock{min-height:560px}
  .mock .phone{--w:min(220px,56vw)}
  .pill{padding:9px 16px 9px 10px;gap:8px;font-size:13.5px}
  .pill img{height:24px}.pill img.wm{height:18px}
  .pill.p-fitbit,.pill.p-garmin{padding:11px 18px}
  .badge{font-size:20px;padding:9px 14px 9px 10px}.badge img{width:28px;height:28px}
  .fcard{width:52%;bottom:2%}
}
@media (prefers-reduced-motion:reduce){.pill{animation:none}}

/* responsive */
@media (max-width:1000px){
  .nav-links{display:none}
  .hero-grid{grid-template-columns:1fr;padding-top:112px}
  .hero-copy{padding-bottom:30px}
  .hero-phone{margin-bottom:-210px}
  .chip.a{left:2%}.chip.b{right:2%;bottom:260px}
  .step-grid{grid-template-columns:1fr}
  .step-v{height:230px}
  .feat-grid{grid-template-columns:1fr}
  .feat-stick{display:none}
  .feat{min-height:0;padding-block:34px}
  .feat-txt{opacity:1;max-width:none}
  .feat{flex-direction:column;align-items:flex-start;gap:34px}
  .feat .mob{display:flex;justify-content:center;width:100%}
  .feat .mob .phone{--w:min(290px,74vw)}
  .band-card,.partner-grid,.faq-grid,.contact-card{grid-template-columns:1fr}
  .band-phone{margin-bottom:-90px}
  .faq-head{position:static}
  .foot{grid-template-columns:1fr 1fr}
  .foot>div:first-child{grid-column:1/-1}
}
@media (max-width:560px){
  body{font-size:16px}
  .nav-in{padding-left:18px}
  .hero .lead{font-size:16px}
  .hero-cta{flex-direction:column;align-items:flex-start}
  .qr{width:100%}
  .chip{padding:10px 14px 10px 10px;font-size:13px;border-radius:18px}
  .chip .dot{width:30px;height:30px}
  .chip.a{top:20%;left:0}
  .chip.b{bottom:230px;right:0}
  .join .qr{flex-direction:column;text-align:center;padding:20px}
  details p{padding-right:8px}
  .foot{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
}

/* ===== v3 : hero animé, étapes illustrées, bento fonctionnalités ===== */
.hero-visual{position:relative;display:flex;justify-content:center;margin-bottom:clamp(-150px,-9vw,-60px);padding-top:20px}
.hv-card{width:min(100%,clamp(330px,40vw,560px));aspect-ratio:1500/1650;border-radius:clamp(30px,4vw,52px);overflow:hidden;background:var(--cream);box-shadow:0 50px 90px -40px rgba(0,0,0,.7),0 0 0 1px rgba(250,250,243,.12);transform:rotate(2deg);animation:rise 1.2s cubic-bezier(.2,.7,.2,1) both}
.hv-card video{width:100%;height:100%;display:block;object-fit:cover}
.hero-grid{align-items:center}
.hero-copy{padding-bottom:clamp(30px,4vw,60px)}
.step-grid.s3{grid-template-columns:repeat(3,1fr)}
.steps{padding-bottom:clamp(40px,6vw,90px)}
.feat-sec{padding-top:clamp(40px,6vw,90px)}
.step-grid.s3 .step{padding-bottom:30px}
.step-grid.s3 .step-v{min-height:0;padding:0;display:block;border-radius:26px;overflow:hidden;background:var(--cream)}
.step-grid.s3 .step-v img{width:100%;height:auto;mix-blend-mode:normal;aspect-ratio:4/3;object-fit:cover}
.step .fine{font-size:14px;color:var(--muted);opacity:.85}
.bn{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;margin-top:clamp(44px,5vw,70px);padding-bottom:clamp(60px,8vw,110px)}
.bn-c{position:relative;border-radius:clamp(26px,3vw,36px);background:var(--white);overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--line);transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}@media (hover:hover) and (pointer:fine){
.bn-c:hover{transform:translateY(-6px);box-shadow:0 34px 60px -34px rgba(27,27,29,.4)}}
.bn-t{padding:clamp(24px,3vw,36px) clamp(24px,3vw,36px) 24px}
.bn-n{font:400 18px var(--f-chalk);letter-spacing:.1em;color:var(--lime-deep)}
.bn-c h3{font-size:clamp(24px,2.5vw,30px);line-height:1.08;letter-spacing:-.03em;font-weight:700;margin:6px 0 10px;text-wrap:balance}
.bn-c p{font-size:16px;line-height:1.5;color:var(--muted);max-width:430px}
.bn-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.bn-tags span{font-size:13px;font-weight:600;background:var(--white);border:1px solid var(--line);border-radius:99px;padding:6px 12px;color:var(--ink)}
.bn-c>img{width:calc(100% - 28px);height:auto;margin:auto 14px 14px;border-radius:24px;background:var(--cream)}
.bn-crop{margin:auto 14px 14px;aspect-ratio:4/3;overflow:hidden;border-radius:24px;background:var(--cream)}
.bn-crop img{width:100%;height:100%;object-fit:cover}
.bn-a{grid-column:span 7;background:linear-gradient(160deg,#EBFFA0,#F6FFD6)}
.bn-b{grid-column:span 5;background:var(--chalk);color:var(--cream);border-color:var(--chalk)}
.bn-b p{color:#C9C6BA}.bn-b .bn-n{color:var(--lime)}.bn-b .bn-tags span{background:#33332f;border-color:#44443f;color:#fff}
.bn-c3,.bn-d,.bn-e{grid-column:span 4}
.bn-d{background:var(--lime);border-color:var(--lime)}.bn-d p{color:#3d4a12}.bn-d .bn-n{color:var(--ink)}
@media (max-width:1000px){
  .hero-visual{margin-bottom:-80px}
  .step-grid.s3{grid-template-columns:1fr}
  .bn-a,.bn-b,.bn-c3,.bn-d,.bn-e{grid-column:span 12}
}

/* ===== v4 : harmonie globale ===== */
html{scroll-padding-top:80px}
body{letter-spacing:-.005em}
.progress{position:fixed;z-index:60;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--lime),var(--lime-deep))}
.btn{letter-spacing:-.01em;font-weight:700}
.nav-links a{position:relative}.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;border-radius:3px;background:var(--lime);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s}@media (hover:hover) and (pointer:fine){.nav-links a:hover::after{transform:scaleX(1)}}
.hero h1{font-weight:800;letter-spacing:-.055em}
.hero .sub{font-weight:700}
.hero-grid{grid-template-columns:1.05fr .95fr;align-items:center;padding-bottom:clamp(48px,6vw,80px)}
.hero-copy{padding-bottom:0}
.hero-visual{margin-bottom:0;padding-top:0}
.hv-card{width:min(100%,clamp(330px,38vw,540px));aspect-ratio:1500/1560;transform:rotate(1.5deg);box-shadow:0 60px 100px -40px rgba(0,0,0,.75),0 0 0 1px rgba(250,250,243,.18)}
.hv-card video{transform:scale(1.1);transform-origin:50% 48%}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(0deg,var(--cream),transparent);z-index:-1;pointer-events:none}
.sec-head{margin-bottom:0}
.steps .sec-head h2,.feat-sec .sec-head h2,.rewards .sec-head h2{max-width:16ch}
.steps .sec-head h2{max-width:22ch}
.step{position:relative}
.step-grid.s3 .step-v{aspect-ratio:4/3}
.num{font-family:var(--f-mark);box-shadow:0 4px 0 var(--lime-deep);background:var(--ink)}
.step-grid.s3 .step::before{content:"";position:absolute;z-index:2;top:50%;right:-17px;width:14px;height:14px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 5px var(--cream);display:none}
/* bento dynamique */
.bn{perspective:1400px}
.bn-c{--mx:50%;--my:50%;transform-style:preserve-3d;will-change:transform;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .5s,border-color .4s}
.bn-c::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;background:radial-gradient(520px circle at var(--mx) var(--my),rgba(221,255,102,.55),transparent 55%);opacity:0;transition:opacity .4s;mix-blend-mode:soft-light}
.bn-d::before{background:radial-gradient(520px circle at var(--mx) var(--my),rgba(255,255,255,.6),transparent 55%);mix-blend-mode:overlay}@media (hover:hover) and (pointer:fine){
.bn-c:hover::before{opacity:1}}
.bn-c::after{content:"";position:absolute;z-index:3;top:0;bottom:0;width:60%;left:-140%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-14deg);pointer-events:none}@media (hover:hover) and (pointer:fine){
.bn-c:hover::after{left:130%;transition:left .9s cubic-bezier(.2,.7,.2,1)}}@media (hover:hover) and (pointer:fine){
.bn-c:hover{box-shadow:0 44px 70px -36px rgba(27,27,29,.5);border-color:var(--lime-deep)}}
.bn-c>img,.bn-crop img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}@media (hover:hover) and (pointer:fine){
.bn-c:hover>img,.bn-c:hover .bn-crop img{transform:scale(1.045) translate3d(var(--px,0),var(--py,0),0)}}
.bn-t{position:relative;z-index:2}
.bn-n{font-family:var(--f-mark);font-size:clamp(46px,5vw,72px);line-height:.9;color:transparent;-webkit-text-stroke:2px var(--lime-deep);display:block;margin-bottom:4px;filter:url(#chalk);opacity:.9}
.bn-b .bn-n{-webkit-text-stroke-color:var(--lime)}
.bn-d .bn-n{-webkit-text-stroke-color:var(--ink)}
.bn-c h3{font-weight:800;letter-spacing:-.035em}
.bn-a{background:linear-gradient(160deg,#EBFFA0,#F9FFE0 70%)}
.bn-b{display:flex}
.bn-b .bn-crop{flex:1;aspect-ratio:auto;min-height:260px}
.bn-b .bn-crop img{object-position:50% 60%}
.band h2{font-size:clamp(30px,3.7vw,54px)}
.band-card{grid-template-columns:.8fr 1.2fr}
.band-vis{margin:-30px -30px -30px -10px}
.bn-a>img{background:transparent;border-radius:0;width:calc(100% - 20px);margin:auto 10px 6px}
.bn-tags span{transition:transform .3s,background .3s}@media (hover:hover) and (pointer:fine){.bn-c:hover .bn-tags span{transform:translateY(-3px)}}
.bn-c:nth-child(1) .bn-tags span:nth-child(2),.bn-c:nth-child(2) .bn-tags span:nth-child(2){transition-delay:.05s}
/* bandeau */
.band-card{grid-template-columns:.9fr 1.1fr;padding:clamp(34px,5vw,72px) clamp(26px,5vw,72px)}
.band-vis{display:flex;align-items:center;justify-content:center;margin:-20px -10px -20px 0}
.band-vis img{width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45));animation:float 8s ease-in-out infinite}
.band h2{font-weight:800}
/* récompenses compact */
.rewards{padding-block:clamp(36px,4.6vw,64px)}
.rewards .marquee{margin-top:clamp(24px,3.2vw,40px);padding-block:22px}
.marquee-track span.lg{padding-inline:clamp(34px,4.4vw,64px);gap:0}
.marquee-track span.lg::after{display:none}
.marquee-track span.lg img{height:36px;width:auto;max-width:none;opacity:.92;transition:opacity .3s,transform .3s}@media (hover:hover) and (pointer:fine){
.marquee-track span.lg:hover img{opacity:1;transform:scale(1.06)}}
.marquee-track span.lg+span.lg::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--lime);margin-right:clamp(34px,4.4vw,64px);flex:none}
.marquee-track span.soon{font-size:clamp(22px,2.6vw,32px)}
/* partenaires */
.partner h2{font-size:clamp(38px,6vw,86px);font-weight:800;letter-spacing:-.05em;line-height:1}
.partner-grid{align-items:center}
.partner-side p{font-size:clamp(20px,2vw,26px);font-weight:500;line-height:1.35}
.partner-side p strong{font-weight:800;display:block;margin-top:10px}
/* faq réponse marque */
details .ans{padding:0 56px 28px 4px;color:var(--muted);font-size:17px}
details .ans p{padding:0;margin:0 0 14px}
details .ans ol{margin:0 0 14px;padding:0;list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:10px}
details .ans li{counter-increment:s;display:flex;gap:12px;align-items:flex-start}
details .ans li::before{content:counter(s);flex:none;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--lime);display:grid;place-items:center;font:400 14px var(--f-mark);margin-top:1px}
details .ans b{color:var(--ink)}
summary{font-weight:700}
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr}
  .hv-card{width:min(100%,460px)}
  .band-card{grid-template-columns:1fr}
  .band-vis{margin:10px 0 0}
  details .ans{padding-right:8px}
}
@media (prefers-reduced-motion:reduce){.hero-bg,.band-vis img{animation:none!important}.bn-c::after{display:none}}

/* v5 : vert lime unique, hero sur photo, sans tags */
:root{--green:#DDFF66}
.chalk,.mark{color:var(--lime);-webkit-text-stroke:.09em var(--ink);paint-order:stroke fill;text-shadow:0 .06em 0 var(--ink)}
.chalk{-webkit-text-stroke-width:3.5px;text-shadow:0 1.5px 0 var(--ink)}
.chalk::before{background:var(--lime);opacity:1;box-shadow:0 0 0 2px var(--ink);height:5px}
.dark .chalk,.hero .chalk,.dark .mark,.hero .mark{-webkit-text-stroke:0;text-shadow:none}
.dark .chalk::before,.hero .chalk::before{box-shadow:none}
.partner .mark{color:var(--ink);-webkit-text-stroke:0;text-shadow:none}
.bn-n{color:var(--lime);-webkit-text-stroke:2px var(--ink)}
.bn-b .bn-n{-webkit-text-stroke:0}
.bn-d .bn-n{color:transparent;-webkit-text-stroke:2px var(--ink)}@media (hover:hover) and (pointer:fine){
.bn-c:hover{border-color:var(--lime)}}
:focus-visible{outline-color:var(--lime)}
.hero-grid{grid-template-columns:1fr 1fr}
.hero-visual{display:flex;justify-content:center}
.duo{position:relative;width:min(100%,560px);aspect-ratio:1/1.08}
.duo .phone{--w:clamp(210px,23vw,300px);position:absolute;box-shadow:inset 0 0 0 1.5px #4a463b,0 50px 80px -30px rgba(0,0,0,.75),0 18px 30px -16px rgba(0,0,0,.6);will-change:transform}
.duo .ph-back{right:0;top:0;transform:rotate(6deg);animation:duoin 1.1s .15s cubic-bezier(.2,.7,.2,1) both,fl1 7s 1.3s ease-in-out infinite}
.duo .ph-front{left:2%;bottom:0;transform:rotate(-4deg);z-index:2;animation:duoin 1.1s .35s cubic-bezier(.2,.7,.2,1) both,fl2 6s 1.5s ease-in-out infinite}
@keyframes duoin{from{opacity:0;translate:0 70px}to{opacity:1;translate:0 0}}
@keyframes fl1{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes fl2{0%,100%{translate:0 0}50%{translate:0 10px}}
@media (max-width:1000px){.hero-grid{grid-template-columns:1fr}.duo{width:min(100%,460px);margin-inline:auto}.duo .phone{--w:clamp(170px,42vw,240px)}}
@media (prefers-reduced-motion:reduce){.duo .phone{animation:none!important}}

/* v6 : sans contour noir, motion live sur photo */
.chalk,.mark{-webkit-text-stroke:0!important;paint-order:normal;text-shadow:0 2px 0 rgba(120,150,20,.55),0 0 18px rgba(221,255,102,.55)}
.chalk::before{box-shadow:none;height:4px}
.bn-n{color:var(--ink);-webkit-text-stroke:0;text-shadow:0 3px 0 rgba(120,150,20,.5)}
.bn-b .bn-n{color:#F3F1E6;text-shadow:none}
.bn-d .bn-n{color:var(--ink);-webkit-text-stroke:0}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,rgba(10,9,6,.78) 0%,rgba(10,9,6,.45) 22%,transparent 55%);pointer-events:none}
.duo .phone{box-shadow:inset 0 0 0 1.5px #4a463b,-40px 50px 70px -20px rgba(0,0,0,.7),-14px 18px 28px -12px rgba(0,0,0,.6)}
.duo .ph-front .scr{overflow:hidden}
.act{position:absolute;z-index:3;left:-10%;display:flex;align-items:center;gap:10px;padding:9px 14px 9px 9px;border-radius:18px;background:rgba(22,20,15,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(250,250,243,.16);color:var(--cream);box-shadow:-18px 20px 34px -14px rgba(0,0,0,.6);opacity:0;white-space:nowrap}
.act img{width:36px;height:36px;border-radius:10px}
.act b{display:block;font-size:14px;line-height:1.15}.act small{font-size:11.5px;color:#bdb9aa}
.act em{font-style:normal;font-weight:800;font-size:15px;color:var(--lime);margin-left:6px}
.act.a1{top:22%;animation:actin 9s 1.6s infinite}
.act.a2{top:34%;animation:actin 9s 2.6s infinite}
.act.a3{top:46%;animation:actin 9s 3.6s infinite}
@keyframes actin{0%{opacity:0;transform:translateX(-40px) scale(.94)}6%,15%{opacity:1;transform:none}22%{opacity:0;transform:translateX(150px) scale(.6)}100%{opacity:0}}
.pop{position:absolute;z-index:4;left:52%;top:33%;font-weight:800;font-size:calc(var(--w)*.075);color:var(--ink);background:var(--lime);padding:.2em .6em;border-radius:99px;opacity:0;box-shadow:0 8px 18px -6px rgba(0,0,0,.5)}
.pop.p1{animation:pop 9s 2.4s infinite}.pop.p2{animation:pop 9s 3.4s infinite}.pop.p3{animation:pop 9s 4.4s infinite}
@keyframes pop{0%{opacity:0;transform:translateY(10px) scale(.7)}5%{opacity:1;transform:none}16%{opacity:1;transform:translateY(-26px)}22%,100%{opacity:0;transform:translateY(-44px)}}
@media (max-width:1000px){.act{left:0;transform-origin:left}.act.a1{top:12%}.act.a2{top:22%}.act.a3{top:32%}}
@media (prefers-reduced-motion:reduce){.act,.pop{display:none}}
/* ===== Refonte premium ===== */
/* Étiquettes de section façon pastille */
.chalk{filter:none;font-family:var(--f-mark);font-variant:small-caps;text-transform:lowercase;font-size:clamp(17px,1.5vw,21px);letter-spacing:.02em;color:var(--ink)!important;background:var(--lime);border:1.5px solid var(--lime-deep);border-radius:999px;padding:7px 22px 9px;box-shadow:4px 5px 0 rgba(27,27,29,.22);gap:0;line-height:1}
.chalk::before{display:none}
.dark .chalk{box-shadow:4px 5px 0 rgba(0,0,0,.45)}
/* Mots mis en avant : texte noir, soulignement craie verte */
.mark{filter:none;color:var(--ink);transform:none;position:relative;font-family:inherit;font-weight:inherit;font-size:1em;letter-spacing:inherit;padding:0}
.mark::after{content:"";position:absolute;left:-4%;right:-4%;bottom:-.16em;height:.34em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8C14 3 26 10 38 6S60 2 72 7 94 11 106 5 117 4 118 6' fill='none' stroke='%2376A012' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;transform:rotate(-.6deg)}
.dark .mark,.contact .mark{color:var(--cream)}
.dark .mark::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8C14 3 26 10 38 6S60 2 72 7 94 11 106 5 117 4 118 6' fill='none' stroke='%23DDFF66' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E")}
/* Hero : visuel fixe, sans animation */
.hero-bg{animation:none}
.hero-visual{margin-bottom:0;padding:20px 0 clamp(30px,4vw,56px);align-self:center}
.hero-mock{width:100%;max-width:620px;height:auto;margin:0 auto;filter:drop-shadow(0 30px 50px rgba(0,0,0,.35))}
/* Comment ça marche : apparition progressive */
.js .steps .step.rv{opacity:0;transform:translateY(60px) scale(.96);filter:blur(6px);transition:opacity 1s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform 1.1s cubic-bezier(.2,.7,.2,1) var(--d,0s),filter 1s var(--d,0s)}
.js .steps .step.rv.in{opacity:1;transform:none;filter:none}
.steps .step-grid .step:nth-child(2){--d:.25s!important}.steps .step-grid .step:nth-child(3){--d:.5s!important}
/* Fonctionnalités : puzzle bento, format réduit */
.bn{gap:16px;padding-bottom:clamp(50px,7vw,90px)}
.bn-c{border-radius:clamp(20px,2.4vw,28px)}
.bn-t{padding:clamp(18px,2.2vw,26px) clamp(18px,2.2vw,26px) 16px}
.bn-n{font-size:clamp(34px,3.6vw,52px)}
.bn-c h3{font-size:clamp(19px,2vw,24px);margin:4px 0 8px}
.bn-c p{font-size:14.5px;line-height:1.5}
.bn-c>img{width:calc(100% - 22px);margin:auto 11px 11px;border-radius:18px}
.bn-crop{margin:auto 11px 11px;border-radius:18px}
.bn-b .bn-crop{min-height:clamp(140px,16vw,175px)}
/* cartes 01 et 02 : photos plus compactes */
.bn-a>img{aspect-ratio:4/3;object-fit:contain;object-position:50% 45%;max-width:calc(100% - 90px);margin:auto auto 14px}
.bn-b .bn-crop img{object-fit:contain;object-position:50% 55%}
/* Récompenses : offres qui défilent au scroll */
.of-rows{margin-top:clamp(40px,5vw,70px);display:flex;flex-direction:column;gap:18px;overflow:hidden}
.of-row{display:flex;gap:18px;width:max-content;will-change:transform}
.of{width:clamp(250px,24vw,330px);flex:none;background:var(--white);color:var(--ink);border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.of-img{aspect-ratio:16/10;overflow:hidden;background:var(--cream2)}
.of-img img{width:100%;height:100%;object-fit:cover}
.of-t{display:flex;align-items:center;gap:12px;padding:14px 16px 16px}
.of-lg{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;overflow:hidden;background:var(--cream);border:1px solid var(--line)}
.of-lg img{width:26px;height:26px;object-fit:contain}
.of-lg b{font-size:17px;color:var(--ink)}
.of h4{margin:0;font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.of p{font-size:14px;color:var(--green);font-weight:600}
.rewards .of p,.rewards .of h4{color:var(--ink)!important}
/* Récompenses : titre centré */
.rewards .sec-head{align-items:center;text-align:center;margin-inline:auto}
/* FAQ : pastille plus courte */
.faq .chalk{padding:6px 16px 8px;font-size:clamp(15px,1.3vw,18px);align-self:flex-start}
/* v7 : mots en lettrage PULSE à la craie blanche, sections ardoise en cartes */
.mark.mark-w{display:inline-block;vertical-align:-.12em;line-height:0;padding:0 .05em}
.mark.mark-w::after{display:none!important}
.mark.mark-w img{height:1.05em;width:auto;display:block}
.sec:not(.dark) .mark.mark-w img{filter:drop-shadow(0 0 1px var(--ink)) drop-shadow(0 0 1px var(--ink)) drop-shadow(1px 2px 0 var(--ink))}
.hero::after{display:none!important}
.steps .step-grid .step:nth-child(1){--d:0s!important}.steps .step-grid .step:nth-child(2){--d:.5s!important}.steps .step-grid .step:nth-child(3){--d:1s!important}
.join{margin:clamp(16px,2vw,28px) var(--gut);border-radius:clamp(28px,3.5vw,48px)}
body{background:var(--cream)}
/* v8 */
.sec:not(.dark) .mark.mark-w img{filter:none!important}
.hero h1 .mark-w{display:inline-block;line-height:0}
.hero h1 .mark-w img{height:.95em;width:auto;display:block;margin-top:.08em}
.steps,.feat-sec{margin:clamp(16px,2vw,28px) var(--gut);border-radius:clamp(28px,3.5vw,48px);background:var(--white)!important;box-shadow:0 1px 0 rgba(27,27,29,.06),0 18px 50px -30px rgba(27,27,29,.25);overflow:hidden}
.feat-sec{padding-bottom:clamp(40px,5vw,72px)!important}
.steps,.feat-sec{border:1px solid rgba(27,27,29,.08)}
/* v9 : tableau noir vivant + compteur */
.js .mark.mark-w img{-webkit-mask:linear-gradient(100deg,#000 0 40%,transparent 60%) 100% 0/260% 100% no-repeat;mask:linear-gradient(100deg,#000 0 40%,transparent 60%) 100% 0/260% 100% no-repeat;transition:-webkit-mask-position 1.8s cubic-bezier(.45,.1,.25,1) .25s,mask-position 1.8s cubic-bezier(.45,.1,.25,1) .25s}
.js .mark.mark-w.drawn img{-webkit-mask-position:0 0;mask-position:0 0}
.chalk-dust{position:absolute;inset:0;pointer-events:none;z-index:2}
.dark{position:relative}
.dark>.wrap,.dark>.of-rows{position:relative;z-index:3}
.pcount{padding:clamp(10px,2vw,24px) 0 clamp(30px,4vw,56px)}
.pcount-in{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 18px;text-align:center}
.pcount-n{font:800 clamp(38px,5.4vw,72px)/1 var(--f-body);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink)}
.pcount-l{font-size:clamp(16px,1.5vw,19px);color:var(--muted);max-width:280px;text-align:left;line-height:1.3}
.pcount-l em{font-style:normal;color:var(--ink);font-weight:700}
.pcount-dot{width:12px;height:12px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(169,194,80,.6);animation:pdot 2s infinite}
@keyframes pdot{70%{box-shadow:0 0 0 12px rgba(169,194,80,0)}100%{box-shadow:0 0 0 0 rgba(169,194,80,0)}}
@media(prefers-reduced-motion:reduce){.js .mark.mark-w img{-webkit-mask:none;mask:none}.pcount-dot{animation:none}}
/* v10 : titres de section en étiquette collée */
.sec .chalk,.join .chalk,.faq .chalk{position:relative;display:inline-flex;align-self:flex-start;align-items:center;gap:8px;font:700 12.5px/1 var(--f-body)!important;letter-spacing:.16em!important;text-transform:uppercase;color:var(--ink)!important;background:#FBFAF2!important;padding:10px 16px 10px 14px!important;border-radius:4px!important;border:1px solid rgba(27,27,29,.10)!important;box-shadow:0 1px 0 rgba(27,27,29,.06),0 8px 18px -10px rgba(27,27,29,.35)!important;text-shadow:none!important;-webkit-text-stroke:0!important;filter:none!important;transform:rotate(-1.6deg);margin-bottom:6px}
.sec .chalk::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 2px var(--ink);flex:none}
.sec .chalk::after{content:"";position:absolute;top:-9px;left:50%;width:46px;height:16px;translate:-50% 0;rotate:3deg;background:rgba(221,255,102,.72);box-shadow:0 1px 2px rgba(27,27,29,.12);-webkit-mask:linear-gradient(90deg,transparent 0 2px,#000 2px calc(100% - 2px),transparent 0) ;mask:linear-gradient(90deg,transparent 0 2px,#000 2px calc(100% - 2px),transparent 0)}
.sec.dark .chalk{background:#F3F1E6!important;box-shadow:0 10px 24px -10px rgba(0,0,0,.6)!important}
.sec-head.center .chalk,.rewards .sec-head .chalk,.join .chalk{align-self:center}
.sec-head .chalk:nth-of-type(1){transform:rotate(-1.6deg)}
#app .chalk,#faq .chalk{transform:rotate(1.4deg)}
/* v11 : section partenaires + titres centrés */
.steps .sec-head,.feat-sec .sec-head,.rewards .sec-head{align-items:center;text-align:center;margin-inline:auto}
.join-in{align-items:center;text-align:center}
.join-in .rv{margin-inline:auto}
.partners{margin:clamp(16px,2vw,28px) var(--gut);border-radius:clamp(28px,3.5vw,48px);background:var(--white);border:1px solid rgba(27,27,29,.08);box-shadow:0 1px 0 rgba(27,27,29,.06),0 18px 50px -30px rgba(27,27,29,.25);overflow:hidden}
.partners-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,56px);align-items:center;padding-block:clamp(22px,2.6vw,34px)}
.partners-l{display:flex;flex-direction:column;align-items:flex-start}
.partners-l h2{margin-top:18px;max-width:16ch}
.partners-l .partners-p{font-size:clamp(15.5px,1.5vw,18px);line-height:1.55;color:var(--muted);margin:16px 0 22px;max-width:44ch}
@media (max-width:900px){.partners-in{grid-template-columns:1fr}.partners-l h2{max-width:none}}
/* v12 : anthracite neutre + section téléchargement plus compacte */
.join .wrap{padding-block:clamp(26px,3.2vw,42px)}
.join h2{font-size:clamp(28px,3.6vw,46px)}
.join-in{gap:22px}
.join .qr{padding:12px 20px 12px 12px;gap:16px}
.join .qr-box{width:108px;height:108px;padding:9px;border-radius:14px}
.join .qr-t strong{font-size:16.5px}.join .qr-t span{font-size:13px}
/* v15 : nouvelle section partenaires (mosaïque de photos) */
.partners{padding-block:0}
/* v16 : cartes compactes (Comment ça marche, Fonctionnalités, Télécharger l'app) */
.steps,.feat-sec,.join{padding-block:0!important}
.steps .wrap,.feat-sec .wrap{padding-block:clamp(30px,3.8vw,54px)}
.partners-in{gap:clamp(22px,3vw,44px)}
.partners-l h2{font-size:clamp(26px,3vw,40px);margin-top:14px}
.partners-l .partners-p{font-size:clamp(15px,1.5vw,17.5px);margin:14px 0 20px}
.partners-mosaic{display:grid;grid-template-columns:1.2fr .9fr 1fr;grid-template-rows:repeat(3,minmax(0,1fr));gap:clamp(8px,1vw,14px);aspect-ratio:6/4.4;min-height:0}
.pv-t{position:relative;margin:0;border-radius:clamp(18px,2vw,28px);overflow:hidden;background:var(--cream);box-shadow:0 22px 34px -24px rgba(27,27,29,.5);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.pv-t img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}@media (hover:hover) and (pointer:fine){
.pv-t:hover{transform:translateY(-4px)}}@media (hover:hover) and (pointer:fine){.pv-t:hover img{transform:scale(1.06)}}
.pv-t:not(.pv-d)::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(27,27,29,.4),transparent 50%);pointer-events:none}
.pv-a{grid-column:1;grid-row:1/3}.pv-a img{object-position:40% 50%}
.pv-b{grid-column:2/4;grid-row:1}.pv-c{grid-column:2;grid-row:2}
.pv-d{grid-column:3;grid-row:2;background:var(--lime);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:12px;color:var(--ink);text-decoration:none;outline:2px dashed rgba(27,27,29,.5);outline-offset:-9px}
.pv-d b{font-size:clamp(12px,1.45vw,20px);font-weight:800;line-height:1.1;letter-spacing:-.02em}.pv-d small{font-size:clamp(10.5px,.95vw,13px);font-weight:600;opacity:.7}
.pv-plus{width:clamp(34px,4vw,52px);aspect-ratio:1;border-radius:50%;background:var(--ink);display:grid;place-items:center;animation:pvp 2.6s ease-in-out infinite}
.pv-plus svg{width:55%;fill:none;stroke:var(--lime);stroke-width:3;stroke-linecap:round}
@keyframes pvp{0%,100%{box-shadow:0 0 0 0 rgba(27,27,29,.35)}50%{box-shadow:0 0 0 12px rgba(27,27,29,0)}}@media (hover:hover) and (pointer:fine){
.pv-d:hover .pv-plus{transform:rotate(90deg);transition:transform .4s}}
.pv-e{grid-column:1/3;grid-row:3}.pv-f{grid-column:3;grid-row:3}
.pv-lb{position:absolute;z-index:2;left:10px;bottom:10px;background:rgba(250,250,243,.92);color:var(--ink);border-radius:99px;padding:5px 12px;font-weight:700;font-size:clamp(11px,1.1vw,14px);backdrop-filter:blur(8px)}
.pv-a .pv-lb{bottom:auto;top:10px}
.pv-unl{position:absolute;z-index:3;left:8px;right:8px;bottom:10px;display:flex;align-items:center;gap:8px;background:var(--lime);border-radius:16px;padding:7px 10px 7px 7px;box-shadow:0 4px 0 var(--lime-deep),0 14px 18px -10px rgba(0,0,0,.5);animation:pvf 5s ease-in-out infinite}
.pv-unl i{width:clamp(24px,2.6vw,34px);aspect-ratio:1;border-radius:50%;background:var(--ink);display:grid;place-items:center;flex:none}
.pv-unl svg{width:55%;fill:none;stroke:var(--lime);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.pv-unl b{display:block;font-size:clamp(11px,1.1vw,14px);line-height:1.1}
@keyframes pvf{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (max-width:900px){.partners-mosaic{order:-1}}
@media (max-width:560px){.partners-mosaic{aspect-ratio:1/1.05}.pv-d small{display:none}.pv-unl{left:6px;right:6px}.pv-unl b{font-size:10.5px}}
@media(prefers-reduced-motion:reduce){.pv-plus,.pv-unl{animation:none}}
/* v14 : entrée progressive du hero */
@keyframes hIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes hDraw{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
.hero h1>span:nth-child(1),.hero h1>span:nth-child(2),.hero .sub,.hero .lead,.hero-cta,.hero-mock{opacity:0;animation:hIn .8s cubic-bezier(.25,.6,.3,1) forwards}
.hero h1>span:nth-child(1){animation-delay:.2s}
.hero h1>span:nth-child(2){animation-delay:.6s}
.hero-mock{animation-duration:1.2s;animation-delay:.3s}
.hero h1 .mark-w img{-webkit-mask-image:linear-gradient(100deg,#000 0 40%,transparent 60%);mask-image:linear-gradient(100deg,#000 0 40%,transparent 60%);-webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0;transition:none;animation:hDraw 1.3s cubic-bezier(.45,.1,.25,1) 1s both}
.hero .sub{animation-delay:2.2s}
.hero .lead{animation-delay:2.5s}
.hero-cta{animation-delay:2.8s}
@media (prefers-reduced-motion:reduce){.hero h1>span,.hero .sub,.hero .lead,.hero-cta,.hero-mock,.hero h1 .mark-w img{animation:none!important;opacity:1!important;-webkit-mask:none!important;mask:none!important}}
/* v15 : logos partenaires dans les ronds des récompenses */
.of-lg{background:#fff;border-color:transparent;box-shadow:0 1px 2px rgba(27,27,29,.18)}
.of-lg img{width:36px;height:36px;object-fit:contain}
.of-lg.lg-full img{width:100%;height:100%;object-fit:cover}
.of-lg.lg-zoom img{transform:scale(1.55)}
.of-lg.lg-z1 img{transform:scale(1.3)}
.of-lg.lg-z2 img{transform:scale(1.2)}
/* v16 : hero « Transforme tes efforts en vraies récompenses » */
.hero h1{font-size:clamp(42px,5.6vw,70px);line-height:.96}
.hero h1 .mark-w{display:block;line-height:0;margin-top:.12em}
.hero h1 .mark-w img{height:auto;width:min(100%,560px);max-width:100%}
.hero .sub-tag{font-family:var(--f-mark);font-weight:400;font-size:clamp(22px,2.6vw,34px);letter-spacing:.06em;line-height:1.15;color:var(--lime);max-width:none;white-space:nowrap;text-wrap:initial}
.hero h1>span:nth-child(3){opacity:0;animation:hIn .8s cubic-bezier(.25,.6,.3,1) forwards;animation-delay:1s}
.hero h1 .mark-w img{animation:hDraw 1.3s cubic-bezier(.45,.1,.25,1) 1.5s both}
.hero .sub{animation-delay:2.1s}
.hero .lead{animation-delay:2.4s}
.hero-cta{animation-delay:2.7s}
@media (max-width:900px){.hero h1 .mark-w img{width:min(100%,480px)}}
@media (max-width:560px){.hero h1{font-size:clamp(34px,9.2vw,44px)}.hero h1 .mark-w img{width:min(100%,340px)}.hero .sub-tag{font-size:19px}}

/* v17 : hero plein écran, titre en bloc, tagline blanche */
.hero{min-height:100svh;display:flex;flex-direction:column}
.hero .hero-grid{flex:1}
.hero h1{font-size:clamp(52px,6.6vw,86px);line-height:.94}
.hero h1 .mark-w{margin-top:.02em}
.hero h1 .mark-w img{width:min(100%,580px)}
.hero .sub-tag{font-family:inherit;font-weight:700;font-size:clamp(20px,2.2vw,28px);letter-spacing:.02em;color:#fff}
@media (max-width:900px){.hero h1 .mark-w img{width:min(100%,480px)}}
@media (max-width:560px){.hero{min-height:100svh}.hero h1{font-size:clamp(38px,10.4vw,50px)}.hero h1 .mark-w img{width:min(100%,340px)}.hero .sub-tag{font-size:19px}}