:root{--bg:#fff6ea;--card:#fff;--tx:#2a2233;--mut:#7b6f86;--or:#e8741c;--vi:#6b4fd8;--br:#f1dfc9;color-scheme:light}
[data-t=dark]{--bg:#1b1622;--card:#261f30;--tx:#f6effb;--mut:#a99bb9;--or:#f59a4a;--vi:#a592ff;--br:#3a3046;color-scheme:dark}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.55 "Nunito","Segoe UI",system-ui,sans-serif;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
header{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;max-width:980px;margin:auto}nav{display:flex;gap:6px}
.logo{font:800 1.35rem "Nunito",system-ui,sans-serif;color:var(--or);text-decoration:none}main{max-width:980px;margin:auto;padding:12px 20px 48px}
h1{font-size:clamp(2.4rem,8vw,3.8rem);line-height:1;margin:0}h2{margin:.2em 0 .5em;font-size:1.35rem}.tag{font-size:1.3rem;font-weight:700;color:var(--vi);margin:.2em 0}.lead{max-width:46ch}.mut{color:var(--mut);font-size:.92rem}
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center;padding:20px 0}.art{width:100%;height:auto;display:block;margin:0 auto 8px}
.row{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}.cols>div,.card{background:var(--card);border:1px solid var(--br);border-radius:22px;padding:20px}
.b{font:inherit;font-weight:700;border:1.5px solid var(--br);background:var(--card);color:var(--tx);border-radius:999px;padding:10px 20px;cursor:pointer;transition:transform .15s,background .15s}.b:hover{transform:translateY(-1px)}
.b:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--vi);outline-offset:2px}.pri{background:var(--or);border-color:var(--or);color:#2a1500}.ghost{background:transparent;border-color:transparent}.sm{padding:6px 12px;font-size:.9rem}
.card.cen{max-width:520px;margin:20px auto;text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}.form{max-width:440px;margin:20px auto;display:flex;flex-direction:column;gap:12px}
label{display:flex;flex-direction:column;gap:4px;font-weight:600;text-align:left;font-size:.95rem}.chk{flex-direction:row;align-items:center;gap:10px;font-weight:500}.pwrow{display:flex;gap:8px;align-items:end}.pwrow label{flex:1}
input:not([type=checkbox]),select{font:inherit;padding:11px 14px;border-radius:14px;border:1.5px solid var(--br);background:var(--bg);color:var(--tx);width:100%}input[type=checkbox]{width:20px;height:20px;accent-color:var(--or)}
.bar{display:block;height:6px;border-radius:9px;background:var(--br);position:relative;overflow:hidden}.bar:after{content:"";position:absolute;inset:0;width:calc(var(--s,0)*100%);background:var(--vi);transition:width .2s}
.err{color:#d6335a;min-height:1.2em;margin:0;font-size:.92rem}[data-t=dark] .err{color:#ff8aa5}footer{display:flex;gap:18px;flex-wrap:wrap;margin-top:32px}a{color:var(--vi)}
.pulse{animation:p 1.6s ease-in-out infinite}@keyframes p{50%{opacity:.45}}
.card.cen:has(.log){max-width:640px;align-items:stretch;text-align:left}.bar2{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.bar2 strong{flex:1;min-width:120px}.rep{display:flex;gap:8px}.rep[hidden]{display:none}
.log{height:min(52vh,420px);overflow:auto;display:flex;flex-direction:column;gap:8px;padding:8px;background:var(--bg);border-radius:16px}.m{max-width:80%;align-self:flex-start;background:var(--card);border:1px solid var(--br);border-radius:16px 16px 16px 4px;padding:8px 12px;overflow-wrap:anywhere}
.m.me{align-self:flex-end;background:var(--vi);color:#fff;border-color:var(--vi);border-radius:16px 16px 4px 16px}.m time{display:block;font-size:.7rem;opacity:.7;text-align:right}.send{display:flex;gap:8px}
@media(max-width:720px){.hero,.cols{grid-template-columns:1fr}.hero>.art{order:-1;max-width:200px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* v2 : avatars, vidéo, animations */
[hidden]{display:none!important}
header{padding-top:max(12px,env(safe-area-inset-top))}.lsel{width:auto;padding:6px 10px;border-radius:999px}
.b{position:relative;overflow:hidden;min-height:44px;transition:transform .15s,box-shadow .2s}.b.sm{min-height:36px}.b:hover{box-shadow:0 10px 22px -10px var(--or)}.b:active{transform:scale(.97)}
.b.pri:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s}.b.pri:hover:before{transform:translateX(120%)}
.card,.cols>div{position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s}.card:hover,.cols>div:hover{box-shadow:0 18px 40px -24px var(--vi)}.cols>div:hover{transform:translateY(-3px)}
.card:after,.cols>div:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--or) 20%,transparent),transparent)}.card:hover:after,.cols>div:hover:after{opacity:1}
main>*{animation:in .45s both}@keyframes in{from{opacity:0;transform:translateY(10px)}}
.art{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}.art:hover{transform:rotate(-4deg) scale(1.06)}.hero .art{animation:fl 5s ease-in-out infinite}@keyframes fl{50%{transform:translateY(-10px)}}
.av{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid var(--or);display:block;transition:transform .2s}a:hover .av{transform:scale(1.12)}.av.ph,.pimg.ph{display:inline-grid;place-items:center;background:var(--vi);color:#fff;font-weight:800}.av.big{width:96px;height:96px;font-size:2rem}
.pk{display:flex;justify-content:center}.pick{width:104px;height:104px;border-radius:50%;border:2px dashed var(--or);display:grid;place-items:center;overflow:hidden;font-size:2rem;transition:transform .2s}.pick img,.pimg{width:100%;height:100%;object-fit:cover}
.pickb{background:none;border:0;color:var(--tx);font:inherit;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer}.pickb:hover .pick{border-style:solid;transform:scale(1.07) rotate(-3deg)}
.seg{display:flex;gap:8px}.card.cen:hover{transform:none}.txt{text-align:left;align-items:stretch}
.vids{display:flex;flex-direction:column;gap:8px;align-items:center}.vw{position:relative;width:100%;aspect-ratio:4/3;max-height:44dvh;background:#0005;border-radius:16px;overflow:hidden}.vw #rv{width:100%;height:100%;object-fit:cover}
.vw #lv{position:absolute;inset:auto 10px 10px auto;width:28%;border-radius:12px;border:2px solid #fff;transform:scaleX(-1);object-fit:cover}.ctl{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.live{color:#d6335a;font-weight:700;animation:p 1.6s infinite}.b.off{text-decoration:line-through;opacity:.6}
.m{animation:pop .28s cubic-bezier(.3,1.6,.5,1)}@keyframes pop{from{transform:scale(.85);opacity:0}}.log{height:min(48dvh,420px)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:16px}.stats b{display:block;font-size:2rem;color:var(--or)}.ri{margin:10px 0;text-align:left}
@media(min-width:721px) and (max-width:1100px){main{padding-inline:28px}.hero{gap:32px}}@media(max-width:480px){header{padding-inline:12px}.lsel{max-width:96px}.card{padding:16px}.row .b{flex:1}}

.pav{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(135deg,var(--vi),var(--or));opacity:.92}.vw #rv.off{opacity:0}.vw #lv:not([srcObject]){background:#0006}
.b.act{background:var(--vi);border-color:var(--vi);color:#fff}.live:before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:currentColor;margin-inline-end:6px}