/* Page /freelances (22/10/2026, recette) — tunnel de vente : la méthode de leadsysteme.com (douleur, identification,
   retournement, démonstration, preuve, offre, décision), l’identité de Gouverne : boutons et titres verts de gouverne.io,
   étiquettes, listes et frises du produit. Écrans = vraies captures de Gouverne (données de démonstration). */
:root{
  --bg:#FBFCFB;--soft:#EFF5F1;--white:#fff;--ink:#101513;--ink2:#3F4944;--ink3:#5E6863;--line:#E2EAE5;
  --g:#0FB872;--gdeep:#07734A;--gdark:#065C3B;--gtint:#E3F6EC;--night:#0B100E;
  --d:'Sora','Sora Fallback',system-ui,sans-serif;--t:'Manrope','Manrope Fallback',system-ui,sans-serif;
  --pad:clamp(16px,3vw,40px);--max:1200px;--ease:cubic-bezier(.22,.8,.26,1);
  --sh:0 1px 2px rgba(16,21,19,.05),0 12px 32px -12px rgba(16,21,19,.14);
  color-scheme:light
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font:500 17px/1.6 var(--t);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,ul,ol,figure,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
mark{background:none;color:inherit}
:focus-visible{outline:3px solid var(--g);outline-offset:3px;border-radius:8px}
a,button,label,summary{touch-action:manipulation;-webkit-tap-highlight-color:rgba(15,184,114,.18)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:60;background:var(--ink);color:#fff;padding:10px 14px;border-radius:10px;font-weight:700}
.skip:focus{top:12px}

/* Barre de navigation collante, comme un tunnel */
.nav{position:sticky;top:0;z-index:40;background:rgba(251,252,251,.86);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.scrolled{border-bottom-color:var(--line)}
.nav-in{max-width:var(--max);margin:0 auto;padding:0 var(--pad);height:68px;display:flex;align-items:center;gap:20px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--d);font-weight:700;font-size:20px;letter-spacing:-.03em}
.logo svg{width:28px;height:28px}
.nav-r{margin-left:auto;display:flex;align-items:center;gap:18px;font-size:15px;font-weight:700}
.nav-r .in{color:var(--ink2)}
.nav .sm{display:none}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;border-radius:14px;font:800 16px/1 var(--t);white-space:nowrap;transition:transform .25s var(--ease),background-color .25s,box-shadow .25s,color .25s}
.btn svg{width:17px;height:17px;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:scale(.98)}
.btn-g{background:var(--gdeep);color:#fff;box-shadow:0 10px 26px -10px rgba(7,115,74,.65)}
.btn-g:hover{background:var(--gdark);transform:translateY(-2px);box-shadow:0 16px 32px -12px rgba(7,115,74,.7)}
.btn-s{min-height:42px;padding:0 18px;font-size:14px;border-radius:11px}
.btn-l{min-height:62px;padding:0 34px;font-size:18px}
.btn-o{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-o:hover{background:var(--ink);color:#fff}
.btn-o:disabled{opacity:.35;cursor:default;background:var(--white);color:var(--ink)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#000}
.btn-ink:disabled{opacity:.35;cursor:default}
.micro{margin-top:14px;font-size:15px;color:var(--ink3);font-weight:600}
.micro b{color:var(--ink);font-weight:800}
.micro-d{color:rgba(246,248,246,.7)}
.micro-d b{color:#fff}
.cta{display:flex;flex-direction:column;align-items:center;margin-top:36px}

/* Sections */
.c{text-align:center}
.sec,.soft,.dark,.band,.night,.final,.hero{padding:clamp(88px,10vw,140px) var(--pad)}
.sec>*,.soft>*,.dark>*,.band>*,.night>*,.final>*,.hero>*{max-width:var(--max);margin-left:auto;margin-right:auto}
.soft{background:var(--soft)}
.dark,.night,.final{background:var(--night);color:#F6F8F6;position:relative;overflow:hidden}
.dark>*,.final>*{position:relative}

/* Titres : géants, centrés, un bloc surligné */
.h-xl{font:800 clamp(44px,7vw,96px)/1.02 var(--d);letter-spacing:-.045em}
.h-l{font:800 clamp(34px,5vw,68px)/1.06 var(--d);letter-spacing:-.04em;max-width:15em}
.h-xl mark,.h-l mark{color:#0B955D}
.dark .h-l mark,.final .h-xl mark{color:#3DDC97}
.h-l .g{color:var(--gdeep)}
.kick{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;color:var(--ink3);font:800 12.5px/1 var(--t);letter-spacing:.12em;text-transform:uppercase}
.kick::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--g)}
.kick-d{color:rgba(246,248,246,.6)}
.sub{text-wrap:balance;margin-top:24px;font-size:clamp(18px,1.5vw,20px);line-height:1.6;color:var(--ink2);max-width:34em}
.sub.narrow{max-width:34em}
.dark .sub,.final .sub{color:rgba(246,248,246,.78)}
.dark .sub b{color:#fff}
.cap{margin-top:16px;font-size:14px;color:var(--ink3);font-weight:600}
.cap-d{color:rgba(246,248,246,.55)}
.fine{margin-top:28px;font-size:14px;line-height:1.55;color:var(--ink3);max-width:44em}
.money{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:800;color:var(--gdeep)}

/* 1 · Hero */
.hero{padding-top:clamp(14px,2.2vw,32px);padding-bottom:clamp(56px,6vw,88px)}
.hero .for{margin:18px 0 0}
.for{display:inline-flex;align-items:center;gap:12px;margin-bottom:0;font-size:15px;font-weight:700;color:var(--ink2)}
.bars{display:inline-flex;gap:4px}
.bars i{width:18px;height:6px;border-radius:3px;background:#D6DFDA}
.bars i:nth-child(-n+4){background:var(--g)}
.bars i:nth-child(4){box-shadow:0 0 0 3px rgba(15,184,114,.22)}
.hero .h-xl .l1,.hero .h-xl .l2{display:block}
.hero .h-xl .l2{margin-top:.08em}
.reframe{margin-top:22px;font:800 clamp(22px,2.4vw,32px)/1.25 var(--d);letter-spacing:-.025em}
.reframe em{font-style:normal;color:var(--gdeep);white-space:nowrap}
.lead{text-wrap:balance;margin-top:16px;font-size:clamp(17px,1.4vw,19px);color:var(--ink2);max-width:36em}
.frame{background:var(--white);border-radius:20px;box-shadow:0 2px 4px rgba(16,21,19,.04),0 30px 70px -28px rgba(16,21,19,.35);overflow:hidden;text-align:left}
.frame-bar{display:flex;align-items:center;gap:7px;height:40px;padding:0 16px;background:#F1F5F2;border-bottom:1px solid var(--line)}
.frame-bar i{width:11px;height:11px;border-radius:50%;background:#D5DED9}
.frame-bar span{margin-left:10px;font-size:13px;font-weight:600;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frame img{width:100%}
.pm{width:min(400px,100%);margin:0 auto;padding:12px 12px 16px;border-radius:40px;background:var(--ink);box-shadow:0 40px 80px -30px rgba(16,21,19,.45);text-align:left}
.pm-top{display:flex;justify-content:center;padding:4px 0 10px}
.pm-top span{width:92px;height:22px;border-radius:12px;background:#000}
.pm-t{margin:0 6px 10px;padding:0 4px;font:700 15px/1.3 var(--d);letter-spacing:-.01em;color:#F6F8F6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm .hshots,.pm .dshot{position:relative;aspect-ratio:780/651;border-radius:24px;overflow:hidden;background:var(--bg)}
.seg{margin-top:22px;display:inline-flex;gap:6px;background:var(--soft);padding:5px;border-radius:14px}
.seg button{min-height:40px;padding:0 16px;border-radius:10px;font-size:14px;font-weight:700;color:var(--ink3);transition:background-color .25s,color .25s}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--white);color:var(--ink)}
.seg button[data-go="2"].on{background:var(--gdeep);color:#fff}

/* 1 bis · Fais le compte : les montants du visiteur, une addition, et ce que Gouverne fait de chacun */
.ct{margin-top:48px!important;max-width:1120px!important;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:20px;text-align:left}
.ct-in{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(22px,3vw,36px);border-radius:26px;background:var(--white);box-shadow:var(--sh)}
.ct-ex{margin:0 0 6px;font-size:14px;font-weight:700;color:var(--ink3)}
.ct-ex.mine{color:#0B955D}
.ct-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:16px;padding:22px 0 20px;border-top:1px solid var(--line)}
.ct-row:first-of-type{border-top:0}
.ct-l{font:800 18px/1.3 var(--d);letter-spacing:-.02em;color:var(--ink)}
.ct-l small{display:block;margin-top:4px;font:600 14.5px/1.4 var(--t);letter-spacing:0;color:var(--ink3)}
.ct-v{font:800 clamp(22px,2.2vw,28px)/1 var(--d);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.ct-r{grid-column:1/-1;margin:16px 0 0;width:100%;height:30px;background:none;-webkit-appearance:none;appearance:none;cursor:pointer;--p:12%}
.ct-r:focus-visible{outline:3px solid var(--g);outline-offset:4px;border-radius:8px}
.ct-r::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:linear-gradient(90deg,var(--g) var(--p),#E2EAE5 var(--p))}
.ct-r::-moz-range-track{height:8px;border-radius:8px;background:#E2EAE5}
.ct-r::-moz-range-progress{height:8px;border-radius:8px;background:var(--g)}
.ct-r::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%;background:#fff;border:3px solid var(--gdeep);box-shadow:0 4px 12px -2px rgba(16,21,19,.3);transition:transform .2s}
.ct-r::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--gdeep);box-shadow:0 4px 12px -2px rgba(16,21,19,.3)}
.ct-r:active::-webkit-slider-thumb{transform:scale(1.15)}
.ct-out{display:flex;flex-direction:column;padding:clamp(24px,3vw,40px);border-radius:26px;background:var(--night);color:#F6F8F6}
.ct-k{margin:0;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(246,248,246,.65)}
.ct-total{margin:6px 0 0;font:800 clamp(52px,6.4vw,88px)/1 var(--d);letter-spacing:-.045em;color:#3DDC97;font-variant-numeric:tabular-nums;white-space:nowrap}
.ct-why{margin:16px 0 0;font-size:17px;line-height:1.5;color:rgba(246,248,246,.85);max-width:30em}
.ct-does{list-style:none;margin:22px 0 26px;padding:0;display:flex;flex-direction:column;gap:12px}
.ct-does li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.06);font-size:15.5px;line-height:1.5;color:rgba(246,248,246,.86);transition:opacity .3s}
.ct-does li.zero{opacity:.35}
.ct-m{min-width:84px;padding:3px 10px;border-radius:999px;background:rgba(61,220,151,.16);color:#3DDC97;font:800 14.5px/1.5 var(--d);text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums}
.ct-out .btn{align-self:flex-start;margin-top:auto}
.ct-out .micro{margin-top:12px}
/* 2 · Tu te reconnais ? six grandes cartes à cocher */
.rec-k{display:inline-flex;margin:0 0 18px!important;padding:7px 14px;border-radius:999px;background:var(--gtint);font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gdeep)}
.hl{display:inline-block;padding:0 .18em .04em;border-radius:.16em;background:var(--gdeep);color:#fff;transform:rotate(-1.2deg)}
.tiles{margin-top:48px!important;max-width:1180px!important;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;text-align:left}
.tile{position:relative;display:flex;flex-direction:column;gap:18px;min-height:236px;padding:28px 28px 30px;border-radius:26px;background:var(--white);border:1.5px solid var(--line);box-shadow:0 1px 2px rgba(16,21,19,.04),0 18px 40px -26px rgba(16,21,19,.22);cursor:pointer;transition:transform .3s var(--ease),border-color .3s,background-color .3s,box-shadow .3s}
.tile:hover{transform:translateY(-4px);box-shadow:0 1px 2px rgba(16,21,19,.04),0 26px 50px -24px rgba(16,21,19,.28)}
.tile input{position:absolute;opacity:0;width:1px;height:1px}
.tile:has(input:focus-visible){outline:3px solid var(--g);outline-offset:3px}
.tile-top{display:flex;align-items:flex-start;justify-content:space-between}
.tile-e{font-size:46px;line-height:1;font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.tile-c{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:2px solid #CBD6CF;background:var(--white);transition:background-color .25s,border-color .25s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.tile-c svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .35s .1s var(--ease)}
.tile-q{font:800 clamp(19px,1.6vw,23px)/1.3 var(--d);letter-spacing:-.025em;color:var(--ink)}
.tile-a{display:none;padding-top:16px;border-top:1.5px dashed rgba(7,115,74,.3);font-size:16px;line-height:1.5;font-weight:600;color:var(--gdeep)}
.tile-a::before{content:"Gouverne\00a0: ";font-weight:800}
.tile.on{background:#F1FAF5;border-color:var(--g);box-shadow:0 0 0 4px rgba(15,184,114,.12),0 22px 44px -26px rgba(7,115,74,.45)}
.tile.on .tile-c{background:var(--g);border-color:var(--g);transform:scale(1.08)}
.tile.on .tile-c svg{stroke-dashoffset:0}
.tile.on .tile-e{transform:scale(1.12) rotate(-6deg)}
.tile.on .tile-a{display:block;animation:fadeIn .35s var(--ease)}
.tally{margin-top:28px!important;max-width:1180px!important;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;border-radius:22px;background:var(--white);border:1.5px solid var(--line);text-align:left}
.tally p{margin:0;font-size:17px;color:var(--ink2)}
.tally p b{color:var(--ink)}
.tally.lit{background:var(--night);border-color:var(--night)}
.tally.lit p{color:rgba(246,248,246,.8)}
.tally.lit p b{color:#3DDC97}
.tally.lit .btn-g{background:var(--g);color:var(--ink)}
.proofbar{margin-top:20px!important;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:4px 0;max-width:980px!important;text-align:left}
.proofbar p{font-size:16px;color:var(--ink2)}
.proofbar p b{color:var(--ink)}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* 3 · Faux remèdes */
.nos{margin-top:40px!important;max-width:860px!important;background:var(--white);border-radius:22px;box-shadow:var(--sh);text-align:left;overflow:hidden}
.nos li{display:grid;grid-template-columns:minmax(0,15em) 1fr;gap:16px;align-items:baseline;padding:18px 26px;border-top:1px solid var(--line)}
.nos li:first-child{border-top:0}
.nos s{font:700 18px/1.3 var(--d);letter-spacing:-.02em;color:var(--ink3);text-decoration-thickness:2px;text-decoration-color:#C2453A}
.nos span{font-size:16px;color:var(--ink2)}
/* Bandeau vert : le cercle (rétabli à la demande du fondateur) */
.band{background:var(--gdeep);color:#fff}
.band-t{font:800 clamp(28px,3.6vw,48px)/1.12 var(--d);letter-spacing:-.035em;max-width:16em;text-wrap:balance}
.ring{position:relative;margin-top:44px!important;width:min(100%,520px);aspect-ratio:1;container-type:inline-size}
.ring-c{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring-c circle{fill:none;stroke:rgba(255,255,255,.22);stroke-width:.6}
.ring-c .ring-arc{stroke:#fff;stroke-width:1;stroke-linecap:round;stroke-dasharray:var(--arc,0) 100;transition:stroke-dasharray .9s var(--ease)}
.ring-n li{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(calc(var(--a) * 72deg)) translateY(-40cqw) rotate(calc(var(--a) * -72deg));white-space:nowrap;font:800 clamp(15px,1.5vw,19px)/1 var(--d);letter-spacing:-.02em;padding:13px 18px;border-radius:999px;background:rgba(255,255,255,.14);color:rgba(255,255,255,.8);transition:background-color .45s var(--ease),color .45s var(--ease)}
.ring-n li.lit{background:#fff;color:var(--gdark)}
.ring-m{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font:800 clamp(18px,2vw,26px)/1.2 var(--d);letter-spacing:-.03em;padding:0 30%}
.band-p{margin-left:auto!important;margin-right:auto!important;margin-top:36px;font-size:clamp(18px,1.5vw,20px);color:rgba(255,255,255,.9);max-width:34em;text-wrap:balance}

/* 4 · Retournement (sombre) */
.frame.big{margin-top:52px!important;max-width:1100px!important}
.dark .frame{box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}

/* 5 · La journée */
.day{margin-top:48px!important;max-width:780px!important;position:relative;text-align:left;padding-left:8px}
.day::before{content:"";position:absolute;left:111px;top:14px;bottom:14px;width:2px;background:#D6DFDA}
.mo{position:relative;display:grid;grid-template-columns:80px 22px 1fr;column-gap:18px;align-items:start;padding:14px 0}
.mo time{font:800 22px/1.2 var(--d);letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-align:right;padding-top:2px}
.mo-dot{position:relative;z-index:1;margin-top:7px;width:14px;height:14px;border-radius:50%;background:var(--white);box-shadow:inset 0 0 0 3px var(--ink3)}
.mo-dot.g{background:var(--g);box-shadow:0 0 0 4px var(--gtint)}
.mo-t{font:700 19px/1.3 var(--d);letter-spacing:-.02em}
.mo-d{margin-top:4px;font-size:16px;color:var(--ink2);line-height:1.5}
.by{margin-top:8px;display:inline-block;padding:4px 10px;border-radius:8px;background:var(--white);font-size:13px;font-weight:800;color:var(--ink2)}
.by-g{background:var(--gtint);color:var(--gdeep)}

/* 6 · Démonstration */
.steps{margin-top:44px!important;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:1000px!important}
.steps button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 16px;border-radius:12px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);transition:background-color .25s,transform .25s}
.steps button:hover{transform:translateY(-2px)}
.steps .sn{font:700 15px/1.2 var(--d);letter-spacing:-.01em;color:var(--ink)}
.steps .sw{font-size:13px;font-weight:700;color:var(--ink3)}
.steps button.done{background:var(--gtint)}
.steps button.done .sw{color:var(--gdeep)}
.steps button[aria-selected="true"]{background:var(--ink)}
.steps button[aria-selected="true"] .sn{color:#fff}
.steps button[aria-selected="true"] .sw{color:rgba(255,255,255,.7)}
.demo-grid{margin-top:44px!important;max-width:1100px!important;display:grid;grid-template-columns:240px 1fr;gap:40px;align-items:start;text-align:left}
.demo-grid .steps{margin:0!important;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;max-width:none!important}
.demo-grid .steps button{width:100%;align-items:flex-start;text-align:left}
.demo-panel{display:grid;grid-template-columns:400px 1fr;gap:40px;align-items:center;outline-offset:6px}
.dshot{position:relative}
.dshot picture,.dshot img{display:block;width:100%;height:100%}
.dshot img{object-fit:cover;object-position:top left;transition:opacity .25s var(--ease)}
.dshot img.fade{opacity:0}
.demo-txt{text-align:left}
.demo-what{font-size:clamp(18px,1.5vw,20px);line-height:1.5;font-weight:600;max-width:34em}
.demo-next{grid-column:1;font-size:16px;color:var(--ink3)}
.demo-next b{color:var(--gdeep)}
.demo-nav{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px}
.demo-next{margin-top:12px}
.proof-fig{max-width:820px!important}

/* 7 · La scène */
.night{padding-top:clamp(110px,12vw,170px);padding-bottom:clamp(110px,12vw,170px)}
.night-lines{margin-top:44px!important;max-width:34em!important;display:flex;flex-direction:column;gap:22px}
.night-lines p{font:600 clamp(19px,2vw,26px)/1.45 var(--d);letter-spacing:-.02em;color:rgba(246,248,246,.84)}
.night-lines b{color:#fff}
.night-end{margin-top:52px!important;font:800 clamp(24px,3vw,40px)/1.2 var(--d);letter-spacing:-.03em}
.night-end mark{color:#3DDC97}

/* 8 · Preuves */
.trio{margin-top:40px!important;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:left}
.tcard,.dcard,.plan{padding:28px;border-radius:22px;background:var(--white);box-shadow:var(--sh)}
.tcard h3,.dcard h3{font:800 20px/1.25 var(--d);letter-spacing:-.02em;margin-bottom:14px}
.ticks li{position:relative;padding:8px 0 8px 32px;font-size:16px;line-height:1.5;color:var(--ink2)}
.ticks svg{position:absolute;left:0;top:11px;width:20px;height:20px;padding:3px;border-radius:50%;background:var(--gtint);color:var(--gdeep)}
/* 8 · Qui fait quoi : un tableau aligné, à la largeur de la section */
#preuve>.proof-fig,#preuve>.who-w,#preuve>.founder{max-width:980px!important}
.who-w{margin-top:56px!important;padding:clamp(22px,3vw,36px);border-radius:26px;background:var(--white);box-shadow:var(--sh);text-align:left}
.who-t{margin:0 0 18px;font:800 clamp(24px,2.4vw,32px)/1.15 var(--d);letter-spacing:-.03em}
.who{width:100%;border-collapse:collapse;table-layout:fixed}
.who col{width:auto}
.who thead th{padding:0 16px 14px;text-align:left;vertical-align:bottom}
.who thead th:first-child{width:26%;padding-left:0}
.who-h{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:var(--soft);font:800 14px/1 var(--t);color:var(--ink2)}
.who-h.g{background:var(--gdeep);color:#fff}
.who tbody tr{border-top:1px solid var(--line)}
.who tbody th,.who td{padding:16px;vertical-align:top;text-align:left;font-size:16px;line-height:1.5}
.who tbody th{padding-left:0;font:800 17px/1.35 var(--d);letter-spacing:-.015em;color:var(--ink)}
.who-e{display:inline-block;width:30px;font-size:19px;font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}
.who td:nth-child(2){color:var(--ink);font-weight:600;background:linear-gradient(90deg,rgba(15,184,114,.07),rgba(15,184,114,.07))}
.who td:nth-child(3){color:var(--ink2)}
.who-none{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:#0B955D}
.who-none::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--g)}
.who-n{margin:18px 0 0;font-size:14.5px;color:var(--ink3)}
.founder{margin-top:40px!important;display:flex;align-items:center;gap:36px;padding:28px;border-radius:26px;background:var(--white);box-shadow:var(--sh);max-width:980px!important;text-align:left}
.founder-ph{width:200px;height:250px;object-fit:cover;border-radius:18px;flex:none}
.founder .kick{margin-bottom:12px}
.founder-t{font:800 clamp(24px,2.4vw,32px)/1.15 var(--d);letter-spacing:-.03em;margin-bottom:12px}
.founder p{color:var(--ink2)}
.founder .btn{margin-top:20px}

/* 9 · Pour qui */
.duo{margin-top:48px!important;display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:1000px!important;text-align:left}
.dcard.yes{box-shadow:inset 0 0 0 2px var(--g),var(--sh)}
.dcard.no .ticks svg{background:#FBE9E7;color:#C2453A}

/* 10 · Offre */
.plans{margin-top:48px!important;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:1080px!important;text-align:left}
.plan-n{font:800 15px/1 var(--t);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.plan-p{margin-top:14px;font:600 20px/1 var(--d);color:var(--ink2)}
.plan-p b{font:800 54px/1 var(--d);letter-spacing:-.04em;color:var(--ink)}
.plan-u{margin:8px 0 16px;font-size:15px;color:var(--ink3)}
.plan-pro{background:var(--ink);color:#fff}
.plan-pro .plan-n,.plan-pro .plan-u{color:rgba(255,255,255,.65)}
.plan-pro .plan-p{color:rgba(255,255,255,.8)}
.plan-pro .plan-p b{color:#fff}
.plan-pro .ticks li{color:rgba(255,255,255,.85)}
.plan-pro .ticks svg{background:var(--g);color:var(--ink)}

/* 11 · FAQ */
.faq{margin-top:44px!important;max-width:860px!important;display:flex;flex-direction:column;gap:12px;text-align:left}
.faq details{border-radius:18px;background:var(--white);box-shadow:var(--sh)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 26px;font:700 18px/1.35 var(--d);letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:10px;height:10px;border-right:2.5px solid var(--ink3);border-bottom:2.5px solid var(--ink3);transform:rotate(45deg) translate(-3px,-3px);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px);border-color:var(--gdeep)}
.faq details p{padding:0 26px 24px;color:var(--ink2);font-size:16.5px;line-height:1.6}

/* 12 · Fin */
.final .h-xl{max-width:13em}

/* Pied de page */
.foot{max-width:var(--max);margin:0 auto;padding:44px var(--pad) 56px;display:flex;align-items:center;gap:26px;flex-wrap:wrap;font-size:14px;color:var(--ink3);font-weight:600}
.foot .logo{color:var(--ink)}
.foot nav{display:flex;gap:22px;flex-wrap:wrap}
.foot nav a:hover{color:var(--ink)}
.foot p{margin-left:auto}

/* Barre collante (téléphone) */
.bar{position:fixed;left:10px;right:10px;bottom:10px;z-index:30;display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 18px;border-radius:999px;background:var(--ink);color:#fff;box-shadow:0 12px 30px -8px rgba(0,0,0,.45);transform:translateY(140%);transition:transform .35s var(--ease)}
.bar p{font-size:13px;line-height:1.3;color:rgba(255,255,255,.7)}
.bar b{display:block;color:#fff;font-size:14px}
.bar.on{transform:none}

/* Apparitions */
.js [data-rv]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js [data-rv].in{opacity:1;transform:none}

@media (max-width:900px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ct{grid-template-columns:1fr;max-width:680px!important}
}
@media (max-width:1080px){
  .demo-grid{grid-template-columns:1fr}
  .demo-grid .steps{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .demo-grid .steps button{width:auto;align-items:center}
  .demo-panel{grid-template-columns:1fr;justify-items:center}
  .demo-txt{max-width:560px}
  .trio{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  body{font-size:16px}
  .nav-in{height:60px}
  .nav .lg{display:none}.nav .sm{display:inline}
  .nav-r{gap:14px}
  .logo svg{width:24px;height:24px}
  .h-xl{font-size:clamp(38px,11vw,52px)}
  .h-l{font-size:clamp(30px,8.6vw,40px)}
  .h-l br,.h-xl br{display:none}
  .for{font-size:13.5px;gap:10px;margin-bottom:20px;text-align:left}
  .bars i{width:12px}
  .pm{padding:10px 10px 14px;border-radius:34px}
  .frame-bar{height:32px}
  .frame-bar span{font-size:13px}
  .seg{margin-top:44px;width:100%;justify-content:space-between}
  .seg button{flex:1;padding:0 4px;font-size:13px;white-space:nowrap}
  .btn-l{width:100%;white-space:normal;text-align:center;min-height:58px;font-size:16px;padding:0 20px}
  .trio,.duo,.plans{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr;gap:12px;margin-top:36px!important}
  .tile{min-height:0;padding:20px 20px 22px;gap:12px;border-radius:22px}
  .tile-e{font-size:38px}
  .tile-q{font-size:18px}
  .tile-a{font-size:15.5px;padding-top:12px}
  .tally{flex-direction:column;align-items:stretch;text-align:center;padding:18px}
  .rec-k{font-size:12px}
  .ct-l{font-size:16.5px}
  .ct-out .btn{align-self:stretch}
  .ct-does li{grid-template-columns:1fr;gap:8px}
  .ct-m{justify-self:start}
  .who thead{display:none}
  .who,.who tbody,.who tr,.who th,.who td{display:block;width:100%}
  .who tbody tr{padding:16px 0}
  .who tbody th{padding:0 0 10px}
  .who td{padding:10px 12px;border-radius:12px;font-size:15.5px}
  .who td:nth-child(2)::before,.who td:nth-child(3)::before{display:block;margin-bottom:4px;font:800 12.5px/1 var(--t);letter-spacing:.06em;text-transform:uppercase}
  .who td:nth-child(2)::before{content:"Gouverne";color:#0B955D}
  .who td:nth-child(3)::before{content:"Toi";color:var(--ink3)}
  .who td:nth-child(3){padding:8px 12px 0;font-size:15px}
  .who td:nth-child(3)::before{display:inline;margin:0 8px 0 0}
  .who tbody tr{padding:14px 0}
  .nos li{grid-template-columns:1fr;gap:4px;padding:16px 18px}
  .ring-n li{font-size:13px;padding:9px 11px}
  .ring-m{font-size:16px;padding:0 30%}
  .day::before{left:73px}
  .mo{grid-template-columns:52px 18px 1fr;column-gap:12px}
  .mo time{font-size:17px}
  .proofbar{flex-direction:column;align-items:stretch;text-align:center}
  .demo-txt{display:block}
  .demo-nav{margin-top:18px}
  .demo-nav .btn{flex:1;padding:0 12px;font-size:15px}
  .steps button{padding:8px 12px}
  .steps .sw{display:none}
  .founder{flex-direction:column;align-items:flex-start;padding:22px}
  .founder-ph{width:120px;height:150px}
  .founder .btn{width:100%;white-space:normal}
  .plan-p b{font-size:44px}
  .faq summary{padding:18px 18px;font-size:16.5px}
  .faq details p{padding:0 18px 20px}
  .foot{flex-direction:column;align-items:flex-start;gap:16px;padding-bottom:100px}
  .foot p{margin-left:0}
  .bar{display:flex}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js [data-rv]{opacity:1;transform:none}
  .ring-n li{background:#fff;color:var(--gdark)}
  .ring-c .ring-arc{stroke-dasharray:100 100}
}

/* Hero vivant : le téléphone de la cliente et le fil des événements (22/10/2026) */

/* Démonstration des deux côtés */
.duo2{margin-top:40px!important;max-width:1040px!important}
.steps2{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.steps2 button{position:relative;width:100%;padding:12px 8px 14px;border-radius:12px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;transition:background-color .25s}
.steps2 .sn{font:700 15px/1.2 var(--d);letter-spacing:-.01em;color:var(--ink3)}
.steps2 button.done .sn{color:var(--ink)}
.steps2 button[aria-selected="true"]{background:var(--ink)}
.steps2 button[aria-selected="true"] .sn{color:#fff}
.bar2{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--g);transform:scaleX(0);transform-origin:left}
.steps2 button.done .bar2{transform:scaleX(1);opacity:.5}
.steps2 button[aria-selected="true"] .bar2{transform:scaleX(var(--p,0));opacity:1}
.sides{margin-top:32px;display:grid;grid-template-columns:1fr 56px 1fr;align-items:start;gap:16px;outline-offset:8px}
.side{display:flex;flex-direction:column;align-items:center}
.side-k{margin-bottom:14px;font:800 15px/1 var(--t);color:var(--ink2)}
.side-v{width:min(380px,100%);min-height:520px;display:flex;align-items:flex-start;justify-content:center}
.side-arrow{align-self:center;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--gtint);color:var(--gdeep)}
.side-arrow svg{width:26px;height:26px}
.sides .pm{width:min(380px,100%)}
.sides .pm .dshot{aspect-ratio:780/651}
.swap{animation:swapIn .45s var(--ease)}
@keyframes swapIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.mail{width:100%;border-radius:22px;background:var(--white);box-shadow:0 30px 70px -32px rgba(16,21,19,.4);text-align:left;overflow:hidden}
.mail-top{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#F1F5F2;font-size:13px;font-weight:700;color:var(--ink3)}
.mail-top svg{width:16px;height:16px}
.mail-h{display:flex;align-items:center;gap:12px;padding:16px 18px 6px}
.mail-av{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--gtint);color:var(--gdeep);font-weight:800;font-size:14px}
.mail-h b{display:block;font-size:15px}
.mail-h small{display:block;font-size:13px;color:var(--ink3)}
.mail-s{padding:8px 18px 0;font:700 16px/1.35 var(--d);letter-spacing:-.01em}
.mail-b{padding:6px 18px 4px;font-size:14.5px;line-height:1.55;color:var(--ink2)}
.mail-b p{margin:8px 0 0}
.mail-b .amt{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.mail-att{display:inline-flex;align-items:center;gap:8px;margin:12px 18px 0;padding:8px 12px;border-radius:10px;background:var(--soft);font-size:13.5px;font-weight:700;color:var(--ink2)}
.mail-att svg{width:16px;height:16px}
.mail-cta{display:block;margin:14px 18px 18px;padding:12px;border-radius:12px;background:var(--gdeep);color:#fff;text-align:center;font-weight:800;font-size:14.5px}
.duo2 .demo-what{margin:28px auto 0;text-align:center;max-width:36em;min-height:3.2em}
.duo2 .demo-nav{justify-content:center}
@media (max-width:1080px){
}
@media (max-width:720px){
  .steps2{grid-template-columns:repeat(4,1fr)}
  .steps2 .sn{font-size:13.5px}
  .sides{grid-template-columns:1fr;justify-items:center;gap:12px}
  .side-arrow{transform:rotate(90deg);width:44px;height:44px}
  .side-v{min-height:0}
}
@media (prefers-reduced-motion:reduce){
}
.sides .pm .dshot.cl{aspect-ratio:780/760}
@media (max-width:720px){
  .sides .pm,.side-v{width:min(300px,100%)}
  .side-v .pm{width:100%}
  .mail-b{font-size:14px}
}

/* ═══ Reconstruction sur la structure de leadsysteme.com (22/10/2026, demande du fondateur) ═══
   Pastilles, titre surligné, écran entouré de notifications, preuve chiffrée, horloge de la journée,
   déroulé, cartes numérotées, « qui te parle ». Couleurs et polices de Gouverne. */

/* Étiquette de section (pastille verte en capitales) */
.kp{display:inline-flex;margin:0 0 18px!important;padding:7px 14px;border-radius:999px;background:var(--gtint);font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gdeep)}
.kp-d{background:rgba(61,220,151,.14);color:#3DDC97}
.sec.tight{padding-top:clamp(64px,7vw,100px);padding-bottom:clamp(64px,7vw,100px)}
.h-m{font:800 clamp(30px,3.6vw,48px)/1.08 var(--d);letter-spacing:-.04em}

/* 1 · Héros */
.pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:26px!important}
.pills li{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;background:var(--white);box-shadow:0 1px 2px rgba(16,21,19,.06),0 6px 16px -8px rgba(16,21,19,.18);font-size:14px;font-weight:700;color:var(--ink2)}
.pills b{font:800 14px/1 var(--d);color:var(--ink)}
.pills .pill-g{background:var(--gdeep);color:#fff}
.pills .pill-g b{color:#fff}
.live{width:8px;height:8px;border-radius:50%;background:var(--g);box-shadow:0 0 0 0 rgba(15,184,114,.5);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(15,184,114,.5)}70%{box-shadow:0 0 0 8px rgba(15,184,114,0)}100%{box-shadow:0 0 0 0 rgba(15,184,114,0)}}
.hlb{display:inline;padding:0 .14em .06em;border-radius:.14em;background:var(--gdeep);color:#fff;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero .h-xl .l2{margin-top:.12em}
.hero-media{position:relative;margin-top:60px!important;max-width:1100px!important}
.hero-media .frame{box-shadow:0 2px 4px rgba(16,21,19,.04),0 40px 90px -34px rgba(16,21,19,.42)}
.chip{position:absolute;z-index:2;display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:16px;background:var(--white);box-shadow:0 2px 4px rgba(16,21,19,.06),0 18px 40px -16px rgba(16,21,19,.35);text-align:left;font-size:13px;line-height:1.35;color:var(--ink3);animation:float 6s ease-in-out infinite}
.chip b{display:block;font:800 14.5px/1.3 var(--d);letter-spacing:-.01em;color:var(--ink)}
.chip-i{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:12px;background:var(--gtint);font-size:19px;font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}
.chip-a{right:-28px;top:-26px}
.chip-b{left:-34px;top:42%;animation-delay:-2s}
.chip-c{right:6%;bottom:-28px;animation-delay:-4s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hero>.cap{margin-top:40px}

/* 3 · Tu as déjà essayé : des pastilles barrées */
.xs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:36px!important;max-width:900px!important}
.xs li{display:inline-flex;align-items:center;gap:9px;padding:12px 18px;border-radius:999px;background:var(--white);box-shadow:var(--sh);font:700 16px/1.2 var(--d);letter-spacing:-.01em;color:var(--ink3)}
.xs svg{width:18px;height:18px;padding:3px;border-radius:50%;background:#FBE9E7;color:#C2453A}
.xs s{text-decoration-thickness:2px;text-decoration-color:#C2453A}

/* 4 · La boucle */
.band .band-t{max-width:18em}

/* 5 · La preuve */
.stats{margin-top:48px!important;max-width:1100px!important;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.stat{padding:clamp(24px,3vw,36px);border-radius:24px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.stat b{display:block;font:800 clamp(48px,6vw,80px)/1 var(--d);letter-spacing:-.045em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat p{margin-top:12px;font-size:16px;line-height:1.45;color:rgba(246,248,246,.75)}
#preuve .proof-fig{max-width:900px!important}

/* 7 · Pendant que tu bosses : l'horloge et la journée */
.clock-w{margin-top:48px!important;max-width:1080px!important;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:20px;align-items:stretch;text-align:left}
.clock{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:360px;padding:32px;border-radius:28px;background:var(--night);color:#F6F8F6;text-align:center}
.clock-t{font:800 clamp(72px,9vw,128px)/1 var(--d);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.clock-c{margin-top:16px;font-size:17px;color:rgba(246,248,246,.72)}
.clock-t.tick{animation:tick .4s var(--ease)}
@keyframes tick{from{opacity:.2;transform:translateY(8px)}to{opacity:1;transform:none}}
.hours{display:flex;flex-direction:column;gap:10px}
.hours li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;padding:16px 20px;border-radius:18px;background:var(--white);box-shadow:inset 0 0 0 1.5px transparent,var(--sh);opacity:.5;transition:opacity .4s var(--ease),box-shadow .4s var(--ease)}
.hours li.on{opacity:1;box-shadow:inset 0 0 0 2px var(--g),var(--sh)}
.hr-e{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--soft);font-size:20px;font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}
.hours time{font:800 13.5px/1 var(--t);letter-spacing:.04em;color:#0B955D}
.hr-t{margin-top:4px;font:700 17.5px/1.3 var(--d);letter-spacing:-.015em}
.hr-d{margin-top:3px;font-size:15px;line-height:1.45;color:var(--ink2)}
.hand{margin-top:24px!important;max-width:1080px!important;padding:16px 22px;border-radius:18px;background:var(--white);box-shadow:var(--sh);font-size:16px;color:var(--ink2);text-align:left}
.hand b{color:var(--ink)}

/* 8 · Le déroulé */
.road{position:relative;margin-top:52px!important;max-width:780px!important;text-align:left}
.road::before{content:"";position:absolute;left:27px;top:28px;bottom:28px;width:2px;background:linear-gradient(var(--g),#D6DFDA)}
.road li{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:20px;padding-bottom:18px}
.road li:last-child{padding-bottom:0}
.road-n{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--gdeep);color:#fff;font:800 18px/1 var(--d);box-shadow:0 0 0 6px var(--bg)}
.road-c{padding:22px 24px;border-radius:20px;background:var(--white);box-shadow:var(--sh)}
.road-k{font:800 12.5px/1 var(--t);letter-spacing:.1em;text-transform:uppercase;color:#0B955D}
.road-c h3{margin-top:8px;font:800 21px/1.25 var(--d);letter-spacing:-.02em}
.road-c>p:not(.road-k):not(.tags){margin-top:8px;font-size:16px;line-height:1.55;color:var(--ink2)}
.tags{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px}
.tags span{padding:5px 10px;border-radius:8px;background:var(--gtint);font-size:13px;font-weight:800;color:var(--gdeep)}

/* 9 · Ce que Gouverne fait : cartes numérotées */
.stack{margin-top:52px!important;max-width:1100px!important;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;text-align:left}
.stk{padding:clamp(22px,2.6vw,30px);border-radius:24px;background:var(--white);box-shadow:var(--sh)}
.stk-w{grid-column:1/-1;background:linear-gradient(145deg,#F6FCF9,#E3F6EC);box-shadow:inset 0 0 0 1.5px rgba(15,184,114,.35),var(--sh)}
.stk h3{display:flex;align-items:baseline;gap:12px;font:800 clamp(20px,1.8vw,24px)/1.2 var(--d);letter-spacing:-.025em}
.stk-n{font:800 15px/1 var(--d);color:#0B955D;font-variant-numeric:tabular-nums}
.stk-g{margin-top:12px;font-size:16px;line-height:1.55;color:var(--ink);font-weight:600}
.stk-y{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);font-size:15px;color:var(--ink2);font-weight:700}
.stk-y .none{color:#0B955D}
.stk-w .stk-g{font-size:17px;max-width:46em}

/* 12 · Qui te parle */
.me{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center;max-width:1000px!important;text-align:left}
.me-ph{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:26px;box-shadow:var(--sh)}
.me-txt .kp{margin-bottom:16px!important}
.me-txt p{margin-top:16px;font-size:17px;line-height:1.65;color:var(--ink2);max-width:34em}
.me-txt .btn{margin-top:26px}

/* 14 · Fin */
.final .h-xl{max-width:15em;font-size:clamp(38px,5.6vw,80px)}

@media (max-width:1080px){
  .chip-a{right:8px}.chip-b{left:8px}
}
@media (max-width:900px){
  .clock-w{grid-template-columns:1fr}
  .clock{min-height:0;padding:28px}
  .stats{grid-template-columns:1fr}
}
@media (max-width:720px){
  .pills{gap:6px;margin-bottom:20px!important}
  .pills li{padding:7px 11px;font-size:13px}
  .hero-media{margin-top:40px!important}
  .chip{position:static;margin-top:10px;animation:none;width:100%}
  .chip-b,.chip-c{display:none}
  .hero-media .frame{margin-bottom:6px}
  .xs li{font-size:15px;padding:10px 14px}
  .stack{grid-template-columns:1fr}
  .road::before{left:21px}
  .road li{grid-template-columns:44px minmax(0,1fr);gap:14px}
  .road-n{width:44px;height:44px;font-size:16px}
  .road-c{padding:18px}
  .me{grid-template-columns:1fr}
  .me-ph{max-width:220px}
  .me-txt .btn{width:100%;white-space:normal}
  .final .h-xl{font-size:clamp(32px,9vw,44px)}
}
@media (prefers-reduced-motion:reduce){
  .live,.chip{animation:none}
}

/* Preuve fusionnée avec la démonstration (fond clair) ; « inclus » avant le prix */
.stats-l{margin-bottom:8px}
.stats-l .stat{background:var(--white);box-shadow:var(--sh)}
.stats-l .stat b{color:var(--ink)}
.stats-l .stat:first-child b{color:#0B955D}
.stats-l .stat p{color:var(--ink2)}
.incl{margin-top:40px!important;max-width:880px!important;padding:clamp(22px,3vw,32px);border-radius:24px;background:var(--white);box-shadow:var(--sh);text-align:left}
.incl-t{font:800 18px/1.2 var(--d);letter-spacing:-.02em}
.incl-l{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
.incl+.plans{margin-top:18px!important}
@media (max-width:720px){.incl-l{grid-template-columns:1fr}}

/* Héros : trois notifications de même largeur à la place de l’écran du logiciel (retour du fondateur : pas d’écrans de compta) */
.notifs{margin-top:52px!important;max-width:1000px!important;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;text-align:left}
.notif{display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:18px;background:var(--white);box-shadow:0 2px 4px rgba(16,21,19,.05),0 18px 40px -18px rgba(16,21,19,.3);font-size:14px;line-height:1.4;color:var(--ink3);animation:float 6s ease-in-out infinite}
.notif:nth-child(2){animation-delay:-2s}.notif:nth-child(3){animation-delay:-4s}
.notif b{display:block;font:800 15.5px/1.3 var(--d);letter-spacing:-.01em;color:var(--ink)}
@media (max-width:720px){.notifs{grid-template-columns:1fr;gap:10px;margin-top:36px!important}.notif{animation:none}}
@media (prefers-reduced-motion:reduce){.notif{animation:none}}

/* « Qui fait quoi ? » remis sous la démonstration (demande du fondateur) */
#demo>.who-w{max-width:980px!important;margin-top:64px!important}

/* Déroulé animé (demande du fondateur, modèle leadsysteme.com) : la ligne se remplit au défilement,
   chaque étape s’allume, l’horloge de l’étape avance. */
.road::before{background:#DCE5DF}
.road::after{content:"";position:absolute;left:27px;top:28px;width:2px;height:calc((100% - 56px) * var(--fill,0));background:var(--g);box-shadow:0 0 12px rgba(15,184,114,.55);border-radius:2px;transition:height .15s linear}
.road-n{background:var(--white);box-shadow:0 0 0 6px var(--bg),inset 0 0 0 2px #CBD6CF;transition:background-color .45s var(--ease),box-shadow .45s var(--ease),transform .45s cubic-bezier(.3,1.6,.5,1)}
.clk{width:34px;height:34px}
.clk-f{fill:none;stroke:#CBD6CF;stroke-width:2.2;transition:stroke .45s}
.clk-hh,.clk-mm{stroke:#9AA8A1;stroke-width:2.6;stroke-linecap:round;transform-box:view-box;transform-origin:20px 20px;transition:transform 1.4s cubic-bezier(.22,.8,.26,1),stroke .45s}
.clk-mm{stroke-width:2}
.clk-c{fill:#9AA8A1;transition:fill .45s}
.road-c{opacity:.42;transform:translateX(10px);transition:opacity .6s var(--ease),transform .6s var(--ease),box-shadow .6s var(--ease)}
.road-i{display:inline-block;margin-right:8px;padding:3px 8px;border-radius:6px;background:var(--soft);color:var(--ink3);transition:background-color .45s,color .45s}
.road .tags span{opacity:0;transform:translateY(6px) scale(.96);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.road li.lit .road-n{background:var(--gdeep);box-shadow:0 0 0 6px var(--bg),0 0 0 10px rgba(15,184,114,.18);transform:scale(1.06)}
.road li.lit .clk-f{stroke:rgba(255,255,255,.55)}
.road li.lit .clk-hh,.road li.lit .clk-mm{stroke:#fff}
.road li.lit .clk-c{fill:#fff}
.road li.lit .clk-hh{transform:rotate(var(--h))}
.road li.lit .clk-mm{transform:rotate(var(--m))}
.road li.lit .road-c{opacity:1;transform:none;box-shadow:inset 3px 0 0 var(--g),var(--sh)}
.road li.lit .road-i{background:var(--gdeep);color:#fff}
.road li.lit .tags span{opacity:1;transform:none}
.road li.lit .tags span:nth-child(2){transition-delay:.12s}
@media (max-width:720px){.road::after{left:21px;top:22px;height:calc((100% - 44px) * var(--fill,0))}.clk{width:28px;height:28px}}
@media (prefers-reduced-motion:reduce){.road-c,.road .tags span{opacity:1;transform:none}}

/* ═══ Mouvement (22/10/2026, demande du fondateur : « qu’on voie les mouvements », modèle leadsysteme.com) ═══ */

/* « Pendant que tu bosses » : horloge, barre qui avance, moments qui se cochent */
.day2{margin-top:48px!important;max-width:1080px!important;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:20px;align-items:start;text-align:left}
.clockbox{position:sticky;top:96px;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:380px;padding:32px;border-radius:28px;background:var(--night);color:#F6F8F6;text-align:center;overflow:hidden}
.clockbox::before{content:"";position:absolute;left:50%;bottom:-60%;width:120%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(15,184,114,.32),transparent);transform:translateX(-50%);animation:breathe 5s ease-in-out infinite}
.clock2{position:relative;font:800 clamp(72px,9vw,128px)/1 var(--d);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.clock2.tick{animation:tick .45s var(--ease)}
.clock2-c{position:relative;margin-top:14px;font-size:17px;color:rgba(246,248,246,.74);min-height:1.6em}
.clock2-bar{position:relative;margin-top:24px;width:min(240px,80%);height:6px;border-radius:6px;background:rgba(255,255,255,.12);overflow:hidden}
.clock2-bar i{position:absolute;inset:0;background:var(--g);transform:scaleX(var(--p,0));transform-origin:left;transition:transform .9s var(--ease)}
@keyframes breathe{0%,100%{opacity:.55;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.08)}}
.tl2{display:flex;flex-direction:column;gap:10px}
.tl2 li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 18px;border-radius:18px;background:var(--white);box-shadow:var(--sh);opacity:.45;transform:translateX(8px);transition:opacity .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease)}
.tl2 li.on{opacity:1;transform:none;box-shadow:inset 0 0 0 2px var(--g),0 18px 40px -20px rgba(7,115,74,.45)}
.tl2 li.done{opacity:1;transform:none}
.tl2-e{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--soft);font-size:20px;font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.tl2 li.on .tl2-e{transform:scale(1.12) rotate(-6deg)}
.tl2 time{font:800 13.5px/1 var(--t);letter-spacing:.04em;color:#0B955D}
.tl2 p{margin-top:4px;font:700 16.5px/1.35 var(--d);letter-spacing:-.01em;color:var(--ink)}
.tl2-ck{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid #CBD6CF;transition:background-color .3s,border-color .3s,transform .4s cubic-bezier(.3,1.6,.5,1)}
.tl2-ck svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .4s .1s var(--ease)}
.tl2 li.done .tl2-ck{background:var(--g);border-color:var(--g);transform:scale(1.06)}
.tl2 li.done .tl2-ck svg{stroke-dashoffset:0}
#journee .hand{max-width:1080px!important}

/* Mots surlignés : le surlignage se dessine de gauche à droite */
.js .hlb,.js .hl{background-image:linear-gradient(var(--gdeep),var(--gdeep));background-repeat:no-repeat;background-size:0% 100%;background-color:transparent;transition:background-size .9s .25s var(--ease),color .25s .95s}
.js .hlb{color:var(--ink)}
.js .hl{color:var(--ink)}
.js .in .hlb,.js .in.hlb,.js .in .hl,.js .hero .hlb{background-size:100% 100%;color:#fff}
.js .hero .hlb{transition-delay:.45s}

/* Héros : les lignes montent à l’arrivée */
.js .hero .pills li,.js .hero .h-xl .l1,.js .hero .h-xl .l2,.js .hero .reframe,.js .hero .lead,.js .hero .cta{animation:rise .7s var(--ease) backwards}
.js .hero .pills li:nth-child(2){animation-delay:.06s}.js .hero .pills li:nth-child(3){animation-delay:.12s}
.js .hero .h-xl .l1{animation-delay:.08s}.js .hero .h-xl .l2{animation-delay:.2s}
.js .hero .reframe{animation-delay:.38s}.js .hero .lead{animation-delay:.48s}.js .hero .cta{animation-delay:.58s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Boutons principaux : ils respirent, un reflet passe */
.btn-l.btn-g{position:relative;overflow:hidden;animation:glow 3.2s ease-in-out infinite}
.btn-l.btn-g::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transform:translateX(-150%) skewX(-20deg);animation:shine 4.5s ease-in-out infinite;pointer-events:none}
@keyframes glow{0%,100%{box-shadow:0 10px 26px -10px rgba(7,115,74,.6)}50%{box-shadow:0 12px 38px -8px rgba(15,184,114,.75)}}
@keyframes shine{0%,70%{transform:translateX(-150%) skewX(-20deg)}100%{transform:translateX(350%) skewX(-20deg)}}

/* Apparitions en cascade (cartes, offres, tableau, questions) */
.js [data-st]>*{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
.js [data-st].in>*{opacity:1;transform:none}

/* « Tu as déjà essayé » : la ligne barre le mot sous tes yeux */
.js .xs s{text-decoration:none;background:linear-gradient(#C2453A,#C2453A) no-repeat 0 55%/0% 2px;transition:background-size .5s var(--ease);transition-delay:calc(.3s + var(--i,0) * 180ms)}
.js .xs.in s{background-size:100% 2px}
.js .xs svg{transform:scale(0);transition:transform .4s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(.3s + var(--i,0) * 180ms)}
.js .xs.in svg{transform:none}

/* « Qui fait quoi ? » : les lignes glissent l’une après l’autre */
.js .who tbody tr{opacity:0;transform:translateX(-14px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
.js .who-w.in tbody tr{opacity:1;transform:none}

/* Prix : la carte Pro flotte doucement */
.plan-pro{animation:float 7s ease-in-out infinite}

/* Dernière section : halo qui respire */
.final{isolation:isolate}
.final::before{content:"";position:absolute;left:50%;bottom:-70%;z-index:-1;width:110%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(15,184,114,.28),transparent);animation:breathe 6s ease-in-out infinite}

@media (max-width:900px){
  .day2{grid-template-columns:1fr}
  .clockbox{position:relative;top:0;min-height:0;padding:26px}
}
@media (max-width:720px){
  .tl2 li{gap:12px;padding:14px}
  .tl2 p{font-size:15.5px}
}
@media (prefers-reduced-motion:reduce){
  .tl2 li{opacity:1;transform:none}
  .js [data-st]>*,.js .who tbody tr{opacity:1;transform:none}
  .js .hlb,.js .hl{background-size:100% 100%;color:#fff}
  .js .xs s{background-size:100% 2px}.js .xs svg{transform:none}
  .btn-l.btn-g,.btn-l.btn-g::after,.plan-pro,.final::before,.clockbox::before{animation:none}
}

/* ═══ Mouvement au défilement (variables écrites par freelances.js ; rien sans JS ni si l'animation est réduite) ═══ */
.prog{position:fixed;left:0;right:0;top:0;z-index:50;height:3px;background:var(--g);transform-origin:left;transform:scaleX(0);pointer-events:none}
/* Haut de page : le bloc titre glisse et s'efface en douceur quand on descend */
.sc .hero>.pills,.sc .hero>.h-xl,.sc .hero>.reframe,.sc .hero>.lead{translate:0 calc(var(--sy,0) * -70px);opacity:calc(1 - var(--sy,0) * .85)}
.sc .hero>.cta{translate:0 calc(var(--sy,0) * -40px)}
/* Grands titres : ils montent et se posent à mesure qu'on arrive dessus */
.sc [data-sc="t"]{translate:0 calc((1 - var(--en,1)) * 46px);scale:calc(.94 + var(--en,1) * .06)}
/* Phrases fortes : écrites mot par mot avec le défilement */
.sc [data-sc="w"] .wd{display:inline-block;opacity:clamp(.16, calc(var(--en,1) * var(--n) * 1.25 - var(--i) + .2), 1);translate:0 calc((1 - clamp(0, calc(var(--en,1) * var(--n) * 1.25 - var(--i) + .2), 1)) * 12px)}
/* Cartes « Tu te reconnais ? » : trois vitesses, un effet de profondeur */
.sc [data-sc="p"]{translate:0 calc((var(--sp,.5) - .5) * var(--k,0) * -70px)}
/* Démonstration, tableau, journée, déroulé : ils grandissent en entrant */
.sc .sides[data-sc],.sc .who-w[data-sc],.sc .day2[data-sc],.sc .road[data-sc]{scale:calc(.93 + var(--en,1) * .07);transform-origin:50% 0}
/* Les deux offres arrivent des deux côtés */
.sc .plan[data-sc]{translate:calc((1 - var(--en,1)) * -90px) 0;rotate:calc((1 - var(--en,1)) * -3deg)}
.sc .plan-pro[data-sc]{translate:calc((1 - var(--en,1)) * 90px) 0;rotate:calc((1 - var(--en,1)) * 3deg)}
/* La photo d'Olivier glisse dans son cadre */
.me-ph{transform-origin:50% 50%}
.sc .me-ph[data-sc]{object-position:50% calc(30% + var(--sp,.5) * 40%);scale:calc(1.06 - var(--en,1) * .06)}
@media (max-width:720px){
  .sc [data-sc="p"]{translate:none}
  .sc .plan[data-sc],.sc .plan-pro[data-sc]{translate:0 calc((1 - var(--en,1)) * 40px);rotate:none}
}

/* Mobile (22/10, demande fondateur) : le titre passe au-dessus des trois pastilles. */
@media (max-width:720px){.hero{display:flex;flex-direction:column}.hero>*{width:100%}.hero>.h-xl{order:-1}.hero .pills{margin:16px auto 14px!important}}