/* Biizz, feuille de style. Charte V1 : Placard Next (titres), Manrope (texte). */
@font-face{font-family:'Placard Next';font-weight:700;font-display:swap;src:url(../fonts/placard-next-700.woff2) format('woff2')}
@font-face{font-family:'Placard Next';font-weight:500;font-display:swap;src:url(../fonts/placard-next-500.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-weight:400;font-display:swap;src:url(../fonts/manrope-400.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-weight:500;font-display:swap;src:url(../fonts/manrope-500.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-weight:600;font-display:swap;src:url(../fonts/manrope-600.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-weight:700;font-display:swap;src:url(../fonts/manrope-700.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-weight:800;font-display:swap;src:url(../fonts/manrope-800.woff2) format('woff2')}
:root{
  --ink:#1A0B2E; --ink2:#4B3B63; --ink3:#8C7FA1;
  --paper:#FFF8F4; --card:#FFFFFF; --line:#EFE4EC; --soft:#F7EEF4;
  --violet:#7B2CFF; --fuchsia:#E62AD1; --rose:#FF4F8B; --orange:#FF7A1A; --ambre:#FFC233;
  --ok:#0E9A68; --okbg:#E3F6EE; --alert:#E0303A; --alertbg:#FDE8EA; --warn:#B86E00; --warnbg:#FFF2DB;
  --night:#13061F; --night2:#1E0C30; --nline:rgba(255,255,255,.1); --nmist:rgba(255,255,255,.66);
  --grad:linear-gradient(100deg,#7B2CFF 0%,#E62AD1 32%,#FF4F8B 56%,#FF7A1A 80%,#FFC233 100%);
  --display:"Bricolage Grotesque","Arial Black",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--paper);color:var(--ink);font:15px/1.5 var(--body);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
h1,h2,h3{font-family:var(--display);margin:0;letter-spacing:-.01em}
.num{font-variant-numeric:tabular-nums}

/* ---------- squelette ---------- */
.app{display:grid;grid-template-columns:252px 1fr;min-height:100vh}
.rail{position:sticky;top:0;height:100vh;overflow:auto;padding:22px 16px 18px;border-right:1px solid var(--line);background:#FFFDFB;display:flex;flex-direction:column;gap:18px}
.logo{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.04em;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding:2px 6px}
.shopcard{display:flex;gap:10px;align-items:center;padding:10px;border-radius:14px;background:var(--soft)}
.shopcard .av{width:38px;height:38px;border-radius:11px;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:700}
.shopcard b{display:block;font-size:14px}
.plan-tag{font-size:12px;color:var(--violet);font-weight:600}
.nav{display:flex;flex-direction:column;gap:2px}
.nav button{all:unset;cursor:pointer;display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;font-weight:500;color:var(--ink2)}
.nav button:hover{background:var(--soft);color:var(--ink)}
.nav button.on{background:var(--ink);color:#fff}
.nav button.on svg{stroke:#fff}
.nav svg{width:19px;height:19px;stroke:var(--ink2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.nav .lab-btn{background:var(--night);color:#fff;margin:6px 0}
.nav .lab-btn svg{stroke:#fff}
.nav .lab-btn .dot{width:8px;height:8px;border-radius:50%;background:var(--grad);margin-left:auto}
.nav .lab-btn.on{outline:2px solid var(--fuchsia);outline-offset:-2px}
.nav-sep{font-size:12px;color:var(--ink3);padding:12px 10px 4px}
.nav .lock{color:var(--ink3)}
.nav .lock .pl{margin-left:auto;font-size:11px;font-weight:600;color:var(--violet);border:1px solid #DCCBFF;border-radius:6px;padding:0 5px}
.rail-foot{margin-top:auto;font-size:12px;color:var(--ink3);line-height:1.4}
.wallet-mini{all:unset;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:11px 12px;border-radius:12px;border:1px solid var(--line);background:var(--card)}
.wallet-mini b{font-family:var(--display);font-size:18px}
.wallet-mini small{color:var(--ink3);display:block;font-size:12px}

.top{display:none}
.tabs{display:none}
main{min-width:0;padding:30px 40px 80px;position:relative}
.wrap{max-width:1080px;margin:0 auto}

/* ---------- éléments ---------- */
.hello{font-size:15px;color:var(--ink2);margin-bottom:4px}
.pagehead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.pagehead h1{font-size:34px;font-weight:700}
.pagehead p{margin:4px 0 0;color:var(--ink2);max-width:60ch}
.btn{border:0;border-radius:12px;padding:11px 16px;font-weight:600;background:var(--ink);color:#fff;display:inline-flex;gap:8px;align-items:center;white-space:nowrap}
.btn:hover{background:#2C1748}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink3)}
.btn.small{padding:7px 11px;font-size:13px;border-radius:9px}
.btn.violet{background:var(--violet)}
.btn.grad{background:var(--grad);color:#fff}
.btn.grad:hover{filter:brightness(1.06)}
.btn.ok{background:var(--ok)}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.panel{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px}
.panel h2{font-size:19px;font-weight:700;margin-bottom:12px}
.panel h2 small{font-family:var(--body);font-size:13px;font-weight:500;color:var(--ink3);margin-left:6px}
.grid2{display:grid;grid-template-columns:1.35fr 1fr;gap:18px;align-items:start}
.stack{display:flex;flex-direction:column;gap:18px}
.muted{color:var(--ink3)}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:2px 8px;border-radius:20px;white-space:nowrap}
.pill.ok{background:var(--okbg);color:var(--ok)}
.pill.alert{background:var(--alertbg);color:var(--alert)}
.pill.warn{background:var(--warnbg);color:var(--warn)}
.pill.v{background:#F0E8FF;color:var(--violet)}
.pill.n{background:var(--soft);color:var(--ink2)}

/* héros accueil */
.hero{position:relative;border-radius:24px;padding:28px 30px;background:var(--ink);color:#fff;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 90% at 100% 0%,rgba(230,42,209,.45),transparent 60%),radial-gradient(50% 70% at 85% 100%,rgba(255,122,26,.35),transparent 60%),radial-gradient(40% 60% at 0% 100%,rgba(123,44,255,.5),transparent 60%)}
.hero::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.35;mix-blend-mode:overlay}
.hero>*{position:relative;z-index:1}
.hero .lbl{font-size:14px;color:rgba(255,255,255,.75)}
.hero .big{font-family:var(--display);font-weight:800;font-size:clamp(46px,7vw,78px);line-height:1;letter-spacing:-.03em;margin:8px 0 6px}
.hero .big small{font-size:.32em;font-weight:600;letter-spacing:0;margin-left:6px;opacity:.8}
.hero .calc{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:rgba(255,255,255,.8);margin-top:14px}
.hero .calc b{color:#fff;font-weight:600}
.hero .link{all:unset;cursor:pointer;font-size:13px;text-decoration:underline;text-underline-offset:3px;color:rgba(255,255,255,.85);margin-top:12px;display:inline-block}

.todo{list-style:none;margin:0;padding:0}
.todo li{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.todo li:last-child{border-bottom:0}
.todo .mark{width:10px;height:10px;border-radius:50%;flex:none}
.todo .t{flex:1;min-width:0}
.todo .t b{display:block;font-weight:600}
.todo .t span{font-size:13px;color:var(--ink2)}

.idea{position:relative;border-radius:20px;padding:2px;background:var(--grad)}
.idea-in{border-radius:18px;background:var(--night);color:#fff;padding:18px;display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center;overflow:hidden;position:relative}
.idea-in::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.25;pointer-events:none}
.idea-in>*{position:relative;z-index:1}
.idea .k{font-size:13px;color:var(--ambre);font-weight:600}
.idea h3{font-size:20px;margin:4px 0 8px;line-height:1.2}
.idea p{margin:0 0 12px;color:var(--nmist);font-size:14px}
.thumb svg{display:block;width:100%;height:auto;border-radius:10px}

/* indicateurs */
.kpis{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);border-radius:18px;background:var(--card);margin-bottom:18px}
.kpi{flex:1 1 160px;padding:16px 20px;border-right:1px solid var(--line)}
.kpi:last-child{border-right:0}
.kpi span{font-size:13px;color:var(--ink2)}
.kpi b{display:block;font-family:var(--display);font-size:25px;font-weight:700;margin-top:2px}
.kpi b small{font-size:13px;font-weight:600;color:var(--ink3);margin-left:3px}
.kpi.lead b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* tableaux */
table{width:100%;border-collapse:collapse}
th{font-size:12px;font-weight:600;color:var(--ink3);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}
.prodcell{display:flex;align-items:center;gap:10px}
.prodcell .ph{width:38px;height:38px;border-radius:10px;overflow:hidden;flex:none;background:var(--soft)}
.prodcell .ph svg{width:100%;height:100%;display:block}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.chip{border:1.5px solid var(--line);background:var(--card);border-radius:20px;padding:5px 12px;font-size:13px;font-weight:500}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip .c{opacity:.65;margin-left:4px}
.tblwrap{overflow-x:auto}
.empty{padding:26px;text-align:center;color:var(--ink2)}

/* formulaires */
.f{display:flex;flex-direction:column;gap:5px;margin-bottom:13px}
.f label{font-size:13px;font-weight:600;color:var(--ink2)}
.f input,.f select,.f textarea{border:1.5px solid var(--line);border-radius:11px;padding:10px 12px;background:var(--card);width:100%}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--violet)}
.f .hint{font-size:12px;color:var(--ink3)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{border:1.5px solid var(--line);background:var(--card);border-radius:10px;padding:8px 12px;font-size:14px;font-weight:500}
.seg button.on{border-color:var(--ink);background:var(--ink);color:#fff}
.notice{border-radius:12px;padding:11px 13px;font-size:14px;margin:4px 0 12px}
.notice.alert{background:var(--alertbg);color:#8E1219}
.notice.warn{background:var(--warnbg);color:#6A3F00}
.notice.ok{background:var(--okbg);color:#0A5A3D}
.notice.v{background:#F2EBFF;color:#4A1AA8}
.notice.dark{background:rgba(255,255,255,.07);color:var(--nmist)}

/* feuille modale */
.sheet-wrap{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:20px}
.sheet-wrap[hidden]{display:none}
.sheet-bg{position:absolute;inset:0;background:rgba(19,6,31,.5)}
.sheet{position:relative;width:min(560px,100%);max-height:92vh;overflow:auto;background:var(--card);border-radius:22px;padding:24px;animation:pop .22s ease-out}
.sheet.wide{width:min(860px,100%)}
.sheet h2{font-size:23px;font-weight:700;margin-bottom:4px}
.sheet .sub{color:var(--ink2);margin:0 0 18px}
.sheet .x{position:absolute;top:14px;right:14px;border:0;background:var(--soft);width:34px;height:34px;border-radius:10px;font-size:18px;line-height:1}
.sheet .acts{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;flex-wrap:wrap}
.sheet.night{background:var(--night2);color:#fff}
.sheet.night .sub{color:var(--nmist)}
.sheet.night .x{background:rgba(255,255,255,.1);color:#fff}
@keyframes pop{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:11px 18px;border-radius:12px;font-weight:500;opacity:0;pointer-events:none;transition:.25s;z-index:60;max-width:90vw}
.toast.show{opacity:1;transform:translateX(-50%)}

/* formules */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.plan{padding:16px;border-right:1px solid var(--line)}
.plan:last-child{border-right:0}
.plan.cur{background:var(--soft)}
.plan h3{font-size:20px}
.plan .p{font-family:var(--display);font-weight:700;font-size:20px;margin:6px 0 2px}
.plan .p small{font-family:var(--body);font-size:12px;font-weight:500;color:var(--ink3)}
.plan ul{margin:10px 0 0;padding-left:16px;font-size:13px;color:var(--ink2)}
.plan li{margin-bottom:4px}

/* caisse */
.caisse{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:10px}
.caisse>div{padding:12px 14px;border-right:1px solid var(--line)}
.caisse>div:last-child{border-right:0}
.caisse span{font-size:12px;color:var(--ink2)}
.caisse b{display:block;font-family:var(--display);font-size:20px}
.caisse input{width:100%;border:1.5px solid var(--line);border-radius:9px;padding:6px 8px;font-family:var(--display);font-size:18px;font-weight:700}
.ecart-ok{color:var(--ok)}.ecart-bad{color:var(--alert)}

/* site */
.phone{width:300px;margin:0 auto;border-radius:38px;padding:10px;background:var(--ink);box-shadow:0 30px 60px -30px rgba(26,11,46,.55)}
.phone .scr{border-radius:30px;overflow:hidden;background:#fff;height:600px;overflow-y:auto}
.phone .url{font-size:11px;text-align:center;padding:9px 0 6px;color:#666;background:#F4F2F1}
.site-h{padding:20px 16px 14px;background:#1A0B2E;color:#fff}
.site-h b{font-family:var(--display);font-size:22px;display:block;line-height:1.1}
.site-h p{margin:6px 0 0;font-size:12px;opacity:.8}
.site-h .wa{display:inline-block;margin-top:10px;font-size:12px;font-weight:600;background:#25D366;color:#063;border-radius:20px;padding:5px 11px}
.site-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px}
.site-p{font-size:12px}
.site-p .ph{border-radius:10px;overflow:hidden;background:#F6F1EC;aspect-ratio:1}
.site-p .ph svg{width:100%;height:100%;display:block}
.site-p b{display:block;margin-top:5px;font-weight:600;line-height:1.25}
.site-p span{color:var(--violet);font-weight:700}
.site-p .cmd{display:block;margin-top:4px;font-size:11px;font-weight:600;color:#128C4A}
.site-foot{padding:14px 16px 22px;font-size:11px;color:#777;border-top:1px solid #eee}
.switch{position:relative;width:38px;height:22px;border-radius:20px;border:0;background:#D9CFE0;flex:none;padding:0}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s}
.switch.on{background:var(--ok)}
.switch.on::after{left:19px}
.switch[disabled]{opacity:.45;cursor:not-allowed}
.status-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border-radius:14px;background:var(--okbg);color:#0A5A3D;font-size:14px;margin-bottom:18px}
.status-line b{font-weight:700}
.status-line a{color:inherit;font-weight:600}
.live{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(14,154,104,.2)}

/* documents */
.doc{font-size:14px;color:#222;background:#fff}
.doc .dh{display:flex;justify-content:space-between;gap:20px;border-bottom:2px solid var(--ink);padding-bottom:14px;margin-bottom:14px}
.doc .dh b{font-family:var(--display);font-size:22px}
.doc .dt{font-family:var(--display);font-size:26px;font-weight:800;text-align:right}
.doc table td,.doc table th{padding:7px 6px}
.doc .tot{margin-left:auto;width:260px;margin-top:10px}
.doc .tot div{display:flex;justify-content:space-between;padding:4px 0}
.doc .tot .g{border-top:2px solid var(--ink);font-weight:700;font-size:16px;padding-top:7px}
.doc .foot{margin-top:22px;font-size:12px;color:#666}

/* ================= LE LAB (sombre) ================= */
body.lab{background:var(--night)}
body.lab main{color:#fff}
body.lab main::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(40% 40% at 95% 0%,rgba(230,42,209,.22),transparent 70%),radial-gradient(35% 45% at 10% 100%,rgba(123,44,255,.28),transparent 70%)}
body.lab main::after{content:"";position:fixed;inset:0;pointer-events:none;background-image:var(--grain);opacity:.18;mix-blend-mode:overlay}
body.lab .wrap{position:relative;z-index:1}
.labhead{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.labhead h1{font-size:44px;font-weight:800;letter-spacing:-.03em}
.labhead h1 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.labhead p{margin:4px 0 0;color:var(--nmist)}
.solde{display:flex;align-items:center;gap:12px;padding:8px 8px 8px 16px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid var(--nline)}
.solde b{font-family:var(--display);font-size:24px}
.solde small{display:block;font-size:12px;color:var(--nmist)}
.nbtn{border:0;border-radius:12px;padding:10px 15px;font-weight:600;background:#fff;color:var(--night)}
.nbtn.dim{background:rgba(255,255,255,.1);color:#fff}
.nbtn.dim:hover{background:rgba(255,255,255,.16)}
.nbtn.grad{background:var(--grad);color:#fff}
.nbtn[disabled]{opacity:.35;cursor:not-allowed}
.lab-sec{margin-bottom:30px}
.lab-sec h2{font-size:21px;font-weight:700;margin-bottom:12px}
.lab-sec h2 small{font-family:var(--body);font-size:13px;color:var(--nmist);font-weight:500;margin-left:8px}
.prodpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px}
.pp{all:unset;cursor:pointer;border-radius:16px;background:rgba(255,255,255,.05);border:1.5px solid var(--nline);padding:8px;display:flex;flex-direction:column;gap:6px;position:relative}
.pp:hover{border-color:rgba(255,255,255,.35)}
.pp.on{border-color:var(--fuchsia);background:rgba(230,42,209,.12)}
.pp .ph{border-radius:11px;overflow:hidden;aspect-ratio:1;background:#2A1640}
.pp .ph svg{width:100%;height:100%;display:block}
.pp b{font-size:13px;font-weight:600;line-height:1.25}
.pp span{font-size:12px;color:var(--nmist)}
.pp .rup{position:absolute;top:14px;left:14px}
.pp.add .ph{display:grid;place-items:center;background:transparent;border:1.5px dashed rgba(255,255,255,.3)}
.pp.add .ph i{font-style:normal;font-size:34px;font-weight:300;color:#fff}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.gal button{all:unset;cursor:pointer;border-radius:14px;overflow:hidden;position:relative;background:#2A1640}
.gal button svg{display:block;width:100%;height:auto}
.gal button .cap{position:absolute;left:0;right:0;bottom:0;padding:22px 9px 8px;font-size:12px;background:linear-gradient(transparent,rgba(0,0,0,.75))}
.fmtlist{display:flex;flex-direction:column;gap:8px}
.fmt{all:unset;cursor:pointer;display:grid;grid-template-columns:46px 1fr auto;gap:14px;align-items:center;padding:12px 14px;border-radius:14px;border:1.5px solid var(--nline);background:rgba(255,255,255,.04)}
.fmt:hover{border-color:rgba(255,255,255,.3)}
.fmt.on{border-color:var(--fuchsia);background:rgba(230,42,209,.1)}
.fmt .shape{justify-self:center;border:2px solid rgba(255,255,255,.75);border-radius:5px}
.fmt b{display:block;font-weight:600}
.fmt span{font-size:13px;color:var(--nmist)}
.fmt .price{text-align:right;font-family:var(--display);font-weight:700;font-size:18px}
.fmt .price small{display:block;font-family:var(--body);font-weight:500;font-size:12px;color:var(--nmist)}
.steps{display:flex;gap:6px;margin-bottom:8px}
.steps i{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.14)}
.steps i.on{background:var(--grad)}
.stepname{font-size:13px;color:var(--nmist);margin-bottom:18px}
.flowgrid{display:grid;grid-template-columns:1fr 300px;gap:26px;align-items:start}
.flowside{position:sticky;top:20px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid var(--nline);padding:14px}
.flowside .sum{font-size:13px;color:var(--nmist);margin-top:10px;line-height:1.6}
.flowside .sum b{color:#fff;font-weight:600}
.flowbar{display:flex;justify-content:space-between;gap:10px;margin-top:22px;flex-wrap:wrap}
.occ{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.occ button{border:1.5px solid var(--nline);background:rgba(255,255,255,.04);color:#fff;border-radius:12px;padding:10px 14px;font-weight:500;text-align:left}
.occ button.on{border-color:var(--fuchsia);background:rgba(230,42,209,.14)}
.occ button[disabled]{opacity:.35;cursor:not-allowed}
.occ button small{display:block;font-size:12px;color:var(--nmist);font-weight:400}
.nf label{color:var(--nmist)}
.nf input,.nf textarea{background:rgba(255,255,255,.06);border-color:var(--nline);color:#fff}
.styles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.sty{all:unset;cursor:pointer;border-radius:14px;padding:6px;border:1.5px solid var(--nline);display:flex;flex-direction:column;gap:6px}
.sty.on{border-color:var(--fuchsia);background:rgba(230,42,209,.1)}
.sty svg{width:100%;height:auto;display:block;border-radius:9px}
.sty b{font-size:13px;font-weight:600;padding:0 3px 3px}
.props{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.prop{all:unset;cursor:pointer;border-radius:16px;padding:5px;border:2px solid transparent;position:relative}
.prop svg{width:100%;height:auto;display:block;border-radius:12px}
.prop.on{border-color:var(--fuchsia)}
.prop .n{position:absolute;top:12px;left:12px;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.55);display:grid;place-items:center;font-size:13px;font-weight:700}
.prop.on .n{background:var(--fuchsia)}
.paybar{position:sticky;bottom:16px;margin-top:20px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 12px 12px 18px;border-radius:18px;background:rgba(30,12,48,.92);border:1px solid var(--nline);backdrop-filter:none}
.paybar .t{font-size:14px;color:var(--nmist)}
.paybar .t b{color:#fff}
.gen{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:56vh;gap:18px}
.gen .orb{width:120px;height:120px;border-radius:50%;background:var(--grad);filter:blur(1px);animation:breathe 1.6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(.9);opacity:.8}50%{transform:scale(1.05);opacity:1}}
.gen h2{font-size:26px}
.gen p{color:var(--nmist);margin:0}
.bar{width:min(360px,80vw);height:6px;border-radius:6px;background:rgba(255,255,255,.12);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--grad);transition:width .25s linear}
.result{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:start}
.result .art svg{width:100%;height:auto;display:block;border-radius:18px;box-shadow:0 40px 80px -40px rgba(230,42,209,.5)}
.result .art{max-width:520px}
.result h2{font-size:28px;margin-bottom:4px}
.result textarea{width:100%;min-height:150px;border-radius:12px;border:1.5px solid var(--nline);background:rgba(255,255,255,.06);color:#fff;padding:12px;resize:vertical}
.actlist{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.actlist button{display:flex;justify-content:space-between;align-items:center;text-align:left}
.lockb{font-size:11px;font-weight:700;border-radius:6px;padding:1px 6px;background:rgba(255,255,255,.15)}
.hist{list-style:none;margin:0;padding:0;font-size:14px}
.hist li{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--nline)}
.hist li span{color:var(--nmist);font-size:13px}
.packs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.pack{all:unset;cursor:pointer;border-radius:14px;border:1.5px solid var(--nline);padding:12px 10px;text-align:center}
.pack.on{border-color:var(--fuchsia);background:rgba(230,42,209,.12)}
.pack b{display:block;font-family:var(--display);font-size:19px}
.pack span{font-size:12px;color:var(--nmist)}
.pack em{display:block;font-style:normal;font-size:11px;font-weight:700;color:var(--ambre);margin-top:3px}

/* Lab : menu d'offres */
.labtabs{display:flex;gap:4px;border-bottom:1px solid var(--nline);margin-bottom:14px;overflow-x:auto}
.labtabs button{all:unset;cursor:pointer;padding:10px 14px;font-weight:600;color:var(--nmist);border-bottom:2px solid transparent;white-space:nowrap}
.labtabs button.on{color:#fff;border-color:var(--fuchsia)}
.labtabs button:focus-visible,.ocard:focus-visible{outline:2px solid var(--fuchsia);outline-offset:2px}
.metiers,.chipsN{display:flex;gap:6px;flex-wrap:wrap}
.metiers{margin-bottom:24px}
.metiers button,.chipsN button{border:1.5px solid var(--nline);background:rgba(255,255,255,.04);color:#fff;border-radius:20px;padding:7px 13px;font-size:13px;font-weight:500}
.metiers button.on,.chipsN button.on{border-color:var(--fuchsia);background:rgba(230,42,209,.16)}
.chipsN button[disabled]{opacity:.35;cursor:not-allowed}
.ogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.moment{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(160px,200px);gap:12px;overflow-x:auto;padding-bottom:4px}
.ocard{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:5px}
.ocard .prev{display:block;border-radius:16px;overflow:hidden;aspect-ratio:4/5;background:#2A1640;border:1px solid var(--nline);transition:border-color .2s}
.ocard .prev svg{width:100%;height:100%;display:block}
.ocard:hover .prev{border-color:rgba(255,255,255,.45)}
.ocard .oname{font-weight:600;font-size:14px;line-height:1.3}
.ocard .oprice{font-size:13px;color:var(--ambre);font-weight:600}
.ba-a,.ba-ta{animation:baA 6s ease-in-out infinite}
.ba-b,.ba-tb{animation:baB 6s ease-in-out infinite}
@keyframes baA{0%,38%{opacity:0}48%,92%{opacity:1}100%{opacity:0}}
@keyframes baB{0%,38%{opacity:1}48%,92%{opacity:0}100%{opacity:1}}
.back{all:unset;cursor:pointer;color:var(--nmist);font-size:14px;margin-bottom:18px;display:inline-block;text-decoration:underline;text-underline-offset:3px}
.offer{display:grid;grid-template-columns:minmax(0,400px) 1fr;gap:34px;align-items:start}
.offer-prev svg{width:100%;height:auto;border-radius:20px;display:block}
.oh{font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.op{font-family:var(--display);font-size:26px;font-weight:700;color:var(--ambre);margin:8px 0 6px}
.offer h3,.order h3{font-size:16px;margin:20px 0 8px}
.order h3 small{font-family:var(--body);font-weight:500;color:var(--nmist);font-size:12px;margin-left:6px}
ul.dash{list-style:none;margin:0;padding:0}
ul.dash li{position:relative;padding-left:16px;margin-bottom:6px;color:var(--nmist)}
ul.dash li::before{content:"-";position:absolute;left:0;color:var(--fuchsia);font-weight:700}
.nbtn.big{padding:14px 22px;font-size:16px;margin-top:16px}
.hint{color:var(--nmist);font-size:13px;margin:0 0 10px}
.paysum{margin:16px 0 0;display:flex;flex-direction:column;gap:2px}
.paysum span{font-size:13px;color:var(--nmist)}
.paysum b{font-family:var(--display);font-size:30px}
.paysum small{color:var(--nmist)}
.flowside .nbtn.big{width:100%}
.variants{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px;margin-top:12px;max-width:520px}
.variants button{all:unset;cursor:pointer;border-radius:10px;overflow:hidden;border:2px solid transparent;position:relative;background:#2A1640;height:96px}
.variants button.on{border-color:var(--fuchsia)}
.variants svg{display:block;width:100%;height:100%}
.variants span{position:absolute;left:4px;bottom:4px;font-size:10px;background:rgba(0,0,0,.65);padding:1px 6px;border-radius:6px}
.labnote{font-size:12.5px;color:var(--nmist);margin-top:12px}
@media (prefers-reduced-motion:reduce){.ba-b,.ba-tb{display:none}.ba-a,.ba-ta{opacity:1}}
@media (max-width:1020px){
  .offer{grid-template-columns:1fr}
  .grid2,.result,.flowgrid{grid-template-columns:1fr}
  .flowside{position:static}
  .props,.styles{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .app{grid-template-columns:1fr}
  .rail{display:none}
  .top{display:flex;position:sticky;top:0;z-index:20;justify-content:space-between;align-items:center;padding:10px 16px;background:rgba(255,248,244,.96);border-bottom:1px solid var(--line)}
  body.lab .top{background:rgba(19,6,31,.96);border-color:var(--nline)}
  .top .logo{font-size:26px}
  .top .cred{border:1px solid var(--line);background:var(--card);border-radius:20px;padding:5px 12px;font-weight:600;font-size:13px}
  body.lab .top .cred{background:rgba(255,255,255,.08);border-color:var(--nline);color:#fff}
  main{padding:18px 16px 110px}
  .tabs{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;bottom:0;left:0;right:0;z-index:30;background:var(--card);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  body.lab .tabs{background:var(--night2);border-color:var(--nline)}
  .tabs button{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:600;color:var(--ink3);padding:4px 0}
  body.lab .tabs button{color:var(--nmist)}
  .tabs button.on{color:var(--ink)}
  body.lab .tabs button.on{color:#fff}
  .tabs svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .tabs .labtab span{width:46px;height:46px;border-radius:15px;background:var(--grad);display:grid;place-items:center;margin-top:-20px;box-shadow:0 8px 20px -6px rgba(230,42,209,.6)}
  .tabs .labtab svg{stroke:#fff}
  .pagehead h1{font-size:28px}
  .labhead h1{font-size:34px}
  .kpi{border-right:0;border-bottom:1px solid var(--line);flex-basis:50%}
  .plans{grid-template-columns:1fr}
  .plan{border-right:0;border-bottom:1px solid var(--line)}
  .row2{grid-template-columns:1fr}
  .packs{grid-template-columns:repeat(2,1fr)}
  .idea-in{grid-template-columns:90px 1fr}
  .ogrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .oh{font-size:28px}
  .caisse{grid-template-columns:1fr}
  .caisse>div{border-right:0;border-bottom:1px solid var(--line)}
  .hide-m{display:none}
  .sheet-wrap{align-items:flex-end;padding:0}
  .sheet{border-radius:22px 22px 0 0;max-height:94vh}
  .phone{width:100%;max-width:300px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{
  body *{visibility:hidden}
  #printDoc,#printDoc *{visibility:visible}
  #printDoc{position:fixed;inset:0;padding:30px}
}

/* ================= CHARTE BIIZZ V1 (octobre 2026) =================
   Couleurs : dégradé principal, Buzz Pink #D474AC, Berry Buzz #BE0C71, Bee Flame #E73E1E et #EB6708,
   Honey Cream #F9FAEB, Blush Cloud #FBE3F1, Buzz Black #131313.
   Combinaisons : Blush Cloud sur dégradé, Buzz Black sur Blush Cloud, Blush Cloud sur Buzz Black.
   À éviter : blanc sur Blush Cloud. Polices : Placard Next (titres), Manrope (texte). */
:root{
  --fond:url(../img/motifs/fond-degrade.webp);
  --pat1:url(../img/motifs/anneaux-1.webp);
  --pat2:url(../img/motifs/anneaux-2.webp);
  --patc:url(../img/motifs/anneaux-coin.webp);
  --ink:#131313; --ink2:rgba(19,19,19,.74); --ink3:rgba(19,19,19,.52);
  --paper:#FFFFFF; --card:#FFFFFF; --line:rgba(19,19,19,.10); --soft:#F4F2F3;
  --violet:#BE0C71; --fuchsia:#F20CF0; --rose:#D474AC; --orange:#EB6708; --ambre:#EB6708; --flame:#E73E1E; --honey:#F9FAEB; --blush:#FBE3F1;
  --night:#131313; --night2:#1C1C1C; --nline:rgba(251,227,241,.13); --nmist:rgba(251,227,241,.7);
  --grad:linear-gradient(115deg,#6C2BFF 0%,#F20CF0 34%,#F21C7C 60%,#FF4A1C 82%,#FF9B2A 100%);
  --display:"Placard Next","Arial Narrow",sans-serif;
  --body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
}
h1,h2,h3{letter-spacing:0;font-weight:700}
.pagehead h1{font-size:42px}
.panel h2{font-size:22px}
.btn:hover{background:#2B2B2B}
.panel,.kpis{background:var(--card)}
.kpi b{font-size:30px}
.pill.v{background:rgba(190,12,113,.1);color:var(--violet)}
.notice.v{background:rgba(190,12,113,.08);color:#7A0848}
.plan.cur{background:rgba(190,12,113,.06)}
.f input,.f select,.f textarea,.caisse input{background:rgba(19,19,19,.035)}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--violet)}
.nf input,.nf textarea{background:rgba(251,227,241,.06)}
.chip,.seg button{background:transparent}
.chip.on,.seg button.on{background:#131313;border-color:#131313;color:var(--blush)}
.sheet{background:var(--paper)}
.sheet.night{background:#1C1C1C}
/* le rail : Blush Cloud sur Buzz Black */
.rail{background:#131313;border-right:0;color:var(--blush)}
.logo{background:none;padding:2px 4px;color:inherit}
.logo svg{display:block;height:38px;width:auto}
.shopcard{background:rgba(251,227,241,.07)}
.shopcard .av{background:var(--grad);color:#fff}
.shopcard b{color:var(--blush)}
.plan-tag{color:var(--rose)}
.nav button{color:rgba(251,227,241,.72)}
.nav svg{stroke:currentColor;stroke-width:1.75}
.nav button:hover{background:rgba(251,227,241,.08);color:var(--blush)}
.nav button.on{background:var(--blush);color:#131313}
.nav button.on svg{stroke:#131313}
.nav .lab-btn,.nav .lab-btn.on{background:var(--grad);color:#fff}
.nav .lab-btn svg,.nav .lab-btn.on svg{stroke:#fff}
.nav .lab-btn .dot{background:#fff}
.nav .lab-btn.on{outline:2px solid var(--blush);outline-offset:2px}
.nav-sep{color:rgba(251,227,241,.45)}
.nav .lock{color:rgba(251,227,241,.5)}
.nav .lock .pl{color:var(--rose);border-color:rgba(212,116,172,.45)}
.rail-foot{color:rgba(251,227,241,.42)}
.wallet-mini{background:rgba(251,227,241,.07);border-color:rgba(251,227,241,.14);color:var(--blush)}
.wallet-mini small{color:rgba(251,227,241,.6)}
.wallet-mini .pill.v{background:var(--blush);color:#131313}
/* le héros : Blush Cloud sur le dégradé, avec le motif d'anneaux */
.hero{background:#131313 var(--fond) center/cover;color:var(--blush)}
.hero::before{background:var(--patc) right -150px top -150px/320px no-repeat;opacity:.7}
.hero .lbl,.hero .calc,.hero .link{color:rgba(251,227,241,.92)}
.hero .calc b{color:#fff}
.hero .big{font-weight:700;letter-spacing:0;font-size:clamp(56px,8vw,96px)}
.idea{background:var(--grad)}
.idea-in{background:#131313 var(--pat1) right -150px bottom -170px/280px no-repeat}
.idea .k{color:var(--rose)}
/* le Lab : sur Buzz Black, avec la lueur du dégradé en bas comme dans la charte */
body.lab{background:#131313}
body.lab main::before{background:radial-gradient(55% 35% at 50% 105%,rgba(242,12,240,.32),transparent 70%),radial-gradient(35% 30% at 0% 100%,rgba(108,43,255,.32),transparent 70%),radial-gradient(35% 30% at 100% 100%,rgba(255,74,28,.26),transparent 70%)}
.labhead{position:relative}
.labhead::before{content:"";position:absolute;right:-90px;top:-150px;width:260px;height:260px;z-index:-1;background:var(--pat2) center/contain no-repeat;opacity:.35;pointer-events:none}
.labhead{isolation:isolate}
.labhead>*{position:relative}
.labhead h1{font-size:58px;font-weight:700;letter-spacing:0}
.solde{background:rgba(251,227,241,.06)}
.nbtn{background:var(--blush);color:#131313}
.nbtn.dim{background:rgba(251,227,241,.1);color:var(--blush)}
.ocard .oprice,.op{color:var(--orange)}
.metiers button.on,.chipsN button.on,.pp.on,.fmt.on,.prop.on,.variants button.on,.pack.on,.occ button.on{border-color:var(--rose)}
.labtabs button.on{border-color:var(--rose)}
.oh{font-weight:700;letter-spacing:0;font-size:42px}
@media (max-width:820px){
  .top{background:#131313;border-color:transparent}
  .top .logo svg{height:30px}
  .top .cred{background:rgba(251,227,241,.1);color:var(--blush);border-color:rgba(251,227,241,.2)}
  .tabs{background:#131313;border-color:transparent}
  .tabs button{color:rgba(251,227,241,.55)}
  .tabs button.on{color:var(--blush)}
  body.lab .tabs{background:#131313}
  .pagehead h1{font-size:34px}
  .labhead h1{font-size:44px}
  .oh{font-size:34px}
}
/* ================= VERSION GRATUITE V1, PREMIÈRE CONNEXION, SUIVI DU LAB ================= */
.daybar{display:flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:18px;background:var(--card);padding:6px 6px 6px 0;flex-wrap:wrap}
.daybar>div{flex:1 1 150px;padding:10px 18px;border-right:1px solid var(--line)}
.daybar>div span{display:block;font-size:13px;color:var(--ink2)}
.daybar>div b{display:block;font-family:var(--display);font-size:28px;line-height:1.1}
.daybar>div small{font-size:12px;color:var(--ink3)}
.daybar .btn{margin:6px 10px 6px auto}
.teaser{border-style:dashed;background:transparent}
.teaser p{margin:0 0 12px;color:var(--ink2);font-size:14px}
.receipt{display:flex;justify-content:center;background:rgba(19,19,19,.06);border-radius:16px;padding:18px}
.receipt svg{width:100%;max-width:300px;height:auto;display:block;box-shadow:0 18px 40px -24px rgba(19,19,19,.5);border-radius:14px}
.plans.four{grid-template-columns:repeat(4,1fr)}
.plans.four .plan{padding:14px}
.toast.act{pointer-events:auto;display:flex;align-items:center;gap:12px}
.tbtn{border:0;border-radius:9px;padding:6px 12px;background:var(--blush);color:#131313;font-weight:700}
.nav .lab-btn .dot.busy{animation:busy 1s ease-in-out infinite}
@keyframes busy{50%{transform:scale(1.8);opacity:.5}}
.pendingc{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;border:1px dashed var(--nline);color:var(--nmist);margin-bottom:12px}
.spin{width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(251,227,241,.2);border-top-color:var(--rose);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.gsteps{list-style:none;margin:6px 0 0;padding:0;text-align:left;min-width:260px}
.gsteps li{position:relative;padding:6px 0 6px 30px;color:rgba(251,227,241,.4)}
.gsteps li::before{content:"";position:absolute;left:4px;top:10px;width:14px;height:14px;border-radius:50%;border:2px solid rgba(251,227,241,.25)}
.gsteps li.cur{color:var(--blush)}
.gsteps li.cur::before{border-color:var(--rose);border-top-color:transparent;animation:spin 1s linear infinite}
.gsteps li.done{color:var(--nmist)}
.gsteps li.done::before{background:var(--rose);border-color:var(--rose)}
.gsteps li.done::after{content:"";position:absolute;left:9px;top:13px;width:4px;height:7px;border:solid #131313;border-width:0 2px 2px 0;transform:rotate(45deg)}
.mpay{display:none}
.onb-link{all:unset;cursor:pointer;display:block;text-align:center;font-size:14px;text-decoration:underline;text-underline-offset:3px;margin-top:14px;color:inherit;opacity:.85}
.onb-link[disabled]{opacity:.45;cursor:default;text-decoration:none}
.onb-link.dark{display:inline;text-align:left;margin:4px 0 0;font-size:12px}
/* première connexion : Blush Cloud sur le dégradé, puis Buzz Black sur Blush Cloud */
.onb{position:fixed;inset:0;z-index:70;overflow:auto;background:#131313 var(--fond) center/cover;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.onb[hidden]{display:none}
@media (max-width:820px){ body:has(.mpay) .toast{bottom:170px} }
.onb::before{content:"";position:fixed;inset:0;background:var(--patc) right -140px bottom -140px/420px no-repeat;opacity:.55;pointer-events:none}
body.onb-open{overflow:hidden}
.onb-card{position:relative;width:min(440px,100%);background:var(--blush);color:#131313;border-radius:28px;padding:28px 26px 26px;box-shadow:0 40px 80px -40px rgba(19,19,19,.6)}
.onb-card h2{font-size:34px;margin:6px 0 6px}
.onb-card>p{margin:0 0 18px;color:var(--ink2)}
.onb-hero{text-align:center}
.onb-hero .onb-logo{width:150px;margin:0 auto 18px;background:#131313;border-radius:18px;padding:14px 18px}
.onb-hero .onb-logo svg{display:block;width:100%;height:auto}
.onb-hero h1{font-size:46px;line-height:1;margin:0 0 12px}
.onb-hero p{margin:0 0 22px;color:var(--ink2)}
.obtn{display:block;width:100%;border:0;border-radius:14px;padding:15px 18px;font-weight:700;font-size:16px;background:#131313;color:var(--blush);margin-top:10px}
.obtn.ghost{background:transparent;color:#131313;box-shadow:inset 0 0 0 1.5px rgba(19,19,19,.3)}
.onb-back{all:unset;cursor:pointer;font-size:14px;color:var(--ink2);text-decoration:underline;text-underline-offset:3px}
.onb-dots{display:flex;gap:6px;margin:14px 0 6px}
.onb-dots i{flex:1;height:4px;border-radius:4px;background:rgba(19,19,19,.12)}
.onb-dots i.on{background:var(--grad)}
.onb-phone{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:14px;overflow:hidden;background:rgba(19,19,19,.035)}
.onb-phone span{padding:14px;font-weight:700;border-right:1.5px solid var(--line)}
.onb-phone input{border:0;background:transparent;padding:14px;font-size:18px;font-weight:600;width:100%;letter-spacing:.04em}
.onb-phone input:focus{outline:none}
.onb-code{width:100%;border:1.5px solid var(--line);border-radius:14px;background:rgba(19,19,19,.035);padding:14px;font-size:30px;font-weight:700;letter-spacing:.5em;text-align:center;font-family:var(--display)}
.onb-err{color:var(--flame);font-weight:600;font-size:14px;min-height:20px;margin:8px 0 0}
.onb-hint{font-size:13px;color:var(--ink3);margin:4px 0 0}
.pin-dots{display:flex;justify-content:center;gap:14px;margin:18px 0 6px}
.pin-dots i{width:16px;height:16px;border-radius:50%;border:2px solid #131313}
.pin-dots i.on{background:#131313}
.pinpad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.pinpad button{border:0;border-radius:14px;padding:15px 0;font-size:22px;font-weight:700;background:rgba(19,19,19,.06);font-family:var(--display)}
.pinpad button[data-k="x"]{font-size:14px;font-family:var(--body)}
.pinpad button:active{background:rgba(19,19,19,.14)}
.onb-photo{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.onb-photo .ph{width:76px;height:76px;border-radius:16px;border:1.5px dashed rgba(19,19,19,.3);display:grid;place-items:center;overflow:hidden}
.onb-photo .ph i{font-style:normal;font-size:30px;font-weight:300}
.onb-photo .ph svg{width:100%;height:100%}
.onb-card .seg button{background:transparent}
.onb-card .seg button.on{background:#131313;color:var(--blush)}
@media (max-width:1020px){ .plans.four{grid-template-columns:repeat(2,1fr)} }
@media (max-width:820px){
  .plans.four{grid-template-columns:1fr}
  .daybar>div{border-right:0;border-bottom:1px solid var(--line)}
  .daybar .btn{margin:10px auto 6px 16px}
  .flowside .nbtn.big{display:none}
  .mpay{display:flex;align-items:center;justify-content:space-between;gap:12px;position:fixed;left:12px;right:12px;bottom:84px;z-index:25;padding:10px 10px 10px 16px;border-radius:16px;background:#1C1C1C;border:1px solid var(--nline);box-shadow:0 18px 40px -16px rgba(0,0,0,.7)}
  .mpay span{display:block;font-size:12px;color:var(--nmist)}
  .mpay b{font-family:var(--display);font-size:24px;color:var(--blush)}
  .order{padding-bottom:90px}
  .onb-card{padding:22px 18px}
  .onb-hero h1{font-size:40px}
}

/* ================= SITE SYNCHRONISÉ ET COMMANDES ================= */
.demosw{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 18px;padding:10px 12px;border-radius:14px;border:1px dashed var(--line);font-size:13px;color:var(--ink2)}
.demosw .seg{margin:0}
.demosw .seg button{padding:6px 12px;font-size:13px}
.phone .scr{position:relative}
.site-p .ph{position:relative}
.site-p .ph em{position:absolute;left:6px;top:6px;font-style:normal;font-size:10px;font-weight:700;background:#E73E1E;color:#fff;border-radius:8px;padding:2px 6px}
.site-p button.cmd{all:unset;cursor:pointer;display:block;margin-top:5px;font-size:11px;font-weight:700;color:#fff;background:#131313;border-radius:8px;padding:6px 8px;text-align:center}
.site-p button.cmd.wa2{background:#25D366;color:#063}
.site-ban{padding:10px 12px 0}
.site-ban svg{width:100%;height:auto;display:block;border-radius:12px}
.site-cart{all:unset;cursor:pointer;position:sticky;bottom:10px;display:block;margin:0 10px 10px;padding:12px;border-radius:12px;background:#131313;color:#fff;font-size:13px;font-weight:700;text-align:center;box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
.site-in{padding:16px 16px 22px;font-size:13px;color:#131313}
.site-in.center{text-align:center;padding-top:60px}
.site-in h4{font-family:var(--display);font-size:22px;margin:8px 0 10px;font-weight:400}
.site-back{all:unset;cursor:pointer;font-size:12px;text-decoration:underline;color:#555;display:inline-block;margin-top:8px}
.site-line{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid #eee}
.site-line.tot{font-size:15px;border-bottom:0}
.site-in label{display:block;font-size:12px;font-weight:600;margin-top:10px}
.site-in input,.site-in select{display:block;width:100%;box-sizing:border-box;margin-top:4px;padding:9px 10px;border:1px solid #ddd;border-radius:9px;font:inherit;font-size:13px;background:#fff}
.site-seg{display:flex;gap:6px;margin-top:12px}
.site-seg.wrap{flex-wrap:wrap}
.site-seg button{all:unset;cursor:pointer;flex:1 1 auto;text-align:center;padding:8px 6px;border:1px solid #ddd;border-radius:9px;font-size:12px;font-weight:600}
.site-seg button.on{background:#131313;color:#fff;border-color:#131313}
.site-note{font-size:12px;color:#666;margin:8px 0}
.site-err{color:#E73E1E;font-size:12px;font-weight:600;min-height:16px;margin-top:8px}
.site-go{all:unset;cursor:pointer;display:block;box-sizing:border-box;width:100%;text-align:center;margin-top:8px;padding:12px;border-radius:11px;background:#131313;color:#fff;font-weight:700}
.site-ok{width:54px;height:54px;border-radius:50%;margin:0 auto;display:grid;place-items:center;background:#1BB56B;color:#fff;font-size:26px;font-weight:700}
.spin.dark{margin:0 auto 6px;width:34px;height:34px;border-color:#eee;border-top-color:#131313}
.site-track{list-style:none;margin:14px 0;padding:0}
.site-track li{position:relative;padding:0 0 18px 26px;color:#aaa;font-weight:600}
.site-track li::before{content:"";position:absolute;left:3px;top:2px;width:12px;height:12px;border-radius:50%;border:2px solid #ccc;background:#fff}
.site-track li:not(:last-child)::after{content:"";position:absolute;left:9px;top:18px;bottom:2px;width:2px;background:#e4e4e4}
.site-track li.on{color:#131313}
.site-track li.on::before{background:#1BB56B;border-color:#1BB56B}
.site-track small{font-weight:400;color:#666}
.orders{display:grid;gap:12px}
.ocard2{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:14px 16px}
.oc-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.oc-h>b{font-family:var(--display);font-size:20px;font-weight:400}
.oc-d{margin-left:auto;font-size:12px}
.oc-b{display:grid;grid-template-columns:1.2fr 1.4fr auto;gap:14px;align-items:center;margin:10px 0 12px}
.oc-b>div>b{display:block;font-weight:700}
.oc-b>div>span{font-size:13px;color:var(--ink2)}
.oc-i{display:flex;flex-wrap:wrap;gap:6px}
.oc-i span{font-size:12px;background:rgba(19,19,19,.06);border-radius:8px;padding:4px 8px}
.oc-t{font-size:18px;text-align:right}
.oc-t small{display:block;font-size:11px;font-weight:500;color:var(--ink3)}
.oc-a{display:flex;gap:8px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--line);padding-top:10px}
.tick{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;cursor:pointer;margin-right:6px}
.tick input{width:18px;height:18px;accent-color:#131313}
select.mini{padding:7px 10px;border-radius:9px;border:1px solid var(--line);background:transparent;font:inherit;font-size:13px}
.zones{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.offers4{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.offc{display:flex;flex-direction:column}
.offc.on{box-shadow:inset 0 0 0 2px #131313}
.offc h2{margin-bottom:2px}
.offc .op2{font-family:var(--display);font-size:22px}
.offc p{font-size:13px;margin:4px 0 8px}
.offc .dash{font-size:13px;flex:1}
.panel ul.dash li{color:var(--ink2)}
.offc .gift{font-size:12px;font-weight:600;color:var(--violet);margin:8px 0 10px}
.offc .btn{align-self:flex-start}
.qrbox{display:flex;gap:18px;align-items:center;padding:16px;border-radius:16px;background:#fff;color:#131313}
.qrbox svg{flex:none;border-radius:6px}
.qrbox b{display:block;font-family:var(--display);font-size:22px;font-weight:400}
.qrbox span{display:block;font-size:13px;color:#555;margin-top:3px}
.nav .cnt{margin-left:auto;min-width:20px;height:20px;border-radius:10px;background:var(--flame);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 5px}
@media (max-width:820px){
  .oc-b{grid-template-columns:1fr auto}
  .oc-i{grid-column:1/-1;order:3}
  .offers4{grid-template-columns:1fr}
  .qrbox{flex-direction:column;text-align:center}
}


/* fond blanc pour la gestion : cadres blancs, bordure fine et ombre légère pour la hiérarchie */
body{background:var(--paper)}
.panel,.kpis,.daybar,.ocard2{background:var(--card);box-shadow:0 1px 2px rgba(19,19,19,.04),0 8px 24px -18px rgba(19,19,19,.18)}
.panel.teaser{box-shadow:none;background:#FAF9F9}
.f input,.f select,.f textarea,.caisse input{background:#FAF9F9}
.sheet{background:var(--card)}
.receipt{background:#F4F2F3}
.demosw{background:#FAF9F9}
.muted{color:rgba(19,19,19,.6)}
@media (max-width:820px){ .top{background:#131313} }
.tabs button{position:relative}
.tcnt{position:absolute;top:2px;left:calc(50% + 6px);min-width:16px;height:16px;border-radius:8px;background:var(--flame);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;padding:0 4px}

/* ================= REFONTE V2 : cadre, accueil, connexion =================
   Canevas gris neutre, panneaux blancs à bordure fine, sans ombre portée.
   Le dégradé de marque ne sert qu'au bénéfice du mois et au panneau de connexion. */
:root{--canvas:#F5F4F5;--line2:rgba(19,19,19,.09);--r:14px;--ease:cubic-bezier(.2,.7,.2,1)}
body{background:var(--canvas)}
.app{grid-template-columns:240px minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"rail top" "rail main"}
.rail{grid-area:rail;padding:20px 14px 16px;gap:14px}
.top{grid-area:top}
main{grid-area:main;padding:26px 36px 80px}
.wrap{max-width:1180px}
.wrap.enter,.onb-form.enter{animation:enter .22s var(--ease) both}
@keyframes enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes drop{from{opacity:0;transform:translateY(-4px)}}

/* surfaces communes */
.panel,.kpis,.daybar,.ocard2{box-shadow:none;border-color:var(--line2);border-radius:var(--r)}
.panel h2{font-size:20px;margin-bottom:14px}
.panel.teaser{background:transparent}
.f input,.f select,.f textarea,.caisse input{background:var(--card)}
.btn{border-radius:10px;transition:background .15s,box-shadow .15s,transform .1s}
.btn:active{transform:translateY(1px)}
.chip{transition:background .15s,border-color .15s}

/* rail */
.rail .logo{padding:4px 6px 2px}
.rail .logo svg{height:32px}
.shopcard{padding:8px;border-radius:12px;gap:10px;background:rgba(251,227,241,.06)}
.shopcard .av{width:34px;height:34px;border-radius:9px;font-size:14px;background:var(--blush);color:#131313}
.shopcard b{font-size:13.5px;line-height:1.25}
.plan-tag{font-size:11.5px;font-weight:600;color:rgba(251,227,241,.55)}
.nav-sep{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:14px 10px 6px;color:rgba(251,227,241,.4)}
.nav button{padding:8px 10px;border-radius:9px;font-size:14px;gap:10px;transition:background .15s,color .15s}
.nav svg{width:18px;height:18px}
.nav .lab-btn,.nav .lab-btn.on{margin:0;outline:0}
.nav .lab-btn{background:transparent;color:rgba(251,227,241,.72)}
.nav .lab-btn:hover{background:rgba(251,227,241,.08);color:var(--blush)}
.nav .lab-btn.on{background:var(--blush);color:#131313}
.nav .lab-btn svg{stroke:currentColor}
.nav .lab-btn.on svg{stroke:#131313}
.nav .lab-btn .dot{width:7px;height:7px;background:var(--grad)}
.soon summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;font-size:13px;font-weight:600;color:rgba(251,227,241,.5)}
.soon summary::-webkit-details-marker{display:none}
.soon summary:hover{color:var(--blush);background:rgba(251,227,241,.06)}
.soon summary svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.soon summary .chev{margin-left:auto;width:14px;height:14px;transition:transform .2s var(--ease)}
.soon[open] summary .chev{transform:rotate(180deg)}
.nav .lock{font-size:13px;padding:7px 10px}
.nav .lock .pl{font-size:10px;padding:0 5px;letter-spacing:.03em}
.rail-foot{font-size:11.5px;padding:0 10px}

/* barre du haut */
.top{display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:20;padding:14px 36px;background:var(--canvas);border-bottom:1px solid var(--line2)}
.top .logo{display:none}
.search{position:relative;flex:1;max-width:440px}
.search>svg{position:absolute;left:12px;top:11px;width:18px;height:18px;stroke:var(--ink3);fill:none;stroke-width:1.8;stroke-linecap:round;pointer-events:none}
.search input{width:100%;height:40px;border:1px solid var(--line2);border-radius:10px;background:var(--card);padding:0 12px 0 38px;font-size:14px;transition:border-color .15s,box-shadow .15s}
.search input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(19,19,19,.08)}
.srch,.umenu{position:absolute;top:46px;background:var(--card);color:var(--ink);border:1px solid var(--line2);border-radius:12px;box-shadow:0 14px 34px -14px rgba(19,19,19,.3);padding:6px;z-index:40;animation:drop .14s var(--ease)}
.srch{left:0;right:0;max-height:60vh;overflow:auto}
.srch button,.umenu button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:8px;font-size:14px}
.srch button:hover,.srch button:focus-visible,.umenu button:hover,.umenu button:focus-visible{background:var(--soft)}
.srch em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);min-width:64px}
.srch small{margin-left:auto;font-size:12px;color:var(--ink3);white-space:nowrap}
.srch .none{padding:12px 10px;font-size:14px;color:var(--ink2)}
.top-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.top .today{font-size:13px;color:var(--ink2);white-space:nowrap;margin-right:4px}
.chipbtn,.avbtn{display:inline-flex;align-items:center;gap:8px;height:40px;border:1px solid var(--line2);border-radius:10px;background:var(--card);color:var(--ink);font-size:13px;font-weight:600;transition:border-color .15s}
.chipbtn{padding:0 12px}
.chipbtn small{color:var(--ink3);font-size:12px}
.chipbtn b{font-family:var(--display);font-size:17px}
.avbtn{padding:0 12px 0 4px}
.chipbtn:hover,.avbtn:hover{border-color:rgba(19,19,19,.28)}
.avbtn i{font-style:normal;width:32px;height:32px;border-radius:8px;background:#131313;color:var(--blush);display:grid;place-items:center;font-family:var(--display);font-size:14px}
.umenu-w{position:relative}
.umenu{right:0;min-width:250px}
.umenu .who{padding:8px 10px 10px;border-bottom:1px solid var(--line2);margin-bottom:4px}
.umenu .who b{display:block;font-size:14px}
.umenu .who span{font-size:12px;color:var(--ink3)}
.umenu .out{color:var(--flame);font-weight:600}
.umenu hr{border:0;border-top:1px solid var(--line2);margin:4px 0}
.ibtn{display:none}
body.lab .top{background:#131313;border-color:var(--nline)}
body.lab .search input,body.lab .chipbtn,body.lab .avbtn{background:rgba(251,227,241,.06);border-color:var(--nline);color:var(--blush)}
body.lab .search input:focus{border-color:var(--blush);box-shadow:none}
body.lab .chipbtn small,body.lab .top .today{color:var(--nmist)}
body.lab .avbtn i{background:var(--blush);color:#131313}

/* accueil */
.dash-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.dash-head h1{font-size:40px;line-height:1.05;text-wrap:balance}
.dash-head p{margin:6px 0 0;color:var(--ink2)}
.dash-head .acts{display:flex;gap:8px}
.dgrid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:16px;align-items:start;margin-bottom:16px}
.dgrid.top-row{align-items:stretch}
.hero{border-radius:18px;padding:24px 26px;display:flex;flex-direction:column}
.hero .big{font-size:clamp(48px,5.2vw,78px)}
.calc2{margin:auto 0 0;padding-top:18px;font-size:14px}
.calc2 div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-top:1px solid rgba(251,227,241,.32)}
.calc2 dt{color:rgba(251,227,241,.9)}
.calc2 dd{margin:0;font-weight:700;color:#fff;white-space:nowrap}
.onb-brand .logo{align-self:flex-start;background:#131313;border-radius:12px;padding:10px 14px}
.onb-brand .logo svg{height:30px}
.statrow{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line2);border-radius:var(--r);background:var(--card);margin-bottom:16px;overflow:hidden}
.stat{font:inherit;color:inherit;text-align:left;background:none;border:0;border-right:1px solid var(--line2);padding:16px 20px;min-width:0;transition:background .15s}
.stat:last-child{border-right:0}
.stat:hover{background:#FAF9FA}
.stat span{display:block;font-size:13px;color:var(--ink2)}
.stat b{display:block;font-family:var(--display);font-size:30px;line-height:1.15;margin-top:2px;white-space:nowrap}
.stat small{font-size:12px;color:var(--ink3)}
.phead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.phead h2{margin:0}
.phead .muted{font-size:13px}
.lnk{all:unset;cursor:pointer;font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px;color:var(--ink2)}
.lnk:hover{color:var(--ink)}
.chart svg{display:block;width:100%;height:auto}
.chart .cbar{transition:opacity .15s}
.chart g:hover .cbar{opacity:.7}
.kpi.lead b{background:none;color:var(--ink);-webkit-text-fill-color:currentColor}
.pagehead h1{font-size:40px}
@media (max-width:1200px){.top .today{display:none}}
/* boutons à contour : au survol, fond noir et texte blanc (le texte restait noir sur noir) */
.btn.ghost:hover,.btn.ghost:focus-visible{background:#131313;color:#fff;box-shadow:inset 0 0 0 1.5px #131313}
.btn:hover,.btn:focus-visible{color:#fff}
.chip:hover:not(.on),.seg button:hover:not(.on){border-color:rgba(19,19,19,.45)}
/* téléphone réaliste (aperçu du site) */
.phone{position:relative;width:316px;max-width:100%;padding:11px;border-radius:52px;background:linear-gradient(145deg,#3a3a3c,#151515 40%,#2a2a2c);box-shadow:inset 0 0 0 1.5px #555,inset 0 0 0 4px #0b0b0b,0 50px 80px -40px rgba(19,19,19,.6),0 18px 30px -18px rgba(19,19,19,.45)}
.phone .pbtn{position:absolute;width:4px;border-radius:2px;background:linear-gradient(90deg,#2b2b2d,#4a4a4c)}
.phone .pw{right:-3px;top:150px;height:76px}
.phone .v1{left:-3px;top:118px;height:44px}.phone .v2{left:-3px;top:172px;height:44px}
.phone .scr{position:relative;height:650px;border-radius:42px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.phone .sbar{flex:none;display:flex;align-items:center;justify-content:space-between;padding:12px 26px 4px 30px;height:44px;font-size:14px;color:#131313;background:#fff}
.phone .sbar b{font-weight:700;letter-spacing:.01em}
.phone .island{position:absolute;left:50%;top:10px;transform:translateX(-50%);width:94px;height:28px;border-radius:16px;background:#000}
.phone .sbar>span{display:flex;align-items:center;gap:5px}
.phone .sbar svg{height:11px;fill:#131313}
.phone .bat{width:24px;height:12px;border:1.5px solid rgba(19,19,19,.45);border-radius:4px;padding:1.5px;position:relative}
.phone .bat::after{content:"";position:absolute;right:-4px;top:3px;width:2px;height:4px;border-radius:1px;background:rgba(19,19,19,.45)}
.phone .bat i{display:block;height:100%;width:72%;border-radius:2px;background:#131313}
.phone .addr{flex:none;margin:4px 12px 6px;height:34px;border-radius:11px;background:#F1F1F3;display:flex;align-items:center;gap:6px;padding:0 10px;font-size:12.5px;color:#131313}
.phone .addr span{flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phone .addr svg{width:14px;height:14px;fill:none;stroke:#6b6b6b;stroke-width:2;stroke-linecap:round;flex:none}
.phone .sbody{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;padding-bottom:26px}
.phone .sbody::-webkit-scrollbar{display:none}
.phone .hbar{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:120px;height:5px;border-radius:3px;background:#131313;opacity:.85}
.phone .url{display:none}
.st-nav{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;padding:10px 14px;background:rgba(255,255,255,.96);border-bottom:1px solid #eee}
.st-nav b{flex:1;font-family:var(--display);font-size:17px;font-weight:400;color:#131313;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-logo{width:28px;height:28px;border-radius:8px;background:#131313;color:#FBE3F1;display:grid;place-items:center;font-family:var(--display);font-size:12px}
.st-ico{position:relative}
.st-ico svg{width:22px;height:22px;fill:none;stroke:#131313;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}
.st-ico i{position:absolute;right:-6px;top:-5px;min-width:16px;height:16px;border-radius:8px;background:#E73E1E;color:#fff;font-style:normal;font-size:10px;font-weight:700;display:grid;place-items:center}
.st-hero{margin:12px 12px 0;min-height:210px;border-radius:16px;background:#131313 center/cover no-repeat;color:#fff;padding:16px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.st-hero small{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.st-hero b{font-family:var(--display);font-weight:400;font-size:21px;line-height:1.08}
.st-hero .wa{align-self:flex-start;font-size:12px;font-weight:700;background:#25D366;color:#063;border-radius:20px;padding:6px 12px;margin-top:4px}
.st-cats{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:12px 12px 2px}
.st-cats span{flex:none;font-size:11.5px;font-weight:600;border:1px solid #e3e3e3;border-radius:20px;padding:5px 11px;color:#333}
.st-cats span.on{background:#131313;border-color:#131313;color:#fff}
.st-h{display:flex;justify-content:space-between;align-items:baseline;padding:12px 14px 0;font-family:var(--display);font-size:17px;color:#131313}
.st-h small{font-family:var(--body);font-size:11px;color:#888}
.phone .site-p .ph{border-radius:12px;background:#F4F2F1}
.phone .site-p b{color:#131313}
.phone .site-p span{color:#131313}
.site-foot b{display:block;font-family:var(--display);font-weight:400;font-size:15px;color:#131313;margin-bottom:4px}
.site-foot span{display:block;margin-top:8px;font-weight:700;color:#131313}
@media (max-width:820px){.phone{width:290px}.phone .scr{height:600px}}
/* ===== page d'accueil publique ===== */
.onb.land:not([hidden]){display:block;padding:0;background:#131313}
/* ===== accueil, finition ===== */
.eyebrow{display:block;font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);margin-bottom:6px}
.dash-head{margin-bottom:22px}
.dash-head h1{font-size:42px}
.dash-head p{margin-top:4px}
.hero::before{display:none}
.hero{padding:26px 28px 22px;gap:4px}
/* carte bénéfice : photo de la charte à droite, fondue dans le dégradé ; textes à gauche */
.hero-ph{isolation:isolate}
.hero-ph .h-photo{position:absolute;z-index:0;top:0;right:0;width:52%;height:100%;object-fit:cover;object-position:58% 30%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%);mask-image:linear-gradient(90deg,transparent 0,#000 24%)}
.hero-ph::before{display:none}
.hero-ph>*:not(.h-photo){max-width:52%}
.hero-ph .h-top{max-width:100%}
.hero-ph .h-chip{position:relative;z-index:1;background:rgba(19,19,19,.55);backdrop-filter:none}
@media (max-width:820px){
  .hero-ph{padding-top:236px}
  .hero-ph .h-photo{width:100%;height:250px;object-position:62% 38%;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);mask-image:linear-gradient(180deg,#000 62%,transparent)}
  .hero-ph>*:not(.h-photo){max-width:100%}
}
.h-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.hero .lbl{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(251,227,241,.9)}
.h-chip{font-size:12.5px;font-weight:700;background:rgba(19,19,19,.28);color:#fff;border-radius:20px;padding:5px 11px}
.hero .big{margin:10px 0 0}
.calc2{padding-top:16px}
.calc2 div{padding:8px 0;border-top-color:rgba(251,227,241,.26)}
.calc2 dt{font-size:13.5px}
.hero .link{margin-top:10px;font-size:12.5px;align-self:flex-start}
.todo2 ul{list-style:none;margin:0;padding:0}
.todo2 li{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line2)}
.todo2 li:first-child{border-top:0;padding-top:4px}
.todo2 .t{flex:1;min-width:0}
.todo2 .t b{display:block;font-size:14.5px;font-weight:700;line-height:1.3}
.todo2 .t span{display:block;font-size:13px;color:var(--ink2);margin-top:2px}
.ic{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center}
.ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ic.v{background:rgba(190,12,113,.09);color:var(--violet)}
.ic.r{background:rgba(231,62,30,.1);color:var(--flame)}
.ic.n{background:var(--soft);color:var(--ink2)}
.cnt2{min-width:24px;height:24px;border-radius:12px;background:#131313;color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;padding:0 7px}
.phead{align-items:center}
.phead .muted{font-size:13px}
.ph-total{font-family:var(--display);font-size:24px}
.phead>div .muted{display:block;margin-top:2px}
.stat{padding:18px 20px}
.stat span{font-size:12.5px;font-weight:600;color:var(--ink2)}
.stat b{font-size:28px;margin:4px 0 2px}
.stat small{display:block;font-size:12.5px}
.tr{font-style:normal;font-weight:700}
.tr.up{color:var(--ok)}.tr.dn{color:var(--flame)}.tr.n{color:var(--ink3)}
.chart-foot{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin-top:8px;font-size:12.5px;color:var(--ink2)}
.chart-foot i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.chart-foot .r{margin-left:auto}
.sales2,.top2{list-style:none;margin:0;padding:0}
.sales2 li,.top2 li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line2)}
.sales2 li:first-child,.top2 li:first-child{border-top:0;padding-top:2px}
.sp{flex:none;width:44px;height:44px;border-radius:10px;overflow:hidden;background:var(--soft)}
.sp svg{width:100%;height:100%;display:block}
.sales2 .t,.top2 .t{flex:1;min-width:0}
.sales2 .t b,.top2 .t b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sales2 .t span,.top2 .t span{display:block;font-size:12.5px;color:var(--ink3);margin-top:1px}
.amt{font-size:14.5px;font-weight:700;white-space:nowrap}
.rk{flex:none;width:18px;font-family:var(--display);font-size:16px;color:var(--ink3);text-align:center}
.top2 .t{overflow:hidden}
.sales2 .t b span{display:inline;font-size:inherit}
.top2 .bar{display:block;height:4px;width:100%;border-radius:3px;background:var(--soft);margin-top:7px;overflow:hidden}
.top2 .bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#BE0C71,#EB6708)}
.idea2{display:flex;gap:16px;align-items:stretch;padding:16px}
.idea2 .i-ph{flex:none;width:118px;border-radius:12px;overflow:hidden;background:var(--soft)}
.idea2 .i-ph svg{width:100%;height:100%;display:block}
.idea2 .i-tx{display:flex;flex-direction:column;gap:4px;min-width:0}
.idea2 .eyebrow{color:var(--violet);margin:0}
.idea2 b{font-size:15.5px;line-height:1.3}
.idea2 p{margin:0;font-size:13px;color:var(--ink2)}
.i-act{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
.i-act span{font-size:12px;color:var(--ink3)}
.site2 .s-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--okbg)}
.site2 .s-row b{display:block;font-size:14px;color:#0A5A3D}
.site2 .s-row span{font-size:12.5px;color:#0A5A3D}
.s-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:10px;margin-top:12px}
.s-kv span{display:block;font-size:12px;color:var(--ink3)}
.s-kv b{font-size:15px}
@media (max-width:820px){.dash-head h1{font-size:32px}.sales2 .pill{display:none}.idea2 .i-ph{width:90px}.chart-foot .r{margin-left:0}}
/* Lab, choix du produit : juste l'image et la description, sans cadre */
.prodpick{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px}
.pp{border:0;background:none;padding:0;gap:8px}
.pp:hover{border:0}
.pp .ph{border-radius:14px;aspect-ratio:1;transition:transform .2s var(--ease),box-shadow .2s}
.pp:hover .ph{transform:translateY(-2px)}
.pp.on{background:none}
.pp.on .ph{box-shadow:0 0 0 3px var(--rose)}
.pp b{font-size:14px}
.pp span{font-size:13px;font-weight:600;color:var(--orange)}
.pp .rup{top:8px;left:8px}
.pp.add .ph{border:1.5px dashed rgba(251,227,241,.35);background:rgba(251,227,241,.04)}
.pp.add span{color:var(--nmist);font-weight:400}
.pex{position:absolute;left:10px;right:10px;bottom:10px;font-size:12px;font-weight:600;background:rgba(19,19,19,.72);color:var(--blush);border-radius:10px;padding:6px 9px}
/* ===== Mon catalogue (dans l'app) ===== */
.cat-link{display:flex;align-items:center;gap:10px;border:1px solid var(--line2);border-radius:12px;padding:6px 6px 6px 12px;background:var(--soft)}
.cl-ic svg{width:20px;height:20px;fill:none;stroke:var(--violet);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}
.cat-link input{flex:1;min-width:0;border:0;background:transparent;font-weight:700;font-size:14.5px;color:var(--ink)}
.cat-link input:focus{outline:none}
.nets{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.net{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line2);border-radius:12px;background:var(--card);font-weight:600;font-size:14px;color:var(--ink);text-align:left;transition:border-color .15s,background .15s}
.net span{flex:none;width:34px;height:34px;border-radius:10px;background:var(--c);display:grid;place-items:center}
.net svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.net:hover{border-color:var(--c);background:#FAF9F9}
.cat-msg{margin-top:16px}
.cat-msg label{display:block;font-size:13px;font-weight:600;color:var(--ink2);margin-bottom:6px}
.cat-msg textarea{width:100%;border:1px solid var(--line2);border-radius:12px;padding:10px 12px;background:var(--soft);color:var(--ink);resize:vertical;font-size:14px}
.cp-shop{all:unset;box-sizing:border-box;cursor:pointer;display:block;width:100%;border:1px solid var(--line2);border-radius:14px;overflow:hidden;transition:border-color .15s}
.cp-shop:hover{border-color:rgba(19,19,19,.35)}
.cp-head{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#131313;color:var(--blush)}
.cp-head i{font-style:normal;width:30px;height:30px;border-radius:8px;background:var(--blush);color:#131313;display:grid;place-items:center;font-family:var(--display);font-size:13px}
.cp-head b{font-family:var(--display);font-weight:400;font-size:18px}
.cp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px}
.cp-grid span{display:flex;flex-direction:column;gap:3px;min-width:0}
.cp-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:9px;display:block}
.cp-grid b{font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-grid em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--violet)}
.cat-prev .s-kv{margin-top:14px}
@media (max-width:820px){.nets{grid-template-columns:repeat(2,1fr)}.cp-grid{grid-template-columns:repeat(2,1fr)}}
/* ===== catalogue public (vue cliente) ===== */
body.cat-open{overflow:hidden}
#catv{position:fixed;inset:0;z-index:75;overflow-y:auto;background:#fff;color:#131313;animation:enter .2s var(--ease)}
.toast{z-index:100}
.cv-w{width:min(1120px,100% - 40px);margin:0 auto}
.cv-demo{position:sticky;top:0;z-index:4;display:flex;align-items:center;justify-content:center;gap:14px;padding:8px 16px;background:var(--violet);color:#fff;font-size:13px;font-weight:600}
.cv-demo button{border:0;border-radius:8px;padding:6px 12px;background:#fff;color:var(--violet);font-weight:700;font-size:13px}
.cv-top{position:sticky;top:37px;z-index:3;background:rgba(255,255,255,.97);border-bottom:1px solid #eee}
.cv-top .cv-w{display:flex;align-items:center;justify-content:space-between;height:64px}
.cv-brand{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px}
.cv-brand i{font-style:normal;width:36px;height:36px;border-radius:10px;background:#131313;color:var(--blush);display:grid;place-items:center;font-family:var(--display);font-size:15px}
.cv-brand b{font-family:var(--display);font-weight:400;font-size:22px}
.cv-cartb{position:relative;width:44px;height:44px;border-radius:12px;border:1px solid #e5e5e5;background:#fff;display:grid;place-items:center}
.cv-cartb svg{width:22px;height:22px;fill:none;stroke:#131313;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cv-cartb em{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;border-radius:10px;background:var(--flame);color:#fff;font-style:normal;font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 5px}
.cv-hero{background:#131313 center/cover no-repeat;color:#fff;padding:64px 0 56px}
.cv-eye{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blush);margin-bottom:8px}
.cv-hero h1{font-family:var(--display);font-weight:400;font-size:clamp(40px,6vw,72px);line-height:.95;margin:0}
.cv-hero p{margin:12px 0 0;max-width:52ch;font-size:16.5px;color:rgba(255,255,255,.88)}
.cv-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.cv-meta span{font-size:12.5px;font-weight:600;background:rgba(255,255,255,.14);border-radius:20px;padding:5px 12px}
.cv-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:24px 0 8px}
.cv-tools input{flex:1 1 260px;height:44px;border:1px solid #e3e3e3;border-radius:12px;padding:0 14px;font-size:14.5px;background:#fafafa}
.cv-tools input:focus{outline:none;border-color:#131313;background:#fff}
.cv-cats{display:flex;gap:6px;flex-wrap:wrap}
.cv-cats button{border:1px solid #e3e3e3;background:#fff;border-radius:20px;padding:8px 14px;font-size:13.5px;font-weight:600;color:#333}
.cv-cats button.on{background:#131313;border-color:#131313;color:#fff}
.cv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:22px 18px;padding:16px 0 56px}
.cv-card{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:6px}
.cv-ph{position:relative;display:block;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:#f4f2f1}
.cv-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s var(--ease)}
.cv-card:hover .cv-ph img,.cv-card:focus-visible .cv-ph img{transform:scale(1.04)}
.cv-card:focus-visible .cv-ph{outline:2px solid #131313;outline-offset:3px}
.cv-ph em{position:absolute;left:10px;top:10px;font-style:normal;font-size:11.5px;font-weight:700;background:var(--flame);color:#fff;border-radius:10px;padding:3px 9px}
.cv-card b{font-size:15px;font-weight:600;line-height:1.3}
.cv-pr{font-family:var(--display);font-size:20px}
.cv-back{all:unset;cursor:pointer;display:inline-block;margin:22px 0 14px;font-size:14px;font-weight:600;color:#555}
.cv-back:hover{color:#131313}
.cv-item-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start;padding-bottom:56px}
.cv-item figure{margin:0;border-radius:20px;overflow:hidden;background:#f4f2f1;aspect-ratio:4/5}
.cv-item figure img{width:100%;height:100%;object-fit:cover;display:block}
.cv-cat{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#888}
.cv-item h1,.cv-cart h1,.cv-done h1{font-family:var(--display);font-weight:400;font-size:clamp(32px,4vw,46px);line-height:1;margin:8px 0 10px}
.cv-price{font-family:var(--display);font-size:32px}
.cv-stock{color:#555;margin:8px 0 22px}
.cv-qty{display:inline-flex;align-items:center;border:1px solid #e3e3e3;border-radius:12px;overflow:hidden;margin-bottom:16px}
.cv-qty button{width:44px;height:44px;border:0;background:#fff;font-size:20px}
.cv-qty button[disabled]{opacity:.3;cursor:not-allowed}
.cv-qty b{min-width:40px;text-align:center;font-size:16px}
.cv-qty.sm{margin:0}.cv-qty.sm button{width:34px;height:34px;font-size:17px}.cv-qty.sm b{min-width:28px;font-size:14px}
.cv-btn{display:block;width:100%;border:0;border-radius:12px;padding:15px 18px;background:#131313;color:#fff;font-weight:700;font-size:15.5px;margin-top:10px;transition:background .15s}
.cv-btn:hover{background:#2b2b2b}
.cv-btn.ghost{background:#fff;color:#131313;box-shadow:inset 0 0 0 1.5px #d6d6d6}
.cv-btn.ghost:hover{background:#131313;color:#fff;box-shadow:none}
.cv-cart-g{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:32px;align-items:start;padding-bottom:56px}
.cv-lines{list-style:none;margin:0;padding:0}
.cv-lines li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #eee}
.cv-lines img{width:60px;height:60px;border-radius:12px;object-fit:cover;flex:none}
.cv-lines li>div:nth-child(2){flex:1;min-width:0}
.cv-lines b{display:block;font-size:14.5px}
.cv-lines span{font-size:13px;color:#777}
.cv-amt{min-width:84px;text-align:right}
.cv-total{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0}
.cv-total b{font-family:var(--display);font-size:28px}
.cv-form{border:1px solid #eee;border-radius:18px;padding:20px;background:#fafafa}
.cv-form h2{font-family:var(--display);font-weight:400;font-size:24px;margin:0 0 12px}
.cv-form label{display:block;font-size:13px;font-weight:600;color:#444;margin-top:12px}
.cv-form label small{font-weight:400;color:#999}
.cv-form input,.cv-form select{display:block;width:100%;margin-top:5px;height:44px;border:1px solid #ddd;border-radius:11px;padding:0 12px;font-size:14.5px;background:#fff}
.cv-form input:focus,.cv-form select:focus{outline:none;border-color:#131313}
.cv-seg{display:flex;gap:6px;margin-top:14px}
.cv-seg button{flex:1;border:1px solid #ddd;background:#fff;border-radius:11px;padding:10px;font-weight:600;font-size:13.5px}
.cv-seg button.on{background:#131313;border-color:#131313;color:#fff}
.cv-note{font-size:12.5px;color:#777;margin:10px 0 0}
.cv-err{color:var(--flame);font-size:13px;font-weight:600;min-height:18px;margin-top:10px}
.cv-empty{text-align:center;color:#666;padding:48px 0;display:grid;gap:12px;justify-items:center}
.cv-empty .cv-btn{width:auto}
.cv-done{max-width:560px;text-align:center;padding:56px 0 72px}
.cv-ok{width:64px;height:64px;border-radius:50%;margin:0 auto 14px;background:#1BB56B;color:#fff;display:grid;place-items:center;font-size:30px;font-weight:700}
.cv-done p{color:#555}
.cv-done ul{list-style:none;margin:22px 0;padding:0;text-align:left;border-top:1px solid #eee}
.cv-done li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #eee;font-size:14.5px}
.cv-done li.t{font-weight:700;font-size:16px}
.cv-cartbar{position:sticky;bottom:16px;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:12px;width:min(520px,100% - 32px);margin:0 auto 16px;border:0;border-radius:14px;padding:15px 20px;background:#131313;color:#fff;font-weight:700;font-size:15px;box-shadow:0 16px 34px -14px rgba(0,0,0,.55)}
body.visitor .cv-demo{display:none}
body.visitor .cv-top{top:0}
.live-st{display:flex;gap:10px;align-items:flex-start;margin-top:6px;padding:12px 14px;border-radius:12px;background:var(--soft);font-size:13px;color:var(--ink2)}
.live-st .live{flex:none;margin-top:4px;background:var(--ink3);box-shadow:none}
.live-st.on{background:var(--okbg);color:#0A5A3D}
.live-st.on .live{background:var(--ok);box-shadow:0 0 0 4px rgba(14,154,104,.2)}
#boot{position:fixed;inset:0;z-index:200;background:#131313;display:grid;place-items:center}
#boot div{display:grid;gap:18px;justify-items:center}
#boot svg{height:40px;width:auto}
#boot i{width:26px;height:26px;border-radius:50%;border:3px solid rgba(251,227,241,.2);border-top-color:#F20CF0;animation:spin 1s linear infinite}
.oc-note{background:#FFF6E5 !important;color:#6A3F00;font-style:italic}
.cv-foot{border-top:1px solid #eee;padding:22px 0;font-size:13px;color:#777}
.cv-foot .cv-w{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
@media (max-width:760px){
  .cv-w{width:calc(100% - 32px)}
  .cv-demo span{display:none}
  .cv-hero{padding:40px 0 36px}
  .cv-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
  .cv-card b{font-size:13.5px}.cv-pr{font-size:17px}
  .cv-item-g,.cv-cart-g{grid-template-columns:1fr;gap:20px}
  .cv-item figure{aspect-ratio:1}
}
/* aperçu du site : bascule téléphone / ordinateur */
.pv{display:flex;flex-direction:column;align-items:center;gap:16px}
.devsw{display:inline-flex;padding:4px;border-radius:12px;background:var(--card);border:1px solid var(--line2)}
.devsw button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--ink2);transition:background .15s,color .15s}
.devsw button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.devsw button:hover{color:var(--ink)}
.devsw button.on{background:#131313;color:#fff}
.devsw button:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
/* aperçu ordinateur : même colonne que le téléphone, site en largeur d'ordinateur réduit à l'échelle */
.pv-pc{width:100%}
.mac{width:100%}
.mac-scr{background:#1a1a1a;border-radius:14px 14px 4px 4px;padding:9px 9px 12px;box-shadow:inset 0 0 0 1.5px #3a3a3c,0 40px 70px -40px rgba(19,19,19,.55)}
.mac-fit{position:relative;overflow:hidden;border-radius:5px;height:300px}
.brw{position:absolute;left:0;top:0;width:1180px;height:760px;transform-origin:0 0;border-radius:8px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.brw-bar{flex:none;display:flex;align-items:flex-end;gap:14px;padding:8px 12px 0;background:#E8E6EA}
.dots{display:flex;gap:7px;padding-bottom:10px}
.dots i{width:11px;height:11px;border-radius:50%;background:#FF5F57}.dots i:nth-child(2){background:#FEBC2E}.dots i:nth-child(3){background:#28C840}
.brw-tab{background:#fff;border-radius:9px 9px 0 0;padding:8px 18px;font-size:12.5px;font-weight:600;color:#131313;max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brw-addr{flex:none;display:flex;align-items:center;gap:10px;padding:7px 12px;border-bottom:1px solid #eee}
.nav-a{font-size:20px;line-height:1;color:#999}
.brw-addr div{flex:1;display:flex;align-items:center;gap:6px;background:#F1F1F3;border-radius:16px;padding:6px 14px;font-size:12.5px;color:#131313}
.brw-addr svg{width:13px;height:13px;fill:none;stroke:#6b6b6b;stroke-width:2;stroke-linecap:round}
.brw .sbody{flex:1;overflow-y:auto;overflow-x:hidden}
.mac-base{height:12px;margin:0 -5%;background:linear-gradient(#d9d9dc,#a9a9ad);border-radius:0 0 14px 14px;position:relative}
.mac-base i{position:absolute;left:50%;top:0;transform:translateX(-50%);width:110px;height:6px;border-radius:0 0 8px 8px;background:#9b9ba0}
/* le site en version large */
.pv-pc .st-nav{padding:14px 32px}
.pv-pc .st-nav b{font-size:20px}
.pv-pc .st-hero{margin:18px 32px 0;min-height:300px;padding:32px;border-radius:20px}
.pv-pc .st-hero b{font-size:34px;max-width:22ch}
.pv-pc .st-hero small{font-size:12px}
.pv-pc .st-cats,.pv-pc .st-h{padding-left:32px;padding-right:32px}
.pv-pc .st-h{font-size:22px;padding-top:20px}
.pv-pc .site-grid{grid-template-columns:repeat(4,1fr);gap:18px;padding:16px 32px}
.pv-pc .site-p{font-size:13.5px}
.pv-pc .site-p button.cmd{font-size:12.5px;padding:8px 10px}
.pv-pc .site-ban,.pv-pc .site-in{padding-left:32px;padding-right:32px}
.pv-pc .site-in{max-width:520px;margin:0 auto}
.pv-pc .site-foot{padding:22px 32px 28px;font-size:12.5px}
/* catalogue : vraies photos en grand */
.prodcell .ph{width:52px;height:52px;border-radius:12px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.pcard{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s}
.pcard:hover{border-color:rgba(19,19,19,.3)}
.pimg{all:unset;cursor:pointer;position:relative;display:block;aspect-ratio:1;background:var(--soft);overflow:hidden}
.pimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s var(--ease)}
.pcard:hover .pimg img{transform:scale(1.04)}
.pimg .pill{position:absolute;left:10px;top:10px;font-style:normal}
.pnone{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:6px;color:var(--ink2);font-size:13px}
.pnone svg{width:70px;height:70px}
.pbody{padding:12px 14px 14px;display:flex;flex-direction:column;gap:3px;flex:1}
.pcat{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3)}
.pbody>b{font-size:15px;font-weight:700;line-height:1.3}
.pprice{display:flex;align-items:baseline;gap:8px;margin-top:2px}
.pprice span{font-family:var(--display);font-size:22px}
.pprice small{font-size:12px;color:var(--ink3)}
.pfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:10px;font-size:13px;color:var(--ink2)}
.padd{all:unset;box-sizing:border-box;cursor:pointer;border:1.5px dashed rgba(19,19,19,.22);border-radius:var(--r);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:280px;text-align:center;transition:border-color .15s,background .15s}
.padd:hover{border-color:#131313;background:var(--card)}
.padd span{font-size:40px;font-weight:300;line-height:1}
.padd b{font-size:15px}
.padd small{font-size:12.5px;color:var(--ink3)}
@media (max-width:820px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pprice span{font-size:18px}.pfoot{flex-direction:column;align-items:stretch}.padd{min-height:220px}}
/* Lab : lignes de cartes verticales animées */
.lab-row{margin-bottom:34px}
.row-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.row-h h2{font-size:24px;margin:0}
body.lab .lnk{color:var(--nmist)}
body.lab .lnk:hover{color:var(--blush)}
.row-w{position:relative}
.row-s{display:grid;grid-auto-flow:column;grid-auto-columns:188px;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px 0 6px}
.row-s::-webkit-scrollbar{display:none}
.reel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:18px 14px}
.reel{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:8px;scroll-snap-align:start;min-width:0}
.rv{position:relative;display:block;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#1C1C1C;transition:transform .25s var(--ease),box-shadow .25s}
.rv>svg{display:block;width:100%;height:100%}
.rvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.rvid+svg{position:absolute;inset:0}
.rv:not(.play) svg *{animation-play-state:paused!important}
.reel:hover .rv,.reel:focus-visible .rv{transform:translateY(-3px);box-shadow:0 0 0 2px var(--blush)}
.reel:focus-visible{outline:0}
.rtag{position:absolute;right:10px;top:10px;display:flex;align-items:center;gap:4px;padding:3px 9px 3px 6px;border-radius:20px;background:rgba(19,19,19,.62);color:var(--blush);font-style:normal;font-size:11.5px;font-weight:700}
.rtag svg{width:13px;height:13px;fill:currentColor}
.rmeta b{display:block;font-size:14px;font-weight:600;line-height:1.3}
.rmeta span{font-size:13px;font-weight:600;color:var(--orange)}
.rarrow{position:absolute;top:calc(50% - 40px);width:40px;height:40px;border-radius:50%;border:0;background:rgba(19,19,19,.78);color:var(--blush);font-size:24px;line-height:1;display:grid;place-items:center;opacity:0;transition:opacity .2s}
.rarrow.l{left:-14px}.rarrow.r{right:-14px}
.row-w:hover .rarrow,.rarrow:focus-visible{opacity:1}
.reel-big{max-width:340px}
.reel-big .rv{border-radius:20px}
@media (hover:none){.rarrow{display:none}}
.row-w.fits .rarrow{display:none}
@media (max-width:820px){.row-s{grid-auto-columns:150px;gap:10px}.reel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.row-h h2{font-size:21px}.reel-big{max-width:280px;margin:0 auto}}
.nf input,.nf textarea,.nf select,.result textarea{background:rgba(251,227,241,.06)}
main{overflow-x:clip}
.labhead::before{display:none}
/* cartes du Lab : le résultat d'abord, l'« avant » passe brièvement */
@keyframes baA{0%,60%{opacity:1}68%,90%{opacity:0}98%,100%{opacity:1}}
@keyframes baB{0%,60%{opacity:0}68%,90%{opacity:1}98%,100%{opacity:0}}
.ba-a,.ba-ta,.ba-b,.ba-tb{animation-duration:7s}
.chart .note{font-size:13px;color:var(--ink2);margin:10px 0 0}
.todo li{padding:12px 0}
.todo .mark{width:8px;height:8px}
.idea{background:#131313;padding:0;border-radius:var(--r)}
.idea-in{border-radius:var(--r)}

/* connexion */
.onb{background:#fff;padding:0;display:block}
.onb::before{display:none}
.onb-shell{display:grid;grid-template-columns:minmax(380px,44%) 1fr;min-height:100%}
.onb-brand{position:sticky;top:0;height:100vh;overflow:hidden;background:#131313 center 20%/cover no-repeat;color:var(--blush);padding:40px 48px;display:flex;flex-direction:column;justify-content:flex-end}
.onb-brand::after{content:"";position:absolute;right:-210px;bottom:-250px;width:430px;height:430px;border-radius:50%;border:26px solid transparent;background:linear-gradient(120deg,#6C2BFF,#F20CF0 45%,#FF4A1C 80%,#FF9B2A) border-box;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:.9;pointer-events:none}
.onb-copy{position:relative;z-index:1}
.onb-brand h1{font-size:clamp(40px,3.9vw,56px)}
.onb-copy small{display:block;margin-top:22px}
@media (max-height:760px){.onb-copy p{display:none}}
.onb-brand>*{position:relative;z-index:1}
.onb-brand .logo svg{height:40px;width:auto;display:block}
.onb-brand h1{font-size:clamp(48px,5vw,72px);line-height:.95;margin:0 0 16px}
.onb-brand p{max-width:40ch;margin:0;color:rgba(251,227,241,.92);font-size:16px}
.onb-facts{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px;max-width:44ch}
.onb-facts li{display:flex;gap:14px;font-size:14px;color:rgba(251,227,241,.92)}
.onb-facts b{font-family:var(--display);font-size:16px;min-width:22px}
.onb-brand small{font-size:12px;color:rgba(251,227,241,.75)}
.onb-main{display:flex;align-items:center;justify-content:center;padding:48px 24px}
.onb-form{width:min(400px,100%)}
.onb-mlogo{display:none}
.onb-form h2{font-size:36px;line-height:1.05;margin:10px 0 8px;text-wrap:balance}
.onb-form>p{margin:0 0 22px;color:var(--ink2)}
.onb-step{display:flex;align-items:center;gap:12px;margin:18px 0 4px;font-size:11px;font-weight:700;color:var(--ink3);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.onb-step .onb-dots{flex:1;margin:0}
.onb-dots i{height:3px}
.onb-dots i.on{background:#131313}
.onb-back{display:inline-flex;gap:6px;text-decoration:none;font-weight:600;font-size:13px}
.onb-back::before{content:"\2190"}
.onb-back:hover{color:var(--ink)}
.obtn{display:flex;align-items:center;justify-content:center;gap:10px;border-radius:12px;padding:14px 18px;font-size:15px;color:#fff;transition:background .15s,opacity .15s}
.obtn:hover{background:#2B2B2B}
.obtn.ghost{background:#fff;color:#131313;box-shadow:inset 0 0 0 1px rgba(19,19,19,.2)}
.obtn.ghost:hover{box-shadow:inset 0 0 0 1px #131313}
.obtn[disabled]{opacity:.75;cursor:progress}
.obtn .spin{width:16px;height:16px;border-width:2px;border-color:rgba(255,255,255,.3);border-top-color:#fff}
.onb-or{display:flex;align-items:center;gap:12px;margin:20px 0 0;font-size:12px;color:var(--ink3)}
.onb-or::before,.onb-or::after{content:"";flex:1;border-top:1px solid var(--line2)}
.onb-link{color:var(--ink2);font-weight:600}
.onb-phone,.onb-code,.onb-form .f input{border:1px solid rgba(19,19,19,.2);border-radius:12px;background:#fff;transition:border-color .15s,box-shadow .15s}
.onb-phone:focus-within,.onb-code:focus,.onb-form .f input:focus{outline:none;border-color:#131313;box-shadow:0 0 0 3px rgba(19,19,19,.08)}
.onb-phone span{border-right:1px solid rgba(19,19,19,.12);color:var(--ink2)}
.onb-err:not(:empty)::before{content:"!";display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--flame);color:#fff;font-size:11px;margin-right:6px;vertical-align:-2px}
.pin-dots{outline:0}
.pin-dots i{width:14px;height:14px;border-width:1.5px;transition:background .12s}
.pin-dots.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.pinpad{gap:8px}
.pinpad button{background:var(--canvas);border-radius:12px;padding:14px 0;transition:background .1s}
.pinpad button:hover{background:#EAE8EA}
.onb-form .seg button{background:#fff}
.onb-form .seg button.on{background:#131313;color:#fff}
.onb-check{width:48px;height:48px;border-radius:50%;background:#131313;color:var(--blush);display:grid;place-items:center;font-size:22px;font-weight:700}

@media (max-width:1100px){
  .dgrid{grid-template-columns:1fr}
  .statrow{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line2)}
}
@media (max-width:900px){
  .onb-shell{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:start}
  .onb-brand{position:relative;height:260px;padding:20px;background-position:center 18%}
  .onb-brand::after{width:240px;height:240px;border-width:16px;right:-100px;bottom:-130px}
  .onb-copy{display:none}
  .onb-main{align-items:flex-start;padding:28px 20px 40px}
  .onb-mlogo{display:none}
  .onb-mlogo svg{display:block;width:100%;height:auto}
  .onb-form h2{font-size:30px}
}
@media (max-width:820px){
  .app{grid-template-columns:1fr;grid-template-areas:"top" "main"}
  main{padding:18px 16px 110px}
  .top{padding:10px 16px;gap:8px;background:#131313;border-color:transparent}
  .top .logo{display:block}
  .top .logo svg{height:28px}
  .top .today{display:none}
  .search{display:none;position:absolute;left:12px;right:12px;top:10px;max-width:none}
  .top.searching .search{display:block}
  .top.searching .logo,.top.searching .top-r{visibility:hidden}
  .ibtn{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;border:1px solid rgba(251,227,241,.2);background:transparent;color:var(--blush)}
  .ibtn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
  .chipbtn,.avbtn{background:rgba(251,227,241,.08);border-color:rgba(251,227,241,.2);color:var(--blush)}
  .chipbtn small,.avbtn span{display:none}
  .avbtn{padding:0 4px}
  .avbtn i{background:var(--blush);color:#131313}
  .dash-head h1{font-size:32px}
  .dash-head .acts{width:100%}
  .dash-head .acts .btn{flex:1;justify-content:center}
  .stat{padding:14px 16px}
  .stat b{font-size:24px}
}
.qr-test{display:block;margin-top:10px;padding:8px 10px;border-radius:10px;background:var(--okbg);color:#0A5A3D;font-size:12.5px;font-weight:600}

/* ma caisse : un bloc par compte */
.comptes{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:18px}
.compte{display:flex;flex-direction:column;align-items:flex-start;gap:4px;background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:16px 18px}
.compte span{font-size:12.5px;font-weight:600;color:var(--ink2)}
.compte b{font-family:var(--display);font-size:26px;line-height:1.15;white-space:nowrap}
.compte b.neg{color:var(--alert)}
.compte .btn{margin-top:8px}
@media (max-width:1100px){.comptes{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.comptes{grid-template-columns:repeat(2,1fr)}.compte b{font-size:22px}}
/* moyens de paiement à leurs vraies couleurs : c'est ce que les clientes et vendeuses reconnaissent */
.paym{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink2);white-space:nowrap}
.paym i{width:9px;height:9px;border-radius:3px;flex:none}
.paym-esp i{background:#1F8A4C}
.paym-wave i{background:#1DC3F3}
.paym-om i{background:#FF7900}
.paym-mtn i{background:#FFCB05;box-shadow:inset 0 0 0 1px rgba(19,19,19,.15)}
.paym-bq i{background:#131313}
.paym-credit{color:var(--warn)}
.paym-credit i{background:transparent;box-shadow:inset 0 0 0 2px var(--warn)}
.pbar{height:6px;border-radius:4px;background:var(--soft);margin-top:6px;overflow:hidden}
.pbar i{display:block;height:100%;border-radius:4px;background:#131313}
.pbar-wave{background:#1DC3F3!important}.pbar-om{background:#FF7900!important}.pbar-mtn{background:#FFCB05!important}.pbar-esp{background:#1F8A4C!important}.pbar-ok{background:var(--ok)!important}
/* initiales des clientes, couleurs de la charte */
.who{display:flex;align-items:center;gap:10px;min-width:0}
.av2{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;letter-spacing:.02em}
.av2-0{background:#FBE3F1;color:#131313}.av2-1{background:#131313;color:#FBE3F1}.av2-2{background:#F9FAEB;color:#131313;box-shadow:inset 0 0 0 1px var(--line2)}
.who .sp{width:40px;height:40px}
/* ventes regroupées par jour, comme un relevé */
.dayg+.dayg{margin-top:18px}
.dayg-h{display:flex;justify-content:space-between;align-items:baseline;padding:0 0 8px;border-bottom:1px solid var(--line);margin-bottom:4px}
.dayg-h b{font-size:13px;font-weight:700;letter-spacing:.01em}
.dayg-h span{font-size:13px;font-weight:700;color:var(--ink2)}
.dayg .sales2 li:first-child{padding-top:10px}
.amt.muted{color:var(--ink3)}
.rcp{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;border:1px solid var(--line2);background:transparent;color:var(--ink2);cursor:pointer}
.rcp:hover{background:#131313;color:#fff;border-color:#131313}
.rcp svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* commandes : initiales de la cliente et photos des articles */
.oc-b .who b{display:block;font-weight:700}
.oc-b .who div>span{display:block;font-size:13px;color:var(--ink2)}
.oc-i span{display:inline-flex;align-items:center;gap:8px;background:none;padding:0;font-size:13px}
.oc-i .sp{width:36px;height:36px;border-radius:8px}
@media (max-width:820px){.sales2 .paym{font-size:0;gap:0}.rcp{width:30px;height:30px}}
.who .av2{font-size:12px}.who .av2-0,.who .av2-2{color:#131313}.who .av2-1{color:#FBE3F1}
.grid2>*{min-width:0}
/* listes en tableau : sur téléphone, chaque ligne devient un bloc lisible sans défilement de côté */
@media (max-width:600px){
  .mtab thead{display:none}
  .mtab tr{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:14px 0;border-bottom:1px solid var(--line)}
  .mtab tr:last-child{border-bottom:0}
  .mtab td{padding:0;border:0}
  .mtab td:first-child{flex:1 1 100%}
  .mtab td.hide-m{display:none}
  .mtab td:last-child{margin-left:auto}
}
/* comptes ajoutés par la vendeuse : rose de la charte ; case « ajouter » en pointillés */
.paym[class*="paym-cpt"] i{background:#D474AC}
.comptes{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.compte.add{align-items:center;justify-content:center;gap:6px;border-style:dashed;background:transparent;font:inherit;font-size:14px;font-weight:600;color:var(--ink2);cursor:pointer;min-height:120px}
.compte.add b{font-family:inherit;font-size:22px;line-height:1}
.compte.add:hover{border-color:#131313;color:#131313}
@media (max-width:600px){.comptes{grid-template-columns:repeat(2,1fr)}}
/* état de l'enregistrement, en bas du menu */
.rail-foot .sync{display:flex;align-items:center;gap:6px;margin-bottom:6px;color:rgba(251,227,241,.7)}
.rail-foot .sync:empty{display:none}
.rail-foot .sync::before{content:"";width:7px;height:7px;border-radius:50%;background:#1F8A4C}
.rail-foot .sync.off::before{background:var(--orange)}
.rail-foot .sync.local::before{background:#D474AC}
.rail-foot span:last-child{display:block}
/* comptes : toute la case ouvre le relevé */
button.compte{font:inherit;color:inherit;text-align:left;cursor:pointer;transition:border-color .15s}
button.compte:hover{border-color:#131313}
.compte .lnk2{margin-top:8px;font-size:12.5px;font-weight:600;color:var(--ink2);text-decoration:underline;text-underline-offset:3px}
/* relevé d'un compte */
.rel{list-style:none;margin:8px 0 0;padding:0;max-height:58vh;overflow:auto}
.rel li{border-top:1px solid var(--line2)}
.rel li>button,.rel li.start{display:flex;width:100%;gap:12px;align-items:center;justify-content:space-between;padding:11px 4px;background:none;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.rel li>button:hover{background:var(--soft)}
.rel li.start{cursor:default;color:var(--ink3)}
.rel .t{min-width:0}
.rel .t b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rel .t span{display:block;font-size:12px;color:var(--ink3);margin-top:1px}
.rel .r{flex:none;text-align:right}
.rel .r b{display:block;font-size:14px;font-weight:700}
.rel .r b.in{color:var(--ok)}
.rel .r span{display:block;font-size:12px;color:var(--ink3)}
.btn.danger{color:var(--alert);border-color:transparent}
.btn.danger.sure{background:var(--alert);color:#fff;border-color:var(--alert)}
/* fermer ma journée */
.clo-sum{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 14px}
.clo-sum div{background:var(--soft);border-radius:12px;padding:10px 12px}
.clo-sum span{display:block;font-size:12px;color:var(--ink2)}
.clo-sum b{font-family:var(--display);font-size:22px;font-weight:400}
.clo{display:flex;flex-direction:column}
.clo-r{display:grid;grid-template-columns:1fr 130px 90px;gap:6px 10px;align-items:center;padding:10px 0;border-top:1px solid var(--line2)}
.clo-n span:last-child{display:block;font-size:12px;color:var(--ink3);margin-top:2px}
.clo-r input{width:100%;padding:9px 10px;border:1.5px solid var(--line);border-radius:10px;font:inherit;font-size:15px}
.clo-e{text-align:right;font-size:14px}
.clo-r select{grid-column:1/-1;justify-self:end}
@media (max-width:600px){.clo-r{grid-template-columns:1fr 110px}.clo-e{grid-column:1/-1;text-align:left}}
/* ma caisse : les trois questions, en grand */
.q3{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:12px;margin-bottom:14px}
.q3-c{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:18px 20px}
.q3-c:first-child{background:#131313;border-color:#131313;color:#FBE3F1}
.q3-c span{display:block;font-size:14px;font-weight:700}
.q3-c b{display:block;font-family:var(--display);font-weight:400;font-size:44px;line-height:1.1;margin-top:6px;white-space:nowrap}
.q3-c b small{font-size:18px;margin-left:4px}
.q3-c em{display:block;font-style:normal;font-size:12.5px;color:var(--ink3);margin-top:2px}
.q3-c:first-child em{color:rgba(251,227,241,.6)}
.q3-c.in b{color:var(--ok)}
.q3-c.out b{color:var(--alert)}
@media (max-width:820px){.q3{grid-template-columns:1fr 1fr}.q3-c:first-child{grid-column:1/-1}.q3-c b{font-size:34px}}
/* mouvements : un signe clair devant chaque ligne */
.mvic{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:18px;font-weight:700;background:var(--soft);color:var(--ink2)}
.mvic.in{background:var(--okbg);color:var(--ok)}
.mvic.out{background:var(--alertbg);color:var(--alert)}
.amt.in{color:var(--ok)}
.amt.out{color:var(--alert)}
.mv-to{font-size:12px;margin:0 -6px}
.mvl .t span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:820px){.mvl .paym,.mv-to{display:none}}
.mvic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mvic.move{background:#131313;color:#FBE3F1}
.mvic.ecart{background:var(--warnbg);color:var(--warn)}
/* chiffres clés des pages : même carte que « Combien j'ai » (la première en noir, des cartes séparées) */
#view .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;border:0;border-radius:0;background:none;box-shadow:none;padding:0}
#view .kpi{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:18px 20px;min-width:0}
#view .kpi span{display:block;font-size:14px;font-weight:700;color:var(--ink)}
#view .kpi b{font-family:var(--display);font-weight:400;font-size:40px;line-height:1.1;margin-top:6px;white-space:nowrap}
#view .kpi b small{font-size:18px;font-weight:400;margin-left:4px;color:inherit}
#view .kpi.lead{background:#131313;border-color:#131313}
#view .kpi.lead span,#view .kpi.lead b{color:#FBE3F1;-webkit-text-fill-color:currentColor}
@media (max-width:820px){#view .kpis{grid-template-columns:1fr 1fr}#view .kpi.lead{grid-column:1/-1}#view .kpi b{font-size:32px}}
/* carte du bénéfice : fond noir, logo Biizz en grand dans son dégradé */
.hero.hero-bz{background:#131313;isolation:isolate}
.hero-bz .h-bz{position:absolute;z-index:0;right:-5%;bottom:-16%;width:60%;height:auto;pointer-events:none}
.hero-bz>*:not(.h-bz){max-width:54%}
.hero-bz .h-top{max-width:100%}
.hero-bz .h-chip{position:relative;z-index:1;background:rgba(251,227,241,.12)}
@media (max-width:700px){
  .hero-bz .h-bz{width:115%;right:-28%;bottom:auto;top:-6%;opacity:.28}
  .hero-bz>*:not(.h-bz){max-width:100%}
}
.hero-bz .h-bz{width:42%;right:3%;bottom:auto;top:50%;transform:translateY(-38%)}
@media (max-width:700px){
  .hero.hero-bz{padding-bottom:128px}
  .hero-bz .h-bz{width:92%;left:4%;right:auto;top:auto;bottom:-46px;transform:none;opacity:1}
}
/* cartes noires : le logo Biizz dans son dégradé, en bas à droite */
#view .kpi.lead,.q3-c:first-child{background:#131313 var(--bzm) no-repeat right 14px bottom -26px/auto 112%}
/* boutique suspendue par l'admin Vertex */
#blocked{position:fixed;inset:0;z-index:999;display:grid;place-items:center;padding:24px;background:#131313;color:#FBE3F1;text-align:center}
#blocked>div{max-width:420px}
#blocked svg{width:150px;height:auto}
#blocked h2{font-family:var(--display);font-weight:400;font-size:34px;margin:22px 0 8px}
#blocked p{color:rgba(251,227,241,.8);margin:0}
/* ===== page d'accueil publique, d'après la maquette « Biizz Landing » ===== */
.lp{background:#131313;color:#FBE3F1;font-size:16px;overflow-x:hidden}
.lp-w{width:min(1200px,100% - 64px);margin:0 auto;position:relative}
.lp h1,.lp h2,.lp h3{font-family:var(--display);font-weight:700;margin:0;letter-spacing:0;line-height:.95}
.lp p{margin:0}
.lp-btn{border:0;border-radius:999px;padding:11px 20px;font:inherit;font-size:14.5px;font-weight:700;background:#FBE3F1;color:#131313;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,box-shadow .15s}
.lp-btn:hover{background:#fff}
.lp-btn.sm{padding:8px 15px;font-size:13.5px}
.lp-btn.ghost{background:transparent;color:#FBE3F1;box-shadow:inset 0 0 0 1.5px #FBE3F1}
.lp-btn.ghost:hover{background:#FBE3F1;color:#131313}
.lp-btn.dark{background:#131313;color:#FBE3F1}
.lp-btn.dark:hover{background:#2b2b2b;color:#fff}
/* étiquettes penchées : Notre mission, à tout moment... */
.lp-tag{display:inline-block;font-family:var(--display);font-weight:700;font-size:clamp(22px,2.6vw,34px);line-height:1;padding:6px 14px 8px;transform:rotate(-3deg)}
.lp-tag.dark{background:#131313;color:#FBE3F1}
.lp-tag.light{background:#FBE3F1;color:#131313}
/* lueur verticale de la charte sur le bord gauche */
.lp-glow{position:relative}
.lp-glow::before{content:"";position:absolute;left:-40px;top:6%;bottom:6%;width:110px;background:linear-gradient(180deg,#6C2BFF,#BE0C71 45%,#E73E1E 85%,transparent);filter:blur(34px);opacity:.75;pointer-events:none}
.lp-nav{position:sticky;top:0;z-index:5;background:#131313;border-bottom:1px solid rgba(251,227,241,.12)}
.lp-nav .lp-w{display:flex;align-items:center;gap:40px;height:68px}
.lp-logo svg{height:26px;width:auto;display:block}
.lp-nav nav{display:flex;gap:28px}
.lp-nav nav button{background:none;border:0;color:rgba(251,227,241,.85);font:inherit;font-size:14px;cursor:pointer;padding:6px 0}
.lp-nav nav button:hover{color:#fff}
.lp-nav-r{margin-left:auto;display:flex;gap:10px}
.lp-hero{padding:64px 0 120px}
.lp-hero .lp-w{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.lp-hero h1{font-size:clamp(64px,9.6vw,140px);text-transform:uppercase}
.lp-hero-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:28px}
.lp-hero-row p{font-size:18px;max-width:30ch}
.lp-cta{display:flex;gap:10px;flex-wrap:wrap}
.lp-hero-img{width:100%;height:auto;display:block}
/* bande Notre mission : le téléphone dépasse sur la section noire du dessus */
.lp-mission{--g:max(32px,(100vw - 1200px) / 2);background:linear-gradient(180deg,#FBE3F1 0%,#FBE3F1 52%,#FBA8EE 100%);color:#131313}
.lp-mission .lp-w{display:grid;grid-template-columns:44% 1fr;align-items:end}
.lp-mission-ph{display:flow-root;margin-left:calc(-1 * var(--g));width:calc(100% + var(--g))}
/* la photo garde sa bande rose alignée sur celle de la section : seul le haut du téléphone dépasse sur la section noire */
.lp-mission-img{display:block;width:100%;height:auto;margin-top:-20.14%;
  -webkit-mask:linear-gradient(90deg,#000 90%,transparent) 0 100%/100% 71.2% no-repeat,linear-gradient(#000,#000) 84% 0/38% 30% no-repeat;mask:linear-gradient(90deg,#000 90%,transparent) 0 100%/100% 71.2% no-repeat,linear-gradient(#000,#000) 84% 0/38% 30% no-repeat}
.lp-mission-tx{grid-column:2;align-self:center;text-align:right;padding:44px 0}
.lp-mission-tx p{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.5vw,34px);line-height:1.12;margin-top:18px}
.lp-dark{padding:110px 0 100px}
.lp-feat{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.lp-feat img{width:100%;height:auto;aspect-ratio:764/622;object-fit:cover;border-radius:18px;display:block}
.lp-feat h3{font-size:clamp(22px,2vw,28px);margin:22px 0 10px}
.lp-feat p{color:rgba(251,227,241,.85);font-size:15.5px;line-height:1.45}
.lp-lab{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;margin-top:120px}
.lp-lab h2{font-size:clamp(56px,7.4vw,108px);text-transform:uppercase}
.lp-lab .lp-tag{margin:10px 0 0 clamp(60px,10vw,140px)}
.lp-lab-tx p{margin-top:40px;font-size:16.5px;line-height:1.5;color:rgba(251,227,241,.9);max-width:58ch}
.lp-lab-tx b{color:#FBE3F1}
.lp-lab ul{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:10px}
.lp-lab li{display:flex;align-items:center;gap:10px;font-size:16px}
.lp-lab li svg{flex:none;width:24px;height:24px;fill:none;stroke:#FBE3F1;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lp-lab-media{display:flex;flex-direction:column;align-items:flex-end;gap:28px}
.lp-lab-media img{width:100%;height:auto;display:block}
.lp-steps{background:linear-gradient(180deg,#FBE3F1 0%,#FBE3F1 55%,#FB98EA 100%);color:#131313;padding:80px 0 90px}
.lp-steps-h{text-align:center}
.lp-steps h2{font-size:clamp(44px,5.6vw,80px);text-transform:uppercase}
.lp-steps-h .lp-tag{margin:-4px 0 0 clamp(80px,14vw,220px)}
.lp-steps ol{list-style:none;padding:0;margin:52px auto 0;max-width:1060px;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.lp-steps h3{font-size:clamp(24px,2.3vw,32px);margin-bottom:8px}
.lp-steps li p{font-size:17px;line-height:1.4;max-width:28ch}
.lp-free{padding:80px 0}
.lp-free .lp-w{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.lp-free h2{font-size:clamp(44px,5.6vw,80px);text-transform:uppercase}
.lp-free p{margin-top:12px;font-size:17px;max-width:46ch}
.lp-free-a{display:flex;flex-direction:column;gap:12px;align-items:stretch}
/* dégradé final : magenta, rose et orange de la charte, avec des volutes de lumière */
.lp-final{padding:80px 0 90px;color:#FBE3F1;background:
  radial-gradient(60% 50% at 75% 55%,rgba(255,255,255,.18),transparent 62%),
  radial-gradient(90% 70% at 30% 95%,rgba(255,255,255,.12),transparent 55%),
  radial-gradient(70% 80% at 0% 100%,#6C2BFF,transparent 60%),
  radial-gradient(60% 70% at 100% 100%,#FF9B2A,transparent 60%),
  linear-gradient(160deg,#F20CF0 0%,#F20CF0 30%,#F21C7C 65%,#FF4A1C 100%)}
.lp-final-h{position:relative;display:grid;grid-template-columns:auto auto 1fr;align-items:end;gap:0 16px}
.lp-final h2{font-size:clamp(56px,8.4vw,124px);text-transform:uppercase}
.lp-final-h .lp-tag{align-self:center;margin-left:-60px}
.lp-final-a{justify-self:end;display:flex;flex-direction:column;gap:12px;align-self:center}
.lp .lp-avis-t{text-align:center;font-size:clamp(30px,3.2vw,44px);text-transform:uppercase;margin:60px 0 26px}
.lp-avis{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.lp-avis figure{margin:0;background:#131313;border-radius:18px;padding:22px 24px;display:flex;flex-direction:column}
.lp-stars{display:flex;gap:3px;justify-content:flex-end}
.lp-stars svg{width:15px;height:15px;fill:none;stroke:#FBE3F1;stroke-width:1.5}
.lp-stars svg.on{fill:#FBE3F1}
.lp-avis blockquote{margin:10px 0 18px;font-size:14.5px;line-height:1.5;color:rgba(251,227,241,.9);flex:1}
.lp-avis figcaption{font-size:12.5px;color:rgba(251,227,241,.65)}
.lp-avis figcaption b{font-family:var(--display);font-size:20px;color:#FBE3F1;margin-right:6px}
.lp-foot{background:#131313;color:rgba(251,227,241,.6);font-size:13px;padding:26px 0}
.lp-foot .lp-w{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.lp-foot .lp-logo svg{height:20px}
.lp-foot span:last-child{margin-left:auto}
@media (max-width:1020px){
  .lp-nav nav{display:none}
  .lp-hero .lp-w,.lp-lab{grid-template-columns:1fr}
  .lp-hero{padding:48px 0 80px}
  .lp-feat,.lp-avis{grid-template-columns:1fr 1fr}
  .lp-final-h{grid-template-columns:1fr}
  .lp-final-h .lp-tag{justify-self:start;margin:12px 0 0}
  .lp-final-a{justify-self:start;flex-direction:row;margin-top:24px}
}
@media (max-width:700px){
  .lp-w{width:calc(100% - 32px)}
  .lp-nav .lp-w{height:60px}
  .lp-nav-r .lp-btn:not(.ghost){display:none}
  .lp-hero-row p{font-size:16px}
  /* sur téléphone, la photo du téléphone passe au-dessus du texte de la mission */
  .lp-mission .lp-w{display:block}
  .lp-mission-ph{margin-left:-16px;width:calc(100% + 32px)}
  .lp-mission-tx{padding:12px 0 40px}
  .lp-dark{padding:72px 0}
  .lp-feat,.lp-avis,.lp-steps ol{grid-template-columns:1fr}
  .lp-lab{margin-top:72px}
  .lp-lab-media{align-items:stretch}
  .lp-steps-h .lp-tag{margin-left:40px}
  .lp-free-a,.lp-final-a{flex-direction:column;width:100%}
  .lp-foot span:last-child{margin-left:0}
}
/* ===== page d'accueil, ordinateur : cotes relevées sur la maquette « Biizz Landing » (page de 1440 px).
   calc(1 * var(--u)) = 1 px de la maquette ; tout suit la largeur de l'écran jusqu'à 1440 px. ===== */
.lp-br{display:none}
@media (min-width:1021px){
  .lp{--u:min(1px,100vw / 1440)}
  .lp-br{display:inline}
  .lp-w{width:calc(1222 * var(--u))}
  .lp-glow::before{display:none}
  .lp-tag{padding:calc(1 * var(--u)) calc(20 * var(--u)) calc(3 * var(--u));line-height:.92;font-weight:500}
  .lp-lab h2,.lp-final h2{transform:skewX(-5deg);transform-origin:left center}

  /* menu */
  .lp-nav{border-bottom:calc(1 * var(--u)) solid rgba(251,227,241,.12)}
  .lp-nav .lp-w{height:calc(101 * var(--u));gap:0}
  .lp-logo svg{height:calc(35 * var(--u))}
  .lp-nav nav{margin-left:calc(75 * var(--u));gap:calc(60 * var(--u))}
  .lp-nav nav button{font-size:calc(10 * var(--u));font-weight:500;padding:0;color:#FBE3F1}
  .lp-nav-r{gap:calc(37 * var(--u))}
  .lp-nav-r .lp-btn{height:calc(23 * var(--u));padding:0;font-size:calc(9 * var(--u));font-weight:600;display:inline-flex;align-items:center;justify-content:center}
  .lp-nav-r .lp-btn:first-child{width:calc(81 * var(--u))}
  .lp-nav-r .lp-btn:last-child{width:calc(92 * var(--u))}

  /* hero */
  .lp-hero{height:calc(552 * var(--u));padding:0;background:#131313 url(/assets/img/landing/glow-hero.jpg) left top/calc(360 * var(--u)) 100% no-repeat}
  .lp-hero .lp-w{display:block;height:100%}
  .lp-hero h1{position:absolute;left:calc(-2 * var(--u));top:calc(79 * var(--u));font-size:calc(110.7 * var(--u));line-height:calc(112 * var(--u));letter-spacing:calc(4.05 * var(--u))}
  .lp-hero-row{position:absolute;left:calc(3 * var(--u));top:calc(331 * var(--u));margin:0;gap:calc(23 * var(--u));align-items:flex-end;flex-wrap:nowrap}
  .lp-hero-row p{font-size:calc(20.3 * var(--u));line-height:calc(29 * var(--u));font-weight:500;max-width:none}
  .lp-cta{gap:calc(20 * var(--u));flex-wrap:nowrap}
  .lp-hero .lp-btn{height:calc(32 * var(--u));padding:0;font-size:calc(12.5 * var(--u));display:inline-flex;align-items:center;justify-content:center}
  .lp-hero .lp-cta .lp-btn:first-child{width:calc(127 * var(--u))}
  .lp-hero .lp-cta .lp-btn:last-child{width:calc(103 * var(--u))}
  .lp-hero-img{position:absolute;left:calc(710 * var(--u));top:calc(46 * var(--u));width:calc(530.6 * var(--u))}

  /* bande Notre mission */
  .lp-mission{position:relative;height:calc(316 * var(--u));
    background:radial-gradient(calc(1900 * var(--u)) calc(125 * var(--u)) at 42% 100%,rgb(252,128,228),rgba(252,128,228,0)),#FBE3F1}
  .lp-mission .lp-w{position:static;display:block;min-height:0;height:100%}
  .lp-mission-ph{position:absolute;left:0;bottom:calc(2 * var(--u));width:calc(639.2 * var(--u));margin:0}
  .lp-mission-img{margin-top:0}
  .lp-mission-tx{position:absolute;right:calc(50% - calc(568 * var(--u)));top:calc(58 * var(--u));padding:0;width:calc(700 * var(--u))}
  .lp-mission-tx .lp-tag{font-size:calc(46 * var(--u))}
  .lp-mission-tx p{font-weight:500;font-size:calc(38 * var(--u));line-height:calc(38 * var(--u));margin-top:calc(16 * var(--u))}

  /* fonctionnalités + Lab, sur la même section sombre */
  .lp-dark{height:calc(1325 * var(--u));padding:0;background:#131313 url(/assets/img/landing/glow-sombre.jpg) left top/calc(360 * var(--u)) 100% no-repeat}
  .lp-dark>.lp-w{height:100%}
  .lp-feat{position:absolute;left:calc(1 * var(--u));top:calc(109 * var(--u));grid-template-columns:calc(365 * var(--u)) calc(365 * var(--u)) calc(365 * var(--u));gap:calc(65 * var(--u))}
  .lp-feat img{width:calc(365 * var(--u));height:calc(299 * var(--u));aspect-ratio:auto;border-radius:calc(16 * var(--u))}
  .lp-feat h3{font-weight:500;font-size:calc(29.5 * var(--u));line-height:calc(30 * var(--u));margin:calc(34 * var(--u)) 0 0}
  .lp-feat p{font-size:calc(19.6 * var(--u));line-height:calc(23 * var(--u));margin-top:calc(21 * var(--u));color:#FBE3F1}
  .lp-lab{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;display:block}
  .lp-lab-tx{position:absolute;left:calc(5 * var(--u));top:calc(710 * var(--u))}
  .lp-lab h2{font-size:calc(99.8 * var(--u));line-height:calc(96 * var(--u));letter-spacing:calc(3.8 * var(--u))}
  .lp-lab .lp-tag{position:absolute;left:calc(209 * var(--u));top:calc(190 * var(--u));margin:0;font-size:calc(52 * var(--u))}
  .lp-lab-tx p{font-size:calc(21.8 * var(--u));line-height:calc(29.5 * var(--u));margin-top:calc(111 * var(--u));max-width:none;color:#FBE3F1}
  .lp-lab ul{margin-top:calc(33 * var(--u));gap:calc(8 * var(--u))}
  .lp-lab li{font-size:calc(21.8 * var(--u));line-height:calc(30 * var(--u));gap:calc(19 * var(--u))}
  .lp-lab li svg{width:calc(34 * var(--u));height:calc(34 * var(--u));margin:calc(-2 * var(--u))}
  .lp-lab-media{position:static}
  .lp-lab-media img{position:absolute;left:calc(733 * var(--u));top:calc(673 * var(--u));width:calc(508 * var(--u))}
  .lp-lab-media .lp-btn{position:absolute;right:calc(4 * var(--u));top:calc(1192 * var(--u));width:calc(179 * var(--u));height:calc(48 * var(--u));padding:0;font-size:calc(16 * var(--u));display:inline-flex;align-items:center;justify-content:center}

  /* prêt en trois étapes */
  .lp-steps{position:relative;height:calc(382 * var(--u));padding:0;
    background:radial-gradient(calc(1650 * var(--u)) calc(100 * var(--u)) at 42% 100%,rgb(252,150,233),rgba(252,150,233,0)),#FBE3F1}
  .lp-steps .lp-w{height:100%}
  .lp-steps-h{position:absolute;left:0;right:0;top:calc(44 * var(--u))}
  .lp-steps h2{font-size:calc(73 * var(--u));line-height:calc(74 * var(--u));letter-spacing:calc(-1.54 * var(--u))}
  .lp-steps-h .lp-tag{position:absolute;left:calc(50% + calc(12 * var(--u)));top:calc(81 * var(--u));margin:0;font-size:calc(42 * var(--u))}
  .lp-steps ol{position:absolute;left:0;top:calc(215 * var(--u));margin:0;max-width:none;width:100%;display:block}
  .lp-steps li{position:absolute;top:0}
  .lp-steps li:nth-child(1){left:calc(49 * var(--u))}.lp-steps li:nth-child(2){left:calc(438 * var(--u))}.lp-steps li:nth-child(3){left:calc(889 * var(--u))}
  .lp-steps h3{font-weight:500;font-size:calc(31.4 * var(--u));line-height:calc(32 * var(--u));margin:0;white-space:nowrap}
  .lp-steps li p{font-size:calc(22.4 * var(--u));line-height:calc(30 * var(--u));margin-top:calc(7 * var(--u));max-width:none;white-space:nowrap}

  /* commence gratuitement */
  .lp-free{position:relative;height:calc(272 * var(--u));padding:0}
  .lp-free .lp-w{display:block;height:100%}
  .lp-free .lp-w>div:first-child{position:absolute;left:0;top:calc(65 * var(--u))}
  .lp-free h2{font-size:calc(75.4 * var(--u));line-height:calc(76 * var(--u));letter-spacing:calc(-1.9 * var(--u))}
  .lp-free p{font-size:calc(20.9 * var(--u));line-height:calc(27 * var(--u));margin-top:calc(12 * var(--u));max-width:none}
  .lp-free-a{position:absolute;right:calc(2 * var(--u));top:calc(81 * var(--u));gap:calc(12 * var(--u));align-items:flex-end}
  .lp-free-a .lp-btn{height:calc(48 * var(--u));padding:0;font-size:calc(16 * var(--u));display:inline-flex;align-items:center;justify-content:center}
  .lp-free-a .lp-btn:first-child{width:calc(201 * var(--u))}
  .lp-free-a .lp-btn:last-child{width:calc(162 * var(--u))}

  /* ton business mérite Biizz */
  .lp-final{position:relative;height:calc(593 * var(--u));padding:0;background:url(/assets/img/landing/fond-final.jpg) center/100% 100% no-repeat}
  .lp-final .lp-w{height:100%}
  .lp-final-h{position:absolute;left:0;top:0;width:100%;height:calc(290 * var(--u));display:block}
  .lp-final h2{position:absolute;left:calc(-4 * var(--u));top:calc(29 * var(--u));font-size:calc(118 * var(--u));line-height:calc(124 * var(--u));letter-spacing:calc(4 * var(--u))}
  .lp-final-h .lp-tag{position:absolute;left:calc(538 * var(--u));top:calc(121 * var(--u));margin:0;font-size:calc(59 * var(--u))}
  .lp-final-a{position:absolute;right:0;top:calc(167 * var(--u));margin:0;gap:calc(11 * var(--u));align-items:flex-end}
  .lp-final-a .lp-btn{height:calc(42 * var(--u));padding:0;font-size:calc(15 * var(--u));display:inline-flex;align-items:center;justify-content:center}
  .lp-final-a .lp-btn:first-child{width:calc(182 * var(--u))}
  .lp-final-a .lp-btn:last-child{width:calc(159 * var(--u))}
  .lp .lp-avis-t{position:absolute;left:0;right:0;top:calc(304 * var(--u));margin:0;font-size:calc(42.6 * var(--u));line-height:calc(44 * var(--u));letter-spacing:-.calc(64 * var(--u))}
  .lp-avis{position:absolute;left:calc(12 * var(--u));top:calc(369 * var(--u));grid-template-columns:calc(356 * var(--u)) calc(356 * var(--u)) calc(356 * var(--u));gap:calc(65 * var(--u))}
  .lp-avis figure{height:calc(166 * var(--u));box-sizing:border-box;padding:calc(15 * var(--u)) calc(42 * var(--u)) 0 calc(33 * var(--u));border-radius:calc(16 * var(--u))}
  .lp-stars{gap:calc(1 * var(--u))}
  .lp-stars svg{width:calc(10.5 * var(--u));height:calc(10.5 * var(--u))}
  .lp-avis blockquote{font-size:calc(12.2 * var(--u));line-height:calc(16 * var(--u));margin:calc(14 * var(--u)) 0 0;flex:none;height:calc(72 * var(--u))}
  .lp-avis figcaption{font-size:calc(8 * var(--u));margin-top:calc(9 * var(--u))}
  .lp-avis figcaption b{font-size:calc(20 * var(--u))}

  /* pied de page */
  .lp-foot{height:calc(71 * var(--u));padding:0;font-size:calc(9 * var(--u))}
  .lp-foot .lp-w{height:100%;gap:calc(19 * var(--u));padding-bottom:calc(12 * var(--u));box-sizing:border-box}
  .lp-foot .lp-logo svg{height:calc(24 * var(--u))}
}
/* ===== inscription et connexion, d'après la maquette « Sign Up Page » (page de 1568 x 715).
   calc(1 * var(--u)) = 1 px de la maquette ; sur téléphone, la carte prend la largeur de l'écran. ===== */
.onb:not(.land){background:#131313}
.su{--u:min(100vw / 1568,100vh / 715);position:relative;min-height:100vh;background:#131313;color:#FBE3F1;overflow:hidden}
/* gauche : anneaux et photos de la maquette, recadrés comme un fond, et le titre en vrai texte */
.su-left{position:absolute;left:0;top:0;bottom:0;width:52.3%;overflow:hidden;container-type:size}
/* les photos restent entières : si l'écran est plus haut que la maquette, le haut et le bas se fondent dans le noir */
.su-art{position:absolute;left:0;bottom:0;height:min(100cqh,100cqw * 715 / 740);-webkit-mask:linear-gradient(transparent,#000 5%);mask:linear-gradient(transparent,#000 5%);aspect-ratio:820/715;container-type:size}
.su-art img{display:block;width:100%;height:100%}
.su-h1{position:absolute;left:calc(100cqw * 163 / 820);top:calc(100cqh * 104 / 715);margin:0;font-family:var(--display);font-weight:700;text-transform:uppercase;color:#FBE3F1;
  font-size:calc(100cqh * 88.8 / 715);line-height:calc(100cqh * 98 / 715);letter-spacing:calc(100cqh * 3.2 / 715)}
.su-h1 span{display:block;transform:skewX(-9deg);transform-origin:left 70%}
/* droite : logo et carte au contour rose */
.su-right{position:absolute;left:calc(71.9% - calc(270 * var(--u)));top:50%;width:calc(540 * var(--u));transform:translateY(-50%);display:flex;flex-direction:column;align-items:center}
.su-logo svg{display:block;height:calc(72 * var(--u));width:auto}
.su .su-card{width:100%;box-sizing:border-box;margin-top:calc(32 * var(--u));border:calc(1.5 * var(--u)) solid #FBE3F1;border-radius:calc(56 * var(--u));padding:calc(50 * var(--u)) calc(103 * var(--u)) calc(45 * var(--u)) calc(102 * var(--u));color:#FBE3F1;background:transparent}
.su .onb-head{display:flex;align-items:center;gap:calc(11 * var(--u));height:calc(25 * var(--u))}
.su .onb-back{display:inline-flex;align-items:center;gap:calc(11 * var(--u));color:#FBE3F1;font:inherit;text-decoration:none}
.su .onb-back::before{content:none}
.su .onb-back svg{width:calc(13 * var(--u));height:calc(10 * var(--u));fill:none;stroke:#FBE3F1;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.su .onb-back span{display:inline-flex;align-items:center;height:calc(23 * var(--u));padding:0 calc(14 * var(--u));border:calc(1 * var(--u)) solid #FBE3F1;border-radius:calc(20 * var(--u));font-size:calc(9.5 * var(--u));font-weight:600}
.su .onb-back:hover span{background:#FBE3F1;color:#131313}
.su .onb-tag{display:inline-block;background:#FBE3F1;color:#131313;font-family:var(--display);font-weight:500;font-size:calc(14.5 * var(--u));line-height:1;padding:calc(3 * var(--u)) calc(7 * var(--u)) calc(4 * var(--u));transform:rotate(-2deg)}
.su .onb-dots{display:flex;gap:calc(14.5 * var(--u));margin:calc(24 * var(--u)) 0 0}
.su .onb-dots i{flex:1;height:calc(1.5 * var(--u));border-radius:0;background:#4E4E4E}
.su .onb-dots i.on{background:#91838B}
.su .onb-form h2{font-family:var(--display);font-weight:500;font-size:calc(31 * var(--u));line-height:calc(34 * var(--u));margin:calc(26 * var(--u)) 0 0;color:#FBE3F1;text-wrap:initial}
.su .onb-form>p{font-size:calc(13.6 * var(--u));line-height:calc(15.5 * var(--u));margin:calc(9 * var(--u)) 0 0;color:#FBE3F1}
.su .onb-phone{margin-top:calc(35 * var(--u));height:calc(50 * var(--u));box-sizing:border-box;border:calc(1 * var(--u)) solid #FBE3F1;border-radius:calc(12 * var(--u));background:transparent;display:flex;align-items:center;padding:0 0 0 calc(18 * var(--u))}
.su .onb-phone:focus-within{box-shadow:0 0 0 calc(3 * var(--u)) rgba(251,227,241,.18);border-color:#FBE3F1}
.su .onb-phone span{padding:0 calc(14 * var(--u)) 0 0;border:0;border-right:calc(1 * var(--u)) solid rgba(251,227,241,.8);height:calc(20 * var(--u));display:flex;align-items:center;font-family:var(--display);font-weight:500;font-size:calc(19 * var(--u));color:#FBE3F1}
.su .onb-phone input{padding:0 calc(16 * var(--u));height:100%;font-family:var(--display);font-weight:500;font-size:calc(19 * var(--u));letter-spacing:.02em;color:#FBE3F1;background:transparent}
.su .onb-phone input::placeholder{color:#6E6E6E}
.su .obtn{margin-top:calc(28 * var(--u));height:calc(36 * var(--u));padding:0;border-radius:calc(8 * var(--u));background:#FBE3F1;color:#131313;font-family:var(--display);font-weight:500;font-size:calc(23 * var(--u));width:100%;border:0}
.su .obtn:hover{background:#fff}
.su .obtn.ghost{background:transparent;color:#FBE3F1;box-shadow:inset 0 0 0 calc(1 * var(--u)) #FBE3F1}
.su .onb-safe{text-align:center;font-size:calc(13 * var(--u));margin:calc(36 * var(--u)) 0 0;color:#FBE3F1}
.su .onb-err{color:#FF8A6B;font-size:calc(13 * var(--u));min-height:0;margin:calc(8 * var(--u)) 0 0}
.su .onb-err:empty{margin:0}
.su .onb-hint{color:rgba(251,227,241,.7);font-size:calc(12.5 * var(--u))}
.su .onb-link{color:#FBE3F1;font-size:calc(13 * var(--u))}
.su .onb-code{margin-top:calc(35 * var(--u));height:calc(50 * var(--u));box-sizing:border-box;border:calc(1 * var(--u)) solid #FBE3F1;border-radius:calc(12 * var(--u));background:transparent;color:#FBE3F1;font-family:var(--display);font-size:calc(26 * var(--u))}
/* étapes avec formulaire (boutique, produit) et pavé du code secret, dans le même style */
.su .f label{color:#FBE3F1;font-size:calc(13 * var(--u))}
.su .onb-form .f input{background:transparent;border:calc(1 * var(--u)) solid rgba(251,227,241,.7);color:#FBE3F1;border-radius:calc(10 * var(--u))}
.su .onb-form .f input::placeholder{color:#6E6E6E}
.su .onb-form .seg button{background:transparent;color:#FBE3F1;border-color:rgba(251,227,241,.45)}
.su .onb-form .seg button.on{background:#FBE3F1;color:#131313;border-color:#FBE3F1}
.su .hint{color:rgba(251,227,241,.65)}
.su .pin-dots i{border-color:#FBE3F1}
.su .pin-dots i.on{background:#FBE3F1}
.su .pinpad button{background:transparent;color:#FBE3F1;border:calc(1 * var(--u)) solid rgba(251,227,241,.35)}
.su .pinpad button:hover{background:#FBE3F1;color:#131313}
.su .onb-photo .ph{border-color:rgba(251,227,241,.5);color:#FBE3F1}
.su .onb-photo .btn{color:#FBE3F1;border-color:rgba(251,227,241,.5)}
.su .onb-check{background:#FBE3F1;color:#131313}
/* téléphone : les anneaux en bandeau, puis la carte */
@media (max-width:900px){
  .su{--u:min(1px,(100vw - 32px) / 540);overflow:visible;display:flex;flex-direction:column}
  .su-left{position:relative;width:100%;height:calc(100vw * 715 / 820);flex:none}
  .su-art{height:100cqh;bottom:auto;top:0;-webkit-mask:none;mask:none}
  .su-right{position:relative;left:auto;top:auto;transform:none;margin:0 auto 40px;width:calc(540 * var(--u))}
  .su .su-card{border-radius:calc(36 * var(--u));padding:calc(36 * var(--u)) calc(34 * var(--u)) calc(34 * var(--u))}
  .su .lp-br{display:none}
}
.rail-foot .sync.lourd::before{background:var(--alert)}
/* ===== page des offres, d'après la maquette « Offer Page » (page de 1440 px) ; calc(1 * var(--u)) = 1 px de la maquette ===== */
button.lp-logo{background:none;border:0;padding:0;cursor:pointer}
.of h1,.of h2,.of h3{font-family:var(--display);font-weight:700;margin:0;line-height:.95}
.of-hero{padding:56px 0 64px;background:#131313 url(/assets/img/landing/glow-hero.jpg) left top/240px 100% no-repeat;text-align:center}
.of-hero h1{font-size:clamp(34px,4.6vw,66px);text-transform:uppercase}
.of-hero p{margin-top:22px;font-size:clamp(16px,1.6vw,22px);font-weight:500}
.of-hero-img{display:block;width:min(540px,100%);height:auto;margin:36px auto 0}
.of-offres{background:#FBE3F1;color:#131313;padding:64px 0}
.of-offres-h{text-align:center}
.of-offres h2{font-size:clamp(40px,5.1vw,73px);text-transform:uppercase}
.of-offres-h .lp-tag{margin:-6px 0 0 clamp(60px,12vw,190px);font-size:clamp(28px,3.5vw,50px)}
.of-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:56px}
.of-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;background:#E8B2D2;color:#FBE3F1;border-radius:26px;padding:34px 29px 30px;min-height:417px;box-sizing:border-box}
.of-card.on{background:#131313}
.of-badge{position:absolute;right:0;top:-9px;background:#CE71A6;color:#FBE3F1;font-size:12px;font-weight:600;line-height:22px;padding:0 13px;border-radius:11px}
.of-card h3{font-size:36.5px;text-transform:uppercase}
.of-card.on h3{color:#D170A8}
.of-sub{font-size:11.5px;margin-top:4px}
.of-price{display:flex;align-items:baseline;gap:12px;margin-top:16px}
.of-price b{font-family:var(--display);font-weight:700;font-size:36.5px;line-height:1}
.of-price span{font-size:10px}
.of-card ul{list-style:none;padding:0;margin:26px 0 0;width:100%;display:grid;gap:8px;font-size:13px;line-height:1.35}
.of-card.on ul{padding-top:26px;margin-top:0;border-top:1px solid transparent;border-image:linear-gradient(90deg,transparent,rgba(251,227,241,.75),transparent) 1}
.of-card li{display:flex;gap:12px;align-items:flex-start}
.of-card li svg{flex:none;width:13px;height:13px;margin-top:2px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.of-card .lp-btn{margin:auto auto 0;font-size:11px;padding:6px 16px}
.of-note{text-align:center;margin-top:56px;font-size:clamp(17px,1.7vw,24px);font-weight:500;line-height:1.38}
.of-contact{padding:80px 0}
.of-contact .lp-w{display:grid;grid-template-columns:503fr 700fr;gap:40px;align-items:center}
.of-contact-img{width:100%;height:auto;display:block}
.of-contact h2{font-size:clamp(52px,7.8vw,112px);text-transform:uppercase;line-height:1.02}
.of-contact-tx p{margin-top:26px;font-size:clamp(16px,1.6vw,22.5px);font-weight:500;line-height:1.38}
.of-contact-a{display:flex;align-items:center;gap:19px;flex-wrap:wrap;margin-top:34px}
.of-wa{flex:none;display:grid;place-items:center;width:43px;height:43px;color:#FBE3F1}
.of-wa svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.of-contact-a .lp-btn{text-decoration:none}
@media (max-width:1020px){
  .of-cards{grid-template-columns:1fr 1fr}
  .of-contact .lp-w{grid-template-columns:1fr}
}
@media (max-width:700px){
  .of-cards{grid-template-columns:1fr}
  .of-card{min-height:0}
  .of-card .lp-btn{margin-top:22px}
}
/* ordinateur : cotes de la maquette */
@media (min-width:1021px){
  .of-hero{height:calc(774 * var(--u));padding:0;background-size:calc(360 * var(--u)) 100%;text-align:left}
  .of-hero .lp-w{height:100%}
  .of-hero h1{position:absolute;left:0;right:0;top:calc(69 * var(--u));text-align:center;font-size:calc(65.7 * var(--u));line-height:calc(71 * var(--u));letter-spacing:calc(3.6 * var(--u))}
  .of-hero h1 span{display:block}
  .of-hero h1 span+span{font-size:calc(72 * var(--u));line-height:calc(72 * var(--u))}
  .of-hero p{position:absolute;left:0;right:0;top:calc(242 * var(--u));margin:0;text-align:center;font-size:calc(23.3 * var(--u));line-height:calc(26 * var(--u))}
  .of-hero-img{position:absolute;left:calc(327 * var(--u));top:calc(313 * var(--u));width:calc(540 * var(--u));margin:0}
  .of-offres{height:calc(876 * var(--u));padding:0;position:relative}
  .of-offres .lp-w{height:100%}
  .of-offres-h{position:absolute;left:0;right:0;top:calc(66 * var(--u))}
  .of-offres h2{font-size:calc(73 * var(--u));line-height:calc(74 * var(--u));letter-spacing:calc(-1.54 * var(--u))}
  .of-offres-h .lp-tag{position:absolute;left:calc(50% - calc(17 * var(--u)));top:calc(72 * var(--u));margin:0;font-size:calc(54 * var(--u))}
  .of-cards{position:absolute;left:calc(4 * var(--u));top:calc(267 * var(--u));width:calc(1216 * var(--u));margin:0;grid-template-columns:calc(283 * var(--u)) calc(24 * var(--u)) calc(282 * var(--u)) calc(33 * var(--u)) calc(282 * var(--u)) calc(34 * var(--u)) calc(282 * var(--u));gap:0}
  .of-card:nth-child(2){grid-column:3}.of-card:nth-child(3){grid-column:5}.of-card:nth-child(4){grid-column:7}
  .of-card{height:calc(417 * var(--u));min-height:0;border-radius:calc(26 * var(--u));padding:calc(28 * var(--u)) calc(29 * var(--u)) 0}
  .of-badge{top:calc(-9 * var(--u));font-size:calc(12 * var(--u));line-height:calc(22 * var(--u));padding:0 calc(13 * var(--u));border-radius:calc(11 * var(--u))}
  .of-card h3{font-size:calc(36.5 * var(--u));line-height:calc(36 * var(--u))}
  .of-sub{font-size:calc(11.5 * var(--u));margin-top:calc(4 * var(--u))}
  .of-price{gap:calc(12 * var(--u));margin-top:calc(17 * var(--u))}
  .of-price b{font-size:calc(36.5 * var(--u))}
  .of-price span{font-size:calc(10 * var(--u))}
  .of-card ul{gap:calc(7.7 * var(--u));font-size:calc(13 * var(--u));line-height:calc(18 * var(--u));margin-top:calc(26 * var(--u))}
  .of-card ul{margin-top:calc(34 * var(--u))}
  .of-card.on ul{margin-top:calc(24 * var(--u));padding-top:calc(30 * var(--u));border-top-width:calc(1 * var(--u))}
  .of-card li{gap:calc(12 * var(--u))}
  .of-card li svg{width:calc(13 * var(--u));height:calc(13 * var(--u));margin-top:calc(2.5 * var(--u))}
  .of-card .lp-btn{position:absolute;left:50%;bottom:calc(33 * var(--u));transform:translateX(-50%);margin:0;height:calc(26 * var(--u));width:calc(122 * var(--u));padding:0;font-size:calc(11 * var(--u));display:inline-flex;align-items:center;justify-content:center}
  .of-note{position:absolute;left:0;right:0;top:calc(742 * var(--u));margin:0;font-size:calc(23.15 * var(--u));line-height:calc(33 * var(--u))}
  .of-contact{height:calc(589 * var(--u));padding:0}
  .of .lp-foot{height:calc(76 * var(--u));border-top:calc(1.5 * var(--u)) solid rgba(251,227,241,.55)}
  .of .lp-foot .lp-w{padding-bottom:0}
  .of-contact .lp-w{display:block;height:100%}
  .of-contact-img{position:absolute;left:calc(-14 * var(--u));top:calc(83 * var(--u));width:calc(503 * var(--u))}
  .of-contact-tx{position:absolute;left:calc(616 * var(--u));top:calc(88 * var(--u))}
  .of-contact h2{font-size:calc(112 * var(--u));line-height:calc(114 * var(--u));letter-spacing:calc(2.6 * var(--u))}
  .of-contact h2 span{display:block;transform:skewX(-6deg);transform-origin:left 70%}
  .of-contact-tx p{margin-top:calc(15 * var(--u));font-size:calc(23 * var(--u));line-height:calc(31 * var(--u))}
  .of-contact-a{margin-top:calc(43 * var(--u));gap:0;flex-wrap:nowrap}
  .of-wa{width:calc(43 * var(--u));height:calc(43 * var(--u));margin-right:calc(19 * var(--u))}
  .of-contact-a .lp-btn{height:calc(43 * var(--u));padding:0;font-size:calc(15 * var(--u));display:inline-flex;align-items:center;justify-content:center}
  .of-contact-a .lp-btn.ghost{width:calc(207 * var(--u));margin-right:calc(28 * var(--u))}
  .of-contact-a .lp-btn:last-child{width:calc(162 * var(--u))}
}
/* ===== animations au survol (page d'accueil et page des offres) ===== */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .lp-btn,.lp-nav nav button,.lp-tag,.lp-hero-img,.lp-mission-img,.lp-feat article,.lp-feat img,.lp-lab-media img,.lp-lab li,
  .lp-steps li,.lp-avis figure,.lp-stars svg,.of-hero-img,.of-contact-img,.of-card,.of-card li,.of-wa,.lp-logo svg{
    transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,background-color .2s,color .2s,filter .35s}
  /* boutons : se soulèvent */
  .lp-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(242,12,240,.65)}
  .lp-btn:active{transform:translateY(0) scale(.97);box-shadow:none}
  /* bouton de la carte DISCOVER : déjà centré par un décalage, on le garde */
  .of-card .lp-btn:hover{transform:translateX(-50%) translateY(-2px)}
  .of-card .lp-btn:active{transform:translateX(-50%) scale(.97)}
  /* liens du menu : trait de la charte qui se déroule */
  .lp-nav nav button{position:relative}
  .lp-nav nav button::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;background:linear-gradient(90deg,#6C2BFF,#F20CF0,#FF4A1C);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  .lp-nav nav button:hover::after{transform:scaleX(1)}
  .lp-logo:hover svg{transform:scale(1.06) rotate(-2deg)}
  /* étiquettes penchées : penchent un peu plus */
  .lp-tag:hover{transform:rotate(-6deg) scale(1.06)}
  /* groupes de photos : légère bascule */
  .lp-hero-img:hover,.of-hero-img:hover,.of-contact-img:hover,.lp-lab-media img:hover{transform:scale(1.03) rotate(-1deg)}
  .lp-mission-img:hover{transform:translateY(-6px) rotate(-1deg)}
  /* fonctionnalités : la carte monte, la photo s'éclaire */
  .lp-feat article:hover{transform:translateY(-6px)}
  .lp-feat article:hover img{transform:scale(1.03);filter:brightness(1.08) saturate(1.1);box-shadow:0 18px 40px -18px rgba(242,12,240,.55)}
  .lp-lab li:hover,.of-card li:hover{transform:translateX(6px)}
  .lp-steps li:hover{transform:translateY(-4px)}
  /* avis et offres : les cartes se soulèvent */
  .lp-avis figure:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 20px 40px -20px rgba(19,19,19,.8)}
  .lp-avis figure:hover .lp-stars svg{transform:scale(1.25)}
  .of-card:hover{transform:translateY(-8px);box-shadow:0 24px 44px -22px rgba(190,12,113,.55)}
  .of-wa:hover{transform:scale(1.12) rotate(-8deg);color:#fff}
}
/* réglage des moyens de paiement */
.modes{list-style:none;margin:6px 0 0;padding:0}
.modes li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--line2)}
.modes label{display:flex;align-items:center;gap:12px;cursor:pointer}
.modes input{width:18px;height:18px;accent-color:#131313}
.modes .paym{font-size:14px;color:var(--ink)}
.modes .num{font-weight:600;font-size:14px;color:var(--ink2)}
/* bandeau de la démo */
#demoBar{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:8px 16px;background:linear-gradient(115deg,#6C2BFF,#F20CF0 34%,#F21C7C 60%,#FF4A1C 82%,#FF9B2A);color:#FBE3F1;font-size:13.5px;font-weight:600;text-align:center}
#demoBar button{border:0;border-radius:999px;padding:5px 14px;background:#131313;color:#FBE3F1;font:inherit;font-size:12.5px;cursor:pointer}
#demoBar button:hover{background:#FBE3F1;color:#131313}
/* icônes des moyens de paiement */
.paym .pico,.seg-pay .pico{display:inline-grid;place-items:center;flex:none;width:18px;height:18px;border-radius:5px;overflow:hidden;box-shadow:none}
.paym .pico svg,.seg-pay .pico svg{width:15px;height:15px}
.pico.img{background:#fff;box-shadow:inset 0 0 0 1px rgba(19,19,19,.12)}
.pico.img img{width:100%;height:100%;object-fit:cover;display:block}
.compte .paym .pico{width:22px;height:22px;border-radius:6px}
.compte .paym .pico svg{width:17px;height:17px}
.seg-pay button{display:inline-flex;align-items:center;gap:7px}
.modes li{gap:10px}
.modes li .num{margin-left:auto}
.ico-prev{display:flex;justify-content:center;padding:14px;margin:4px 0 12px;border-radius:12px;background:var(--soft)}
.ico-prev .paym{font-size:15px;color:var(--ink)}
.ico-prev .pico{width:40px;height:40px;border-radius:10px}
.ico-prev .pico svg{width:30px;height:30px}
.ico-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:8px}
.ico-grid button{display:grid;place-items:center;height:44px;border:1.5px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);cursor:pointer}
.ico-grid button svg{width:22px;height:22px}
.ico-grid button.on,.ico-grid button:hover{border-color:#131313;background:#131313;color:#fff}
.ico-cols{display:flex;flex-wrap:wrap;gap:10px}
.ico-cols button{width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(19,19,19,.15)}
.ico-cols button.on{outline:2.5px solid #131313;outline-offset:2px}
/* modules inclus dans la formule mais pas encore sortis */
.nav .incl{opacity:.85}
.nav .incl .pl.soon{margin-left:auto;font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;background:rgba(251,227,241,.14);color:var(--blush)}
.soon-all{display:block;padding:8px 12px;font-size:12.5px;color:rgba(251,227,241,.6)}
/* stock et livraisons */
.mini-n{width:58px;padding:5px 7px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:13px;text-align:right}
.lv-zone{margin-bottom:14px}
.lvl{list-style:none;margin:0;padding:0}
.lv{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--line2)}
.lv:first-child{border-top:0}
.lv .t{flex:1 1 260px;min-width:0}
.lv .t b{display:block;font-size:14px;font-weight:600}
.lv .t span{display:block;font-size:12.5px;color:var(--ink3);margin-top:1px}
.lv .lv-a{display:flex;gap:6px;flex-wrap:wrap}
.lv select.mini{min-width:110px}
/* assistant */
.chat{display:flex;flex-direction:column;gap:14px}
.chat-log{display:flex;flex-direction:column;gap:10px;max-height:52vh;overflow:auto;padding:4px}
.bul{max-width:78%;padding:11px 14px;border-radius:16px;font-size:14.5px;line-height:1.45}
.bul.b{align-self:flex-start;background:var(--soft);border-bottom-left-radius:4px}
.bul.u{align-self:flex-end;background:#131313;color:#FBE3F1;border-bottom-right-radius:4px}
.chat-sug{margin:0}
.chat-in{display:flex;gap:8px}
.chat-in input{flex:1;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;font:inherit}
/* publier */
.pub-src{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;max-height:60vh;overflow:auto}
.pub-src button{display:flex;flex-direction:column;gap:6px;padding:6px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);font:inherit;font-size:12px;text-align:left;cursor:pointer}
.pub-src button.on{border-color:#131313;box-shadow:0 0 0 2px #131313}
.pub-th{display:block;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--soft)}
.pub-th svg{width:100%;height:100%;display:block}
.pub-prev{max-width:260px;border-radius:12px;overflow:hidden;margin-bottom:12px}
.pub-prev svg{width:100%;height:auto;display:block}
.pub textarea{width:100%;box-sizing:border-box;padding:12px;border:1.5px solid var(--line);border-radius:12px;font:inherit;font-size:14px;resize:vertical}
.pub-opt{display:flex;align-items:center;gap:8px;font-size:13.5px;margin-top:8px}
.pub-a{display:flex;gap:8px;flex-wrap:wrap}
/* comptabilité */
.cpt{width:100%;font-size:13.5px}
.cpt tr.e1 td{border-top:1px solid var(--line)}
.cpt td{padding:6px 8px;border-bottom:0}
.cpt tfoot td{border-top:2px solid #131313;padding-top:9px}
.gl{margin-bottom:22px}
.gl h3{display:flex;justify-content:space-between;gap:10px;font-size:15px;margin:0 0 6px}
.gl h3 span{font-size:12.5px;color:var(--ink2);font-weight:600}
.cpt-res{margin:16px 0 8px;padding:14px 16px;border-radius:12px;font-size:16px}
.cpt-res.ok{background:var(--okbg);color:#0A5A3D}
.cpt-res.ko{background:var(--alertbg);color:#8E1219}
/* ===== mode sombre de l'app (pas les pages publiques, l'inscription ni le catalogue des clientes) ===== */
html[data-theme=dark] body:not(.onb-open):not(.cat-open){
  color-scheme:dark;
  --ink:#F4EEF1; --ink2:rgba(244,238,241,.74); --ink3:rgba(244,238,241,.5);
  --paper:#0F0F10; --canvas:#0F0F10; --card:#1A1A1C; --soft:#26262A;
  --line:rgba(255,255,255,.12); --line2:rgba(255,255,255,.09);
  --ok:#3CCB8E; --okbg:rgba(60,203,142,.16); --alert:#FF6B73; --alertbg:rgba(255,107,115,.16); --warn:#F2A33A; --warnbg:rgba(242,163,58,.16);
  --violet:#E866B0;
  background:var(--paper); color:var(--ink);
}
html[data-theme=dark] body:not(.onb-open) .btn{background:#FBE3F1;color:#131313}
html[data-theme=dark] body:not(.onb-open) .btn:hover{background:#fff}
html[data-theme=dark] body:not(.onb-open) .btn.ghost{background:transparent;color:var(--ink)}
html[data-theme=dark] body:not(.onb-open) .btn.ok{background:var(--ok);color:#0F0F10}
html[data-theme=dark] body:not(.onb-open) .btn.grad{background:var(--grad);color:#fff}
html[data-theme=dark] body:not(.onb-open) .panel,html[data-theme=dark] body:not(.onb-open) .kpis,html[data-theme=dark] body:not(.onb-open) .ocard2{box-shadow:none}
html[data-theme=dark] body:not(.onb-open) .muted{color:var(--ink2)}
html[data-theme=dark] body:not(.onb-open) .demosw{background:var(--card)}
html[data-theme=dark] body:not(.onb-open) .chip.on,html[data-theme=dark] body:not(.onb-open) .seg button.on,html[data-theme=dark] body:not(.onb-open) .devsw button.on{background:#FBE3F1;border-color:#FBE3F1;color:#131313}
html[data-theme=dark] body:not(.onb-open) .chip:hover:not(.on),html[data-theme=dark] body:not(.onb-open) .seg button:hover:not(.on),html[data-theme=dark] body:not(.onb-open) button.compte:hover,html[data-theme=dark] body:not(.onb-open) .compte.add:hover,html[data-theme=dark] body:not(.onb-open) .padd:hover,html[data-theme=dark] body:not(.onb-open) .pcard:hover{border-color:var(--ink3);color:var(--ink)}
html[data-theme=dark] body:not(.onb-open) .rcp:hover{background:#FBE3F1;color:#131313;border-color:#FBE3F1}
html[data-theme=dark] body:not(.onb-open) #view .kpi.lead,html[data-theme=dark] body:not(.onb-open) .q3-c:first-child,html[data-theme=dark] body:not(.onb-open) .hero{border:1px solid var(--line)}
html[data-theme=dark] body:not(.onb-open) .av2-1{box-shadow:inset 0 0 0 1px var(--line)}
html[data-theme=dark] body:not(.onb-open) .tick input,html[data-theme=dark] body:not(.onb-open) .modes input{accent-color:#FBE3F1}
html[data-theme=dark] body:not(.onb-open) .ico-grid button.on,html[data-theme=dark] body:not(.onb-open) .ico-grid button:hover{background:#FBE3F1;border-color:#FBE3F1;color:#131313}
html[data-theme=dark] body:not(.onb-open) .ico-cols button.on{outline-color:#FBE3F1}
html[data-theme=dark] body:not(.onb-open) .cpt tfoot td{border-top-color:var(--ink)}
html[data-theme=dark] body:not(.onb-open) .bul.u{background:#FBE3F1;color:#131313}
/* graphique : les barres et repères noirs deviennent clairs */
html[data-theme=dark] body:not(.onb-open) svg [fill="#131313"]{fill:#F4EEF1}
html[data-theme=dark] body:not(.onb-open) svg [fill^="rgba(19,19,19"]{fill:rgba(244,238,241,.5)}
html[data-theme=dark] body:not(.onb-open) svg [stroke^="rgba(19,19,19"]{stroke:rgba(244,238,241,.12)}
/* bouton de thème dans la barre du haut */
.thbtn{display:inline-grid;place-items:center;width:40px;height:40px;border:1px solid var(--line2);border-radius:10px;background:var(--card);color:var(--ink);cursor:pointer;flex:none}
.thbtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.thbtn:hover{border-color:var(--ink3)}
@media (max-width:820px){.thbtn{width:36px;height:36px}}
/* mode sombre : textes des encadrés colorés */
html[data-theme=dark] body:not(.onb-open) .notice.ok{color:#8BE6BC}
html[data-theme=dark] body:not(.onb-open) .notice.alert{color:#FFB3B8}
html[data-theme=dark] body:not(.onb-open) .notice.warn{color:#FFD08A}
html[data-theme=dark] body:not(.onb-open) .notice.v{background:rgba(232,102,176,.14);color:#F5B7DA}
html[data-theme=dark] body:not(.onb-open) .site2 .s-row b,html[data-theme=dark] body:not(.onb-open) .site2 .s-row span{color:#8BE6BC}
html[data-theme=dark] body:not(.onb-open) .status-line,html[data-theme=dark] body:not(.onb-open) .live-st.on,html[data-theme=dark] body:not(.onb-open) .qr-test,html[data-theme=dark] body:not(.onb-open) .cpt-res.ok{color:#8BE6BC}
html[data-theme=dark] body:not(.onb-open) .cpt-res.ko{color:#FFB3B8}
/* mode sombre : textes et champs restants */
html[data-theme=dark] body:not(.onb-open) .cat-msg textarea,html[data-theme=dark] body:not(.onb-open) .panel.teaser,html[data-theme=dark] body:not(.onb-open) .receipt,html[data-theme=dark] body:not(.onb-open) .net:hover,html[data-theme=dark] body:not(.onb-open) .stat:hover{background:var(--soft)}
html[data-theme=dark] body:not(.onb-open) input,html[data-theme=dark] body:not(.onb-open) select,html[data-theme=dark] body:not(.onb-open) textarea{color:var(--ink)}
html[data-theme=dark] body:not(.onb-open) input::placeholder,html[data-theme=dark] body:not(.onb-open) textarea::placeholder{color:rgba(244,238,241,.45)}
html[data-theme=dark] body:not(.onb-open) .mini-n,html[data-theme=dark] body:not(.onb-open) select.mini,html[data-theme=dark] body:not(.onb-open) .chat-in input,html[data-theme=dark] body:not(.onb-open) .pub textarea,html[data-theme=dark] body:not(.onb-open) .clo-r input,html[data-theme=dark] body:not(.onb-open) .caisse input{background:var(--soft);border-color:var(--line)}
html[data-theme=dark] body:not(.onb-open) .pill.v{background:rgba(232,102,176,.16);color:#F5B7DA}
html[data-theme=dark] body:not(.onb-open) .oc-note{background:rgba(242,163,58,.16) !important;color:#FFD08A}
html[data-theme=dark] body:not(.onb-open) .tr.dn,html[data-theme=dark] body:not(.onb-open) .umenu .out{color:#FF8A6B}
html[data-theme=dark] body:not(.onb-open) .nav .cnt{background:#D62F12}
/* menu de gauche (sombre dans les deux modes) : petits textes plus lisibles */
.nav-sep,.rail-foot{color:rgba(251,227,241,.62)}
.rail-foot span:last-child{color:rgba(251,227,241,.62)}
html[data-theme=dark] body:not(.onb-open) .cat-link{background:var(--soft)}
html[data-theme=dark] body:not(.onb-open) input::placeholder,html[data-theme=dark] body:not(.onb-open) textarea::placeholder{color:rgba(244,238,241,.62)}
html[data-theme=dark] body:not(.onb-open) .qrbox .qr-test{color:#0A5A3D;background:#E3F6EE}
/* catalogue vu par la cliente : il reste clair, même quand Biizz est en mode sombre */
html[data-theme=dark] #catv{color-scheme:light}
html[data-theme=dark] #catv input,html[data-theme=dark] #catv select,html[data-theme=dark] #catv textarea{color:#131313}
html[data-theme=dark] #catv input::placeholder,html[data-theme=dark] #catv textarea::placeholder{color:#767676}
/* catalogue de la cliente : gris plus foncés et pastilles plus contrastées, lisibles partout */
.cv-cat{color:#5f5f5f}
.cv-form label small{color:#6b6b6b}
.cv-note,.cv-foot{color:#5f5f5f}
.cv-ph em,.cv-cartb em{background:#C8320F}
#catv input::placeholder{color:#6b6b6b}
#catv .cv-tools input::placeholder{color:#5f5f5f}
.cv-lines li span{color:#5f5f5f}
.cv-off{min-height:100vh;display:grid;place-content:center;text-align:center;padding:24px;font-family:var(--body);background:#fff;color:#131313}.cv-off h1{font-family:var(--display);font-size:34px;margin:0 0 8px}
/* interrupteur clair / sombre : soleil à gauche, lune à droite, le rond glisse */
.thsw{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:space-between;width:68px;height:34px;padding:0 9px;border:1px solid var(--line2);border-radius:999px;background:var(--soft);cursor:pointer}
.thsw svg{position:relative;z-index:1;width:16px;height:16px;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s}
.thsw .th-sun{stroke:#131313}
.thsw .th-moon{stroke:var(--ink3)}
.thsw i{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#FBE3F1;box-shadow:0 1px 4px rgba(19,19,19,.25);transition:transform .25s cubic-bezier(.2,.7,.2,1),background .25s}
.thsw[aria-checked=true] i{transform:translateX(34px);background:#131313;box-shadow:0 0 0 1px rgba(251,227,241,.35)}
.thsw[aria-checked=true] .th-sun{stroke:var(--ink3)}
.thsw[aria-checked=true] .th-moon{stroke:#FBE3F1}
.thsw:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.thsw i{transition:none}}
.thsw[aria-checked=true] i{background:#FBE3F1;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.thsw[aria-checked=true] .th-moon{stroke:#131313}