:root{--blue:#1a73e8;--blue-d:#0b57c4;--ink:#0a1a33;--mut:#586a86;--line:#e1e8f4;--tint:#eef5ff;--yellow:#ffd23f;--green:#0fa968;--red:#e5484d;--violet:#7a4dff;--pink:#ff4d8d;--orange:#ff7a1a;--teal:#00b3a4;--r:18px;--sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font:16px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3{line-height:1.08;letter-spacing:-.025em;margin:0 0 .4em;font-weight:800}
h1{font-size:clamp(2.4rem,7.2vw,4.6rem)}h2{font-size:clamp(1.7rem,4.4vw,2.6rem)}h3{font-size:1.15rem;letter-spacing:-.01em}
p{margin:0 0 1em}a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}
img,svg{max-width:100%}.wrap{width:min(1120px,100% - 32px);margin-inline:auto}
.hid{display:none!important}
/* boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:0 1.5em;border-radius:999px;border:2px solid var(--blue);background:var(--blue);color:#fff;font:700 1rem var(--sans);cursor:pointer;text-decoration:none!important;transition:transform .15s,background .15s}
.btn:hover{background:var(--blue-d);border-color:var(--blue-d)}.btn:active{transform:scale(.97)}
.btn.ghost{background:#fff;color:var(--blue)}.btn.ghost:hover{background:var(--tint)}
.btn.yellow{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}.btn.yellow:hover{background:#ffc400;border-color:#ffc400}
.btn.sm{min-height:38px;padding:0 1.1em;font-size:.9rem}.btn.danger{background:#fff;color:var(--red);border-color:var(--red)}.btn.danger:hover{background:#fff1f1}
.btn[disabled]{opacity:.5;pointer-events:none}.btn.block{width:100%}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
/* en-tête */
.top{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:12px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.2rem;color:var(--ink);letter-spacing:-.02em}.brand:hover{text-decoration:none}.brand img{width:34px;height:34px}
.nav{display:flex;align-items:center;gap:6px}.nav a:not(.btn){color:var(--ink);font-weight:600;padding:8px 12px;border-radius:999px}.nav a:not(.btn):hover,.nav a.on{background:var(--tint);text-decoration:none;color:var(--blue)}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--tint);color:var(--blue);font-weight:700;border-radius:999px;padding:6px 14px;font-size:.9rem}
.pill i{width:8px;height:8px;border-radius:50%;background:var(--yellow);display:inline-block}
/* hero */
.hero{padding:clamp(36px,7vw,88px) 0 clamp(36px,6vw,72px);overflow:hidden}
.hero .wrap{display:grid;gap:36px;align-items:center}
.hero h1 em{font-style:normal;color:var(--blue);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.16em;background:var(--yellow);border-radius:99px;z-index:-1}
.lead{font-size:clamp(1.05rem,2.4vw,1.3rem);color:var(--mut);max-width:34em}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 14px}.hint{color:var(--mut);font-size:.9rem}
@media(min-width:900px){.hero .wrap{grid-template-columns:1.05fr .95fr}}
/* démo animée */
.demo{position:relative;background:var(--tint);border-radius:32px;padding:28px;min-height:360px;display:grid;place-items:center}
.card-demo{background:#fff;border:1px solid var(--line);border-radius:24px;padding:22px;width:min(330px,100%)}
.card-demo .lockrow{display:flex;align-items:center;gap:12px;margin-bottom:16px}.card-demo .lockrow img{width:44px}
.wave{display:flex;align-items:center;gap:3px;height:56px;margin:12px 0}.wave b{flex:1;background:var(--blue);border-radius:4px;animation:w 1.4s ease-in-out infinite;height:30%}
.wave b:nth-child(3n){background:var(--yellow);animation-delay:-.4s}.wave b:nth-child(2n){animation-delay:-.8s}.wave b:nth-child(5n){animation-delay:-.2s}
@keyframes w{0%,100%{height:18%}50%{height:100%}}
.bar{height:8px;background:var(--tint);border-radius:9px;overflow:hidden}.bar span{display:block;height:100%;width:0;background:var(--blue);border-radius:9px}
.demo .bar span{animation:fill 6s linear infinite}@keyframes fill{0%{width:0}85%,100%{width:100%}}
.gone{position:absolute;inset:auto 22px 22px auto;background:var(--ink);color:#fff;border-radius:16px;padding:10px 16px;font-weight:700;font-size:.9rem;opacity:0;animation:gone 6s linear infinite}
@keyframes gone{0%,84%{opacity:0;transform:translateY(8px)}92%,100%{opacity:1;transform:none}}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 12px;font-weight:700;font-size:.82rem;color:#fff}
.k-audio{background:var(--blue)}.k-video{background:var(--violet)}.k-image{background:var(--pink)}.k-pdf{background:var(--orange)}.k-file{background:var(--teal)}.k-note{background:#c026d3}
/* sections */
section.s{padding:clamp(40px,7vw,88px) 0}.s.tint{background:var(--tint)}
.grid3{display:grid;gap:16px}@media(min-width:800px){.grid3{grid-template-columns:repeat(3,1fr)}}
.box{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px}.tint .box{border-color:#d3e3fb}
.num{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--blue);color:#fff;font-weight:800;margin-bottom:14px}
.num.y{background:var(--yellow);color:var(--ink)}.num.v{background:var(--violet)}
.row{display:flex;flex-wrap:wrap;gap:10px}
.price{font-size:2.4rem;font-weight:800;letter-spacing:-.03em}.price small{font-size:1rem;color:var(--mut);font-weight:600}
.box.hot{border:2px solid var(--blue)}ul.ok{list-style:none;padding:0;margin:14px 0}ul.ok li{padding:5px 0 5px 28px;position:relative}
ul.ok li::before{content:"";position:absolute;left:0;top:11px;width:16px;height:16px;border-radius:50%;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-4.8' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
details{border-bottom:1px solid var(--line);padding:16px 0}summary{font-weight:700;cursor:pointer;font-size:1.05rem}details p{margin:10px 0 0;color:var(--mut)}
footer{border-top:1px solid var(--line);padding:32px 0 48px;color:var(--mut);font-size:.92rem}footer .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between}footer a{color:var(--mut)}
/* formulaires */
label{display:block;font-weight:700;margin:0 0 6px;font-size:.95rem}
input[type=text],input[type=email],input[type=password],input[type=number],select{width:100%;min-height:48px;padding:0 14px;border:1.5px solid var(--line);border-radius:14px;font:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus{border-color:var(--blue);outline:3px solid #cfe2fd}.field{margin-bottom:16px}
.err{color:var(--red);font-size:.9rem;margin-top:5px}.okmsg{background:#e8f8f0;color:#0a7a4b;border-radius:14px;padding:12px 16px;margin-bottom:16px;font-weight:600}
.auth{min-height:calc(100vh - 64px);display:grid;place-items:center;padding:28px 0}.auth .box{width:min(440px,100%);padding:30px}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:500}.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--blue)}
/* app */
.app{padding:28px 0 110px}.app h1{font-size:clamp(1.8rem,5vw,2.6rem)}
.head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:20px}
.drop{display:grid;place-items:center;text-align:center;border:2px dashed #9ec3f7;background:var(--tint);border-radius:24px;padding:42px 20px;cursor:pointer;transition:.15s}
.drop.over{border-color:var(--blue);background:#dcebff}.drop strong{font-size:1.2rem}.drop input{display:none}
.drop .ico{width:64px;height:64px;border-radius:20px;background:var(--blue);display:grid;place-items:center;margin-bottom:12px}
.two{display:grid;gap:16px}@media(min-width:760px){.two{grid-template-columns:1fr 1fr}}
.tbl{width:100%;border-collapse:collapse}.tbl th{text-align:left;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);padding:10px 8px;border-bottom:1px solid var(--line)}
.tbl td{padding:14px 8px;border-bottom:1px solid var(--line);vertical-align:middle}.tbl tr:last-child td{border-bottom:0}
.st{display:inline-block;border-radius:999px;padding:4px 12px;font-weight:700;font-size:.82rem}.st-ready{background:#fff4cc;color:#7a5b00}.st-opened{background:#e1f7ec;color:#0a7a4b}.st-expired,.st-cancelled{background:#eceff5;color:var(--mut)}
.cards{display:none}@media(max-width:700px){.tbl.resp{display:none}.cards{display:grid;gap:10px}.cards .box{padding:16px}}
.stat{font-size:2.2rem;font-weight:800;letter-spacing:-.03em;line-height:1}.stat+div{color:var(--mut);font-weight:600;font-size:.9rem;margin-top:6px}
.stats{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}@media(min-width:800px){.stats{grid-template-columns:repeat(4,1fr)}}
progress{width:100%;height:10px;border:0;border-radius:9px;overflow:hidden;appearance:none;background:var(--tint)}progress::-webkit-progress-bar{background:var(--tint)}progress::-webkit-progress-value{background:var(--blue);border-radius:9px}progress::-moz-progress-bar{background:var(--blue)}
.tabs{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);display:flex;z-index:30;padding-bottom:env(safe-area-inset-bottom)}
.tabs a{flex:1;text-align:center;padding:12px 4px;font-weight:700;font-size:.82rem;color:var(--mut)}.tabs a.on{color:var(--blue)}
@media(min-width:760px){.tabs{display:none}.app{padding-bottom:60px}}
@media(max-width:759px){.nav .dsk{display:none}}
.copy{display:flex;gap:8px}.copy input{flex:1;font-family:ui-monospace,Menlo,monospace;font-size:.92rem}
.mono{font-family:ui-monospace,Menlo,monospace}.sub{color:var(--mut)}.tr{text-align:right}
.bars{display:flex;align-items:flex-end;gap:6px;height:120px;margin-top:10px}.bars div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;height:100%;font-size:.7rem;color:var(--mut)}
.bars progress{writing-mode:vertical-lr;direction:rtl;width:100%;max-width:26px;height:90px}
/* ouverture */
.open{min-height:100vh;display:grid;place-items:center;padding:24px 0;background:var(--tint)}.open .box{width:min(520px,100%);padding:30px;text-align:center}
.open .brand{justify-content:center;margin-bottom:18px}.open h1{font-size:1.8rem}
.player{margin-top:10px;text-align:left}.player video,.player img,.player iframe{width:100%;border-radius:16px;background:#000;display:block}.player img{background:none;max-height:70vh;object-fit:contain}
.player iframe{height:70vh;background:#fff;border:1px solid var(--line)}.ctrl{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.speeds button{border:1.5px solid var(--line);background:#fff;border-radius:999px;min-height:40px;padding:0 14px;font:700 .9rem var(--sans);cursor:pointer;color:var(--ink)}.speeds button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.big{width:72px;height:72px;border-radius:50%;padding:0;font-size:1.6rem}
.warn{background:#fff9e0;border-radius:14px;padding:12px 16px;font-size:.92rem;text-align:left;margin:14px 0}
.msg{min-height:1.5em;margin-top:10px;font-weight:600}.msg.erreur{color:var(--red)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.demo .bar span{width:70%}}
.tabform{flex:1;display:flex}.tabbtn{flex:1;border:0;background:none;font:700 .82rem var(--sans);color:var(--mut)}
.center{text-align:center}.mt{margin-top:24px}.maxw{max-width:640px}
.mt18{margin-top:18px}.jcc{justify-content:center}
#mes{margin-top:36px}
.subnav{margin-bottom:20px}
.urow{display:grid;gap:14px;margin-bottom:12px}@media(min-width:900px){.urow{grid-template-columns:minmax(220px,1fr) 3fr;align-items:center}}.uf{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}.uf label{font-size:.8rem;margin:0;flex:1 1 120px}.uf input,.uf select{margin-top:4px}.uf .check{flex:1 1 120px;align-items:center;margin-bottom:10px}
.legal h3{margin-top:1.6em}.legal p,.legal li{color:#2b3a55}
/* curseur */
.slider{padding:28px}.srow{display:flex;justify-content:space-between;align-items:baseline;margin:6px 0 14px}.sn{font-size:3rem;font-weight:800;letter-spacing:-.04em;line-height:1}.sp{font-size:2.4rem;font-weight:800;color:var(--blue);letter-spacing:-.03em}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;cursor:pointer;touch-action:pan-y;margin:0;--p:50%}
input[type=range]::-webkit-slider-runnable-track{height:12px;border-radius:99px;background:linear-gradient(to right,var(--blue) var(--p),var(--tint) var(--p))}
input[type=range]::-moz-range-track{height:12px;border-radius:99px;background:var(--tint)}input[type=range]::-moz-range-progress{height:12px;border-radius:99px;background:var(--blue)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:36px;height:36px;border-radius:50%;background:var(--yellow);border:4px solid var(--blue);margin-top:-12px}
input[type=range]::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--yellow);border:4px solid var(--blue)}
input[type=range]:focus-visible{outline:3px solid var(--yellow);outline-offset:4px;border-radius:99px}
.sticks{position:relative;height:22px;color:var(--mut);font-size:.85rem;font-weight:600;margin:2px 18px 10px}.sticks span{position:absolute;transform:translateX(-50%)}.t0{left:0}.t1{left:18.37%}.t2{left:48.98%}.t3{left:100%}
.center-box{margin-inline:auto}
/* admin pro */
.h2s{font-size:1.5rem;margin:6px 0 14px}
.anav{display:flex;gap:6px;overflow-x:auto;margin:0 -16px 22px;padding:2px 16px;scrollbar-width:none}.anav::-webkit-scrollbar{display:none}
.anav a{flex:0 0 auto;padding:10px 16px;border-radius:999px;font-weight:700;color:var(--ink);border:1.5px solid var(--line);background:#fff;white-space:nowrap}.anav a:hover{text-decoration:none;background:var(--tint)}.anav a.on{background:var(--blue);border-color:var(--blue);color:#fff}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:16px}@media(min-width:900px){.kpis{grid-template-columns:repeat(5,1fr)}}
.k{padding:18px}.k .stat{font-size:1.7rem}.k div:last-child{color:var(--mut);font-weight:600;font-size:.85rem;margin-top:6px}
.charts{display:grid;gap:16px}@media(min-width:900px){.charts{grid-template-columns:1fr 1fr}}
.chart{width:100%;height:auto;display:block;margin-top:8px}.chart .cbar{fill:var(--blue)}.chart .cbar.y{fill:var(--yellow)}.chart .cbar.v{fill:var(--violet)}.chart .ax{fill:var(--mut);font:600 11px var(--sans)}.chart .grid{stroke:var(--line);stroke-width:1}
.kline{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}.kline:last-child{border-bottom:0}.kline progress{flex:1;min-width:60px}
.logl{display:grid;gap:2px}.ucard{display:grid;gap:4px;color:var(--ink);text-decoration:none!important}
.filt{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;align-items:center}.filt input{flex:1 1 220px}.filt select{flex:0 0 160px}
.st-bad{background:#ffe3e3;color:#b42318}.uf .wide{flex:2 1 260px}
.pay{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin-bottom:10px}.pact{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.refund summary{list-style:none;cursor:pointer}.refund summary::-webkit-details-marker{display:none}.refund form{margin-top:10px;display:grid;gap:8px;max-width:280px}
details.refund{border:0;padding:0}
.noteta{width:100%;min-height:200px;border:1.5px solid var(--line);border-radius:14px;padding:14px;font:inherit;resize:vertical;color:var(--ink)}.noteta:focus{border-color:var(--blue);outline:3px solid #cfe2fd}
.seg{display:flex;gap:6px;margin-bottom:14px}.seg button{flex:1;min-height:46px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font:700 1rem var(--sans);cursor:pointer;color:var(--ink)}.seg button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.count{color:var(--mut);font-size:.85rem;text-align:right;margin-top:4px}
.note{white-space:pre-wrap;word-wrap:break-word;text-align:left;background:var(--tint);border-radius:16px;padding:18px;font:inherit;font-size:1.05rem;line-height:1.55;max-height:60vh;overflow:auto;margin:0}
.kline .chip{min-width:84px;justify-content:center}
/* protection d'affichage */
.shield{display:none;position:fixed;inset:0;background:#000;color:#fff;z-index:9999;place-items:center;text-align:center;font-weight:800;font-size:1.2rem}.shielded .shield{display:grid}
.protect .player{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.stage{position:relative;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;border-radius:16px;overflow:hidden;background:#000;cursor:pointer;display:block;width:fit-content;max-width:100%;margin:0 auto}
.stage canvas{display:block;max-width:100%;height:auto;pointer-events:none}.stage:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
.cover{position:absolute;inset:0;background:#000;color:#fff;display:grid;place-items:center;text-align:center;padding:20px;font-weight:800;font-size:1.15rem}
.vwrap{position:relative}.vwrap .wm{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;border-radius:16px}
@media print{.open *,.shield{display:none!important}}