@font-face{font-family:"Bricolage Grotesque";font-weight:800;font-display:swap;src:url(/assets/fonts/bricolage-grotesque-latin-ext-800-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Bricolage Grotesque";font-weight:800;font-display:swap;src:url(/assets/fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:500;font-display:swap;src:url(/assets/fonts/instrument-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:700;font-display:swap;src:url(/assets/fonts/instrument-sans-latin-700-normal.woff2) format("woff2")}

:root{--lime:#C6FF3D;--ink:#0B0B12;--paper:#fff;--mist:#F1F2EC;--sky:#2F8FD8;--tomato:#E0402F;--grey:#41414C;--soft:#E6E6EE;
--display:"Bricolage Grotesque","Arial Black",system-ui,sans-serif;--body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--pad:20px;--max:1180px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);font-size:19px;line-height:1.55;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
h1,h2,h3{font-family:var(--display);font-weight:800;margin:0;letter-spacing:-.03em}
h1{font-size:clamp(46px,10.5vw,108px);line-height:.92}
h2{font-size:clamp(34px,6vw,64px);line-height:.98}
h3{font-size:24px;line-height:1.1;letter-spacing:-.02em}
p{margin:0}
.lead{font-size:clamp(20px,2.2vw,23px);max-width:34em}
.hl{background:#fff;border:2.5px solid var(--ink);border-radius:12px;padding:0 8px;font-weight:700;box-decoration-break:clone;-webkit-box-decoration-break:clone;white-space:nowrap}

/* boutons : contour encre + ombre dure, comme un autocollant */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border-radius:999px;border:2.5px solid var(--ink);background:var(--ink);color:#fff;font:700 17px/1 var(--body);text-decoration:none;cursor:pointer;box-shadow:4px 4px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn.lime{background:var(--lime);color:var(--ink)}
.btn.white{background:#fff;color:var(--ink)}
.btn.ondark{border-color:var(--lime);box-shadow:4px 4px 0 var(--lime)}
.btn.ondark:hover{box-shadow:6px 6px 0 var(--lime)}
.btn.small{min-height:44px;padding:0 18px;font-size:15px;box-shadow:3px 3px 0 var(--ink)}
.btn.block{width:100%}
.link{font-weight:700;text-underline-offset:4px}

/* nav */
.nav{position:sticky;top:0;z-index:30;background:var(--ink);color:#fff}
.nav .wrap{display:flex;align-items:center;gap:18px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 26px/1 var(--display);letter-spacing:-.04em;margin-right:auto}
.brand img{width:34px;height:34px}
.nav-links{display:none;gap:26px;font-size:17px;font-weight:500}
.nav-links a{text-decoration:none;padding:10px 0}
.nav-links a:hover{text-decoration:underline;text-underline-offset:6px}
.lang{display:flex;border:1.5px solid #3a3a48;border-radius:999px;overflow:hidden;font-size:15px;font-weight:700}
.lang a{padding:8px 11px;text-decoration:none;min-height:36px;display:flex;align-items:center}
.lang a[aria-current]{background:#fff;color:var(--ink)}
.nav .btn{box-shadow:none;border-color:var(--lime);display:none}
.nav .btn:hover{transform:none;box-shadow:none;background:#fff;border-color:#fff}

/* hero */
.hero{background:var(--lime);padding:44px 0 0;overflow:hidden}
.hero-grid{display:grid;gap:30px}
.stage+.facts{margin-top:-2px}
.hero .lead{margin:18px 0 24px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px 16px;align-items:center}
.facts{list-style:none;padding:0 0 44px;margin:0;display:grid;gap:12px;font-size:18px;font-weight:500;line-height:1.35}
.facts li{display:flex;gap:10px;align-items:flex-start}
.facts svg{flex:none;margin-top:3px}
.stage{position:relative;height:412px;margin:0 calc(var(--pad)*-1);overflow:hidden;border-bottom:2.5px solid var(--ink);perspective:1000px;perspective-origin:50% 42%}
.rig,.sway{position:absolute;inset:0;transform-style:preserve-3d}
.rig{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s ease-out}
.phone{position:absolute;bottom:-56px;border:9px solid var(--ink);border-radius:38px;overflow:hidden;background:var(--ink);box-shadow:8px 8px 0 var(--ink)}
.phone video{width:100%;aspect-ratio:9/16;object-fit:cover}
.phone.c{left:50%;width:232px;margin-left:-116px;transform:translateZ(70px)}
.phone.l{left:50%;width:180px;margin-left:-238px;bottom:-44px;transform:translateZ(-50px) rotateY(36deg) rotateZ(-5deg)}
.phone.r{left:50%;width:180px;margin-left:58px;bottom:-44px;transform:translateZ(-50px) rotateY(-36deg) rotateZ(5deg)}

/* cubes 3D en CSS pur */
.cube{--s:44px;--c:#fff;position:absolute;display:block;width:var(--s);height:var(--s);transform-style:preserve-3d;transform:rotateX(-24deg) rotateY(32deg)}
.cube i{position:absolute;inset:0;border:2.5px solid var(--ink);background:var(--c)}
.cube i:nth-child(1){transform:translateZ(calc(var(--s)/2))}
.cube i:nth-child(2){transform:rotateY(180deg) translateZ(calc(var(--s)/2))}
.cube i:nth-child(3){transform:rotateY(90deg) translateZ(calc(var(--s)/2));filter:brightness(.8)}
.cube i:nth-child(4){transform:rotateY(-90deg) translateZ(calc(var(--s)/2));filter:brightness(.8)}
.cube i:nth-child(5){transform:rotateX(90deg) translateZ(calc(var(--s)/2));filter:brightness(1.06)}
.cube i:nth-child(6){transform:rotateX(-90deg) translateZ(calc(var(--s)/2));filter:brightness(.66)}
.k1{left:7%;top:26px}
.k2{--s:30px;--c:var(--tomato);right:9%;top:64px}
.k3{--s:22px;--c:var(--sky);right:4%;top:14px}
@media (prefers-reduced-motion:no-preference){
 .sway{animation:sway 6s ease-in-out infinite alternate}
 .phone.c{animation:rise .8s cubic-bezier(.2,.9,.3,1.15) both}
 .phone.l{animation:fanl .9s .12s cubic-bezier(.2,.9,.3,1.15) both}
 .phone.r{animation:fanr .9s .12s cubic-bezier(.2,.9,.3,1.15) both}
 .cube{animation:spin 13s linear infinite,bob 4.4s ease-in-out infinite alternate}
 .k2,.k6{animation-duration:9s,3.6s;animation-direction:reverse,alternate}
 .k3,.k7{animation-duration:17s,5.2s}
 @keyframes sway{from{transform:rotateY(-9deg) rotateX(3deg)}to{transform:rotateY(9deg) rotateX(-2deg)}}
 @keyframes rise{from{transform:translateZ(70px) translateY(190px)}}
 @keyframes fanl{from{transform:translateZ(-50px) translate(110px,190px) rotateY(0) rotateZ(0)}}
 @keyframes fanr{from{transform:translateZ(-50px) translate(-110px,190px) rotateY(0) rotateZ(0)}}
 @keyframes spin{from{transform:rotateX(-24deg) rotateY(0)}to{transform:rotateX(-24deg) rotateY(360deg)}}
 @keyframes bob{from{translate:0 0}to{translate:0 -16px}}
}

/* bandeau défilant */
.marquee{background:#fff;border-bottom:2.5px solid var(--ink);overflow:hidden;padding:13px 0}
.track{display:flex;width:max-content;font:800 clamp(26px,4.2vw,42px)/1 var(--display);letter-spacing:-.03em;white-space:nowrap}
.track span{display:flex;align-items:center}
.track span:after{content:"";width:.42em;height:.42em;background:var(--lime);border:2.5px solid var(--ink);transform:rotate(45deg);margin:0 .6em}
@media (prefers-reduced-motion:no-preference){.track{animation:slide 40s linear infinite}@keyframes slide{to{transform:translateX(-50%)}}}

/* sections */
.sec{padding:76px 0}
.sec-head{max-width:760px;margin-bottom:40px}
.sec-head p{margin-top:16px;color:var(--grey)}
.dark{background:var(--ink);color:#fff}
.dark .sec-head p{color:var(--soft)}
.mist{background:var(--mist)}

/* styles */
.reel{--cw:min(64vw,250px);display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:14px calc(50% - var(--cw)/2) 22px;scrollbar-width:none}
.reel::-webkit-scrollbar{display:none}
.clip{flex:0 0 var(--cw);scroll-snap-align:center}
.card3d{will-change:transform;transform-origin:50% 50%}
.clip video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:24px;border:3px solid #fff;background:#15151f;box-shadow:0 0 0 0 var(--lime);transition:box-shadow .25s}
.clip.mid video{box-shadow:7px 7px 0 var(--lime)}
.clip h3{margin-top:18px;font-size:25px}
.clip p{color:var(--soft);font-size:17px;line-height:1.4;margin-top:5px}
.js .clip h3,.js .clip p{transition:opacity .25s}
.js .clip:not(.mid) h3,.js .clip:not(.mid) p{opacity:.38}
.own-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:58px;aspect-ratio:9/16;border-radius:24px;border:3px dashed var(--lime);background:#15151f;color:#fff;text-decoration:none;perspective:700px;text-align:center;padding:20px;position:relative}
.own-card .cube{position:relative;--s:92px;--c:var(--lime)}
.own-card b{font:800 24px/1.05 var(--display);letter-spacing:-.02em}
.reel-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:6px}
.rbtn{flex:none;width:56px;height:56px;border-radius:50%;border:2.5px solid var(--lime);background:transparent;color:var(--lime);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s}
.rbtn:hover{background:var(--lime);color:var(--ink)}
.rbtn:active{transform:scale(.94)}
#prev svg{transform:rotate(180deg)}
.swipe{text-align:center;font-size:16px;color:var(--soft);line-height:1.3}
.swipe b{display:block;font:800 22px/1.1 var(--display);color:#fff}

/* étapes */
.steps{display:grid;gap:44px;counter-reset:s}
.step{counter-increment:s;display:grid;gap:14px;align-content:start}
.step:before{content:counter(s);font:800 96px/.9 var(--display);letter-spacing:-.05em;color:var(--lime);-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;text-shadow:3px 3px 0 var(--ink),6px 6px 0 var(--ink);padding-left:3px}
.step p{color:var(--grey)}
.vig{border:2.5px solid var(--ink);border-radius:20px;box-shadow:5px 5px 0 var(--ink);padding:14px 16px;background:#fff;height:112px;display:flex;align-items:center;gap:14px;margin-bottom:6px}
.send{padding:12px;gap:0}
.half{flex:1;height:100%;border-radius:13px;display:flex;align-items:center;gap:9px;padding:0 13px;min-width:0}
.voice{background:var(--ink)}
.dot{width:15px;height:15px;border-radius:50%;background:var(--tomato);flex:none}
.wave{display:flex;align-items:center;gap:4px;flex:1;height:48px}
.wave i{flex:1;background:var(--lime);border-radius:3px;transform-origin:50% 50%}
.text{background:var(--mist);border:2.5px solid var(--ink);flex-direction:column;align-items:flex-start;justify-content:center;gap:8px}
.text i{display:block;height:8px;border-radius:4px;background:var(--ink);width:100%}
.text i:nth-child(2){width:80%}.text i:nth-child(3){width:52%}
.or{flex:none;width:44px;height:44px;border-radius:50%;background:var(--lime);border:2.5px solid var(--ink);display:grid;place-items:center;font-weight:700;font-size:16px;margin:0 -12px;z-index:1}
.pick{justify-content:center;background:var(--lime);perspective:520px}
.flip{font:800 clamp(24px,7vw,30px)/1 var(--display);letter-spacing:-.03em;background:#fff;border:2.5px solid var(--ink);border-radius:999px;padding:13px 24px;box-shadow:4px 4px 0 var(--ink);transition:transform .2s ease-in,opacity .2s;white-space:nowrap}
.flip.out{transform:rotateX(-88deg);opacity:0}
@media (prefers-reduced-motion:no-preference){
 .wave i{animation:eq 1.1s ease-in-out infinite}
 .dot{animation:blink 1.2s steps(2,jump-none) infinite}
 .text i{animation:type 3.6s ease-out infinite}.text i:nth-child(2){animation-delay:.5s}.text i:nth-child(3){animation-delay:1s}
 .file svg{animation:drop 1.6s ease-in-out infinite}
 @keyframes eq{50%{transform:scaleY(.3)}}
 @keyframes blink{50%{opacity:.25}}
 @keyframes type{0%{clip-path:inset(0 100% 0 0)}30%,100%{clip-path:inset(0)}}
 @keyframes drop{50%{transform:translateY(6px)}}
}
.file img{width:44px;height:64px;object-fit:cover;border-radius:8px;border:2px solid var(--ink)}
.file b{display:block;font-size:17px}
.file small{color:var(--grey);font-size:15.5px}
.file svg{margin-left:auto;flex:none}

/* pourquoi */
.why{display:grid;gap:36px}
.why-list{border-top:2.5px solid var(--ink)}
.why-list div{padding:24px 0;border-bottom:2.5px solid var(--ink)}
.why-list p{color:var(--grey);margin-top:8px;max-width:36em}

/* prix */
.plans{display:grid;gap:22px;align-items:stretch}
.plan{border:2.5px solid var(--ink);border-radius:26px;padding:28px 24px;display:flex;flex-direction:column;gap:18px;background:#fff;box-shadow:6px 6px 0 var(--ink);position:relative}
.plan.best{background:var(--ink);color:#fff;box-shadow:6px 6px 0 var(--lime)}
.tag{position:absolute;top:-17px;left:22px;background:var(--lime);color:var(--ink);border:2.5px solid var(--ink);border-radius:999px;font-size:15.5px;font-weight:700;padding:3px 13px}
.plan-for{color:var(--grey);font-size:17.5px;min-height:2.9em}
.plan.best .plan-for{color:var(--soft)}
.price{font:800 64px/1 var(--display);letter-spacing:-.04em}
.price small{font:500 19px/1 var(--body);letter-spacing:0;color:var(--grey);margin-left:6px}
.plan.best .price small{color:var(--soft)}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;flex:1;font-size:18px}
.plan li{display:flex;gap:10px;align-items:flex-start;line-height:1.35}
.plan li svg{flex:none;margin-top:2px}
.assure{margin-top:32px;display:grid;gap:12px;font-size:17.5px;font-weight:500;color:var(--ink)}
.assure li{display:flex;gap:10px}.assure svg{color:var(--ink);flex:none;margin-top:2px}
.assure{list-style:none;padding:0}
.founder{display:inline-block;margin-top:14px;background:var(--lime);border:2.5px solid var(--ink);border-radius:14px;padding:11px 16px;font-weight:700;font-size:17.5px;line-height:1.35;color:var(--ink)}

/* partenaires */
.partner{background:var(--lime)}
.partner-grid{display:grid;gap:26px;align-items:center}
.pct{font:800 clamp(120px,27vw,250px)/.85 var(--display);letter-spacing:-.01em;color:#fff;-webkit-text-stroke:clamp(5px,1vw,9px) var(--ink);paint-order:stroke fill;text-shadow:4px 4px 0 var(--ink),8px 8px 0 var(--ink),12px 12px 0 var(--ink);font-variant-numeric:tabular-nums}
.partner p{max-width:32em;margin:14px 0 24px}
.partner small{display:block;margin-top:16px;font-size:17px;font-weight:500}

/* faq */
.faq-grid{display:grid;gap:36px}
details{border-bottom:2.5px solid var(--ink)}
details:first-of-type{border-top:2.5px solid var(--ink)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 0;font:800 20px/1.2 var(--display);letter-spacing:-.01em;min-height:64px}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";font:800 30px/1 var(--display);flex:none;transition:transform .2s}
details[open] summary:after{transform:rotate(45deg)}
details p{padding:0 0 22px;color:var(--grey);max-width:40em}

/* final */
.final{text-align:left;overflow:hidden;padding-top:128px}
.final .wrap{position:relative}
.cubes{position:absolute;right:var(--pad);top:-84px;width:150px;height:70px;perspective:600px}
.k5{--s:40px;--c:var(--lime);right:8px;top:8px}
.k6{--s:24px;--c:#fff;right:78px;top:40px}
.k7{--s:18px;--c:var(--tomato);right:118px;top:4px}
.final h2{font-size:clamp(40px,8vw,92px);max-width:11em}
.final p{color:var(--soft);margin:18px 0 28px;max-width:30em}

footer{background:var(--ink);color:var(--soft);padding:34px 0 110px;border-top:1px solid #23232f;font-size:16.5px}
.foot{display:grid;gap:18px}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 22px}
.foot a{padding:8px 0;display:inline-block}

/* barre fixe mobile */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;border-top:2.5px solid var(--ink);padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:14px;transform:translateY(110%);transition:transform .25s}
.bar.show{transform:none}
.bar b{font:800 17px/1.05 var(--display);letter-spacing:-.02em;white-space:nowrap}
.bar span{display:block;font-size:14px;color:var(--grey);font-weight:500;font-family:var(--body);letter-spacing:0;margin-top:3px}
.bar .btn{margin-left:auto;min-height:48px;padding:0 16px;font-size:15px;white-space:nowrap;box-shadow:3px 3px 0 var(--ink)}

/* fenêtre « bientôt » */
dialog{border:2.5px solid var(--ink);border-radius:26px;box-shadow:8px 8px 0 var(--ink);padding:28px 24px;max-width:460px;width:calc(100% - 32px);color:var(--ink)}
dialog::backdrop{background:rgba(11,11,18,.6)}
dialog h3{font-size:28px}
dialog p{margin:12px 0 22px;color:var(--grey)}
dialog .cta-row{gap:12px}

/* pages légales */
.legal{max-width:760px;padding:56px var(--pad) 80px;margin:0 auto}
.legal h1{font-size:clamp(36px,6vw,56px);line-height:1}
.legal h2{font-size:24px;margin:34px 0 8px;letter-spacing:-.02em}
.legal p,.legal li{color:#33333d}
.legal .date{color:var(--grey);margin-top:12px}

@media (min-width:860px){
 :root{--pad:32px}
 .nav-links{display:flex}
 .hero{padding-top:72px}
 .nav .btn{display:inline-flex}
 .hero-grid{grid-template-columns:1.12fr .88fr;grid-template-areas:'copy stage' 'facts stage';column-gap:40px;row-gap:28px;align-items:end}
 .hero-copy{grid-area:copy}
 .facts{grid-area:facts;padding-bottom:84px;align-self:start}
 .stage{grid-area:stage;height:660px;margin:0;border-bottom:0;overflow:visible}
 h1{font-size:clamp(60px,6.6vw,92px)}
 .stage{perspective:1400px}
 .hero .lead{max-width:26em}
 .phone.c{width:290px;margin-left:-125px;bottom:-60px;transform:translateZ(90px)}
 .phone.l{width:206px;margin-left:-262px;bottom:-30px}
 .phone.r{width:206px;margin-left:116px;bottom:-30px}
 .k1{--s:78px;left:-2%;top:36px}.k2{--s:52px;right:0;top:18px}.k3{--s:34px;left:30%;right:auto;top:0}
 .sec{padding:112px 0}
 .reel{--cw:280px;gap:26px;padding-top:22px;padding-bottom:28px}
 .swipe span{display:none}
 .reel-nav{justify-content:center;gap:28px}
 .final{padding-top:112px}
 .final h2{max-width:min(11em,calc(100% - 340px))}
 .cubes{top:10px;width:320px;height:260px}
 .k5{--s:110px;right:20px;top:60px}.k6{--s:60px;right:210px;top:150px}.k7{--s:40px;right:250px;top:20px}
 .steps{grid-template-columns:repeat(3,1fr);gap:36px}
 .why{grid-template-columns:.9fr 1.1fr;gap:72px;align-items:start}
 .faq-grid{grid-template-columns:.8fr 1.2fr;gap:72px;align-items:start}
 .plans{grid-template-columns:repeat(3,1fr);gap:26px}
 .plan.best,.js .plan.best.rv.in{transform:translateY(-14px)}
 .assure{grid-template-columns:repeat(3,auto);justify-content:start;gap:10px 34px}
 .partner-grid{grid-template-columns:auto 1fr;gap:64px}
 .bar{display:none}
 footer{padding-bottom:40px}
 .foot{grid-template-columns:1fr auto;align-items:center}
}
/* apparitions au défilement (seulement si le script tourne) */
@media (prefers-reduced-motion:no-preference){
 .js .rv{opacity:0;transform:translateY(46px) rotate(-2.5deg) scale(.95)}
 .js .rv.in{opacity:1;transform:none;transition:opacity .5s,transform .7s cubic-bezier(.2,.9,.3,1.25)}
 .js .rv:nth-child(2){transition-delay:.12s}.js .rv:nth-child(3){transition-delay:.24s}
 .plan{transition:transform .2s,box-shadow .2s}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.bar,.rig,.flip{transition:none}}