/* TBC Social — feuille de style unique. Couleurs : nuit, feu, soleil, vert « croissance ». */
:root{--paper:#fffaf2;--ink:#17122b;--ink-2:#3a3450;--ink-3:#6b6585;--mute:#8c86a3;--line:#efe9f5;--flame:#ff5a1f;--flame-2:#e2440c;--sun:#ffc62e;--night:#0d1440;--night-2:#1c2a7a;--grow:#22c55e;--grow-d:#127a44;--grow-l:#effbf4;--blue:#3b6fe0;--display:'Bricolage Grotesque',system-ui,sans-serif;--body:'Plus Jakarta Sans',system-ui,sans-serif;--r:24px;--sh:0 1px 2px rgba(23,18,43,.04),0 12px 30px -18px rgba(23,18,43,.28);--top:64px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
body.sn-dark{background:var(--night)}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img{max-width:100%}
[hidden]{display:none!important}
.disp{font-family:var(--display);letter-spacing:-.035em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid var(--sun);outline-offset:2px}

/* ---------- Barre du haut ---------- */
.sn-top{position:sticky;top:0;z-index:40;background:rgba(255,250,242,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(239,233,245,.8)}
.sn-top-in{max-width:1080px;margin:0 auto;height:var(--top);padding:0 16px;padding-top:env(safe-area-inset-top);display:flex;align-items:center;gap:12px}
.sn-brand{display:flex;align-items:center;gap:10px;min-width:0}
.sn-brand b{display:block;font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.035em;line-height:1}
.sn-brand small{display:block;font-size:11.5px;font-weight:700;color:var(--grow-d);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sn-ring{width:42px;height:42px;border-radius:15px;padding:2.5px;background:conic-gradient(var(--grow),var(--sun),var(--flame),var(--grow));flex-shrink:0;display:block}
.sn-ring img{width:100%;height:100%;border-radius:12px;border:2px solid var(--paper);display:block}
.sn-title{min-width:0}.sn-title b{display:block;font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.03em;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sn-title small{font-size:12px;color:var(--ink-3);font-weight:600}
.sn-act{margin-left:auto;display:flex;align-items:center;gap:8px}
.sn-ib{width:42px;height:42px;border-radius:14px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;font-size:17px;color:var(--ink);position:relative;flex-shrink:0}
.sn-pts{height:40px;padding:0 12px;border-radius:99px;border:1.5px solid #a7e3c2;background:var(--grow-l);color:var(--grow-d);font-weight:800;font-size:14px;display:flex;align-items:center;gap:6px}
.sn-dot{position:absolute;top:4px;right:4px;min-width:18px;height:18px;padding:0 4px;border-radius:99px;background:var(--flame);color:#fff;font-size:10.5px;font-weight:800;display:grid;place-items:center;border:2px solid #fff}
.sn-dnav{display:none;gap:4px;margin-left:24px}
.sn-dnav a{height:42px;padding:0 14px;border-radius:12px;display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--ink-3)}
.sn-dnav a .ic{display:contents}
.sn-dnav a.on{background:var(--ink);color:#fff}
.sn-dnav a:hover:not(.on){background:#f4f1f9;color:var(--ink)}
@media (min-width:980px){.sn-dnav{display:flex}}

/* notifications */
.sn-notif{position:fixed;top:calc(var(--top) + 8px);right:12px;left:12px;max-width:400px;margin-left:auto;z-index:45;background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 30px 60px rgba(23,18,43,.2);overflow:hidden}
.sn-notif-h{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
.sn-notif-h b{font-family:var(--display);font-size:17px}
.sn-notif-h button{border:0;background:none;font-weight:700;font-size:13px;color:var(--flame)}
.sn-notif-list{max-height:60vh;overflow:auto}
.sn-ni{display:flex;gap:10px;padding:12px 16px;border-bottom:1px solid #f6f3fa}
.sn-ni.unread{background:#fff8f3}
.sn-ni .ic{width:34px;height:34px;border-radius:11px;background:var(--grow-l);color:var(--grow-d);display:grid;place-items:center;flex-shrink:0}
.sn-ni b{display:block;font-size:13.5px}.sn-ni span{display:block;font-size:13px;color:var(--ink-3);line-height:1.4}.sn-ni time{font-size:11.5px;color:var(--mute);font-weight:600}

/* ---------- Mise en page ---------- */
.sn-main{min-height:60vh;padding-bottom:110px}
.sn-col{max-width:640px;margin:0 auto;padding:12px 16px 24px;display:flex;flex-direction:column;gap:14px}
.sn-stack{display:flex;flex-direction:column;gap:12px}
.sn-row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sn-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.sn-pad{padding:18px}
.sn-h1{margin:6px 0 0;font-size:32px;font-weight:800;line-height:1.05}
.sn-h2{margin:8px 2px 0;font-size:21px;font-weight:800}
.sn-lead{margin:-6px 0 0;color:var(--ink-3);font-size:14.5px;line-height:1.55}
.sn-empty{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:var(--ink-3);padding:36px 20px}
.sn-empty i{font-size:30px;color:var(--mute)}

/* boutons et champs */
.sn-btn{height:48px;padding:0 20px;border-radius:16px;border:0;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:800;font-size:15px;white-space:nowrap;transition:transform .12s}
.sn-btn:active{transform:scale(.97)}
.sn-btn.sm{height:40px;padding:0 15px;font-size:13.5px;border-radius:13px}
.sn-btn.big{height:58px;font-size:17px;border-radius:18px}
.sn-btn.block{width:100%}
.sn-btn.fire{background:linear-gradient(170deg,#ff8a3d,var(--flame));color:#fff;box-shadow:0 10px 24px -10px rgba(255,90,31,.7)}
.sn-btn.sun{background:var(--sun);color:var(--ink)}
.sn-btn.grow{background:linear-gradient(170deg,#4ade80,#16a34a);color:#fff;box-shadow:0 10px 24px -10px rgba(22,163,74,.7)}
.sn-btn.dark{background:var(--ink);color:#fff}
.sn-btn.ghost{background:#fff;border:1.5px solid #e6e0f0;color:var(--ink)}
.sn-btn[disabled]{opacity:.5;cursor:not-allowed}
.sn-btn.is-loading{opacity:.7;pointer-events:none}
.sn-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.sn-f>span{font-size:13px;font-weight:700;color:var(--ink-2)}
.sn-in{width:100%;min-width:0;height:48px;border-radius:14px;border:1.5px solid #e6e0f0;background:#fff;padding:0 14px;font-size:15px;outline:none}
textarea.sn-in{height:auto;padding:12px 14px;resize:vertical;line-height:1.5}
.sn-in:focus{border-color:var(--flame);box-shadow:0 0 0 4px rgba(255,90,31,.12)}
.sn-check{display:flex;gap:10px;align-items:center;font-weight:700;font-size:14px}
.sn-check input{width:20px;height:20px;accent-color:var(--grow)}
.sn-bar{height:8px;border-radius:8px;background:rgba(23,18,43,.08);overflow:hidden}
.sn-bar.big{height:10px}
.sn-bar i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--grow),var(--sun));transition:width .5s}

/* ---------- Barre du bas ---------- */
.sn-tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;padding:6px 6px calc(8px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.sn-tabs a{flex:1;height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:700;color:var(--mute)}
.sn-tabs a .ic{width:44px;height:30px;border-radius:11px;display:grid;place-items:center;font-size:17px;transition:background .2s}
.sn-tabs a.on{color:var(--ink)}
.sn-tabs a.on .ic{background:var(--ink);color:#7ee6aa}
@media (min-width:980px){.sn-tabs{display:none}.sn-main{padding-bottom:40px}}
.sn-fab{position:fixed;right:18px;bottom:calc(92px + env(safe-area-inset-bottom));z-index:41;width:60px;height:60px;border-radius:22px;border:0;background:linear-gradient(160deg,var(--sun),var(--flame));color:#fff;font-size:24px;box-shadow:0 16px 30px -8px rgba(255,90,31,.7);display:grid;place-items:center}
.sn-fab:active{transform:scale(.94)}
@media (min-width:980px){.sn-fab{bottom:28px;right:28px}}

/* ---------- Stories ---------- */
.st-row{display:flex;gap:12px;overflow-x:auto;margin:0 -16px;padding:4px 16px 4px;scrollbar-width:none}
.st-row::-webkit-scrollbar{display:none}
.st-it{border:0;background:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:6px;width:70px;flex-shrink:0}
.st-it .rg{width:68px;height:68px;border-radius:50%;padding:3px;background:conic-gradient(var(--flame),#db2777,var(--sun),var(--flame))}
.st-it.titi .rg{background:conic-gradient(var(--grow),var(--sun),var(--flame),var(--grow))}
.st-it.seen .rg{background:#d9d4e6}
.st-it .fc{width:100%;height:100%;border-radius:50%;border:3px solid var(--paper);display:grid;place-items:center;color:#fff;font-weight:800;font-size:22px;overflow:hidden;background-size:cover;background-position:center}
.st-it .fc img{width:100%;height:100%;object-fit:cover}
.st-it small{font-size:11.5px;font-weight:700;color:var(--ink-2);max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-it.add .rg{background:none;border:2px dashed #c9c2da;display:grid;place-items:center;font-size:24px;color:var(--mute)}
.st-view{position:fixed;inset:0;z-index:100;background:#000;display:flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none;touch-action:none}
.st-stage{position:relative;width:min(100vw,calc(100dvh * 9 / 16));height:100dvh;overflow:hidden;color:#fff}
@media (min-width:700px){.st-stage{height:min(92dvh,860px);border-radius:24px}}
.st-stage[data-bg=sun]{background:linear-gradient(165deg,#ff5a1f,#ffc62e)}
.st-stage[data-bg=night]{background:linear-gradient(165deg,#1c2a7a,#070b26)}
.st-stage[data-bg=grow]{background:linear-gradient(165deg,#0f766e,#22c55e)}
.st-stage[data-bg=rose]{background:linear-gradient(165deg,#7c3aed,#db2777)}
.st-stage[data-bg=ocean]{background:linear-gradient(165deg,#1d4ed8,#0ea5e9)}
.st-stage[data-bg=violet]{background:linear-gradient(165deg,#4c1d95,#a855f7)}
.st-stage::before{content:'';position:absolute;left:0;right:0;top:0;height:130px;background:linear-gradient(180deg,rgba(0,0,0,.45),transparent);z-index:2;pointer-events:none}
.st-media{position:absolute;inset:0;display:grid;place-items:center}
.st-media img,.st-media video{width:100%;height:100%;object-fit:contain;background:#000}
.st-text{position:absolute;left:28px;right:28px;top:50%;transform:translateY(-50%);text-align:center;font-family:var(--display);font-weight:800;font-size:32px;line-height:1.12;letter-spacing:-.03em;text-shadow:0 2px 12px rgba(0,0,0,.25);z-index:1;white-space:pre-wrap;overflow-wrap:anywhere}
.st-bars{position:absolute;left:10px;right:10px;top:calc(10px + env(safe-area-inset-top));display:flex;gap:4px;z-index:3}
.st-bars span{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.35);overflow:hidden}
.st-bars i{display:block;height:100%;width:0;background:#fff}
.st-head{position:absolute;left:12px;right:6px;top:calc(22px + env(safe-area-inset-top));display:flex;align-items:center;gap:9px;z-index:3}
.st-head .sn-av{width:36px;height:36px;border:2px solid #fff;font-size:14px}
.st-head b{font-size:14.5px}.st-head time{font-size:12.5px;opacity:.8}
.st-head button{margin-left:auto;width:44px;height:44px;border:0;background:none;color:#fff;font-size:21px}
.st-head .st-del{margin-left:auto;font-size:17px}.st-head .st-del+button{margin-left:0}
.st-foot{position:absolute;left:12px;right:12px;bottom:calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;z-index:3}
.st-link{align-self:center;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border-radius:99px;background:#fff;color:var(--ink);font-weight:800;font-size:14.5px}
.st-reply{display:flex;gap:8px}
.st-reply input{flex:1;min-width:0;height:48px;border-radius:99px;border:1.5px solid rgba(255,255,255,.6);background:rgba(0,0,0,.15);color:#fff;padding:0 18px;outline:none}
.st-reply input::placeholder{color:rgba(255,255,255,.75)}
.st-reply button{width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.95);font-size:20px}
.st-views{align-self:center;font-size:13px;font-weight:700;background:rgba(0,0,0,.35);border-radius:99px;padding:6px 14px}

/* ---------- Défi du jour, onglets ---------- */
.sn-quest{display:flex;gap:12px;align-items:center;padding:16px;border-radius:var(--r);background:linear-gradient(135deg,#17122b,#2a1f55);color:#fff}
.sn-quest img{width:64px;flex-shrink:0}
.sn-quest small{font-size:11.5px;font-weight:800;color:var(--sun)}
.sn-quest b{display:block;font-size:14.5px;line-height:1.35;margin:2px 0 8px}
.sn-quest .sn-bar{background:rgba(255,255,255,.15)}
.sn-quest span{font-size:12px;font-weight:700;opacity:.8}
.sn-tabsw{display:flex;gap:6px;padding:4px;border-radius:16px;background:#f2eff7}
.sn-tabsw>*{flex:1;height:42px;border-radius:12px;border:0;background:none;font-weight:800;font-size:14px;color:var(--ink-3);display:flex;align-items:center;justify-content:center;gap:7px}
.sn-tabsw>.on{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(23,18,43,.08)}
.sn-ask{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:18px;border:1.5px dashed #ddd5ea;background:#fff;color:var(--ink-3);font-weight:600;font-size:14.5px;text-align:left}

/* ---------- Posts ---------- */
.sn-feed{display:flex;flex-direction:column;gap:14px}
.sn-post{padding:16px;display:flex;flex-direction:column;gap:12px}
.sn-post.pin{border-color:#ffd2bd;background:linear-gradient(180deg,#fff8f3,#fff 45%)}
.sn-pin{font-size:12px;font-weight:800;color:var(--flame);display:flex;gap:6px;align-items:center;margin-bottom:-4px}
.sn-ph{display:flex;align-items:center;gap:10px}
.sn-ph .who{min-width:0;flex:1}
.sn-ph .who b{display:flex;align-items:center;gap:5px;font-size:14.5px}
.sn-ph .who small{display:block;font-size:12px;color:var(--mute);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sn-ph .who small a{color:var(--grow-d);font-weight:700}
.ver{color:var(--blue);font-size:14px}
.sn-tag{font-size:11.5px;font-weight:800;padding:5px 10px;border-radius:99px;flex-shrink:0}
.sn-tag.result{background:var(--grow-l);color:var(--grow-d)}.sn-tag.question{background:#fff7e6;color:#a16207}.sn-tag.collab{background:#f1edff;color:#6d28d9}.sn-tag.fiche{background:#eaf6ff;color:#0369a1}.sn-tag.event{background:#fff1e8;color:#c2410c}
.sn-more{width:38px;height:38px;border-radius:12px;border:0;background:none;color:var(--mute);position:relative}
.sn-av{width:42px;height:42px;border-radius:15px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:17px;flex-shrink:0;overflow:hidden}
.sn-av img{width:100%;height:100%;object-fit:cover}
.sn-av.sm{width:32px;height:32px;border-radius:11px;font-size:13px}
.sn-av.xl{width:88px;height:88px;border-radius:30px;font-size:34px;border:4px solid #fff;box-shadow:var(--sh)}
.sn-body{margin:0;font-size:15px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.sn-body a{color:var(--blue);font-weight:700}
.sn-ba{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sn-ba div{border-radius:18px;background:#f4f1f9;padding:14px}
.sn-ba div:last-child{background:linear-gradient(150deg,var(--grow),#128a4a);color:#fff}
.sn-ba small{font-size:12px;font-weight:700;opacity:.8}.sn-ba b{display:block;font-family:var(--display);font-size:26px;letter-spacing:-.03em;line-height:1.15;overflow-wrap:anywhere}
.sn-img{border-radius:18px;overflow:hidden;background:#f2f0f7}.sn-img img{width:100%;max-height:560px;object-fit:cover;display:block}
.sn-vid{border-radius:18px;overflow:hidden;background:#000}.sn-vid video{width:100%;max-height:560px;display:block}
.sn-link{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;border:1px solid var(--line);background:#fbfaff;min-width:0}
.sn-link .ic{width:42px;height:42px;border-radius:13px;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:19px;flex-shrink:0}
.sn-link .tx{min-width:0;flex:1}.sn-link b{display:block;font-size:14px}.sn-link span{display:block;font-size:12.5px;color:var(--mute);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sn-boost{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;color:var(--flame);margin-top:-4px}
.sn-reacts{display:flex;gap:6px;flex-wrap:wrap}
.sn-react{flex:1 1 0;min-width:0;height:40px;border-radius:12px;border:1px solid var(--line);background:#fbf9fe;font-size:12.5px;font-weight:700;color:var(--ink-2);display:flex;align-items:center;justify-content:center;gap:5px;padding:0 6px;white-space:nowrap}
.sn-react em{font-style:normal;opacity:.65}
.sn-react.on{background:var(--grow-l);border-color:#a7e3c2;color:var(--grow-d)}
.sn-react.on i{animation:snPop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes snPop{0%{transform:scale(.4)}100%{transform:scale(1)}}
.sn-pfoot{display:flex;gap:6px;border-top:1px solid var(--line);padding-top:8px;margin-top:-2px}
.sn-pfoot button{flex:1;height:40px;border:0;background:none;border-radius:12px;font-weight:700;font-size:13.5px;color:var(--ink-3);display:flex;align-items:center;justify-content:center;gap:7px}
.sn-pfoot button:hover{background:#f6f4fb}
.sn-menu{position:absolute;right:0;top:40px;z-index:6;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(23,18,43,.16);padding:6px;min-width:190px;text-align:left}
.sn-menu button,.sn-menu a{display:flex;gap:10px;align-items:center;width:100%;height:40px;border:0;background:none;border-radius:10px;padding:0 10px;font-weight:700;font-size:14px;color:var(--ink)}
.sn-menu button:hover,.sn-menu a:hover{background:#f6f4fb}
.sn-menu .bad{color:#d63c3c}
.sn-cm{display:flex;flex-direction:column;gap:10px}
.sn-c{display:flex;gap:9px;align-items:flex-start}
.sn-c .bub{background:#f4f2f9;border-radius:16px;padding:9px 12px;font-size:14px;line-height:1.45;min-width:0;flex:1;overflow-wrap:anywhere;white-space:pre-wrap}
.sn-c.best .bub{background:var(--grow-l);border:1.5px solid #a7e3c2}
.sn-c .bub b{display:flex;gap:6px;align-items:center;font-size:13px;margin-bottom:1px;white-space:normal}
.sn-c .bub b small{font-weight:600;color:var(--mute);font-size:11.5px}
.sn-c .bub .best-l{display:inline-flex;gap:5px;align-items:center;font-size:11.5px;font-weight:800;color:var(--grow-d);margin-bottom:3px}
.sn-c .acts{display:flex;flex-direction:column;gap:4px}
.sn-c .acts button{border:0;background:none;font-size:12px;font-weight:700;color:var(--mute);padding:4px;white-space:nowrap}
.sn-c .acts .pick{color:var(--grow-d)}
.sn-cf{display:flex;gap:8px}.sn-cf input{flex:1}

/* ---------- Suggestions ---------- */
.sn-suggest h3{margin:6px 2px 10px;font-size:19px}
.sn-suggest [data-sn-suggest-list]{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.sn-sg{width:150px;flex-shrink:0;padding:14px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.sn-sg b{font-size:14px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sn-sg small{font-size:12px;color:var(--mute);font-weight:600;min-height:18px}

/* ---------- Fenêtres ---------- */
.sn-sheet{position:fixed;inset:0;z-index:90;background:rgba(13,20,64,.55);backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center}
.sn-sheet-box{width:100%;max-width:560px;max-height:92dvh;overflow:auto;background:var(--paper);border-radius:28px 28px 0 0;padding:18px 18px calc(22px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px;animation:snUp .28s cubic-bezier(.2,.9,.3,1)}
@media (min-width:700px){.sn-sheet{align-items:center}.sn-sheet-box{border-radius:28px}}
@keyframes snUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.sn-sheet-h{display:flex;align-items:center;justify-content:space-between}
.sn-sheet-h b{font-family:var(--display);font-size:22px;letter-spacing:-.03em}
.sn-seg{display:flex;gap:6px;padding:4px;border-radius:16px;background:#f2eff7}
.sn-seg button{flex:1;height:42px;border:0;border-radius:12px;background:none;font-weight:800;font-size:14px;color:var(--ink-3);display:flex;align-items:center;justify-content:center;gap:7px}
.sn-seg button.on{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(23,18,43,.08)}
.sn-kinds{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.sn-kind input{position:absolute;opacity:0}
.sn-kind span{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:14px;border:1.5px solid #e6e0f0;background:#fff;cursor:pointer;text-align:center}
.sn-kind i{font-size:17px;color:var(--ink-3)}.sn-kind b{font-size:12px}.sn-kind small{display:none}
.sn-kind input:checked+span{border-color:var(--ink);background:var(--ink);color:#fff}.sn-kind input:checked+span i{color:var(--sun)}
.sn-kind input:focus-visible+span{outline:3px solid var(--sun)}
.sn-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sn-tool{position:relative;height:42px;padding:0 14px;border-radius:13px;border:1.5px solid #e6e0f0;background:#fff;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:13.5px;color:var(--ink-2);cursor:pointer;overflow:hidden}
.sn-tool input{position:absolute;inset:0;opacity:0;cursor:pointer}
.sn-tool.on{border-color:var(--grow);color:var(--grow-d);background:var(--grow-l)}
.sn-sel{width:auto;flex:1;min-width:150px;height:42px}
.sn-pv{position:relative;border-radius:16px;overflow:hidden;background:#000;max-height:260px}
.sn-pv img,.sn-pv video{width:100%;max-height:260px;object-fit:contain;display:block}
.sn-pv button{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:11px;border:0;background:rgba(0,0,0,.6);color:#fff}
.sn-prog{position:relative;height:32px;border-radius:10px;background:#f2f0f7;overflow:hidden}
.sn-prog i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#ff8a3d,var(--flame));transition:width .2s}
.sn-prog span{position:relative;display:flex;align-items:center;justify-content:center;height:100%;font-size:12.5px;font-weight:800}
.sn-story-pv{aspect-ratio:9/12;max-height:300px;border-radius:20px;display:grid;place-items:center;padding:20px;color:#fff;text-align:center;overflow:hidden;background-size:cover;background-position:center;position:relative}
.sn-story-pv p{margin:0;font-family:var(--display);font-weight:800;font-size:24px;line-height:1.15;white-space:pre-wrap;overflow-wrap:anywhere}
.sn-story-pv[data-bg=sun],.sn-bgs [data-bg=sun]{background:linear-gradient(165deg,#ff5a1f,#ffc62e)}
.sn-story-pv[data-bg=night],.sn-bgs [data-bg=night]{background:linear-gradient(165deg,#1c2a7a,#070b26)}
.sn-story-pv[data-bg=grow],.sn-bgs [data-bg=grow]{background:linear-gradient(165deg,#0f766e,#22c55e)}
.sn-story-pv[data-bg=rose],.sn-bgs [data-bg=rose]{background:linear-gradient(165deg,#7c3aed,#db2777)}
.sn-story-pv[data-bg=ocean],.sn-bgs [data-bg=ocean]{background:linear-gradient(165deg,#1d4ed8,#0ea5e9)}
.sn-story-pv[data-bg=violet],.sn-bgs [data-bg=violet]{background:linear-gradient(165deg,#4c1d95,#a855f7)}
.sn-bgs{display:flex;gap:10px}
.sn-bgs input{position:absolute;opacity:0}
.sn-bgs span{display:block;width:40px;height:40px;border-radius:50%;cursor:pointer;border:3px solid #fff;box-shadow:0 0 0 1.5px #e6e0f0}
.sn-bgs input:checked+span{box-shadow:0 0 0 3px var(--ink)}
.sn-bgs input:focus-visible+span{outline:3px solid var(--sun)}
.sn-toast{position:fixed;left:50%;bottom:calc(100px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:120;background:var(--ink);color:#fff;border-radius:16px;padding:12px 16px;display:flex;gap:10px;align-items:center;font-size:13.5px;font-weight:700;max-width:calc(100vw - 32px);box-shadow:0 16px 40px rgba(23,18,43,.35);animation:snToast .3s ease-out}
.sn-toast i{width:26px;height:26px;border-radius:9px;background:var(--grow);display:grid;place-items:center;flex-shrink:0;font-style:normal}
@keyframes snToast{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translateX(-50%)}}

/* ---------- Profil ---------- */
.pf{overflow:hidden}
.pf-cover{height:120px;background:linear-gradient(120deg,var(--flame),var(--sun) 55%,var(--grow));background-size:cover;background-position:center}
.pf-in{padding:0 18px 18px}
.pf-row{display:flex;justify-content:space-between;align-items:flex-end;margin-top:-44px}
.pf-btns{display:flex;gap:8px;padding-bottom:4px}
.pf-name{margin:10px 0 0;font-size:27px;font-weight:800;line-height:1.1;display:flex;align-items:center;gap:8px}
.pf-handle{margin:2px 0 0;font-size:13.5px;color:var(--ink-3);font-weight:600}
.pf-bio{margin:8px 0 0;font-size:14.5px;line-height:1.5}
.pf-links{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.pf-links a{height:34px;padding:0 12px;border-radius:99px;background:#f4f1f9;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700}
.pf-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:14px}
.pf-stats div{text-align:center;background:#faf8fd;border-radius:14px;padding:10px 2px}
.pf-stats b{display:block;font-family:var(--display);font-size:20px}.pf-stats span{font-size:11px;color:var(--ink-3);font-weight:700}
.pf-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.pf-badges span{font-size:12px;font-weight:800;padding:6px 10px;border-radius:99px;display:inline-flex;gap:6px;align-items:center}
.bd-blue{background:#eaf2ff;color:#1d4ed8}.bd-flame{background:#fff1e8;color:#c2410c}.bd-sun{background:#fff7e0;color:#a16207}.bd-violet{background:#f1edff;color:#6d28d9}.bd-green{background:var(--grow-l);color:var(--grow-d)}
.pf-grow{display:flex;flex-direction:column;gap:10px}
.pf-grow-h{display:flex;justify-content:space-between;align-items:baseline}
.pf-grow-h small{font-size:12.5px;font-weight:800;color:var(--grow-d)}.pf-grow-h span{font-size:12.5px;font-weight:700;color:var(--ink-3)}
.pf-grow>b{font-size:46px;line-height:1}
.pf-grow-t{margin:0;font-size:13.5px;color:var(--ink-3);line-height:1.5}
.pf-circles{display:flex;gap:8px;flex-wrap:wrap}
.pf-circles a{height:38px;padding:0 14px;border-radius:99px;background:#fff;border:1.5px solid var(--line);display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px}
.pf-circles a i{color:var(--c)}
.pf-actions{display:flex;flex-direction:column;gap:8px;margin-top:6px}

/* ---------- Cercles ---------- */
.ci-list{display:flex;flex-direction:column;gap:10px}
.ci-card{padding:14px;display:flex;align-items:center;gap:12px}
.ci-card.mine{border-color:color-mix(in srgb,var(--c) 40%,#fff)}
.ci-link{display:flex;gap:12px;align-items:flex-start;flex:1;min-width:0}
.ci-badge{width:50px;height:50px;border-radius:17px;background:var(--c);color:#fff;display:grid;place-items:center;font-weight:800;font-size:21px;flex-shrink:0}
.ci-tx{min-width:0}.ci-tx b{display:block;font-size:15.5px}.ci-tx small{display:block;font-size:12.5px;font-weight:700;color:var(--grow-d)}.ci-tx span{display:block;font-size:13px;color:var(--ink-3);line-height:1.4;margin-top:2px}
.ci-hero{padding:18px;display:flex;flex-direction:column;gap:14px;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 85%,#000),var(--c));color:#fff;border:0}
.ci-hero .ci-badge{background:rgba(255,255,255,.2)}
.ci-h{display:flex;gap:12px;align-items:center}.ci-h h1{margin:0;font-size:24px;line-height:1.1}.ci-h p{margin:2px 0 0;font-size:13.5px;opacity:.85}
.ci-goal{background:rgba(255,255,255,.14);border-radius:18px;padding:12px 14px}
.ci-goal small{font-size:12px;font-weight:800;opacity:.85}.ci-goal b{display:block;font-size:15.5px}.ci-goal span{font-size:12.5px;opacity:.85}
.ci-mem{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ci-avs{display:flex}.ci-avs .sn-av{border:2px solid rgba(255,255,255,.9);margin-left:-8px}.ci-avs .sn-av:first-child{margin-left:0}

/* ---------- Apprendre ---------- */
.ap-tutos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ap-tuto{border:0;background:none;padding:0;text-align:left;display:flex;flex-direction:column;gap:6px}
.ap-pv{position:relative;aspect-ratio:9/12;border-radius:18px;background:#1c2a7a center/cover;display:grid;place-items:center;overflow:hidden}
.ap-pv i{width:48px;height:48px;border-radius:50%;background:rgba(255,90,31,.92);color:#fff;display:grid;place-items:center;font-size:18px;padding-left:3px}
.ap-pv em{position:absolute;right:8px;bottom:8px;font-style:normal;font-size:11.5px;font-weight:800;background:rgba(0,0,0,.6);color:#fff;border-radius:8px;padding:2px 7px}
.ap-tuto b{font-size:13.5px;line-height:1.3}
.ap-player video{width:100%;max-height:70dvh;border-radius:16px;background:#000}

/* ---------- Bienvenue (après l'intro) ---------- */
.ob{max-width:560px;margin:0 auto;padding:calc(28px + env(safe-area-inset-top)) 20px 40px;display:flex;flex-direction:column;gap:20px;background:var(--paper);min-height:100dvh}
body.sn-dark .ob{background:var(--paper)}
.ob-titi{display:flex;gap:12px;align-items:flex-end}
.ob-titi img{width:84px;flex-shrink:0}
.ob-titi p{margin:0;background:#fff;border:1px solid var(--line);border-radius:22px 22px 22px 6px;padding:14px 16px;font-size:15px;font-weight:600;line-height:1.5;box-shadow:var(--sh)}
.ob h2{margin:6px 0 0;font-size:24px;font-weight:800}
.ob-chips{display:flex;flex-wrap:wrap;gap:8px}
.ob-chip input,.ob-goals input{position:absolute;opacity:0}
.ob-chip span{display:inline-flex;align-items:center;height:42px;padding:0 16px;border-radius:99px;border:1.5px solid #e6e0f0;background:#fff;font-weight:700;font-size:14px;cursor:pointer}
.ob-chip input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.ob-chip input:focus-visible+span,.ob-goals input:focus-visible+span{outline:3px solid var(--sun)}
.ob-goals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ob-goals span{height:86px;border-radius:18px;border:1.5px solid #e6e0f0;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;color:var(--ink-2);cursor:pointer}
.ob-goals b{font-family:var(--display);font-size:22px}
.ob-goals input:checked+span{border-color:var(--grow);background:var(--grow-l);color:var(--grow-d)}
.ob-follow{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:18px;background:var(--grow-l);border:1.5px solid #a7e3c2;font-size:13.5px;line-height:1.4}
.ob-follow img{width:42px;height:42px;border-radius:50%}
.ob-follow i{color:var(--grow);font-size:20px}

/* ========== INTRO : on quitte TheBoostConcept, on passe un portail, on arrive au village ========== */
.in-wrap{position:fixed;inset:0;z-index:200;overflow:hidden;background:var(--paper)}
.in-wrap.out{animation:inOut .6s ease-in forwards}
@keyframes inOut{to{opacity:0;transform:scale(1.06)}}
.in-tbc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--ink);animation:inLeave .9s cubic-bezier(.6,0,.4,1) 1.05s both}
.in-tbc img{width:96px;height:96px;border-radius:30px;box-shadow:0 18px 40px rgba(255,90,31,.35)}
.in-tbc b{font-family:var(--display);font-size:26px;letter-spacing:-.03em}
.in-tbc span{font-size:14px;font-weight:700;color:var(--ink-3)}
.in-dots i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--flame);margin:0 3px;animation:inDots .9s ease-in-out infinite}
.in-dots i:nth-child(2){animation-delay:.15s}.in-dots i:nth-child(3){animation-delay:.3s}
.in-seed{position:absolute;left:50%;top:36%;width:26px;height:26px;border-radius:50%;background:var(--night);box-shadow:0 0 0 4px #7ee6aa,0 0 30px 8px rgba(34,197,94,.7);transform:translate(-50%,-50%);animation:inSeed .5s ease-out .55s both;z-index:2}
.in-uni{position:absolute;inset:0;background:radial-gradient(120% 70% at 50% 35%,#1c2a7a 0%,#0d1440 55%,#070b26 100%);color:#fff;overflow:hidden;animation:inPortal 1s cubic-bezier(.7,0,.2,1) .95s both;z-index:3}
.in-edge{position:absolute;left:50%;top:36%;width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 .4px #b6f5cf,0 0 6px 1px rgba(34,197,94,.9);animation:inEdge 1s cubic-bezier(.7,0,.2,1) .95s both;z-index:4;pointer-events:none}
.in-glow{position:absolute;inset:0;background:radial-gradient(70% 45% at 50% 38%,rgba(34,197,94,.32),rgba(255,90,31,.12) 55%,transparent 75%);animation:inGlow 1.4s ease-out 3s both}
.in-star{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:.4;animation:inTwinkle 2.6s ease-in-out infinite}
.in-ring{position:absolute;left:50%;top:36%;width:120px;height:120px;border-radius:50%;border:2px solid rgba(126,230,170,.55);animation:inZoom 1.1s ease-in both;z-index:2}
.in-warp{position:absolute;left:50%;top:36%;height:2px;border-radius:2px;transform-origin:left center;background:linear-gradient(90deg,rgba(255,255,255,0),#fff 60%,rgba(126,230,170,.9));animation:inWarp .75s cubic-bezier(.5,0,.9,.6) both;animation-iteration-count:2;z-index:2}
.in-flash{position:absolute;inset:0;background:#fff;animation:inFlash .55s ease-out 2.6s both;z-index:9;pointer-events:none}
.in-stage{position:absolute;left:50%;top:calc(36% - 200px);width:390px;height:520px;margin-left:-195px;z-index:4}
.in-net{position:absolute;inset:0;width:100%;height:100%}
.in-net line{stroke:rgba(126,230,170,.55);stroke-width:1.6;stroke-dasharray:240;stroke-dashoffset:240;animation:inDraw 1s ease-out both}
.in-net line.gold{stroke:rgba(255,198,46,.35)}
.in-halo{position:absolute;left:195px;top:200px;width:230px;height:230px;border-radius:50%;background:conic-gradient(#22c55e,#ffc62e,#ff5a1f,#7c3aed,#22c55e);filter:blur(26px);opacity:0;transform:translate(-50%,-50%);animation:inGlow .6s ease-out 2.8s forwards,inSpin 6s linear 2.8s infinite}
.in-shock{position:absolute;left:195px;top:200px;width:120px;height:120px;border-radius:50%;border:3px solid #7ee6aa;animation:inShock 1.1s ease-out 3.05s both}
.in-titi{position:absolute;left:50%;top:114px;width:170px;animation:inBurst .9s cubic-bezier(.2,.8,.2,1) 2.75s both,inFloat 3.2s ease-in-out 3.65s infinite;filter:drop-shadow(0 20px 40px rgba(34,197,94,.45));z-index:2}
.in-badge{position:absolute;left:50%;top:288px;transform:translateX(-50%);height:28px;padding:0 12px;border-radius:99px;background:#22c55e;color:#052e16;font-weight:800;font-size:12.5px;display:inline-flex;align-items:center;white-space:nowrap;box-shadow:0 8px 24px rgba(34,197,94,.45);z-index:3;animation:inRise .5s ease-out 3.45s both}
.in-av{position:absolute;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:18px;color:#fff;border:3px solid rgba(255,255,255,.9);animation:inPop .55s cubic-bezier(.3,1.6,.5,1) both;z-index:3}
.in-top{position:absolute;top:calc(22px + env(safe-area-inset-top));left:22px;z-index:10;display:flex;align-items:center;gap:8px;font-weight:800;font-size:13px;letter-spacing:.02em;color:rgba(255,255,255,.8);animation:inRise .5s ease-out 3s both}
.in-top i{width:8px;height:8px;border-radius:50%;background:#22c55e;animation:inBlink 1.2s ease-in-out infinite}
.in-words{position:absolute;left:0;right:0;top:calc(36% + 180px);z-index:6;text-align:center;padding:0 24px}
.in-l1{margin:0 0 12px;font-size:13px;font-weight:800;letter-spacing:.08em;color:#7ee6aa;animation:inRise .6s ease-out 3s both}
.in-l2{margin:0;font-family:var(--display);font-size:clamp(54px,15vw,84px);line-height:.95;font-weight:800;letter-spacing:-.04em;color:var(--sun);animation:inSlam .7s cubic-bezier(.2,.9,.3,1) 3.75s both}
.in-l3{margin:2px 0 0;font-family:var(--display);font-size:clamp(40px,11vw,60px);line-height:1.05;font-weight:800;letter-spacing:-.04em;display:inline-block;position:relative;animation:inRise .6s ease-out 4.2s both}
.in-l3 span{position:absolute;left:0;right:0;bottom:2px;height:8px;border-radius:8px;background:#22c55e;z-index:-1;transform-origin:left center;animation:inSweep .6s ease-out 4.6s both}
.in-cta{position:absolute;left:24px;right:24px;bottom:calc(30px + env(safe-area-inset-bottom));z-index:6;display:flex;flex-direction:column;gap:12px;align-items:center;max-width:460px;margin:0 auto;animation:inRise .6s ease-out 5s both}
.in-cta p{margin:0;font-size:15px;line-height:1.5;text-align:center;color:rgba(255,255,255,.8)}
.in-go{width:100%;height:60px;border-radius:20px;border:0;background:linear-gradient(170deg,#ffd04d,#ff8a3d 55%,#ff5a1f);color:var(--ink);font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center;gap:10px;animation:inPulse 1.6s ease-out 5.8s infinite;text-align:center;padding:0 16px}
.in-alt{font-size:14px;font-weight:700;color:#fff;text-decoration:underline;text-underline-offset:3px}
.in-count{font-size:13px!important;font-weight:700;color:rgba(255,255,255,.65)!important;display:flex;align-items:center;gap:8px;animation:inRise .6s ease-out 5.4s both}
.in-count span{display:flex}.in-count i{width:22px;height:22px;border-radius:50%;border:2px solid var(--night);margin-left:-8px;background:var(--flame)}.in-count i:first-child{margin-left:0}.in-count i:nth-child(2){background:var(--blue)}.in-count i:nth-child(3){background:var(--grow)}
.in-skip{position:absolute;top:calc(16px + env(safe-area-inset-top));right:16px;z-index:12;height:38px;padding:0 16px;border-radius:99px;border:1px solid rgba(140,134,163,.45);background:rgba(255,255,255,.12);color:#8c86a3;font-weight:700;font-size:13px}
@media (max-height:700px){.in-stage{transform:scale(.8);transform-origin:center top}.in-words{top:calc(36% + 130px)}.in-cta p{display:none}}
@keyframes inLeave{0%{transform:scale(1);filter:blur(0);opacity:1}100%{transform:scale(1.9);filter:blur(14px);opacity:0}}
@keyframes inSeed{0%{transform:translate(-50%,-50%) scale(0);opacity:0}40%{opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes inPortal{0%{clip-path:circle(0% at 50% 36%)}100%{clip-path:circle(150% at 50% 36%)}}
@keyframes inEdge{0%{transform:translate(-50%,-50%) scale(0);opacity:1}85%{opacity:1}100%{transform:translate(-50%,-50%) scale(160);opacity:0}}
@keyframes inWarp{0%{transform:rotate(var(--a)) translateX(10px) scaleX(.15);opacity:0}25%{opacity:1}100%{transform:rotate(var(--a)) translateX(60vmax) scaleX(1.5);opacity:0}}
@keyframes inZoom{0%{transform:translate(-50%,-50%) scale(.05);opacity:0}20%{opacity:1}100%{transform:translate(-50%,-50%) scale(7);opacity:0}}
@keyframes inFlash{0%{opacity:0}35%{opacity:.95}100%{opacity:0}}
@keyframes inBurst{0%{transform:translate(-50%,0) scale(.1) rotate(-540deg);opacity:0}60%{transform:translate(-50%,0) scale(1.18) rotate(10deg);opacity:1}100%{transform:translate(-50%,0) scale(1) rotate(0);opacity:1}}
@keyframes inFloat{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-10px)}}
@keyframes inSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes inShock{0%{transform:translate(-50%,-50%) scale(.2);opacity:.9}100%{transform:translate(-50%,-50%) scale(3.6);opacity:0}}
@keyframes inPop{0%{transform:scale(0);opacity:0}70%{transform:scale(1.18);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes inDraw{to{stroke-dashoffset:0}}
@keyframes inSlam{0%{opacity:0;transform:scale(2.6);filter:blur(10px)}60%{opacity:1;transform:scale(.96);filter:blur(0)}100%{opacity:1;transform:scale(1)}}
@keyframes inRise{0%{opacity:0;transform:translateY(22px)}100%{opacity:1;transform:none}}
@keyframes inSweep{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@keyframes inGlow{0%{opacity:0}100%{opacity:1}}
@keyframes inTwinkle{0%,100%{opacity:.15}50%{opacity:.9}}
@keyframes inPulse{0%{box-shadow:0 0 0 0 rgba(255,198,46,.55)}100%{box-shadow:0 0 0 22px rgba(255,198,46,0)}}
@keyframes inBlink{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes inDots{0%,100%{opacity:.2}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.in-wrap *{animation-duration:.01s!important;animation-delay:0s!important;animation-iteration-count:1!important}.in-tbc,.in-seed,.in-flash,.in-edge,.in-warp,.in-ring{display:none}.in-uni{clip-path:none}}
/* « Passer » pour un visiteur : on saute directement à l'écran final */
.in-wrap.end *{animation-delay:0s!important;animation-duration:.01s!important}
.in-wrap.end .in-go{animation:inPulse 1.6s ease-out infinite!important}
.in-wrap.end .in-titi{animation:inFloat 3.2s ease-in-out infinite!important}
.in-wrap.end .in-halo{opacity:1;animation:inSpin 6s linear infinite!important}
.in-wrap.end .in-flash,.in-wrap.end .in-edge,.in-wrap.end .in-warp,.in-wrap.end .in-ring,.in-wrap.end .in-tbc,.in-wrap.end .in-seed,.in-wrap.end .in-shock{display:none}
.in-wrap.end .in-uni{clip-path:none}
@media (max-height:900px){.in-cta>p:first-child{display:none}}
.sn-reacts:has(>:nth-child(4)) .sn-react{flex:1 1 calc(50% - 3px)}@media (min-width:560px){.sn-reacts:has(>:nth-child(4)) .sn-react{flex:1 1 0}}

/* ---------- Boost depuis un post ---------- */
.sn-boostcta{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border-radius:14px;background:linear-gradient(170deg,#ff8a3d,var(--flame));color:#fff;font-weight:800;font-size:13.5px}
.sn-boostcta span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sn-boostcta.soft{background:#fff3e8;color:var(--flame-2);border:1px solid #ffd9c2}

/* ---------- En-tête : l'icône cerclée ramène au tableau de bord ---------- */
.sn-brand>a:last-child{min-width:0;overflow:hidden;display:block}
.sn-ring{transition:transform .15s}.sn-ring:active{transform:scale(.92)}

/* ---------- Barre du bas : 5 éléments, Titi au centre ---------- */
.sn-tabs a{position:relative;min-width:0}
.sn-tabs a.sn-tab-titi{justify-content:center}
.sn-tab-titi .orb{width:62px;height:62px;margin-top:-30px;border-radius:22px;background:linear-gradient(160deg,var(--sun),var(--flame));border:4px solid #fff;box-shadow:0 12px 26px -8px rgba(255,90,31,.75);display:grid;place-items:center;overflow:hidden;transition:transform .15s}
.sn-tab-titi .orb img{width:64px;margin-top:8px}
.sn-tab-titi:active .orb{transform:scale(.93)}
.sn-tb{position:absolute;top:-4px;right:2px;min-width:18px;height:18px;padding:0 4px;border-radius:99px;background:var(--flame);color:#fff;font-size:10.5px;font-weight:800;display:grid;place-items:center;border:2px solid #fff;font-style:normal}
.sn-tabs .ic{position:relative}
.sn-dnav a .sn-tb{position:static;margin-left:2px;border:0}

/* ---------- Menu latéral ---------- */
.sn-drawer{position:fixed;inset:0;z-index:95}
.sn-dr-bg{position:absolute;inset:0;background:rgba(13,20,64,.5);backdrop-filter:blur(3px);animation:drFade .2s}
.sn-dr{position:absolute;top:0;right:0;bottom:0;width:min(86vw,340px);background:var(--paper);display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(13,20,64,.25);animation:drIn .26s cubic-bezier(.2,.9,.3,1);padding-top:env(safe-area-inset-top)}
@keyframes drIn{from{transform:translateX(100%)}to{transform:none}}
@keyframes drFade{from{opacity:0}to{opacity:1}}
.sn-dr-h{display:flex;align-items:center;gap:10px;padding:16px;border-bottom:1px solid var(--line)}
.sn-dr-me{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.sn-dr-me b{display:block;font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sn-dr-me small{font-size:12.5px;font-weight:700;color:var(--grow-d)}
.sn-dr-nav{flex:1;overflow-y:auto;padding:6px 10px calc(20px + env(safe-area-inset-bottom))}
.sn-dr-nav small{display:block;font-size:12px;font-weight:800;color:var(--mute);padding:14px 10px 6px}
.sn-dr-nav a,.sn-dr-nav button{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:0 10px;border-radius:14px;border:0;background:none;font-weight:700;font-size:14.5px;color:var(--ink);text-align:left}
.sn-dr-nav a i,.sn-dr-nav button i{width:22px;text-align:center;color:var(--ink-3);font-size:16px}
.sn-dr-nav a span,.sn-dr-nav button span{flex:1}
.sn-dr-nav a:hover,.sn-dr-nav button:hover{background:#f4f1f9}
.sn-dr-nav a.on{background:var(--ink);color:#fff}.sn-dr-nav a.on i{color:#7ee6aa}
.sn-dr-nav a.tbc{background:linear-gradient(120deg,#fff1e6,#fff8f0);border:1.5px solid #ffd9c2;margin:2px 0}
.sn-dr-nav a.tbc img{width:28px;height:28px;object-fit:contain}
.sn-dr-nav .sn-tb{position:static;border:0}
.sn-dr-nav form{margin:0}

/* ---------- Trouver des membres ---------- */
.mb-list{display:flex;flex-direction:column;gap:10px}
.mb-it{display:flex;align-items:center;gap:12px;padding:12px 14px}
.mb-tx{flex:1;min-width:0}
.mb-tx b{display:flex;gap:5px;align-items:center;font-size:15px}
.mb-tx small{display:block;font-size:12.5px;color:var(--mute);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mb-tx span{display:block;font-size:13px;color:var(--ink-2);line-height:1.4;margin-top:2px}
.mb-ac{display:flex;gap:6px;flex-shrink:0}

/* ---------- Messagerie ---------- */
.dm-new{display:flex;gap:8px;flex-wrap:wrap}.dm-new .sn-btn{flex:1}
.dm-convs{overflow:hidden}
.dm-c{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid #f4f1f9}
.dm-c:last-child{border:0}
.dm-c .tx{flex:1;min-width:0}
.dm-c .tx b{display:flex;gap:5px;align-items:center;font-size:15px}
.dm-c .tx span{display:block;font-size:13.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-c.unread .tx span{color:var(--ink);font-weight:700}
.dm-c .meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.dm-c time{font-size:11.5px;color:var(--mute);font-weight:700}
.dm-c .meta b{min-width:22px;height:22px;padding:0 6px;border-radius:99px;background:var(--flame);color:#fff;font-size:11.5px;display:grid;place-items:center}
body.sn-chat .sn-main{padding-bottom:0}
.dm-wrap{max-width:720px;margin:0 auto;display:flex;flex-direction:column}
.dm-top{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.96);backdrop-filter:blur(12px);position:sticky;top:0;z-index:5}

.dm-list{flex:1;padding:16px 14px 110px;display:flex;flex-direction:column;gap:6px}
.dm-hello{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:20px 20px 26px;color:var(--ink-3)}
.dm-hello b{font-family:var(--display);font-size:20px;color:var(--ink)}.dm-hello small{font-size:13px;max-width:34ch;line-height:1.45}
.dm-day{align-self:center;font-size:11.5px;font-weight:800;color:var(--mute);background:#f2eff7;border-radius:99px;padding:4px 12px;margin:10px 0 4px}
.dm-m{display:flex}
.dm-m .bub{max-width:78%;background:#fff;border:1px solid var(--line);border-radius:20px 20px 20px 6px;padding:9px 12px 6px;box-shadow:0 1px 2px rgba(23,18,43,.04)}
.dm-m.me{justify-content:flex-end}
.dm-m.me .bub{background:linear-gradient(160deg,#ff7a33,var(--flame));color:#fff;border:0;border-radius:20px 20px 6px 20px}
.dm-m p{margin:0;font-size:14.5px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.dm-m.me p a{color:#fff;text-decoration:underline}
.dm-m img{display:block;max-width:100%;max-height:300px;border-radius:14px;margin-bottom:4px}
.dm-m small{display:block;text-align:right;font-size:10.5px;font-weight:700;opacity:.7;margin-top:2px}
.dm-blocked{position:fixed;left:0;right:0;bottom:0;text-align:center;padding:16px 16px calc(16px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);font-weight:700;color:var(--ink-3);font-size:14px}
.dm-form{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:flex-end;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,250,242,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);max-width:720px;margin:0 auto}
.dm-form.is-loading{opacity:.7}
.dm-ph{position:relative;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:var(--ink-3);font-size:19px;cursor:pointer;flex-shrink:0;overflow:hidden}
.dm-ph input{position:absolute;inset:0;opacity:0;cursor:pointer}
.dm-in{flex:1;min-width:0;background:#fff;border:1.5px solid #e6e0f0;border-radius:22px;padding:4px}
.dm-in:focus-within{border-color:var(--flame)}
.dm-in textarea{display:block;width:100%;border:0;outline:none;resize:none;background:none;padding:8px 10px;font-size:15px;line-height:1.4;max-height:140px}
.dm-prev{position:relative;padding:4px}.dm-prev img{max-height:120px;border-radius:14px;display:block}
.dm-prev button{position:absolute;top:8px;left:8px;width:28px;height:28px;border-radius:9px;border:0;background:rgba(0,0,0,.6);color:#fff}
.dm-send{width:46px;height:46px;border-radius:50%;border:0;background:linear-gradient(160deg,#ff8a3d,var(--flame));color:#fff;font-size:17px;flex-shrink:0;box-shadow:0 8px 18px -8px rgba(255,90,31,.8)}
.dm-wrap{min-height:100dvh}
.dm-top{top:0;padding-top:calc(10px + env(safe-area-inset-top))}
.dm-who{flex:1;min-width:0;display:block}
.dm-who b{display:flex;gap:5px;align-items:center;font-size:15.5px;white-space:nowrap;overflow:hidden}
.dm-who small{display:block;font-size:12px;color:var(--ink-3);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ---------- Titi Run dans le village ---------- */
.sn-dr-nav .sn-tb.gold,.sn-tb.gold{position:static;background:var(--sun);color:var(--ink);border:0}
.sn-dr-game i{color:var(--flame)!important}
.sn-quest.game{background:linear-gradient(135deg,#1c2a7a,#3a1f78 60%,#ff7a3d)}
.sn-quest .sn-btn{margin-top:10px;height:38px}
.sn-gamecard{display:flex;align-items:center;gap:12px;padding:14px 16px;margin-top:12px;background:linear-gradient(120deg,#0d1440,#1c2a7a);color:#fff;border:0}
.gc-ic{width:44px;height:44px;border-radius:14px;background:linear-gradient(160deg,var(--sun),var(--flame));color:#1a0d00;display:grid;place-items:center;font-size:19px;flex-shrink:0}
.gc-tx{flex:1;min-width:0;display:grid}
.gc-tx b{font-family:var(--display);font-size:17px}
.gc-tx small{color:#c9cdf3;font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc-go{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:99px;background:var(--sun);color:var(--ink);font-weight:800;font-size:13px;flex-shrink:0}
.sn-gameimg img{background:#1b2766}
.sn-gamecta{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 16px;border-radius:16px;background:linear-gradient(120deg,#1c2a7a,#3a1f78);color:#fff;font-weight:800;font-size:14.5px;margin-top:10px}
.sn-gamecta>i:first-child{color:var(--sun);font-size:18px}
.sn-gamecta span{flex:1;min-width:0;display:grid}
.sn-gamecta small{font-size:12px;font-weight:600;color:#c9cdf3}
.sn-gamecta.soft{background:#f1f0fb;color:var(--ink)}
.sn-gamecta.soft small{color:var(--ink-3)}
.sn-gamecta.soft>i:first-child{color:var(--flame)}
.sn-podium{padding:16px;border-radius:18px;background:linear-gradient(150deg,#0d1440,#2a1f55);color:#fff;margin-top:4px}
.sn-podium>b{display:block;font-size:18px;margin-bottom:10px}
.sn-podium ol{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}
.sn-podium li{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;background:rgba(255,255,255,.08)}
.sn-podium li .md{font-size:19px}
.sn-podium li a{color:#fff;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sn-podium li em{font-style:normal;font-weight:800;color:var(--sun)}
.sn-podium li small{grid-column:2/4;font-size:11.5px;color:#c9cdf3;font-weight:600;margin-top:-4px}
.sn-podium-c{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(255,198,46,.14);color:#fff;font-weight:800;margin-bottom:10px}
.sn-podium-c i{color:var(--sun)}
.sn-podium-c span{display:grid}
.sn-podium-c small{font-size:11.5px;color:#c9cdf3;font-weight:600}
.sn-podium p{margin:0;color:#dfe2fb;font-size:13.5px;font-weight:600}
.sn-podium .sn-gamecta{background:var(--sun);color:var(--ink)}
.sn-podium .sn-gamecta>i:first-child{color:var(--ink)}
.sn-av.xl.champ{border-color:var(--sun);box-shadow:0 0 0 3px rgba(255,198,46,.45),0 10px 30px -10px rgba(255,160,0,.7)}
.pf-game{display:grid;gap:12px}
.pf-game-h{display:flex;align-items:center;gap:12px}
.pf-game-h small{display:block;font-size:12px;font-weight:800;color:var(--ink-3)}
.pf-game-h b{font-size:24px}
.pf-game-h b span{font-family:var(--body);font-size:13px;color:var(--ink-3);font-weight:700}
.pf-game-s{display:flex;flex-wrap:wrap;gap:6px}
.pf-game-s span{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:99px;background:#f4f2fb;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.pf-game-s span i{color:var(--flame)}
.pf-game-s span.gold{background:#fff6d9;color:#8a5a00}
.pf-game-s span.gold i{color:#e0a100}
.ci-cup{display:grid;gap:12px;margin-bottom:14px}
.ci-cup-h{display:flex;gap:12px;align-items:flex-start}
.ci-cup-h b{display:block;font-size:17px}
.ci-cup-h small{display:block;color:var(--ink-3);font-size:12.5px;font-weight:600;line-height:1.4;margin-top:2px}
.ci-cup-l{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ci-cup-l li{display:grid;grid-template-columns:26px 1fr auto;gap:8px;align-items:center;padding:9px 12px;border-radius:12px;background:#f7f5fc}
.ci-cup-l li:first-child{background:#fff6d9}
.ci-cup-l .rk{font-weight:800;color:var(--ink-3)}
.ci-cup-l a{font-weight:800;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-left:4px solid var(--c);padding-left:8px}
.ci-cup-l em{font-style:normal;font-weight:800;color:var(--flame-2)}
.ci-cup-e{margin:0;color:var(--ink-3);font-size:13px;font-weight:600}
.ci-champ{color:#e0a100;font-size:13px}
.dm-game{color:var(--flame)}