:root{--bg:#f3efff;--ink:#1b1033;--mute:#6a5f85;--card:#fff;--line:#ddd5f5;--v:#5b3df5;--p:#ff4f8b}
:root[data-theme=dark]{--bg:#150d2b;--ink:#f1ecff;--mute:#a79cc7;--card:#21163f;--line:#35285a}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]):not([data-theme=dark]){--bg:#150d2b;--ink:#f1ecff;--mute:#a79cc7;--card:#21163f;--line:#35285a}}
html[data-size=large]{font-size:112.5%}
html[data-motion=off] *,html[data-motion=off] *::before{animation:none!important;transition:none!important}
*{box-sizing:border-box}html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font:1rem/1.4 'DM Sans',system-ui,sans-serif;display:flex;flex-direction:column}
.logo{font-family:'Unbounded',sans-serif;font-weight:800;letter-spacing:-.03em}
button{font-family:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--v);outline-offset:2px}
input{width:100%;font:inherit;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--bg);color:var(--ink);margin-bottom:10px}
input[type=checkbox]{width:auto;margin:0 8px 0 0}
.pri{width:100%;padding:13px;border:0;border-radius:30px;background:var(--v);color:#fff;font-weight:600;font-size:15px}
.lk{background:none;border:0;color:var(--v);font-weight:600;margin-top:12px;padding:0}
.err{color:var(--p);font-size:14px;min-height:20px;margin:0 0 8px}.err.ok{color:#00b89c}
.ghost{width:100%;padding:11px;border-radius:14px;border:1px solid var(--line);background:none;color:var(--ink);margin-top:8px;font-weight:600}
a.ghost{display:block;text-align:center;text-decoration:none}.danger{color:var(--p)}
.legal{font-size:12px;color:var(--mute);margin:14px 0 0}.legal a{color:var(--v)}
.empty{color:var(--mute);margin:8px 0}
.sw{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}.sw button.cb{width:34px;height:34px;border-radius:50%;border:3px solid transparent;padding:0}.sw button.on{border-color:var(--ink)}
.sw input.cfree{width:34px;height:34px;padding:0;margin:0;border:2px solid var(--line);border-radius:50%;background:none;cursor:pointer}.sw .cdice{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--card);padding:0;font-size:17px}
.tc{font-size:13px;color:var(--mute);margin:0 0 12px}.tc a{color:var(--v)}
@keyframes bob{50%{translate:0 -9px}}

/* ---------- Accueil (déconnecté) ---------- */
#auth{flex:1;display:none;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;width:100%;max-width:1200px;margin:0 auto;padding:clamp(24px,5vw,64px);overflow:auto}
.hero{position:relative;min-width:0;min-height:340px;display:flex;flex-direction:column;justify-content:center}
.hero .logo{font-size:clamp(40px,7.2vw,96px);white-space:nowrap;line-height:1;margin:0;background:linear-gradient(120deg,var(--v),var(--p));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h2{font:800 clamp(24px,3.4vw,42px)/1.12 'Unbounded',sans-serif;letter-spacing:-.03em;margin:20px 0 12px}
.hero p{color:var(--mute);font-size:18px;max-width:440px;margin:0}
.hero .hero-lead b{color:var(--ink)}
.hero-l{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px;max-width:470px}.hero-l li{position:relative;padding-left:22px;color:var(--mute);font-size:15.5px;line-height:1.4}.hero-l li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,var(--v),var(--p))}.hero-l b{color:var(--ink)}
.dot{position:absolute;border-radius:50%;opacity:.22;pointer-events:none;animation:bob 6s ease-in-out infinite}
.d1{width:120px;height:120px;background:var(--v);top:0;right:8%}.d2{width:72px;height:72px;background:var(--p);bottom:4%;right:30%;animation-delay:-2s}.d3{width:54px;height:54px;background:#ffb800;top:42%;right:0;animation-delay:-4s}
.panel{width:min(400px,100%);justify-self:center}
.panel h3{font:800 clamp(24px,3vw,32px)/1.15 'Unbounded',sans-serif;letter-spacing:-.03em;margin:0 0 22px}
.panel h4{font-size:16px;margin:30px 0 4px}
.sb{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:13px;border-radius:30px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-weight:600;font-size:15px;margin-bottom:12px}
.sb:hover{border-color:var(--v)}
.or{display:flex;align-items:center;gap:12px;color:var(--mute);margin:6px 0 14px}.or::before,.or::after{content:'';flex:1;height:1px;background:var(--line)}

/* ---------- Application ---------- */
#app{flex:1;display:none;flex-direction:column;min-height:0}
.bar{position:relative;z-index:30;display:flex;align-items:center;gap:12px;padding:12px 20px}
.bar .logo{font-size:26px}
.nwrap{position:relative}
.nb{border:0;border-radius:30px;background:var(--ink);color:var(--bg);padding:10px 18px;font-weight:600;white-space:nowrap}
.npop{position:absolute;top:calc(100% + 10px);left:0;width:min(340px,86vw);display:none;gap:8px;padding:12px;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 14px 40px rgba(20,10,40,.25)}
.npop.on{display:flex}.npop input{margin:0}.npop button{border:0;border-radius:14px;background:var(--v);color:#fff;padding:0 16px;font-weight:600}
.search{display:flex;align-items:center;width:42px;height:42px;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:30px;transition:width .35s cubic-bezier(.4,0,.2,1),box-shadow .35s}
.search button{flex:none;width:40px;height:40px;border:0;background:none;color:var(--ink);display:grid;place-items:center}
.search input{flex:1;min-width:0;margin:0;padding:0 14px 0 0;border:0;background:none;opacity:0;transition:opacity .25s .1s}
.bar.sopen .search{width:min(300px,45vw);box-shadow:0 8px 28px rgba(91,61,245,.28)}.bar.sopen .search input{opacity:1}
.drop{position:absolute;left:0;right:0;top:100%;display:flex;align-items:center;gap:10px;padding:12px 20px;overflow-x:auto;
 background:color-mix(in srgb,var(--bg) 55%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-block:1px solid var(--line);
 opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .3s,transform .3s}
.bar.sopen .drop{opacity:1;transform:none;pointer-events:auto}
.drop .lab{flex:none;color:var(--mute);font-size:13px;white-space:nowrap}
.chip{flex:none;border:0;border-radius:12px;padding:8px 14px;color:var(--onc,#fff);font-weight:600;font-size:14px}
.mewrap{margin-left:auto;position:relative}.me{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:30px;padding:5px 14px 5px 5px;color:var(--ink);font-weight:600}
.av{width:30px;height:30px;border-radius:50%;display:inline-grid;place-items:center;color:#fff;font-weight:700;font-size:13px;background-size:cover;background-position:center;flex:none}.av.big{width:54px;height:54px}

.trend{padding:0 20px}.trend h2{margin:4px 0 0;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.tr{display:flex;gap:14px;overflow-x:auto;padding:14px 4px 18px}

.wrap{flex:1;display:flex;min-height:0}
#field{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:14px;padding:10px 0 26px}
.b{border:0;border-radius:50%;color:var(--onc,#fff);font-weight:600;display:grid;place-items:center;text-align:center;padding:12px;animation:bob 6s ease-in-out infinite;transition:transform .2s}
.b:hover{transform:scale(1.07)}.b small{display:block;font-weight:400;opacity:.9}
@media (prefers-reduced-motion:reduce){.b,.tcard,.dot,.echo.pop,.echo.pop *{animation:none}.echo.pop::after{animation:glow .7s ease-out forwards}.search,.drop{transition:none}}
aside{width:min(400px,100%);background:var(--card);border-left:1px solid var(--line);display:none;flex-direction:column;min-height:0}aside.on{display:flex}
.top{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:10px}.top h2{margin:0;font-size:19px}.top span{color:var(--mute);font-size:13px}
.x{background:none;border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:6px 10px}
#msgs{flex:1;overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
aside form{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}aside form input{margin:0}
aside form button{border:0;border-radius:14px;background:var(--v);color:#fff;padding:0 16px;font-weight:600}

/* ---------- Messages, like, fil média ---------- */
.m{display:grid;grid-template-columns:36px 1fr;gap:10px;transition:opacity 1s}
.mav{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:15px;background-size:cover;background-position:center;flex:none}
.m .bd{min-width:0}.m .nm{display:flex;align-items:baseline;gap:6px;font-size:13px}.m .nm small{color:var(--mute)}
.m p{margin:2px 0 8px;overflow-wrap:anywhere}.m .act{display:flex;align-items:center;gap:8px}
.echo{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:5px 12px;background:none;color:var(--mute);font-weight:600;font-size:13px;transition:background .2s,color .2s,border-color .2s}
.echo svg,.fl svg{width:16px;height:16px}.echo:hover{border-color:var(--v);color:var(--v)}
.echo.on{background:linear-gradient(120deg,var(--v),var(--p));border-color:transparent;color:#fff}.echo.on .bb{fill:currentColor}.echo.ro{cursor:default}.echo.ro:hover{border-color:var(--line);color:var(--mute)}
.echo{position:relative}.echo svg *{transform-box:fill-box}
.echo.pop{animation:pop .35s}@keyframes pop{50%{transform:scale(1.18)}}
.echo.pop .bb{animation:thump .4s ease-out}.echo.pop .a1{animation:wave .5s .08s ease-out both}.echo.pop .a2{animation:wave .5s .22s ease-out both}
.echo.pop::after{content:'';position:absolute;inset:-1px;border-radius:999px;border:2px solid var(--p);pointer-events:none;animation:ring .6s ease-out forwards}
@keyframes wave{from{opacity:0;transform:translateX(-5px)}to{opacity:1;transform:none}}@keyframes thump{40%{transform:scale(1.35)}}@keyframes ring{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.5,1.9)}}
.fls{margin-left:auto;display:flex;gap:2px}.fl{background:none;border:0;color:var(--mute);padding:5px;border-radius:8px}.fl:hover{color:var(--p)}
.post{border:1px solid var(--line);border-radius:18px;padding:14px;background:var(--bg);cursor:pointer;transition:border-color .2s}.post:hover,.post:focus-visible{border-color:var(--v)}
.post p{margin:0 0 8px;font-weight:600;overflow-wrap:anywhere}.post small{color:var(--mute)}.post a{display:block;margin:0 0 8px;color:var(--v);font-size:13px;overflow-wrap:anywhere}
.mchip{flex:none;display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);padding:6px 16px 6px 6px;font-weight:600}
.mchip:hover{border-color:var(--v)}.mchip .mav{width:30px;height:30px;font-size:13px}.mchip small{color:var(--mute);font-weight:400}
.mdr{align-items:center;padding:8px 4px 14px}
.lbl{margin:16px 0 4px;font-size:13px;color:var(--mute)}.sub{color:var(--mute);margin:0 0 14px}
#pf{flex-direction:column;align-items:stretch}#pf button{padding:11px}
.search .sx{display:none;flex:none;width:30px;height:30px;margin-right:6px;border:0;border-radius:50%;background:var(--line);color:var(--ink);font-size:18px;line-height:1;place-items:center}
.search .sx:hover{background:var(--v);color:#fff}
.chip.add{background:var(--ink);color:var(--bg)}

/* ---------- Menu du compte, réglages, alertes ---------- */
.menu{position:absolute;right:0;top:calc(100% + 10px);width:250px;display:none;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:8px;box-shadow:0 14px 40px rgba(20,10,40,.25);z-index:50}.menu.on{display:flex}
.menu button,.menu a{display:block;text-align:left;border:0;background:none;color:var(--ink);padding:11px 12px;border-radius:12px;font:inherit;font-weight:600;text-decoration:none}
.menu button:hover,.menu a:hover{background:var(--bg)}.menu .dg{color:var(--p)}
.mhead{display:flex;align-items:center;gap:10px;padding:8px 10px 12px;margin-bottom:6px;border-bottom:1px solid var(--line)}.mhead small{display:block;color:var(--mute)}.av.big{width:44px;height:44px;font-size:18px}
.card2{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:18px 20px;margin:0 0 16px}.card2 h3{margin:0 0 6px;font-size:17px}.card2>p{color:var(--mute);margin:4px 0 12px}
.srow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid var(--line)}.card2>h3+.srow,.card2>.srow:first-child{border-top:0}
.sl{display:flex;flex-direction:column;min-width:0;flex:1}.sl small{color:var(--mute)}.srow .mav{margin-right:-4px}
.sbtn{flex:none;border:0;border-radius:999px;background:var(--v);color:#fff;padding:9px 18px;font-weight:600;text-decoration:none;font-size:14px}.sbtn.ghost2{background:none;border:1px solid var(--line);color:var(--ink)}.sbtn.dg{background:var(--p)}.sbtn:disabled{opacity:.5}
.tg2{flex:none;width:46px;height:26px;border-radius:999px;border:0;background:var(--line);position:relative}.tg2 i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s}.tg2.on{background:var(--v)}.tg2.on i{transform:translateX(20px)}
.seg{display:flex;flex:none;border:1px solid var(--line);border-radius:999px;overflow:hidden}.seg button{border:0;background:none;color:var(--ink);padding:7px 14px;font-weight:600}.seg button.on{background:var(--v);color:#fff}
.bigav{width:96px;height:96px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font:800 36px 'Unbounded',sans-serif;background-size:cover;background-position:center}
.phead{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.pbtns{display:flex;gap:8px;flex-wrap:wrap}
.form2{display:grid;gap:10px;margin-top:10px}.form2 input{margin:0}.form2 .sbtn{justify-self:start}
.catgrid{display:grid;grid-template-columns:1fr;gap:10px}.cat{text-align:left;border:2px solid var(--line);border-radius:18px;background:none;color:var(--ink);padding:14px}.cat.on{border-color:var(--v);background:color-mix(in srgb,var(--v) 10%,transparent)}.cat b{display:block}.cat small{color:var(--mute)}
.chips2{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.chips2 button{border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink);padding:5px 12px}
.stat3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.stat3 div{background:var(--bg);border-radius:14px;padding:10px;text-align:center}.stat3 b{font:800 22px 'Unbounded',sans-serif;display:block}.stat3 span{font-size:12px;color:var(--mute)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:90;max-width:90vw;background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:999px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.3);animation:rise .3s}
.toast.bad{background:var(--p);color:#fff}.toast.out{opacity:0;transition:opacity .5s}@keyframes rise{from{opacity:0;transform:translate(-50%,10px)}}

/* ---------- Modération ---------- */
.adm{max-width:720px;margin:40px auto;padding:0 20px}.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;margin:12px 0}
.card button{margin:6px 8px 0 0;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:none;color:var(--ink)}

@media (max-width:860px){#auth{grid-template-columns:1fr;gap:28px}.hero{min-height:0}.hero .logo{font-size:min(14.6vw,76px)}}
@media (max-width:760px){.wrap{flex-direction:column}aside{position:fixed;inset:22% 0 0 0;border-left:0;border-top:1px solid var(--line);border-radius:22px 22px 0 0;z-index:40}}
@media (max-width:520px){.bar{gap:8px;padding:10px 14px}.me #mn{display:none}.me{padding:5px}.nb{padding:10px 14px}}
/* ---------- Tendances 24 h : classement « en direct » (distinct des bulles de sujets) ---------- */
.trend h2{display:flex;align-items:center;gap:8px}.trend h2::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--p);animation:live 1.6s ease-out infinite}
@keyframes live{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--p) 60%,transparent)}100%{box-shadow:0 0 0 9px transparent}}
.tcard{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-areas:'rk tt' 'rk ts' 'bar bar';column-gap:12px;align-items:center;width:100%;min-width:0;text-align:left;
 padding:12px 14px 14px;border:1px solid var(--line);border-radius:18px;background:var(--card);color:var(--ink);overflow:hidden;transition:transform .2s,border-color .2s}
.tcard:hover{transform:translateY(-2px);border-color:var(--c)}
.tcard .rk{grid-area:rk;font:800 28px/1 'Unbounded',sans-serif;font-style:normal;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px var(--c)}
.tcard .tt{grid-area:tt;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tcard .ts{grid-area:ts;color:var(--mute)}
.tcard .mtr{grid-area:bar;display:block;height:4px;margin-top:10px;border-radius:4px;background:var(--line);position:relative}
.tcard .mtr::after{content:'';position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:4px;background:linear-gradient(90deg,var(--c),var(--p));animation:grow .8s ease-out}
@keyframes grow{from{width:0}}
@media (max-width:760px){.tr{grid-template-columns:1fr;gap:8px}.tcard{padding:10px 14px 12px}.tcard .rk{font-size:24px}}

/* ---------- Photos, GIF, liens, badge, message d'information ---------- */
.rbadge{display:inline-grid;vertical-align:-3px;margin-left:4px}.rbadge svg{width:16px;height:16px}
.mhead .rbadge svg{width:18px;height:18px}
.ln{color:var(--v);font-weight:600;text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--v) 40%,transparent)}.ln:hover{border-bottom-color:var(--v)}
.m .pic{display:block;max-width:100%;max-height:260px;border-radius:14px;margin:4px 0 8px;cursor:zoom-in;background:var(--bg)}
.m .sthumb{display:block;width:44px;height:58px;object-fit:cover;border-radius:8px;margin:2px 0 5px;background:var(--bg)}
.lightbox{position:fixed;inset:0;z-index:99;display:grid;place-items:center;padding:16px;background:rgba(10,5,25,.85);cursor:zoom-out;animation:fade .2s}.lightbox img{max-width:100%;max-height:92dvh;border-radius:14px}
.att{flex:none;border:1px solid var(--line);border-radius:14px;background:none;color:var(--mute);width:44px;display:grid;place-items:center;padding:0}.att:hover{color:var(--v);border-color:var(--v)}
aside form{position:relative}.cnt{display:none;position:absolute;right:86px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--mute)}.cnt.warn{color:#e08a00}.cnt.over{color:var(--p);font-weight:700}
.pv{display:none;align-items:center;gap:10px;padding:8px 16px 0}.pv img{height:56px;border-radius:10px}.pv button{border:0;background:var(--line);color:var(--ink);border-radius:50%;width:26px;height:26px}
.hintbar{margin:0 16px;padding:0 14px;max-height:0;overflow:hidden;opacity:0;border-radius:12px;background:color-mix(in srgb,var(--v) 12%,transparent);color:var(--ink);font-size:13px}
.hintbar.show{animation:hint 5.5s ease both}
@keyframes hint{0%{max-height:0;opacity:0;padding:0 14px;margin-top:0}10%,80%{max-height:80px;opacity:1;padding:10px 14px;margin-top:10px}100%{max-height:0;opacity:0;padding:0 14px;margin-top:0}}
.mrow.quiet{background:none;border-style:dashed;margin-top:10px;font-size:14px;opacity:.75}
.arch{display:grid;grid-template-columns:36px 1fr;gap:10px;padding:12px 0;border-top:1px solid var(--line)}.arch p{margin:2px 0 6px;overflow-wrap:anywhere}.arch small{color:var(--mute);margin-left:6px}
@keyframes fade{from{opacity:0}}

/* ---------- Panneau de réglages (encadré vertical) ---------- */
.sheet{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(15,8,35,.55)}.sheet.on{display:flex;animation:fade .25s ease;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.panel2{width:min(440px,100%);max-height:min(740px,92dvh);display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:26px;overflow:hidden;box-shadow:0 24px 70px rgba(10,5,25,.45)}
.p2-head{display:flex;align-items:center;gap:10px;padding:16px 16px 10px}.p2-head h2{flex:1;margin:0;font:800 18px 'Unbounded',sans-serif;letter-spacing:-.03em}
.p2-head .x{width:36px;height:36px;padding:0;border-radius:50%;font-size:18px;line-height:1}
.sheet.on .panel2{animation:sheetIn .38s cubic-bezier(.2,.8,.2,1)}@keyframes sheetIn{from{opacity:0;transform:translateY(18px) scale(.97)}}
.p2-body>*{animation:rise2 .35s cubic-bezier(.2,.8,.2,1) both}.p2-body>:nth-child(2){animation-delay:.04s}.p2-body>:nth-child(3){animation-delay:.08s}.p2-body>:nth-child(n+4){animation-delay:.12s}@keyframes rise2{from{opacity:0;transform:translateY(10px)}}
.p2-body{flex:1;overflow:auto;padding:4px 16px 20px;scrollbar-width:thin}
.menulist{display:flex;flex-direction:column;gap:8px}
.mrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1px solid var(--line);border-radius:18px;background:var(--card);color:var(--ink);padding:14px 16px;text-decoration:none;font:inherit}
.mrow:hover{border-color:var(--v)}.ml{display:flex;flex-direction:column;flex:1;min-width:0}.ml small{color:var(--mute)}.chev{font-size:22px;color:var(--mute)}
.cropov{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:16px;background:rgba(10,5,25,.7)}
.cropbox{width:min(340px,100%);background:var(--card);border-radius:22px;padding:18px;text-align:center}.cropbox h3{margin:0 0 4px}.cropbox p{color:var(--mute);margin:0 0 6px;font-size:14px}
.crop{position:relative;width:280px;height:280px;margin:12px auto;overflow:hidden;border-radius:16px;max-width:100%}
.crop::after{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 400px rgba(10,5,25,.55);pointer-events:none}
.cropcv{display:block;width:280px;height:280px;touch-action:none;cursor:grab}.cropbox input[type=range]{width:100%;padding:0;border:0;background:none;margin:4px 0 12px;box-shadow:none}.cropbox .pbtns{justify-content:center}
.ta{width:100%;font:inherit;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--bg);color:var(--ink);resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.qr{display:block;margin:10px auto;border-radius:12px;background:#fff;padding:6px}.mono{font-family:ui-monospace,monospace;word-break:break-all;font-size:13px}
.codes{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px;font:14px/1.7 ui-monospace,monospace;margin:10px 0}
@media (max-width:520px){@keyframes sheetIn{from{transform:translateY(100%)}}.sheet{align-items:flex-end;padding:0}.panel2{width:100%;max-height:92dvh;border-radius:26px 26px 0 0}}
@keyframes glow{from{opacity:.9;box-shadow:0 0 0 0 var(--p)}to{opacity:0;box-shadow:0 0 0 9px transparent}}

/* ---------- Champs et recherche ---------- */
input:focus,.ta:focus{outline:none;border-color:var(--v);box-shadow:0 0 0 4px color-mix(in srgb,var(--v) 16%,transparent)}
.search input,.search input:focus{outline:none;box-shadow:none;border:0;background:none;-webkit-appearance:none;appearance:none}
.search input::-webkit-search-cancel-button,.search input::-webkit-search-decoration{-webkit-appearance:none;display:none}
.search:focus-within,.bar.sopen .search:focus-within{border-color:var(--v);box-shadow:0 0 0 4px color-mix(in srgb,var(--v) 16%,transparent)}
.bar.sopen .search{box-shadow:none}
.drop,.tr{scrollbar-width:none}.drop::-webkit-scrollbar{display:none}

/* ---------- Tendances 24 h et espaces pros : sans barre de défilement ---------- */
.tr{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;padding:12px 0 16px;overflow:visible}
.tr.mdr{display:flex;flex-wrap:wrap;gap:10px;padding:8px 0 14px}


/* ---------- Mobile : une seule page qui défile naturellement ---------- */
@media (max-width:760px){
 html,body{height:auto;min-height:100%}body{min-height:100dvh}#app{min-height:100dvh}
 .wrap{display:block;flex:none}#field{overflow:visible;padding:8px 14px 90px}.trend{padding:0 14px}
 aside{position:fixed;inset:auto 0 0 0;width:100%;height:88dvh;border:0;border-radius:24px 24px 0 0;box-shadow:0 -12px 40px rgba(10,5,25,.35);z-index:40}
 .drop{flex-wrap:wrap;max-height:55dvh;overflow-y:auto}
}
a.ghost.hid,.hid{display:none}

/* ---------- Tendances : un « projecteur » qui change en fondu + la liste des 15 ---------- */
@property --c{syntax:'<color>';inherits:true;initial-value:#5b3df5}
#trsec{padding:8px 20px 4px}#trsec.hid{display:none}
.tspot{--c:#5b3df5;position:relative;display:flex;align-items:center;gap:14px;padding:12px 14px 14px 12px;border:1px solid var(--line);border-radius:22px;overflow:hidden;
 background:linear-gradient(100deg,color-mix(in srgb,var(--c) 15%,var(--card)),var(--card) 70%);transition:--c .9s ease,border-color .9s ease;border-color:color-mix(in srgb,var(--c) 30%,var(--line))}
.tfl{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;color:#fff;background:linear-gradient(145deg,#ff4f8b,#ff8a1a);box-shadow:0 6px 18px color-mix(in srgb,#ff6a3a 45%,transparent)}
.tfl svg{transform-origin:50% 90%;animation:flick 2.2s ease-in-out infinite}
@keyframes flick{0%,100%{transform:scale(1) rotate(-2deg)}30%{transform:scale(1.08,1.14) rotate(3deg)}60%{transform:scale(.97,1.05) rotate(-3deg)}}
.tstage{position:relative;flex:1;min-width:0;height:58px}
.tslide{position:absolute;inset:0;display:flex;align-items:center;gap:14px;border:0;background:none;color:var(--ink);text-align:left;padding:0;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.tslide.on{opacity:1;transform:none;pointer-events:auto}
.tslide .rk{flex:none;font:800 38px/1 'Unbounded',sans-serif;font-style:normal;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.6px var(--c);min-width:32px}
.tslide .tx{display:flex;flex-direction:column;min-width:0;gap:2px}.tslide .tx b{font-size:21px;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tslide .tx small{font-size:13px;color:var(--mute)}
.tslide .heat{flex:none;margin-left:auto;width:120px;height:6px;border-radius:6px;background:var(--line);overflow:hidden}.tslide .heat i{display:block;height:100%;width:var(--w);border-radius:6px;background:linear-gradient(90deg,var(--c),var(--p))}
.tcount{flex:none;font-size:12px;font-weight:700;color:var(--mute);letter-spacing:.04em}
.tbtn{flex:none;border:1px solid var(--line);background:var(--card);color:var(--ink);width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:18px;line-height:1;transition:transform .2s}.tbtn:hover{transform:scale(1.08)}
.tmore{display:none}#trsec.open .tmore svg{transform:rotate(180deg)}
.tprog{position:absolute;left:0;right:0;bottom:0;height:3px;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--c),var(--p))}
.tprog.run{animation:tprog 5.5s linear forwards}@keyframes tprog{to{transform:scaleX(1)}}
#trsec:hover .tprog.run,#trsec:focus-within .tprog.run{animation-play-state:paused}
.tpills{display:flex;flex-wrap:wrap;gap:6px;padding:10px 2px 2px}
.tpill{display:inline-flex;align-items:center;gap:7px;max-width:210px;padding:5px 13px 5px 5px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:13px;font-weight:600;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:border-color .3s,box-shadow .3s,transform .2s}
.tpill i{flex:none;font-style:normal;font-size:11px;min-width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:var(--onc,#fff)}
.tpill.on{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 20%,transparent)}.tpill:hover{transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.tfl svg{animation:none}.tslide{transition:opacity .3s}}
@media (max-width:760px){#trsec{padding:6px 14px 2px}.tspot{gap:10px;padding:8px 10px 10px 8px;border-radius:18px}.tfl{width:40px;height:40px}.tfl svg{width:19px;height:19px}.tstage{height:46px}
 .tslide{gap:10px}.tslide .rk{font-size:28px;min-width:24px}.tslide .tx b{font-size:16px}.tslide .tx small{font-size:12px}.tslide .heat,.tnext{display:none}.tmore{display:grid}
 .tpills{display:none}#trsec.open .tpills{display:flex}.tpill{max-width:48%}}

/* ---------- Médias certifiés : tuiles carrées, sans titre ---------- */
#prsec{padding:2px 20px 6px}
body.inloop #prsec{display:none} /* Loop : pas de bandeau Médias par-dessus les vidéos */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px}
.tile{position:relative;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:10px 6px;border:1px solid var(--line);border-radius:18px;background:var(--card);color:var(--ink);transition:transform .2s,border-color .2s,box-shadow .2s}
.tile:hover{transform:translateY(-3px);border-color:var(--v);box-shadow:0 10px 24px rgba(20,10,60,.12)}
.tile .tav{width:42px;height:42px;font-size:17px;border-radius:12px}
.tile b{font-size:12px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile .nw{position:absolute;top:9px;right:9px;width:9px;height:9px;border-radius:50%;background:var(--p);box-shadow:0 0 0 3px var(--card)}
@media (max-width:760px){#prsec{padding:2px 14px 6px}.tiles{grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:8px}.tile{border-radius:14px}.tile .tav{width:34px;height:34px}.tile{padding:8px 4px}}

/* ---------- Horloge à côté du pseudo, archives, toast cliquable ---------- */
small.tl{display:inline-flex;align-items:center;gap:3px;margin-left:8px;padding:1px 7px;border-radius:999px;background:color-mix(in srgb,var(--v) 12%,transparent);color:var(--v);font-size:11px;font-weight:600;cursor:help}
.chip.arch{display:inline-flex;align-items:center;gap:8px;background:var(--card);color:var(--ink);border:1px dashed var(--mute)}
.chip.arch em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:999px;background:var(--line);color:var(--mute)}
.svgdef{position:absolute;width:0;height:0}

/* ---------- Onglets de chats, favoris, profil latéral, hashtags ---------- */
@media (min-width:761px){aside{position:relative}}
aside{overflow:hidden}
.tabs{display:flex;gap:6px;padding:8px 12px 0;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line)}.tabs::-webkit-scrollbar{display:none}.tabs.hid{display:none}
.tab{flex:none;display:flex;align-items:center;gap:6px;max-width:150px;padding:7px 6px 7px 12px;border-radius:12px 12px 0 0;border:1px solid var(--line);border-bottom:0;border-top:3px solid var(--c);background:var(--bg);color:var(--mute);font-size:13px;font-weight:600;cursor:pointer;position:relative;top:1px}
.tab.on{background:var(--card);color:var(--ink)}.tab .tt2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tab .ud{width:8px;height:8px;border-radius:50%;background:var(--p);flex:none;animation:live 1.6s ease-out infinite}
.tab .tx{border:0;background:none;color:inherit;font-size:11px;padding:2px 5px;border-radius:6px;opacity:.6}.tab .tx:hover{opacity:1;background:var(--line)}
.x.star{display:inline-flex;align-items:center;justify-content:center;padding:6px 9px}.x.star.on{color:#f5a300;border-color:#f5a300}.x.star.on svg{fill:currentColor}.x.star.hid{display:none}
.favs{display:flex;flex-wrap:wrap;gap:8px;padding:2px 20px 6px}.favs.hid{display:none}
.fav{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-left:3px solid var(--c);border-radius:999px;background:var(--card);color:var(--ink);padding:6px 14px 6px 10px;font-weight:600;font-size:13px}.fav svg{color:#f5a300}.fav:hover{border-color:var(--c)}
@media (max-width:760px){.favs{padding:2px 14px 6px}}
.who{cursor:pointer}.who:hover{text-decoration:underline}.mav.tap{cursor:pointer;transition:transform .15s}.mav.tap:hover{transform:scale(1.08)}
.pcard{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;background:var(--card);transform:translateX(102%);visibility:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s .3s}
.pcard.on{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.pc-top{padding:12px 16px;border-bottom:1px solid var(--line)}.pc-body{flex:1;overflow:auto;padding:22px 20px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.pc-head{display:flex;flex-direction:column;align-items:center;gap:10px}.pc-head h3{margin:0;font-size:20px;display:flex;align-items:center;gap:6px}
.pc-av{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;color:#fff;font:800 36px 'Unbounded',sans-serif;background-size:cover;background-position:center;box-shadow:0 8px 24px rgba(20,10,60,.2)}
.pc-role{font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--v) 12%,transparent);color:var(--v)}
.pc-bio{margin:0;max-width:300px;overflow-wrap:anywhere}.pc-bio.none{color:var(--mute);font-style:italic}.pc-since{margin:0;color:var(--mute);font-size:13px}
.pc-stats{display:flex;gap:12px;width:100%}.pc-stats div{flex:1;display:flex;flex-direction:column;padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}.pc-stats b{font-size:20px}.pc-stats span{font-size:12px;color:var(--mute)}
.pc-tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.pc-act{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:auto}
.pc-btn{border:0;border-radius:14px;background:var(--v);color:#fff;padding:12px;font-weight:600}.pc-btn.ghost{background:none;border:1px solid var(--line);color:var(--ink)}
a.ht{color:var(--v);font-weight:600;text-decoration:none;border-radius:6px}a.ht:hover{text-decoration:underline}.pc-tags a.ht{padding:3px 10px;background:color-mix(in srgb,var(--v) 10%,transparent);border-radius:999px}
.chip.ht2{background:color-mix(in srgb,var(--v) 14%,transparent);color:var(--v)}
a.ln{position:relative;z-index:1;cursor:pointer;word-break:break-all}

/* ---------- Mobile : chat en superposition, repliable d'un clic sur la flèche ---------- */
.chev{display:none;align-items:center;justify-content:center;padding:6px 9px}.chev svg{transition:transform .3s}
@media (max-width:760px){
 .chev{display:inline-flex}
 aside{transition:transform .38s cubic-bezier(.2,.8,.2,1)}aside.on{animation:asideUp .38s cubic-bezier(.2,.8,.2,1)}
 aside.min{transform:translateY(calc(88dvh - 76px));box-shadow:0 -6px 24px rgba(10,5,25,.25)}aside.min .chev svg{transform:rotate(180deg)}aside.min .top{cursor:pointer}
 aside.min .tabs,aside.min #msgs,aside.min #mf,aside.min .hintbar{pointer-events:none}
}
@keyframes asideUp{from{transform:translateY(60px);opacity:0}}
.me{position:relative}.pdot{position:absolute;top:2px;left:30px;width:11px;height:11px;border-radius:50%;background:var(--p);border:2px solid var(--card)}.pdot.hid{display:none}
.cnt2{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;margin-left:6px;border-radius:999px;background:var(--p);color:#fff;font-size:11px;font-weight:700}.cnt2.hid{display:none}
.crow{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}.crow:first-of-type{border-top:0}.crow .ctx{flex:1;min-width:0;display:flex;flex-direction:column}.crow .ctx b{display:flex;align-items:center;gap:6px}.crow .ctx small{color:var(--mute)}
.crow .cbtn{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.muted{color:var(--mute);margin:4px 0}
@media (max-width:760px){aside .top{gap:8px}aside .top>div:last-child{display:flex;flex-wrap:nowrap;gap:6px;align-items:flex-start;flex:none}aside .top>div:first-child{min-width:0;flex:1}aside .top h2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}

/* ---------- Tendances : bandeau à flamme (mobile) et courbe d'activité (bureau) ---------- */
.mtick{display:none;align-items:center;gap:10px;padding:2px 0}
.mfl{flex:none;position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:#fff;background:linear-gradient(145deg,#ff4f8b,#ff8a1a);box-shadow:0 4px 12px color-mix(in srgb,#ff6a3a 40%,transparent)}
.mfl svg{transform-origin:50% 90%;animation:flick 2.2s ease-in-out infinite}.mfl i{position:absolute;top:-1px;right:-1px;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--p);animation:live 1.6s ease-out infinite}
.mtr{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 28px),transparent)}
.mtrack{display:flex;gap:10px;width:max-content;animation:tick 40s linear infinite}.mtrack.still{animation:none}.mtr:active .mtrack{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
.mtk{flex:none;display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-left:3px solid var(--c);border-radius:999px;background:var(--card);color:var(--ink);padding:7px 14px 7px 10px;font-size:14px}
.mtk .rk{font:800 13px/1 'Unbounded',sans-serif;font-style:normal;color:var(--c)}.mtk b{font-weight:600;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mtk small{display:inline-flex;align-items:center;gap:4px;color:var(--mute)}
@media (prefers-reduced-motion:reduce){.mtrack{animation:none}.mtr{overflow-x:auto}.mfl svg,.mfl i{animation:none}}
@media (max-width:760px){.mtick{display:flex}.tspot,.tpills{display:none}#trsec{padding:8px 14px 4px}}
.tslide .spark{flex:none;margin-left:auto;display:flex;align-items:flex-end;gap:3px;height:34px;padding-right:4px}
.tslide .spark i{display:block;width:7px;height:var(--h);min-height:3px;border-radius:3px;background:var(--line)}
.tslide .spark i.on{background:linear-gradient(180deg,var(--c),var(--p));transform-origin:bottom}
.tslide.on .spark i{animation:barUp .7s cubic-bezier(.2,.8,.2,1) both}.tslide.on .spark i:nth-child(2){animation-delay:.04s}.tslide.on .spark i:nth-child(3){animation-delay:.08s}.tslide.on .spark i:nth-child(4){animation-delay:.12s}.tslide.on .spark i:nth-child(5){animation-delay:.16s}.tslide.on .spark i:nth-child(6){animation-delay:.2s}.tslide.on .spark i:nth-child(7){animation-delay:.24s}.tslide.on .spark i:nth-child(8){animation-delay:.28s}.tslide.on .spark i:nth-child(9){animation-delay:.32s}.tslide.on .spark i:nth-child(10){animation-delay:.36s}.tslide.on .spark i:nth-child(11){animation-delay:.4s}.tslide.on .spark i:nth-child(12){animation-delay:.44s}
@keyframes barUp{from{transform:scaleY(.05);opacity:0}}
.hotc{flex:none;align-self:center;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;color:#fff;background:linear-gradient(90deg,var(--p),#ff8a1a);white-space:nowrap}
/* ---------- Chat : réponses, « écrit… », emojis, nouveaux messages ---------- */
.quote{display:flex;flex-direction:column;align-items:flex-start;max-width:100%;text-align:left;border:0;border-left:3px solid var(--v);border-radius:8px;background:color-mix(in srgb,var(--v) 9%,transparent);color:var(--ink);padding:5px 10px;margin:2px 0 4px;font-size:12.5px;cursor:pointer}
.quote b{color:var(--v);font-size:12px}.quote span{color:var(--mute);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m.flash .bd{animation:flashbg 1.4s ease-out}@keyframes flashbg{0%{background:color-mix(in srgb,var(--v) 22%,transparent);border-radius:12px}100%{background:transparent}}
.rpl{display:flex;align-items:center;gap:8px;margin:0 16px;padding:7px 10px;border-radius:12px 12px 0 0;border-left:3px solid var(--v);background:color-mix(in srgb,var(--v) 10%,transparent);font-size:13px}.rpl.hid{display:none}
.rpl .rtx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mute)}.rpl .rtx b{color:var(--v);margin-right:4px}.rpl button{border:0;background:none;color:var(--mute);font-size:14px}
.typ{padding:4px 18px 6px;font-size:12.5px;color:var(--mute);display:flex;align-items:center;gap:8px}.typ.hid{display:none}
.dots{display:inline-flex;gap:3px}.dots i{width:5px;height:5px;border-radius:50%;background:var(--mute);animation:dotb 1.2s ease-in-out infinite}.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dotb{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.jump{position:absolute;left:50%;bottom:84px;transform:translateX(-50%);z-index:5;border:0;border-radius:999px;background:var(--v);color:#fff;padding:8px 16px;font-weight:600;font-size:13px;box-shadow:0 8px 22px rgba(20,10,60,.3);animation:rise .25s}.jump.hid{display:none}
.emo{position:absolute;left:12px;bottom:70px;z-index:7;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:8px;border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:0 12px 32px rgba(20,10,60,.25);animation:rise .2s}.emo.hid{display:none}
.emo button{border:0;background:none;font-size:20px;padding:5px;border-radius:8px}.emo button:hover{background:var(--bg)}
@media (max-width:760px){.emo{grid-template-columns:repeat(8,1fr);left:8px;right:8px}}

/* ---------- Pseudo, mot de passe, couleurs, présence ---------- */
.ph{display:block;min-height:0;margin:-4px 4px 8px;font-size:13px;color:var(--mute)}.ph:empty{display:none}.ph.ok{color:#0a8f6a}.ph.no{color:#d02a52}
.pwx{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-4px 4px 10px;font-size:13px}.lnk{background:none;border:0;padding:0;color:var(--v);font:inherit;font-weight:600;text-decoration:underline;cursor:pointer}
.pws{font-weight:700}.pws.s0,.pws.s1{color:#d02a52}.pws.s2{color:#c77700}.pws.s3{color:#0a8f6a}
.nmod{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:rgba(20,10,45,.6);backdrop-filter:blur(6px)}
.nbox{width:min(420px,100%);background:var(--card);border-radius:22px;padding:24px;box-shadow:0 24px 70px rgba(10,5,25,.45)}.nbox h3{margin:0 0 6px;font-size:22px}.nbox p{margin:0 0 14px;color:var(--mute);font-size:14px}.nbox .pri{width:100%}.nerr{color:#d02a52!important;margin:0 0 10px!important;min-height:0}.nerr:empty{display:none}
.warn{margin:0 0 10px;padding:10px 12px;border-radius:12px;background:#fff6e0;color:#7a5200;font-size:13px}
.onl{display:none;justify-content:flex-end;padding:6px 4px 0;font-size:12px;font-weight:600;color:#0a8f6a}.onl.on{display:flex}
.men{font-weight:700;color:var(--v);background:color-mix(in srgb,var(--v) 10%,transparent);border-radius:6px;padding:0 3px}
@media (max-width:760px){
 /* bulles vraiment au centre de la page, sous l'en-tête et les tendances */
 .wrap{display:flex;flex:1 0 auto}
 #field{flex:1;align-content:center;min-height:52dvh;padding:12px 14px 44px}
}
.sw input.cfree::-webkit-color-swatch-wrapper{padding:0}.sw input.cfree::-webkit-color-swatch{border:0;border-radius:50%}.sw input.cfree::-moz-color-swatch{border:0;border-radius:50%}

/* ---------- Réseau social : menu de gauche, fil « En direct », colonne de droite, notifications, onglets mobiles ---------- */
:root{--rail:248px;--tb:0px}
.rail,.tabbar{display:none}.rcol{display:none}
.col{flex:1;min-width:0;overflow:auto;padding:0 20px 40px}.col>*{max-width:780px;margin-inline:auto}
.sh{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-block:16px 4px}.sh h2{margin:0;display:flex;align-items:center;gap:8px;font:800 15px 'Unbounded',sans-serif;letter-spacing:-.02em}.sh small{color:var(--mute);font-size:13px}
.livedot{width:9px;height:9px;border-radius:50%;background:var(--p);animation:livepulse 1.8s ease-out infinite}
@keyframes livepulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--p) 60%,transparent)}70%,100%{box-shadow:0 0 0 9px transparent}}
#feed{display:flex;flex-direction:column;gap:12px;padding:8px 0}
.fcard{--c:var(--v);display:grid;grid-template-columns:46px 1fr;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:20px;background:var(--card);cursor:pointer;transition:border-color .2s,box-shadow .2s}
.fcard:hover,.fcard:focus-visible{border-color:color-mix(in srgb,var(--c) 55%,var(--line));box-shadow:0 8px 26px rgba(20,10,60,.08)}
.fcard>.mav{width:46px;height:46px;font-size:19px}
.fbd{min-width:0}.fh{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:13px}.fh b{font-size:15px}.fh .when{color:var(--mute)}.fh small.tl{margin-left:0}
.ftopic{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:2px 10px 2px 8px;border:0;border-radius:999px;background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--ink);font-weight:600;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ftopic::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:var(--c)}.ftopic:hover{background:color-mix(in srgb,var(--c) 26%,transparent)}
.fbody{margin:5px 0 9px;font-size:15px;line-height:1.45;overflow-wrap:anywhere}.fpic{display:block;max-width:100%;max-height:280px;margin:0 0 10px;border-radius:14px;object-fit:cover;cursor:zoom-in}
.fact{display:flex;align-items:center;justify-content:space-between;gap:10px}.flink{border:0;background:none;color:var(--c);font-weight:700;font-size:13px;padding:4px 2px}.flink:hover{text-decoration:underline}
.fempty{padding:26px 20px;border:1px dashed var(--line);border-radius:20px;text-align:center;color:var(--mute)}.fempty b{display:block;color:var(--ink);margin-bottom:4px}.fempty p{margin:0}
.wcard{border:1px solid var(--line);border-radius:20px;background:var(--card);padding:16px 18px}.wcard h3{margin:0 0 10px;font-size:16px}
.rstat{display:flex;gap:8px}.rstat div{flex:1;min-width:0;display:flex;flex-direction:column;padding:10px;border-radius:14px;background:var(--bg)}.rstat b{font:800 20px 'Unbounded',sans-serif;letter-spacing:-.04em}.rstat span{font-size:11.5px;color:var(--mute);line-height:1.2}
.rt{display:flex;flex-direction:column;gap:1px;padding:9px 0;border-top:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:700}.wcard h3+.rt{border-top:0;padding-top:0}.rt small{font-weight:400;color:var(--mute)}.rt:hover span{color:var(--v)}
.wcard.tip{background:linear-gradient(135deg,color-mix(in srgb,var(--v) 12%,var(--card)),var(--card))}.wcard.tip p{margin:0;color:var(--mute);font-size:14px}
.rfoot{padding:0 6px;font-size:12px;color:var(--mute)}.rfoot a{color:inherit;margin-right:12px}
.nbdg{position:absolute;top:4px;left:28px;min-width:18px;height:18px;padding:0 4px;display:grid;place-items:center;border-radius:999px;background:var(--p);color:#fff;font:700 11px/1 'DM Sans',sans-serif;font-style:normal;border:2px solid var(--bg)}.nbdg.hid{display:none}
.npanel{position:fixed;z-index:60;display:none;flex-direction:column;background:var(--card);border:1px solid var(--line);box-shadow:0 20px 60px rgba(20,10,40,.3)}.npanel.on{display:flex}
.nph{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}.nph h2{margin:0;font-size:18px}
#nlist{flex:1;overflow:auto}#nlist .fempty{margin:16px;border-style:solid}
.nitem{position:relative;display:grid;grid-template-columns:40px 1fr;gap:12px;width:100%;padding:14px 38px 14px 18px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);text-align:left}
.nitem:hover{background:var(--bg)}.nitem.un{background:color-mix(in srgb,var(--v) 7%,transparent)}.nitem.un::after{content:'';position:absolute;right:16px;top:22px;width:9px;height:9px;border-radius:50%;background:var(--p)}
.nitem .mav{width:40px;height:40px;font-size:16px}.ntx{min-width:0;display:flex;flex-direction:column;gap:2px;font-size:14px}.nsn{color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nt{color:var(--mute);font-size:12px}
.logoutrow{margin-top:18px;display:flex;justify-content:center}
@media (min-width:761px){
 .rail{position:fixed;z-index:35;left:0;top:0;bottom:0;width:76px;display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:18px 10px;border-right:1px solid var(--line);background:color-mix(in srgb,var(--bg) 60%,var(--card))}
 #app{padding-left:76px}.bar .logo{display:none}
 .rlogo{display:block;padding:4px 8px 18px;font-size:26px;line-height:1;text-decoration:none;text-align:center;background:linear-gradient(120deg,var(--v),var(--p));-webkit-background-clip:text;background-clip:text;color:transparent}.rlogo .rl-full{display:none}
 .rn{position:relative;display:flex;align-items:center;justify-content:center;gap:14px;width:100%;padding:12px;border:0;border-radius:16px;background:none;color:var(--ink);font:600 16px 'DM Sans',sans-serif;text-align:left}
 .rn svg{width:24px;height:24px;flex:none}.rn .lb{display:none}.rn:hover{background:color-mix(in srgb,var(--v) 9%,transparent)}.rn.on{color:var(--v);background:color-mix(in srgb,var(--v) 12%,transparent)}
 .ruser{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:8px;border:1px solid var(--line);border-radius:18px;background:var(--card);color:var(--ink);font-weight:600}.ruser .nm2{display:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .npanel{left:84px;top:16px;width:400px;max-height:calc(100dvh - 32px);border-radius:22px}
 .col{padding-top:4px}
}
@media (min-width:1280px){
 .rail{width:var(--rail);padding:20px 16px}#app{padding-left:var(--rail)}
 .rlogo{text-align:left;padding:4px 12px 20px;font-size:30px}.rlogo .rl-full{display:inline}.rlogo .rl-short{display:none}
 .rn{justify-content:flex-start}.rn .lb{display:inline}.nbdg{left:30px}.ruser{justify-content:flex-start}.ruser .nm2{display:block}
 .npanel{left:calc(var(--rail) + 8px)}
 .rcol{display:flex;flex-direction:column;gap:14px;width:320px;flex:none;overflow:auto;padding:16px 20px 30px 0;scrollbar-width:none}
 .rcol::-webkit-scrollbar{display:none}
 .onl{display:none!important}
}
@media (max-width:760px){
 :root{--tb:62px}
 .col{overflow:visible;padding:0 14px}.col>*{max-width:none}.sh{margin-block-start:12px}.sh small{display:none}
 .wrap{display:flex;flex:1 0 auto}#field{flex:none;align-content:center;min-height:52dvh;padding:12px 0 24px}
 #app{padding-bottom:calc(var(--tb) + env(safe-area-inset-bottom))}
 .tabbar{position:fixed;z-index:35;left:0;right:0;bottom:0;display:flex;height:calc(var(--tb) + env(safe-area-inset-bottom));padding:0 6px env(safe-area-inset-bottom);background:color-mix(in srgb,var(--card) 90%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
 .tb{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:0;background:none;color:var(--mute);font:600 10.5px 'DM Sans',sans-serif}.tb .tl2{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .tb .ti{position:relative;display:grid;place-items:center}.tb svg{width:24px;height:24px}.tb.on{color:var(--v)}.tb .nbdg{top:-5px;left:13px}
 .tb.plus .ti{width:46px;height:32px;border-radius:14px;background:var(--v);color:#fff}.tb.plus .tl2{display:none}
 aside.min{transform:translateY(calc(88dvh - 56px - var(--tb) - env(safe-area-inset-bottom)))}
 .npanel{left:0;right:0;bottom:0;height:78dvh;border-radius:24px 24px 0 0;z-index:70}
 .fcard{grid-template-columns:40px 1fr;padding:12px 14px;border-radius:18px}.fcard>.mav{width:40px;height:40px;font-size:16px}
}

/* ---------- Présence : pastille verte (en ligne) ---------- */
.pr{position:relative}
.pr::after{content:'';position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;border-radius:50%;background:#22c55e;border:2px solid var(--card);box-sizing:border-box;display:none}
.pr.on::after{display:block}
.tile .pr::after,.nitem .pr::after{width:12px;height:12px}
.pf-av.pr::after{width:20px;height:20px;border-width:3px;right:4px;bottom:4px;background:#22c55e}
.pf-av.pr:not(.on)::after{display:block;background:#9ca3af}

/* ---------- Fiche profil ---------- */
.nosc{overflow:hidden}
.pfov{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(20,10,45,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:pffade .2s ease both}
.pf{position:relative;width:100%;max-width:620px;max-height:calc(100dvh - 48px);overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:28px;box-shadow:0 30px 80px rgba(20,10,45,.35);animation:pfup .32s cubic-bezier(.2,.8,.2,1) both}
@keyframes pffade{from{opacity:0}}@keyframes pfup{from{opacity:0;transform:translateY(24px) scale(.98)}}
.pf>.empty{padding:60px 24px;text-align:center}
.pf-x{position:absolute;top:14px;right:14px;z-index:3;width:38px;height:38px;border-radius:50%;border:0;display:grid;place-items:center;background:rgba(0,0,0,.28);color:#fff;backdrop-filter:blur(6px);cursor:pointer}
.pf-x:hover{background:rgba(0,0,0,.45)}.pf-x svg{width:18px;height:18px}
.pf svg,.htp svg,.pvov svg,.pm-t svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pf-cv{height:132px;background:radial-gradient(120% 140% at 85% 0,rgba(255,255,255,.35),transparent 55%),linear-gradient(135deg,var(--pc),color-mix(in srgb,var(--pc) 55%,var(--p)))}
.pf-hd{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:-58px;padding:0 24px;text-align:center;position:relative}
.pf-av{width:116px;height:116px;border-radius:50%;display:grid;place-items:center;color:#fff;font:800 44px 'Unbounded',sans-serif;background-size:cover;background-position:center;border:5px solid var(--card);box-shadow:0 10px 30px rgba(20,10,45,.25);box-sizing:border-box}
.pf-hd h2{margin:6px 0 0;font-size:24px;display:flex;align-items:center;gap:6px;overflow-wrap:anywhere}
.pf-st{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--mute);font-weight:600}.pf-st .pfd{width:9px;height:9px;border-radius:50%;background:#9ca3af}.pf-st.on{color:#16a34a}.pf-st.on .pfd{background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.2)}
.pf-role{font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--v) 12%,transparent);color:var(--v)}
.pf-bd{padding:16px 26px 28px;display:flex;flex-direction:column;gap:16px}
.pf-bio{margin:0;text-align:center;font-size:15.5px;line-height:1.55;overflow-wrap:anywhere}.pf-bio.none{color:var(--mute);font-style:italic}
.pf-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.pf-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font-size:13px;color:var(--ink);text-decoration:none}
a.pf-chip.lnk{color:var(--v);font-weight:600}a.pf-chip.lnk:hover{border-color:var(--v)}
.ic{display:inline-grid;place-items:center;font-style:normal;color:var(--mute)}.ic svg{width:15px;height:15px}a.pf-chip.lnk .ic{color:var(--v)}
.pf-int{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.pf-int span{padding:4px 12px;border-radius:999px;background:color-mix(in srgb,var(--v) 10%,transparent);color:var(--v);font-size:13px;font-weight:600}
.pf-stats{display:flex;gap:12px}.pf-stats div{flex:1;display:flex;flex-direction:column;align-items:center;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--bg)}.pf-stats b{font-size:22px}.pf-stats span{font-size:12.5px;color:var(--mute)}
.pf .pc-tags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.pf-act{display:flex;flex-direction:column;gap:8px}
.pf-btn{border:0;border-radius:14px;background:var(--v);color:#fff;padding:13px;font:inherit;font-weight:700;cursor:pointer}.pf-btn:hover{filter:brightness(1.07)}.pf-btn.ghost{background:none;border:1px solid var(--line);color:var(--ink)}
.pf-more{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}.pf-more button{border:0;background:none;color:var(--mute);font:inherit;font-size:13px;text-decoration:underline;cursor:pointer;padding:4px}.pf-more button:hover{color:var(--ink)}
.pf-ph{border-top:1px solid var(--line);padding-top:16px}.pf-phh{display:flex;align-items:center;gap:8px;margin-bottom:10px}.pf-phh h3{margin:0;font-size:17px}.pf-phh span{font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--bg);color:var(--mute)}
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pf-pt{position:relative;aspect-ratio:1;border:0;padding:0;border-radius:16px;overflow:hidden;background:var(--bg);cursor:zoom-in}.pf-pt img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s;-webkit-user-drag:none;user-select:none}@media (hover:hover){.pf-pt:not(.lk):hover img{transform:scale(1.05)}}
.pf-pt.lk{cursor:not-allowed}
.lkb{position:absolute;right:8px;bottom:8px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(20,10,45,.62);color:#fff;backdrop-filter:blur(6px)}.lkb svg{width:15px;height:15px}.lkb.sh{background:rgba(22,163,74,.85)}
.pf-hint{margin:10px 0 0;color:var(--mute);font-size:13px;text-align:center}

/* ---------- Visionneuse de photo ---------- */
.pvov{position:fixed;inset:0;z-index:80;background:rgba(10,5,25,.93);display:flex;align-items:center;justify-content:center;animation:pffade .2s both}
.pv-st{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:min(94vw,1100px);padding:0 8px}
.pv-img{max-width:100%;max-height:76dvh;border-radius:14px;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.5);-webkit-user-drag:none}
.pv-cap{margin:0;color:#e9e3ff;text-align:center;max-width:640px;overflow-wrap:anywhere}
.pv-bar{display:flex;gap:10px;align-items:center}
.pv-echo{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#fff;border-radius:999px;padding:10px 18px;font:inherit;font-weight:700;cursor:pointer}.pv-echo svg{width:18px;height:18px}
.pv-echo:hover:not(:disabled){background:rgba(255,255,255,.2)}.pv-echo.on{background:var(--p);border-color:var(--p)}.pv-echo:disabled{opacity:.85;cursor:default}
.pv-rep{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;cursor:pointer}.pv-rep svg{width:18px;height:18px}
.pv-x{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer}.pv-x svg{width:20px;height:20px}
.pv-n{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;cursor:pointer}.pv-n svg{width:22px;height:22px}.pv-p{left:16px}.pv-nx{right:16px}.pv-n:hover,.pv-x:hover{background:rgba(255,255,255,.26)}

/* ---------- Réglages : lieu, langues, photos ---------- */
select{width:100%;font:inherit;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
textarea{width:100%;font:inherit;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--bg);color:var(--ink);resize:vertical;min-height:90px}
textarea:focus,select:focus{outline:none;border-color:var(--v);box-shadow:0 0 0 4px color-mix(in srgb,var(--v) 16%,transparent)}
.form2 .lbl{font-size:13px;color:var(--mute);margin-bottom:-4px}
.lchips{display:flex;flex-wrap:wrap;gap:6px}.lchips button{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer}.lchips button.on{background:var(--v);border-color:var(--v);color:#fff}
.seeme{margin:0 0 14px}
.pm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:8px 0}
.pm-t{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:16px;padding:8px;background:var(--bg)}.pm-t img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block}
.pm-bar{display:flex;align-items:center;gap:6px}.pm-sh{flex:1;min-width:0;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card);color:var(--mute);border-radius:999px;padding:5px 10px;font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;text-align:left}
.pm-sh svg{width:14px;height:14px;flex:none}.pm-sh span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pm-sh.on{background:rgba(22,163,74,.12);border-color:rgba(22,163,74,.5);color:#16a34a}
.pm-del{width:30px;height:30px;flex:none;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--mute);display:grid;place-items:center;cursor:pointer}.pm-del:hover{color:#dc2626;border-color:#dc2626}.pm-del svg{width:15px;height:15px}
.pm-ec{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--p)}.pm-ec .ic{color:var(--p)}
.pm-cap{margin:0!important;padding:7px 10px!important;font-size:12.5px;border-radius:10px!important}.pm-info{margin:2px 0 10px!important;font-size:12.5px}

@media (max-width:640px){
  .pfov{padding:0;align-items:flex-end}
  .pf{max-width:none;max-height:94dvh;border-radius:26px 26px 0 0;border-bottom:0;animation:pfsheet .34s cubic-bezier(.2,.8,.2,1) both}
  @keyframes pfsheet{from{transform:translateY(60%);opacity:.4}}
  .pf-cv{height:104px}.pf-hd{margin-top:-52px}.pf-av{width:104px;height:104px}.pf-bd{padding:14px 18px calc(24px + env(safe-area-inset-bottom))}
  .pf-grid{gap:6px}.pv-n{display:none}
}
@media (prefers-reduced-motion:reduce){.pfov,.pf,.pvov{animation:none}}
:root[data-motion=off] .pfov,:root[data-motion=off] .pf,:root[data-motion=off] .pvov{animation:none}
.pv-n.hid,.pv-cap.hid,.pv-rep.hid,.pf-st.hid{display:none}

.lgsw{margin-top:6px;font-size:13px;color:var(--mute)}
.sbn{position:sticky;top:0;display:flex;align-items:center;justify-content:center;gap:9px;padding:8px 16px;background:var(--v);color:#fff;font-size:13.5px;font-weight:600;line-height:1.35;text-align:center;z-index:60}
.sbn::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:#fff;opacity:.9}
.sbn.warn{background:#c2410c}
.rail{top:var(--sbh,0px)}
.nitem .nsn.wn{white-space:normal;color:var(--ink)}

/* ---------- Tendances : le bandeau défilant à flamme sur tous les écrans ---------- */
.tspot,.tpills{display:none!important}
#trsec{padding:10px 20px 2px}.mtick{display:flex;max-width:780px;margin-inline:auto;gap:12px}
.mlab{display:none;flex:none;font:800 12px/1.1 'Unbounded',sans-serif;letter-spacing:.02em;color:var(--ink);max-width:70px}
.mtk{transition:transform .2s,border-color .2s,box-shadow .2s;cursor:pointer}
@media (hover:hover){.mtr:hover .mtrack{animation-play-state:paused}.mtk:hover{transform:translateY(-2px);border-color:var(--c);box-shadow:0 8px 20px color-mix(in srgb,var(--c) 22%,transparent)}}
@media (min-width:761px){
 .mfl{width:44px;height:44px}.mfl svg{width:21px;height:21px}.mlab{display:block}
 .mtk{padding:9px 18px 9px 12px;font-size:15px}.mtk b{max-width:260px}.mtrack{gap:12px}
 .mtr{-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 48px),transparent)}
}

/* ---------- En direct : un fil léger qui défile, les messages glissent en haut et s'estompent ---------- */
#feed{gap:6px;padding:8px 0 44px;max-height:min(52vh,420px);overflow-y:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(#000 calc(100% - 78px),transparent);mask-image:linear-gradient(#000 calc(100% - 78px),transparent)}
#feed::-webkit-scrollbar{display:none}
.fcard{grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:6px 11px;padding:9px 12px;border-radius:16px;background:color-mix(in srgb,var(--card) 88%,transparent);opacity:calc(.5 + .5 * var(--life,1));transition:opacity 1s linear,border-color .2s,box-shadow .2s,transform .2s}
.fcard:hover,.fcard:focus-visible{opacity:1;transform:translateX(3px);box-shadow:0 6px 18px rgba(20,10,60,.08)}
.fcard>.mav{width:36px;height:36px;font-size:15px}
.fh{flex-wrap:nowrap;gap:6px;font-size:12.5px;min-width:0}.fh b{font-size:14px;flex:none;max-width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fh .ftopic{flex:0 1 auto;min-width:0}.fh .when{flex:none;font-size:12px}
.fbody{margin:2px 0 0;font-size:14px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fside{display:flex;align-items:center;gap:8px}.fthumb{width:40px;height:40px;border-radius:10px;object-fit:cover;cursor:zoom-in}
.fcard .echo{padding:4px 10px;font-size:12.5px;gap:5px}.fcard .echo svg{width:14px;height:14px}
.fcard .echo span:empty{display:none}.fcard .echo:has(span:empty){padding:5px 7px}
.fcard.fin{animation:fin .6s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes fin{from{opacity:0;transform:translateY(-16px) scale(.97);max-height:0;padding-block:0;margin-bottom:-6px}to{max-height:150px}}
.fcard.fout{animation:fout .6s ease forwards;pointer-events:none}
@keyframes fout{from{max-height:150px}to{opacity:0;transform:translateX(26px);max-height:0;padding-block:0;border-width:0;margin-bottom:-6px}}
@media (max-width:760px){#feed{max-height:min(46vh,340px);padding-bottom:36px}.fcard{grid-template-columns:34px minmax(0,1fr) auto;padding:8px 10px}.fcard>.mav{width:34px;height:34px;font-size:14px}.fh b{max-width:34%}}
@media (prefers-reduced-motion:reduce){.fcard.fin,.fcard.fout{animation:none}.fcard{transition:none}}
@media (min-width:1280px){#trsec{padding-right:340px}}

/* ---------- Menu latéral du téléphone (équivalent de la barre de gauche du bureau) ---------- */
.dw,.dwscrim{display:none}
@media (max-width:760px){
 .dwscrim{display:block;position:fixed;inset:0;z-index:90;background:rgba(14,6,34,.5);opacity:0;pointer-events:none;transition:opacity .25s}.dwscrim.on{opacity:1;pointer-events:auto}
 .dw{display:flex;flex-direction:column;position:fixed;z-index:91;left:0;top:0;bottom:0;width:min(84vw,320px);padding:calc(18px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom));background:var(--card);border-right:1px solid var(--line);border-radius:0 26px 26px 0;box-shadow:0 0 50px rgba(14,6,34,.35);overflow-y:auto;transform:translateX(-104%);visibility:hidden;transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s .3s}
 .dw.on{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
 body.dwopen{overflow:hidden}
 .dwme{display:flex;align-items:center;gap:12px;width:100%;padding:12px;margin-bottom:10px;border:1px solid var(--line);border-radius:20px;background:var(--bg);color:var(--ink);text-align:left}
 .dwme .av.big{flex:none}.dwnm{display:flex;flex-direction:column;min-width:0}.dwnm b{display:flex;align-items:center;gap:6px;font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dwnm small{color:var(--mute);font-size:13px}
 .dwnav{display:flex;flex-direction:column;gap:2px}
 .dwi{position:relative;display:flex;align-items:center;gap:16px;width:100%;padding:14px 12px;border:0;border-radius:16px;background:none;color:var(--ink);font:600 17px 'DM Sans',sans-serif;text-align:left;text-decoration:none}
 .dwi svg{width:24px;height:24px;flex:none}.dwi:active,.dwi:hover{background:color-mix(in srgb,var(--v) 10%,transparent)}
 .dwi .nbdg{position:static;margin-left:auto;border-color:var(--card)}
 .dwmore{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:0}
 .dwi.sec{padding:12px;font-size:15px;font-weight:500;color:var(--mute)}.dwi.sec.dg{color:#d6224f}.dwmore .dwi.sec:last-child{margin-top:6px}
}
@media (prefers-reduced-motion:reduce){.dw,.dw.on,.dwscrim{transition:none}}

/* ---------- Tendances & favoris : puces propres (plus de croissant coloré), puce « ouverte » bien visible ---------- */
.mtk{border:1px solid var(--line);border-left:1px solid var(--line)}
.mtk .rk{display:grid;place-items:center;flex:none;width:23px;height:23px;border-radius:50%;background:var(--c);color:var(--onc,#fff);font-size:11px;letter-spacing:0}
.mtk.on{background:color-mix(in srgb,var(--c) 14%,var(--card));border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 18%,transparent)}
.mtk:focus{outline:0}.mtk:focus-visible{outline:2px solid var(--c);outline-offset:2px}
.favs{padding:6px 20px 4px}.favs .fvin{display:flex;align-items:center;gap:12px;max-width:780px;margin-inline:auto}
.ffl{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:#fff;background:linear-gradient(145deg,#ffb629,#ff7a1a);box-shadow:0 4px 12px color-mix(in srgb,#ff9a1a 40%,transparent)}
.ffl svg{animation:flick 3s ease-in-out infinite;transform-origin:50% 60%}
.flab{display:none;flex:none;font:800 12px/1.1 'Unbounded',sans-serif;letter-spacing:.02em;max-width:70px}
.fvl{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:8px}
.fav{border:1px solid var(--line);border-left:1px solid var(--line);gap:8px;padding:6px 14px 6px 11px;transition:transform .2s,border-color .2s,box-shadow .2s}
.fav .fdot{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none}
@media (hover:hover){.fav:hover{transform:translateY(-2px);border-color:var(--c);box-shadow:0 8px 20px color-mix(in srgb,var(--c) 22%,transparent)}}
@media (min-width:761px){.ffl{width:44px;height:44px}.ffl svg{width:22px;height:22px}.flab{display:block}.fav{font-size:14px;padding:8px 16px 8px 12px}}
@media (min-width:1280px){.favs{padding-right:340px}}
@media (max-width:760px){.favs{padding:6px 14px 2px}.fvl{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px}.fvl::-webkit-scrollbar{display:none}.fav{flex:none}}
@media (prefers-reduced-motion:reduce){.ffl svg{animation:none}}

/* ---------- Chats ouverts : onglets en pastilles, bouton « liste » et sélecteur ---------- */
.tabs{align-items:center;gap:6px;padding:8px 12px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);scroll-behavior:smooth}
.tabsw{position:sticky;left:0;z-index:3;flex:none;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font-weight:700;font-size:13px;box-shadow:6px 0 10px -4px var(--card);position:sticky}
.tabsw b{font-weight:800}.tabsw:hover,.tabsw[aria-expanded=true]{border-color:var(--v);color:var(--v)}.tabsw .ud{position:absolute;top:-2px;right:-2px;width:10px;height:10px;border-radius:50%;background:var(--p);border:2px solid var(--card)}
.tab{border-radius:999px;border:1px solid var(--line);border-top:1px solid var(--line);top:0;gap:7px;padding:6px 6px 6px 11px;max-width:170px;transition:background .2s,border-color .2s}
.tab::before{content:'';flex:none;width:9px;height:9px;border-radius:50%;background:var(--c)}
.tab.on{background:color-mix(in srgb,var(--c) 13%,var(--card));border-color:color-mix(in srgb,var(--c) 60%,var(--line))}
.tab.unread .tt2{color:var(--ink)}
.chlist{position:absolute;z-index:30;left:10px;right:10px;margin-top:-4px;display:none;flex-direction:column;max-height:min(60vh,420px);border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:0 18px 50px rgba(20,10,60,.25);overflow:hidden}
.chlist.on{display:flex}
.chl-h{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 8px}.chl-h b{font-size:15px}.chl-h span{font-size:12px;font-weight:700;color:var(--mute);padding:2px 9px;border-radius:999px;background:var(--bg)}
.chl-l{flex:1;overflow-y:auto;padding:0 8px 8px}
.chl-r{display:flex;align-items:center;gap:10px;padding:10px 8px 10px 10px;border-radius:12px;cursor:pointer;font-size:14.5px}.chl-r:hover,.chl-r:focus-visible{background:var(--bg)}
.chl-r.on{background:color-mix(in srgb,var(--c) 13%,transparent);font-weight:700}
.chl-d{flex:none;width:10px;height:10px;border-radius:50%;background:var(--c)}.chl-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chl-n{flex:none;font-style:normal;font-size:11px;font-weight:800;color:#fff;background:var(--p);padding:2px 8px;border-radius:999px}
.chl-x{flex:none;border:0;background:none;color:var(--mute);width:28px;height:28px;border-radius:8px;font-size:12px}.chl-x:hover{background:var(--line);color:var(--ink)}
.chl-all{border:0;border-top:1px solid var(--line);background:none;color:var(--mute);padding:12px;font-weight:600;font-size:13.5px}.chl-all:hover{color:var(--p)}

/* ---------- Photos : partage rapide ---------- */
.pf-add{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:2px dashed color-mix(in srgb,var(--v) 45%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--v) 6%,transparent);color:var(--v);font:700 13px 'DM Sans',sans-serif;cursor:pointer;transition:background .2s,transform .2s}
.pf-add i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--v);color:#fff}.pf-add i svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.pf-add:hover{background:color-mix(in srgb,var(--v) 12%,transparent);transform:translateY(-2px)}
.pf-empty{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;padding:26px 18px;margin-bottom:10px;border:2px dashed color-mix(in srgb,var(--v) 45%,var(--line));border-radius:22px;background:linear-gradient(145deg,color-mix(in srgb,var(--v) 9%,transparent),color-mix(in srgb,var(--p) 7%,transparent));color:var(--ink);text-align:center;cursor:pointer}
.pf-empty .pe-i{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:linear-gradient(145deg,var(--v),var(--p));color:#fff;margin-bottom:4px;box-shadow:0 8px 22px color-mix(in srgb,var(--v) 35%,transparent)}.pf-empty .pe-i svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pf-empty b{font-size:16px}.pf-empty span{color:var(--mute);font-size:13.5px;max-width:300px}.pf-empty:hover{border-color:var(--v)}
.qpov{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:16px;background:rgba(14,6,34,.6);animation:qpf .2s ease}
@keyframes qpf{from{opacity:0}}
.qp{width:min(440px,100%);max-height:94dvh;overflow:auto;border-radius:26px;background:var(--card);box-shadow:0 30px 80px rgba(0,0,0,.45);animation:qpu .3s cubic-bezier(.2,.8,.2,1)}
@keyframes qpu{from{transform:translateY(30px);opacity:0}}
.qp-pv{position:relative;background:#120a26;max-height:46dvh;display:grid;place-items:center;overflow:hidden}.qp-pv img{display:block;width:100%;max-height:46dvh;object-fit:contain}
.qp-x{position:absolute;top:10px;right:10px;width:38px;height:38px;border-radius:50%;border:0;background:rgba(0,0,0,.45);color:#fff;display:grid;place-items:center}.qp-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.qp-bd{padding:16px 18px 18px}.qp-bd h3{margin:0 0 10px;font-size:18px}
.qp-cap{width:100%;margin-bottom:12px}
.qp-opts{display:flex;flex-direction:column;gap:8px}
.qp-o{display:flex;align-items:center;gap:12px;width:100%;padding:11px 14px;border:1.5px solid var(--line);border-radius:16px;background:var(--bg);color:var(--ink);text-align:left;transition:border-color .2s,background .2s}
.qp-o i{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--card);color:var(--mute)}.qp-o i svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.qp-o span{display:flex;flex-direction:column;min-width:0}.qp-o b{font-size:14.5px}.qp-o small{color:var(--mute);font-size:12.5px}
.qp-o.on{border-color:var(--v);background:color-mix(in srgb,var(--v) 9%,var(--card))}.qp-o.on i{background:var(--v);color:#fff}
.qp-act{display:flex;gap:10px;margin-top:16px}.qp-go,.qp-no{flex:1;padding:13px;border-radius:14px;font:700 15px 'DM Sans',sans-serif}
.qp-go{border:0;background:linear-gradient(120deg,var(--v),var(--p));color:#fff}.qp-go:disabled{opacity:.7}.qp-no{border:1px solid var(--line);background:none;color:var(--ink);flex:.55}
.qp.busy{pointer-events:none}.qp.busy .qp-pv{opacity:.7}
.pv-sh{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#fff;border-radius:999px;padding:10px 16px;font:inherit;font-weight:600;font-size:13.5px;cursor:pointer}.pv-sh svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.pv-sh:hover{background:rgba(255,255,255,.2)}
.pv-dl{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;cursor:pointer}.pv-dl svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.pv-dl:hover{background:#d6224f;border-color:#d6224f}
.pv-sh.hid,.pv-dl.hid{display:none}.pv-bar{flex-wrap:wrap;justify-content:center}
@media (max-width:520px){.qpov{align-items:end;padding:0}.qp{width:100%;border-radius:26px 26px 0 0;max-height:96dvh}@keyframes qpu{from{transform:translateY(100%)}}}
@media (prefers-reduced-motion:reduce){.qp,.qpov{animation:none}}

/* Palette de couleur : 9 pastilles + « ma propre couleur » + « au hasard » */
.sw{display:block}.sw .chint{margin:0 0 10px;color:var(--mute);font-size:13px;line-height:1.4}
.sw .crow{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 12px}.sw button.cb{width:38px;height:38px;border-radius:50%;border:3px solid transparent;box-shadow:inset 0 0 0 2px #fff;padding:0;transition:transform .15s}.sw button.cb:hover{transform:scale(1.1)}.sw button.cb.on{border-color:var(--ink)}
.sw .cmore{display:flex;flex-wrap:wrap;gap:8px}.sw .cown,.sw .cdice{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 6px;border-radius:20px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:14px;font-weight:600;cursor:pointer;width:auto}
.sw .cdice{padding:0 14px}.sw .cdice i{font-style:normal;font-size:17px}.sw .cown:hover,.sw .cdice:hover{border-color:var(--v)}
.sw .cown input.cfree{width:28px;height:28px;border:2px solid var(--line);border-radius:50%;padding:0;margin:0;background:none;cursor:pointer;flex:none}
/* Photos : floutées pour qui n'a pas le droit de les voir ; like directement sur la vignette */
.pf-pt.lk{cursor:default;pointer-events:auto}.pf-pt.lk img{filter:blur(9px) saturate(1.15);transform:scale(1.3);pointer-events:none}.pf-pt.lk::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.12)}.pf-pt.lk .lkb{z-index:1;right:50%;bottom:50%;transform:translate(50%,50%);width:40px;height:40px}.pf-pt.lk .lkb svg{width:19px;height:19px}
@media (hover:hover){.pf-pt.lk:hover img{transform:scale(1.3)}}
.pf-ec{position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px;border-radius:15px;background:rgba(20,10,45,.62);color:#fff;font-size:13px;font-weight:700;backdrop-filter:blur(6px);cursor:pointer;z-index:1;transition:background .15s,transform .15s}
.pf-ec svg{width:15px;height:15px}.pf-ec b{font-weight:700}.pf-ec b:empty{display:none}.pf-ec[role=img]{cursor:default}.pf-ec.on{background:linear-gradient(135deg,#5b3df5,#f0468f)}.pf-ec[role=button]:hover{transform:scale(1.06)}.pf-ec.hid{display:none}
/* Chats ouverts : 2-3 onglets + pastille « +N » qui ouvre le panneau vertical des autres */
.tabmore{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;height:34px;min-width:44px;padding:0 13px;border:1px solid var(--v);border-radius:999px;background:color-mix(in srgb,var(--v) 10%,var(--card));color:var(--v);font-weight:800;font-size:14px;cursor:pointer;transition:background .15s,transform .15s}
.tabmore:hover,.tabmore[aria-expanded=true]{background:var(--v);color:#fff}.tabmore:active{transform:scale(.96)}.tabmore .ud{position:absolute;top:-3px;right:-3px;width:11px;height:11px;border-radius:50%;background:var(--p);border:2px solid var(--card)}
.tabs{-webkit-mask-image:none;mask-image:none}
.sw .crow{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px;max-width:400px}.sw button.cb{width:100%;height:auto;aspect-ratio:1;max-width:40px}

/* Favoris : défilement quand ils sont nombreux */
.fvl{overflow:hidden;flex-wrap:nowrap;display:block;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 22px),transparent);padding:2px 0}
.fvtrack{display:flex;gap:8px;width:max-content;padding:0 8px 0 10px}.fvl.run .fvtrack{animation:tick 30s linear infinite}.fav{flex:none;white-space:nowrap}
@media (hover:hover){.fvl:hover .fvtrack{animation-play-state:paused}}.fvl:active .fvtrack{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.fvl.run .fvtrack{animation:none}.fvl{overflow-x:auto}}
/* Lancer un sujet (bouton + du téléphone) */
.ntov{position:fixed;inset:0;z-index:90;background:rgba(20,10,45,.5);backdrop-filter:blur(3px);display:flex;align-items:flex-end;justify-content:center;animation:ntf .18s ease-out}
.nts{position:relative;width:min(480px,100%);background:var(--card);border-radius:24px 24px 0 0;padding:22px 18px calc(22px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px;animation:nts .25s cubic-bezier(.2,.8,.2,1)}
.nts h3{margin:0;font-size:20px}.nts input{margin:0;font-size:17px;padding:14px 16px}.nts .nts-h{margin:0;color:var(--mute);font-size:13px}.nts>button[type=submit]{border:0;border-radius:16px;background:linear-gradient(135deg,var(--v),#f0468f);color:#fff;font-weight:700;font-size:16px;padding:14px}.nts>button[type=submit]:disabled{opacity:.6}
.nts-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border:0;border-radius:50%;background:var(--bg);color:var(--mute);font-size:14px}
@keyframes ntf{from{opacity:0}}@keyframes nts{from{transform:translateY(40px);opacity:0}}

.chl-h{gap:10px}.chl-h b{flex:1}.chl-cl{flex:none;width:34px;height:34px;border:0;border-radius:50%;background:var(--bg);color:var(--ink);font-size:14px;font-weight:700;cursor:pointer}.chl-cl:hover{background:color-mix(in srgb,var(--p) 14%,var(--bg))}
.chl-all{font-size:13px;font-weight:500}

/* Comptes certifiés : badge, logo sur les bulles et l'en-tête, vidéos et GIF */
.vbadge{display:inline-grid;vertical-align:-3px;margin-left:4px}.vbadge svg{width:16px;height:16px}.pf-hd h2 .vbadge svg{width:20px;height:20px;vertical-align:-3px}
.b.vb{position:relative}.b .vlg{position:absolute;top:-6px;left:-6px;width:38px;height:38px;border:3px solid #fff;border-radius:50%;box-shadow:0 3px 10px rgba(20,10,45,.25);font-size:14px;pointer-events:none}
.b.vb>.vbadge{position:absolute;top:22px;left:24px;margin:0;background:#fff;border-radius:50%;line-height:0}.b.vb>.vbadge svg{width:18px;height:18px}
#st{display:flex;align-items:center;gap:8px;min-width:0}.hdlg{flex:none;width:30px;height:30px;font-size:13px;border-radius:50%}#st .vbadge{margin:0}
.pf-play{position:absolute;inset:0;margin:auto;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(20,10,45,.6);color:#fff;backdrop-filter:blur(6px);pointer-events:none}.pf-play svg{width:22px;height:22px}
.pf-gif{position:absolute;right:8px;top:8px;padding:3px 8px;border-radius:8px;background:rgba(20,10,45,.65);color:#fff;font-size:11px;font-weight:800;font-style:normal;letter-spacing:.04em;pointer-events:none}
.pv-vid{max-width:min(92vw,900px);max-height:78vh;background:#000;border-radius:14px}
.qp-pv video{width:100%;height:100%;object-fit:cover;display:block;background:#000}.qp-pub{margin:0 0 12px;padding:10px 14px;border-radius:14px;background:color-mix(in srgb,#1d9bf0 12%,var(--card));color:var(--ink);font-size:14px}
/* Sujet déjà discuté : lien vers l'archive */
.archn{display:flex;align-items:center;gap:10px;width:calc(100% - 24px);margin:10px 12px 0;padding:10px 14px;border:1px dashed var(--line);border-radius:14px;background:var(--bg);color:var(--mute);font-size:13px;text-align:left;cursor:pointer}.archn i{font-style:normal;font-size:18px}.archn span{flex:1}.archn b{color:var(--v);font-weight:700;white-space:nowrap}.archn:hover{border-color:var(--v)}

.b .vlg{top:-16px;left:50%;margin-left:-19px;display:grid;place-items:center}.b.vb>.vbadge{top:-12px;left:calc(50% + 6px)}
.hdlg{display:grid;place-items:center;overflow:hidden}#st{flex-wrap:wrap;row-gap:2px}
.favs{min-width:0;overflow:hidden}.favs .fvin{min-width:0;width:100%;box-sizing:border-box}.fvl{min-width:0;max-width:100%}
#st{flex-wrap:nowrap}#st .vbadge{flex:none}

/* Partager une photo ou une vidéo : bouton bien visible à gauche, dans la feuille « + » et le menu du téléphone */
.rn.rshare{margin-top:6px;color:#fff;background:linear-gradient(135deg,var(--v),#f0468f);box-shadow:0 6px 16px color-mix(in srgb,var(--v) 30%,transparent)}.rn.rshare:hover{background:linear-gradient(135deg,var(--v),#f0468f);filter:brightness(1.07)}
.nts-or{display:flex;align-items:center;gap:12px;color:var(--mute);font-size:13px}.nts-or::before,.nts-or::after{content:"";flex:1;height:1px;background:var(--line)}
.nts-ph{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:var(--bg);color:var(--ink);text-align:left}.nts-ph svg{width:26px;height:26px;flex:none;color:var(--v)}.nts-ph span{display:flex;flex-direction:column;gap:2px}.nts-ph b{font-size:15px}.nts-ph small{color:var(--mute);font-size:12px}
.dwi.sec.share{color:var(--v);font-weight:700}
/* Téléphone : quand le chat est baissé, le menu du bas (Accueil, Explorer, +, Alertes, Profil) passe au-dessus */
@media (max-width:760px){body:has(#side.min):not(:has(#dmside.on:not(.min))) .tabbar{z-index:60;background:var(--card)}}

/* Tendances : le cadre qui se soulève au survol n'est plus coupé (on laisse de la place en haut et en bas du bandeau) */
.mtr{padding:10px 0 18px;margin:-10px 0 -18px}
@media (max-width:760px){.mtr{padding:6px 0 12px;margin:-6px 0 -12px}}

/* Autres chats ouverts : une étoile pour mettre le sujet en favori, juste avant la croix */
.chl-s{flex:none;display:grid;place-items:center;border:0;background:none;color:var(--mute);width:30px;height:30px;border-radius:8px;cursor:pointer}
.chl-s svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.chl-s:hover{background:var(--line);color:#f5a300}
.chl-s.on{color:#f5a300}.chl-s.on svg{fill:#f5a300}

/* Menu du compte (ordinateur) : « Photo ou vidéo » tient sur une ligne, avec le texte en couleur */
#mi-ph{display:flex;align-items:center;gap:10px}
#mi-ph svg{flex:none;color:var(--v)}
#mi-ph span{font-weight:800;background:linear-gradient(90deg,var(--v),#f0468f);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* Ordinateur : pas de barre de défilement visible sur la colonne centrale (accueil / En direct) ; on défile toujours à la molette ou au doigt */
.col{scrollbar-width:none;-ms-overflow-style:none}.col::-webkit-scrollbar{display:none;width:0;height:0}

/* Profil › Ville : liste de suggestions (ville + pays) qui s'ouvre sous le champ */
.pcw{position:relative;display:grid;gap:6px}.pcw input{width:100%;box-sizing:border-box}.pchint{color:var(--mute);font-size:12.5px;line-height:1.35}
.pcl{position:absolute;z-index:40;left:0;right:0;top:calc(46px + 4px);margin:0;padding:6px;list-style:none;max-height:300px;overflow-y:auto;border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:0 16px 40px rgba(20,10,60,.2)}
.pcl[hidden]{display:none}
.pcl li{display:block;padding:11px 12px;border-radius:11px;cursor:pointer;font-size:15px;line-height:1.3}.pcl li b{font-weight:700}.pcl li span{color:var(--mute)}
.pcl li.on,.pcl li:hover{background:color-mix(in srgb,var(--v) 11%,transparent)}

/* Favoris : même colonne que les tendances (icône, étiquette et premières bulles pile alignées) */
@media (min-width:761px){.flab{flex:none;width:70px;max-width:70px}.fvl{margin-left:-10px}}
@media (max-width:760px){.favs{padding-inline:20px}}

/* Contacts : on touche la photo ou le pseudo d'une personne pour ouvrir son profil */
.crow .cwho{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:4px;margin:-4px;border:0;border-radius:14px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.crow .cwho:hover,.crow .cwho:focus-visible{background:color-mix(in srgb,var(--v) 8%,transparent)}
.crow .cwho .ctx small u{color:var(--v);text-decoration:none;font-weight:600}.crow .cwho:hover .ctx small u{text-decoration:underline}
@media (max-width:520px){.crow{flex-wrap:wrap}.crow .cwho{flex:1 1 100%}.crow .cbtn{flex:1 1 100%;justify-content:flex-start;padding-left:52px}}

/* ---------- Archives : liste de sujets et lecture, plus aérées, textes plus petits, lecture seule ---------- */
.ah3{margin:2px 0 4px;font-size:18px}.ahint{margin:0 0 12px;color:var(--mute);font-size:13.5px;line-height:1.45}
.asr{margin:0 0 10px;padding:11px 14px 11px 38px;border-radius:14px;font-size:14.5px;background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a84a8' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px 50%/18px}
.alist{display:grid;gap:8px}
.ali{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:var(--bg);color:var(--ink);text-align:left;cursor:pointer;transition:border-color .2s,transform .2s,box-shadow .2s}
.ali:hover,.ali:focus-visible{border-color:var(--c);transform:translateY(-1px);box-shadow:0 6px 16px color-mix(in srgb,var(--c) 16%,transparent)}
.ald{flex:none;width:12px;height:12px;border-radius:50%;background:var(--c)}
.alt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.alt b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.alt small{color:var(--mute);font-size:12.5px}
.ali .chev{color:var(--mute);font-size:20px}.aempty{text-align:center;padding:14px 0}
.ahd{margin:0 0 6px;padding:0 2px 14px;border-bottom:1px solid var(--line)}
.ahd h3{display:flex;align-items:center;gap:9px;margin:6px 0 2px;font-size:19px;line-height:1.25;overflow-wrap:anywhere}.ahd h3::before{content:"";flex:none;width:11px;height:11px;border-radius:50%;background:var(--c)}.ahd p{margin:0 0 0 20px;color:var(--mute);font-size:13px}
.abk{border:0;background:none;padding:2px 0;color:var(--mute);font:600 13px 'DM Sans',sans-serif;cursor:pointer}.abk:hover{color:var(--v)}
.amsgs{display:flex;flex-direction:column;padding:0 2px 18px}
.ads{display:flex;align-items:center;gap:12px;margin:18px 0 6px;color:var(--mute);font-size:12px;font-weight:600;text-transform:capitalize}.ads::before,.ads::after{content:"";flex:1;height:1px;background:var(--line)}
.am{display:flex;align-items:flex-start;gap:10px;padding:7px 0}.am>.av,.am>.mav{flex:none;width:28px;height:28px;font-size:12px;margin-top:1px}
.amb{min-width:0;flex:1}
.amh{display:flex;align-items:baseline;gap:8px}.amh b{font-size:13px;font-weight:700}.amh small{color:var(--mute);font-size:11.5px}
.amb p{margin:1px 0 0;font-size:14px;line-height:1.45;overflow-wrap:anywhere}

/* Profil d'un contact : depuis quand vous êtes amis (visible seulement par toi) */
.pf-fr{display:flex;align-items:center;gap:12px;margin:12px 0 0;padding:10px 14px;border-radius:14px;background:color-mix(in srgb,var(--v) 9%,var(--card));border:1px solid color-mix(in srgb,var(--v) 22%,var(--line))}
.pf-fr .ic{flex:none;width:24px;height:24px;color:var(--v)}.pf-fr .ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pf-fr span{display:flex;flex-direction:column;gap:1px}.pf-fr b{font-size:14px}.pf-fr small{color:var(--mute);font-size:12.5px}
/* Contacts : pas de pavé de texte superflu, toute la ligne personne réagit au survol */
.crow .cwho{padding:6px 8px;margin:-6px -8px}

/* ---------- Chat : fond blanc comme avant pour les sujets ; seules les discussions privées ont un fondu vers la couleur choisie par chacun ---------- */
#side{background:var(--card)}
#side.dm{--dmc:#5b3df5;--dmm:color-mix(in srgb,var(--dmc) 74%,#fff);--v:var(--dmm);background:linear-gradient(180deg,var(--bg) 0%,color-mix(in srgb,var(--dmc) 6%,var(--bg)) 45%,color-mix(in srgb,var(--dmc) 15%,var(--card)) 100%)}
#side.dm form button:not(.att){background:var(--dmm)}#side.dm .att{color:var(--dmm);border-color:color-mix(in srgb,var(--dmc) 22%,var(--line))}
#side.dm .tabs{border-bottom-color:color-mix(in srgb,var(--dmc) 14%,var(--line))}
#side .top{background:none}
@media (min-width:761px){aside.min{background:var(--card)}#side.dm.min{background:color-mix(in srgb,var(--dmc) 9%,var(--card))}}
#side .top .dmtag{display:inline-flex;align-items:center;margin-left:8px;padding:2px 9px;border-radius:999px;background:color-mix(in srgb,var(--dmc) 13%,var(--card));color:color-mix(in srgb,var(--dmc) 82%,#000);font:700 11px/1.5 'DM Sans',sans-serif;letter-spacing:.03em;text-transform:uppercase;vertical-align:middle}
.tabsep{flex:none;width:1px;align-self:stretch;margin:4px 4px;background:var(--line)}
.tab.dm{border-color:color-mix(in srgb,var(--c) 45%,var(--line));background:color-mix(in srgb,var(--c) 8%,var(--bg))}
.tab.dm.on{background:color-mix(in srgb,var(--c) 20%,var(--card));border-color:var(--c);color:var(--ink)}
.chl-sec{padding:10px 10px 4px;color:var(--mute);font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.chl-r.dm.on{background:color-mix(in srgb,var(--c) 14%,transparent)}
/* flèche des options d'une discussion privée : pastille de couleur + petite flèche */
.tcb.dmo{display:inline-flex;align-items:center;width:auto;gap:6px;padding:6px 9px}.tcb.hid{display:none!important}.tcb.dmo::after{content:"";width:0;height:0;border:4px solid transparent;border-top-color:currentColor;border-bottom:0;margin-top:1px}

/* ---------- Couleur d'un sujet : pastilles au lancement et bouton dans le chat ---------- */
.npop{flex-wrap:wrap}.npop>input{flex:1;min-width:0}.npc{flex:1 1 100%;display:flex;flex-direction:column;gap:6px}.npc>small{color:var(--mute);font-size:12.5px;font-weight:600}
.nts .npc{gap:8px}
.tsw{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.tsw button.tsw-c,.npop .tsw button.tsw-c{flex:none;width:24px;height:24px;padding:0;border:2px solid transparent;border-radius:50%;background:var(--c);cursor:pointer;box-shadow:inset 0 0 0 2px var(--card);transition:transform .15s}
.tsw .tsw-c:hover{transform:scale(1.14)}.tsw button.tsw-c.on,.npop .tsw button.tsw-c.on{border-color:var(--ink);transform:scale(1.18)}
.tsw button.tsw-a,.npop .tsw button.tsw-a{flex:none;padding:0 11px;height:24px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--mute);font-size:12px;font-weight:700;cursor:pointer}.tsw button.tsw-a.on,.npop .tsw button.tsw-a.on{border-color:var(--v);color:var(--v);background:color-mix(in srgb,var(--v) 10%,var(--card))}
@media (max-width:760px){.tsw{gap:9px}.tsw button.tsw-c{width:30px;height:30px}.tsw button.tsw-a,.tsw button.tsw-own{height:30px}}
.tcb{display:inline-grid;place-items:center;width:32px;padding:6px 0}.tcdot{display:block;width:16px;height:16px;border-radius:50%;background:var(--c,var(--v));box-shadow:0 0 0 2px var(--card),0 0 0 3px var(--line)}
.tcb.hid{display:none}.tcb:hover .tcdot{transform:scale(1.12)}
.tcpop{position:absolute;z-index:45;top:68px;right:12px;width:min(320px,calc(100% - 24px));display:flex;flex-direction:column;gap:8px;padding:12px 14px 14px;border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:0 16px 44px rgba(20,10,60,.28);animation:asideUp .2s ease}
.tcpop small{color:var(--mute);font-size:12.5px;line-height:1.35}.tcpop-h{display:flex;align-items:center;justify-content:space-between}.tcpop-h b{font-size:15px}
.tcpop-x{border:0;background:var(--bg);color:var(--ink);width:28px;height:28px;border-radius:50%;cursor:pointer}
/* « Partager » devient une icône (téléphone et ordinateur) pour laisser la place au titre du sujet */
@media (min-width:0px){#side #sh span{display:none}#side #sh{width:34px;padding:6px 0;display:inline-grid;place-items:center}#side #sh::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3M7.5 7.5L12 3l4.5 4.5M5 13v6a2 2 0 002 2h10a2 2 0 002-2v-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3M7.5 7.5L12 3l4.5 4.5M5 13v6a2 2 0 002 2h10a2 2 0 002-2v-6'/%3E%3C/svg%3E") center/contain no-repeat}}

/* ---------- Ordinateur : le chat se baisse d'un clic sur la flèche, en petite barre en bas à droite (comme sur mobile) ---------- */
@media (min-width:761px){
 .chev{display:inline-flex}
 aside.min{position:fixed;right:24px;bottom:0;width:min(380px,calc(100vw - 48px));height:auto;z-index:45;border:1px solid var(--line);border-bottom:0;border-radius:18px 18px 0 0;box-shadow:0 -8px 32px rgba(20,10,60,.25);animation:dockUp .25s cubic-bezier(.2,.8,.2,1)}
 aside.min>:not(.top){display:none!important}
 aside.min .top{border-bottom:0;cursor:pointer;align-items:center}aside.min .top #sn,aside.min .top #sh,aside.min .top #fv,aside.min .top #tcol{display:none}
 aside.min .chev svg{transform:rotate(180deg)}
 aside.min .top h2{font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px}
}
@keyframes dockUp{from{transform:translateY(40px);opacity:0}}

/* Ma propre couleur : bouton rond + ligne de validation */
.pcl li.pcn{cursor:default;color:var(--mute);font-size:14px}.pcl li.pcn:hover{background:none}
/* En-tête du chat sur ordinateur : tous les boutons sur une seule ligne (« Fermer » ne passe plus dessous) */
@media (min-width:761px){#side .top>div:last-child{display:flex;flex-wrap:nowrap;gap:6px;align-items:flex-start;flex:none}#side .top>div:first-child{min-width:0;flex:1}}

/* ---------- Sujets du moment en vagues : le plus discuté au centre, les autres en anneaux (test, voir WAVES dans app.js) ---------- */
#field.waves{display:block;position:relative;flex:none;min-height:0;align-content:normal;padding-top:26px}
#field .wv{position:relative;width:100%;margin:0 auto}
#field.waves .b{position:absolute;padding:4px;z-index:1;align-content:center}
#field.waves .b span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;max-width:100%;font-size:var(--fs,15px);line-height:1.15;overflow-wrap:break-word;hyphens:auto}
#field.waves .b small{font-size:calc(var(--fs,15px) * .78);margin-top:3px}
#field.waves .b.sm small{display:none}
#field.waves .b.core{z-index:0;box-shadow:0 18px 50px -12px var(--halo,#5b3df5)}
#field.waves .b.core span{-webkit-line-clamp:4;font-weight:700}
#field.waves .b.core::before,#field.waves .b.core::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--halo,#5b3df5);opacity:0;pointer-events:none;animation:wvwave 5s ease-out infinite}
#field.waves .b.core::after{animation-delay:2.5s}
@keyframes wvwave{0%{transform:scale(.97);opacity:.5}100%{transform:scale(1.34);opacity:0}}
@media (prefers-reduced-motion:reduce){#field.waves .b.core::before,#field.waves .b.core::after{animation:none}}
.wvmore{display:block;margin:14px auto 0;padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--mute);font:600 13px 'DM Sans',sans-serif;cursor:pointer}.wvmore:hover{color:var(--v);border-color:var(--v)}.wvmore.hid{display:none}
/* Hashtag du sujet, sous le titre du chat */
#side .top .hth{display:inline-block;margin-top:3px;font-size:12.5px;font-weight:700;color:var(--v);text-decoration:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#side .top .hth:hover{text-decoration:underline}#side .top .hth.hid{display:none}
.htbox{display:contents}

.tsearch input,.tsearch input:focus{border:0;box-shadow:none;background:none;border-radius:0;outline:0}

/* Les ronds flottent chacun à leur façon, dans toutes les directions (trajets tirés au sort, stables pour chaque sujet) */
@keyframes wvdrift{0%{translate:0 0}25%{translate:var(--x1,0) var(--y1,0)}50%{translate:var(--x2,0) var(--y2,0)}75%{translate:var(--x3,0) var(--y3,0)}100%{translate:0 0}}
#field.waves .b{animation:none;will-change:translate,scale}
#field.waves .b.core{animation:none;will-change:auto}
@media (prefers-reduced-motion:reduce){#field.waves .b{animation:none}}

/* Discussion privée : pastille en ligne / hors ligne à côté du nom du contact */
#side .top .cdot{flex:none;display:inline-block;width:10px;height:10px;margin-right:8px;border-radius:50%;background:#b6b6c8;vertical-align:middle;position:relative;top:-1px;transition:background .3s,box-shadow .3s}
#side .top .cdot.on{background:#22c55e;box-shadow:0 0 0 3px color-mix(in srgb,#22c55e 24%,transparent)}

/* Chat baissé : seulement le titre et ses icônes */
aside.min #sn,aside.min .hth,aside.min .dmtag{display:none!important}
aside.min .top{align-items:center;padding-top:10px;padding-bottom:10px}
/* Recherche sur téléphone : la barre prend toute la largeur, avec « Annuler » */
.scancel{display:none}
@media (max-width:760px){
 .bar.sopen .logo,.bar.sopen .nwrap,.bar.sopen .mewrap{display:none}
 .bar.sopen{gap:6px}
 .bar.sopen .search{flex:1;width:auto;min-width:0;height:44px}
 .bar.sopen .search #sbtn{width:46px;height:42px}
 .bar.sopen .search input{font-size:16px}
 .bar.sopen .scancel{display:block;flex:none;border:0;background:none;color:var(--v);font:700 15px 'DM Sans',sans-serif;padding:10px 6px 10px 8px;cursor:pointer}
 .lgsw{display:none}
}

/* ---------- 2e panneau : les discussions privées, superposées au chat des sujets mais décalées ---------- */
#dmside{--dmc:#5b3df5;--dmm:color-mix(in srgb,var(--dmc) 74%,#fff);--v:var(--dmm);background:linear-gradient(180deg,var(--bg) 0%,color-mix(in srgb,var(--dmc) 6%,var(--bg)) 45%,color-mix(in srgb,var(--dmc) 15%,var(--card)) 100%)}
#dmside form button:not(.att){background:var(--dmm)}#dmside .att{color:var(--dmm);border-color:color-mix(in srgb,var(--dmc) 22%,var(--line))}
#dmside .tabs{border-bottom-color:color-mix(in srgb,var(--dmc) 14%,var(--line))}
#dmside .top{background:none}
#dmside .dmsgs{flex:1;overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
#dmside .top .cdot{flex:none;display:inline-block;width:10px;height:10px;margin-right:8px;border-radius:50%;background:#b6b6c8;vertical-align:middle;position:relative;top:-1px;transition:background .3s,box-shadow .3s}
#dmside .top .cdot.on{background:#22c55e;box-shadow:0 0 0 3px color-mix(in srgb,#22c55e 24%,transparent)}
#dmside .top h2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#dmside.unread .top h2::after{content:"";display:inline-block;width:9px;height:9px;margin-left:8px;border-radius:50%;background:var(--p);vertical-align:middle}
#dmside .quote{font-size:12.5px;color:var(--mute);border-left:3px solid var(--line);padding-left:8px;margin:2px 0 4px}
aside.min .dsn,aside.min #dmcol{display:none!important}
aside.min .dmsgs,aside.min #dmf,aside.min #dmtabs{pointer-events:none}
@media (min-width:761px){
 .wrap{position:relative}
 #side{z-index:40}
 #dmside .top>div:last-child{display:flex;flex-wrap:nowrap;gap:6px;align-items:flex-start;flex:none}#dmside .top>div:first-child{min-width:0;flex:1}
 #dmside{position:absolute;top:0;bottom:0;right:0;width:400px;z-index:41;box-shadow:-12px 0 36px rgba(20,10,60,.16)}
 .wrap:has(#side.on:not(.min)) #dmside:not(.min){right:56px} /* décalé : on voit encore le bord droit du chat des sujets */
 body.dmback #dmside:not(.min){z-index:39;box-shadow:none}
 body.dmback .wrap:has(#side.on:not(.min)) #dmside:not(.min):hover{transform:translateX(-8px)}
 #dmside{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
 #side{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
 body:not(.dmback) .wrap:has(#dmside.on:not(.min)) #side.on:not(.min){cursor:pointer}
 body:not(.dmback) .wrap:has(#dmside.on:not(.min)) #side.on:not(.min):hover{transform:translateX(6px)}
 body.dmback .wrap:has(#side.on:not(.min)) #dmside.on:not(.min){cursor:pointer}
 #dmside.min{position:fixed;top:auto;right:24px;bottom:0;width:min(380px,calc(100vw - 48px));height:auto;z-index:45;background:color-mix(in srgb,var(--dmc) 9%,var(--card))}
 .wrap:has(#side.on:not(.min)) #dmside.min{right:424px}
 body:has(#side.on.min) #dmside.min{right:calc(24px + min(380px,calc(100vw - 48px)) + 12px)}
 body:has(#dmside.on:not(.min)) #side.on.min{right:424px}
}
@media (max-width:760px){
 #dmside{z-index:42;background-clip:padding-box}
 body.dmback #dmside{z-index:38}body.dmback #side.on{z-index:41}
 /* deux feuilles empilées : celle de devant est un peu plus basse, on voit le haut de l'autre */
 body:has(#side.on:not(.min)):has(#dmside.on:not(.min)) #dmside{height:calc(88dvh - 46px)}
 body.dmback:has(#side.on:not(.min)):has(#dmside.on:not(.min)) #dmside{height:88dvh}
 body.dmback:has(#side.on:not(.min)):has(#dmside.on:not(.min)) #side{height:calc(88dvh - 46px)}
 body.dmback #dmside.on:not(.min) .top{cursor:pointer}
 body:not(.dmback):has(#dmside.on:not(.min)) #side.on:not(.min) .top{cursor:pointer}
 /* un chat baissé devient la bulle « Discussions » : la feuille privée reste donc normale (plus de réserve en bas) */
 #dmside.min{height:88dvh}
 body:has(#dmside.min):not(:has(#side.on:not(.min))) .tabbar{z-index:60;background:var(--card)} /* la barre du bas ne passe devant que si aucune autre feuille de chat n'est ouverte (sinon elle cachait la barre de message) */
}

/* ---------- Notifications : cartes qui glissent, puis s'effacent avec un bel effet ---------- */
.toasts{position:fixed;z-index:90;left:24px;bottom:24px;display:flex;flex-direction:column;gap:10px;width:min(360px,calc(100vw - 48px));pointer-events:none}
.toasts .toast{position:relative;left:auto;bottom:auto;transform:none;max-width:none;overflow:hidden;display:flex;align-items:center;gap:12px;padding:12px 16px 14px 12px;border-radius:18px;border:1px solid color-mix(in srgb,#fff 12%,transparent);background:color-mix(in srgb,var(--ink) 94%,transparent);color:var(--bg);font-weight:600;font-size:14.5px;line-height:1.3;box-shadow:0 18px 44px -10px rgba(20,10,60,.45);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);pointer-events:auto;animation:toastIn .55s cubic-bezier(.2,1.1,.3,1) both}
.toasts .toast.bad{background:color-mix(in srgb,var(--p) 94%,#000);color:#fff}
.toasts .toast .ti{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:color-mix(in srgb,var(--v) 85%,#fff);color:#fff;font-size:17px;line-height:1}
.toasts .toast.bad .ti{background:rgba(255,255,255,.22)}
.toasts .toast .tt{flex:1;min-width:0;overflow-wrap:anywhere}
.toasts .toast .tg{flex:none;font-size:22px;opacity:.6;transition:transform .2s}.toasts .toast.tap:hover .tg{transform:translateX(3px);opacity:1}
.toasts .toast.tap{cursor:pointer}.toasts .toast.tap:hover{transform:translateY(-2px)}
.toasts .toast .tp{position:absolute;left:0;bottom:0;height:3px;width:100%;background:linear-gradient(90deg,var(--v),var(--p));transform-origin:left;animation:toastBar var(--ms,4s) linear forwards;opacity:.9}
.toasts .toast.hold .tp{animation-play-state:paused}
.toasts .toast{touch-action:none;user-select:none;-webkit-user-select:none;will-change:transform}.toasts .toast.drag{cursor:grabbing;box-shadow:0 18px 44px rgba(0,0,0,.38)}.toasts .toast.gone{pointer-events:none}
.toasts .toast .trip{position:absolute;width:260px;height:260px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,color-mix(in srgb,#fff 55%,transparent) 0,color-mix(in srgb,var(--v) 35%,transparent) 40%,transparent 70%);mix-blend-mode:screen}
@keyframes toastIn{from{opacity:0;transform:translateX(-36px) scale(.94)}60%{transform:translateX(4px) scale(1.01)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(-28px) scale(.9);filter:blur(5px)}}
@keyframes toastBar{to{transform:scaleX(0)}}
@media (max-width:760px){
 .toasts{left:12px;right:12px;bottom:auto;top:calc(env(safe-area-inset-top) + 10px);width:auto;flex-direction:column-reverse}
 @keyframes toastIn{from{opacity:0;transform:translateY(-26px) scale(.96)}60%{transform:translateY(3px)}to{opacity:1;transform:none}}
 @keyframes toastOut{to{opacity:0;transform:translateY(-22px) scale(.92);filter:blur(5px)}}
}
@media (prefers-reduced-motion:reduce){.toasts .toast,.toasts .toast.out{animation-duration:.01s}.toasts .toast .tp{animation:none}}

/* ---------- Bouton flottant « Discussions » : retrouver ses chats une fois fermés ---------- */
.chfab{position:fixed;z-index:44;right:24px;bottom:24px;display:inline-flex;align-items:center;gap:9px;height:50px;padding:0 20px 0 16px;border:0;border-radius:999px;background:linear-gradient(135deg,var(--v),#8a5cff 60%,var(--p));color:#fff;font:700 14.5px 'DM Sans',sans-serif;cursor:pointer;box-shadow:0 14px 34px -8px color-mix(in srgb,var(--v) 70%,transparent),0 2px 6px rgba(20,10,60,.2);animation:chfabIn .5s cubic-bezier(.2,1.2,.3,1) both;transition:transform .2s,box-shadow .2s}
.chfab:hover{transform:translateY(-3px);box-shadow:0 18px 40px -8px color-mix(in srgb,var(--v) 75%,transparent),0 2px 6px rgba(20,10,60,.2)}
.chfab.hid{display:none}
.chfab-n{position:absolute;top:-5px;right:-3px;min-width:22px;height:22px;padding:0 6px;display:grid;place-items:center;border-radius:999px;background:var(--p);color:#fff;font-size:12px;border:2px solid var(--bg)}.chfab-n.hid{display:none}
.chfab.alert::after{content:"";position:absolute;inset:-4px;border-radius:999px;border:2px solid var(--p);opacity:0;animation:chfabPulse 2s ease-out infinite;pointer-events:none}
@keyframes chfabIn{from{opacity:0;transform:translateY(16px) scale(.85)}}
@keyframes chfabPulse{0%{opacity:.7;transform:scale(.96)}100%{opacity:0;transform:scale(1.18)}}
.chpop{position:fixed;z-index:46;right:24px;bottom:88px;width:min(350px,calc(100vw - 32px));max-height:min(480px,calc(100dvh - 140px));display:none;flex-direction:column;border:1px solid var(--line);border-radius:22px;background:color-mix(in srgb,var(--card) 96%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 24px 60px -12px rgba(20,10,60,.4);overflow:hidden;transform-origin:bottom right}
.chpop.on{display:flex;animation:chpopIn .28s cubic-bezier(.2,1.1,.3,1)}
@keyframes chpopIn{from{opacity:0;transform:translateY(12px) scale(.94)}}
.chp-h{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 8px}.chp-h b{font-size:16px}
.chp-x{border:0;background:var(--bg);color:var(--ink);width:28px;height:28px;border-radius:50%;cursor:pointer}
.chp-b{overflow:auto;padding:0 8px 8px}
.chp-s{padding:10px 10px 4px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.chr{display:flex;align-items:center;gap:12px;width:100%;padding:9px 10px;border:0;border-radius:14px;background:none;color:var(--ink);text-align:left;font:inherit;cursor:pointer;transition:background .15s}
.chr:hover,.chr:focus-visible{background:color-mix(in srgb,var(--c) 10%,transparent)}
.chr-d{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--c);color:#fff;font-style:normal;font-weight:700;font-size:16px}
.chr-t{min-width:0;display:flex;flex-direction:column}.chr-t b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}.chr-t small{color:var(--mute);font-size:12.5px}
.chr.unread .chr-t small{color:var(--p);font-weight:700}.chr.unread .chr-t b::after{content:"";display:inline-block;width:8px;height:8px;margin-left:7px;border-radius:50%;background:var(--p)}
.chp-c{border:0;border-top:1px solid var(--line);background:none;color:var(--mute);padding:11px;font:600 13px 'DM Sans',sans-serif;cursor:pointer}.chp-c:hover{color:var(--p)}
@media (max-width:760px){
 .chfab{right:14px;bottom:calc(var(--tb) + env(safe-area-inset-bottom) + 14px);width:54px;height:54px;padding:0;justify-content:center}
 .chfab .chfab-l{display:none}
 .chpop{right:12px;left:12px;width:auto;bottom:calc(var(--tb) + env(safe-area-inset-bottom) + 80px)}
}
@media (prefers-reduced-motion:reduce){.chfab,.chpop.on{animation:none}.chfab.alert::after{animation:none}}

/* ---------- Zone de message : elle grandit avec le texte, pour tout voir ---------- */
aside form{align-items:flex-end}
aside form textarea.mi{flex:1;min-width:0;width:100%;margin:0;padding:12px 14px;border-radius:18px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;line-height:1.4;resize:none;height:46px;min-height:46px;max-height:45dvh;overflow-y:hidden;-webkit-appearance:none;appearance:none}
aside form textarea.mi:focus{outline:none;border-color:var(--v);box-shadow:0 0 0 4px color-mix(in srgb,var(--v) 16%,transparent)}
aside form .att,aside form>button{align-self:flex-end;height:46px}
aside form .cnt{top:auto;bottom:62px;right:92px;transform:none;background:var(--card);padding:0 5px;border-radius:8px}
.m p{white-space:pre-wrap}
@media (max-width:760px){aside form textarea.mi{font-size:16px}}

/* message long : la case prend toute la largeur ; dessous, le bouton photo à gauche et « Envoyer » qui remplit le reste (plus de vide au milieu) */
aside form.big{flex-wrap:wrap}
aside form.big textarea.mi{flex:1 1 100%;order:0}
aside form.big .att{order:1;width:50px}aside form.big>button:not(.att){order:2;flex:1 1 0;min-width:0;margin-left:0}
aside form.big .cnt{bottom:62px;right:22px}


/* ---------- Bulles : textes plus nets et plus lisibles ---------- */
#field.waves .b{padding:6px;text-wrap:balance}
#field.waves .b span{font-weight:800;letter-spacing:-.012em;line-height:1.14;hyphens:manual;overflow-wrap:normal;word-break:normal;text-shadow:0 1px 3px rgba(0,0,0,.34),0 0 1px rgba(0,0,0,.25);-webkit-font-smoothing:antialiased}
#field.waves .b small{display:inline-block;margin-top:5px;padding:2px 9px;border-radius:999px;background:rgba(0,0,0,.2);color:#fff;font-size:calc(var(--fs,15px) * .72);font-weight:600;letter-spacing:.01em;text-shadow:none;opacity:1;white-space:nowrap}
#field.waves .b.core span{font-weight:800;letter-spacing:-.02em;line-height:1.1}
#field.waves .b.core small{padding:3px 12px;font-size:calc(var(--fs,15px) * .62)}
#field.waves .b.sm small{display:none}

/* Recherche sur téléphone : les suggestions prennent toute la page (fond plein, pas de flou) */
@media (max-width:760px){
 .bar.sopen .drop{position:fixed;left:0;right:0;top:var(--sbt,64px);bottom:calc(var(--tb) + env(safe-area-inset-bottom));max-height:none;height:auto;align-items:flex-start;align-content:flex-start;gap:10px;padding:18px 16px 28px;border:0;border-top:1px solid var(--line);background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;overflow-y:auto;z-index:31}
 .bar.sopen .drop .lab{flex:1 0 100%;margin-top:10px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
 .bar.sopen .drop .lab:first-child{margin-top:0}
 .bar.sopen .drop .chip{padding:10px 16px;font-size:15px}
}

/* ---------- Bulles : typo épurée (Inter), tout uni, pas de pastille ---------- */
#field.waves .b span{font-family:'Inter','DM Sans',system-ui,sans-serif;font-weight:700;letter-spacing:-.015em;line-height:1.18;text-shadow:none;-webkit-font-smoothing:antialiased}
#field.waves .b small{display:block;margin-top:4px;padding:0;border-radius:0;background:none;font-family:'Inter','DM Sans',system-ui,sans-serif;font-size:calc(var(--fs,15px) * .74);font-weight:500;letter-spacing:0;color:rgba(255,255,255,.82);text-shadow:none}
#field.waves .b.core span{font-weight:700;letter-spacing:-.025em;line-height:1.12}
#field.waves .b.core small{padding:0;background:none;font-size:calc(var(--fs,15px) * .56)}
#field.waves .b{box-shadow:0 10px 24px -12px var(--halo,rgba(20,10,60,.5))}

/* ---------- Sujets du moment | Loop ---------- */
.vtabs{display:inline-flex;align-items:center;gap:6px;margin-left:-12px}
.vt{display:inline-flex;align-items:center;gap:7px;border:0;border-radius:999px;padding:6px 12px;background:none;color:var(--ink);font:600 13.5px/1.2 'Inter','DM Sans',system-ui,sans-serif;letter-spacing:-.005em;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation;transition:background .2s,color .2s}
.vt:focus{outline:none}.vt:focus-visible{outline:2px solid var(--v);outline-offset:1px}
.vt span{font:inherit}.vt svg{flex:none;width:14px;height:14px}
.vt.on{font-weight:700}
#vt-loop.on{background:linear-gradient(135deg,var(--v),var(--p));color:#fff}
.sh .vtabs{margin-right:4px}
.loopv{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:min(56dvh,460px);text-align:center;padding:40px 16px}
.loopv.hid{display:none}
.loopv h2{margin:6px 0 0;font:800 clamp(34px,7vw,56px)/1 'Unbounded',sans-serif;letter-spacing:-.04em;background:linear-gradient(135deg,var(--v),var(--p));-webkit-background-clip:text;background-clip:text;color:transparent}
.loopv p{margin:0;color:var(--mute);font:500 16px 'Inter','DM Sans',sans-serif}
.loop-ring{position:relative;width:96px;height:96px;margin-bottom:6px}
.loop-ring i{position:absolute;inset:0;border-radius:50%;border:3px solid var(--v);opacity:0;animation:loopring 3.6s ease-out infinite}
.loop-ring i:nth-child(2){animation-delay:1.2s;border-color:var(--p)}.loop-ring i:nth-child(3){animation-delay:2.4s}
.loop-ring::after{content:"";position:absolute;inset:34px;border-radius:50%;background:linear-gradient(135deg,var(--v),var(--p))}
@keyframes loopring{0%{transform:scale(.35);opacity:.8}100%{transform:scale(1.15);opacity:0}}
@media (prefers-reduced-motion:reduce){.loop-ring i{animation:none;opacity:.25}}
@media (max-width:760px){.sh{margin-block-start:14px}}
@keyframes vsl{from{opacity:.4;transform:translateX(26px)}}@keyframes vsr{from{opacity:.4;transform:translateX(-26px)}}
#col.vsl{animation:vsl .24s ease-out}#col.vsr{animation:vsr .24s ease-out}
@media (prefers-reduced-motion:reduce){#col.vsl,#col.vsr{animation:none}}
#field.hid,#feedsec.hid,#shnote.hid{display:none!important}

#side .top #sn:empty{display:none}

/* couleur claire (jaune) pour une discussion privée : on fonce le ton des boutons pour que le texte blanc reste lisible */
#side.dm[data-lt],#dmside[data-lt]{--dmm:color-mix(in srgb,var(--dmc) 52%,#4a3000)}

/* « En direct » : au survol, la carte glisse de 3 px sans être rognée par le bord de la liste, reste pleine (couleur du sujet conservée sur le bord) */
#feed{padding-inline:8px;margin-inline:-8px}
.fcard:hover,.fcard:focus-visible{background:var(--card);border-color:color-mix(in srgb,var(--c) 60%,var(--line));box-shadow:0 6px 18px rgba(20,10,60,.08),inset 3px 0 0 var(--c)}

/* le nombre de membres en ligne n'est plus affiché au-dessus des tendances (téléphone) */
.onl,.onl.on{display:none!important}

/* badge « créateur du site » sur la fiche */
.pf-founder{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:4px 12px 4px 10px;border-radius:999px;background:linear-gradient(135deg,var(--v),var(--p));color:#fff;font:700 12.5px/1.2 'Inter','DM Sans',system-ui,sans-serif;letter-spacing:.01em}
.pf-founder::before{content:"★";font-size:12px}

/* compteur du titre d'un sujet : discret, visible seulement quand on approche de la limite */
.ntc{display:none;flex:1 1 100%;text-align:right;margin:-2px 2px 0;color:var(--mute);font-size:12px;font-weight:600}.ntc.on{display:block}.ntc.max{color:var(--p)}
.nts .ntc{margin:-6px 2px 0}

/* note « il te reste n sujets » */
.tqn{display:block;flex:1 1 100%;color:var(--mute);font-size:12.5px;line-height:1.4}.tqn.out{color:var(--p);font-weight:700}.tqn.hid{display:none}
.npop .tqn{padding:0 2px}

/* titre trop long : message rouge visible, champ et bouton signalés */
.ntc.bad{display:block;color:#d6336c;font-weight:700;font-size:13px;text-align:left}
.npop input.over,.nts input.over{border-color:#d6336c;box-shadow:0 0 0 3px color-mix(in srgb,#d6336c 16%,transparent)}
.npop>button:disabled,.nts>button[type=submit]:disabled{opacity:.45;cursor:not-allowed}
.chip.add.long{opacity:.7;cursor:not-allowed;border-style:dashed}

/* ---- Sélecteur « Ma couleur » : carré saturation/luminosité + teinte + code hexadécimal ---- */
.tsw button.tsw-own,.npop .tsw button.tsw-own{flex:none;display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 12px 0 5px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink);font:700 12.5px/1 'Inter','DM Sans',system-ui,sans-serif;cursor:pointer;transition:border-color .15s,background .15s}
.tsw .tsw-own i{flex:none;width:17px;height:17px;border-radius:50%;background:conic-gradient(#e5484d,#f5a524,#2fb344,#12b5a6,#1e88e5,#a43dd6,#e5484d);box-shadow:inset 0 0 0 1.5px var(--card)}
.tsw .tsw-own:hover{border-color:var(--v)}.tsw button.tsw-own.on,.npop .tsw button.tsw-own.on{border-color:var(--ink)}.tsw .tsw-own.on i{background:var(--c)}
.tsw button.tsw-own.lock,.npop .tsw button.tsw-own.lock{opacity:.7;padding-left:10px}.tsw .tsw-own.lock i{display:none}
.tsw .cp{flex:1 1 100%;display:flex;flex-direction:column;gap:12px;padding:12px;margin-top:2px;border:1px solid var(--line);border-radius:18px;background:var(--bg);animation:cpin .18s ease-out}.tsw .cp.hid{display:none}
@keyframes cpin{from{opacity:0;transform:translateY(-4px)}}
.cp-sv{position:relative;height:132px;border-radius:14px;cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;background:linear-gradient(to top,#000,rgba(0,0,0,0)),linear-gradient(to right,#fff,hsl(var(--h,262),100%,50%))}
.cp-sv:focus-visible{outline:2px solid var(--v);outline-offset:2px}
.cp-th{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:3px solid #fff;background:var(--c);box-shadow:0 0 0 1px rgba(0,0,0,.35),0 3px 8px rgba(0,0,0,.35);pointer-events:none}
.tsw input.cp-hue{-webkit-appearance:none;appearance:none;display:block;width:100%;height:14px;margin:0;padding:0;border:0;border-radius:999px;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);cursor:pointer;touch-action:none;box-shadow:none}
.cp-hue::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;border:3px solid #fff;background:hsl(var(--h,262),100%,50%);box-shadow:0 0 0 1px rgba(0,0,0,.35),0 3px 8px rgba(0,0,0,.3)}
.cp-hue::-moz-range-thumb{width:18px;height:18px;border-radius:50%;border:3px solid #fff;background:hsl(var(--h,262),100%,50%);box-shadow:0 0 0 1px rgba(0,0,0,.35),0 3px 8px rgba(0,0,0,.3)}
.cp-row{display:flex;align-items:center;gap:8px}
.cp-pv{flex:none;width:38px;height:38px;border-radius:50%;background:var(--c,#5b3df5);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.tsw input.cp-hex{flex:1;min-width:0;width:auto;height:38px;margin:0;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);font:600 15px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.05em;text-transform:uppercase}
.tsw input.cp-hex:focus{outline:none;border-color:var(--v);box-shadow:0 0 0 3px color-mix(in srgb,var(--v) 16%,transparent)}.tsw input.cp-hex.bad{border-color:#d6336c;box-shadow:0 0 0 3px color-mix(in srgb,#d6336c 14%,transparent)}
.tsw button.cp-ok,.npop .tsw button.cp-ok{flex:none;height:38px;padding:0 18px;border:0;border-radius:999px;background:var(--v);color:#fff;font:700 14px 'DM Sans','Inter',sans-serif;cursor:pointer}.tsw .cp-ok:disabled{opacity:.4;cursor:not-allowed}
.tcpop{width:min(340px,calc(100% - 24px))}
.tsw .cp,.tsw .cp *{box-sizing:border-box}
.tsw .cp{min-width:0;max-width:100%;width:100%}.tsw input.cp-hex{width:0;flex:1 1 0}.tsw input.cp-hue{min-width:0}
/* pas de zoom au pincement sur les bulles, Loop et le chat (le zoom reste possible sur les autres pages) */
#field,#loopview,#side{touch-action:pan-x pan-y}
/* pulsation d'une bulle : de l'activité vient d'arriver dans ce sujet (deux petites vagues claires à l'intérieur du rond) */
.b .pls{position:absolute;inset:0;border-radius:50%;overflow:hidden;pointer-events:none;z-index:-1}
.b .pls::before,.b .pls::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--onc,#fff) 46%,transparent) 0,color-mix(in srgb,var(--onc,#fff) 18%,transparent) 48%,transparent 72%);transform:scale(.12);opacity:0;animation:plsr 1.5s cubic-bezier(.2,.6,.3,1) var(--pd,0s) 1 both}
.b .pls::after{animation-delay:calc(var(--pd,0s) + .5s)}
@keyframes plsr{0%{transform:scale(.12);opacity:0}12%{opacity:1}100%{transform:scale(1.15);opacity:0}}
@media (prefers-reduced-motion:reduce){.b .pls{display:none}}
/* contour or premium : case dans « Lancer un sujet » + anneau doré autour de la bulle (visible par tous) */
.tsw button.tsw-gold,.npop .tsw button.tsw-gold{flex:none;width:24px;height:24px;padding:0;border:2px solid transparent;border-radius:50%;background:conic-gradient(from 200deg,#fff1a8,#f5c542,#b8860b,#f5c542,#fff1a8);cursor:pointer;box-shadow:inset 0 0 0 2px var(--card);transition:transform .15s,opacity .2s,filter .2s}
.tsw button.tsw-gold>i{display:none}
.tsw button.tsw-gold:hover{transform:scale(1.14)}.tsw button.tsw-gold.on{border-color:var(--ink);transform:scale(1.18)}
.tsw button.tsw-gold.lock{filter:grayscale(1);opacity:.45}.tsw button.tsw-gold.lock:hover{transform:none}
.tsw .tsw-gn{flex:1 1 100%;margin:2px 0 0;font-size:12.5px;line-height:1.4;color:var(--mute)}.tsw .tsw-gn.hid{display:none}
@media (max-width:760px){.tsw button.tsw-gold{width:30px;height:30px}}
.b.gold{position:relative}
.b.gold{z-index:2}
.b .gbd,.wv>.gbd{position:absolute;pointer-events:none;width:var(--gs,20px);height:var(--gs,20px);left:calc(85.36% + 1.77px - var(--gs,20px) / 2);top:calc(14.64% - 1.77px - var(--gs,20px) / 2);border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#f9e7a0,#d9aa3a 60%,#c28f26);box-shadow:0 0 0 2px #fff,0 3px 8px rgba(176,132,28,.45)}
.b .gbd svg,.wv>.gbd svg{width:60%;height:60%;fill:#fffaf0;stroke:#fffaf0;stroke-width:1.2;stroke-linejoin:round;filter:drop-shadow(0 1px 0 rgba(120,80,0,.35))}
/* couleurs d'un message (comptes médias) */
.fmp{margin:0 16px;padding:10px 12px;border:1px solid var(--line);border-radius:14px 14px 0 0;background:var(--card);display:flex;flex-direction:column;gap:8px}.fmp.hid{display:none}
.fmp-h{display:flex;justify-content:space-between;align-items:center;font-size:13.5px}.fmp-x{border:0;background:none;color:var(--mute);cursor:pointer;font-size:14px;padding:2px 4px}
.fmp-t{margin:0;font-size:12.5px;line-height:1.4;color:var(--mute)}
.fm-row{display:flex;flex-direction:column;gap:6px}.fm-row>small{font-weight:700;font-size:12px;color:var(--mute)}
.fmpv{padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--v) 6%,transparent);font-size:14px;overflow-wrap:anywhere}.fmpv.hid{display:none}.fmpv small{display:block;font-size:11px;color:var(--mute);margin-bottom:3px}.fmpv p{margin:0}
.fmp-r{align-self:flex-start;border:0;background:none;color:var(--v);font:600 13px 'DM Sans','Inter',sans-serif;cursor:pointer;padding:2px 0}.fmp-r.hid{display:none}
.fm{padding:.05em .3em;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.fm-all{display:block;width:fit-content;max-width:100%;padding:7px 11px;border-radius:12px}
.att.fmb.on{color:var(--v);border-color:var(--v)}.att.fmb.hid{display:none}
@media (min-width:761px){.npop .tsw{gap:6px}.npop .tsw button.tsw-c,.npop .tsw button.tsw-gold{width:22px;height:22px}.npop .tsw button.tsw-gold{margin-left:3px}}
.tsw button.tsw-gold{margin-left:3px}
/* médias : couleur propre, cartes d'actualité qui prennent du volume, mots liés vers leur site */
#side.pro .top{box-shadow:inset 0 3px 0 var(--mc)}
.post{--pk:var(--mc,var(--v));position:relative;border-left:4px solid var(--pk);transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s,border-color .2s;-webkit-tap-highlight-color:transparent}
.post .pdisc{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:6px 13px;border-radius:999px;background:color-mix(in srgb,var(--pk) 12%,transparent);color:var(--pk);font:700 13px 'DM Sans','Inter',sans-serif;transition:background .2s,color .2s,transform .22s}
.post .pdisc svg{flex:none}
@media (hover:hover){.post:hover{transform:translateY(-3px) scale(1.018);border-color:var(--pk);box-shadow:0 16px 30px -16px color-mix(in srgb,var(--pk) 70%,transparent),0 0 0 1.5px color-mix(in srgb,var(--pk) 45%,transparent);z-index:1}.post:hover .pdisc{background:var(--pk);color:var(--mcon,#fff);transform:translateX(3px)}}
.post:active,.post:focus-visible{transform:translateY(-2px) scale(1.012);border-color:var(--pk);box-shadow:0 14px 26px -16px color-mix(in srgb,var(--pk) 70%,transparent),0 0 0 1.5px color-mix(in srgb,var(--pk) 45%,transparent);outline:none}
.post:active .pdisc,.post:focus-visible .pdisc{background:var(--pk);color:var(--mcon,#fff)}
@media (prefers-reduced-motion:reduce){.post,.post:hover,.post:active{transform:none}}
.pcolor{display:flex;flex-direction:column;gap:10px}.pcolor>small{color:var(--mute);font-size:12.5px;line-height:1.4}
.pcdemo{cursor:default;pointer-events:none;border-color:var(--line)}.pcdemo p{margin:0 0 6px}
.fm-lk .fm-lkl{display:flex;gap:6px;flex-wrap:wrap}.fm-lk input{flex:1 1 160px;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg);font:inherit;font-size:14px;color:var(--ink)}
.fm-lkb,.fm-lkn{border:0;border-radius:999px;padding:7px 13px;font:700 13px 'DM Sans','Inter',sans-serif;cursor:pointer}.fm-lkb{background:var(--v);color:#fff}.fm-lkb:disabled{opacity:.4;cursor:not-allowed}.fm-lkn{background:color-mix(in srgb,var(--v) 10%,transparent);color:var(--v)}
.fm-lkh{color:var(--mute);font-size:12px}
a.fm-link{color:var(--v);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;cursor:pointer}

/* cercle or des sujets premium : se dessine au survol à partir de la pastille couronne ; tant qu'on est dans le chat du sujet, il se dessine en entier, se retire dans le même sens, puis recommence */
.b .gring{position:absolute;left:-4px;top:-4px;width:calc(100% + 8px);height:calc(100% + 8px);overflow:visible;pointer-events:none;filter:drop-shadow(0 0 3px rgba(240,207,106,.55))}
.b .gring circle{fill:none;stroke:#f1d374;stroke-linecap:round}
.b .gr-b{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .75s cubic-bezier(.25,.7,.2,1)}
.b .gr-a{stroke-dasharray:100;stroke-dashoffset:0;opacity:0;transition:opacity .4s}
.b.gold:hover .gr-b,.b.gold:focus-visible .gr-b{stroke-dashoffset:0}
.b.gold .gr-a{opacity:1}
.b.gold.live .gr-a{opacity:.22}
.b.gold.live .gr-b{animation:goldloop 3.4s ease-in-out infinite}
@keyframes goldloop{0%{stroke-dashoffset:100}46%{stroke-dashoffset:0}56%{stroke-dashoffset:0}100%{stroke-dashoffset:-100}}
@media (prefers-reduced-motion:reduce){.b.gold.live .gr-b{animation:none;stroke-dashoffset:0}.b .gr-b{transition:none}}
/* les bulles premium passent devant leurs voisines : leur pastille couronne n'est jamais cachée par une bulle qui la touche (la règle de #field.waves .b l'emportait sur .b.gold) */
#field.waves .b.gold:not(.core){z-index:2}

/* Ordinateur : le chat d'un sujet se pose PAR-DESSUS la page (comme le chat privé) au lieu de la pousser. Le bloc « Sujets du moment » et la colonne de droite ne bougent plus quand on ouvre ou ferme le chat. */
@media (min-width:761px){
 #side:not(.min){position:absolute;top:0;bottom:0;right:0;width:min(400px,100%);z-index:40;box-shadow:-12px 0 36px rgba(20,10,60,.16)}
}

/* actualité d'un média : le lien porte le nom du site, dans la couleur du média */
.post a.plk{display:flex;width:fit-content;max-width:100%;align-items:center;gap:5px;margin:0 0 10px;color:var(--pk);font-size:13.5px;font-weight:700;text-decoration:none}
.post a.plk::after{content:"\2197";font-size:14px;line-height:1}
.post a.plk:hover,.post a.plk:focus-visible{text-decoration:underline;text-underline-offset:3px}
/* chat d'une actualité : boutons en haut, titre dessous sur toute la largeur (et 3 lignes au plus) */
#side.thr .top{flex-wrap:wrap;row-gap:6px}
#side.thr .top>div:last-child{order:1;margin-left:auto}
#side.thr .top>div:first-child{order:2;flex:1 1 100%}
#side.thr #st{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:19px;line-height:1.25}

.wv>.gbd{z-index:3}

.pc-tags .ptg.own{display:inline-flex;align-items:center;border-radius:999px;background:color-mix(in srgb,var(--v) 10%,transparent)}
.pc-tags .ptg.own a.ht{background:none;padding:3px 2px 3px 10px}
.ptx{width:22px;height:22px;margin-right:2px;border:0;border-radius:50%;background:transparent;color:var(--v);font-size:16px;line-height:1;cursor:pointer;opacity:.6;display:grid;place-items:center;padding:0}
.ptx:hover,.ptx:focus-visible{opacity:1;background:color-mix(in srgb,var(--v) 18%,transparent)}
.bar:has(.menu.on){z-index:48}

/* Panneau d'un hashtag (ouvert dans l'appli, comme la fiche d'un membre) */
.htov{position:fixed;inset:0;z-index:65;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(20,10,45,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:pffade .2s ease both}
.htp{--c:var(--v);position:relative;width:100%;max-width:640px;max-height:calc(100dvh - 48px);overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:28px;box-shadow:0 30px 80px rgba(20,10,45,.35);padding:0 0 22px;animation:pfup .32s cubic-bezier(.2,.8,.2,1) both}
.htp-x{position:absolute;top:14px;right:14px;z-index:3;width:38px;height:38px;border-radius:50%;border:0;display:grid;place-items:center;background:rgba(0,0,0,.28);color:#fff;cursor:pointer}
.htp-x:hover{background:rgba(0,0,0,.45)}.htp-x svg{width:18px;height:18px}
.htp-h{padding:28px 64px 18px 26px;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 26%,var(--card)),var(--card))}
.htp-h h2{margin:0;font-size:clamp(26px,5vw,34px);line-height:1.1;word-break:break-word;color:var(--c)}
.htp-s{margin:8px 0 0;color:var(--mute);font-size:14px}
.htp-q{padding:14px 26px 0}.htp-q input{width:100%;box-sizing:border-box;padding:11px 16px;border-radius:999px;border:1px solid var(--line);background:var(--bg,transparent);color:inherit;font:inherit;font-size:15px}
.htp-sg,.htp-m{display:flex;flex-wrap:wrap;gap:8px;padding:0 26px}.htp-sg:not(:empty){padding-top:12px}
.htp h3{margin:20px 26px 10px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.htp-m h3{margin:20px 0 2px;flex-basis:100%}
.htp-l{display:flex;flex-direction:column;gap:8px;padding:0 26px}.htp-l h3{margin:20px 0 2px}
.htp-r{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:13px 14px;border:1px solid var(--line);border-radius:16px;background:var(--card);color:inherit;font:inherit;cursor:pointer;transition:background .15s,border-color .15s}
.htp-r:hover,.htp-r:focus-visible{background:color-mix(in srgb,var(--c) 9%,var(--card));border-color:var(--c)}
.htp-r i{flex:none;width:12px;height:12px;border-radius:50%;background:var(--c)}
.htp-r b{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.htp-r .t2{flex:none;font-size:12px;color:var(--mute)}.htp-r .live{flex:none;font-size:12px;font-weight:700;color:#1a9d5c}.htp-r .go{flex:none;font-size:20px;color:var(--mute)}
.htp-e{margin:18px 26px 0;color:var(--mute)}
@media (max-width:760px){.htov{padding:0;align-items:flex-end}.htp{max-width:none;max-height:94dvh;border-radius:26px 26px 0 0;border-bottom:0;animation:pfsheet .34s cubic-bezier(.2,.8,.2,1) both}.htp-r .t2:nth-of-type(n+2){display:none}}
@media (prefers-reduced-motion:reduce){.htov,.htp{animation:none}}
:root[data-motion=off] .htov,:root[data-motion=off] .htp{animation:none}


/* ---------- Proches : l'espace privé entre contacts ---------- */
.circv{max-width:640px;margin:0 auto;padding:6px 16px 40px}.circv.hid{display:none}
.cv-h{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin:4px 0 16px}
.cv-h h2{margin:0;font:800 clamp(24px,5vw,32px)/1.1 'Unbounded',sans-serif;letter-spacing:-.03em;background:linear-gradient(135deg,var(--v),var(--p));-webkit-background-clip:text;background-clip:text;color:transparent}
.cv-h p{margin:6px 0 0;color:var(--mute);font-size:14px;max-width:44ch}
.cv-add{flex:none;display:inline-flex;align-items:center;gap:7px;border:0;border-radius:999px;padding:10px 16px;background:linear-gradient(135deg,var(--v),var(--p));color:#fff;font:700 14px 'Inter','DM Sans',sans-serif;cursor:pointer}.cv-add svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.cv-c{background:var(--card);border:1px solid var(--line);border-radius:22px;margin:0 0 16px;overflow:hidden}
.cv-ch{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px 10px}.cv-ch small{color:var(--mute);font-size:12px}
.cv-who{display:inline-flex;align-items:center;gap:10px;border:0;background:none;padding:0;color:inherit;font:inherit;font-weight:700;cursor:pointer;min-width:0}.cv-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cv-m{position:relative;display:block;width:100%;padding:0;border:0;background:#0f0a22;cursor:zoom-in;overflow:hidden}.cv-m img{display:block;width:100%;height:auto;min-height:180px;max-height:min(78dvh,760px);object-fit:contain;margin:0 auto}
.cv-play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(10,5,25,.55);backdrop-filter:blur(4px)}
.cv-play::after{content:"";position:absolute;left:25px;top:19px;border-left:20px solid #fff;border-top:13px solid transparent;border-bottom:13px solid transparent}
.cv-gif{position:absolute;left:12px;top:12px;font:700 11px 'Inter',sans-serif;letter-spacing:.06em;color:#fff;background:rgba(10,5,25,.6);padding:3px 8px;border-radius:999px;font-style:normal}
.cv-cap{margin:12px 16px 0;overflow-wrap:anywhere}
.cv-bar{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px 14px}
.cv-b{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:8px 14px;font:600 13.5px 'Inter','DM Sans',sans-serif;cursor:pointer;transition:background .15s,border-color .15s}
.cv-b svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cv-b:hover:not(:disabled){border-color:var(--v)}.cv-b:disabled{cursor:default;opacity:.85}.cv-b.hid{display:none}
.cv-b.cv-d1 span:empty,.pv-dis span:empty{display:none}.cv-b.cv-d1{padding:8px 14px}
.cv-b.cv-e1.on{background:var(--p);border-color:var(--p);color:#fff}.cv-b.cv-d1.on{background:color-mix(in srgb,#e5484d 11%,var(--card));border-color:color-mix(in srgb,#e5484d 55%,transparent)}
.cv-more{display:block;margin:6px auto 0;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:10px 20px;font:700 14px 'Inter',sans-serif;cursor:pointer}
.cv-e{color:var(--mute);text-align:center;padding:30px 0}
.cv-empty{text-align:center;padding:40px 12px;border:1px dashed var(--line);border-radius:22px}.cv-empty b{display:block;font-size:18px;margin-bottom:6px}.cv-empty p{color:var(--mute);margin:0 auto 16px;max-width:38ch}
@media (max-width:760px){.circv{padding:4px 12px 90px}.vtabs{gap:2px}.vt{padding:6px 9px;gap:5px}.vt svg{width:14px;height:14px}}
@media (max-width:420px){.vt{font-size:13px;padding:6px 7px}}

/* visionneuse : contre-like et commentaires */
.pv-bar{flex-wrap:wrap;justify-content:center}
.pv-echo.hid,.pv-cm.hid{display:none}
.pv-dis.on{background:rgba(229,72,77,.2);border-color:rgba(229,72,77,.65)}.pv-cmb.on{background:rgba(255,255,255,.28)}
.pv-cm{position:absolute;z-index:6;right:0;top:0;bottom:0;width:min(380px,100%);display:flex;flex-direction:column;background:rgba(24,14,48,.97);color:#fff;border-left:1px solid rgba(255,255,255,.14);box-shadow:-20px 0 50px rgba(0,0,0,.35)}
.pv-cmh{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 12px;border-bottom:1px solid rgba(255,255,255,.12)}
.pv-cmx{width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;cursor:pointer}.pv-cmx svg{width:16px;height:16px}
.pv-cml{flex:1;overflow:auto;padding:12px 16px;display:flex;flex-direction:column;gap:14px}
.pv-cme{margin:20px 0;text-align:center;color:#b9b0d8}
.pv-cmr{display:flex;gap:10px}.pv-cmr .mav{width:32px;height:32px;font-size:13px}
.pv-cmb2{min-width:0;flex:1}.pv-cmb2 p{margin:2px 0 0;overflow-wrap:anywhere;line-height:1.35}
.pv-cmt{display:flex;align-items:center;gap:8px}.pv-cmt small{color:#b9b0d8;font-size:12px}
.pv-cmd{margin-left:auto;border:0;background:none;color:#b9b0d8;cursor:pointer;display:grid;place-items:center;padding:4px}.pv-cmd:hover{color:#fff}.pv-cmd svg{width:15px;height:15px}
.pv-cmf{display:flex;gap:8px;padding:12px 16px 16px;border-top:1px solid rgba(255,255,255,.12)}
.pv-cmf input{flex:1;min-width:0;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;border-radius:999px;padding:10px 14px;font:inherit;font-size:16px}
.pv-cmf button{border:0;border-radius:999px;padding:0 16px;background:var(--p);color:#fff;font:700 14px 'Inter',sans-serif;cursor:pointer}.pv-cmf button:disabled{opacity:.6}
.pv-cm svg,.pv-dis svg,.pv-cmb svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:760px){.pv-cm{top:auto;left:0;width:auto;height:64dvh;border-left:0;border-top:1px solid rgba(255,255,255,.14);border-radius:22px 22px 0 0;box-shadow:0 -20px 50px rgba(0,0,0,.4)}.pv-echo{padding:9px 13px;font-size:13.5px}}

/* « Meh » : une flèche rouge vers le bas ; au clic elle devient un point, puis le point devient une flèche en dégradé violet → rouge (le rouge domine) */
.meh path{stroke:#e5484d;stroke-width:2.2;transform-box:fill-box}
.meh .meh-d{fill:url(#mehg);stroke:none;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.2)}
.on>.meh .meh-a,.on>.meh .meh-h{stroke:url(#mehg)}
.on.pop>.meh .meh-a{animation:mehshaft .95s cubic-bezier(.3,.7,.3,1) both}
.on.pop>.meh .meh-h{animation:mehhead .95s ease both}
.on.pop>.meh .meh-d{animation:mehdot .95s ease both}
@keyframes mehshaft{0%{transform:scaleY(1);transform-origin:50% 50%;opacity:1}26%{transform:scaleY(0);transform-origin:50% 50%;opacity:0}52%{transform:scaleY(0);transform-origin:50% 0;opacity:1}100%{transform:scaleY(1);transform-origin:50% 0;opacity:1}}
@keyframes mehhead{0%{opacity:1;transform:none}22%{opacity:0;transform:translateY(-4px)}64%{opacity:0;transform:translateY(-5px)}100%{opacity:1;transform:none}}
@keyframes mehdot{0%{opacity:0;transform:scale(.2)}22%{opacity:1;transform:scale(1)}46%{opacity:1;transform:scale(1.18)}66%{opacity:0;transform:scale(.5) translateY(3px)}100%{opacity:0;transform:scale(.2)}}
@media (prefers-reduced-motion:reduce){.on.pop>.meh .meh-a,.on.pop>.meh .meh-h,.on.pop>.meh .meh-d{animation:none}}
:root[data-motion=off] .on.pop>.meh .meh-a,:root[data-motion=off] .on.pop>.meh .meh-h,:root[data-motion=off] .on.pop>.meh .meh-d{animation:none}

/* flèche « Meh » sur les messages (chats, messages privés, En direct) */
.echo.dis{padding:5px 10px}.echo.dis span:empty{display:none}.echo.dis:hover{border-color:#e5484d;color:#e5484d}
.echo .meh{fill:none;stroke-linecap:round;stroke-linejoin:round}.echo.dis.hid{display:none}
.echo.dis.on{background:color-mix(in srgb,#e5484d 12%,var(--card));border-color:color-mix(in srgb,#e5484d 55%,transparent);color:#e5484d}
.echo.dis.pop::after{border-color:#e5484d}
.echo.dis.ro:hover{border-color:var(--line);color:var(--mute)}
.fcard .echo.dis{padding:4px 8px}.fcard .echo.dis:has(span:empty){padding:5px 7px}

/* ---------- Reloop : encadré violet d'un message republié ---------- */
.rl{position:relative;overflow:hidden;border-radius:20px;padding:15px 18px 14px;color:#fff;text-align:left;background:linear-gradient(135deg,var(--v) 0%,color-mix(in srgb,var(--v) 55%,var(--p)) 55%,var(--p) 100%);box-shadow:0 10px 26px color-mix(in srgb,var(--v) 30%,transparent)}
.rl::before{content:'\201C';position:absolute;right:14px;top:-18px;font:800 120px/1 Georgia,serif;color:rgba(255,255,255,.14);pointer-events:none}
.rl-h{display:flex;align-items:center;gap:7px;font:700 12px 'DM Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;opacity:.9;margin-bottom:8px}
.rl-h svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rl-b{position:relative;margin:0 0 11px;font-size:16.5px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;max-height:14em;overflow:auto}
.rl-f{display:flex;flex-wrap:wrap;gap:0 2px;align-items:baseline;font:600 13px 'Inter','DM Sans',sans-serif;color:#fff;background:none;border:0;padding:0;text-align:left;opacity:.95}
button.rl-f{cursor:pointer;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:3px}button.rl-f:hover{text-decoration-color:#fff}
.rl-f span{font-weight:500;opacity:.85}
.cv-rl .cv-cap{margin:2px 16px 10px;font-size:15.5px}.cv-rl>.rl{margin:0 12px 6px}
/* carte Reloop du fil Amis : un seul bloc doux (mêmes teintes que le violet-rose, très éclaircies), photo et nom à gauche, heure à droite, gestes dans le bloc */
.cv-c.cv-rl{padding:14px 16px 12px;background:linear-gradient(135deg,color-mix(in srgb,var(--v) 9%,var(--card)) 0%,color-mix(in srgb,var(--p) 10%,var(--card)) 100%);border-color:color-mix(in srgb,var(--v) 20%,var(--line));box-shadow:0 6px 20px -14px color-mix(in srgb,var(--v) 55%,transparent)}
.cv-rl .cv-ch{padding:0 0 10px}.cv-rl .cv-ch small{align-self:flex-start;margin-top:3px}
.cv-id{display:flex;flex-direction:column;min-width:0;text-align:left;line-height:1.2}
.cv-sub{display:inline-flex;align-items:center;gap:4px;font:600 11.5px 'Inter',sans-serif;color:color-mix(in srgb,var(--v) 78%,var(--ink));letter-spacing:.01em}.cv-sub svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cv-rl .cv-cap{margin:0 0 10px;font-size:15.5px;line-height:1.45}
.rlq2{position:relative;margin:0;padding:11px 14px 10px 16px;border-radius:14px;background:color-mix(in srgb,var(--card) 72%,transparent);border:1px solid color-mix(in srgb,var(--v) 12%,var(--line))}
.rlq2::before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--v),var(--p))}
.rlq2-b{margin:0 0 7px;font-size:16px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;max-height:14em;overflow:auto;color:var(--ink)}
.rlq2-f{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:0 2px;border:0;background:none;padding:0;font:600 12.5px 'Inter','DM Sans',sans-serif;color:color-mix(in srgb,var(--v) 80%,var(--ink));cursor:pointer;text-align:left}.rlq2-f:hover b{text-decoration:underline}.rlq2-f span{font-weight:500;color:var(--mute)}
.cv-rl .cv-bar{padding:10px 0 0;gap:6px}.cv-rl .cv-b{padding:6px 12px;font-size:13px;background:color-mix(in srgb,var(--card) 80%,transparent);border-color:color-mix(in srgb,var(--v) 14%,var(--line))}
.cv-rl .cv-b svg{width:16px;height:16px}
.rl-pv{position:relative;padding:18px 18px 4px;background:var(--card)}.rl-pv .qp-x{top:24px;right:24px;background:rgba(255,255,255,.22)}
.rlq .rl-pv .rl{padding-right:50px}.rl-hint{margin:0 0 12px;color:var(--mute);font-size:13.5px}
.pv-rl{width:min(560px,92vw);margin:auto}.pv-rl .rl-b{font-size:19px}
.echo.rlb:hover{border-color:var(--v);color:var(--v)}.echo.rlb svg{stroke:currentColor;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}

/* Reloop : flèche vers la droite ; une fois reloop, elle fait un tour sur elle-même puis file à droite dans un flash */
.echo.rlb{position:relative}.echo.rlb svg{transform-box:fill-box;transform-origin:center}
.echo.rlb.rlfx svg{animation:rlgo 1s cubic-bezier(.45,0,.2,1) both}
.echo.rlb.rlfx::after{content:'';position:absolute;inset:-2px;border-radius:999px;pointer-events:none;background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0) 75%);animation:rlflash 1s ease-out both}
@keyframes rlgo{0%{transform:rotate(0) translateX(0);opacity:1}46%{transform:rotate(360deg) scale(1.3) translateX(0);opacity:1}64%{transform:rotate(360deg) scale(1.3) translateX(6px)}80%{transform:rotate(360deg) scale(1) translateX(24px);opacity:0}81%{transform:rotate(360deg) translateX(-18px);opacity:0}100%{transform:rotate(360deg) translateX(0);opacity:1}}
@keyframes rlflash{0%,52%{opacity:0;transform:scale(.6)}66%{opacity:1;transform:scale(1.15)}100%{opacity:0;transform:scale(1.5)}}
@media (prefers-reduced-motion:reduce){.echo.rlb.rlfx svg{animation:none}}
:root[data-motion=off] .echo.rlb.rlfx svg,:root[data-motion=off] .echo.rlb.rlfx::after{animation:none}

/* ---------- Bulles épurées : couleurs d'origine, tout uni, texte plus fin, calme ---------- */
#field.waves .b{box-shadow:none;font-family:'Inter','DM Sans',system-ui,sans-serif}
#field.waves .b.core{box-shadow:none}
#field.waves .b.core::before,#field.waves .b.core::after{display:none}
#field.waves .b span{font-weight:600;letter-spacing:-.01em;text-shadow:none}
#field.waves .b.core span{font-weight:600;letter-spacing:-.02em}
#field.waves .b small{font-weight:400;opacity:.8;color:inherit}
/* le grossissement au survol est piloté par le script (propriété scale), pour que les voisines en tiennent compte */
#field.waves .b:hover,.b:hover{transform:none}
/* premium : fin cercle or autour de la bulle, toujours visible, et petite couronne discrète à l'intérieur */
.b .gring{left:-4px;top:-4px;filter:none}
.b .gring circle{stroke:#e2b73e}
/* le cercle qui tourne est revenu : un fin cercle or discret reste visible ; au survol il se dessine autour de la bulle à partir de la couronne, et tant qu'on est dans le chat du sujet il tourne en boucle (se dessine, se retire, recommence) */
.b .gr-a{opacity:.3}
.b.gold.live .gr-a{opacity:.3}
.b .gr-b{stroke:#f1c40f;filter:drop-shadow(0 0 3px rgba(241,196,15,.55))}
#field.waves .b span{overflow-wrap:anywhere}
/* couronne premium : posée sur le cercle or, en haut à droite, sans pastille ; dégradé or, contour blanc fin pour rester lisible sur toutes les couleurs */
.svgdef{position:absolute;width:0;height:0;overflow:hidden}
.gcr{position:absolute;pointer-events:none;line-height:0;width:var(--gs,20px);height:var(--gs,20px);left:calc(85.36% + 1.77px - var(--gs,20px) / 2);top:calc(14.64% - 1.77px - var(--gs,20px) / 2);rotate:16deg;filter:drop-shadow(0 1px 2px rgba(120,70,0,.4));z-index:3}
.gcr svg{display:block;width:100%;height:100%;fill:url(#gcg);stroke:#fff;stroke-width:1.5;stroke-linejoin:round;paint-order:stroke}
.wv>.gcr{z-index:3}
/* affichage « Tuiles » et « Liste » (choisi dans les Réglages) */
#field.tv-tiles,#field.tv-list,#field.tv-graph{display:block;min-height:0;align-content:normal;padding:14px 0 18px}
.tvbox{display:grid;gap:12px;width:100%}
.tvi{position:relative;border:1.5px solid transparent;font:inherit;text-align:left;cursor:pointer;color:var(--ink);background:var(--card);overflow:hidden;transition:transform .15s,box-shadow .15s}
.tvi:hover{transform:translateY(-2px);box-shadow:0 10px 22px -14px rgba(40,20,100,.45)}
.tvi b{display:flex;align-items:center;gap:6px;font-weight:600;line-height:1.2}
.tvi small{color:var(--mute);font-weight:400}
.tvi .gcr{position:static;rotate:16deg;width:15px;height:15px;flex:none;filter:drop-shadow(0 1px 1px rgba(120,70,0,.3))}
.tvi.gold{border-color:#e2b73e}
.tvi.tvp::after{content:"";position:absolute;inset:0;background:var(--c);opacity:0;animation:tvpulse 2.4s ease-out 1;pointer-events:none}
@keyframes tvpulse{0%{opacity:.22}100%{opacity:0}}
:root[data-motion=off] .tvi.tvp::after{animation:none}
@media (prefers-reduced-motion:reduce){.tvi.tvp::after{animation:none}}
/* tuiles */
#field.tv-tiles .tvbox{grid-template-columns:repeat(3,minmax(0,1fr))}
#field.tv-tiles .tvi{border-radius:18px;padding:14px 14px 12px 18px;min-height:92px;display:flex;flex-direction:column;justify-content:space-between}
#field.tv-tiles .tvi .tvd{position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:0 4px 4px 0;background:var(--c)}
#field.tv-tiles .tvi b{font-size:15px;flex-wrap:wrap;overflow-wrap:anywhere}
#field.tv-tiles .tvi.top{grid-column:1/-1;min-height:122px;background:var(--c);color:var(--onc);padding:20px 22px;justify-content:flex-end}
#field.tv-tiles .tvi.top .tvd{display:none}
#field.tv-tiles .tvi.top b{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.08}
#field.tv-tiles .tvi.top small{color:inherit;opacity:.9;font-size:13.5px;margin-top:6px}
/* liste */
#field.tv-list .tvbox{gap:8px}
#field.tv-list .tvi{border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:12px}
#field.tv-list .tvi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w,0);background:linear-gradient(90deg,color-mix(in srgb,var(--c) 9%,transparent),color-mix(in srgb,var(--c) 26%,transparent));border-radius:0 12px 12px 0;pointer-events:none;transition:width 2s cubic-bezier(.4,.1,.2,1) var(--dl,0s)} /* la barre se remplit de sa couleur, en s'allongeant doucement */
@media (prefers-reduced-motion:reduce){#field.tv-list .tvi::before{transition:none}}
:root[data-motion=off] #field.tv-list .tvi::before{transition:none}
#field.tv-list .tvi .tvd{width:12px;height:12px;border-radius:50%;background:var(--c);flex:none;position:relative}
#field.tv-list .tvi b{flex:1;min-width:0;font-size:15px;position:relative}
#field.tv-list .tvi small{position:relative;font-size:13px;white-space:nowrap}
#field.tv-list .tvi.top{padding:18px 16px}#field.tv-list .tvi.top b{font-size:19px;font-weight:700}
@media (max-width:560px){#field.tv-tiles .tvbox{grid-template-columns:repeat(2,minmax(0,1fr))}#field.tv-tiles .tvi.top b{font-size:23px}}
#shnote2{display:none}
:root[data-tview=tiles] #shnote2,:root[data-tview=list] #shnote2,:root[data-tview=graph] #shnote2{display:inline}
:root[data-tview=tiles] #shnote,:root[data-tview=list] #shnote,:root[data-tview=graph] #shnote{display:none}
#shnote2.hid{display:none!important}
.wvday{margin:14px auto 0;text-align:center;color:var(--mute);font:500 13.5px 'Inter','DM Sans',system-ui,sans-serif}.wvday.hid{display:none}
/* choix de l'affichage des sujets (Réglages) */
.vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0}
.vopt{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 6px 10px;border:2px solid var(--line);border-radius:16px;background:var(--card);color:var(--ink);font:600 14px 'DM Sans',sans-serif;cursor:pointer;transition:border-color .2s,transform .2s,background .2s,box-shadow .2s}
.vopt svg{width:100%;max-width:84px;height:auto}
.vopt:hover{transform:translateY(-2px)}
.vopt.on{border-color:var(--v);background:color-mix(in srgb,var(--v) 9%,var(--card));box-shadow:0 8px 20px -12px var(--v);transform:translateY(-2px)}
.vval{width:100%;padding:13px;border:0;border-radius:30px;background:linear-gradient(135deg,var(--v),var(--p));color:#fff;font:700 15px 'DM Sans',sans-serif;cursor:pointer;transition:background .25s,color .25s,transform .15s,opacity .2s}
.vval:active:not(:disabled){transform:scale(.98)}
.vval.same{background:var(--bg);color:var(--mute);border:1px solid var(--line);cursor:default}
.vval.done{background:#12a37f;color:#fff;opacity:1;animation:vpop .5s cubic-bezier(.2,.9,.25,1.3)}
@keyframes vpop{0%{transform:scale(.94)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
.vmsg{min-height:18px;margin:8px 2px 0;color:var(--mute);font-size:13px}
@media (prefers-reduced-motion:reduce){.vval.done{animation:none}.vopt{transition:none}}
/* pendant l'essai d'un affichage, le fond du panneau devient presque transparent : on voit le résultat se mettre en place */
.sheet.on.vprev{background:rgba(15,8,35,.1);-webkit-backdrop-filter:none;backdrop-filter:none}
.wvday.empty0{margin-top:18px}.wvgo{border:0;border-radius:999px;padding:11px 22px;background:linear-gradient(135deg,var(--v),var(--p));color:#fff;font:700 15px 'DM Sans',system-ui,sans-serif;cursor:pointer;box-shadow:0 10px 22px -12px var(--v);transition:transform .15s}.wvgo:hover{transform:translateY(-2px)}.wvgo:active{transform:scale(.97)}
/* messages d'aujourd'hui déjà archivés : lisibles dans le chat, plus discrets, sans like */
.m.old{opacity:.8}.m.old .tl{font-variant-numeric:tabular-nums}

.oldsep{display:flex;align-items:center;gap:10px;margin:10px 4px;color:var(--mute);font:600 12px 'DM Sans',system-ui,sans-serif}
.oldsep::before,.oldsep::after{content:"";flex:1;height:1px;background:var(--line)}
.msgs .oldsep.now,#msgs .oldsep.now{color:var(--v)}
.b small:empty,.tvi small:empty{display:none}

/* Amis : textes partagés (avec photo, vidéo ou lien facultatifs) */
.pst{margin:0}.pst-b{margin:0;font-size:16px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink)}
.cv-post .pst{padding:2px 16px 14px}.cv-post .pst-b{font-size:17px}
.pst-m{padding:12px 16px 0}
.pst-l{display:flex;align-items:center;gap:11px;margin-top:10px;padding:10px 13px;border-radius:16px;border:1px solid var(--line);background:color-mix(in srgb,var(--v) 5%,var(--card));color:var(--ink);text-decoration:none;min-width:0;transition:border-color .15s,background .15s}
.pst-l:hover{border-color:color-mix(in srgb,var(--v) 45%,var(--line));background:color-mix(in srgb,var(--v) 9%,var(--card))}
.pst-l svg{flex:none;width:30px;height:30px;padding:6px;border-radius:50%;background:color-mix(in srgb,var(--v) 14%,var(--card));color:var(--v);fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;box-sizing:border-box}
.pst-l span{display:flex;flex-direction:column;min-width:0}.pst-l b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pst-l small{color:var(--mute);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cv-post .cv-bar{border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.pv-rl .pst{background:var(--card);border-radius:20px;padding:20px 20px 18px;max-height:62dvh;overflow:auto}.pv-rl .pst-b{font-size:19px}
.qp-tl{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}.qp-tl h3{margin:0}.qp-cnt{color:var(--mute);font-size:12px}
.qp-ta{display:block;width:100%;box-sizing:border-box;min-height:120px;max-height:40dvh;resize:vertical;padding:12px 14px;margin-bottom:10px;border:1.5px solid var(--line);border-radius:16px;background:var(--bg);color:var(--ink);font:16px/1.45 'DM Sans',sans-serif}
.qp-ta:focus{outline:none;border-color:var(--v)}
.qp-att{display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;border:1.5px dashed var(--line);border-radius:16px;background:none;color:var(--mute);font:600 14.5px 'DM Sans',sans-serif;cursor:pointer}.qp-att svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.qp-att:hover{border-color:var(--v);color:var(--v)}
.qp-att.hid,.qp-pv.hid{display:none}.qp-note{margin:10px 2px 0;color:var(--mute);font-size:12.5px}

/* Fiche profil façon réseau social : bannière qui s'estompe vers le fond, grande photo ronde à droite */
.pf-cv{position:relative;height:150px;overflow:hidden}
.pf-cv.img{height:auto;aspect-ratio:5/2;background:var(--bg)}.pf-cv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;user-select:none}
.pf-cv::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 0,transparent 30%,color-mix(in srgb,var(--card) 55%,transparent) 68%,var(--card) 100%)}
.pf-hd{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:14px;margin-top:-76px;padding:0 24px;text-align:left}
.pf-id{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0;flex:1;padding-bottom:10px}
.pf-hd h2{margin:0;font-size:clamp(24px,5.2vw,30px);line-height:1.1;flex-wrap:wrap}
.pf-av{flex:none;width:128px;height:128px;font-size:48px}
.pf-founder{margin-top:0}
.pf-bio,.pf-bio.none{text-align:left}.pf-meta,.pf-int,.pf .pc-tags{justify-content:flex-start}
.bn-pv{position:relative;aspect-ratio:5/2;border-radius:16px;overflow:hidden;margin:4px 0 12px;background:linear-gradient(135deg,var(--pc),color-mix(in srgb,var(--pc) 55%,var(--p)))}
.bn-pv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bn-pv::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 0,transparent 35%,var(--card) 100%);pointer-events:none}
.crop.rect::after{box-shadow:none;border-radius:0;border:2px solid rgba(255,255,255,.85)}.crop.rect .cropcv{width:100%;height:100%}.cropbox.wide{width:min(380px,100%)}
@media (max-width:640px){.pf-cv{height:120px}.pf-hd{margin-top:-64px;padding:0 18px}.pf-av{width:112px;height:112px;font-size:42px}}

/* Affichage « Graphique » */
.vgrid{grid-template-columns:repeat(4,minmax(0,1fr))}@media (max-width:520px){.vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
#field.tv-graph{padding:6px 0 14px}

/* petites retouches : bulle « commenter » seule, survol plus foncé des Reloop */
.cv-b.cv-k1 span:empty{display:none}.cv-b.cv-k1{padding:8px 13px}
.cv-c.cv-rl{transition:background .25s,border-color .25s,box-shadow .25s}
.cv-c.cv-rl:hover{background:linear-gradient(135deg,color-mix(in srgb,var(--v) 19%,var(--card)) 0%,color-mix(in srgb,var(--p) 20%,var(--card)) 100%);border-color:color-mix(in srgb,var(--v) 38%,var(--line));box-shadow:0 10px 26px -14px color-mix(in srgb,var(--v) 70%,transparent)}
.cv-c.cv-rl:hover .rlq2{background:color-mix(in srgb,var(--card) 58%,transparent);border-color:color-mix(in srgb,var(--v) 26%,var(--line))}
.echo.rlb.on{transition:background .2s,border-color .2s,color .2s}.echo.rlb.on:hover{background:color-mix(in srgb,var(--v) 24%,var(--card));border-color:var(--v);color:color-mix(in srgb,var(--v) 78%,#000)}


/* Choix de l'affichage sur l'accueil : une bulle ronde qui se déroule vers la gauche avec 4 petites images */
.sh#shnow{position:relative}
.vpick{margin-left:auto;display:inline-flex;flex-direction:row-reverse;align-items:center;align-self:center;gap:2px;height:38px;padding:0 3px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--card) 70%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .2s,background .2s,box-shadow .3s}
.vpick.hid{display:none}
.vp-tg,.vp-b{flex:none;width:32px;height:32px;border:0;border-radius:50%;background:none;color:var(--mute);display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.vp-tg svg,.vp-b svg{width:18px;height:18px}
.vp-tg{color:var(--v)}.vpick:hover,.vpick.open{border-color:color-mix(in srgb,var(--v) 45%,var(--line));box-shadow:0 8px 22px -14px var(--v)}
.vp-tg:hover{background:color-mix(in srgb,var(--v) 12%,transparent)}
.vp-o{display:flex;align-items:center;gap:2px;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transition:max-width .42s cubic-bezier(.2,.85,.25,1),opacity .25s ease,margin .3s}
.vpick.open .vp-o{max-width:300px;opacity:1;margin-right:2px}
.vp-b:hover,.vp-b:focus-visible{background:color-mix(in srgb,var(--v) 14%,transparent);color:var(--v);transform:translateY(-1px)}
.vp-b.on{background:var(--v);color:#fff}
.vp-n{padding:0 10px 0 6px;font:700 12.5px 'DM Sans',sans-serif;color:var(--mute)}
@media (max-width:760px){.vp-n{display:none}.vpick.open .vp-o{max-width:200px}}
@media (prefers-reduced-motion:reduce){.vp-o{transition:none}}

/* Graphique « courbe » : axe vertical gradué (messages depuis minuit), une seule ligne, de petites bulles posées dessus, aucun fond. La pile de calques est isolée : rien ne déborde sur les réglages ou le profil. */
.gx-h{margin:2px 4px 6px;color:var(--mute);font-size:13px}
.gx{position:relative;isolation:isolate;z-index:0;display:block;margin:0;padding:0 0 0 34px;overflow:clip;overflow-clip-margin:12px;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.gx-y{position:absolute;left:0;top:0;bottom:0;width:30px;pointer-events:none}
.gx-yt{position:absolute;right:4px;transform:translateY(-50%);font:600 12px 'DM Sans',sans-serif;color:var(--mute);font-variant-numeric:tabular-nums}
.gx-cap{position:absolute;left:34px;top:0;font-size:12px;font-weight:600;color:var(--mute);pointer-events:none}
.gx-sc{position:relative;overflow-x:auto;overflow-y:clip;overflow-clip-margin:12px;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}.gx-sc::-webkit-scrollbar{display:none}
.gx-in{position:relative}
.gx-svg{position:absolute;left:0;top:0;overflow:visible}
.gx-h1{stroke:color-mix(in srgb,var(--mute) 22%,transparent);stroke-width:1;stroke-dasharray:2 5}
.gx-base{stroke:color-mix(in srgb,var(--mute) 55%,transparent);stroke-width:1.5}
.gx-v1{stroke:color-mix(in srgb,var(--mute) 14%,transparent);stroke-width:1}
.gx-s1{stop-color:var(--v)}.gx-s2{stop-color:var(--p)}
.gx-line{fill:none;stroke:url(#gxgrad);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.gx-glow{fill:none;stroke:url(#gxgrad);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;opacity:.18;filter:blur(3px)}
.gx-xl{position:absolute;font-size:12px;font-weight:600;color:var(--mute);pointer-events:none;white-space:nowrap}
.gxg{position:absolute;left:0;top:0;width:0;height:0;will-change:transform;transition:opacity .35s}
.gxb{position:absolute;display:grid;place-items:center;border:0;padding:0;border-radius:50%;cursor:pointer;background:var(--c);color:var(--onc,#fff);font:700 10px 'DM Sans',sans-serif;text-align:center;line-height:1;box-shadow:0 0 0 2px var(--bg),0 6px 12px -6px color-mix(in srgb,var(--c) 80%,transparent);transition:width .6s cubic-bezier(.2,.8,.2,1),height .6s cubic-bezier(.2,.8,.2,1),left .6s cubic-bezier(.2,.8,.2,1),top .6s cubic-bezier(.2,.8,.2,1),transform .2s}
.gxb:hover,.gxb:focus-visible{transform:scale(1.12)}.gxb:focus-visible{outline:2px solid var(--v);outline-offset:4px}
.gxt{pointer-events:none;white-space:nowrap}
.gxn{position:absolute;left:0;bottom:100%;transform:translateX(-50%);margin-bottom:calc(var(--nb,16px));white-space:nowrap;max-width:130px;overflow:hidden;text-overflow:ellipsis;font-size:12px;font-weight:700;color:var(--ink);pointer-events:none}
.gxg.on .gxn{opacity:0}
.gxg.nr .gxn{transform:translateX(-80%)}
.gxg.gold .gxb{box-shadow:0 0 0 2px var(--bg),0 0 0 4px #e2b73e}
.gxg.on .gxb{box-shadow:0 0 0 2px var(--bg),0 0 0 5px color-mix(in srgb,var(--c) 45%,transparent)}
.gxb.pop{animation:gxpop 1s ease}@keyframes gxpop{0%{transform:scale(1)}30%{transform:scale(1.35)}100%{transform:scale(1)}}
.gxg.born .gxb{animation:gxborn .7s cubic-bezier(.2,.9,.25,1.2) backwards}@keyframes gxborn{from{transform:scale(.2);opacity:0}}
.gxg.gone{opacity:0}.gxg.on{z-index:1000!important}
/* la pastille : elle part de la bulle et se déroule vers la gauche ; le titre en haut, les icônes une à une dessous */
.gx-p{position:absolute;top:0;z-index:999;height:66px;width:66px;box-sizing:border-box;display:flex;align-items:center;justify-content:flex-end;padding:0 var(--pr,20px) 0 14px;overflow:hidden;white-space:nowrap;border-radius:33px;
  background:linear-gradient(270deg,color-mix(in srgb,var(--c) 26%,var(--bg)),color-mix(in srgb,var(--c) 9%,var(--bg)));border:1.5px solid color-mix(in srgb,var(--c) 40%,transparent);box-shadow:0 14px 30px -14px color-mix(in srgb,var(--c) 75%,transparent);opacity:0;
  transition:width .85s cubic-bezier(.22,1.12,.36,1),opacity .3s}
.gx-p.rgt{justify-content:flex-start;padding:0 14px 0 var(--pr,20px);background:linear-gradient(90deg,color-mix(in srgb,var(--c) 26%,var(--bg)),color-mix(in srgb,var(--c) 9%,var(--bg)))}
.gx-p.probe{width:auto!important;opacity:0;visibility:hidden;transition:none}
.gx-p.show{opacity:1}.gx-p.closing{transition:width .55s cubic-bezier(.5,0,.3,1),opacity .4s .15s;opacity:0}
.gxp-c{display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:0}.gx-p.rgt .gxp-c{align-items:flex-start}
.gxp-t{max-width:240px;overflow:hidden;text-overflow:ellipsis;font:700 13px 'DM Sans',sans-serif;color:var(--ink);opacity:0;transition:opacity .4s .2s}.gx-p.show .gxp-t{opacity:1}.gx-p.closing .gxp-t{opacity:0;transition:none}
.gxp-r{display:flex;gap:6px}
.gxp-i{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border:0;border-radius:999px;background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--ink);font:700 13px 'DM Sans',sans-serif;opacity:0;transform:translateX(26px) scale(.7)}
.gx-p.rgt .gxp-i{transform:translateX(-26px) scale(.7)}
.gx-p.show .gxp-i{opacity:1;transform:none;transition:opacity .35s ease,transform .55s cubic-bezier(.2,1.3,.4,1);transition-delay:calc(.24s + var(--k,0) * .08s)}
.gx-p.closing .gxp-i{opacity:0;transform:scale(.8);transition:opacity .2s,transform .3s;transition-delay:0s}
.gxp-go{cursor:pointer;background:var(--c);color:var(--onc)}.gxp-go:hover{filter:brightness(1.07)}
.gxp-i svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.gxp-i b{font-variant-numeric:tabular-nums;min-width:.7em;text-align:center}
.gxp-i.tick b{animation:gxtick .6s ease}@keyframes gxtick{40%{transform:scale(1.55)}}
.gx-p.cmp .gxp-r{gap:3px}.gx-p.cmp .gxp-i{padding:5px 7px;gap:3px}
@media (prefers-reduced-motion:reduce){.gxb.pop,.gxg.born .gxb{animation:none}.gxg,.gxb,.gx-p{transition:none}.gx-p.show .gxp-i,.gxp-t{transition:none}}

/* recherche de personnes */
.pbox{display:contents}.pchip{max-width:100%}.pchip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pchip small{margin-left:2px}

/* messages vocaux : lecteur dans le chat */
.vmsg{display:flex;align-items:center;gap:10px;margin:4px 0 8px;padding:6px 14px 6px 6px;max-width:300px;border-radius:999px;background:color-mix(in srgb,var(--v) 9%,var(--card));border:1px solid color-mix(in srgb,var(--v) 18%,var(--line))}
.vmsg .vplay{flex:none;width:36px;height:36px;border-radius:50%;border:0;background:var(--v);color:#fff;display:grid;place-items:center;padding:0;cursor:pointer;transition:transform .15s}
.vmsg .vplay:hover{transform:scale(1.07)}.vmsg .vplay:active{transform:scale(.94)}
.vmsg .vtrack{position:relative;flex:1;min-width:60px;height:6px;border-radius:99px;background:color-mix(in srgb,var(--v) 20%,transparent);cursor:pointer;overflow:hidden}
.vmsg .vtrack i{position:absolute;inset:0 auto 0 0;width:0;border-radius:99px;background:var(--v)}
.vmsg .vtime{flex:none;min-width:34px;font-size:12px;font-variant-numeric:tabular-nums;color:var(--mute);text-align:right}
.vmsg.on .vtrack i{transition:width .25s linear}
/* enregistrement : la barre remplace le champ de texte */
aside form.vrecing>:not(.vrec){display:none}
aside form .vrec{flex:1 1 100%;order:0;display:flex;align-items:center;gap:10px;min-height:46px;padding:4px 6px 4px 6px;border-radius:999px;background:color-mix(in srgb,var(--p) 8%,var(--card));border:1px solid color-mix(in srgb,var(--p) 28%,var(--line))}
aside form .vrec button{flex:none;width:36px;height:36px;border:0;border-radius:50%;padding:0;display:grid;place-items:center;cursor:pointer;margin:0;font:inherit}
aside form .vrec .vx{background:transparent;color:var(--mute);font-size:16px}aside form .vrec .vx:hover{color:var(--p);background:color-mix(in srgb,var(--p) 12%,transparent)}
aside form .vrec .vsend{background:var(--v);color:#fff;width:40px;height:40px}aside form .vrec .vsend:disabled{opacity:.5}
.vrec .vdot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--p);animation:vpulse 1.1s ease-in-out infinite}.vrec .vdot.off{animation:none;opacity:.35}
.vrec .vt{flex:none;min-width:36px;font-variant-numeric:tabular-nums;font-size:14px}
.vrec .vlv{--l:.15;flex:1;min-width:40px;height:28px;display:flex;align-items:center;justify-content:center;gap:4px}
.vrec .vlv i{display:block;width:4px;height:100%;border-radius:4px;background:var(--p);opacity:.75;transform:scaleY(calc(.16 + var(--l) * var(--k,1)));transition:transform .09s linear}
.vrec .vlv i:nth-child(1),.vrec .vlv i:nth-child(7){--k:.45}.vrec .vlv i:nth-child(2),.vrec .vlv i:nth-child(6){--k:.7}.vrec .vlv i:nth-child(3),.vrec .vlv i:nth-child(5){--k:.9}
.vrec.ready .vlv i{transform:scaleY(.16);opacity:.35}
.vrec .vmsg2{font-size:12px;color:var(--mute);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes vpulse{50%{transform:scale(.6);opacity:.5}}
@media (prefers-reduced-motion:reduce){.vrec .vdot{animation:none}.vrec .vlv i{transition:none}}
.att.mic:disabled{opacity:.5}

/* choix de l'affichage : lien discret sous « N sujets discutés aujourd'hui » */
.wvlk{border:0;background:none;padding:2px 4px;margin:0;color:var(--v);font:inherit;font-weight:600;cursor:pointer;border-radius:6px;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--v) 35%,transparent);text-underline-offset:3px}
.wvlk:hover,.wvlk:focus-visible{text-decoration-color:var(--v)}
.wvrow{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:12px;animation:wvrow .35s cubic-bezier(.2,.9,.25,1.1)}
@keyframes wvrow{from{opacity:0;transform:translateY(-6px)}}
.wvopt{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font:600 13.5px 'DM Sans',system-ui,sans-serif;cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
.wvopt svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.wvopt:hover{border-color:var(--v);transform:translateY(-1px)}.wvopt.on{background:var(--v);border-color:var(--v);color:#fff}
@media (prefers-reduced-motion:reduce){.wvrow{animation:none}}

/* chat : effacer son message, répondre, réponse reçue, aperçu YouTube */
.fl svg{width:17px;height:17px;display:block}
.fl.rp,.fl.del{display:inline-flex;align-items:center;gap:5px}.fl.rp{color:var(--v)}.fl.rp span,.fl.del span{font:600 12px 'DM Sans',sans-serif}
.fl.del:hover,.fl.del.ask{color:#d63a4a}.fl.del.ask{background:color-mix(in srgb,#d63a4a 12%,transparent)}
.m.bye{opacity:0!important;transform:translateX(18px);transition:opacity .25s,transform .25s}
.m.toyou .bd{position:relative;padding:6px 10px 2px 12px;margin:-6px -10px -2px -12px;border-radius:14px;background:linear-gradient(90deg,color-mix(in srgb,var(--p) 14%,transparent),color-mix(in srgb,var(--v) 4%,transparent));box-shadow:inset 3px 0 0 var(--p)}
.m.toyou.fresh .bd{animation:toyou 3.2s ease-out}
@keyframes toyou{0%{background:color-mix(in srgb,var(--p) 42%,transparent);box-shadow:inset 3px 0 0 var(--p),0 0 0 3px color-mix(in srgb,var(--p) 30%,transparent)}100%{}}
.toyou-t{font:700 11.5px 'DM Sans',sans-serif;color:var(--p);padding:1px 7px;border-radius:999px;background:color-mix(in srgb,var(--p) 12%,transparent);white-space:nowrap}
.ytc{display:block;width:min(100%,320px);margin:4px 0 8px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg);color:var(--ink);text-decoration:none;transition:border-color .2s,transform .2s}
.ytc:hover,.ytc:focus-visible{border-color:var(--v);transform:translateY(-1px)}
.ytt{position:relative;display:block;aspect-ratio:16/9;background:#14121f}.ytt img{display:block;width:100%;height:100%;object-fit:cover}
.ytp{position:absolute;left:50%;top:50%;width:46px;height:32px;margin:-16px 0 0 -23px;display:grid;place-items:center;border-radius:10px;background:rgba(215,25,32,.92);color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.35)}.ytp svg{width:20px;height:20px}
.ytx{display:flex;flex-direction:column;gap:2px;padding:8px 11px 9px}.ytx b{font-size:13.5px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.ytx small{color:var(--mute);font-size:12px}
@media (prefers-reduced-motion:reduce){.m.toyou.fresh .bd{animation:none}.m.bye{transition:none}}

/* « Mes amis » : survol des Reloop partagés, plus lent et plus vif — un voile de couleur qui monte doucement (une transition de dégradé ne s'anime pas : on fait monter un calque) */
.cv-c.cv-rl{position:relative;isolation:isolate;transition:border-color 1.1s ease,box-shadow 1.1s ease,transform 1.1s ease}
.cv-c.cv-rl::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;background:linear-gradient(135deg,color-mix(in srgb,var(--v) 40%,transparent) 0%,color-mix(in srgb,var(--p) 42%,transparent) 100%);transition:opacity 1.1s cubic-bezier(.3,.1,.2,1)}
.cv-c.cv-rl:hover::after,.cv-c.cv-rl:focus-within::after{opacity:1}
.cv-c.cv-rl:hover{background:linear-gradient(135deg,color-mix(in srgb,var(--v) 9%,var(--card)) 0%,color-mix(in srgb,var(--p) 10%,var(--card)) 100%);border-color:color-mix(in srgb,var(--v) 62%,var(--line));box-shadow:0 14px 34px -14px color-mix(in srgb,var(--v) 85%,transparent);transform:translateY(-2px)}
.cv-rl .rlq2{transition:background 1.1s ease,border-color 1.1s ease}
.cv-c.cv-rl:hover .rlq2{background:color-mix(in srgb,var(--card) 50%,transparent);border-color:color-mix(in srgb,var(--v) 45%,var(--line))}
@media (prefers-reduced-motion:reduce){.cv-c.cv-rl,.cv-c.cv-rl::after,.cv-rl .rlq2{transition:none}.cv-c.cv-rl:hover{transform:none}}
.lkc .ytx .lkd{color:var(--mute);font-size:12.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lkc .ytt{aspect-ratio:1.91/1}

/* chat baissé = petite bulle « Discussions » (téléphone ET ordinateur) : le panneau baissé disparaît, la bulle le remplace ; elle ouvre la liste des discussions ouvertes */
aside.min{display:none!important}
.chp-s{display:flex;align-items:center;gap:7px}
.chp-s::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--v)}
.chp-s.chp-sd::before{background:var(--p)}
.chp-s.chp-sd{margin-top:6px;border-top:1px solid var(--line);padding-top:14px}
.chr.dm .chr-d{border-radius:14px;box-shadow:0 0 0 2px color-mix(in srgb,var(--p) 40%,transparent)}
.chr.dm:hover,.chr.dm:focus-visible{background:color-mix(in srgb,var(--p) 11%,transparent)}
.chfab{width:56px;height:56px;padding:0;justify-content:center}.chfab .chfab-l{display:none}

/* Contacts › « Trouver des amis » */
.ff-t{display:block;font-weight:700;font-size:14px;margin:4px 0 6px}
.ff-t input{display:block;width:100%;margin-top:7px;padding:13px 16px;border:2px solid color-mix(in srgb,var(--v) 30%,var(--line));border-radius:14px;background:var(--bg);color:var(--ink);font:500 16px 'DM Sans',sans-serif}
.ff-t input:focus{outline:none;border-color:var(--v);box-shadow:0 0 0 4px color-mix(in srgb,var(--v) 16%,transparent)}
.ff-m{margin:8px 2px 0}.ff-l{margin-top:6px}
/* la bulle « Discussions » ne se décale plus : elle reste en bas à droite et se cache tant qu'un chat est ouvert */
/* aperçu d'un lien dans un Reloop (fil Amis, visionneuse, profil) */
.rl-lk{margin:2px 0 8px}.rl-lk .ytc{width:100%;max-width:340px;margin:6px 0 2px}
.rlq2 .rl-lk{margin:0 0 8px}
.pst:has(.ytc) .pst-l{display:none}
.rl .rl-b a,.rl .rl-b .ln{color:#fff;text-decoration:underline;text-underline-offset:2px;font-weight:700}
/* commentaires : répondre, like, dislike */
.pv-cma{display:flex;align-items:center;gap:4px;margin-top:6px;flex-wrap:wrap}
.pv-cmk{display:inline-flex;align-items:center;gap:5px;border:0;background:rgba(255,255,255,.08);color:#d8d0f2;border-radius:999px;padding:5px 10px;font:600 12.5px 'Inter','DM Sans',sans-serif;cursor:pointer;transition:background .25s,color .25s}
.pv-cmk svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.pv-cmk:hover,.pv-cmk:focus-visible{background:rgba(255,255,255,.18);color:#fff}
.pv-cmk.on{background:rgba(255,255,255,.26);color:#fff}.pv-cmkd.on{background:rgba(229,72,77,.24);color:#ffb3b5}
.pv-cmk span:empty{display:none}
.pv-cmq{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 16px 0;font-size:13px;color:#d8d0f2}.pv-cmq.hid{display:none}
.pv-cmq b{color:#fff}.pv-cmq button{border:0;background:rgba(255,255,255,.12);color:#fff;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;cursor:pointer;flex:none}.pv-cmq button svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.pv-cmq2{display:flex;flex-direction:column;gap:1px;margin:3px 0 2px;padding:3px 0 3px 9px;border-left:3px solid rgba(255,255,255,.3);font-size:12.5px;color:#c9c0e6;overflow:hidden}.pv-cmq2 b{font-weight:700;color:#e6e0f8}.pv-cmq2 span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* les réponses sont décalées sous le commentaire d'origine */
.pv-cmr.rep{margin-left:34px;position:relative;margin-top:-6px}
.pv-cmr.rep::before{content:'';position:absolute;left:-21px;top:-14px;height:30px;width:14px;border-left:2px solid rgba(255,255,255,.22);border-bottom:2px solid rgba(255,255,255,.22);border-bottom-left-radius:11px}
.pv-cmr.rep .mav{width:26px;height:26px;font-size:11px}
/* message de bienvenue (première connexion après l'inscription) */
.wlov{position:fixed;inset:0;z-index:210;display:grid;place-items:center;padding:18px;background:rgba(20,10,45,.6);backdrop-filter:blur(6px);animation:wlf .25s ease}
.wl{position:relative;width:min(500px,100%);max-height:96dvh;overflow:auto;background:var(--card);color:var(--ink);border-radius:28px;padding:30px 30px 26px;box-shadow:0 28px 80px rgba(10,5,25,.5);animation:wlu .35s cubic-bezier(.2,.8,.2,1)}
.wl-skip{position:absolute;top:18px;right:22px;border:0;background:none;color:var(--mute);font:600 14px 'Inter','DM Sans',sans-serif;padding:4px 2px}.wl-skip:hover{color:var(--ink)}
.wl-e{margin:0 0 10px;padding-right:110px;font:700 12.5px 'Inter','DM Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--v)}
.wl-t{margin:0 0 12px;font:800 clamp(30px,8vw,40px)/1.04 'Unbounded',sans-serif;letter-spacing:-.04em}
.wl-p{margin:0 0 20px;font-size:17px;line-height:1.45;color:var(--mute)}
.wl-s{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px}
.wl-s li{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:16px;background:color-mix(in srgb,var(--v) 9%,var(--card))}
.wl-s i{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:800 13px 'Inter',sans-serif;font-style:normal;color:#fff;background:linear-gradient(135deg,var(--v),var(--p))}
.wl-s b{display:block;font-size:16.5px}.wl-s small{display:block;margin-top:1px;font-size:14px;color:var(--mute)}
.wl-go{display:block;width:100%;border:0;border-radius:999px;padding:15px 18px;background:var(--v);color:#fff;font:700 16px 'Inter','DM Sans',sans-serif;transition:filter .25s,transform .25s}.wl-go:hover,.wl-go:focus-visible{filter:brightness(1.1);transform:translateY(-1px)}
.wl-ex{display:block;margin:14px auto 0;border:0;background:none;color:var(--v);font:700 14.5px 'Inter','DM Sans',sans-serif;padding:6px 10px}
@keyframes wlf{from{opacity:0}}@keyframes wlu{from{opacity:0;transform:translateY(14px) scale(.98)}}
@media (max-width:520px){.wl{padding:26px 20px 22px;border-radius:24px}.wl-p{font-size:16px}}
@media (prefers-reduced-motion:reduce){.wlov,.wl{animation:none}}

/* bulle « Discussions » : croix pour fermer un chat pour de bon */
.chrw{position:relative}.chrw .chr{padding-right:46px}
.chr-x{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;border-radius:50%;background:none;color:var(--mute);font-size:13px;display:grid;place-items:center;transition:background .2s,color .2s}
.chr-x:hover,.chr-x:focus-visible{background:color-mix(in srgb,var(--p) 14%,transparent);color:var(--ink)}
/* notifications : filtres, sections par jour, icône par type */
.nfil{position:relative;display:flex;padding:0 6px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}.nfil::-webkit-scrollbar{display:none}
.nchip{position:relative;flex:1 0 auto;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:14px 11px 13px;border:0;background:none;color:var(--mute);font:600 13px 'Inter','DM Sans',sans-serif;transition:color .3s}
.nchip+.nchip::before{content:'';position:absolute;left:0;top:28%;bottom:28%;width:1px;background:var(--line)}
.nchip:hover{color:var(--ink)}
.nchip.on{color:var(--ink)}
.nind{position:absolute;left:0;bottom:-1px;height:3px;pointer-events:none;transition:left .42s cubic-bezier(.3,1.25,.4,1),width .42s cubic-bezier(.3,1.25,.4,1)}
.nind::after{content:'';position:absolute;left:18%;right:18%;top:0;bottom:0;border-radius:3px 3px 0 0;background:linear-gradient(90deg,var(--v),var(--p))}
.nchip i{min-width:18px;height:18px;padding:0 5px;border-radius:999px;display:grid;place-items:center;background:var(--p);color:#fff;font:700 11px 'Inter',sans-serif;font-style:normal}
#nlist{padding-bottom:10px}
.nsec{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;padding:12px 18px 6px;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(6px);font:700 12px 'Inter','DM Sans',sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.nsec i{min-width:18px;height:18px;padding:0 5px;border-radius:999px;display:grid;place-items:center;background:var(--p);color:#fff;font:700 11px 'Inter',sans-serif;font-style:normal;letter-spacing:0}
.nitem{width:calc(100% - 16px);margin:1px 8px;padding:11px 36px 11px 10px;border:0;border-radius:14px;grid-template-columns:44px 1fr;transition:background .2s}
.nitem .nav{position:relative;width:44px;height:44px}
.nitem .nav .mav{width:44px;height:44px;font-size:17px}
.nic{position:absolute;right:-4px;bottom:-3px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--card);background:var(--v);color:#fff}
.nic svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.g-a .nic{background:var(--p)}.g-c .nic{background:#0e8aa6}.g-w .nic{background:#e5484d}.g-s .nic{background:#d97706}
.nitem.un::after{right:14px;top:50%;transform:translateY(-50%)}
.nitem .nl b{font-weight:700}
@media (prefers-reduced-motion:reduce){.nchip,.nitem,.nind{transition:none}}

/* discussions calmes : compteur « +N », note du bas, fumée */
.chn{flex:none;margin-left:auto;min-width:22px;height:20px;padding:0 7px;border-radius:999px;display:inline-grid;place-items:center;background:linear-gradient(135deg,var(--v),var(--p));color:#fff;font:700 11.5px 'Inter',sans-serif;font-style:normal;letter-spacing:0}
.chrw .chr .chn{margin-right:0}
.tab .chn,.chl-r .chn{margin-left:6px;height:18px;min-width:20px;padding:0 6px;font-size:11px}
.chl-r .chn{margin-left:auto}
.chp-note{margin:10px 6px 4px;padding:9px 11px;border-radius:12px;background:color-mix(in srgb,var(--v) 7%,transparent);color:var(--mute);font-size:12px;line-height:1.4}
.chp-empty{margin:14px 6px;padding:0 4px;color:var(--mute);font-size:13px;line-height:1.45;text-align:center}
.trend-empty{margin:0;padding:14px 16px;color:var(--mute);font-size:13px;line-height:1.45}
.smk{position:fixed;margin:0;pointer-events:none;z-index:300;transform-origin:50% 100%}
.smkp{position:fixed;display:block;border-radius:50%;pointer-events:none;z-index:299;background:radial-gradient(circle,rgba(168,160,205,.85),rgba(168,160,205,0) 68%);opacity:0}

/* commentaires : réponses repliées sous une petite bulle */
.pv-cmt3{display:inline-flex;align-items:center;gap:6px;margin-top:7px;padding:4px 11px 4px 9px;border:1px solid rgba(184,166,255,.38);border-radius:999px;background:rgba(150,125,255,.14);color:#d8ccff;font:600 12px 'Inter','DM Sans',sans-serif;cursor:pointer;transition:background .2s,border-color .2s}
.pv-cmt3 svg{width:13px;height:13px}
.pv-cmt3:hover,.pv-cmt3.on{background:rgba(150,125,255,.26);border-color:rgba(200,185,255,.7)}
@keyframes cmin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.pv-cmr.rep.in{animation:cmin .38s cubic-bezier(.2,.8,.2,1) both}
@media (prefers-reduced-motion:reduce){.pv-cmr.rep.in{animation:none}}

/* @ : liste des personnes de la discussion */
.mac{position:fixed;z-index:400;display:flex;flex-direction:column;padding:6px;border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:0 14px 40px rgba(30,20,80,.22);max-height:260px;overflow:auto;animation:macin .16s ease-out}
.mac.hid{display:none}
.mac-r{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border:0;border-radius:11px;background:none;color:var(--ink);font:600 14px 'DM Sans',sans-serif;text-align:left;cursor:pointer}
.mac-r .mav{width:28px;height:28px;font-size:12px}
.mac-r.on,.mac-r:hover{background:color-mix(in srgb,var(--v) 12%,transparent)}
@keyframes macin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mac{animation:none}}

/* notifications : glisser à droite = « à revoir », à gauche = supprimer */
.nsw{position:relative;margin:1px 8px;border-radius:14px;overflow:hidden}
.nsw .nitem{width:100%;margin:0;background:var(--card);touch-action:pan-y;-webkit-user-select:none;user-select:none;transition:transform .34s cubic-bezier(.2,1.25,.4,1),background .2s;will-change:transform}
.nsw .nitem.un{background:color-mix(in srgb,var(--v) 7%,var(--card))}
.nsw .nitem:hover{background:color-mix(in srgb,var(--v) 5%,var(--card))}
.nbg{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 22px;background:var(--line)}
.nsw.sr .nbg{background:linear-gradient(90deg,var(--v),var(--p))}.nsw.sl .nbg{background:linear-gradient(270deg,#e5484d,#f0647a)}
.nbl,.nbr{display:inline-flex;align-items:center;gap:8px;color:#fff;font:700 13px 'Inter',sans-serif;opacity:0;transition:transform .15s}
.nsw.sr .nbr,.nsw.sl .nbl{visibility:hidden}
.nbl svg,.nbr svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nsw.arm .nbl,.nsw.arm .nbr{filter:drop-shadow(0 0 6px rgba(255,255,255,.6))}
.nsw.fl .nitem{background:color-mix(in srgb,var(--v) 9%,var(--card))}
.nflag{position:absolute;right:14px;bottom:11px;color:var(--v);font-style:normal;display:grid}
.nflag svg{width:15px;height:15px;fill:currentColor;stroke:none}
.nflag svg path{fill:currentColor}
.nact{position:absolute;right:8px;top:7px;display:none;gap:4px}
.nact button{width:28px;height:28px;border:0;border-radius:50%;display:grid;place-items:center;background:var(--card);color:var(--mute);box-shadow:0 1px 5px rgba(20,10,60,.18)}
.nact button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nact button:hover,.nact button:focus-visible{color:var(--v)}.nact button:last-child:hover{color:#e5484d}
@media (hover:hover){.nsw:hover .nact,.nsw:focus-within .nact{display:flex}.nsw:hover .nitem.un::after,.nsw:hover .nflag{opacity:0}}
@media (prefers-reduced-motion:reduce){.nsw .nitem{transition:none}}

/* « Amis » : les commentaires se déroulent juste sous la publication (la suite du fil est repoussée vers le bas) */
.cv-cm{margin:0;padding:6px 14px 14px;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent);color:var(--ink);background:color-mix(in srgb,var(--v) 3.5%,var(--card))}
.cv-cm .pv-cml{padding:10px 0 4px;overflow:visible;flex:none;gap:12px}
.cv-cm .pv-cme{color:var(--mute);margin:12px 0}
.cv-cm .pv-cmt small,.cv-cm .pv-cmd{color:var(--mute)}.cv-cm .pv-cmd:hover{color:var(--ink)}
.cv-cm .pv-cmb2 p{color:var(--ink)}
.cv-cm .pv-cmk{background:color-mix(in srgb,var(--v) 8%,transparent);color:var(--mute)}
.cv-cm .pv-cmk:hover,.cv-cm .pv-cmk:focus-visible{background:color-mix(in srgb,var(--v) 16%,transparent);color:var(--ink)}
.cv-cm .pv-cmk.on{background:var(--p);color:#fff}.cv-cm .pv-cmkd.on{background:color-mix(in srgb,#e5484d 14%,var(--card));color:#c0292e}
.cv-cm .pv-cmq{padding:8px 0 0;color:var(--mute)}.cv-cm .pv-cmq b{color:var(--ink)}.cv-cm .pv-cmq button{background:color-mix(in srgb,var(--v) 12%,transparent);color:var(--ink)}
.cv-cm .pv-cmq2{border-left-color:color-mix(in srgb,var(--v) 35%,transparent);color:var(--mute)}.cv-cm .pv-cmq2 b{color:var(--ink)}
.cv-cm .pv-cmr.rep::before{border-left-color:color-mix(in srgb,var(--v) 28%,transparent);border-bottom-color:color-mix(in srgb,var(--v) 28%,transparent)}
.cv-cm .pv-cmt3{border-color:color-mix(in srgb,var(--v) 38%,transparent);background:color-mix(in srgb,var(--v) 9%,transparent);color:var(--v)}
.cv-cm .pv-cmt3:hover,.cv-cm .pv-cmt3.on{background:color-mix(in srgb,var(--v) 18%,transparent)}
.cv-cm .pv-cmf{padding:10px 0 0;border-top:0}
.cv-cm .pv-cmf input{border:1px solid var(--line);background:var(--card);color:var(--ink)}
.cv-cm .pv-cmf input:focus{outline:2px solid color-mix(in srgb,var(--v) 55%,transparent);outline-offset:1px}
.cv-b.cv-k1.on{border-color:var(--v);color:var(--v);background:color-mix(in srgb,var(--v) 10%,var(--card))}
.cv-cm svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* commentaires sous la publication : déroulé, fermeture, fond fondu dans la couleur du site */
.cv-cm{position:relative;display:grid;grid-template-rows:0fr;padding:0;border:0;background:linear-gradient(180deg,color-mix(in srgb,var(--v) 10%,var(--card)) 0%,color-mix(in srgb,var(--v) 3%,var(--card)) 55%,var(--card) 100%);transition:grid-template-rows .6s cubic-bezier(.16,1,.3,1)}
.cv-cm.open{grid-template-rows:1fr}.cv-cm.closing{transition-duration:.42s;transition-timing-function:cubic-bezier(.7,0,.84,0)}
.cv-cm-in{min-height:0;overflow:hidden;padding:0 14px;opacity:0;transform:translateY(-10px);transition:opacity .35s ease,transform .55s cubic-bezier(.16,1,.3,1),padding .6s cubic-bezier(.16,1,.3,1)}
.cv-cm.open .cv-cm-in{opacity:1;transform:none;padding:4px 14px 14px;transition-delay:.06s,.06s,0s}
.cv-cm.closing .cv-cm-in{transition:opacity .22s ease,transform .3s ease-in,padding .42s ease-in}
.cv-cm::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;z-index:1;background:linear-gradient(90deg,transparent,var(--v) 30%,var(--p) 70%,transparent);opacity:0;transform:scaleX(0);transform-origin:left center}
.cv-cm.open::before{animation:cvsweep .9s cubic-bezier(.3,.7,.2,1) both}
@keyframes cvsweep{0%{opacity:0;transform:scaleX(0)}25%{opacity:.9}100%{opacity:0;transform:scaleX(1)}}
.cv-cm.open .cv-cm-in::before{content:none}
@keyframes cvrow{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.cv-enter .pv-cmr,.cv-enter .pv-cme{animation:cvrow .6s cubic-bezier(.16,1,.3,1) both}
.cv-enter>:nth-child(2){animation-delay:.07s}.cv-enter>:nth-child(3){animation-delay:.14s}.cv-enter>:nth-child(4){animation-delay:.21s}.cv-enter>:nth-child(5){animation-delay:.28s}.cv-enter>:nth-child(n+6){animation-delay:.34s}
.cv-cm.open .pv-cmf{animation:cvrow .6s .12s cubic-bezier(.16,1,.3,1) both}
.cv-cm .pv-cmf input{border:1px solid color-mix(in srgb,var(--v) 22%,transparent);background:color-mix(in srgb,var(--v) 5%,var(--card))}
.cv-cm .pv-cmk{background:color-mix(in srgb,var(--v) 9%,transparent)}
.cv-c:has(.cv-cm.open) .cv-bar{border-bottom:0}
@media (prefers-reduced-motion:reduce){.cv-cm,.cv-cm-in,.cv-cm.closing .cv-cm-in{transition:none}.cv-cm.open::before,.cv-enter .pv-cmr,.cv-enter .pv-cme,.cv-cm.open .pv-cmf{animation:none}}
:root[data-motion=off] .cv-cm,:root[data-motion=off] .cv-cm-in{transition:none}:root[data-motion=off] .cv-cm.open::before,:root[data-motion=off] .cv-enter .pv-cmr,:root[data-motion=off] .cv-cm.open .pv-cmf{animation:none}
:root[data-theme=dark] .cv-cm .pv-cmt3{color:#cbbdff}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .cv-cm .pv-cmt3{color:#cbbdff}}

/* commentaires en arbre : chaque niveau de réponse est décalé, relié par un trait, et se déroule à l'ouverture */
.pv-cml{--st:34px}
@media (max-width:520px){.pv-cml{--st:26px}}
.pv-cmn{position:relative}
.pv-cmg{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .55s cubic-bezier(.16,1,.3,1),opacity .4s ease}
.pv-cmg.open{grid-template-rows:1fr;opacity:1}
.pv-cmg.closing{grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s cubic-bezier(.7,0,.84,0),opacity .25s ease}
.pv-cmgc{min-height:0;overflow:hidden}
.pv-cmgi{display:flex;flex-direction:column;gap:12px;padding:12px 0 2px var(--st)}
.pv-cmg .pv-cmr{animation:none}
.pv-cmr.ch{position:relative}.pv-cmr.ch .mav{width:26px;height:26px;font-size:11px}
.pv-cmr.ch::before{content:'';position:absolute;left:calc(13px - var(--st));top:-13px;height:27px;width:calc(var(--st) - 20px);border-left:2px solid rgba(255,255,255,.22);border-bottom:2px solid rgba(255,255,255,.22);border-bottom-left-radius:11px;pointer-events:none}
.pv-cmn.ch:not(.last)::after{content:'';position:absolute;left:calc(13px - var(--st));top:14px;bottom:-12px;border-left:2px solid rgba(255,255,255,.22);pointer-events:none}
.cv-cm .pv-cmr.ch::before{border-left-color:color-mix(in srgb,var(--v) 28%,transparent);border-bottom-color:color-mix(in srgb,var(--v) 28%,transparent)}
.cv-cm .pv-cmn.ch:not(.last)::after{border-left-color:color-mix(in srgb,var(--v) 28%,transparent)}
.pv-cmr.ch .pv-cmt3{margin-top:6px}
@media (prefers-reduced-motion:reduce){.pv-cmg,.pv-cmg.closing{transition:none}}
:root[data-motion=off] .pv-cmg{transition:none}

/* commentaires : plus aucun fond propre, ils sont dans la couleur même de la publication */
.cv-cm{background:transparent;border:0}
.cv-cm .pv-cmf input{background:transparent;border:1px solid color-mix(in srgb,var(--v) 20%,var(--line))}
.cv-cm .pv-cmk{background:color-mix(in srgb,var(--v) 7%,transparent)}
.cv-cm .pv-cmt3{background:color-mix(in srgb,var(--v) 7%,transparent)}

/* publications écrites par la personne elle-même : on garde le dégradé violet pâle d'avant ; les repartages (Reloop) restent sans fond */
.cv-c:not(.cv-rl) .cv-cm{background:linear-gradient(180deg,color-mix(in srgb,var(--v) 10%,var(--card)) 0%,color-mix(in srgb,var(--v) 3%,var(--card)) 55%,var(--card) 100%)}
.cv-c:not(.cv-rl) .cv-cm .pv-cmf input{background:color-mix(in srgb,var(--v) 5%,var(--card));border-color:color-mix(in srgb,var(--v) 22%,transparent)}
.cv-c:not(.cv-rl) .cv-cm .pv-cmk{background:color-mix(in srgb,var(--v) 9%,transparent)}
.cv-c:not(.cv-rl) .cv-cm .pv-cmt3{background:color-mix(in srgb,var(--v) 9%,transparent)}

/* téléphone seulement : la barre « Sujets du moment · Amis · Loop » reste en haut pendant qu'on fait défiler (sur ordinateur elle ne bouge pas, comme avant) */
@media (max-width:760px){
 .sh#shnow{position:sticky;top:env(safe-area-inset-top,0px);z-index:25;margin-inline:-14px;padding:4px 14px;margin-block:12px 0;background:color-mix(in srgb,var(--bg) 94%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 color-mix(in srgb,var(--line) 55%,transparent)}
}

/* téléphone : quand le clavier est ouvert, la feuille de chat se pose juste au-dessus et se raccourcit : on voit toujours les derniers messages */
@media (max-width:760px){
 html.kbd #side.on:not(.min),html.kbd #dmside.on:not(.min){bottom:var(--kb,0px);top:auto;height:calc(var(--vvh,100dvh) - 10px);max-height:88dvh;transition:none;animation:none}
 html.kbd #side.on:not(.min) .top,html.kbd #dmside.on:not(.min) .top{padding-block:8px}
}

/* logo de l'en-tête (téléphone) : cliquable, sans sélection bleue ni halo au toucher */
#hd > .logo{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;cursor:pointer;outline:none}
#hd > .logo:focus-visible{outline:2px solid var(--v);outline-offset:4px;border-radius:6px}

/* ================= Loop : fil de vidéos publiques (loop.js) ================= */
.loopv{display:block;text-align:left;min-height:0;padding:6px 0 96px;gap:0}
.loopv h2.lp-h{display:none}
.lp-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:4px 2px 16px}
.lp-top h2{margin:0;font:800 clamp(30px,6vw,40px)/1 'Unbounded',sans-serif;letter-spacing:-.04em;background:linear-gradient(135deg,var(--v),var(--p));-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-acts{display:flex;gap:8px;flex-wrap:wrap}
.lp-share,.lp-livebtn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:10px 16px;font:700 14px/1 'Inter','DM Sans',system-ui,sans-serif;cursor:pointer}
.lp-share{background:linear-gradient(135deg,var(--v),var(--p));color:#fff}.lp-share svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.lp-livebtn{background:var(--card);color:var(--ink);border:1px solid var(--line)}.lp-livebtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.lp-int{display:flex;justify-content:center}
.lp-card{position:relative;width:min(100%,400px);height:clamp(220px,calc(100dvh - 400px),580px);border-radius:22px;overflow:hidden;background:#140a2e;cursor:pointer;box-shadow:0 26px 50px -26px rgba(50,20,140,.55);outline-offset:3px}
.lp-card img,.lp-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lp-card video{opacity:0;transition:opacity .45s}.lp-card video.on{opacity:1}
.lp-card .lp-shade{position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(transparent,rgba(8,4,20,.78))}
.lp-card .lp-cap{position:absolute;left:18px;right:18px;bottom:50px;display:flex;flex-direction:column;gap:2px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.lp-card .lp-cap b{font:800 18px/1.2 'Inter','DM Sans',system-ui,sans-serif;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.lp-card .lp-cap span{font-size:13.5px;opacity:.85}
.lp-hint{position:absolute;left:0;right:0;bottom:14px;display:flex;flex-direction:column;align-items:center;gap:0;color:#fff;font:600 12.5px 'Inter',sans-serif;opacity:.9;animation:lpHint 1.8s ease-in-out infinite}.lp-hint svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@keyframes lpHint{0%,100%{transform:translateY(3px);opacity:.55}50%{transform:translateY(-3px);opacity:1}}
.lp-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:48px 20px;text-align:center;color:var(--mute);border:1.5px dashed var(--line);border-radius:22px;width:min(100%,400px)}.lp-empty b{color:var(--ink);font-size:17px}
.lp-minebox{width:min(100%,440px);overflow:auto}.lp-minebox .qp-bd{padding-top:20px;min-height:160px}.lp-minebox .qp-bd h3{margin:0 0 6px;font:800 20px 'Inter',sans-serif}.lp-minebox .lp-empty{width:auto;padding:28px 10px;border:0}.lp-minebox .qp-x{position:sticky;float:right;top:10px;margin:10px 10px 0 0}.lp-minebox .lp-mr:first-of-type{border-top:0}
.lp-mr{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--line)}.lp-mr img{width:46px;height:64px;object-fit:cover;border-radius:10px;background:var(--line)}
.lp-mt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.lp-mt b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lp-mt small{color:var(--mute)}
.lp-st{align-self:flex-start;font:700 11.5px 'Inter',sans-serif;padding:3px 9px;border-radius:999px;background:var(--line);color:var(--mute)}.lp-st.s2{background:rgba(31,157,85,.14);color:#1f8f50}.lp-st.s1{background:rgba(245,166,35,.18);color:#b36b00}.lp-st.s3{background:rgba(229,72,77,.14);color:#c0343a}
.lp-md{border:0;background:none;color:var(--mute);cursor:pointer;width:36px;height:36px;border-radius:50%;display:grid;place-items:center}.lp-md:hover{background:var(--line);color:var(--ink)}.lp-md svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* le plein écran */
html.lp-lock,html.lp-lock body{overflow:hidden}
.lp-ov{position:fixed;inset:0;z-index:78;background:#080414;color:#fff;font-family:'Inter','DM Sans',system-ui,sans-serif;outline:none;-webkit-user-select:none;user-select:none}
.lp-feed{position:absolute;inset:0;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}.lp-feed::-webkit-scrollbar{display:none}
.lp-s{position:relative;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;display:flex;justify-content:center;overflow:hidden;transition:padding .4s cubic-bezier(.2,.9,.2,1)}
.lp-s::before{content:"";position:absolute;inset:-60px;background:var(--lpbg) center/cover;filter:blur(46px) brightness(.4) saturate(1.3);z-index:0}
.lp-fr{position:relative;z-index:1;width:100%;height:100%;overflow:hidden;background:#000;transition:height .4s cubic-bezier(.2,.9,.2,1),border-radius .4s}
@media (min-width:761px){.lp-fr{width:min(100%,calc(100dvh * .5625))}}
.lp-bg{position:absolute;inset:-24px;width:calc(100% + 48px);height:calc(100% + 48px);object-fit:cover;filter:blur(30px) brightness(.55) saturate(1.2)}
.lp-px{position:absolute;inset:0;display:grid;place-items:center}
.lp-vid{width:100%;height:100%;object-fit:cover;background:transparent;display:block}.lp-vid.wide{object-fit:contain}
.lp-fr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(transparent,rgba(5,2,14,.7));pointer-events:none;z-index:2}
.lp-pg{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.22);z-index:5}.lp-pg i{display:block;height:100%;width:0;background:#fff}
.lp-big{position:absolute;inset:0;display:grid;place-items:center;z-index:3;pointer-events:none;opacity:0;transition:opacity .2s}.lp-big svg{width:74px;height:74px;fill:#fff;filter:drop-shadow(0 4px 14px rgba(0,0,0,.5));opacity:.9}.lp-s.paused .lp-big{opacity:1}
.lp-side{position:absolute;right:10px;bottom:calc(92px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:15px;z-index:6}
.lp-av{width:46px;height:46px;font-size:18px;border:2px solid #fff;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.lp-a{display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:none;color:#fff;cursor:pointer;padding:0;font:700 12.5px 'Inter',sans-serif;text-shadow:0 1px 6px rgba(0,0,0,.55)}
.lp-a svg{width:30px;height:30px;padding:8px;box-sizing:content-box;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;border-radius:50%;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .2s,background .2s}
.lp-a:hover svg{background:rgba(255,255,255,.24)}.lp-a:active svg{transform:scale(.9)}
.lp-a.echo.on svg{background:linear-gradient(135deg,var(--v),var(--p));stroke:#fff;fill:rgba(255,255,255,.25);animation:lpPop .4s}.lp-a.dislike.on svg{background:rgba(229,72,77,.55)}
.lp-a span:empty{display:none}@keyframes lpPop{40%{transform:scale(1.25)}}
.lp-info{position:absolute;left:14px;right:84px;bottom:calc(22px + env(safe-area-inset-bottom));z-index:6;display:flex;flex-direction:column;align-items:flex-start;gap:3px;border:0;background:none;color:#fff;text-align:left;cursor:pointer;padding:0;font-family:inherit;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.lp-info b{font-size:15px}.lp-tt{font-size:14.5px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lp-ds{font-size:13px;opacity:.78;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;padding-right:0}
.lp-info:hover .lp-tt{text-decoration:underline}
.lp-burst{position:absolute;z-index:7;width:96px;height:96px;margin:-48px 0 0 -48px;pointer-events:none;animation:lpBurst .75s ease-out forwards}.lp-burst svg{width:100%;height:100%;fill:var(--p);stroke:#fff;stroke-width:1.4;filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))}
@keyframes lpBurst{0%{transform:scale(.3);opacity:0}30%{transform:scale(1.15);opacity:1}100%{transform:translateY(-34px) scale(1);opacity:0}}
.lp-bar{position:absolute;left:0;right:0;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 12px 10px;pointer-events:none}
.lp-bar>*{pointer-events:auto}.lp-bt{font:800 18px 'Unbounded',sans-serif;letter-spacing:-.04em;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.lp-bacts{margin-left:auto;display:flex;gap:8px}
.lp-x,.lp-snd,.lp-bsh,.lp-blv,.lp-bfv{width:40px;height:40px;border-radius:50%;border:0;background:rgba(20,10,40,.45);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lp-x svg,.lp-snd svg,.lp-bsh svg,.lp-blv svg,.lp-bfv svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.lp-x:hover,.lp-snd:hover,.lp-bsh:hover,.lp-blv:hover,.lp-bfv:hover{background:rgba(20,10,40,.7)}
.lp-end{align-items:center}.lp-endin{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:24px}.lp-endin b{font-size:20px}.lp-endin span{opacity:.75;margin-bottom:8px}

/* panneau latéral (description / commentaires) : jamais sur la vidéo */
.lp-pan{position:absolute;z-index:30;display:flex;flex-direction:column;background:rgba(24,14,48,.98);color:#fff;transition:transform .36s cubic-bezier(.2,.9,.2,1)}
.lp-ph{display:flex;align-items:center;gap:6px;padding:12px 12px 8px;border-bottom:1px solid rgba(255,255,255,.12)}
.lp-pt{border:0;background:none;color:#cfc6ee;font:700 14px 'Inter',sans-serif;padding:8px 12px;border-radius:999px;cursor:pointer}.lp-pt.on{background:rgba(255,255,255,.16);color:#fff}
.lp-px2{margin-left:auto;width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;cursor:pointer}.lp-px2 svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.lp-pb{flex:1;min-height:0;overflow:auto;padding:16px;-webkit-user-select:text;user-select:text}
.lp-who{display:flex;align-items:center;gap:10px;margin-bottom:12px}.lp-who small{display:block;color:#b9b0d8}
.lp-h3{margin:0 0 8px;font:800 20px/1.25 'Inter',sans-serif}.lp-dd{margin:0 0 14px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5;color:#e6e0fa}
.lp-stats{display:flex;gap:14px;flex-wrap:wrap;color:#b9b0d8;font-size:13px;margin-bottom:16px}
.lp-pbtn{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;border-radius:999px;padding:9px 14px;font:700 13.5px 'Inter',sans-serif;cursor:pointer}.lp-pbtn.dg{border-color:rgba(229,72,77,.6);color:#ffb3b5}.lp-pbtn:disabled{opacity:.5}
.lp-pbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.lp-cmb{position:static;width:auto;height:100%;display:flex;flex-direction:column;background:transparent;border:0;box-shadow:none;border-radius:0}.lp-cmb .pv-cmh{display:none}.lp-pb:has(.lp-cmb){padding:0}
/* téléphone : panneau en bas, la vidéo rétrécit au-dessus et continue de jouer */
@media (max-width:760px){
  .lp-pan{left:0;right:0;bottom:0;height:50dvh;border-radius:22px 22px 0 0;box-shadow:0 -18px 44px rgba(0,0,0,.45);transform:translateY(105%)}.lp-pan.on{transform:none}
  .lp-ov.split .lp-s.cur .lp-fr{height:50dvh;border-radius:0 0 22px 22px}.lp-ov.split .lp-feed{overflow:hidden}
  .lp-ov.split .lp-s.cur .lp-side{bottom:14px}.lp-ov.split .lp-s.cur .lp-info{bottom:14px}
  .lp-ov.split .lp-s.cur .lp-pg{display:none}
}
/* ordinateur : panneau à gauche, la colonne vidéo se décale vers la droite */
@media (min-width:761px){
  .lp-pan{left:0;top:0;bottom:0;width:380px;transform:translateX(-105%);border-right:1px solid rgba(255,255,255,.12);box-shadow:20px 0 50px rgba(0,0,0,.35)}.lp-pan.on{transform:none}
  .lp-ov.split .lp-s{padding-left:380px}.lp-ov.split .lp-s::before{left:380px}
  .lp-side{right:8px}
}
@media (prefers-reduced-motion:reduce){.lp-pan,.lp-s,.lp-fr{transition:none}.lp-hint{animation:none}}
@media (min-width:761px){.lp-card{height:clamp(320px,calc(100dvh - 290px),620px)}}
@media (max-width:520px){.lp-minebtn span{display:none}.lp-minebtn{padding:10px 12px}.lp-acts{gap:6px;flex-wrap:nowrap}.lp-share,.lp-livebtn{padding:10px 13px}}

/* ===== Nouveau style (essai) : Réglages › Apparence. Tout est sous html[data-look=essai] : sans l'interrupteur, rien ne change. ===== */
html[data-look=essai] .vtabs{position:relative;background:none;border:0;border-radius:999px;padding:0;gap:2px;margin-left:0;box-shadow:none}
html[data-look=essai] .vt{position:relative;z-index:1;padding:8px 15px;color:var(--mute);transition:color .3s}
html[data-look=essai] .vt:hover{color:var(--ink)}
html[data-look=essai] .vt.on{background:none;color:#fff;font-weight:700}
html[data-look=essai] .vt-ind{position:absolute;left:0;top:0;z-index:0;border-radius:999px;pointer-events:none;background:linear-gradient(90deg,var(--v),#a845d8,var(--p));background-size:300% 100%;box-shadow:0 8px 18px -8px rgba(91,61,245,.55);transition:transform .42s cubic-bezier(.3,.9,.25,1.08),width .42s cubic-bezier(.3,.9,.25,1.08),background-position .42s ease}
html[data-look=essai] .vt-ind.still{transition:none}
html:not([data-look=essai]) .vt-ind{display:none}
html[data-look=essai] .search{background:none;border-color:transparent;box-shadow:none}
html[data-look=essai] .search:hover{background:color-mix(in srgb,var(--v) 10%,transparent)}
html[data-look=essai] .bar.sopen .search{background:var(--card);border-color:var(--line);box-shadow:0 8px 28px rgba(91,61,245,.2)}
html[data-look=essai] #hd .vtabs{margin:0 6px;flex:none}
html[data-look=essai] .sh .vtabs{margin-right:4px}
html[data-look=essai] #field .b{background-image:radial-gradient(circle at 30% 24%,rgba(255,255,255,.34),transparent 48%),linear-gradient(transparent 55%,rgba(0,0,0,.12))}
html[data-look=essai] #field .b:not(.core){box-shadow:0 16px 26px -14px rgba(60,30,150,.55)}
html[data-look=essai] .wvseg{display:inline-flex;gap:2px;padding:0;border-radius:999px;background:none;border:0;vertical-align:middle;margin-left:6px}
html[data-look=essai] .wvsb{border:0;background:none;padding:7px 14px;border-radius:999px;font:600 13px 'DM Sans',system-ui,sans-serif;color:var(--mute);cursor:pointer;transition:background .3s,color .3s}
html[data-look=essai] .wvsb:hover{color:var(--ink)}html[data-look=essai] .wvsb.on{background:color-mix(in srgb,var(--v) 14%,transparent);color:var(--v)}
html[data-look=essai] .wvsb:focus-visible{outline:2px solid var(--v);outline-offset:1px}
@media (max-width:760px){
  html[data-look=essai] .vtabs{display:flex;margin:0 12px;width:calc(100% - 24px)}html[data-look=essai] .vt{flex:1;justify-content:center;white-space:nowrap;padding:8px 6px;font-size:13px}html[data-look=essai] .vt svg{display:none}
  html[data-look=essai] .wvday{display:flex;flex-direction:column;align-items:center;gap:8px}
}
/* Loop : le panneau (description, commentaires) prend la couleur des cartes */
html[data-look=essai] .lp-pan{background:var(--card);color:var(--ink)}html[data-look=essai] .lp-ph{border-color:var(--line)}
html[data-look=essai] .lp-pt{color:var(--mute)}html[data-look=essai] .lp-pt.on{background:color-mix(in srgb,var(--v) 14%,transparent);color:var(--v)}
html[data-look=essai] .lp-px2{background:var(--bg);color:var(--ink)}html[data-look=essai] .lp-h3,html[data-look=essai] .lp-who b{color:var(--ink)}
html[data-look=essai] .lp-dd{color:var(--ink)}html[data-look=essai] .lp-who small,html[data-look=essai] .lp-stats{color:var(--mute)}
html[data-look=essai] .lp-pbtn{background:var(--bg);color:var(--ink);border-color:var(--line)}html[data-look=essai] .lp-pbtn.dg{color:#c0343a;border-color:rgba(229,72,77,.5)}

.m .act .mo{display:none}
html[data-look=essai] #field.waves .b{min-width:0}
html[data-look=essai] #field.waves .b.sm span{font-size:max(var(--fs,15px),12px)}
html[data-look=essai] #field.waves .b.sm small{display:none}
/* essai v3 : barre flottante transparente au survol / au toucher, message mis en surbrillance au clic */
html[data-look=essai] .m{position:relative;border-radius:14px;transition:background .2s,box-shadow .2s}
html[data-look=essai] .m .bd{position:relative}
html[data-look=essai] .m .mx{position:absolute;top:-31px;right:4px;z-index:3;display:flex;align-items:center;gap:2px;padding:3px 6px;margin:0;border-radius:999px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);border:1px solid rgba(120,90,220,.18);box-shadow:0 8px 22px -8px rgba(60,30,150,.35);opacity:0;transform:translateY(5px) scale(.97);pointer-events:none;transition:opacity .18s,transform .18s}
html[data-look=essai] .m:hover .mx,html[data-look=essai] .m.sel .mx,html[data-look=essai] .m .mx:focus-within{opacity:1;transform:none;pointer-events:auto}
html[data-look=essai] .m.sel{background:linear-gradient(90deg,rgba(120,90,220,.10),rgba(120,90,220,.03));box-shadow:inset 3px 0 0 var(--v)}
html[data-look=essai] .m .mx .echo,html[data-look=essai] .m .mx .fl{border:0;background:none;box-shadow:none;padding:5px 8px;border-radius:999px;color:var(--mute);font-size:12.5px;gap:4px}
html[data-look=essai] .m .mx .echo:hover,html[data-look=essai] .m .mx .fl:hover{background:rgba(120,90,220,.12);color:var(--v)}
html[data-look=essai] .m .mx .echo.on{color:var(--v);background:rgba(120,90,220,.14)}
html[data-look=essai] .m .mx .echo.dis:hover{background:rgba(229,72,77,.1);color:#e5484d}
html[data-look=essai] .m .mx .echo.dis.on{background:rgba(229,72,77,.12);color:#e5484d}
html[data-look=essai] .m .mx .echo span.z,html[data-look=essai] .m .mx .rlb span{display:none}


html[data-look=essai] .m{margin-top:16px}
@media (hover:none){html[data-look=essai] .m .mx{top:-31px}}

/* essai v4 : sélecteur bien en évidence, tiret séparateur, réactions visibles sous le message */
html[data-look=essai] .wvdash{display:inline-block;margin:0 10px;color:var(--mute);opacity:.6;vertical-align:middle}
html[data-look=essai] .wvseg{padding:3px;gap:2px;background:rgba(255,255,255,.7);border:1px solid rgba(120,90,220,.22);box-shadow:0 6px 16px -10px rgba(60,30,150,.4)}
html[data-look=essai] .wvsb{padding:7px 15px;color:var(--ink);opacity:.72}
html[data-look=essai] .wvsb:hover{opacity:1}
html[data-look=essai] .wvsb.on{opacity:1;color:#fff;font-weight:700;background:linear-gradient(135deg,var(--v),var(--p));box-shadow:0 6px 14px -6px var(--v)}
.m .rx{display:none}
html[data-look=essai] .m .rx.has{display:flex;gap:6px;margin:4px 0 0}
html[data-look=essai] .m .rxc{display:inline-flex;align-items:center;gap:4px;padding:2px 9px 2px 7px;border-radius:999px;background:rgba(120,90,220,.09);color:var(--v);font:700 12px 'DM Sans',system-ui,sans-serif}
html[data-look=essai] .m .rxc svg{width:13px;height:13px}
html[data-look=essai] .m .rxc.rxd{background:rgba(229,72,77,.09);color:#e5484d}
html[data-look=essai] .m .rxc.mine{box-shadow:inset 0 0 0 1.5px currentColor}

/* essai v5 : le message se met doucement en évidence au passage de la souris / du doigt */
html[data-look=essai] .m:hover:not(.sel){background:rgba(120,90,220,.05)}
/* Loop : le panneau de commentaires est clair, donc les commentaires doivent être foncés (ils étaient blancs : invisibles) */
html[data-look=essai] .lp-pan .pv-cmb2,html[data-look=essai] .lp-pan .pv-cmb2 p,html[data-look=essai] .lp-pan .pv-cmt b,html[data-look=essai] .lp-pan .pv-cmt a,html[data-look=essai] .lp-pan .pv-cme{color:var(--ink)}
html[data-look=essai] .lp-pan .pv-cmt small,html[data-look=essai] .lp-pan .pv-cme,html[data-look=essai] .lp-pan .pv-cmd{color:var(--mute)}
html[data-look=essai] .lp-pan .pv-cmd:hover{color:var(--ink)}
html[data-look=essai] .lp-pan .pv-cmk{background:rgba(120,90,220,.09);color:var(--mute)}
html[data-look=essai] .lp-pan .pv-cmk:hover,html[data-look=essai] .lp-pan .pv-cmk:focus-visible{background:rgba(120,90,220,.18);color:var(--v)}
html[data-look=essai] .lp-pan .pv-cmf{border-color:var(--line)}
html[data-look=essai] .lp-pan .pv-cmf input{background:var(--bg);color:var(--ink);border-color:var(--line)}
html[data-look=essai] .lp-pan .pv-cmf input::placeholder{color:var(--mute)}
html[data-look=essai] .lp-pan .pv-cmk.on{background:var(--p);color:#fff}html[data-look=essai] .lp-pan .pv-cmkd.on{background:color-mix(in srgb,#e5484d 14%,var(--card));color:#c0292e}
html[data-look=essai] .lp-pan .pv-cmq{color:var(--mute)}html[data-look=essai] .lp-pan .pv-cmq b,html[data-look=essai] .lp-pan .pv-cmq2 b{color:var(--ink)}html[data-look=essai] .lp-pan .pv-cmq button{background:rgba(120,90,220,.12);color:var(--ink)}
html[data-look=essai] .lp-pan .pv-cmq2{border-left-color:rgba(120,90,220,.35);color:var(--mute)}
html[data-look=essai] .lp-pan .pv-cmt3{border-color:rgba(120,90,220,.38);background:rgba(120,90,220,.09);color:var(--v)}
html[data-look=essai] .lp-pan .pv-cmn.ch:not(.last)::after{border-left-color:rgba(120,90,220,.28)}

/* Loop : étoile (favori), reloop, compteur de vues */
.lp-info .lp-vw{display:inline-flex;align-items:center;gap:5px;margin-top:3px;opacity:.85;font:600 12px 'Inter','DM Sans',system-ui,sans-serif}.lp-vw svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.lp-a.star svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round}.lp-a.star.on{color:#ffcb3d}.lp-a.star.on svg{fill:currentColor}
.lp-a.reloop.on{color:#7ee0a8}.lp-a.reloop svg{fill:none;stroke:currentColor}
.lp-bfv svg,.lp-favbtn svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round}
.lp-fr2{cursor:pointer}.lp-fr2 .lp-md.on{color:#e9a400}.lp-fr2 .lp-md.on svg{fill:currentColor}
.lp-side{gap:11px}@media (max-height:700px){.lp-side{gap:7px}}
@media (max-width:520px){.lp-favbtn span{display:none}.lp-favbtn{padding:10px 12px}.lp-share{white-space:nowrap}}

/* essai v6 : la barre flottante ne fait plus apparaître de barres de défilement ; le message mis en évidence entoure aussi la photo */
html[data-look=essai] #msgs,html[data-look=essai] #dmmsgs{overflow-x:hidden}
html[data-look=essai] .m{padding-left:10px;padding-right:10px;margin-left:-10px;margin-right:-10px;box-sizing:border-box}
html[data-look=essai] .m.sel{box-shadow:none;background:rgba(120,90,220,.09)}
html[data-look=essai] .m .mx{top:-24px;right:10px}

/* Loop : « reloop par … » (seulement quand un contact a reloop la vidéo) */
.lp-info .lp-rlby{display:inline-flex;align-items:center;gap:0;margin-bottom:6px;padding:3px 10px 3px 4px;border-radius:999px;background:rgba(20,10,40,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:600 12px 'Inter','DM Sans',system-ui,sans-serif;color:#fff;width:fit-content;max-width:100%}
.lp-rlby .lp-rav{width:22px;height:22px;font-size:10px;border:1.5px solid #fff;margin-left:-6px}.lp-rlby .lp-rav:first-child{margin-left:0}
.lp-rlby i{display:grid;place-items:center;margin:0 5px 0 6px;color:#7ee0a8}.lp-rlby i svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lp-rlby em{font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* essai v7 : commentaires façon réseau social — « Répondre » à gauche, like et dislike à droite, toujours visibles ; les autres actions dans la barre flottante */
html[data-look=essai] .m .act{position:static;display:flex;align-items:center;gap:2px;margin:0 0 2px;padding:0;background:none;border:0;box-shadow:none;opacity:1;transform:none;pointer-events:auto;backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-look=essai] .m .act .rp{order:0;border:0;background:none;box-shadow:none;padding:4px 2px;color:var(--mute);font:700 12.5px 'Inter','DM Sans',system-ui,sans-serif;display:inline-flex;gap:0;cursor:pointer}
html[data-look=essai] .m .act .rp svg{display:none}.m .act .rp span{display:none}html[data-look=essai] .m .act .rp span{display:inline}
html[data-look=essai] .m .act .rp:hover{color:var(--v)}
html[data-look=essai] .m .act>.echo{border:0;background:none;box-shadow:none;padding:4px 6px;border-radius:999px;color:var(--mute);font:600 13px 'Inter','DM Sans',system-ui,sans-serif;gap:5px;min-width:0}
html[data-look=essai] .m .act>.echo svg{width:19px;height:19px}
html[data-look=essai] .m .act::before{content:'';order:1;flex:1}
html[data-look=essai] .m .act>.echo.rlb{order:2}
html[data-look=essai] .m .act>.echo:not(.dis):not(.rlb){order:3}
html[data-look=essai] .m .act>.echo.dis{order:4}
html[data-look=essai] .m .act>.echo span.z{display:none}
html[data-look=essai] .m .act>.echo:hover{background:rgba(120,90,220,.1);color:var(--v)}
html[data-look=essai] .m .act>.echo.dis:hover{background:rgba(229,72,77,.1);color:#e5484d}
html[data-look=essai] .m .act>.echo.on{color:var(--v);background:none}
html[data-look=essai] .m .act>.echo.on svg{filter:drop-shadow(0 0 0 currentColor)}
html[data-look=essai] .m .act>.echo.dis.on{color:#e5484d;background:none}
html[data-look=essai] .m .rx{display:none}
html[data-look=essai] .m .mx{display:flex}
.m .mx{display:none}

/* essai v7 : commentaires des vidéos et des photos, même esprit que le chat */
html[data-look=essai] .pv-cma{display:flex;align-items:center;gap:2px;margin-top:2px}
html[data-look=essai] .pv-cma .pv-cmk{background:none;padding:4px 6px;font:600 13px 'Inter','DM Sans',system-ui,sans-serif;gap:5px}
html[data-look=essai] .pv-cma .pv-cmk svg{width:18px;height:18px}
html[data-look=essai] .pv-cma .pv-cmk:last-child{order:-1;padding-left:0;font-weight:700;font-size:12.5px}html[data-look=essai] .pv-cma .pv-cmk:last-child svg{display:none}
html[data-look=essai] .pv-cma .pv-cmk:first-child{margin-left:auto}
html[data-look=essai] .pv-cma .pv-cmk span.z{display:none}
html[data-look=essai] .pv-cma .pv-cmk.on,html[data-look=essai] .pv-cma .pv-cmk.on:hover{background:none}
html[data-look=essai] .lp-pan .pv-cmk.on{background:none;color:var(--v)}html[data-look=essai] .lp-pan .pv-cmkd.on{background:none;color:#e5484d}
html[data-look=essai] .pv-cm:not(.lp-cmb) .pv-cmk.on{background:none;color:#fff}
html[data-look=essai] .cv-cm .pv-cmk.on{background:none;color:var(--v)}html[data-look=essai] .cv-cm .pv-cmkd.on{background:none;color:#e5484d}

/* essai v8 : plus de barre flottante — Reloop dans la rangée ; une petite croix (supprimer) ou signaler / masquer apparaît dans le coin du message au survol ou au clic */
html[data-look=essai] .m .mx{position:absolute;top:-4px;right:2px;left:auto!important;z-index:3;display:flex;align-items:center;gap:0;padding:0;margin:0;border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;transform:none;opacity:0;pointer-events:none;transition:opacity .15s}
html[data-look=essai] .m:hover .mx,html[data-look=essai] .m.sel .mx,html[data-look=essai] .m .mx:focus-within{opacity:1;pointer-events:auto}
@media (hover:none){html[data-look=essai] .m .mx{top:-4px}}
html[data-look=essai] .m .mx .fl{padding:6px;border-radius:999px;color:var(--mute);background:none;border:0}
html[data-look=essai] .m .mx .fl svg{width:16px;height:16px}
html[data-look=essai] .m .mx .fl:hover{background:rgba(120,90,220,.12);color:var(--v)}
html[data-look=essai] .m .mx .fl.del:hover,html[data-look=essai] .m .mx .fl.del.ask{background:rgba(229,72,77,.12);color:#e5484d}
html[data-look=essai] .m .mx .fl.del span{font:600 12px 'Inter','DM Sans',system-ui,sans-serif;margin-left:2px}

/* retirer un Reloop : croix sur ma carte dans Amis, « Retirer ? » sous le message */
.cv-rt{display:inline-flex;align-items:center;gap:6px}.cv-rt small{margin:0!important}
.cv-rx{display:inline-flex;align-items:center;gap:4px;border:0;background:none;color:var(--mute);padding:6px;border-radius:999px;cursor:pointer;font:600 12px 'Inter','DM Sans',system-ui,sans-serif}
.cv-rx svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.cv-rx:hover,.cv-rx.ask{background:rgba(229,72,77,.12);color:#e5484d}
.cv-c.bye{opacity:0;transform:scale(.98);transition:opacity .2s,transform .2s}
.echo.rlb.ask,html[data-look=essai] .m .act>.echo.rlb.ask{color:#e5484d;background:rgba(229,72,77,.10)}
html[data-look=essai] .m .act>.echo.rlb.ask span{display:inline}

/* le défilement d'une discussion ne « déborde » plus sur la page derrière (sinon la vidéo Loop s'ouvrait en grand) */
#msgs,#dmmsgs,.chp-b,.chpop,#side,#dmside{overscroll-behavior:contain}

/* nombre d'amis, bien visible sous le nom (fiche profil) */
.pf-fc{display:inline-flex;align-items:baseline;gap:0;margin:2px 0 4px;padding:3px 12px;border-radius:999px;background:color-mix(in srgb,var(--v) 11%,transparent);color:var(--v);font:600 13px 'Inter','DM Sans',system-ui,sans-serif;width:fit-content;border:0}
.pf-fc b{font-size:16px;font-weight:800;font-family:'Unbounded','DM Sans',sans-serif;letter-spacing:-.01em}
button.pf-fc{cursor:pointer}button.pf-fc:hover{background:color-mix(in srgb,var(--v) 20%,transparent)}
.pf-fc span{margin-left:5px;font-size:14px}.pf-fc{padding:4px 14px}

/* nombre d'amis à côté du pseudo dans le chat : « – 👥 128 », gris clair et discret */
.frtag{display:inline-flex;align-items:center;gap:4px;color:var(--mute);opacity:.72;font:500 12px 'Inter','DM Sans',system-ui,sans-serif;white-space:nowrap}
.frtag i{font-style:normal;margin-right:1px}.frtag svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* fiche profil : deux onglets, « Photos et vidéos » et « Loop » (barre colorée qui glisse), vignettes verticales pour Loop */
.pf-ph{padding-top:4px}
.pf-tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;margin:0 0 14px;border-bottom:1px solid var(--line)}
.pf-tab{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;padding:13px 6px 12px;border:0;background:none;color:var(--mute);font:600 14px 'Inter','DM Sans',system-ui,sans-serif;cursor:pointer;transition:color .2s}
.pf-tab svg{flex:none;width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:color .2s}
.pf-tab span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-tab b{flex:none;padding:1px 8px;border-radius:999px;background:color-mix(in srgb,var(--v) 9%,transparent);color:var(--mute);font-size:11.5px;font-weight:700;transition:background .2s,color .2s}
.pf-tab:hover{color:var(--ink)}.pf-tab.on{color:var(--ink)}.pf-tab.on svg{color:var(--v)}.pf-tab.on b{background:var(--v);color:#fff}
.pf-tab:focus-visible{outline:2px solid var(--v);outline-offset:-3px;border-radius:12px}
.pf-tabind{position:absolute;left:0;bottom:-1px;width:50%;height:3px;border-radius:3px 3px 0 0;background:linear-gradient(90deg,var(--v),var(--p));transition:transform .35s cubic-bezier(.3,.9,.25,1)}
.pf-pane.pfin{animation:pfinL .3s ease both}.pf-pane.pfin1{animation:pfinR .3s ease both}
@keyframes pfinL{from{opacity:0;transform:translateX(-14px)}}@keyframes pfinR{from{opacity:0;transform:translateX(14px)}}
.pf-lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pf-lt{position:relative;aspect-ratio:9/16;padding:0;border:0;border-radius:16px;overflow:hidden;background:var(--bg);cursor:pointer}
.pf-lt img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s;-webkit-user-drag:none;user-select:none}
.pf-lt::after{content:'';position:absolute;inset:auto 0 0 0;height:44%;background:linear-gradient(transparent,rgba(15,8,35,.66));pointer-events:none}
.pf-lv{position:absolute;left:9px;bottom:8px;z-index:1;display:inline-flex;align-items:center;gap:4px;color:#fff;font:700 12.5px 'Inter','DM Sans',system-ui,sans-serif;text-shadow:0 1px 6px rgba(0,0,0,.45)}
.pf-lv svg{width:14px;height:14px;fill:currentColor;stroke:none}
.pf-ls{position:absolute;top:8px;left:8px;z-index:1;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.92);color:#9a6200;font:700 11px 'Inter','DM Sans',system-ui,sans-serif}.pf-ls.s3{color:#c0302f}
.pf-ladd{aspect-ratio:9/16;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:2px dashed color-mix(in srgb,var(--v) 45%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--v) 6%,transparent);color:var(--v);font:600 12.5px 'Inter','DM Sans',system-ui,sans-serif;cursor:pointer;transition:background .2s,transform .2s;padding:0 6px;text-align:center}
.pf-ladd i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--v);color:#fff}.pf-ladd i svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.pf-ladd:hover{background:color-mix(in srgb,var(--v) 12%,transparent);transform:translateY(-2px)}
@media (hover:hover){.pf-lt:hover img{transform:scale(1.05)}}
@media (max-width:420px){.pf-tab{gap:5px;font-size:13px;padding-left:2px;padding-right:2px}.pf-tab svg{width:19px;height:19px}.pf-tab b{padding:1px 6px}.pf-lgrid{gap:6px}}
@media (prefers-reduced-motion:reduce){.pf-tabind{transition:none}.pf-pane.pfin,.pf-pane.pfin1{animation:none}}

/* chat : Reloop après le dislike (like, dislike, Reloop), flèche en boucle, effet « tour sur soi-même » sans s'envoler vers la droite */
html[data-look=essai] .m .act>.echo:not(.dis):not(.rlb){order:2}
html[data-look=essai] .m .act>.echo.dis{order:3}
html[data-look=essai] .m .act>.echo.rlb{order:4}
.echo.rlb svg{width:19px;height:19px}
.echo.rlb.rlfx svg{animation:rlspin .9s cubic-bezier(.3,.7,.25,1) both}
@keyframes rlspin{0%{transform:rotate(0) scale(1)}45%{transform:rotate(360deg) scale(1.45)}70%{transform:rotate(360deg) scale(.95)}100%{transform:rotate(360deg) scale(1)}}
html[data-look=essai] .m .act>.echo.rlb.on{color:var(--v)}

/* Lecture sur place des vidéos partagées (YouTube, Vimeo, Dailymotion) */
.ytc .ytt{overflow:hidden}.lkc .ytt:has(.ytb){aspect-ratio:16/9}
.ytc .ytb{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:transparent;cursor:pointer;border-radius:0}
.ytc .ytb:focus-visible{outline:3px solid var(--v);outline-offset:-3px}
.ytc .ytp{transition:transform .25s cubic-bezier(.3,1.4,.5,1),background .2s}.ytc:hover .ytp,.ytc .ytb:focus-visible~.ytp{transform:scale(1.12)}
.ytc .ytf{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;animation:ytfIn .45s ease both}
.ytc.on{width:min(100%,460px);cursor:default}.ytc.on:hover{transform:none}.ytc.on .ytp,.ytc.on .ytt img,.ytc.on .ytb{display:none}
.ytc .ytk{position:absolute;top:8px;right:8px;z-index:2;width:30px;height:30px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:rgba(10,8,20,.62);color:#fff;cursor:pointer;backdrop-filter:blur(4px);transition:background .2s,transform .2s}
.ytc .ytk:hover,.ytc .ytk:focus-visible{background:rgba(10,8,20,.9);transform:scale(1.08)}.ytc .ytk svg{width:16px;height:16px}
.ytc:not(.on) .ytk{display:none}
a.ytx{color:inherit;text-decoration:none}a.ytx:hover b{text-decoration:underline}
@keyframes ytfIn{from{opacity:0;transform:scale(.97)}}
@media (prefers-reduced-motion:reduce){.ytc .ytf{animation:none}.ytc .ytp{transition:none}}

/* Fenêtre « Signaler » */
.rps .qp{width:min(460px,100%)}.rps .qp-bd{padding:20px 20px 20px}.rps h3{font-size:19px}
.rps-sub{margin:0 0 14px;color:var(--mute);font-size:14px;line-height:1.45}
.rps .qp-opts{gap:7px;margin-bottom:12px}.rps .qp-o{padding:9px 12px}.rps .qp-o i{width:34px;height:34px}.rps .qp-o:hover{border-color:color-mix(in srgb,var(--v) 55%,var(--line))}.rps .qp-o:focus-visible{outline:3px solid color-mix(in srgb,var(--v) 55%,transparent);outline-offset:2px}
.rps .qp-o[data-k="mineur"].on i,.rps .qp-o[data-k="sexuel"].on i,.rps .qp-o[data-k="violence"].on i,.rps .qp-o[data-k="illegal"].on i{background:var(--p)}
.rps-ta{min-height:76px;margin:0 0 6px;animation:rpsIn .25s ease}.rps-err{margin:2px 0 6px;color:var(--p);font-size:13.5px;font-weight:600}.rps .hid{display:none}
.rps-ok{display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 4px 2px}.rps-ok i{display:grid;place-items:center;width:64px;height:64px;margin-bottom:14px;border-radius:50%;background:linear-gradient(135deg,var(--v),var(--p));color:#fff;animation:rpsPop .5s cubic-bezier(.2,1.4,.4,1)}.rps-ok i svg{width:30px;height:30px}.rps-ok .qp-go{width:100%;margin-top:6px}
.qpov.rps.out{opacity:0;transition:opacity .2s}
@keyframes rpsIn{from{opacity:0;transform:translateY(-6px)}}@keyframes rpsPop{from{opacity:0;transform:scale(.5)}}
@media (prefers-reduced-motion:reduce){.rps-ta,.rps-ok i{animation:none}}
.rps .qp-act{position:sticky;bottom:-20px;margin:12px -20px -20px;padding:12px 20px 20px;background:linear-gradient(to bottom,transparent,var(--card) 18px)}
@media (max-width:560px){.rps.qpov{align-items:end;padding:0}.rps .qp{width:100%;border-radius:26px 26px 0 0;max-height:92dvh}}

.rps-bl{width:100%;margin:6px 0 12px;padding:14px;border-radius:16px;background:var(--bg);border:1px solid var(--line)}.rps-bl .rps-sub{margin:0 0 10px;font-size:13.5px}
.rps-blb{width:100%;padding:11px 14px;border-radius:14px;border:1.5px solid var(--p);background:none;color:var(--p);font:700 14.5px 'DM Sans',sans-serif;cursor:pointer;transition:background .2s,color .2s}.rps-blb:hover,.rps-blb:focus-visible{background:var(--p);color:#fff}.rps-blb.on{border-color:var(--line);color:var(--ink)}.rps-blb.on:hover{background:var(--card);color:var(--ink)}.rps-blb:disabled{opacity:.6}
.rps-lk{display:inline;padding:0;border:0;background:none;color:var(--v);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
/* lecteur Loop : bouton Signaler discret sous les autres, vidéo non « enregistrable » d'un appui long, état « en préparation » */
.lp-a.flag svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.lp-a.flag{opacity:.78}.lp-a.flag:hover{opacity:1}.lp-a.flag.on{color:#ffb4b4;opacity:1;cursor:default}
.lp-vid,.lp-px,.lp-bg{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.lp-st.s5{background:rgba(124,92,255,.14);color:var(--v)}
/* signalement : drapeau discret sur les publications d'amis et sur la carte Loop */
.cv-rf.done{color:#e5484d;cursor:default}.cv-rf:hover{background:rgba(229,72,77,.1);color:#e5484d}
.lp-card{position:relative}.lp-cflag{position:absolute;top:10px;right:10px;z-index:5;width:34px;height:34px;border-radius:50%;border:0;background:rgba(20,10,40,.45);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:.85}
.lp-cflag svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.lp-cflag:hover{opacity:1;background:rgba(229,72,77,.7)}.lp-cflag.done{background:rgba(229,72,77,.75);cursor:default;opacity:1}
/* déclaration d'âge (inscription) */
.pv-cmf2{padding:5px 8px}.pv-cmf2.on{opacity:.55}.pv-cmhid{margin:4px 0 0;font-size:12px;font-style:italic;opacity:.7}

/* ---------- Version Café (essai) : html[data-ver=cafe] ---------- */
html:not([data-ver=cafe]) .cafeh,html:not([data-ver=cafe]) .qrow{display:none}
.cafeh{position:relative;margin:0 auto 18px;padding:20px 20px 18px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(160deg,color-mix(in srgb,var(--v) 7%,var(--card)),var(--card) 60%);box-shadow:0 8px 28px -18px color-mix(in srgb,var(--v) 55%,transparent);animation:cafein .5s ease both}
.col:has(#field.hid) .cafeh{display:none}
@keyframes cafein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cafe-x{position:absolute;top:10px;right:10px;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;background:none;color:var(--mute);cursor:pointer}
.cafe-x:hover,.cafe-x:focus-visible{background:color-mix(in srgb,var(--v) 10%,transparent);color:var(--ink)}
.cafe-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.cafe-h{margin:0 0 4px;font:800 22px/1.15 'Unbounded','DM Sans',sans-serif;letter-spacing:-.01em;padding-right:34px}
.cafe-p{margin:0 0 14px;color:var(--mute);font-size:15px;line-height:1.5;max-width:60ch}
.cafe-g{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cafe-g li{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:16px;background:color-mix(in srgb,var(--v) 6%,transparent)}
.cafe-g i{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--card);color:var(--v)}
.cafe-g i svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cafe-g b{display:block;font-size:14.5px}.cafe-g small{display:block;margin-top:2px;color:var(--mute);font-size:12.5px;line-height:1.4}
.cafe-n{margin:0 0 14px}.cafe-n>b{display:block;margin:0 0 6px;font-size:13px;color:var(--mute);font-weight:600}
.cafe-l{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cafe-t{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:9px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.cafe-t:hover,.cafe-t:focus-visible{border-color:var(--v)}.cafe-t b{font-size:14px}.cafe-t small{color:var(--mute);font-size:12px}
.cafe-none{color:var(--mute);font-size:14px}
.cafe-ok{padding:10px 18px;border:0;border-radius:999px;background:var(--v);color:#fff;font:700 14px 'DM Sans',sans-serif;cursor:pointer}
.cafe-ok:hover,.cafe-ok:focus-visible{filter:brightness(1.1)}
@media (max-width:760px){.cafe-g{grid-template-columns:1fr}.cafeh{padding:16px 16px 14px;border-radius:18px}.cafe-h{font-size:19px}}
.qrow{display:flex;gap:6px;padding:6px 12px 2px;overflow-x:auto;scrollbar-width:none}.qrow::-webkit-scrollbar{display:none}
.qr{flex:none;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font:600 13px 'DM Sans',sans-serif;cursor:pointer}
.qr:hover,.qr:focus-visible{border-color:var(--v);color:var(--v)}
@media (prefers-reduced-motion:reduce){.cafeh{animation:none}}

/* ---------- Version Café : cercles privés ---------- */
.cg-none{margin:0;color:var(--mute);font-size:13.5px;line-height:1.45}
.cg-d{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--c,var(--v));color:#fff;font:800 15px 'DM Sans',sans-serif;font-style:normal}
.cg-x{flex:1;display:flex;flex-direction:column;min-width:0}.cg-x b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cg-x small{color:var(--mute);font-size:12px}
.cg-u{margin-left:2px;padding:2px 8px;border-radius:999px;background:var(--p,#ff4f8b);color:#fff;font:700 11px 'DM Sans',sans-serif;font-style:normal}
.cg-sub{margin:0 0 10px;color:var(--mute);font-size:13.5px;line-height:1.45}.cg-q{margin:14px 0 2px;font-weight:700;font-size:14.5px}
.cg-lb{display:block;font-weight:600;font-size:13.5px}.cg-in{display:block;width:100%;margin-top:6px;padding:12px 14px;border:1.5px solid var(--line);border-radius:14px;background:var(--bg);color:var(--ink);font:500 15px 'DM Sans',sans-serif}
.cg-in:focus{outline:none;border-color:var(--v)}
.cg-pl{display:flex;flex-direction:column;gap:6px;max-height:min(40dvh,320px);overflow:auto;margin:6px 0 4px}
.cg-p,.cg-pk{display:flex;align-items:center;gap:12px;width:100%;padding:8px 12px;border:1.5px solid var(--line);border-radius:14px;background:var(--bg);color:var(--ink);text-align:left;font:inherit}
.cg-p b,.cg-pk b{flex:1;min-width:0;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cg-pk{cursor:pointer}.cg-pk:disabled{opacity:.45;cursor:not-allowed}.cg-pk:not(:disabled):hover{border-color:var(--v)}
.cg-ck{flex:none;display:grid;place-items:center;width:24px;height:24px;border:1.5px solid var(--line);border-radius:50%;color:transparent;font-style:normal}.cg-ck svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cg-pk.on{border-color:var(--v);background:color-mix(in srgb,var(--v) 9%,var(--card))}.cg-pk.on .cg-ck{background:var(--v);border-color:var(--v);color:#fff}
.cg-err{margin:8px 0 0;color:#d6224f;font-size:13.5px}
.cg-hd{display:flex;align-items:center;gap:12px;margin:0 0 6px}.cg-hd h3{margin:0!important}.cg-hd .cg-d{width:40px;height:40px;font-size:18px}
.cg-rm{flex:none;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:none;color:var(--mute);font:600 12.5px 'DM Sans',sans-serif;cursor:pointer}.cg-rm:hover,.cg-rm:focus-visible{border-color:#d6224f;color:#d6224f}
.cg-own{flex:none;color:var(--mute);font-size:12px;font-style:normal}
.cg-more{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.cg-rn{display:flex;gap:8px}.cg-rn .cg-in{margin:0;flex:1;min-width:0;padding:10px 12px}
.cg-b{padding:11px 14px;border:1px solid var(--line);border-radius:14px;background:var(--bg);color:var(--ink);font:600 14px 'DM Sans',sans-serif;cursor:pointer}.cg-b.alt{border-color:var(--v);color:var(--v)}.cg-b.dng{color:#d6224f;border-color:color-mix(in srgb,#d6224f 35%,var(--line))}
.cg-b:disabled{opacity:.6}
.qp-go.dng{background:#d6224f}
#dmgrp svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
aside.min #dmgrp{display:none!important}
#dmgrp.tcb.dmo{width:36px;height:32px;padding:0;justify-content:center}#dmgrp.tcb.dmo::after{display:none}

/* Loop fermé : le message d'origine */
.loopv.soon:not(.hid){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:min(56dvh,460px);text-align:center;padding:40px 16px}
.lp-soon-h{margin:6px 0 0;font:800 clamp(34px,7vw,56px)/1 'Unbounded',sans-serif;letter-spacing:-.04em;background:linear-gradient(135deg,var(--v),var(--p));-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-soon-p{margin:0;color:var(--mute);font:500 16px 'Inter','DM Sans',sans-serif}

/* ---------- Visite guidée (version Café) ---------- */
html:not([data-ver=cafe]) .tour,html:not([data-ver=cafe]) .tour-ring{display:none}
.tour-ring{position:fixed;z-index:87;pointer-events:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--v) 70%,transparent),0 0 0 9999px rgba(14,6,34,.28);transition:left .35s ease,top .35s ease,width .35s ease,height .35s ease,opacity .25s}
.tour-ring.in{animation:tourring .5s ease both}.tour-ring.out,.tour.out{opacity:0;transition:opacity .25s}
@keyframes tourring{from{opacity:0}}
.tour{position:fixed;z-index:88;box-sizing:border-box;padding:14px 16px 12px;border-radius:18px;background:var(--card);color:var(--ink);box-shadow:0 18px 50px -12px rgba(20,8,60,.45),0 0 0 1px var(--line);overflow:hidden}
.tour.in{animation:tourin .45s cubic-bezier(.2,.8,.2,1) both}.tour.in.up{animation-name:tourinup}
@keyframes tourin{from{opacity:0;transform:translateY(10px) scale(.97)}}@keyframes tourinup{from{opacity:0;transform:translateY(-10px) scale(.97)}}
.tour::before{content:"";position:absolute;left:var(--ax,40px);top:-7px;width:14px;height:14px;margin-left:-7px;background:var(--card);transform:rotate(45deg);box-shadow:-1px -1px 0 var(--line)}
.tour.up::before{top:auto;bottom:-7px;box-shadow:1px 1px 0 var(--line)}
.tour-h{display:block;font:800 16px 'Unbounded','DM Sans',sans-serif;letter-spacing:-.01em;margin:0 0 4px}
.tour-p{margin:0 0 10px;color:var(--mute);font-size:14px;line-height:1.45}
.tour-a{display:flex;align-items:center;gap:8px}.tour-d{display:flex;gap:4px;margin-right:auto;min-width:0;flex-wrap:wrap}.tour-d i{width:6px;height:6px;flex:none;border-radius:50%;background:var(--line)}.tour-d i.on{background:var(--v)}
.tour-skip,.tour-nx{padding:7px 13px;border-radius:999px;font:700 13px 'DM Sans',sans-serif;cursor:pointer}
.tour-skip{border:0;background:none;color:var(--mute)}.tour-skip:hover,.tour-skip:focus-visible{color:var(--ink)}
.tour-nx{border:0;background:var(--v);color:#fff}.tour-nx:hover,.tour-nx:focus-visible{filter:brightness(1.1)}
.tour-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:linear-gradient(90deg,var(--v),var(--p));transform-origin:left;animation:tourbar 7s linear both}.tour-bar.p{animation-play-state:paused}
@keyframes tourbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.tour.in,.tour-ring.in{animation:none}.tour-bar{animation:none;transform:none;opacity:.35}.tour-ring{transition:none}}

/* ---------- Version Café : favoris dans une étoile ---------- */
html[data-ver=cafe] #favs{display:none!important}
html:not([data-ver=cafe]) .favbtn,html:not([data-ver=cafe]) .favpop{display:none}
.favbtn{position:relative;flex:none;display:grid;place-items:center;width:40px;height:40px;margin-left:auto;margin-right:6px;border:0;border-radius:50%;background:none;color:var(--mute);cursor:pointer}
.favbtn.on{color:#f5a524}.favbtn:hover,.favbtn:focus-visible,.favbtn[aria-expanded=true]{background:color-mix(in srgb,var(--v) 10%,transparent)}
.favbtn svg{width:20px;height:20px}
.cgbtn{margin-right:0}.cgbtn svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.cgbtn.new{color:var(--p,#ff4f8b)}.cgbtn .cgn{background:var(--p,#ff4f8b)}
.cgpop-go .cg-d{width:30px;height:30px;font-size:14px}.cgpop-go .cg-u{flex:none}
.cgpop-new{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:8px;padding:11px 14px;border:1px dashed var(--line);border-radius:14px;background:none;color:var(--ink);font:600 14px 'DM Sans',sans-serif;cursor:pointer}
.cgpop-new svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}.cgpop-new:hover,.cgpop-new:focus-visible{border-color:var(--v);color:var(--v)}
.favn{position:absolute;top:2px;right:0;min-width:16px;height:16px;padding:0 4px;box-sizing:border-box;border-radius:999px;background:var(--v);color:#fff;font:700 10px/16px 'DM Sans',sans-serif;font-style:normal;text-align:center}
.favpop{position:fixed;z-index:86;box-sizing:border-box;padding:12px;border-radius:18px;background:var(--card);color:var(--ink);box-shadow:0 18px 50px -12px rgba(20,8,60,.4),0 0 0 1px var(--line);animation:tourin .25s ease both}
.favpop-h{display:block;margin:2px 4px 8px;font:800 15px 'Unbounded','DM Sans',sans-serif}
.favpop-none{margin:4px;color:var(--mute);font-size:14px;line-height:1.45}
.favpop-l{display:flex;flex-direction:column;gap:4px;max-height:min(50dvh,340px);overflow:auto}
.favpop-r{display:flex;align-items:center;gap:4px;border-radius:12px}.favpop-r:hover{background:color-mix(in srgb,var(--v) 7%,transparent)}
.favpop-go{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:9px 8px;border:0;background:none;color:inherit;text-align:left;font:inherit;cursor:pointer;border-radius:12px}
.favpop-go .fdot{flex:none;width:12px;height:12px;border-radius:50%;background:var(--c,var(--v))}
.favpop-t{flex:1;min-width:0;font-weight:600;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.favpop-go small{flex:none;color:var(--mute);font-size:12px}
.favpop-r.calm .favpop-t,.favpop-r.calm .fdot{opacity:.55}
.favpop-x{flex:none;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;background:none;color:var(--mute);cursor:pointer}.favpop-x:hover,.favpop-x:focus-visible{color:#d6224f}
.favpop-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
@media (prefers-reduced-motion:reduce){.favpop{animation:none}}
@media (max-width:760px){.favbtn{width:32px;height:32px;margin:0 2px 0 auto}.favbtn svg{width:18px;height:18px}.favn{top:-2px;right:-3px}}
@media (max-width:370px){html[data-ver=cafe] .bar .logo{font-size:.9em}.favbtn{width:28px;margin-left:auto}}
@media (max-width:760px){html[data-ver=cafe] .bar{gap:6px}html[data-ver=cafe] .bar .logo{font-size:.8em}html[data-ver=cafe] .bar .nb{padding-inline:12px}.favbtn{margin:0 0 0 auto}}
.cgbtn+.favbtn{margin-left:0}
@media (max-width:350px){html[data-ver=cafe] .bar .nb{font-size:.85em;padding-inline:8px}html[data-ver=cafe] .bar .logo{font-size:.66em}html[data-ver=cafe] .bar{gap:4px;padding-inline:10px}.favbtn{width:28px;height:28px}.favbtn svg{width:17px;height:17px}}
@media (max-width:760px){html[data-ver=cafe] .bar{padding-inline:12px;gap:4px}html[data-ver=cafe] .bar .search{flex:none;width:38px;height:38px}html[data-ver=cafe] .bar .search #sbtn{width:36px;height:36px}html[data-ver=cafe] .bar.sopen .search{flex:1;width:auto;height:44px}html[data-ver=cafe] .bar.sopen .search #sbtn{width:46px;height:42px}html[data-ver=cafe] .bar.sopen .favbtn{display:none}}
@media (max-width:400px){html[data-ver=cafe] .bar{padding-inline:10px;gap:3px}html[data-ver=cafe] .bar .nb{font-size:.84em;padding-inline:9px}html[data-ver=cafe] .bar .logo{font-size:.66em}.favbtn{width:28px;height:28px}.favbtn svg{width:17px;height:17px}html[data-ver=cafe] .bar .search{width:36px;height:36px}html[data-ver=cafe] .bar .search #sbtn{width:34px;height:34px}}
@media (max-width:440px){html[data-ver=cafe] .bar{padding-inline:6px;gap:2px}html[data-ver=cafe] .bar .nb{padding-inline:7px}html[data-ver=cafe] .bar .stbtn{width:34px;height:34px}}
@media (max-width:370px){html[data-ver=cafe] .bar{gap:1px}html[data-ver=cafe] .bar .nb{padding-inline:5px}}
@media (max-width:350px){html[data-ver=cafe] .bar{padding-inline:8px;gap:2px}html[data-ver=cafe] .bar .nb{font-size:.74em;padding-inline:7px}html[data-ver=cafe] .bar .logo{font-size:.56em}.favbtn{width:26px;height:26px}html[data-ver=cafe] .bar .search{width:34px;height:34px}html[data-ver=cafe] .bar .search #sbtn{width:32px;height:32px}}

/* ---------- Version Café : demandes d'ami dans une petite bulle sur le bord gauche ---------- */
html:not([data-ver=cafe]) .rq{display:none}
.rq{position:fixed;left:0;bottom:110px;z-index:50;display:flex;align-items:center;gap:12px;pointer-events:none;transition:transform .45s cubic-bezier(.2,.9,.25,1),opacity .35s}
.rq>*{pointer-events:auto}
.rq.gone{opacity:0;transform:translateX(-90px);pointer-events:none}.rq.gone>*{pointer-events:none}
.rq-tab{--c:var(--v);--ink:#fff;position:relative;flex:none;box-sizing:border-box;width:58px;height:58px;margin-left:-22px;padding:0 0 0 22px;border:3px solid var(--card);border-radius:50%;background:var(--c);color:var(--ink);font:800 18px 'DM Sans',sans-serif;letter-spacing:.02em;cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 22px -6px rgba(20,8,60,.5);transition:margin-left .35s cubic-bezier(.2,.9,.25,1),padding .35s cubic-bezier(.2,.9,.25,1)}
.rq.open .rq-tab{margin-left:8px;padding-left:0}
.rq-in{pointer-events:none}
.rq-n{top:-6px;right:-4px;background:var(--p,#ff4f8b);border:2px solid var(--card);box-sizing:content-box;min-width:14px;height:14px;line-height:14px}
.rq:not(.open) .rq-tab{animation:rqpulse 2.6s ease-out infinite,rqwob 7s 2s ease-in-out infinite}
.rq.pop .rq-tab{animation:rqpop .9s cubic-bezier(.2,.9,.25,1.2) both}
@keyframes rqpop{0%{transform:translateX(-70px) scale(.8)}60%{transform:translateX(16px) scale(1.06)}100%{transform:none}}
@keyframes rqwob{0%,90%,100%{transform:none}94%{transform:translateX(9px)}97%{transform:translateX(0)}}
@keyframes rqpulse{0%{box-shadow:0 8px 22px -6px rgba(20,8,60,.5),0 0 0 0 color-mix(in srgb,var(--p,#ff4f8b) 60%,transparent)}70%,100%{box-shadow:0 8px 22px -6px rgba(20,8,60,.5),0 0 0 12px transparent}}
.rq-card{box-sizing:border-box;width:min(300px,calc(100vw - 92px));max-height:min(60dvh,430px);overflow:auto;padding:14px 14px 12px 16px;border:1px solid var(--line);border-radius:20px;background:var(--card);color:var(--ink);box-shadow:0 18px 50px -12px rgba(20,8,60,.42);opacity:0;visibility:hidden;transform:translateX(-14px) scale(.96);transform-origin:left center;transition:opacity .25s,transform .35s cubic-bezier(.2,.9,.25,1),visibility 0s .35s}
.rq.open .rq-card{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .35s cubic-bezier(.2,.9,.25,1),visibility 0s}
.rq-h{display:block;margin:0 0 4px;font:800 14px 'Unbounded','DM Sans',sans-serif}
.rq-r{display:flex;flex-direction:column;gap:9px;padding:10px 0 4px;border-top:1px solid var(--line)}.rq-h+.rq-r{border-top:0}
.rq-who{display:flex;align-items:center;gap:10px;min-width:0;padding:0;border:0;background:none;color:inherit;text-align:left;font:inherit;cursor:pointer;border-radius:12px}
.rq-who:hover .rq-x b,.rq-who:focus-visible .rq-x b{text-decoration:underline}
.rq-av{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;color:#fff;font:800 17px 'DM Sans',sans-serif;box-sizing:border-box}
.rq-x{min-width:0;display:flex;flex-direction:column}.rq-x b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rq-x small{color:var(--mute);font-size:12.5px}
.rq-b{display:flex;gap:8px}
.rq-ok,.rq-no{min-height:40px;padding:8px 12px;border-radius:999px;font:700 14px 'DM Sans',sans-serif;cursor:pointer}
.rq-ok{flex:1.4;border:0;background:var(--v);color:#fff}.rq-no{flex:1;border:1px solid var(--line);background:none;color:var(--ink)}
.rq-ok:hover,.rq-ok:focus-visible{filter:brightness(1.1)}.rq-no:hover,.rq-no:focus-visible{border-color:var(--v);color:var(--v)}.rq-ok:disabled,.rq-no:disabled{opacity:.55;cursor:default}
.rq-done{margin:0;padding:10px 0 8px;color:#1a8d4f;font-weight:700;font-size:14px}
.rq-all{margin:6px 0 0;padding:6px 0;border:0;background:none;color:var(--v);font:700 13px 'DM Sans',sans-serif;cursor:pointer;text-decoration:underline}
@media (max-width:760px){.rq{bottom:calc(var(--tb) + env(safe-area-inset-bottom,0px) + 92px)}}
@media (prefers-reduced-motion:reduce){.rq,.rq-tab,.rq-card{animation:none!important;transition:none!important}}

/* ---------- Bulles vidéo (version Café) ---------- */
html:not([data-ver=cafe]) .vcam{display:none}
.vbub{position:relative;display:block;width:176px;height:176px;margin:6px 0 2px;padding:0;border:0;border-radius:50%;overflow:hidden;background:#1b1233;cursor:pointer;box-shadow:0 8px 20px -8px rgba(20,8,60,.5);-webkit-tap-highlight-color:transparent}
.vbub .vb-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.vb-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none}
.vb-bg{fill:none;stroke:rgba(255,255,255,.35);stroke-width:3.2}
.vb-fg{fill:none;stroke:var(--p,#ff4f8b);stroke-width:3.6;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.vb-p{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;display:grid;place-items:center;border-radius:50%;background:rgba(20,8,60,.55);color:#fff;transition:opacity .2s}
.vbub.ld .vb-p{opacity:.35}.vbub.bad{cursor:default;opacity:.6}.vbub.bad .vb-p{opacity:.9}.vbub.bad .vb-p svg{display:none}.vbub.bad .vb-p::before{content:'🔒';font-size:22px;line-height:1}.vbub.on .vb-p{opacity:0}.vbub:focus-visible{outline:3px solid var(--v);outline-offset:2px}
.vb-t{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);padding:2px 9px;border-radius:999px;background:rgba(20,8,60,.62);color:#fff;font:700 12px 'DM Sans',sans-serif;font-variant-numeric:tabular-nums}
.vbov{position:fixed;inset:0;z-index:125;display:grid;place-items:center;padding:12px;background:rgba(15,8,40,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:qpf .18s ease both}
.vbov.out{opacity:0;transition:opacity .18s}
.vbx{position:relative;box-sizing:border-box;width:min(360px,100%);display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 18px 18px;border-radius:28px;background:var(--card);color:var(--ink);box-shadow:0 30px 80px -20px rgba(10,5,30,.6)}
.vb-x{position:absolute;right:10px;top:10px;width:36px;height:36px;border:0;border-radius:50%;background:none;color:var(--mute);font-size:18px;cursor:pointer}.vb-x:hover,.vb-x:focus-visible{background:color-mix(in srgb,var(--v) 10%,transparent);color:var(--ink)}
.vb-hint{margin:0 30px;text-align:center;color:var(--mute);font-size:13px;line-height:1.4}
.vb-stage{position:relative;width:min(264px,68vw);aspect-ratio:1;border-radius:50%;overflow:hidden;background:#1b1233}
.vb-live{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.vb-live.mir{transform:scaleX(-1)}
.vb-stage.rec .vb-bg{stroke:rgba(255,255,255,.5)}
.vb-time{font:700 15px 'DM Sans',sans-serif;font-variant-numeric:tabular-nums}
.vb-err{margin:0;color:#d6224f;font-size:13.5px;text-align:center;line-height:1.4}
.vb-row{display:flex;align-items:center;justify-content:center;gap:22px;width:100%;min-height:72px}.vb-row2{gap:10px}.vb-sp{width:44px}
.vb-rec{position:relative;width:68px;height:68px;padding:0;border:4px solid var(--card);border-radius:50%;background:#e5304f;box-shadow:0 0 0 3px #e5304f;cursor:pointer;display:grid;place-items:center;transition:transform .15s}
.vb-rec i{width:22px;height:22px;border-radius:50%;background:#fff;transition:border-radius .2s,transform .2s}.vb-rec.on i{border-radius:6px;transform:scale(.8)}
.vb-rec:disabled{opacity:.4;cursor:default}.vb-rec:active:not(:disabled){transform:scale(.94)}
.vb-flip{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:none;color:var(--mute);cursor:pointer}.vb-flip:hover,.vb-flip:focus-visible{color:var(--v);border-color:var(--v)}.vb-flip[hidden]{display:none}
.vb-redo,.vb-send{min-height:46px;padding:10px 22px;border-radius:999px;font:700 15px 'DM Sans',sans-serif;cursor:pointer}
.vb-redo{border:1px solid var(--line);background:none;color:var(--ink)}.vb-send{flex:1;border:0;background:var(--v);color:#fff}.vb-send:disabled,.vb-redo:disabled{opacity:.55;cursor:default}
@media (max-width:760px){.vbub{width:164px;height:164px}}
@media (prefers-reduced-motion:reduce){.vbov,.vb-rec,.vb-rec i,.vb-p{animation:none;transition:none}}
.chr-fav{font-size:17px;color:var(--mute)}.chr-fav.on{color:#f5a300}.chr-fav:hover,.chr-fav:focus-visible{color:#f5a300}

/* Version Café : le « like » devient un like — flèche bleue vers le haut, jumelle de la flèche « pas pour moi » (essai). Le rouge de la flèche du bas y est un peu plus vif. */
html[data-ver=cafe]{--up:#3f86f5;--down:#f0394d}
.upv{display:block}
html[data-ver=cafe] .echo:not(.dis):not(.rlb)>svg:not(.upv),html[data-ver=cafe] .cv-e1>svg:not(.upv){display:none}
html[data-ver=cafe] .echo:not(.dis):not(.rlb)>.upv,html[data-ver=cafe] .cv-e1>.upv{display:block}
.upv path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transform-box:fill-box}
.upv .up-d{fill:url(#upg);stroke:none;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.2)}
.on>.upv .up-a,.on>.upv .up-h{stroke:url(#upg)}
.on.pop>.upv .up-a{animation:upshaft .95s cubic-bezier(.3,.7,.3,1) both}
.on.pop>.upv .up-h{animation:uphead .95s ease both}
.on.pop>.upv .up-d{animation:updot .95s ease both}
@keyframes upshaft{0%{transform:scaleY(1);transform-origin:50% 50%;opacity:1}26%{transform:scaleY(0);transform-origin:50% 50%;opacity:0}52%{transform:scaleY(0);transform-origin:50% 100%;opacity:1}100%{transform:scaleY(1);transform-origin:50% 100%;opacity:1}}
@keyframes uphead{0%{opacity:1;transform:none}22%{opacity:0;transform:translateY(4px)}64%{opacity:0;transform:translateY(5px)}100%{opacity:1;transform:none}}
@keyframes updot{0%{opacity:0;transform:scale(.2)}22%{opacity:1;transform:scale(1)}46%{opacity:1;transform:scale(1.18)}66%{opacity:0;transform:scale(.5) translateY(-3px)}100%{opacity:0;transform:scale(.2)}}
@media (prefers-reduced-motion:reduce){.on.pop>.upv .up-a,.on.pop>.upv .up-h,.on.pop>.upv .up-d{animation:none}}
:root[data-motion=off] .on.pop>.upv .up-a,:root[data-motion=off] .on.pop>.upv .up-h,:root[data-motion=off] .on.pop>.upv .up-d{animation:none}
html[data-ver=cafe] .echo:not(.dis):not(.rlb) span:empty,html[data-ver=cafe] .cv-e1 span:empty{display:none}
html[data-ver=cafe] .echo:not(.dis):not(.rlb):has(span:empty){padding:5px 10px}
html[data-ver=cafe] .echo:not(.dis):not(.rlb):not(.ro):hover,html[data-ver=cafe] .cv-b.cv-e1:hover:not(:disabled){border-color:var(--up);color:var(--up)}
html[data-ver=cafe] .echo.on:not(.dis):not(.rlb),html[data-ver=cafe] .cv-b.cv-e1.on{background:color-mix(in srgb,var(--up) 12%,var(--card));border-color:color-mix(in srgb,var(--up) 50%,transparent);color:var(--up)}
html[data-ver=cafe] .echo.pop:not(.dis):not(.rlb)::after{border-color:var(--up)}
html[data-ver=cafe] .meh path{stroke:currentColor}
html[data-ver=cafe] #mehg stop:nth-child(n+3){stop-color:var(--down)}
html[data-ver=cafe] .echo.dis:hover{border-color:var(--down);color:var(--down)}
html[data-ver=cafe] .echo.dis.on{background:color-mix(in srgb,var(--down) 11%,var(--card));border-color:color-mix(in srgb,var(--down) 50%,transparent);color:var(--down)}
html[data-ver=cafe] .echo.dis.pop::after{border-color:var(--down)}
html[data-ver=cafe] .cv-b.cv-d1.on{background:color-mix(in srgb,var(--down) 11%,var(--card));border-color:color-mix(in srgb,var(--down) 50%,transparent)}
html[data-ver=cafe][data-look=essai] .m .act>.echo:not(.dis):not(.rlb).on{background:none;color:var(--up)}
html[data-ver=cafe][data-look=essai] .m .act>.echo:not(.dis):not(.rlb):not(.ro):hover{background:color-mix(in srgb,var(--up) 11%,transparent);color:var(--up)}
html[data-ver=cafe][data-look=essai] .m .act>.echo.dis:hover{background:color-mix(in srgb,var(--down) 10%,transparent);color:var(--down)}
html[data-ver=cafe][data-look=essai] .m .act>.echo.dis.on{background:none;color:var(--down)}

/* ---- Réglages : titres de groupes ---- */
.mgroup{margin:16px 2px 0;font-size:13px;font-weight:600;color:var(--mute)}.menulist>.mgroup:first-child{margin-top:0}
/* ---- Abonnements : grande fenêtre par-dessus la page, fond flouté ---- */
.plansov{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:4vh 4vw;background:rgba(15,8,35,.5);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);animation:fade .25s ease}
.plansbox{width:min(1120px,78vw);max-height:86dvh;overflow:auto;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:0 30px 90px rgba(10,5,25,.5);padding:28px 32px 22px;animation:sheetIn .38s cubic-bezier(.2,.8,.2,1);scrollbar-width:thin}
.pl-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.pl-head h2{margin:0 0 4px;font:800 24px 'Unbounded',sans-serif;letter-spacing:-.03em}.pl-head p{margin:0;color:var(--mute)}
.pl-x{flex:none;width:36px;height:36px;border:1px solid var(--line);border-radius:8px;background:none;color:var(--ink);font-size:16px;cursor:pointer}.pl-x:hover{border-color:var(--v);color:var(--v)}
.pl-top{margin:16px 0 0;padding:10px 14px;border-left:3px solid var(--v);border-radius:6px;background:color-mix(in srgb,var(--v) 9%,var(--card))}.pl-top:empty{display:none}
.pl-grid{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:16px;margin:22px 0 16px}
.pl{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);border-radius:10px;padding:22px;background:color-mix(in srgb,var(--bg) 60%,var(--card))}
.pl.feat{border:2px solid var(--v);background:var(--card);box-shadow:0 12px 34px color-mix(in srgb,var(--v) 16%,transparent)}
.pl h3{margin:0;font-size:15px;font-weight:700;color:var(--mute)}.pl.feat h3{color:var(--v)}
.pl-price{margin:0;font:800 26px/1.15 'Unbounded',sans-serif;letter-spacing:-.03em}.pl-price.sm{font-size:17px;line-height:1.3}
.pl ul{list-style:none;margin:6px 0 10px;padding:0;display:flex;flex-direction:column;gap:9px;flex:1;font-size:14.5px}.pl li{display:flex;gap:9px}.pl li::before{content:"✓";flex:none;color:var(--v);font-weight:800}
.pl-cta{width:100%;border:0;border-radius:8px;background:var(--v);color:#fff;padding:12px 14px;font-weight:700;font-size:15px;font-family:inherit;cursor:pointer}.pl-cta:hover:not(:disabled){filter:brightness(1.08)}.pl-cta:disabled{opacity:.6;cursor:default}
.pl-cta.ghost{background:none;border:1px solid var(--v);color:var(--v)}
.pl-tag{border-top:1px solid var(--line);padding-top:12px;font-size:13px;color:var(--mute)}
.pl-pick{border:0;margin:0;padding:0}.pl-pick label{display:block;padding:5px 0;cursor:pointer}.pl-pick label[hidden]{display:none}
.pl-agree{display:flex;gap:8px;align-items:flex-start;margin:8px 0 12px;font-size:12.5px;color:var(--mute)}.pl-agree input{margin-top:2px;flex:none}.pl-agree a{color:var(--v)}
.pl-buy[hidden],.pl-state[hidden],.pl-cta[hidden]{display:none}
.pl-state,.pl-msg{margin:0;font-size:13px;color:var(--mute)}.pl-msg:empty{display:none}
.pl-foot{margin:0;font-size:12.5px;color:var(--mute)}
@media (max-width:860px){.plansbox{width:min(640px,92vw)}.pl-grid{grid-template-columns:1fr}.pl.feat{order:-1}}
@media (max-width:520px){.plansov{padding:0;align-items:flex-end}.plansbox{width:100%;max-height:94dvh;border-radius:18px 18px 0 0;padding:20px 16px 18px;animation:none}.pl-head h2{font-size:20px}.pl{padding:18px}}
:root[data-motion=off] .plansov,:root[data-motion=off] .plansbox{animation:none}

.pl-pick label{display:flex;align-items:center;gap:8px}.pl-pick input,.pl-agree input{width:auto;flex:none;margin:0}
.menulist{gap:6px}.menulist .mrow{padding:10px 14px;border-radius:14px}.menulist .mrow b{font-size:15px}.menulist .mrow small{font-size:12.5px}

.pl li{align-items:baseline;flex-wrap:wrap}.pl li>span{flex:1;min-width:0}.pl-soon{flex:none;font-style:normal;font-size:11.5px;font-weight:600;color:var(--mute);border:1px solid var(--line);border-radius:5px;padding:1px 6px}
.pl-space{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:6px;padding-top:14px;border-top:1px solid var(--line)}.pl-space b{font-size:14px}.pl-space small{font-size:12.5px;color:var(--mute)}
.pl-link{border:0;background:none;color:var(--v);padding:2px 0;font-weight:600;font-size:14px;font-family:inherit;cursor:pointer;text-align:left}.pl-link:hover{text-decoration:underline}

.pl li>span{flex:1;min-width:0}.pl li.soon{color:var(--mute)}.pl li.soon::before{content:"○";font-weight:400;color:var(--mute)}.pl li.pl-sub{display:block;margin-top:6px;padding-top:10px;border-top:1px dashed var(--line);font-size:13px;font-weight:700;color:var(--mute)}.pl li.pl-sub::before{content:none}
.plansbox{max-height:92dvh}.pl ul{gap:7px;font-size:14px}
.plansbox{padding:22px 28px 18px}.pl-grid{margin:16px 0 12px}.pl{padding:18px 20px;gap:8px}.pl-pick{display:flex;flex-wrap:wrap;gap:4px 16px}.pl-pick label{padding:3px 0;font-size:14px}.pl-agree{margin:6px 0 10px}.pl li.pl-sub{margin-top:2px;padding-top:8px}
@media (max-width:520px){.plansbox{padding:18px 16px 16px}}

/* ---- Réglages : cartes centrées (Affichage, Alertes, Aide, Espace pro) ---- */
.card2.cc{text-align:center}.card2.cc>p{margin-inline:auto;max-width:34em}
.card2.cc .srow{flex-direction:column;justify-content:center;text-align:center;gap:10px}.card2.cc .srow .sl{align-items:center}
.card2.cc .seg,.card2.cc .vgrid{margin-inline:auto}.card2.cc .seg{display:flex;justify-content:center;width:fit-content;max-width:100%}.card2.cc .tg2{margin-inline:auto}
.card2.cc .sbtn{margin-inline:auto}.card2.cc .vval{max-width:360px;display:block;margin-inline:auto}
.card2.cc .vgrid{max-width:460px}
.sh-body .menulist .mgroup,#sh-body .menulist .mgroup{text-align:center}
/* fenêtre Abonnements : titre et offres centrés */
.pl-head{align-items:center}.pl-head>div{flex:1;text-align:center;padding-left:36px}.pl-head p{margin-inline:auto;max-width:44em}
.pl h3,.pl-price,.pl-tag,.pl-state,.pl-msg,.pl-foot{text-align:center}.pl-foot{margin-inline:auto}.pl-top{text-align:center}
.pl-space{align-items:center;text-align:center}.pl-link{text-align:center}
.pl-pick{justify-content:center}.pl-agree{text-align:left}
@media (max-width:520px){.pl-head>div{padding-left:0;text-align:left}.pl-head h2{text-align:left}}
#sheet .p2-head h2{text-align:center}#sheet .p2-head:has(#sh-back.hid) h2{padding-left:46px}
.card2.cc .seg{margin-top:6px;margin-bottom:8px}
.card2.cc .vgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.card2.cc .vopt{flex:0 0 calc(33.333% - 7px)}@media (max-width:520px){.card2.cc .vopt{flex-basis:calc(50% - 5px)}}
/* Loop, pastilles de la fiche : la flèche du like reste blanche sur le fond coloré */
.lp-a.echo.on>.upv .up-a,.lp-a.echo.on>.upv .up-h,.pf-ec.on>.upv .up-a,.pf-ec.on>.upv .up-h{stroke:#fff}
.lp-a.echo.on>.upv .up-d,.pf-ec.on>.upv .up-d{fill:#fff}
.lp-a .upv{width:30px;height:30px}.lp-burst .upv path{stroke:#fff;stroke-width:1.8}.lp-burst .upv .up-d{opacity:0}
/* Publicité « Sponsorisé » dans les chats de sujets */
.adc{position:relative;margin:10px 4px;padding:12px 14px 13px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--v) 5%,var(--card));max-width:560px;align-self:center;width:calc(100% - 8px)}
.adc-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.adc-tag{font-size:11.5px;font-weight:700;letter-spacing:.01em;color:var(--mute);border:1px solid var(--line);border-radius:999px;padding:1px 8px;background:var(--card);white-space:nowrap}
.adc-brand{font-size:13.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.adc-more{width:28px;height:28px;border:0;border-radius:50%;background:none;color:var(--mute);cursor:pointer;display:grid;place-items:center;padding:0}
.adc-more:hover,.adc-more[aria-expanded=true]{background:color-mix(in srgb,var(--v) 10%,transparent);color:var(--ink)}
.adc-more svg{width:18px;height:18px;fill:currentColor}
.adc-h{font-weight:700;font-size:15.5px;line-height:1.3;margin-bottom:2px}
.adc-b{margin:0 0 10px;color:var(--mute);font-size:14px;line-height:1.4}
.adc-h:last-of-type{margin-bottom:10px}
.adc-cta{display:inline-flex;align-items:baseline;gap:8px;border:1px solid var(--v);color:var(--v);border-radius:999px;padding:6px 14px;font-weight:700;font-size:13.5px;text-decoration:none;max-width:100%}
.adc-cta small{font-weight:500;color:var(--mute);font-size:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adc-cta:hover{background:var(--v);color:#fff}.adc-cta:hover small{color:rgba(255,255,255,.8)}
.adc-menu{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:6px}
.adc-menu[hidden]{display:none}
.adc-why{margin:0 0 4px;font-size:12.5px;color:var(--mute);line-height:1.45}
.adc-act{align-self:flex-start;border:0;background:none;color:var(--ink);font:inherit;font-size:13px;font-weight:600;padding:4px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){.adc{margin:8px 2px;width:calc(100% - 4px)}}
a.pl-link{display:block;text-decoration:none}a.pl-link:hover{text-decoration:underline}

.age-e{color:#e5484d;min-height:1.2em;margin:6px 0 0}/* accueil : choix des médias à suivre */
.wl-m{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px;max-height:44dvh;overflow:auto}
.wl-m li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:color-mix(in srgb,var(--v) 7%,var(--card))}
.wl-lg{flex:none;width:40px;height:40px;font-size:17px}
.wl-mt{flex:1;min-width:0;display:flex;flex-direction:column}.wl-mt b{display:flex;align-items:center;gap:6px;font-size:15.5px}.wl-mt b span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wl-mt small{color:var(--mute);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl-m .mfol{flex:none;margin-top:0;padding:8px 14px;font-size:13px}
.wl-t2{font-size:clamp(24px,6.5vw,31px)}

/* croix d'un sujet dans les bulles (fermer chez soi) et « tout rouvrir » */
.b{position:relative}
.hid-back{margin-left:8px;border:0;background:none;color:var(--v);font:600 13px 'DM Sans',sans-serif;text-decoration:underline;cursor:pointer}

/* installer OloLoop (menu) : fenêtre sobre, au centre */
.inst-ov{position:fixed;inset:0;z-index:700;background:rgba(20,12,40,.45);display:grid;place-items:center;padding:20px}
.inst-card{width:min(420px,100%);background:var(--card,#fff);color:var(--ink,#1b1033);border-radius:18px;padding:22px 22px 16px;box-shadow:0 24px 60px rgba(20,10,45,.35);display:flex;flex-direction:column;gap:12px}
.inst-card h2{margin:0;font:700 20px/1.2 'DM Sans',system-ui,sans-serif}
.inst-p{margin:0;font:400 15px/1.5 'DM Sans',system-ui,sans-serif;color:var(--mute,#5d5873)}
.inst-steps{margin:0;padding-left:20px;font:400 15px/1.5 'DM Sans',system-ui,sans-serif}
.inst-go{border:0;border-radius:999px;background:var(--v,#5b3df5);color:#fff;font:600 15px/1 'DM Sans',system-ui,sans-serif;padding:13px 18px;cursor:pointer}
.inst-x{align-self:flex-end;border:0;background:none;color:var(--v,#5b3df5);font:600 14px/1 'DM Sans',system-ui,sans-serif;padding:8px 4px;cursor:pointer}

/* Contact OloLoop (médias) et Mes suivis : volets de la feuille */
.sup-w,.sv-w{display:flex;flex-direction:column;gap:12px;padding:4px 2px 8px}
.sup-intro,.sv-intro{margin:0;color:var(--mute);font-size:14px;line-height:1.5}
.sup-list{display:flex;flex-direction:column;gap:10px;max-height:52vh;min-height:140px;overflow-y:auto;padding:4px 2px}
.sup-empty{margin:auto;color:var(--mute);text-align:center;font-size:14px}
.sup-b{align-self:flex-start;max-width:82%;padding:10px 13px;border-radius:16px 16px 16px 4px;background:var(--bg);border:1px solid var(--line)}
.sup-b.team{align-self:flex-end;border-radius:16px 16px 4px 16px;background:color-mix(in srgb,var(--v) 14%,var(--card));border-color:transparent}
.sup-b small{display:block;font-size:12px;color:var(--mute);margin-bottom:3px}
.sup-b p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.45}
.sup-form{display:flex;gap:8px;align-items:flex-end}
.sup-in{flex:1;min-width:0;resize:none;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit}
.sup-go{padding:11px 16px;border:0;border-radius:14px;background:var(--v);color:#fff;font:600 14px 'DM Sans',sans-serif;cursor:pointer}
.sup-go:disabled{opacity:.5;cursor:default}
.sv-ico{display:inline-grid;place-items:center;width:30px;height:30px;margin-right:8px;border-radius:10px;vertical-align:middle;background:color-mix(in srgb,var(--p) 16%,transparent);color:var(--p)}
.sv-ico svg{width:17px;height:17px}
.sv-tabs{display:flex;gap:6px;padding:4px;border-radius:999px;background:var(--bg);border:1px solid var(--line)}
.sv-t{flex:1;padding:8px 6px;border:0;border-radius:999px;background:none;color:var(--mute);font:600 14px 'DM Sans',sans-serif;cursor:pointer}
.sv-t.on{background:var(--card);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.sv-grid{display:flex;flex-wrap:wrap;gap:14px 10px;justify-content:center;min-height:120px;max-height:50vh;overflow-y:auto;padding:6px 2px}
.sv-empty{margin:auto;color:var(--mute);text-align:center;font-size:14px;max-width:280px}
.sv-b{position:relative;width:92px}
.sv-b.live .sv-av{box-shadow:0 0 0 2px var(--card),0 0 0 4.5px #e11d48}
.sv-a{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;padding:4px;border:0;background:none;color:var(--ink);cursor:pointer;font:inherit}
.sv-av{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background-color:var(--v);color:#fff;font:800 22px 'Unbounded',sans-serif;box-shadow:0 0 0 2px var(--card),0 0 0 3px var(--line)}
.sv-a b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:700}
.sv-a small{font-size:11.5px;color:var(--mute)}
.rn.hid,.dwi.hid{display:none}

/* Rangée d'accueil : choix Médias / Influenceurs / Amis ; bulles-photos ; anneau rouge qui pulse en direct */
.dk-tabs{position:relative;flex:none;width:46px;height:42px;z-index:4}
.dk-sw{position:absolute;left:0;top:0;display:flex;align-items:center;gap:0;padding:3px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .3s ease}
.dk-tabs:hover .dk-sw,.dk-tabs:focus-within .dk-sw,.dk-tabs.open .dk-sw{box-shadow:inset 0 0 0 1px var(--line),0 8px 22px rgba(30,16,60,.14)}
.dk-t{border:0;background:transparent;border-radius:999px;padding:7px 11px;font:700 12.5px/1 'DM Sans',system-ui,sans-serif;color:var(--mute);cursor:pointer;white-space:nowrap}
.dk-t.on{background:var(--ink);color:var(--card)}
.dk-t:focus-visible{outline:2px solid var(--v);outline-offset:2px}
.dk-pb{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;width:76px;padding:8px 4px 4px;border:0;background:none;color:var(--ink);font:inherit;cursor:pointer}
.dk-pb:focus-visible .dk-av{outline:2px solid var(--v);outline-offset:3px}
.dk-av{position:relative;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font:700 20px/1 'DM Sans',system-ui,sans-serif;box-shadow:0 0 0 2px var(--card),0 0 0 3px color-mix(in srgb,var(--ink) 12%,transparent)}
.dk-pb.live .dk-av{box-shadow:0 0 0 2.5px var(--card),0 0 0 4.5px #e11d48}
.dk-pb.live .dk-av::before,.dk-pb.live .dk-av::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid #e11d48;opacity:0;pointer-events:none;animation:dk-pulse 1.8s ease-out infinite}
.dk-pb.live .dk-av::after{animation-delay:.9s}
@keyframes dk-pulse{0%{transform:scale(.9);opacity:.95}100%{transform:scale(1.14);opacity:0}}
.dk-nm{max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 12px/1.2 'DM Sans',system-ui,sans-serif}
.dk-empty{flex:none;max-width:340px;padding:10px 4px;font:500 13px/1.4 'DM Sans',system-ui,sans-serif;color:var(--mute)}
@media (prefers-reduced-motion:reduce){.dk-pb.live .dk-av::before,.dk-pb.live .dk-av::after{animation:none;opacity:.55;transform:scale(1.07)}}
:root[data-motion=off] .dk-pb.live .dk-av::before,:root[data-motion=off] .dk-pb.live .dk-av::after{animation:none;opacity:.55;transform:scale(1.07)}

/* ---------- visite de bienvenue en pages : points, navigation, liste de points ---------- */
.wl-dots{display:flex;gap:6px;justify-content:center;margin:0 0 18px}
.wl-dots i{width:7px;height:7px;border-radius:999px;background:color-mix(in srgb,var(--v) 22%,transparent);transition:width .3s,background .3s}
.wl-dots i.on{width:22px;background:var(--v)}
.wl-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 4px}
.wl-nav .wl-go{flex:1;width:auto}
.wl-prev{border:0;background:none;color:var(--mute);font:600 15px 'Inter','DM Sans',sans-serif;padding:14px 8px;border-radius:999px}.wl-prev:hover,.wl-prev:focus-visible{color:var(--ink)}
.wl-f{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px}
.wl-f li{padding:12px 16px 12px 18px;border-radius:16px;border-left:4px solid var(--v);background:color-mix(in srgb,var(--v) 7%,var(--card))}
.wl-f b{display:block;font-size:16px}.wl-f small{display:block;margin-top:2px;font-size:14px;line-height:1.4;color:var(--mute)}
@media (prefers-reduced-motion:reduce){.wl-dots i{transition:none}}

/* ---------- rangée Médias / Influenceurs / Amis : icônes, libellé seulement sur l'onglet actif ---------- */
.dk-t{box-sizing:border-box;display:inline-flex;align-items:center;gap:0;height:36px;padding:8px 11px;justify-content:center;overflow:hidden;white-space:nowrap;transition:max-width .42s cubic-bezier(.2,.8,.2,1),padding .42s cubic-bezier(.2,.8,.2,1),margin .42s cubic-bezier(.2,.8,.2,1),opacity .28s ease,background .25s ease,color .25s ease}
.dk-t svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dk-t:hover{color:var(--ink)}
.dk-t.on{padding:8px 11px;color:var(--card)}
/* les autres choix sont repliés : ils se déplient au survol, à l'appui ou au clavier */
.dk-t:not(.on){max-width:0;padding-left:0;padding-right:0;margin-left:0;opacity:0;pointer-events:none}
.dk-tabs:hover .dk-t:not(.on),.dk-tabs:focus-within .dk-t:not(.on),.dk-tabs.open .dk-t:not(.on){max-width:44px;padding-left:11px;padding-right:11px;margin-left:3px;opacity:1;pointer-events:auto}
.dk-l{font:700 13px/1 'DM Sans',system-ui,sans-serif;display:inline-block;overflow:hidden;white-space:nowrap;max-width:0;opacity:0;transition:max-width .4s cubic-bezier(.2,.8,.2,1),opacity .3s ease}
/* au clic : le libellé s'ouvre un instant puis se referme ; l'onglet actif ne garde que son icône */
.dk-t.say{gap:6px}
.dk-t.say .dk-l{max-width:96px;opacity:1}

@media (prefers-reduced-motion:reduce){.dk-l,.dk-t,.dk-sw{transition:none}}

/* ---------- rangée Médias / Influenceurs / Amis : même hauteur dans les trois onglets ; changement en fondu doux ---------- */
.mdline{display:flex;align-items:center;gap:8px;min-height:100px;position:relative}
.mdline > .mdrow{flex:1;min-width:0;min-height:100px}
.mdrow{min-height:100px;align-items:center}
.mdrow > :not(.dk-tabs){transition:opacity .22s ease,transform .22s ease,filter .22s ease}
.mdrow > .dk-leave{opacity:0;transform:translateX(calc(var(--dx,14px) * -.5)) scale(.97);filter:blur(3px);pointer-events:none}
@keyframes dk-enter{from{opacity:0;transform:translateX(var(--dx,14px)) scale(.97);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}
.dk-in{animation:dk-enter .75s cubic-bezier(.22,.7,.18,1) both;animation-delay:calc(var(--i,0) * 45ms + 90ms)}
@media (prefers-reduced-motion:reduce){.dk-in{animation:none}.mdrow > :not(.dk-tabs){transition:none}}
:root[data-motion=off] .dk-in{animation:none}

/* photo de profil avec des stories : anneau (rouge si non vues, gris si vues), comme la bulle du « + » */
.pf-av.st-ring{cursor:pointer;transition:transform .25s ease}
.pf-av.st-ring.new{box-shadow:0 0 0 3px var(--card),0 0 0 5.5px #e5484d}
.pf-av.st-ring.seen{box-shadow:0 0 0 3px var(--card),0 0 0 5.5px #9c95b3}
.pf-av.st-ring:hover,.pf-av.st-ring:focus-visible{transform:scale(1.04)}
.pf-av.st-ring:focus-visible{outline:2px solid var(--v);outline-offset:6px}

/* couronne premium sur mon profil, en haut à droite : fine, dorée, contour blanc ; l'avatar reçoit un liseré or discret */
.me.prem .av{box-shadow:0 0 0 2px var(--card),0 0 0 3px #7a2c64}
.me .hcr{position:absolute;left:27px;top:-5px;width:15px;height:15px;pointer-events:none;line-height:0;rotate:14deg;filter:drop-shadow(0 1px 2px rgba(120,70,0,.4));z-index:2}
.me .hcr svg{display:block;width:100%;height:100%;fill:url(#gcg);stroke:#fff;stroke-width:1.6;stroke-linejoin:round;paint-order:stroke}

/* sceau premium en haut à droite de mon avatar */
.me .hcr{position:absolute;left:24px;top:-6px;width:18px;height:18px;pointer-events:none;line-height:0;color:#7a2c64;filter:drop-shadow(0 1px 2px rgba(60,10,45,.35));z-index:2}
.me .hcr svg{display:block;width:100%;height:100%;overflow:visible}

/* certification : choix du type, réseaux et total d'abonnés, pièce d'identité */
.cert-intro{margin:0 0 12px;color:var(--mute);font-size:14px;line-height:1.45}
.cert-kind{margin:0 0 12px}
.nets{display:grid;gap:8px}
.net-r{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) minmax(0,1fr) auto;gap:8px;align-items:center}
.net-r select,.net-r input{min-width:0;width:100%}
.net-x{border:0;background:none;color:var(--mute);font-size:16px;cursor:pointer;padding:6px 8px;border-radius:999px}
.net-x[hidden]{display:none}
.cert-tot{margin:4px 0 0;font-size:14px;color:var(--mute);font-weight:600}
.cert-tot.ok{color:#15803d}
.cert-id{display:none}
.cert-idt{display:block;margin:6px 0 10px;color:var(--mute);font-size:13px;line-height:1.4}
/* ---------- Discussions en bulles (dm.js : colRender) : sorties de l'icône « Discussions » ----------
   Ouvertes : aux trois quarts sur l'écran, un quart dépasse du bord. Au survol : la bulle revient en entier. */
#chcol{position:fixed;right:0;width:300px;box-sizing:border-box;z-index:44;display:flex;flex-direction:column-reverse;align-items:flex-end;gap:10px;padding:14px 0;pointer-events:none;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%)}
#chcol::-webkit-scrollbar{display:none}
#chcol.hid{display:none}
.chb{position:relative;flex:none;width:50px;height:50px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;background:var(--c,var(--v));color:var(--ink,#fff);font:700 18px/1 'DM Sans',sans-serif;cursor:pointer;box-shadow:0 0 0 2px #fff,0 6px 14px -6px rgba(30,10,70,.45);transform:translate(var(--fx,0px),var(--fy,0px)) scale(.25);opacity:0;pointer-events:none;transition:transform .38s cubic-bezier(.2,.9,.3,1),opacity .25s ease}
#chcol.on .chb{transform:translateX(25%);opacity:1;pointer-events:auto}
#chcol.on .chb:hover,#chcol.on .chb:focus-visible{transform:translateX(0) scale(1.04)}
#chcol.on .chb.arrive{animation:chbIn .6s cubic-bezier(.2,1.1,.3,1) backwards}
@keyframes chbIn{from{transform:translate(var(--fx,0px),var(--fy,0px)) scale(.25);opacity:0}to{transform:translateX(25%);opacity:1}}
.chb-d{pointer-events:none}
.chb-av{width:40px;height:40px;font-size:15px;color:var(--ink,#fff);pointer-events:none;box-shadow:none}
.chb.pale{box-shadow:0 0 0 2px rgba(30,10,70,.3),0 6px 14px -6px rgba(30,10,70,.4)}
/* l'étiquette : toujours assez large pour le nom ; le nom ne se coupe pas, le message tient sur deux lignes au plus */
.chb-t{position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);width:max-content;max-width:230px;box-sizing:border-box;padding:9px 13px;border-radius:14px;background:#fff;color:#1d1638;font:600 13px/1.3 'DM Sans',sans-serif;text-align:left;box-shadow:0 10px 26px -8px rgba(30,10,70,.28);opacity:0;pointer-events:none;transition:opacity .2s;transform-origin:right center}
.chb-t b{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chb-t small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px;font-weight:400;color:var(--mute);font-size:12px;word-break:break-word}
#chcol.on .chb:hover .chb-t,#chcol.on .chb:focus-visible .chb-t,.chb.arrive .chb-t{opacity:1}
.chb.arrive .chb-t{animation:chbStretch .55s cubic-bezier(.2,.9,.3,1) backwards}
@keyframes chbStretch{from{transform:translateY(-50%) translateX(56px) scaleX(.08);opacity:0}to{transform:translateY(-50%) translateX(0) scaleX(1);opacity:1}} /* le message sort de la bulle, de droite à gauche, et s'étire dans l'étiquette */
.chb.arrive::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--p);animation:chbRing 1.6s ease-out 2;pointer-events:none}
@keyframes chbRing{from{transform:scale(.92);opacity:1}to{transform:scale(1.35);opacity:0}}
.chb-n{position:absolute;left:-4px;top:-4px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--p);color:#fff;font:700 12px/22px 'DM Sans',sans-serif;text-align:center;box-shadow:0 0 0 2px #fff}
.chghost{position:fixed;z-index:60;width:50px;height:50px;border-radius:50%;background:var(--c,var(--v));color:#fff;display:grid;place-items:center;font:700 20px/1 'DM Sans',sans-serif;box-shadow:0 0 0 3px #fff,0 10px 24px -6px rgba(30,10,70,.35);pointer-events:none}
@media (prefers-reduced-motion:reduce){.chb,.chb.arrive::after,.chb.arrive .chb-t{animation:none!important;transition:none!important}}

/* bulle blanche : un fin contour, pour qu'elle se détache du fond clair (accueil, listes, sélecteur de couleur) */
[style*="--c: #ffffff"],[style*="--c:#ffffff"]{outline:2px solid rgba(30,10,70,.22);outline-offset:0}

/* Abonnements (mise en page inspirée de X) : choix mensuel / annuel en haut, bouton noir « S'abonner » sur Premium */
.plansbox .pl-tog{display:inline-flex;gap:0;margin:4px auto 18px;padding:4px;border-radius:999px;background:color-mix(in srgb,var(--ink) 8%,transparent);min-width:0;border:0}
.plansbox .pl-tog[hidden]{display:none}
.plansbox .pl-tog label{position:relative;display:block;margin:0;padding:7px 18px;border-radius:999px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.plansbox .pl-tog label input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.plansbox .pl-tog label:has(input:checked){background:var(--ink);color:var(--card)}
.plansbox .pl-tog label:focus-within{outline:2px solid var(--v);outline-offset:2px}
.plansbox .pl-pop{display:inline-block;align-self:flex-start;margin:0 0 4px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;color:var(--v);background:color-mix(in srgb,var(--v) 14%,transparent)}
.plansbox .pl-cta{border-radius:999px;padding:11px 14px}
.plansbox .pl.feat .pl-cta:not(.ghost){background:var(--ink);color:var(--card)}
.plansbox .pl-cta.ghost{background:none;border:1px solid var(--line);color:var(--ink)}
.plansbox .pl-cta.ghost:hover:not(:disabled){border-color:var(--ink)}

/* bulles de la colonne : ami (personne, pastille sombre) ou sujet (#, pastille claire), visible sans survoler */
.chb-k{position:absolute;right:-3px;bottom:-3px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#1d1638;color:#fff;box-shadow:0 0 0 2px #fff;font:800 12px/1 'DM Sans',sans-serif;pointer-events:none}
.chb:not(.dm) .chb-k{background:#fff;color:#1d1638}
/* un message qui arrive : son texte reste lisible plus longtemps, sur plusieurs lignes */
.chb.arrive .chb-t small{-webkit-line-clamp:2}
/* chats déplaçables à la souris (ordinateur) */
@media (min-width:761px) and (hover:hover){#side.on:not(.min)>.top,#dmside.on:not(.min)>.top{cursor:grab}#side.dragging>.top,#dmside.dragging>.top{cursor:grabbing}}
#side.dragging,#dmside.dragging{transition:none!important;user-select:none;box-shadow:0 18px 48px rgba(20,10,60,.28)!important}

/* Date de naissance (inscription) : trois listes alignées sur le style des champs */
.dob{margin:4px 0 2px}
.dob .dobl{display:block;font-size:14px;font-weight:600;color:var(--mute);margin:0 0 6px}
.dobs{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:8px;margin-bottom:10px}
.dobs select{width:100%;min-width:0;margin:0;box-sizing:border-box;appearance:none;-webkit-appearance:none;padding:12px 32px 12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237a7490' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center/12px 8px;color:var(--ink);font:inherit;font-size:15px;cursor:pointer}
.dobs select:focus{outline:none;border-color:var(--v);box-shadow:0 0 0 4px color-mix(in srgb,var(--v) 16%,transparent)}