/* =====================================================================
   PAGE COMMERÇANTS
   ===================================================================== */
.phero{position:relative;background:linear-gradient(180deg,var(--teal-d),var(--teal));color:#fff;padding:150px 0 140px;overflow:hidden}
.phero::before{content:"";position:absolute;width:760px;height:760px;border-radius:50%;border:2px solid rgba(212,180,131,.25);right:-220px;top:-220px}
.phero::after{content:"";position:absolute;width:460px;height:460px;border-radius:50%;border:2px solid rgba(212,180,131,.18);right:-70px;top:-70px}
.phero .grid{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.phero .chip{display:inline-block;padding:7px 16px;border-radius:99px;background:rgba(212,180,131,.18);color:var(--gold-l);font:600 14px var(--body);margin-bottom:22px}
.phero h1{font-size:clamp(42px,6vw,82px);line-height:1;margin-bottom:22px}
.phero h1 em{font-style:normal;color:var(--gold)}
.phero .lead{color:var(--gold-l);font-size:clamp(18px,1.7vw,21px);max-width:540px;margin-bottom:32px}
.phero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:38px}
.facts{display:flex;gap:34px;flex-wrap:wrap}
.facts div b{display:block;font:600 40px/1 var(--display);color:var(--gold)}
.facts div span{font-size:14px;color:var(--gold-l)}
.phero .stage{height:auto;min-height:0}
.pro-visual{position:relative;max-width:440px;margin:0 auto}
.pro-visual::before{content:"";position:absolute;inset:6%;background:var(--cream);border-radius:50%}
.pro-visual>img{position:relative;mix-blend-mode:multiply;width:130%;max-width:none;margin:-12% -15%}
.phero .dp{left:-14%;bottom:2%;width:38%}
.phero .dp .dog2{filter:none}
.other{margin-top:26px;font-size:15px;color:var(--gold-l)}
.other a{color:#fff;border-bottom:2px solid var(--gold);padding-bottom:1px;font-weight:600}
@media(max-width:960px){.phero .grid{grid-template-columns:1fr}.phero{padding-top:120px}.pro-visual{max-width:360px}.pro-visual>img{width:118%;margin:-8% -9%}}

/* chiffres */
.pstrip{padding:70px 0 20px}
.pstrip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.pstrip b{display:block;font:600 clamp(40px,5vw,68px)/1 var(--display);color:var(--teal)}
.pstrip span{color:var(--muted);font-size:15px}
@media(max-width:800px){.pstrip .wrap{grid-template-columns:1fr 1fr;gap:34px}}

/* la scène du scan */
.scan{padding:110px 0}
.scan .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.scan .intro{color:var(--muted);font-size:18px;max-width:480px;margin:14px 0 34px}
.sstep{display:grid;grid-template-columns:56px 1fr;gap:18px;padding:20px 22px;border-radius:22px;border:2px solid transparent;cursor:pointer;transition:background .3s,border-color .3s,transform .3s;opacity:.55}
.sstep+.sstep{margin-top:6px}
.sstep .n{width:56px;height:56px;border-radius:50%;background:rgba(15,76,92,.08);color:var(--teal);display:grid;place-items:center;font:600 24px var(--display);transition:.3s}
.sstep h3{font-size:22px;margin-bottom:6px}
.sstep p{color:var(--muted);font-size:16px}
.sstep.on{opacity:1;background:#fff;border-color:var(--gold);transform:translateX(6px);box-shadow:0 16px 36px rgba(11,58,71,.08)}
.sstep.on .n{background:var(--gold);color:var(--teal-dd)}
.scene{position:relative;aspect-ratio:1/.94;border-radius:38px;background:var(--paper);overflow:hidden}
.scene::before{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:var(--gold-l);left:15%;top:6%;opacity:.7}
.cphone,.mphone{position:absolute;border:5px solid var(--teal-d);background:#fff;border-radius:34px;box-shadow:0 24px 50px rgba(11,58,71,.25)}
.mphone{width:36%;aspect-ratio:9/17;right:9%;top:8%;overflow:hidden}
.mphone .cam{position:absolute;inset:8% 8% 22%;border-radius:20px;background:var(--teal-d)}
.mphone .cam i{position:absolute;width:26px;height:26px;border:4px solid var(--gold)}
.mphone .cam i:nth-child(1){left:10px;top:10px;border-right:0;border-bottom:0;border-radius:10px 0 0 0}
.mphone .cam i:nth-child(2){right:10px;top:10px;border-left:0;border-bottom:0;border-radius:0 10px 0 0}
.mphone .cam i:nth-child(3){left:10px;bottom:10px;border-right:0;border-top:0;border-radius:0 0 0 10px}
.mphone .cam i:nth-child(4){right:10px;bottom:10px;border-left:0;border-top:0;border-radius:0 0 10px 0}
.beam{position:absolute;left:8%;right:8%;height:4px;background:var(--gold);box-shadow:0 0 18px 4px rgba(212,180,131,.7);top:18%;opacity:0}
.mphone .okc{position:absolute;left:50%;top:44%;width:62px;height:62px;margin:-31px;border-radius:50%;background:#22C55E;display:grid;place-items:center;color:#fff;font:700 32px var(--display);transform:scale(0);transition:transform .45s cubic-bezier(.3,1.7,.5,1)}
.mphone .mbar{position:absolute;left:8%;right:8%;bottom:6%;height:13%;border-radius:14px;background:var(--gold);color:var(--teal-dd);font:600 15px/1 var(--display);display:grid;place-items:center}
.cphone{width:32%;aspect-ratio:9/17;left:12%;top:20%;transform:rotate(-8deg);transition:transform 1s cubic-bezier(.6,0,.2,1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;z-index:3;background:linear-gradient(160deg,var(--teal),var(--teal-d));color:var(--gold-l);font:600 12px var(--display)}
.cphone .qr{width:70%;height:auto;aspect-ratio:1;padding:7px;border-radius:10px;gap:1px}
.tagok{position:absolute;left:50%;top:7%;transform:translate(-50%,-30px) scale(.8);opacity:0;background:#fff;border-radius:99px;padding:9px 18px;font:600 15px var(--display);color:var(--teal);box-shadow:0 14px 30px rgba(11,58,71,.15);transition:.5s cubic-bezier(.3,1.5,.5,1);white-space:nowrap;z-index:5;display:flex;gap:8px;align-items:center}
.tagok::before{content:"";width:10px;height:10px;border-radius:50%;background:#22C55E}
.dash{position:absolute;left:6%;right:6%;bottom:5%;background:var(--teal-d);color:#fff;border-radius:24px;padding:16px 20px;display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:14px;align-items:end;z-index:4;box-shadow:0 20px 40px rgba(11,58,71,.3)}
.dash small{display:block;font:500 11px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-l);opacity:.8}
.dash b{font:600 30px/1.1 var(--display);color:var(--gold);display:inline-block;transition:transform .3s}
.dash b.pop{transform:scale(1.25)}
.spk{display:flex;gap:4px;align-items:flex-end;height:44px}
.spk i{flex:1;background:rgba(212,180,131,.4);border-radius:3px;transition:height .6s;height:var(--h)}
.spk i:last-child{background:var(--gold)}
.coin{position:absolute;width:44px;height:44px;border-radius:50%;background:var(--gold);color:var(--teal-dd);display:grid;place-items:center;font:700 22px var(--display);box-shadow:0 8px 18px rgba(11,58,71,.25);border:3px solid var(--gold-l);opacity:0;z-index:5;right:26%;top:30%}
/* phases */
.scene[data-phase="0"] .cphone{transform:translate(120%,-10%) rotate(0deg) scale(.92)}
.scene[data-phase="0"] .beam{opacity:1;animation:sweep 1.3s ease-in-out infinite}
@keyframes sweep{0%{top:14%}50%{top:58%}100%{top:14%}}
.scene[data-phase="1"] .okc{transform:scale(1)}
.scene[data-phase="1"] .tagok{opacity:1;transform:translate(-50%,0) scale(1)}
.scene[data-phase="2"] .coin{animation:coinup 1.6s ease-in infinite}
.scene[data-phase="2"] .coin:nth-of-type(2){animation-delay:.5s}
.scene[data-phase="2"] .coin:nth-of-type(3){animation-delay:1s}
@keyframes coinup{0%{opacity:0;transform:translate(0,0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translate(-120px,260px) scale(1)}}
@media(max-width:960px){.scan .grid{grid-template-columns:1fr;gap:40px}.scene{order:-1}}

/* simulateur */
.part{padding:20px 0 110px}
.share{margin-bottom:0;background:var(--teal-d);color:#fff;border:0}
.share h3{color:#fff}

/* avantages */
.perks3{padding:30px 0 120px}
.perks3 .top{max-width:640px;margin-bottom:56px}
.perks3 .top .sub{color:var(--muted);font-size:18px;margin-top:14px}
.pl3{display:grid;grid-template-columns:repeat(2,1fr);gap:0 70px}
.pl3>div{display:grid;grid-template-columns:90px 1fr;gap:10px;padding:34px 0;border-top:2px solid var(--line);transition:border-color .3s}
.pl3>div:hover{border-color:var(--gold)}
.pl3 .no{font:600 64px/0.9 var(--display);color:transparent;-webkit-text-stroke:2px var(--gold);transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.pl3>div:hover .no{transform:translateY(-4px) rotate(-4deg)}
.pl3 h3{font-size:24px;margin-bottom:8px}
.pl3 p{color:var(--muted);font-size:16px;max-width:380px}
@media(max-width:860px){.pl3{grid-template-columns:1fr}}

/* ce que voient vos clients */
.seen{background:var(--paper);padding:120px 0}
.seen .grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}
.seen .duo{position:relative;height:520px}
.seen .duo::before{content:"";position:absolute;inset:6% 8%;border-radius:50%;background:var(--gold-l)}
.seen .duo img{position:absolute;mix-blend-mode:multiply;max-width:none;width:76%}
.seen .duo img:nth-child(1){left:-6%;top:0;transform:rotate(-4deg)}
.seen .duo img:nth-child(2){right:-8%;top:12%;transform:rotate(3deg)}
.seen .sub{color:var(--muted);font-size:18px;max-width:500px;margin:14px 0 34px}
.love{display:grid;gap:22px}
.love div{display:grid;grid-template-columns:44px 1fr;gap:16px}
.love i{width:44px;height:44px;border-radius:50%;background:var(--teal);color:var(--gold);display:grid;place-items:center;font:600 18px var(--display);font-style:normal}
.love b{font:600 21px var(--display);display:block;margin-bottom:2px}
.love span{color:var(--muted);font-size:16px}
@media(max-width:960px){.seen .grid{grid-template-columns:1fr}.seen .duo{height:420px}}

/* faq partenaires + remises */
.remise{margin-top:30px;background:#fff;border-radius:22px;padding:22px 24px;border:2px dashed var(--gold)}
.remise b{font:600 20px var(--display);display:block;margin-bottom:10px}
.remise .rr{display:flex;gap:10px;flex-wrap:wrap}
.remise .rr span{background:var(--teal);color:#fff;border-radius:99px;padding:6px 16px;font:600 17px var(--display)}
.remise p{margin:12px 0 0;font-size:14px;color:var(--muted)}

/* contact */
.jsec{background:var(--teal);padding:60px 0 110px;color:#fff;position:relative;overflow:hidden}
.jsec::before{content:"";position:absolute;width:640px;height:640px;border-radius:50%;border:2px solid rgba(212,180,131,.22);left:-260px;bottom:-300px}
.jsec .wrap{position:relative;z-index:1}
.jsec .join{margin-top:20px}
.qr{width:150px;height:150px;background:#fff;border-radius:14px;padding:12px;display:grid;grid-template-columns:repeat(11,1fr);grid-auto-rows:1fr;gap:1px}
.qr i{background:var(--teal-d);border-radius:1px}.qr i.o{background:transparent}
.coin.c1{right:30%;top:34%}.coin.c2{right:24%;top:30%}.coin.c3{right:34%;top:28%}
.scene[data-phase="2"] .coin.c2{animation-delay:.5s}.scene[data-phase="2"] .coin.c3{animation-delay:1s}
.share .field label{color:#fff}.share .field label b{color:var(--gold)}
.share input[type=range]{background:linear-gradient(90deg,var(--gold) var(--p,50%),rgba(255,255,255,.2) var(--p,50%))}
.share{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;border-radius:34px;padding:clamp(26px,4vw,54px)}
.formula{color:var(--gold)}
.phero h1{font-size:clamp(38px,5vw,70px)}
.phero .dp{z-index:3}
.phero .dp .dog2{background:url(/public/logo-emblem.png) center/contain no-repeat;aspect-ratio:1/.95}

/* hero : le mockup seul */
.pro-visual{max-width:470px}
.perks3.dk{padding:30px 0 130px}
.perks3.dk .top{max-width:640px;margin-bottom:56px}

.ok{display:block}
.err{margin:0}

/* parcours */
.journey{padding:110px 0 100px}
.journey .top{max-width:640px;margin-bottom:56px}
.journey .sub{color:var(--muted);font-size:18px;margin-top:14px}
.jl{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative;counter-reset:j}
.jl::before{content:"";position:absolute;left:6%;right:6%;top:31px;border-top:3px dotted var(--gold)}
.jl li{position:relative}
.jn{width:62px;height:62px;border-radius:50%;background:var(--gold);color:var(--teal-dd);display:grid;place-items:center;font:600 26px var(--display);margin-bottom:22px;box-shadow:0 0 0 8px var(--cream);position:relative;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.jl li:hover .jn{transform:scale(1.12) rotate(-6deg)}
.jc b{display:block;font:600 21px/1.15 var(--display);margin-bottom:8px}
.jc p{color:var(--muted);font-size:15px;margin-bottom:12px}
.jc em{font-style:normal;font:600 12px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-t);background:rgba(212,180,131,.22);padding:4px 10px;border-radius:99px}
@media(max-width:900px){.jl{grid-template-columns:1fr;gap:34px}.jl::before{left:30px;right:auto;top:0;bottom:0;border-top:0;border-left:3px dotted var(--gold)}.jl li{padding-left:88px}.jn{position:absolute;left:0;top:0;margin:0}}

/* secteurs */
.sectors{padding:10px 0 110px}
.sectors .top{max-width:640px;margin-bottom:44px}
.sg{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.sg a{background:#fff;border:2px solid var(--line);border-radius:26px;padding:28px 24px;display:flex;flex-direction:column;gap:8px;transition:transform .3s cubic-bezier(.3,1.5,.5,1),border-color .2s,box-shadow .3s}
.sg a:hover{transform:translateY(-8px) rotate(-1deg);border-color:var(--gold);box-shadow:0 22px 44px rgba(11,58,71,.1)}
.sg svg{width:52px;height:52px;padding:13px;border-radius:50%;background:var(--teal);color:var(--gold);margin-bottom:10px}
.sg b{font:600 22px/1.1 var(--display)}
.sg span{color:var(--muted);font-size:15px}
.sg em{font:600 15px var(--display);font-style:normal;color:var(--teal-l);margin-top:auto;padding-top:12px}
@media(max-width:1000px){.sg{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.sg{grid-template-columns:1fr}}

/* barre collante mobile */
.stick{position:fixed;left:16px;right:16px;bottom:16px;z-index:70;background:var(--gold);color:var(--teal-dd);text-align:center;font:600 18px var(--display);padding:15px;border-radius:99px;box-shadow:0 14px 30px rgba(11,58,71,.35);display:none}
@media(max-width:960px){.stick:not(.hidden){display:block}}
.perks3.dk .top .sub{color:var(--gold-l)}
.jl::before{right:16%}
@media(max-width:900px){.jl::before{right:auto}}

/* simulateur de redistribution : mobile */
@media(max-width:900px){
  .part{padding:10px 0 80px}
  .share{gap:22px;border-radius:26px}
  .share-r{rotate:0deg;position:sticky;bottom:84px;z-index:5;padding:16px 20px;gap:2px;box-shadow:0 14px 30px rgba(0,0,0,.3)}
  .share-r strong{font-size:clamp(40px,12vw,56px)}
  .share-r p{display:none}
}
@media(max-width:560px){
  .share{padding:22px 18px}
  .formula{font-size:13px;margin-bottom:20px;overflow-wrap:anywhere}
  .share .field{margin-bottom:22px}
  .share .field label{font-size:16px;gap:12px;align-items:baseline}
  .share .field label b{white-space:nowrap}
  .share input[type=range]{height:10px}
  .share input[type=range]::-webkit-slider-thumb{width:34px;height:34px}
  .share input[type=range]::-moz-range-thumb{width:30px;height:30px}
}

/* mobile : finitions responsive */
@media(max-width:600px){
  .dash small,.jc em{font-size:13px}
}

/* simulateur : la mise en page ne bouge pas quand les chiffres changent */
.share-r strong,.share-r span,.share .field label b{font-variant-numeric:tabular-nums}
.share-r strong{white-space:nowrap}
.share-r span{white-space:nowrap;min-height:1.4em}
.share .field label b{min-width:7ch;text-align:right}
@media(max-width:900px){
  .share-r{min-height:132px;justify-content:center}
  .share-r strong{font-size:clamp(34px,10vw,46px)}
  .share-r span{font-size:14px}
}

@media(max-width:600px){
  .pro-visual>img,.pro-visual img{width:100%;margin:0}
}

/* simulateur de redistribution : mise en page mobile (titre, résultat, puis curseurs) */
@media(max-width:900px){
  .share{display:flex;flex-direction:column;gap:14px;padding:24px 16px;border-radius:24px}
  .share-l{display:contents}
  .share .eyebrow{order:1;margin-bottom:0}
  .share h3{order:2;font-size:26px;margin:0}
  .share .formula{order:3;margin:0;padding:10px 12px;border:1px dashed rgba(212,180,131,.5);border-radius:12px;font:500 12.5px/1.45 var(--body);text-align:center;color:var(--gold-l)}
  .share-r{order:4;position:static;rotate:0deg;margin:4px 0;padding:18px 16px;border-radius:20px;min-height:0;box-shadow:none}
  .share-r small{font-size:11px}
  .share-r strong{font-size:clamp(38px,12vw,52px)}
  .share-r p{display:block;font-size:12px;margin-top:8px}
  .share .field{order:5;margin:0;padding:14px 16px 18px;background:rgba(255,255,255,.07);border-radius:16px}
  .share .field label{font:500 15px/1.25 var(--body);margin-bottom:14px;align-items:center}
  .share .field label b{flex:none;min-width:0;padding:4px 12px;border-radius:99px;background:rgba(212,180,131,.18);font:600 15px var(--display);color:var(--gold)}
}