/* Charte K&L (site klglobalimport.com) : fond noir, Inter, orange #ff5a3d, bleu #2e9fff, vert, effet néon */
:root{--bg:#0a0a0a;--bg2:#121212;--card:#161616;--card2:#1d1d1d;--line:#2a2a2c;--txt:#f5f5f7;--mut:#a1a1aa;--red:#c0392b;--red2:#ff5a3d;--blue:#2e9fff;--glow:#7fd3ff;--ok:#22c55e;--okt:#4ade80;--gold:rgba(255,170,60,.14);--goldt:#ffb454;--info:rgba(46,159,255,.12);color-scheme:dark}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--txt);font-family:Inter,"SF Pro Display",Poppins,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:16px}
body{min-height:100vh;display:flex;justify-content:center}
#app{width:100%;max-width:480px;padding:0 18px calc(120px + env(safe-area-inset-bottom));padding-top:calc(14px + env(safe-area-inset-top))}
h1{font-size:24px;margin:18px 0 16px;font-weight:800;text-transform:uppercase;letter-spacing:.6px}h1:before{content:"";display:block;width:34px;height:3px;border-radius:2px;background:var(--red2);margin-bottom:10px}
h2{font-size:18px;margin:0 0 6px}
a{color:var(--glow);text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.row{display:flex;align-items:center;gap:10px}.between{justify-content:space-between}
.mut{color:var(--mut)}.small{font-size:13px}
.top{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);margin:0 -18px 8px;padding:0 18px 10px}
.logo{width:54px;height:54px;border-radius:12px;background:#000;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line)}.logo img{width:100%;height:100%;object-fit:contain}
.avatar{width:46px;height:46px;border-radius:50%;background:#12304f;color:#9fd0ff;display:grid;place-items:center;font-weight:600;border:1px solid #1f4a7a}
.avatar.lg{width:108px;height:108px;font-size:34px}
.avatar.teal{background:#0f3a33;color:#7ee0c8;border-color:#1b6b58}
.bell{position:relative;width:32px;height:32px}.bell b{position:absolute;top:-6px;right:-6px;background:var(--red);color:#fff;border-radius:99px;font-size:11px;min-width:18px;height:18px;display:grid;place-items:center}
.post-h{display:flex;align-items:center;gap:12px;padding:14px 0}
.post-h .avatar{background:var(--card2);border-color:var(--line);width:44px;height:44px}
.blogo{display:block;width:52%;max-width:220px;mix-blend-mode:screen;margin:-4px 0 0 -8px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:16px 0 0}
.cols div{background:rgba(255,255,255,.08);border-radius:8px;padding:10px;font-size:12px}.cols b{display:block;font-size:14px;color:#9fd0ff}
#nav{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;padding:0 14px calc(12px + env(safe-area-inset-bottom));pointer-events:none;z-index:6}
#nav .in{pointer-events:auto;display:flex;gap:4px;width:100%;max-width:440px;padding:6px;background:#101012;border:1px solid var(--line);border-radius:22px;box-shadow:0 14px 40px rgba(0,0,0,.65)}
#nav a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 0;border-radius:16px;color:var(--mut);font-size:13px;font-weight:700;transition:flex .2s}#nav a span{display:none}
#nav a.on{flex:2.4;background:rgba(255,90,61,.14);color:var(--red2)}#nav a.on span{display:inline}#nav a.on svg{filter:drop-shadow(0 0 6px rgba(255,90,61,.75))}#nav svg{width:24px;height:24px}
.seg{display:flex;gap:26px;border-bottom:1px solid var(--line);margin:4px 0 18px}
.seg button{flex:none;padding:10px 2px;color:var(--mut);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:1.4px;border-bottom:2px solid transparent;margin-bottom:-1px}.seg button.on{color:var(--red2);border-bottom-color:var(--red2)}
.search{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--card);border-radius:14px;padding:0 14px;margin-bottom:18px;color:var(--mut)}
.search input{flex:1;border:0;outline:0;padding:16px 0;font:inherit;background:none;color:var(--txt)}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:16px;box-shadow:0 14px 30px rgba(0,0,0,.35)}.card.lead{border-left:3px solid var(--red2)}.nm{font-size:20px}
.badge{display:inline-flex;align-items:center;gap:6px;background:var(--gold);color:var(--goldt);padding:7px 14px;border-radius:99px;font-size:15px}
.badge.ok{background:rgba(34,197,94,.14);color:var(--okt)}
.btn{display:block;width:100%;padding:16px;border-radius:12px;text-align:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.24);color:var(--txt);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:1.3px}
.btn.pri{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 18px 40px rgba(0,0,0,.45)}.btn.out{background:transparent;border-color:var(--line);color:var(--glow)}
.btns{display:grid;grid-template-columns:1fr 1.3fr;gap:12px;margin-top:12px}
.info{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--blue);color:#cfe9ff;border-radius:12px;padding:18px;display:flex;gap:14px;margin:8px 0 22px}
.info svg{flex:none;width:26px;height:26px}.info b{display:block;font-size:17px;margin-bottom:6px;color:var(--glow)}
label{display:block;font-size:17px;margin:18px 0 8px}
input[type=text],input[type=tel],input[type=email],input[type=number],textarea,select{width:100%;font:inherit;color:var(--txt);border:1px solid #333337;border-radius:12px;padding:15px 16px;background:var(--card)}
input::placeholder,textarea::placeholder{color:#6b6b73}
textarea{min-height:96px}
.suffix{position:relative}.suffix span{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--mut)}
.chk{display:inline-flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--card);border-radius:12px;padding:10px 14px;color:var(--txt)}
.chk input{-webkit-appearance:none;appearance:none;width:44px;height:26px;border-radius:99px;background:#3a3a3e;position:relative;flex:none;margin:0;cursor:pointer;transition:.2s}.chk input:before{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s}.chk input:checked{background:var(--ok)}.chk input:checked:before{transform:translateX(18px)}
.line{border-top:1px solid var(--line);padding-top:6px;margin-top:20px}
.add{display:block;width:100%;background:var(--card);border:1px dashed #3a3a3e;border-radius:12px;padding:20px;text-align:center;margin:22px 0;color:var(--glow);text-transform:uppercase;letter-spacing:1.3px;font-size:13px}
.foot{position:fixed;left:0;right:0;bottom:0;background:#0a0a0c;border-top:1px solid var(--line);padding:14px 18px calc(14px + env(safe-area-inset-bottom));display:flex;justify-content:center;z-index:5}
.foot .in{width:100%;max-width:480px;display:grid;grid-template-columns:1fr 1.3fr;gap:12px}
.foot .in button{padding:18px;border-radius:12px;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:1.3px}.foot .ghost{color:var(--mut)}
.chips{display:flex;gap:10px;overflow-x:auto;margin-bottom:20px;padding:4px 2px 10px}
.chip{flex:none;padding:12px 18px;border-radius:10px;border:1px solid var(--line);color:var(--mut);font-size:12px;text-transform:uppercase;letter-spacing:1.5px}
.chip.on{border:1.5px solid var(--glow);color:#eaf8ff;box-shadow:0 0 5px var(--glow),0 0 14px rgba(46,159,255,.6)}
.pimg{height:200px;border-radius:14px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:22px;margin-bottom:14px;text-align:center;padding:10px}
.pimgw{position:relative;margin-bottom:14px}.gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:14px}.gal img{flex:none;width:100%;scroll-snap-align:center}
.pimgw .pimg{margin:0;height:200px;object-fit:cover;width:100%;border-radius:14px}
.cnt{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.65);color:#fff;border-radius:99px;padding:4px 12px;font-size:13px}
.adm{position:absolute;top:10px;right:10px;display:flex;gap:8px}.adm button{width:46px;height:46px;border-radius:12px;background:rgba(10,10,12,.85);border:1px solid var(--line);font-size:20px}
.stock{background:rgba(34,197,94,.14);color:var(--okt);padding:5px 14px;border-radius:99px;font-size:15px}
.comm{background:var(--gold);color:var(--goldt);border-radius:12px;padding:10px 14px;margin:10px 0;font-weight:600}
.msgrow{display:flex;gap:14px;padding:16px 0;align-items:center;border-bottom:1px solid var(--line)}
.bubble{max-width:80%;padding:10px 14px;border-radius:16px;margin:6px 0;background:var(--card2)}.bubble.me{background:var(--red);color:#fff;margin-left:auto}
.menu{display:flex;align-items:center;gap:18px;padding:22px 4px;color:inherit;border-bottom:1px solid #1c1c1e}
.menu svg{width:30px;height:30px;color:var(--glow);flex:none}.menu div{flex:1}.menu .mut{display:block;font-size:15px}
.back{display:flex;align-items:center;gap:14px;font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;padding:8px 0 16px;border-bottom:1px solid var(--line);margin:0 -18px 14px;padding-left:18px}
.back button{width:30px}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}.th{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--card2)}.th img{width:100%;height:100%;object-fit:cover}
.th button{position:absolute;top:4px;right:4px;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.7);color:#fff}
.th.add{display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px dashed #3a3a3e;color:var(--glow);font-size:28px;margin:0;cursor:pointer}.th.add span{font-size:13px}
#overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;align-items:flex-end;justify-content:center;z-index:20}
#overlay.on{display:flex}#overlay .sheet{background:var(--bg2);border-top:1px solid var(--line);width:100%;max-width:480px;border-radius:22px 22px 0 0;padding:24px 20px calc(24px + env(safe-area-inset-bottom));max-height:88vh;overflow:auto}
#toast{position:fixed;left:50%;bottom:130px;transform:translateX(-50%);background:var(--card2);border:1px solid var(--line);color:#fff;padding:12px 20px;border-radius:99px;opacity:0;transition:.25s;pointer-events:none;z-index:30;max-width:90%;text-align:center}
#toast.on{opacity:1}
.tbl{width:100%;border-collapse:collapse;font-size:14px}.tbl td{padding:8px 0;border-bottom:1px solid var(--line)}.tbl td:last-child{text-align:right;font-weight:600}

.hero{margin:14px -18px 0;padding:34px 18px 26px;background-size:cover;background-position:center}.kicker{color:var(--glow);text-transform:uppercase;letter-spacing:2px;font-size:12px;font-weight:600}
.hl{font-size:30px;line-height:1.1;text-transform:uppercase;margin:10px 0;font-weight:800}.hero p{color:#e5e5ea;margin:0 0 16px}.hero p b{color:var(--goldt)}
.tags{display:flex;flex-wrap:wrap;gap:8px}.tags span{border:1px solid rgba(255,255,255,.3);background:rgba(5,18,30,.55);border-radius:99px;padding:6px 12px;font-size:12px;text-transform:uppercase;letter-spacing:1px}
.sec{font-size:13px;text-transform:uppercase;letter-spacing:2px;color:var(--mut);margin:28px 0 12px;font-weight:600}
.hw{display:flex;gap:14px;align-items:flex-start;padding:14px;border:1px solid var(--line);background:var(--card);border-radius:14px;margin-bottom:10px}
.hw>b{flex:none;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--glow);color:var(--glow);display:grid;place-items:center;box-shadow:0 0 8px rgba(46,159,255,.5)}.hw .t{display:block;margin-bottom:2px}.hw .mut{font-size:14px}
.gm{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;min-height:120px;border-radius:14px;padding:14px;margin-bottom:10px;background-size:cover;background-position:center;border:1px solid var(--line)}
.gm b{display:block;font-size:17px}.gm span{color:#c9c9d0;font-size:13px}.amt{text-align:right;font-size:26px;font-weight:800;color:var(--goldt)}.amt small{display:block;font-size:11px;font-weight:500;color:#c9c9d0}
.amt,.gm b,.gm span{text-shadow:0 2px 8px rgba(0,0,0,.9)}

.sigw{position:relative;background:#fff;border-radius:14px;height:150px;overflow:hidden;border:1px solid var(--line)}
.sigw canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.sigw span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#9ca3af;font-size:15px;pointer-events:none}

#nav a{position:relative}
.nb{position:absolute;top:4px;left:calc(50% + 6px);background:#c0392b;color:#fff;border-radius:99px;min-width:20px;height:20px;padding:0 6px;font-size:12px;line-height:20px;text-align:center;letter-spacing:0}
.nb.inl{position:static;display:inline-block;margin-top:6px}

/* ---- refonte : accueil, suivi horizontal, tuiles ---- */
.top .kick{font-size:11px;text-transform:uppercase;letter-spacing:2px;color:var(--red2);font-weight:700}.top .hi{font-size:19px;font-weight:700;margin-top:2px}
.avatar.sm{width:40px;height:40px;font-size:14px}.avatar.md{width:72px;height:72px;font-size:24px}
.cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:17px;margin:14px 0 6px;border-radius:14px;background:linear-gradient(135deg,var(--red),var(--red2));color:#fff;font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:1.3px;box-shadow:0 14px 34px rgba(192,57,43,.35)}.cta span{font-size:22px;line-height:1}
.btn.sm{display:inline-block;width:auto;padding:10px 16px;font-size:12px}
.chev{width:38px;height:38px;border-radius:50%;background:var(--card2);display:grid;place-items:center;flex:none}.chev svg{width:20px;height:20px}
.trk{margin-top:16px}.trk-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-bottom:12px}.trk-bar i{height:7px;border-radius:4px;background:#2a2a2c}.trk-bar i.d{background:var(--ok)}.trk-bar i.c{background:var(--red2);box-shadow:0 0 8px rgba(255,90,61,.7)}.trk-l b{font-size:17px}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.acts1{margin-top:10px}.acts1 .btn+.btn{margin-top:10px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.tile{display:flex;flex-direction:column;gap:5px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;color:var(--txt)}
.tile .ti{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(255,90,61,.13);color:var(--red2);margin-bottom:8px}.tile .ti svg{width:24px;height:24px}
.tile b{font-size:16px}.tile .mut{font-size:13px;line-height:1.3}
.pill-role{display:inline-block;border:1px solid rgba(255,90,61,.5);color:var(--red2);border-radius:99px;padding:4px 12px;font-size:12px;text-transform:uppercase;letter-spacing:1.4px;font-weight:700}

.fab{position:fixed;right:18px;bottom:calc(88px + env(safe-area-inset-bottom));width:56px;height:56px;border-radius:50%;pointer-events:auto;background:linear-gradient(135deg,var(--red),var(--red2));color:#fff;font-size:30px;line-height:1;display:grid;place-items:center;box-shadow:0 10px 26px rgba(192,57,43,.5);z-index:7}

#printdoc{display:none}
@media print{body>*:not(#printdoc){display:none!important}#printdoc{display:block!important;color:#000;background:#fff;font:12px/1.45 Georgia,serif;padding:0 8mm}#printdoc h3{font-size:13px;margin:12px 0 4px}#printdoc p{margin:4px 0}body{background:#fff!important}}
.pvid{margin:10px -18px 6px;display:flex;justify-content:center}.pvid video{width:min(100%,calc((100svh - 30px) * 9 / 16));aspect-ratio:9/16;height:auto;object-fit:cover;background:#000;display:block}@media (min-width:520px){.pvid{margin:10px 0 6px}.pvid video{border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.55)}}
/* iPhone : un appui sur un élément non-lien n'envoie pas de clic sans cursor:pointer ; manipulation = pas de délai de double-tap */
[data-go],[data-act],[data-open],[data-tab],[data-f],[data-del],[data-ph],button,a,label{cursor:pointer;touch-action:manipulation}
.msgrow:active,.card.lead:active,.tile:active,.menu:active{opacity:.6}
