/* ===================================================================
   KoffeeX - Theme clair / primaire bordeaux #800020
   Fichier strictement ASCII (aucun caractere accentue).
   =================================================================== */
:root{
  --kx-primary:#800020;
  --kx-primary-d:#5e0018;
  --kx-primary-l:#a3324c;
  --kx-accent:#c9a227;          /* or chaud, rappel "Koffee/GOLD" */
  --kx-bg:#ffffff;
  --kx-bg-2:#f6f3f4;
  --kx-bg-3:#efe9eb;
  --kx-text:#1a1416;
  --kx-muted:#6b5e62;
  --kx-line:#e7dee1;
  --kx-danger:#c0392b;
  --kx-ok:#1f8a4c;
  --kx-radius:14px;
  --kx-radius-s:9px;
  --kx-shadow:0 1px 2px rgba(40,10,20,.06),0 8px 24px rgba(40,10,20,.06);
  --kx-nav-h:64px;
  --kx-max:1280px;
  --kx-font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --kx-display:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--kx-font);
  color:var(--kx-text);
  background:var(--kx-bg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}
.kx-ic{vertical-align:middle;flex:none}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid transparent;border-radius:var(--kx-radius-s);
  padding:.6rem 1rem;font-weight:600;font-size:.95rem;cursor:pointer;
  background:var(--kx-bg-3);color:var(--kx-text);transition:.15s;
}
.btn:hover{filter:brightness(.97)}
.btn-primary{background:var(--kx-primary);color:#fff}
.btn-primary:hover{background:var(--kx-primary-d)}
.btn-ghost{background:transparent;border-color:var(--kx-line)}
.btn-gold{background:linear-gradient(135deg,var(--kx-accent),#e6c860);color:#3a2c00}
.btn-danger{background:var(--kx-danger);color:#fff}
.btn-sm{padding:.4rem .7rem;font-size:.85rem}
.btn-block{display:flex;width:100%;justify-content:center}

/* ---------- Navbar horizontale ---------- */
.kx-nav{
  position:sticky;top:0;z-index:50;height:var(--kx-nav-h);
  display:flex;align-items:center;gap:1rem;
  padding:0 1.25rem;background:#fff;
  border-bottom:1px solid var(--kx-line);
}
.kx-brand{display:flex;align-items:center;gap:.5rem;font-weight:800;font-size:1.25rem;color:var(--kx-primary)}
.kx-brand .kx-ic{color:var(--kx-primary)}
.kx-brand b{font-family:var(--kx-display);letter-spacing:.5px}
.kx-nav-links{display:flex;align-items:center;gap:.25rem}
.kx-nav-links a{
  display:flex;align-items:center;gap:.4rem;padding:.5rem .8rem;
  border-radius:999px;color:var(--kx-muted);font-weight:600;font-size:.92rem;
}
.kx-nav-links a:hover,.kx-nav-links a.active{background:var(--kx-bg-3);color:var(--kx-text)}
.kx-search{flex:1;max-width:520px;position:relative}
.kx-search input{
  width:100%;padding:.6rem 1rem .6rem 2.4rem;border-radius:999px;
  border:1px solid var(--kx-line);background:var(--kx-bg-2);font-size:.95rem;
}
.kx-search input:focus{outline:none;border-color:var(--kx-primary-l);background:#fff}
.kx-search .kx-ic{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);color:var(--kx-muted)}
.kx-nav-right{display:flex;align-items:center;gap:.4rem;margin-left:auto}
.kx-icon-btn{
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:transparent;border:none;color:var(--kx-muted);cursor:pointer;position:relative;
}
.kx-icon-btn:hover{background:var(--kx-bg-3);color:var(--kx-text)}
.kx-badge{
  position:absolute;top:6px;right:6px;min-width:16px;height:16px;padding:0 4px;
  background:var(--kx-primary);color:#fff;border-radius:999px;font-size:.65rem;
  display:grid;place-items:center;font-weight:700;
}
.kx-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid var(--kx-line)}

/* ---------- Conteneur ---------- */
.kx-wrap{max-width:var(--kx-max);margin:0 auto;padding:1.5rem 1.25rem}
.kx-row{display:flex;gap:1rem;align-items:center}
.kx-grow{flex:1}
.kx-h2{font-family:var(--kx-display);font-size:1.4rem;margin:0 0 1rem}
.kx-muted{color:var(--kx-muted)}
.pill{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .6rem;border-radius:999px;background:var(--kx-bg-3);font-size:.8rem;font-weight:600}
.pill-gold{background:linear-gradient(135deg,var(--kx-accent),#e6c860);color:#3a2c00}
.pill-paid{background:var(--kx-primary);color:#fff}
.pill-sub{background:#2b2150;color:#fff}

/* ---------- Grille de videos ---------- */
.kx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.25rem}
.card{background:var(--kx-bg);border:1px solid var(--kx-line);border-radius:var(--kx-radius);overflow:hidden;transition:transform .18s,box-shadow .18s}
.card:hover{transform:translateY(-2px);box-shadow:var(--kx-shadow)}
.card-thumb{position:relative;aspect-ratio:16/9;background:var(--kx-bg-3);overflow:hidden}
.card-thumb img{width:100%;height:100%;object-fit:cover}
.card-dur{position:absolute;bottom:.5rem;right:.5rem;background:rgba(0,0,0,.78);color:#fff;font-size:.75rem;padding:.1rem .4rem;border-radius:6px}
.card-lock{position:absolute;inset:0;display:grid;place-items:center;background:rgba(94,0,24,.55);color:#fff}
.card-body{padding:.7rem .8rem 1rem}
.card-title{font-weight:700;font-size:.98rem;margin:0 0 .35rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{display:flex;align-items:center;gap:.5rem;color:var(--kx-muted);font-size:.82rem}
.card-creator{display:flex;align-items:center;gap:.45rem;margin-top:.5rem}
.card-creator img{width:24px;height:24px;border-radius:50%}

/* ---------- Lecteur video custom ---------- */
.kx-player{position:relative;background:#000;border-radius:var(--kx-radius);overflow:hidden;aspect-ratio:16/9}
/* repli pour navigateurs sans aspect-ratio fiable */
@supports not (aspect-ratio:16/9){.kx-player{height:0;padding-bottom:56.25%}.kx-player>video,.kx-player>.kx-preroll{position:absolute;inset:0}}
.kx-player video{width:100%;height:100%;display:block;-o-object-fit:contain;object-fit:contain}
.kx-controls{position:absolute;left:0;right:0;bottom:0;padding:.45rem .7rem .6rem;
  background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.78));
  display:flex;flex-direction:column;align-items:stretch;gap:.4rem;color:#fff;opacity:0;transition:opacity .2s;z-index:4}
.kx-player:hover .kx-controls,.kx-player.paused .kx-controls{opacity:1}
.kx-controls button{background:none;border:none;color:#fff;cursor:pointer;display:-webkit-box;display:flex;align-items:center;justify-content:center;padding:0}
.kx-controls .row2{display:flex;align-items:center;gap:.5rem;width:100%}
.kx-timeline{width:100%;flex:none;height:6px;background:rgba(255,255,255,.3);border-radius:999px;position:relative;cursor:pointer}
.kx-timeline-fill{position:absolute;left:0;top:0;bottom:0;background:var(--kx-primary-l);border-radius:999px;width:0}
.kx-hl-marker{position:absolute;top:-3px;width:4px;height:12px;background:var(--kx-accent);border-radius:2px;transform:translateX(-50%)}
.kx-time{font-size:.8rem;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- Page video ---------- */
.kx-watch{display:grid;grid-template-columns:1fr 340px;gap:1.5rem}
.kx-vactions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:1rem 0}
.kx-vote{display:inline-flex;align-items:center;border:1px solid var(--kx-line);border-radius:999px;overflow:hidden}
.kx-vote button{background:none;border:none;padding:.5rem .8rem;display:flex;align-items:center;gap:.4rem;cursor:pointer;color:var(--kx-text)}
.kx-vote button.on{color:var(--kx-primary);font-weight:700}
.kx-vote .sep{width:1px;align-self:stretch;background:var(--kx-line)}

/* ---------- Profil createur ---------- */
.kx-banner{height:230px;border-radius:var(--kx-radius);background:var(--kx-bg-3) center/cover;position:relative;z-index:0}
.kx-profhead{display:flex;gap:1.2rem;align-items:flex-end;margin-top:-48px;padding:0 1rem;position:relative;z-index:1}
.kx-profhead .pa{width:120px;height:120px;border-radius:50%;border:4px solid #fff;object-fit:cover;background:var(--kx-bg-3)}
.kx-tabs{display:flex;gap:.25rem;border-bottom:1px solid var(--kx-line);margin:1.5rem 0}
.kx-tabs a{padding:.7rem 1rem;font-weight:600;color:var(--kx-muted);border-bottom:2px solid transparent}
.kx-tabs a.active{color:var(--kx-primary);border-bottom-color:var(--kx-primary)}

/* ---------- Formulaires / Auth ---------- */
.kx-auth{max-width:420px;margin:3rem auto;padding:2rem;border:1px solid var(--kx-line);border-radius:var(--kx-radius);box-shadow:var(--kx-shadow)}
.field{margin-bottom:1rem}
.field label{display:block;font-weight:600;font-size:.88rem;margin-bottom:.35rem}
.field input,.field textarea,.field select{
  width:100%;padding:.65rem .8rem;border:1px solid var(--kx-line);border-radius:var(--kx-radius-s);
  font-size:.95rem;background:var(--kx-bg-2)
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--kx-primary-l);background:#fff}
.err{color:var(--kx-danger);font-size:.88rem;margin:.5rem 0}
.alert{padding:.7rem .9rem;border-radius:var(--kx-radius-s);margin-bottom:1rem;font-size:.9rem}
.alert-info{background:var(--kx-bg-3)}
.alert-ok{background:#e7f5ec;color:var(--kx-ok)}
.alert-danger{background:#fbe9e7;color:var(--kx-danger)}

/* ---------- Age gate ---------- */
.kx-agegate{position:fixed;inset:0;z-index:1000;background:rgba(26,20,22,.92);display:grid;place-items:center;padding:1.5rem}
.kx-agegate .box{max-width:460px;background:#fff;border-radius:var(--kx-radius);padding:2rem;text-align:center}
.kx-agegate h1{font-family:var(--kx-display);color:var(--kx-primary);margin:.4rem 0}
.kx-agegate .btn{margin:.4rem}

/* ---------- Bandeau pub ---------- */
.kx-adbanner{display:block;border:1px dashed var(--kx-line);border-radius:var(--kx-radius);
  min-height:90px;display:grid;place-items:center;color:var(--kx-muted);background:var(--kx-bg-2);margin:1rem 0;font-size:.85rem}

/* ---------- Footer ---------- */
.kx-footer{border-top:1px solid var(--kx-line);background:var(--kx-bg-2);margin-top:3rem}
.kx-footer .cols{max-width:var(--kx-max);margin:0 auto;padding:2.5rem 1.25rem;display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:1.5rem}
.kx-footer h4{margin:0 0 .8rem;font-size:.95rem}
.kx-footer a{display:block;color:var(--kx-muted);padding:.25rem 0;font-size:.9rem}
.kx-footer a:hover{color:var(--kx-primary)}
.kx-footer .legal{border-top:1px solid var(--kx-line);padding:1.2rem;text-align:center;color:var(--kx-muted);font-size:.82rem}

/* ---------- Toast ---------- */
.kx-toasts{position:fixed;bottom:1.2rem;right:1.2rem;z-index:1100;display:flex;flex-direction:column;gap:.5rem}
.kx-toast{background:var(--kx-text);color:#fff;padding:.7rem 1rem;border-radius:var(--kx-radius-s);box-shadow:var(--kx-shadow);font-size:.9rem;animation:kxslide .25s}
@keyframes kxslide{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .kx-watch{grid-template-columns:1fr}
  .kx-footer .cols{grid-template-columns:1fr 1fr}
  .kx-nav-links{display:none}
}
@media(max-width:560px){
  .kx-footer .cols{grid-template-columns:1fr}
  .kx-search{display:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Ajouts : preroll, toasts etat, stats, modale, social ---------- */
.kx-toast-ok{background:var(--kx-ok)}
.kx-toast-err{background:var(--kx-danger)}
.kx-toast.show{opacity:1}

.kx-preroll{position:absolute;inset:0;background:#000;display:grid;place-items:center;z-index:5}
.kx-preroll-box{text-align:center;color:#fff}
.kx-preroll-box>span{display:block;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:#bbb;margin-bottom:.6rem}
.kx-preroll-cta{display:inline-block;background:var(--kx-primary);color:#fff;padding:.6rem 1.2rem;border-radius:var(--kx-radius-s);font-weight:600;margin-bottom:1rem}
.kx-preroll-skip{display:block;margin:0 auto;background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.3);padding:.5rem .9rem;border-radius:var(--kx-radius-s);cursor:pointer}
.kx-preroll-skip:disabled{opacity:.6;cursor:default}

.kx-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;margin:1rem 0}
.kx-stat{background:var(--kx-bg-2);border:1px solid var(--kx-line);border-radius:var(--kx-radius);padding:1.1rem}
.kx-stat .n{font-size:1.7rem;font-weight:800;font-family:var(--kx-display)}
.kx-stat .l{color:var(--kx-muted);font-size:.85rem}

.kx-modal{position:fixed;inset:0;z-index:900;background:rgba(0,0,0,.5);display:grid;place-items:center}
.kx-modal .card{max-width:480px;width:92%;padding:1.5rem;max-height:90vh;overflow:auto}

.kx-section-h{display:flex;align-items:center;justify-content:space-between;margin:2rem 0 1rem}
.kx-section-h h2{font-family:var(--kx-display);font-size:1.4rem;margin:0}

.kx-tier{border:1px solid var(--kx-line);border-radius:var(--kx-radius);padding:1.2rem;background:#fff}
.kx-tier h4{margin:.2rem 0;font-size:1.1rem}
.kx-tier .price{font-size:1.6rem;font-weight:800;color:var(--kx-primary);font-family:var(--kx-display)}

.kx-chatwrap{display:grid;grid-template-columns:280px 1fr;gap:0;border:1px solid var(--kx-line);border-radius:var(--kx-radius);overflow:hidden;min-height:560px}
.kx-chatlist{border-right:1px solid var(--kx-line);background:var(--kx-bg-2);overflow:auto}
.kx-chatlist a{display:flex;gap:.6rem;align-items:center;padding:.8rem 1rem;border-bottom:1px solid var(--kx-line)}
.kx-chatlist a.active{background:#fff}
.kx-chatlist a.ai{color:var(--kx-primary);font-weight:700}
.kx-chatmain{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.kx-chatlog{flex:1;padding:1rem;overflow:auto;display:flex;flex-direction:column;gap:.6rem;background:var(--kx-bg)}
.kx-msg{max-width:75%;padding:.55rem .85rem;border-radius:14px;background:var(--kx-bg-3)}
.kx-msg.me{align-self:flex-end;background:var(--kx-primary);color:#fff}
.kx-msg .who{font-size:.72rem;color:var(--kx-muted);margin-bottom:.15rem}
.kx-msg.me .who{color:#f0d7df}
.kx-chatbar{display:flex;gap:.5rem;padding:.7rem;border-top:1px solid var(--kx-line);background:#fff}
.kx-chatbar input{flex:1;padding:.6rem;border:1px solid var(--kx-line);border-radius:999px}

.kx-empty{text-align:center;color:var(--kx-muted);padding:3rem 1rem}
.kx-empty .kx-ic{opacity:.4;margin-bottom:.6rem}

.kx-checklist{list-style:none;padding:0;margin:1rem 0}
.kx-checklist li{display:flex;gap:.6rem;align-items:flex-start;padding:.5rem 0}
.kx-checklist li .kx-ic{color:var(--kx-ok);flex:none}

.gold-hero{background:linear-gradient(135deg,#2a1c00,#4a3500);color:#fff;border-radius:var(--kx-radius);padding:2.5rem 2rem;text-align:center}
.gold-hero .price{font-size:2.6rem;font-weight:800;font-family:var(--kx-display);color:var(--kx-accent)}

@media(max-width:860px){
  .kx-chatwrap{grid-template-columns:1fr}
  .kx-chatlist{max-height:200px}
}

/* =====================================================================
   v2 - UI amelioree : boutons, espace, upload, lecteur, pubs, formulaires
   ===================================================================== */

/* ---- Boutons plus soignes ---- */
.btn{border-radius:11px;padding:.62rem 1.1rem;letter-spacing:.01em;
  box-shadow:0 1px 2px rgba(20,12,16,.06);transition:transform .12s,filter .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid var(--kx-primary-l);outline-offset:2px}
.btn-primary{background:linear-gradient(135deg,var(--kx-primary),var(--kx-primary-l));box-shadow:0 4px 14px rgba(128,0,32,.28)}
.btn-primary:hover{background:linear-gradient(135deg,var(--kx-primary-d),var(--kx-primary))}
.btn-gold{box-shadow:0 4px 14px rgba(201,162,39,.35)}
.btn-ghost{background:#fff}
.btn-ghost:hover{background:var(--kx-bg-2);border-color:var(--kx-primary-l)}
.btn-lg{padding:.85rem 1.4rem;font-size:1.02rem;border-radius:13px}

/* ---- Conteneur un peu plus large + meilleure aeration ---- */
.kx-wrap{padding:1.75rem 1.5rem}
.kx-section-h{margin:1.5rem 0 1.1rem}

/* ---- Grille videos : remplit mieux l'espace ---- */
.kx-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.1rem 1.25rem}
@media(min-width:1500px){.kx-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}}
.card{border-radius:14px}
.card-thumb{border-radius:14px 14px 0 0}

/* ---- Zone d'upload (drag & drop) ---- */
.kx-uploadzone{border:2px dashed var(--kx-line);border-radius:16px;padding:1.5rem;background:var(--kx-bg-2);text-align:center;transition:.15s}
.kx-uploadzone.over{border-color:var(--kx-primary);background:#fff6f8}
.kx-uploadzone p{margin:.4rem 0}
.kx-progress{display:flex;align-items:center;gap:.6rem;margin-top:.7rem}
.kx-progress-bar{height:10px;border-radius:999px;background:linear-gradient(90deg,var(--kx-primary),var(--kx-primary-l));width:0;flex:1;transition:width .2s}
.kx-progress span{font-size:.82rem;font-variant-numeric:tabular-nums;color:var(--kx-muted);min-width:38px;text-align:right}

/* ---- Sections repliables "avancees" ---- */
.kx-adv{border:1px solid var(--kx-line);border-radius:12px;margin:.7rem 0;background:#fff;overflow:hidden}
.kx-adv>summary{cursor:pointer;padding:.85rem 1rem;font-weight:700;list-style:none;display:flex;align-items:center;justify-content:space-between}
.kx-adv>summary::-webkit-details-marker{display:none}
.kx-adv>summary::after{content:"+";color:var(--kx-muted);font-size:1.2rem}
.kx-adv[open]>summary::after{content:"-"}
.kx-adv[open]>summary{border-bottom:1px solid var(--kx-line)}
.kx-adv>*:not(summary){padding-left:1rem;padding-right:1rem}
.kx-adv>summary+*{padding-top:1rem}
.kx-adv>*:last-child{padding-bottom:1rem}
.kx-check{display:flex;align-items:center;gap:.5rem;padding:.4rem 0;font-size:.92rem;cursor:pointer}
.kx-check input{width:auto}

/* ---- Chips de categories ---- */
.kx-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.kx-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .8rem;border:1px solid var(--kx-line);border-radius:999px;cursor:pointer;font-size:.88rem;font-weight:600;background:#fff;transition:.12s}
.kx-chip:hover{border-color:var(--kx-primary-l)}
.kx-chip input{display:none}
.kx-chip:has(input:checked){background:var(--kx-primary);color:#fff;border-color:var(--kx-primary)}

/* ---- Inputs : coins plus doux ---- */
.field input,.field textarea,.field select{border-radius:11px}

/* ---- Lecteur video v2 ---- */
.kx-player.fs{border-radius:0}
.kx-player .kx-big-play{position:absolute;inset:0;margin:auto;width:76px;height:76px;border-radius:50%;
  background:rgba(128,0,32,.85);color:#fff;border:none;display:-webkit-box;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .2s;z-index:3}
.kx-player.paused .kx-big-play{opacity:1}
.kx-controls button{width:34px;height:34px;border-radius:8px;transition:background .12s;flex:none}
.kx-controls button:hover{background:rgba(255,255,255,.18)}
.kx-controls .kx-grow{flex:1 1 auto}
.kx-timeline{height:7px;margin:0}
.kx-timeline:hover{height:9px}
.kx-timeline-buffer{position:absolute;left:0;top:0;bottom:0;background:rgba(255,255,255,.35);border-radius:999px;width:0}
.kx-timeline-fill{background:var(--kx-primary-l);z-index:1}
.kx-timeline-dot{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);left:0;z-index:2;box-shadow:0 1px 4px rgba(0,0,0,.5);opacity:0;transition:opacity .12s}
.kx-timeline:hover .kx-timeline-dot{opacity:1}
/* durcissement compatibilite (OperaGX / anciens Chromium) */
.kx-controls{-webkit-box-orient:vertical;-webkit-box-direction:normal}
.kx-controls .row2{-webkit-box-pack:start;flex-wrap:wrap;min-width:0}
.kx-controls .row2>*{flex:0 0 auto}
.kx-controls .row2 .kx-grow{-webkit-box-flex:1;flex:1 1 auto;min-width:8px}
.kx-controls .kx-time{flex:0 1 auto;overflow:hidden}
.kx-vol input[type=range]{height:4px;-webkit-appearance:none;appearance:none;background:rgba(255,255,255,.35);border-radius:999px}
.kx-player video{max-width:100%;max-height:100%}
.kx-vol{display:flex;align-items:center;gap:.3rem}
.kx-vol input[type=range]{width:0;opacity:0;transition:width .2s,opacity .2s;accent-color:var(--kx-primary-l);cursor:pointer}
.kx-vol:hover input[type=range],.kx-vol input[type=range]:focus{width:80px;opacity:1}
.kx-settings{position:relative}
.kx-settings-menu{position:absolute;right:0;bottom:44px;background:rgba(20,12,16,.96);border-radius:10px;padding:.4rem;min-width:170px;display:none;flex-direction:column;gap:.1rem}
.kx-settings-menu.open{display:flex}
.kx-settings-menu b{color:#bbb;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;padding:.3rem .6rem}
.kx-settings-menu button{width:100%;justify-content:flex-start;text-align:left;padding:.45rem .6rem;border-radius:7px;font-size:.85rem;color:#fff;height:auto}
.kx-settings-menu button.on{color:var(--kx-accent);font-weight:700}
.kx-kbd-help{display:none}

/* ---- Pubs : bandeau leger non-intrusif ---- */
.kx-adbanner{min-height:auto;border:1px solid var(--kx-line);border-style:solid;background:var(--kx-bg-2);
  padding:0;overflow:hidden;display:block;position:relative}
.kx-adbanner.house{display:grid;place-items:center;min-height:90px}
.kx-ad-label{position:absolute;top:4px;left:6px;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--kx-muted);background:rgba(255,255,255,.7);padding:0 4px;border-radius:4px;z-index:2}

/* ---- Petite barre "mode demo" ---- */
.kx-demobar{background:repeating-linear-gradient(45deg,#fff4d6,#fff4d6 10px,#ffeec0 10px,#ffeec0 20px);
  color:#6b5300;text-align:center;font-size:.82rem;padding:.35rem;font-weight:600}
.kx-demobar a{color:#6b5300;text-decoration:underline}
.kx-player.hide-ui .kx-controls{opacity:0}
.kx-player.hide-ui{cursor:none}
.kx-player.hide-ui .kx-kbd-help{opacity:0}

/* ---- Pubs 300x250 (MREC) : format unique sur tout le site ---- */
.kx-adrail{display:flex;justify-content:center;margin:1.25rem 0}
.kx-adbox{position:relative;width:300px;height:250px;max-width:100%;border-radius:12px;overflow:hidden;
  border:1px solid var(--kx-line);background:var(--kx-bg-2);display:grid;place-items:center;flex:none}
.kx-adbox>img{width:100%;height:100%;object-fit:cover}
.kx-adbox .kx-ad-label{position:absolute;top:5px;left:6px;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--kx-muted);background:rgba(255,255,255,.78);padding:0 5px;border-radius:4px;z-index:2}
.kx-adbox.invite{background:linear-gradient(135deg,#fff,var(--kx-bg-2));text-align:center;padding:1rem;color:var(--kx-muted);font-size:.9rem}
.kx-adbox.invite b{color:var(--kx-primary);display:block;font-size:1rem;margin-bottom:.2rem}
/* la pub 300x250 s'insere comme une carte dans la grille */
.kx-grid .kx-adbox{width:100%;height:auto;aspect-ratio:300/250}

/* ---- Selecteur de langue (navbar) ---- */
.kx-lang{position:relative}
.kx-lang>.kx-icon-btn{width:auto;padding:0 .5rem;gap:.25rem;border-radius:999px}
.kx-lang-cur{font-size:.72rem;font-weight:700;color:var(--kx-muted)}
.kx-lang-menu{position:absolute;right:0;top:48px;background:#fff;border:1px solid var(--kx-line);border-radius:10px;
  box-shadow:var(--kx-shadow);padding:.3rem;min-width:140px;display:none;flex-direction:column;gap:.1rem;z-index:60}
.kx-lang.open .kx-lang-menu{display:flex}
.kx-lang-menu button{text-align:left;background:none;border:none;padding:.5rem .7rem;border-radius:7px;cursor:pointer;font-size:.9rem;color:var(--kx-text)}
.kx-lang-menu button:hover{background:var(--kx-bg-2)}
.kx-lang-menu button.on{color:var(--kx-primary);font-weight:700}

/* =====================================================================
   v3 - pubs verticales aux bords, responsive complet, apercu au survol
   ===================================================================== */

/* ---- Rails publicitaires verticaux (bords d'ecran) ---- */
.kx-siderail{display:none;position:fixed;top:50%;transform:translateY(-50%);z-index:40;width:160px}
.kx-siderail.left{left:16px}
.kx-siderail.right{right:16px}
.kx-adsky{position:relative;display:grid;place-items:center;width:160px;height:600px;max-height:80vh;
  border:1px solid var(--kx-line);border-radius:12px;overflow:hidden;background:var(--kx-bg-2)}
.kx-adsky>img{width:100%;height:100%;object-fit:cover}
.kx-adsky .kx-ad-label{position:absolute;top:5px;left:6px;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--kx-muted);background:rgba(255,255,255,.78);padding:0 5px;border-radius:4px;z-index:2}
.kx-adsky.invite{background:linear-gradient(160deg,#fff,var(--kx-bg-2));text-align:center;padding:1rem;color:var(--kx-muted);font-size:.9rem}
.kx-adsky.invite b{color:var(--kx-primary);display:block;font-size:1rem;margin-bottom:.3rem}
/* affiches seulement si l'ecran est assez large pour ne pas chevaucher le contenu */
@media(min-width:1660px){.kx-siderail{display:block}}

/* ---- Apercu video au survol (3 scenes) ---- */
.card-thumb video.kx-prev{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .2s;background:#000}
.card-thumb.previewing video.kx-prev{opacity:1}
.card-thumb.previewing img{opacity:0}
.card-prev-dots{position:absolute;left:0;right:0;bottom:6px;display:flex;gap:4px;justify-content:center;z-index:3;opacity:0;transition:opacity .2s}
.card-thumb.previewing .card-prev-dots{opacity:1}
.card-prev-dots i{width:18px;height:3px;border-radius:2px;background:rgba(255,255,255,.45)}
.card-prev-dots i.on{background:#fff}

/* ---- Menu qualite (reutilise le style du menu reglages) ---- */
.kx-settings-menu .kx-q{font-size:.85rem}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(max-width:1100px){
  .kx-nav .kx-search{max-width:230px}
}
@media(max-width:900px){
  .kx-nav{flex-wrap:wrap;height:auto;padding:.5rem .8rem;gap:.5rem}
  .kx-nav .kx-search{order:3;flex:1 1 100%;max-width:none;margin:0}
  .kx-nav-links{order:2;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;gap:.25rem}
  .kx-nav-links a{padding:.45rem .6rem;font-size:.9rem}
  .kx-wrap{padding:1.1rem 1rem}
  /* page video : colonne unique */
  .kx-watch{grid-template-columns:1fr !important}
}
@media(max-width:760px){
  .kx-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.8rem}
  .kx-profhead{flex-direction:column;align-items:flex-start;gap:.6rem;margin-top:-40px}
  .kx-profhead .pa{width:96px;height:96px}
  .kx-tabs{overflow-x:auto;white-space:nowrap}
  .kx-controls button{width:30px;height:30px}
  .kx-vol input[type=range]{display:none}
  .kx-player .kx-big-play{width:60px;height:60px}
  .kx-footer .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .kx-grid{grid-template-columns:1fr 1fr;gap:.6rem}
  .kx-nav-right .btn .kx-ic{margin:0}
  .card-title{font-size:.9rem}
  .kx-footer .cols{grid-template-columns:1fr}
  .kx-brand img{height:26px}
  .kx-settings-menu{min-width:150px}
}

/* ---- Videos externes (embed officiel PornHub) ---- */
.kx-player.kx-embed{aspect-ratio:16/9;background:#000}
.kx-player.kx-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@supports not (aspect-ratio:16/9){.kx-player.kx-embed{height:0;padding-bottom:56.25%}}
.kx-src-note{display:flex;align-items:center;gap:.4rem;font-size:.82rem;margin:.5rem 0 0}
.card-src{position:absolute;top:6px;left:6px;background:#ff9000;color:#000;font-weight:800;font-size:.62rem;
  letter-spacing:.04em;padding:2px 6px;border-radius:5px;z-index:2}

/* ---- Preroll pub sur embeds externes ---- */
.kx-embed{position:relative}
.kx-embed-frame{position:absolute;inset:0;width:100%;height:100%;border:0}
.kx-embed-cover{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;cursor:pointer;background:#000}
.kx-embed-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.7}
.kx-embed-play{position:relative;z-index:2;width:76px;height:76px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(128,0,32,.92);color:#fff;display:flex;align-items:center;justify-content:center}
.kx-embed-play:hover{background:var(--kx-primary)}
.kx-pre-vid{flex:1;width:100%;height:100%;object-fit:contain;background:#000}
.kx-pre-img{flex:1;display:block;background-size:contain;background-position:center;background-repeat:no-repeat;background-color:#000}
.kx-pre-bar{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;background:rgba(0,0,0,.85)}
.kx-pre-label{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.18);padding:2px 7px;border-radius:4px}
.kx-pre-skip{margin-left:auto;background:rgba(255,255,255,.16);color:#fff;border:none;border-radius:6px;padding:.4rem .8rem;cursor:pointer;font-size:.85rem}
.kx-pre-skip:disabled{opacity:.7;cursor:default}
.kx-pre-skip:not(:disabled):hover{background:rgba(255,255,255,.3)}

/* ---- Embed direct + calque preroll non bloquant ---- */
.kx-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.kx-preroll-ov{position:absolute;inset:0;z-index:5;background:#000;display:flex;flex-direction:column}

/* ---- Bouton plein ecran sur embed ---- */
.kx-embed-fs{position:absolute;top:.6rem;right:.6rem;z-index:6;width:40px;height:40px;border:none;border-radius:8px;
  background:rgba(0,0,0,.55);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.85;transition:opacity .15s,background .15s}
.kx-embed-fs:hover{opacity:1;background:rgba(128,0,32,.92)}
.kx-embed:fullscreen,.kx-embed:-webkit-full-screen{width:100%;height:100%;border-radius:0}
.kx-embed:fullscreen iframe,.kx-embed:-webkit-full-screen iframe{width:100%;height:100%}

/* ---- Pub native intercalee (carte deguisee en video) ---- */
.card-pub{position:absolute;top:8px;left:8px;z-index:3;background:rgba(0,0,0,.78);color:#fff;
  font-size:.62rem;font-weight:700;letter-spacing:.08em;padding:3px 7px;border-radius:4px;text-transform:uppercase}
.card-ad .card-thumb{position:relative;display:flex;align-items:center;justify-content:center;background:#15080c;min-height:0}
.card-ad .card-thumb img{width:100%;height:100%;object-fit:cover}

/* ---- Menu deroulant des notifications ---- */
.kx-notif{position:relative;display:inline-flex}
.kx-notif-panel{position:absolute;top:calc(100% + 10px);right:0;width:350px;max-width:92vw;z-index:130;
  background:var(--kx-bg-2);border:1px solid var(--kx-line);border-radius:14px;box-shadow:var(--kx-shadow);overflow:hidden}
.kx-notif-head{display:flex;align-items:center;justify-content:space-between;padding:.75rem .95rem;border-bottom:1px solid var(--kx-line)}
.kx-notif-readall{background:none;border:none;color:var(--kx-primary);cursor:pointer;font-size:.82rem;padding:0}
.kx-notif-readall:hover{text-decoration:underline}
.kx-notif-list{max-height:62vh;overflow-y:auto}
.kx-notif-item{display:flex;gap:.6rem;align-items:flex-start;padding:.7rem .95rem;border-bottom:1px solid var(--kx-line);color:var(--kx-text)}
.kx-notif-item:last-child{border-bottom:none}
.kx-notif-item.unread{background:rgba(128,0,32,.13)}
.kx-notif-item>div{display:flex;flex-direction:column;gap:3px;line-height:1.3;font-size:.88rem}
.kx-notif-item em{font-style:normal;color:var(--kx-muted);font-size:.72rem}
.kx-notif-empty{padding:1.8rem 1rem;text-align:center;color:var(--kx-muted)}
.kx-notif-empty p{margin:.5rem 0 0}

/* ---- Mention de la source (videos importees) ---- */
.kx-src-note{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:.6rem 0 .2rem;padding:.55rem .8rem;
  background:var(--kx-bg-3);border:1px solid var(--kx-line);border-radius:10px;font-size:.86rem;color:var(--kx-muted)}
.kx-src-note a{color:var(--kx-primary);font-weight:600}
.kx-src-note a:hover{text-decoration:underline}

/* ---- Banniere 728x90 (leaderboard, haut de page) ---- */
.kx-adlead-wrap{display:flex;justify-content:center;margin:0 0 1.4rem}
.kx-adlead{position:relative;width:728px;height:90px;max-width:100%;border-radius:10px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:var(--kx-bg-3);border:1px solid var(--kx-line)}
.kx-adlead>img{width:100%;height:100%;object-fit:cover}
.kx-adlead .kx-ad-label{position:absolute;top:5px;left:6px;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(0,0,0,.55);color:#fff;padding:2px 6px;border-radius:4px}
.kx-adlead.invite{flex-direction:column;text-decoration:none;color:var(--kx-text)}
.kx-adlead.invite b{display:block;color:var(--kx-primary)}
@media(max-width:760px){.kx-adlead{height:70px}}

/* ---- Label RTA (footer) ---- */
.kx-footer .legal{display:flex;align-items:center;justify-content:center;gap:.8rem;flex-wrap:wrap;text-align:center}
.kx-rta{display:inline-flex;align-items:center;opacity:.85;transition:opacity .15s}
.kx-rta:hover{opacity:1}
.kx-rta img{display:block}

/* ---- Pubs differees : le conteneur garde la taille du slot ---- */
.kx-adlazy{width:100%;height:100%;min-height:inherit}

/* ---- Accueil enrichi : hero + createurs ---- */
.kx-hero{margin:0 0 1.4rem;border-radius:18px;overflow:hidden;border:1px solid var(--kx-line);
  background:linear-gradient(135deg,var(--kx-primary-d) 0%,var(--kx-primary) 50%,#170a10 100%)}
.kx-hero-in{padding:2.6rem 1.8rem;max-width:660px}
.kx-hero-kicker{display:inline-block;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.8);background:rgba(255,255,255,.14);padding:4px 10px;border-radius:20px;margin-bottom:.8rem}
.kx-hero h1{font-family:var(--kx-display);font-size:2.1rem;line-height:1.1;margin:0 0 .5rem;color:#fff}
.kx-hero p{color:rgba(255,255,255,.88);margin:0 0 1.2rem;max-width:520px}
.kx-hero-cta{display:flex;gap:.6rem;flex-wrap:wrap}
.kx-hero .btn-ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.3)}
.kx-hero .btn-ghost:hover{background:rgba(255,255,255,.22)}
@media(max-width:600px){.kx-hero-in{padding:1.8rem 1.2rem}.kx-hero h1{font-size:1.55rem}}

.kx-creators{display:flex;gap:.9rem;overflow-x:auto;padding-bottom:.4rem;scrollbar-width:thin}
.kx-creator-chip{flex:0 0 auto;width:140px;display:flex;flex-direction:column;align-items:center;gap:.35rem;
  text-align:center;padding:1rem .6rem;background:var(--kx-bg);border:1px solid var(--kx-line);border-radius:14px;transition:transform .15s}
.kx-creator-chip:hover{transform:translateY(-2px)}
.kx-creator-chip img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.kx-creator-chip b{font-size:.92rem;line-height:1.2}
.kx-creator-chip span{font-size:.76rem;color:var(--kx-muted)}

/* ===== Social : pleine largeur + presence + IA + animations ===== */
.kx-social{max-width:none;width:100%;padding:0;margin:0}
.kx-social .kx-chatwrap{border:none;border-radius:0;min-height:0;height:calc(100vh - var(--kx-nav-h));grid-template-columns:320px 1fr}
@media(max-width:760px){.kx-social .kx-chatwrap{grid-template-columns:1fr}}

/* Pastille "en ligne" (anneau vert) */
.kx-ava-wrap{position:relative;display:inline-block;line-height:0}
.kx-ava-wrap.online img{box-shadow:0 0 0 2px #22c55e}

/* Animation d'apparition des messages */
@keyframes kxMsgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.kx-msg{animation:kxMsgIn .18s ease}

/* Indicateur "en train d'ecrire" */
.kx-typing{display:inline-flex;gap:4px;align-items:center}
.kx-typing i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.5;animation:kxTyping 1s infinite}
.kx-typing i:nth-child(2){animation-delay:.15s}
.kx-typing i:nth-child(3){animation-delay:.3s}
@keyframes kxTyping{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}

/* Cartes video suggerees par Mocha */
.kx-ai-vids{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.6rem}
.kx-ai-vid{width:150px;display:flex;flex-direction:column;gap:.25rem;font-size:.8rem;color:var(--kx-text)}
.kx-ai-vid .t{display:block;position:relative;aspect-ratio:16/9;border-radius:8px;background:#000 center/cover no-repeat}
.kx-ai-vid .t em{position:absolute;right:4px;bottom:4px;background:rgba(0,0,0,.8);color:#fff;font-size:.68rem;padding:1px 5px;border-radius:4px}
.kx-ai-vid b{line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kx-ai-vid .m{color:var(--kx-muted);font-size:.72rem}

/* ===== Chat : scroll contenu + messages longs + Vu ===== */
.kx-social .kx-chatlog{flex:1 1 auto;min-height:0;overflow-y:auto}
.kx-msg{max-width:75%;overflow-wrap:anywhere;word-break:break-word}
.kx-msg .txt{white-space:pre-wrap;overflow-wrap:anywhere}
.kx-seen{align-self:flex-end;font-size:.7rem;color:var(--kx-muted);margin:-2px 2px 0}
.kx-social .kx-chatbar{flex:0 0 auto}

/* ===== Espaces Koffee ===== */
.kx-space-card{display:flex;align-items:center;gap:.8rem;margin:.8rem 0;padding:.7rem .9rem;border:1px solid var(--kx-line);
  border-radius:14px;background:linear-gradient(120deg,rgba(128,0,32,.12),transparent);max-width:480px;color:var(--kx-text)}
.kx-space-card img,.kx-space-card .ph{width:46px;height:46px;border-radius:12px;object-fit:cover;display:flex;align-items:center;justify-content:center;background:var(--kx-bg-3);flex:0 0 auto}
.kx-space-card .info{display:flex;flex-direction:column;line-height:1.25;flex:1;min-width:0}
.kx-space-card .info b{font-size:.95rem}
.kx-space-card .info em{font-style:normal;color:var(--kx-muted);font-size:.8rem}
.kx-space-card .cta{background:var(--kx-primary);color:#fff;padding:.4rem .8rem;border-radius:8px;font-weight:600;font-size:.85rem;white-space:nowrap}
.kx-space-card:hover .cta{background:var(--kx-primary-d)}

.kx-space-chat{display:flex;flex-direction:column;height:calc(100vh - var(--kx-nav-h));width:100%}
.kx-space-head{display:flex;align-items:center;gap:.7rem;padding:.7rem 1rem;border-bottom:1px solid var(--kx-line);background:var(--kx-bg-2)}
.kx-space-ico{width:40px;height:40px;border-radius:11px;object-fit:cover}
.kx-space-ico-ph{display:flex;align-items:center;justify-content:center;background:var(--kx-bg-3);color:var(--kx-primary)}
.kx-space-chat .kx-chatlog{flex:1 1 auto;min-height:0;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.6rem;background:var(--kx-bg)}
.kx-space-chat .kx-chatbar{flex:0 0 auto;display:flex;gap:.5rem;padding:.7rem 1rem;border-top:1px solid var(--kx-line);background:var(--kx-bg-2)}
.kx-space-chat .kx-chatbar input{flex:1;padding:.6rem .8rem;border:1px solid var(--kx-line);border-radius:10px;background:var(--kx-bg);color:var(--kx-text)}

.kx-radio,.kx-check{display:flex;align-items:center;gap:.5rem;padding:.25rem 0;cursor:pointer}

/* ===== Espaces dans la liste social (en haut, distincts) ===== */
.kx-list-h{padding:.5rem 1rem .3rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--kx-primary);font-weight:700}
.kx-space-row{display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;border-bottom:1px solid var(--kx-line);
  border-left:3px solid var(--kx-primary);background:linear-gradient(90deg,rgba(128,0,32,.10),transparent 70%)}
.kx-space-row:hover{background:linear-gradient(90deg,rgba(128,0,32,.18),transparent 70%)}
.kx-space-row img,.kx-space-row .ph{width:34px;height:34px;border-radius:9px;object-fit:cover;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--kx-bg-3);color:var(--kx-primary)}

/* ===== Espace : chat + liste de membres (Discord) ===== */
.kx-social{display:flex}
.kx-social > .kx-chatwrap{flex:1;min-width:0}
.kx-space-chat{flex:1;min-width:0}
.kx-space-members{flex:0 0 250px;width:250px;height:calc(100vh - var(--kx-nav-h));overflow-y:auto;
  border-left:1px solid var(--kx-line);background:var(--kx-bg-2);padding:.5rem 0}
.kx-mem-h{padding:.6rem 1rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--kx-muted)}
.kx-mem{display:flex;align-items:center;gap:.55rem;padding:.4rem 1rem;position:relative}
.kx-mem:hover{background:var(--kx-bg-3)}
.kx-mem b{font-size:.88rem}
.kx-mem-badge{font-size:.68rem;color:var(--kx-muted)}
.kx-mem-badge.owner{color:#d4a017;font-weight:700}
.kx-mem-badge.admin{color:var(--kx-primary);font-weight:700}
.kx-mem-menu-btn{background:none;border:none;color:var(--kx-muted);cursor:pointer;padding:4px;border-radius:6px}
.kx-mem-menu-btn:hover{background:var(--kx-line)}
.kx-mem-menu{display:none;position:absolute;right:8px;top:100%;z-index:20;background:var(--kx-bg);border:1px solid var(--kx-line);
  border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.18);min-width:180px;overflow:hidden}
.kx-mem-menu.open{display:block}
.kx-mem-menu button{display:block;width:100%;text-align:left;padding:.55rem .8rem;background:none;border:none;cursor:pointer;font-size:.85rem;color:var(--kx-text)}
.kx-mem-menu button:hover{background:var(--kx-bg-3)}
.kx-mem-menu button.danger{color:#dc2626}
.kx-readonly{flex:0 0 auto;padding:.7rem 1rem;border-top:1px solid var(--kx-line);background:var(--kx-bg-2);color:var(--kx-muted);font-size:.85rem;display:flex;align-items:center;gap:.4rem}
.kx-mem-toggle{display:none}
@media(max-width:760px){
  .kx-space-members{position:fixed;right:0;top:var(--kx-nav-h);height:calc(100vh - var(--kx-nav-h));transform:translateX(100%);transition:transform .2s;z-index:40}
  .kx-space-members.open{transform:none}
  .kx-mem-toggle{display:inline-flex}
}

/* Espace rendu DANS la messagerie (chat + membres a droite) */
.kx-space-inner{display:flex;height:100%;min-height:0}
.kx-space-col{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
.kx-space-inner .kx-space-members{height:auto;align-self:stretch}

/* ===== Pieces jointes + badges VirusTotal ===== */
.kx-att{position:relative;margin-top:.4rem;max-width:280px}
.kx-att-img{max-width:280px;max-height:280px;border-radius:10px;display:block}
.kx-att-vid{max-width:280px;border-radius:10px;display:block}
.kx-att audio{width:260px}
.kx-att-file{display:inline-block;padding:.5rem .8rem;background:var(--kx-bg-3);border-radius:10px;color:var(--kx-text);font-size:.85rem}
.kx-vt{position:absolute;top:6px;left:6px;z-index:2;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.kx-vt-safe{background:#16a34a}
.kx-vt-warn{background:#d97706}
.kx-vt-danger{background:#dc2626}

/* ===== Reactions ===== */
.kx-reacts{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.35rem;align-items:center}
.kx-react{display:inline-flex;align-items:center;gap:.2rem;padding:1px 7px;border:1px solid var(--kx-line);border-radius:12px;background:var(--kx-bg);cursor:pointer;font-size:.82rem}
.kx-react.mine{border-color:var(--kx-primary);background:rgba(128,0,32,.10)}
.kx-react img.kx-cemoji,.kx-react-add{vertical-align:middle}
.kx-react-add{padding:1px 7px;border:1px dashed var(--kx-line);border-radius:12px;background:none;cursor:pointer;color:var(--kx-muted);font-size:.9rem;line-height:1.2}
.kx-cemoji{width:1.25em;height:1.25em;vertical-align:-.25em;object-fit:contain}

/* ===== Selecteur d'emojis ===== */
.kx-emoji-picker{position:fixed;z-index:1000;display:grid;grid-template-columns:repeat(6,1fr);gap:3px;max-width:248px;max-height:220px;overflow:auto;padding:8px;background:var(--kx-bg);border:1px solid var(--kx-line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.22)}
.kx-emoji-picker button{width:34px;height:34px;border:none;background:none;cursor:pointer;font-size:1.2rem;border-radius:8px;display:flex;align-items:center;justify-content:center}
.kx-emoji-picker button:hover{background:var(--kx-bg-3)}
.kx-emoji-picker img{width:24px;height:24px;object-fit:contain}

/* ===== Embed video partage en chat ===== */
.kx-vembed{display:flex;gap:.6rem;margin-top:.4rem;max-width:320px;background:var(--kx-bg-3);border:1px solid var(--kx-line);border-radius:10px;overflow:hidden;color:var(--kx-text)}
.kx-vembed .t{flex:0 0 120px;aspect-ratio:16/9;background:#000 center/cover no-repeat;position:relative}
.kx-vembed .t em{position:absolute;right:4px;bottom:4px;background:rgba(0,0,0,.8);color:#fff;font-size:.66rem;padding:1px 4px;border-radius:4px;font-style:normal}
.kx-vembed .i{display:flex;flex-direction:column;justify-content:center;padding:.4rem .5rem;min-width:0}
.kx-vembed .i b{font-size:.85rem;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kx-vembed .i span{font-size:.74rem;color:var(--kx-muted)}

/* Conteneur messagerie : seule la zone messages defile, jamais la page */
.kx-social{height:calc(100vh - var(--kx-nav-h));overflow:hidden}
.kx-social .kx-chatmain,.kx-space-col{min-height:0}

/* ===== Actions message (repondre / supprimer) + apercu reponse ===== */
.kx-msg{position:relative}
.kx-msg-act{position:absolute;top:-10px;right:6px;display:none;gap:2px;background:var(--kx-bg);border:1px solid var(--kx-line);border-radius:8px;padding:2px;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.kx-msg:hover .kx-msg-act{display:flex}
.kx-msg.me .kx-msg-act{right:auto;left:6px}
.kx-msg-act button{background:none;border:none;cursor:pointer;color:var(--kx-muted);padding:3px;border-radius:6px;display:flex}
.kx-msg-act button:hover{background:var(--kx-bg-3);color:var(--kx-text)}
.kx-reply-q{border-left:3px solid var(--kx-primary);padding:.15rem .5rem;margin-bottom:.25rem;font-size:.78rem;color:var(--kx-muted);background:rgba(128,0,32,.06);border-radius:0 6px 6px 0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kx-reply-bar{display:flex;align-items:center;gap:.5rem;padding:.4rem .8rem;background:var(--kx-bg-2);border-top:1px solid var(--kx-line);font-size:.82rem;color:var(--kx-muted)}
.kx-reply-bar button{margin-left:auto;background:none;border:none;cursor:pointer;color:var(--kx-muted);display:flex}

/* Carte espace pleine largeur sous l'entete du profil */
.kx-space-card-wide{max-width:none;margin:.2rem 0 1rem;padding:.9rem 1.1rem}
.kx-space-card-wide .info b{font-size:1rem}

/* ===== Page de paiement integree ===== */
.kx-pay-wrap{max-width:560px;margin:2rem auto;padding:0 1rem}
.kx-pay-card{background:var(--kx-bg);border:1px solid var(--kx-line);border-radius:18px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.08)}
.kx-pay-head{background:linear-gradient(120deg,var(--kx-primary-d),var(--kx-primary));padding:1.1rem 1.4rem}
.kx-pay-steps{display:flex;gap:.5rem;font-size:.74rem;color:rgba(255,255,255,.6);flex-wrap:wrap}
.kx-pay-steps span{transition:color .3s}
.kx-pay-steps span.on{color:#fff;font-weight:700}
.kx-pay-recap{display:flex;align-items:center;gap:.9rem;padding:1.2rem 1.4rem;border-bottom:1px solid var(--kx-line)}
.kx-pay-ava{width:52px;height:52px;border-radius:14px;object-fit:cover;flex:0 0 auto}
.kx-pay-ava-ph{display:flex;align-items:center;justify-content:center;background:var(--kx-bg-3);color:var(--kx-primary)}
.kx-pay-kind{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--kx-muted)}
.kx-pay-label{font-weight:700;font-size:1.05rem}
.kx-pay-price{font-size:1.5rem;font-weight:800;color:var(--kx-primary)}
.kx-pay-price small{font-size:.8rem;font-weight:500;color:var(--kx-muted)}
.kx-pay-step{padding:1.4rem}
#kxPayElement{margin-bottom:1rem;min-height:40px}
.kx-pay-btn{width:100%;justify-content:center;font-size:1rem;padding:.8rem}
.kx-pay-err{color:#dc2626;font-size:.85rem;margin-bottom:.6rem;min-height:1.1em}
.kx-pay-warn{display:flex;gap:.5rem;align-items:center;margin:1.4rem;padding:1rem;background:rgba(217,119,6,.1);border:1px solid rgba(217,119,6,.3);border-radius:12px;color:#92400e;font-size:.9rem}
.kx-pay-secure{display:flex;align-items:center;gap:.4rem;justify-content:center;padding:1rem 1.4rem;color:var(--kx-muted);font-size:.78rem;border-top:1px solid var(--kx-line);background:var(--kx-bg-2)}
.kx-spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:kxspin .7s linear infinite;vertical-align:-2px;margin-right:4px}
@keyframes kxspin{to{transform:rotate(360deg)}}

/* Succes anime */
.kx-pay-success{padding:2.5rem 1.4rem;text-align:center;animation:kxFadeUp .4s ease}
@keyframes kxFadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.kx-pay-check svg{width:84px;height:84px}
.kx-pay-check circle{stroke:#16a34a;stroke-width:2;stroke-dasharray:151;stroke-dashoffset:151;animation:kxCircle .5s ease forwards}
.kx-pay-check path{stroke:#16a34a;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:kxCheck .35s .45s ease forwards}
@keyframes kxCircle{to{stroke-dashoffset:0}}
@keyframes kxCheck{to{stroke-dashoffset:0}}
.kx-pay-success h3{margin:.8rem 0 .2rem;color:#16a34a}
.kx-stripe-status{display:flex;align-items:center;gap:.7rem;padding:1rem 1.2rem;border-radius:12px;background:rgba(22,163,74,.1);border:1px solid rgba(22,163,74,.3);color:#15803d}
.kx-stripe-steps{margin:.6rem 0 1.2rem 1.1rem;line-height:1.8;color:var(--kx-muted)}

/* ===== Verification d'identite (wizard anime) ===== */
.kx-verify{max-width:560px;margin:2rem auto;padding:0 1rem}
.kx-vf-card{background:var(--kx-bg);border:1px solid var(--kx-line);border-radius:20px;padding:2rem 1.6rem;box-shadow:0 10px 40px rgba(0,0,0,.07);position:relative;overflow:hidden}
.kx-vf-progress{position:absolute;top:0;left:0;right:0;height:4px;background:var(--kx-bg-3)}
.kx-vf-bar{position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,var(--kx-primary-d),var(--kx-primary));transition:width .5s cubic-bezier(.4,0,.2,1)}
.kx-vf-step{display:none;text-align:center;animation:kxVfIn .45s ease}
.kx-vf-step.active{display:block}
@keyframes kxVfIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.kx-vf-step h2{font-family:var(--kx-display);margin:.6rem 0 .4rem}
.kx-vf-ico{width:80px;height:80px;margin:0 auto 1rem;border-radius:24px;display:flex;align-items:center;justify-content:center;background:rgba(128,0,32,.08);color:var(--kx-primary)}
.kx-vf-trust{list-style:none;padding:0;margin:1.2rem 0;text-align:left;display:flex;flex-direction:column;gap:.7rem}
.kx-vf-trust li{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:var(--kx-text)}
.kx-vf-trust li svg{color:var(--kx-primary);flex:0 0 auto;margin-top:1px}
.kx-vf-nav{display:flex;justify-content:space-between;gap:.8rem;margin-top:1.4rem}
.kx-vf-nav .btn{flex:1}

/* Choix du document */
.kx-vf-docs{display:flex;flex-direction:column;gap:.7rem;margin:1.4rem 0}
.kx-vf-doc{display:flex;align-items:center;gap:1rem;padding:1rem 1.2rem;border:2px solid var(--kx-line);border-radius:14px;background:var(--kx-bg);cursor:pointer;transition:.2s;text-align:left}
.kx-vf-doc span{width:50px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--kx-bg-3);color:var(--kx-primary);flex:0 0 auto}
.kx-vf-doc b{font-size:1rem}
.kx-vf-doc:hover{border-color:var(--kx-primary);transform:translateY(-2px)}
.kx-vf-doc.on{border-color:var(--kx-primary);background:rgba(128,0,32,.06)}

/* Uploads recto/verso */
.kx-vf-uploads{display:flex;gap:1rem;margin:1.4rem 0}
.kx-vf-up{flex:1;aspect-ratio:16/10;border:2px dashed var(--kx-line);border-radius:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;background-size:cover;background-position:center;transition:.2s;position:relative;overflow:hidden}
.kx-vf-up:hover{border-color:var(--kx-primary)}
.kx-vf-up.filled{border-style:solid;border-color:var(--kx-primary)}
.kx-vf-up.filled::after{content:"\2713";position:absolute;top:6px;right:8px;width:22px;height:22px;background:#16a34a;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem}
.kx-vf-up .ph{display:flex;flex-direction:column;align-items:center;gap:.3rem;color:var(--kx-muted)}
.kx-vf-up .ph em{font-style:normal;font-size:.7rem;letter-spacing:.1em;font-weight:700}
.kx-vf-attest{margin:.4rem 0;justify-content:center;font-size:.86rem}
.kx-vf-secure{display:flex;align-items:center;gap:.4rem;justify-content:center;color:var(--kx-muted);font-size:.76rem;margin:.6rem 0}
.kx-vf-legal{font-size:.74rem;margin-top:1rem;text-align:center;line-height:1.6}

/* Animation de scan du document */
.kx-scan{display:flex;justify-content:center;margin:1.6rem 0 1.2rem}
.kx-scan-doc{position:relative;width:220px;height:140px;border-radius:12px;background:linear-gradient(135deg,#fbeef1,#f7e3e8);box-shadow:0 6px 22px rgba(128,0,32,.18),inset 0 0 0 1px rgba(128,0,32,.12);overflow:hidden}
.kx-scan-photo{position:absolute;left:14px;top:22px;width:54px;height:66px;border-radius:6px;background:rgba(128,0,32,.14);display:flex;align-items:center;justify-content:center;color:var(--kx-primary)}
.kx-scan-l{position:absolute;left:82px;height:9px;border-radius:5px;background:rgba(128,0,32,.16)}
.kx-scan-l.l1{top:24px;width:110px}.kx-scan-l.l2{top:42px;width:88px}.kx-scan-l.l3{top:74px;width:120px}.kx-scan-l.l4{top:92px;width:70px}
.kx-scan-beam{position:absolute;left:0;right:0;height:36px;top:-40px;background:linear-gradient(180deg,rgba(128,0,32,0),rgba(128,0,32,.28),rgba(255,120,150,.5),rgba(128,0,32,.28),rgba(128,0,32,0));box-shadow:0 0 18px 4px rgba(128,0,32,.35);animation:kxBeam 1.9s cubic-bezier(.45,0,.55,1) infinite}
@keyframes kxBeam{0%{top:-40px}100%{top:140px}}
.kx-scan-c{position:absolute;width:16px;height:16px;border:2px solid var(--kx-primary);opacity:.7}
.kx-scan-c.tl{top:6px;left:6px;border-right:0;border-bottom:0}
.kx-scan-c.tr{top:6px;right:6px;border-left:0;border-bottom:0}
.kx-scan-c.bl{bottom:6px;left:6px;border-right:0;border-top:0}
.kx-scan-c.br{bottom:6px;right:6px;border-left:0;border-top:0}
.kx-dots i{animation:kxBlink 1.2s infinite;opacity:.2}
.kx-dots i:nth-child(2){animation-delay:.2s}.kx-dots i:nth-child(3){animation-delay:.4s}
@keyframes kxBlink{0%,100%{opacity:.2}50%{opacity:1}}

/* Refus anime (croix) */
.kx-vf-cross svg{width:84px;height:84px;margin:0 auto}
.kx-vf-cross circle{stroke:#dc2626;stroke-width:2;fill:none;stroke-dasharray:151;stroke-dashoffset:151;animation:kxCircle .5s ease forwards}
.kx-vf-cross path{stroke:#dc2626;stroke-width:3;stroke-linecap:round;fill:none;stroke-dasharray:46;stroke-dashoffset:46;animation:kxCheck .3s .45s ease forwards}
.kx-vf-done{text-align:center}

/* ===== Coquille createur (navbar verticale) ===== */
.kx-cr{display:flex;min-height:calc(100vh - var(--kx-nav-h));max-width:1280px;margin:0 auto}
.kx-cr-side{flex:0 0 248px;border-right:1px solid var(--kx-line);background:var(--kx-bg)}
.kx-cr-side-in{position:sticky;top:var(--kx-nav-h);padding:1.2rem .8rem;display:flex;flex-direction:column;gap:.4rem;max-height:calc(100vh - var(--kx-nav-h));overflow:auto}
.kx-cr-id{display:flex;align-items:center;gap:.6rem;padding:.4rem .6rem 1rem}
.kx-cr-id img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.kx-cr-id b{display:block;font-size:.95rem;line-height:1.1}
.kx-cr-id span{font-size:.74rem;color:var(--kx-primary);font-weight:600}
.kx-cr-nav{display:flex;flex-direction:column;gap:.2rem}
.kx-cr-nav a,.kx-cr-side-foot a{display:flex;align-items:center;gap:.7rem;padding:.62rem .8rem;border-radius:10px;color:var(--kx-text);font-weight:500;font-size:.92rem;transition:.15s}
.kx-cr-nav a:hover,.kx-cr-side-foot a:hover{background:var(--kx-bg-3)}
.kx-cr-nav a.on{background:var(--kx-primary);color:#fff}
.kx-cr-nav a.on svg{color:#fff}
.kx-cr-nav a svg,.kx-cr-side-foot a svg{color:var(--kx-muted)}
.kx-cr-nav a.on svg{color:#fff}
.kx-cr-side-foot{margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--kx-line);display:flex;flex-direction:column;gap:.2rem}
.kx-cr-side-foot a{font-size:.86rem;color:var(--kx-muted)}
.kx-cr-main{flex:1;min-width:0;padding:1.6rem 1.8rem}
.kx-cr-burger{display:none}
.kx-cr-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.kx-cr-head h1{font-family:var(--kx-display);font-size:1.7rem;margin:0}
.kx-cr-alert{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;border-radius:12px;background:rgba(128,0,32,.06);border:1px solid rgba(128,0,32,.18);margin-bottom:1rem;font-size:.9rem}
.kx-cr-alert.warn{background:rgba(217,119,6,.08);border-color:rgba(217,119,6,.25)}
.kx-cr-alert svg{color:var(--kx-primary);flex:0 0 auto}

/* KPIs */
.kx-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem;margin-bottom:1.2rem}
.kx-kpi{display:flex;align-items:center;gap:.8rem;padding:1rem 1.1rem;background:var(--kx-bg);border:1px solid var(--kx-line);border-radius:14px}
.kx-kpi .i{width:40px;height:40px;border-radius:11px;background:rgba(128,0,32,.08);color:var(--kx-primary);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.kx-kpi .n{font-size:1.3rem;font-weight:800;line-height:1.1}
.kx-kpi .l{font-size:.76rem;color:var(--kx-muted)}

/* Charts */
.kx-cr-grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-bottom:1.1rem}
.kx-chart-card{padding:1.1rem 1.2rem}
.kx-chart-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem;font-size:.92rem}
.kx-chart-h .kx-muted{font-size:.76rem}
.kx-chart{display:block;width:100%}
.kx-chart-empty{height:120px;display:flex;align-items:center;justify-content:center;color:var(--kx-muted);font-size:.85rem}
.kx-sales,.kx-toplist{display:flex;flex-direction:column;gap:.5rem;margin-top:.4rem}
.kx-sale{display:flex;align-items:center;justify-content:space-between;gap:.6rem;font-size:.88rem;padding:.4rem 0;border-bottom:1px solid var(--kx-line)}
.kx-sale:last-child{border-bottom:0}
.kx-topitem{display:flex;align-items:center;gap:.7rem;color:var(--kx-text)}
.kx-topitem .th{width:58px;height:36px;border-radius:7px;background:var(--kx-bg-3) center/cover no-repeat;flex:0 0 auto}
.kx-topitem b{font-size:.86rem;display:block}
.kx-topitem em{font-size:.74rem}
.kx-empty-sm{text-align:center;color:var(--kx-muted);padding:1.4rem 0;font-size:.86rem}
.kx-empty-sm svg{color:var(--kx-line);display:block;margin:0 auto .3rem}
.kx-boost-card{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:1.2rem}

/* ===== Page compte : entete + onglets ===== */
.kx-acc-head{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin:1rem 0 1.2rem}
.kx-acc-head img.kx-avatar{width:72px;height:72px}
.kx-acc-head h1{font-family:var(--kx-display);font-size:1.5rem;margin:0}
.kx-acc-tabs{display:flex;gap:.3rem;border-bottom:2px solid var(--kx-line);margin-bottom:1.2rem;flex-wrap:wrap}
.kx-acc-tabs button{display:flex;align-items:center;gap:.4rem;background:none;border:none;padding:.7rem 1rem;cursor:pointer;color:var(--kx-muted);font-weight:600;font-size:.92rem;border-bottom:2px solid transparent;margin-bottom:-2px}
.kx-acc-tabs button.on{color:var(--kx-primary);border-bottom-color:var(--kx-primary)}
.kx-acc-pane{display:none;animation:kxVfIn .35s ease}
.kx-acc-pane.active{display:block}

/* ===== Banniere "Devenir createur" ===== */
.kx-cta-banner{display:flex;align-items:center;gap:1.1rem;padding:1.2rem 1.4rem;border-radius:16px;margin-bottom:1.4rem;position:relative;overflow:hidden;color:#fff;background:linear-gradient(120deg,var(--kx-primary-d),var(--kx-primary) 60%,#b03a5b)}
.kx-cta-glow{position:absolute;inset:0;background:radial-gradient(circle at 80% -20%,rgba(255,255,255,.25),transparent 50%);pointer-events:none}
.kx-cta-ico{width:54px;height:54px;border-radius:14px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.kx-cta-txt{display:flex;flex-direction:column;gap:.15rem;z-index:1}
.kx-cta-txt b{font-family:var(--kx-display);font-size:1.15rem}
.kx-cta-txt em{font-style:normal;font-size:.88rem;opacity:.92}
.kx-cta-txt strong{color:#ffe08a}
.kx-cta-btn{margin-left:auto;background:#fff;color:var(--kx-primary);font-weight:700;padding:.6rem 1rem;border-radius:10px;display:flex;align-items:center;gap:.4rem;white-space:nowrap;z-index:1;flex:0 0 auto}
.kx-cta-banner:hover .kx-cta-btn{background:#ffe08a}

@media (max-width:860px){
  .kx-cr-side{position:fixed;left:0;top:var(--kx-nav-h);bottom:0;z-index:60;transform:translateX(-100%);transition:transform .25s;box-shadow:0 0 40px rgba(0,0,0,.2)}
  .kx-cr.open .kx-cr-side{transform:none}
  .kx-cr-burger{display:inline-flex;align-items:center;gap:.4rem;margin-bottom:1rem;background:var(--kx-bg-3);border:none;padding:.5rem .9rem;border-radius:10px;cursor:pointer;font-weight:600;color:var(--kx-text)}
  .kx-cr-grid2{grid-template-columns:1fr}
  .kx-cr-main{padding:1.2rem}
  .kx-cta-banner{flex-wrap:wrap}.kx-cta-btn{margin-left:0}
}

/* ===== Wizard de publication ===== */
.kx-wz{max-width:680px;margin:0 auto;position:relative}
.kx-wz-progress{height:4px;background:var(--kx-bg-3);border-radius:4px;overflow:hidden;margin-bottom:1.4rem}
.kx-wz-bar{display:block;height:100%;width:20%;background:linear-gradient(90deg,var(--kx-primary-d),var(--kx-primary));transition:width .45s cubic-bezier(.4,0,.2,1)}
.kx-wz-step{display:none;animation:kxVfIn .4s ease}
.kx-wz-step.active{display:block}
.kx-wz-step h2{font-family:var(--kx-display);margin:.2rem 0 .3rem}
.kx-wz-nav{display:flex;justify-content:space-between;gap:.8rem;margin-top:1.4rem}
.kx-wz-types{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.8rem;margin-top:1.2rem}
.kx-wz-type{display:flex;flex-direction:column;align-items:center;gap:.3rem;text-align:center;padding:1.4rem 1rem;border:2px solid var(--kx-line);border-radius:16px;background:var(--kx-bg);cursor:pointer;color:var(--kx-text);transition:.2s}
.kx-wz-type span{width:58px;height:58px;border-radius:15px;display:flex;align-items:center;justify-content:center;background:rgba(128,0,32,.08);color:var(--kx-primary)}
.kx-wz-type b{font-size:1rem}
.kx-wz-type em{font-style:normal;font-size:.76rem;color:var(--kx-muted)}
.kx-wz-type:hover,.kx-wz-type.on{border-color:var(--kx-primary);transform:translateY(-3px)}
.kx-wz-access{display:flex;flex-direction:column;gap:.6rem;margin:1rem 0}
.kx-wz-opt{cursor:pointer}
.kx-wz-opt input{position:absolute;opacity:0}
.kx-wz-opt span{display:flex;align-items:center;gap:.7rem;padding:.9rem 1.1rem;border:2px solid var(--kx-line);border-radius:13px;transition:.18s}
.kx-wz-opt span b{font-size:.96rem}
.kx-wz-opt span em{font-style:normal;font-size:.78rem;color:var(--kx-muted);margin-left:auto}
.kx-wz-opt span svg{color:var(--kx-primary)}
.kx-wz-opt input:checked+span{border-color:var(--kx-primary);background:rgba(128,0,32,.06)}

/* Overlay televersement */
.kx-up-overlay{position:fixed;inset:0;z-index:200;background:rgba(20,8,12,.72);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;animation:kxVfIn .3s ease}
.kx-up-overlay.show{display:flex}
.kx-up-box{background:var(--kx-bg);border-radius:20px;padding:2.2rem 2rem;text-align:center;max-width:380px;width:90%;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.kx-up-box h3{margin:.6rem 0 .2rem;font-family:var(--kx-display)}
.kx-up-anim{position:relative;width:84px;height:84px;margin:0 auto;display:flex;align-items:center;justify-content:center;color:var(--kx-primary)}
.kx-up-anim svg{animation:kxUpBob 1.4s ease-in-out infinite}
@keyframes kxUpBob{0%,100%{transform:translateY(3px)}50%{transform:translateY(-5px)}}
.kx-up-ring{position:absolute;inset:0;border:3px solid rgba(128,0,32,.18);border-top-color:var(--kx-primary);border-radius:50%;animation:kxspin 1s linear infinite}
.kx-up-box .kx-progress{margin-top:1.1rem}

/* ===== 2FA ===== */
.kx-codes{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.8rem}
.kx-codes code{background:var(--kx-bg-3);padding:.5rem;border-radius:8px;text-align:center;font-size:1rem;letter-spacing:.05em;font-family:ui-monospace,Menlo,Consolas,monospace}
.kx-key{display:inline-block;background:var(--kx-bg-3);padding:.5rem .8rem;border-radius:8px;font-size:1.05rem;letter-spacing:.08em;font-family:ui-monospace,Menlo,Consolas,monospace;margin-top:.3rem}

/* ===== Pagination (recherche) ===== */
.kx-pager{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;align-items:center;margin-top:1.6rem}
.kx-pg{display:inline-flex;align-items:center;gap:.25rem;min-width:38px;justify-content:center;padding:.5rem .7rem;border:1px solid var(--kx-line);border-radius:10px;color:var(--kx-text);font-weight:600;font-size:.9rem;transition:.15s}
.kx-pg:hover{border-color:var(--kx-primary);background:var(--kx-bg-3)}
.kx-pg.on{background:var(--kx-primary);border-color:var(--kx-primary);color:#fff}
.kx-pg-gap{color:var(--kx-muted);padding:0 .2rem}

/* Bouton "Visiter" sur la pub video pre-roll (embed) */
.kx-pre-cta{background:var(--kx-primary);color:#fff;text-decoration:none;border-radius:6px;padding:.4rem .8rem;font-size:.85rem;font-weight:600}
.kx-pre-cta:hover{background:var(--kx-primary-d)}