@font-face{font-family:Inter;src:url(/assets/inter-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(/assets/inter-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url(/assets/inter-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Inter;src:url(/assets/inter-700.woff2) format("woff2");font-weight:700;font-display:swap}
:root{--bg:#F4F6F9;--ink:#101827;--txt:#4A5463;--mute:#5B6474;--jade:#8FD8C0;--jadeD:#176B53;--jadeL:#E3F5EE;--k1r:143,216,192;--card:rgba(255,255,255,.78);--line:rgba(16,24,39,.08);--ease:cubic-bezier(.2,.9,.25,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);scroll-behavior:smooth}
body{font-family:Inter,system-ui,sans-serif;font-feature-settings:"cv11","ss01";color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}

.fx{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--bg)}
.fx i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.9}
.fx .a{width:620px;height:520px;left:-160px;top:-120px;background:rgba(var(--k1r),.75);animation:d1 26s ease-in-out infinite}
.fx .b{width:560px;height:480px;right:-160px;top:-60px;background:rgba(190,203,255,.75);animation:d2 30s ease-in-out infinite}
.fx .c{width:700px;height:520px;left:-120px;bottom:-260px;background:rgba(252,222,190,.8);animation:d3 28s ease-in-out infinite}
.fx .d{width:520px;height:440px;right:-140px;bottom:-200px;background:rgba(var(--k1r),.55);animation:d1 32s ease-in-out infinite reverse}
@keyframes d1{50%{transform:translate(90px,60px) scale(1.08)}}
@keyframes d2{50%{transform:translate(-80px,70px) scale(1.06)}}
@keyframes d3{50%{transform:translate(70px,-50px) scale(1.1)}}

.glass{background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);box-shadow:inset 1.5px 1.5px 0 rgba(255,255,255,.9),inset 0 0 0 .5px rgba(255,255,255,.7),0 14px 34px -14px rgba(16,24,39,.22),0 1px 3px rgba(16,24,39,.05)}
.nav{position:sticky;top:16px;z-index:5;margin:16px auto 0;width:min(900px,calc(100% - 32px));height:56px;border-radius:28px;display:flex;align-items:center;justify-content:space-between;padding:0 7px 0 16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:16px;letter-spacing:-.02em;text-decoration:none}
.brand img{width:28px;height:28px}
.links{display:flex;gap:4px;align-items:center}
.links a.l{font-size:14.5px;font-weight:500;color:var(--txt);text-decoration:none;padding:8px 12px;border-radius:18px}
.links a.l:hover{background:rgba(16,24,39,.05);color:var(--ink)}
.btn{text-decoration:none;height:42px;padding:0 18px;border-radius:21px;border:0;background:var(--ink);color:#fff;font-weight:600;font-size:14.5px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:transform .25s cubic-bezier(.3,1.4,.5,1);box-shadow:0 10px 22px -12px rgba(16,24,39,.7);font-family:inherit}
.btn:hover{transform:translateY(-1px) scale(1.02)}
.btn.ghost{background:rgba(255,255,255,.72);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(16,24,39,.1),0 10px 24px -16px rgba(16,24,39,.35)}
.btn svg{width:16px;height:16px}
a:focus-visible,.btn:focus-visible,summary:focus-visible{outline:2px solid var(--jadeD);outline-offset:3px}

/* Héros (le design validé) */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:56px 20px 30px;min-height:calc(100vh - 72px);justify-content:center}
.logo{position:relative;width:132px;height:132px;display:grid;place-items:center}
.logo img{width:116px;height:116px;position:relative;z-index:1;opacity:0;transform:scale(.6) rotate(-40deg);filter:blur(14px);animation:logo 1.6s var(--ease) .15s forwards,flt 7s ease-in-out 1.9s infinite}
.logo::before{content:"";position:absolute;inset:-26px;border-radius:50%;background:radial-gradient(circle,rgba(var(--k1r),.7),rgba(var(--k1r),0) 62%);opacity:0;animation:halo 4s ease-in-out 1.2s infinite}
@keyframes logo{to{opacity:1;transform:none;filter:blur(0)}}
@keyframes flt{50%{transform:translateY(-6px)}}
@keyframes halo{0%,100%{opacity:.3;transform:scale(.9)}50%{opacity:.6;transform:scale(1.06)}}
.pill{margin-top:22px;font-size:13.5px;font-weight:500;padding:6px 13px;border-radius:99px;background:var(--jadeL);color:#0E4F3D;border:1px solid rgba(var(--k1r),.6);display:inline-block}
h1{margin-top:26px;font-size:clamp(38px,4.4vw,62px);line-height:1.05;font-weight:700;letter-spacing:-.05em;max-width:960px}
h1 span{display:block}
@media (min-width:700px){h1 span{white-space:nowrap}}
.sub{margin-top:24px;font-size:18px;line-height:1.6;color:var(--txt);max-width:560px}
.ctas{margin-top:32px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.ctas .btn{height:52px;padding:0 24px;border-radius:26px;font-size:15.5px}
.trust{margin-top:26px;display:flex;gap:22px;flex-wrap:wrap;justify-content:center;font-size:14px;color:var(--txt)}
.trust span{display:flex;align-items:center;gap:7px}
.trust svg{width:15px;height:15px;stroke:var(--txt)}

/* Sections */
section.s{padding:90px 20px;display:flex;flex-direction:column;align-items:center;text-align:center}
.kick{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--jadeD)}
h2{margin-top:12px;font-size:clamp(30px,3.4vw,46px);line-height:1.08;font-weight:700;letter-spacing:-.045em;max-width:760px}
h2 em{font-style:normal;color:var(--jadeD)}
.lead{margin-top:16px;font-size:17px;line-height:1.6;color:var(--txt);max-width:560px}

/* Le fil : vidéo → commentaire → personne → vente */
.chain{margin-top:44px;display:flex;align-items:center;gap:10px;justify-content:center;max-width:1060px;width:100%}
.node{border-radius:20px;padding:14px 16px;text-align:left;flex:1 1 0;min-width:0}
.node small{display:block;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.node b{display:block;font-size:15px;font-weight:600;margin-top:4px}
.node span{display:block;font-size:13px;color:var(--txt);margin-top:2px}
.node .sc{display:inline-block;margin-top:6px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:99px;background:rgba(244,114,94,.14);color:#A8321F}
.node.win{background:linear-gradient(135deg,rgba(var(--k1r),.5),rgba(var(--k1r),.18));box-shadow:inset 0 0 0 1px rgba(var(--k1r),.8),0 14px 34px -16px rgba(23,107,83,.45)}
.arr{width:34px;height:2px;background:linear-gradient(90deg,rgba(var(--k1r),.2),var(--jadeD));position:relative;flex:none}
.arr::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:7px solid var(--jadeD);border-right:0}
.demo{margin-top:14px;font-size:12px;color:var(--mute)}

/* Cartes */
.grid{margin-top:44px;display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:900px;width:100%}
.card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:26px;text-align:left;box-shadow:0 12px 30px -20px rgba(16,24,39,.3)}
.ic{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(180deg,rgba(var(--k1r),.6),rgba(var(--k1r),.3));color:#0E4F3D}
.ic svg{width:20px;height:20px}
.card h3{margin-top:16px;font-size:19px;font-weight:600;letter-spacing:-.02em}
.card p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--txt)}

/* Étapes */
.steps{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:900px;width:100%}
.step{text-align:left;padding:24px;border-radius:24px;background:var(--card);border:1px solid var(--line)}
.step i{font-style:normal;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;font-size:13px;font-weight:600}
.step h3{margin-top:14px;font-size:18px;font-weight:600;letter-spacing:-.02em}
.step p{margin-top:6px;font-size:14.5px;line-height:1.55;color:var(--txt)}

/* Offres */
.offers{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:900px;width:100%}
.offer{padding:26px;border-radius:24px;background:var(--card);border:1px solid var(--line);text-align:left;position:relative;overflow:hidden}
.offer::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--c)}
.offer h3{font-size:20px;font-weight:600;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.offer h3 img{width:26px;height:26px}
.offer .who{margin-top:4px;font-size:14px;color:var(--mute)}
.offer ul{margin-top:16px;list-style:none;display:grid;gap:9px}
.offer li{font-size:14.5px;color:var(--txt);display:block;position:relative;padding-left:25px;line-height:1.45}
.offer li::before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;border-radius:50%;background:var(--c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23101827' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.soon{display:inline-block;font-size:11px;font-weight:600;color:var(--mute);border:1px solid rgba(16,24,39,.14);border-radius:99px;padding:0 7px;margin-left:4px;white-space:nowrap;vertical-align:1px}

/* FAQ */
.faq{margin-top:36px;max-width:680px;width:100%;text-align:left}
details{border-bottom:1px solid var(--line);padding:4px 0}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 4px;font-size:16.5px;font-weight:600;letter-spacing:-.01em}
summary::-webkit-details-marker{display:none}
summary::after{content:"";width:10px;height:10px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);transition:transform .3s var(--ease);flex:none}
details[open] summary::after{transform:rotate(-135deg)}
details p{padding:0 4px 18px;font-size:15.5px;line-height:1.6;color:var(--txt)}

/* Fin */
.final{padding:100px 20px 70px;display:flex;flex-direction:column;align-items:center;text-align:center}
.final img{width:72px;height:72px}
.final h2{margin-top:18px}

footer{padding:28px 20px 34px;text-align:center;font-size:14px;color:var(--mute)}
footer a{text-decoration:none;white-space:nowrap}
footer a:hover{text-decoration:underline}
footer i{font-style:normal;margin:0 7px;opacity:.6}

/* DA du mouvement */
.st{opacity:0;transform:translateY(18px);filter:blur(6px);animation:in .8s var(--ease) forwards;animation-delay:calc(var(--i,0)*110ms + 520ms)}
.rv{opacity:0;transform:translateY(18px);filter:blur(6px);transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease);transition-delay:calc(var(--i,0)*110ms)}
.rv.on{opacity:1;transform:none;filter:none}
@keyframes in{to{opacity:1;transform:none;filter:blur(0)}}

@media (max-width:760px){
  .links a.l{display:none}
  .grid,.steps,.offers{grid-template-columns:1fr}
  .arr{width:2px;height:22px;background:linear-gradient(180deg,rgba(var(--k1r),.2),var(--jadeD))}
  .arr::after{right:-4px;top:auto;bottom:-2px;border:5px solid transparent;border-top:7px solid var(--jadeD);border-bottom:0}
  .chain{flex-direction:column}
  .node{width:min(320px,100%)}
  section.s{padding:64px 16px}
}
@media (max-width:560px){
  .hero{padding:40px 16px 24px;min-height:auto}
  .logo{width:110px;height:110px}.logo img{width:96px;height:96px}
  .sub{font-size:16.5px}
  .ctas{width:100%}.ctas .btn{width:100%;justify-content:center}
  .nav .btn{height:40px;padding:0 15px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.st,.rv,.logo img{opacity:1;transform:none;filter:none}}

/* ---- Ajouts multi-pages ---- */
.links a.l[aria-current=page]{color:var(--ink);background:rgba(16,24,39,.06)}
.lockw{position:relative}
.lock{background:rgba(16,24,39,.07);color:var(--mute);box-shadow:inset 0 0 0 1px rgba(16,24,39,.08);cursor:not-allowed}
.lock:hover{transform:none}
.lock .tag{font-size:11px;font-weight:600;padding:2px 7px;border-radius:99px;background:var(--jadeL);color:#0E4F3D;border:1px solid rgba(var(--k1r),.6)}
.tip{background:rgba(255,255,255,.94);position:absolute;right:0;top:52px;width:260px;padding:14px 16px;border-radius:18px;font-size:13.5px;line-height:1.5;color:var(--ink);text-align:left;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.tip b{display:block;font-weight:600;margin-bottom:2px}
.lockw:hover .tip,.lockw.open .tip,.lock:focus-visible+.tip{opacity:1;transform:none}
.menu-b{display:none;width:42px;height:42px;border-radius:21px;border:0;background:rgba(16,24,39,.06);cursor:pointer;place-items:center}
.menu-b svg{width:20px;height:20px}
.drop{display:none}
.page-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:70px 20px 10px}
.page-hero h1{font-size:clamp(34px,4vw,54px)}
.page-hero .logo{width:96px;height:96px}.page-hero .logo img{width:84px;height:84px}
.crumb{margin-top:18px;font-size:13.5px;color:var(--mute)}
.crumb a{text-decoration:none;color:var(--txt)}.crumb a:hover{text-decoration:underline}
.tiles{margin-top:44px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1000px;width:100%}
.tile{display:block;text-decoration:none;text-align:left;padding:22px;border-radius:22px;background:var(--card);border:1px solid var(--line);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.tile:hover{transform:translateY(-3px);box-shadow:0 18px 36px -22px rgba(16,24,39,.4)}
.tile b{display:block;font-size:17px;font-weight:600;letter-spacing:-.02em}
.tile span{display:block;margin-top:6px;font-size:14px;line-height:1.5;color:var(--txt)}
.tile em{display:inline-block;margin-top:12px;font-style:normal;font-size:13.5px;font-weight:600;color:var(--jadeD)}
.duo{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:900px;width:100%}
.duo .card ul{margin-top:12px;list-style:none;display:grid;gap:8px}
.duo .card li{font-size:15px;color:var(--txt);line-height:1.5;padding-left:18px;position:relative}
.duo .card li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--jadeD)}
.grid3{grid-template-columns:repeat(3,1fr);max-width:1000px}
.note{margin-top:26px;font-size:15px;color:var(--txt);max-width:600px;line-height:1.6}
.next{margin:10px auto 0;padding:0 20px 80px;display:flex;justify-content:center}
.next a{display:flex;align-items:center;gap:14px;text-decoration:none;padding:18px 22px;border-radius:24px;max-width:520px;width:100%;justify-content:space-between}
.next small{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.next b{display:block;font-size:18px;font-weight:600;letter-spacing:-.02em;margin-top:2px}
.next svg{width:22px;height:22px;flex:none}
.fnav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-bottom:14px}
.fnav a{color:var(--txt)}
@media (max-width:980px){.tiles{grid-template-columns:repeat(2,1fr)}.grid3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){
  .menu-b{display:grid}
  .duo,.grid3{grid-template-columns:1fr}
  .drop{position:absolute;left:0;right:0;top:64px;border-radius:24px;padding:10px;flex-direction:column;background:rgba(255,255,255,.98)}
  .nav.open .drop{display:flex}
  .drop a{padding:13px 14px;border-radius:14px;text-decoration:none;font-weight:500}
  .drop a[aria-current=page]{background:rgba(16,24,39,.06)}
  .lock .lbl{display:none}
  .tip{right:-50px;width:240px}
  .page-hero{padding:48px 16px 0}
}
@media (max-width:560px){.tiles{grid-template-columns:1fr}.nav .lock{padding:0 12px}}

/* ---- Classes à la place des attributs style (CSP du dépôt : pas de style en ligne) ---- */
.i0{--i:0}.i1{--i:1}.i2{--i:2}.i3{--i:3}.i4{--i:4}.i5{--i:5}.i6{--i:6}.i7{--i:7}
.c-jade{--c:#8FD8C0}.c-lav{--c:#A9B8FF}.c-or{--c:#E7C98B}