/* =====================================================================
   Tandem — social.css : fil d'actu, stories, profils, trophées, célébrations
   ===================================================================== */
:root {
  --soc-ring: conic-gradient(from 210deg, #FFC107, #FF6D00, #F4511E, #E91E63, #9C27B0, #FFC107);
  --soc-gold: #F5B700;
}
html.soc-noscroll, html.soc-noscroll body { overscroll-behavior: none; }
html.soc-noscroll .view { overflow: hidden; }

/* ---------- pastille de profil ---------- */
.soc-av { --s: 40px; --face: linear-gradient(140deg, color-mix(in srgb, var(--u) 82%, #fff) 0%, var(--u) 60%, color-mix(in srgb, var(--u) 70%, #000) 100%);
  position: relative; flex: none; box-sizing: border-box; width: var(--s); height: var(--s); border-radius: 50%; display: inline-grid; place-items: center; background: var(--face);
  color: #fff; font-weight: 800; font-size: max(12px, calc(var(--s) * .42)); letter-spacing: -.02em; box-shadow: 0 1px 2px rgba(0,0,0,.15); cursor: pointer; }
.soc-av > i { font-style: normal; line-height: 1; }
/* anneau des stories : 3 couches (visage, liseré, anneau) dans la même pastille */
.soc-av.ring-new, .soc-av.ring-seen, .soc-av.ring-none { border: 3px solid transparent; padding: 2.5px; box-shadow: none; font-size: calc(var(--s) * .36);
  background: var(--face) content-box, linear-gradient(var(--bg-elev, #fff), var(--bg-elev, #fff)) padding-box, var(--soc-ring) border-box; }
.soc-av.ring-seen { background: var(--face) content-box, linear-gradient(var(--bg-elev, #fff), var(--bg-elev, #fff)) padding-box, linear-gradient(var(--line), var(--line)) border-box; }
.soc-av.ring-none { border-color: transparent; background: var(--face) content-box, linear-gradient(transparent, transparent) padding-box; }
.soc-lvl { position: absolute; right: -4px; bottom: -3px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; display: grid; place-items: center;
  background: #1c2024; color: #FFD54F; font-size: 12px; font-weight: 900; border: 2px solid var(--bg-elev, #fff); line-height: 1; z-index: 2; }
html[data-theme="dark"] .soc-lvl { background: #FFD54F; color: #1c2024; }

/* ---------- haut du tableau de bord ---------- */
.soc-dash { margin: -2px 0 14px; }
.soc-hello { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 2px 12px; }
.soc-hello h2 { font-size: 25px; font-weight: 850; letter-spacing: -.6px; line-height: 1.15; }
.soc-hello-d { color: var(--muted); font-size: 13px; font-weight: 650; text-transform: capitalize; margin-bottom: 2px; }
.soc-me { border: 0; background: none; padding: 4px; border-radius: 50%; cursor: pointer; }
.soc-chipsrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.soc-chip { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-height: 58px; padding: 8px 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--card);
  box-shadow: var(--shadow); cursor: pointer; text-align: left; min-width: 0; transition: transform .12s; }
.soc-chip:active { transform: scale(.96); }
.soc-chip b { display: flex; align-items: center; gap: 4px; font-size: 19px; font-weight: 900; line-height: 1.1; white-space: nowrap; letter-spacing: -.3px; }
.soc-chip b > span { font-size: 17px; }
.soc-chip small { font-size: 12px; color: var(--muted); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.soc-mini-xp { display: block; width: 100%; height: 4px; border-radius: 9px; background: var(--line); margin-top: 3px; overflow: hidden; }
.soc-mini-xp i { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, #FFB300, #F4511E); }
.soc-chip.fire.off b > span { filter: grayscale(1); opacity: .45; }
.soc-chip.fire.risk { border-color: #FF9800; animation: socPulse 1.6s ease-in-out infinite; }
@keyframes socPulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, #FF9800 25%, transparent); } }
@media (max-width: 370px) { .soc-chip { padding: 7px 8px; } .soc-chip b { font-size: 17px; } .soc-chip b > span { font-size: 15px; } .soc-chip small { font-size: 12px; } .soc-hello h2 { font-size: 22px; } }
.soc-nm { white-space: nowrap; }

.soc-teaser { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 4px; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--card);
  cursor: pointer; text-align: left; font-size: 14px; color: var(--ink); box-shadow: var(--shadow); }
.soc-teaser > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-teaser small { color: var(--muted); }
.soc-teaser > i { font-style: normal; font-size: 22px; color: var(--muted); }
.soc-teaser > em { font-style: normal; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: #FF3B30; color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }

/* ---------- stories ---------- */
.soc-stories { display: flex; gap: 14px; overflow-x: auto; padding: 8px 4px 10px; margin: 0 -4px 6px; scrollbar-width: none; scroll-snap-type: x proximity; }
.soc-stories::-webkit-scrollbar { display: none; }
.soc-st { position: relative; flex: none; width: 74px; display: flex; flex-direction: column; align-items: center; gap: 7px; border: 0; background: none; cursor: pointer; padding: 3px 0 0; scroll-snap-align: start; color: var(--ink); }
.soc-st > span:not(.soc-av) { font-size: 12.5px; font-weight: 650; max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes socSpin { to { transform: rotate(360deg); } }
.soc-st:active .soc-av { transform: scale(.93); }
.soc-st .soc-av { transition: transform .15s; }
.soc-st-plus { position: absolute; top: 46px; left: 50%; margin-left: 14px; width: 22px; height: 22px; border-radius: 50%; background: var(--c-primary); color: #fff; font-style: normal;
  font-weight: 900; font-size: 17px; line-height: 19px; text-align: center; border: 2.5px solid var(--bg-elev, #fff); z-index: 3; }
.soc-st-fire { position: absolute; top: 0; right: -2px; font-size: 12px; font-weight: 850; padding: 1px 5px; border-radius: 99px; background: var(--card); box-shadow: 0 1px 4px rgba(0,0,0,.18); z-index: 3; }

/* ---------- page Fil ---------- */
.soc-page { max-width: 620px; margin: 0 auto; }
.soc-compose { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 14px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.soc-cbtn { flex: 1; min-width: 0; text-align: left; min-height: 42px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--line); background: var(--bg); color: var(--muted); font-size: 15px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc-cico { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--bg); color: var(--ink-2); display: grid; place-items: center; font-size: 19px; cursor: pointer; }
.soc-lead { padding: 14px 16px 12px; margin-bottom: 16px; border-radius: 20px; color: #fff; background: radial-gradient(120% 140% at 100% 0%, #FF6D00 0%, #E91E63 45%, #4527A0 100%); box-shadow: 0 10px 28px rgba(233,30,99,.25); }
.soc-lead-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.soc-lead-h b { font-size: 16px; font-weight: 850; }
.soc-lead-h small { font-size: 12.5px; opacity: .85; font-weight: 650; }
.soc-lr { display: grid; grid-template-columns: 26px 34px minmax(54px, auto) 1fr auto; align-items: center; gap: 8px; padding: 5px 0; cursor: pointer; }
.soc-lr .soc-av { box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
.soc-lr b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc-lr-n { font-size: 18px; text-align: center; }
.soc-lr-bar { height: 9px; border-radius: 9px; background: rgba(255,255,255,.22); overflow: hidden; }
.soc-lr-bar i { display: block; height: 100%; border-radius: 9px; box-shadow: 0 0 0 1.5px rgba(255,255,255,.65) inset; min-width: 6px; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.soc-lr em { font-style: normal; font-weight: 850; font-size: 14px; white-space: nowrap; }
.soc-lead-p { font-size: 13.5px; opacity: .95; margin-top: 6px; font-weight: 600; }

/* ---------- publication ---------- */
.soc-feed { display: flex; flex-direction: column; gap: 16px; }
.soc-post { background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); overflow: hidden; animation: socIn .35s ease both; }
@keyframes socIn { from { opacity: 0; transform: translateY(10px); } }
.soc-post > header { display: flex; align-items: center; gap: 10px; padding: 12px 8px 10px 14px; }
.soc-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.soc-who b { font-size: 15px; font-weight: 800; cursor: pointer; }
.soc-who small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc-post > header time { font-size: 12px; color: var(--muted); white-space: nowrap; }
.soc-more { border: 0; background: none; color: var(--ink-2); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex: none; }
.soc-mwrap { position: relative; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.soc-media { position: relative; overflow: hidden; }
.soc-photo img { width: 100%; max-height: 560px; object-fit: cover; background: var(--line-2); }
.soc-card, .soc-map { aspect-ratio: 16 / 10; background: var(--g); color: #fff; display: grid; place-items: center; }
.soc-card .soc-emo { font-size: 92px; filter: drop-shadow(0 10px 20px rgba(0,0,0,.25)); transform: translateX(-22%); z-index: 1; animation: socFloat 4s ease-in-out infinite; }
@keyframes socFloat { 50% { transform: translateX(-22%) translateY(-6px) rotate(-3deg); } }
.soc-big { position: absolute; right: 7%; bottom: 13%; text-align: right; z-index: 1; text-shadow: 0 2px 12px rgba(0,0,0,.2); }
.soc-big b { display: block; font-size: 50px; font-weight: 900; letter-spacing: -1.5px; line-height: .95; }
.soc-big small { font-size: 18px; font-weight: 800; opacity: .9; }
.soc-blob { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; right: -18%; top: -36%; background: rgba(255,255,255,.13); }
.soc-blob::after { content: ''; position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; left: -90%; top: 120%; background: rgba(255,255,255,.08); }
.soc-map .soc-route { position: absolute; inset: 0; width: 100%; height: 100%; }
.soc-emo-s { position: absolute; left: 12px; top: 10px; font-size: 26px; background: rgba(255,255,255,.2); width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; backdrop-filter: blur(6px); }
.soc-route-sh { fill: none; stroke: rgba(0,0,0,.22); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.soc-route-ln { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: socDraw 1.8s .2s cubic-bezier(.5,0,.3,1) forwards; }
@keyframes socDraw { to { stroke-dashoffset: 0; } }
.soc-route-a { fill: #2ECC71; stroke: #fff; stroke-width: 2.5; }
.soc-route-b { fill: #FF3B30; stroke: #fff; stroke-width: 2.5; }
.soc-rec { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 6px 12px; border-radius: 99px; background: rgba(0,0,0,.45); backdrop-filter: blur(8px); color: #FFD54F; font-weight: 850; font-size: 13px; }
.soc-trophy { aspect-ratio: 16 / 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; padding: 16px; color: #fff;
  background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--r) 85%, #fff) 0%, var(--r) 22%, #2b2140 62%, #110d1a 100%); }
.soc-tro-ico { font-size: 78px; filter: drop-shadow(0 0 22px color-mix(in srgb, var(--r) 80%, transparent)); animation: socShine 3s ease-in-out infinite; }
@keyframes socShine { 50% { transform: scale(1.06) rotate(-4deg); } }
.soc-trophy b { font-size: 22px; font-weight: 900; letter-spacing: -.3px; margin-top: 4px; }
.soc-trophy small { font-size: 14px; opacity: .85; }
.soc-tro-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; margin-top: 8px; font-size: 12.5px; font-weight: 700; opacity: .9; }
.soc-trophy em { font-style: normal; margin-top: 8px; font-size: 12px; font-weight: 850; letter-spacing: 1.2px; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; border: 1.5px solid var(--r); color: color-mix(in srgb, var(--r) 60%, #fff); }
.soc-levelup { aspect-ratio: 16 / 10; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-align: center;
  background: linear-gradient(150deg, var(--u) 0%, #4527A0 100%); }
.soc-lv-n { font-size: 76px; font-weight: 950; line-height: 1; width: 128px; height: 128px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); box-shadow: 0 0 0 6px rgba(255,255,255,.2), 0 0 40px rgba(255,213,79,.5); color: #FFE082; }
.soc-levelup b { margin-top: 10px; font-size: 20px; font-weight: 900; }
.soc-levelup small { font-size: 15px; opacity: .9; }
.soc-cheer { aspect-ratio: 16 / 9; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 20px 26px; color: #fff; gap: 6px;
  background: linear-gradient(135deg, var(--u) 0%, var(--v) 100%); }
.soc-cheer .soc-emo { font-size: 46px; animation: socWiggle 2.2s ease-in-out infinite; }
@keyframes socWiggle { 10%, 30% { transform: rotate(-10deg); } 20%, 40% { transform: rotate(10deg); } 50% { transform: none; } }
.soc-cheer b { font-size: 21px; font-weight: 850; line-height: 1.25; }
.soc-cheer small { opacity: .9; font-weight: 650; }
.soc-status { min-height: 220px; aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 26px; background: var(--g); color: #fff; text-align: center; }
.soc-status b { font-size: 26px; font-weight: 850; line-height: 1.25; letter-spacing: -.3px; white-space: pre-wrap; word-break: break-word; }
.soc-status b.long { font-size: 19px; }
.soc-pop { position: absolute; left: 50%; top: 50%; width: 110px; height: 110px; margin: -55px 0 0 -55px; color: #fff; opacity: 0; pointer-events: none; filter: drop-shadow(0 6px 18px rgba(0,0,0,.35)); z-index: 4; }
.soc-pop svg { width: 100%; height: 100%; }
.soc-pop.go { animation: socHeart .9s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes socHeart { 0% { opacity: 0; transform: scale(.2); } 15% { opacity: 1; transform: scale(1.15); } 30% { transform: scale(.95); } 45%, 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.1) translateY(-24px); } }

.soc-bar { display: flex; align-items: center; gap: 2px; padding: 6px 8px 0; }
.soc-bar > button { border: 0; background: none; color: var(--ink); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: transform .1s; position: relative; }
.soc-bar > button:active { transform: scale(.86); }
.soc-bar > [data-share] { margin-left: auto; }
.soc-like.on { color: #FF3040; }
.soc-like.beat svg { animation: socBeat .45s ease; }
@keyframes socBeat { 30% { transform: scale(1.35); } 60% { transform: scale(.9); } }
.soc-myr { font-size: 25px; line-height: 1; animation: socBeat .45s ease; }
.soc-pick { font-size: 21px; }
.soc-pick sup { position: absolute; right: 7px; top: 7px; font-size: 12px; font-weight: 900; color: var(--muted); }
.soc-rsum { display: flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0 16px 4px; font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; text-align: left; }
.soc-rsum span { font-size: 16px; letter-spacing: -2px; }
.soc-title { padding: 2px 16px 4px; font-size: 18px; font-weight: 850; letter-spacing: -.3px; }
.soc-stats { display: flex; gap: 0; padding: 4px 16px 6px; }
.soc-stats > div { flex: 1; min-width: 0; padding-right: 10px; }
.soc-stats > div + div { padding-left: 12px; border-left: 1px solid var(--line); }
.soc-stats small { display: block; font-size: 12px; color: var(--muted); font-weight: 650; }
.soc-stats b { font-size: 18px; font-weight: 850; white-space: nowrap; letter-spacing: -.3px; }
.soc-stats b i { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.soc-cap { padding: 2px 16px 4px; font-size: 14.5px; }
.soc-allc { border: 0; background: none; color: var(--muted); font-size: 14px; padding: 2px 16px; cursor: pointer; }
.soc-cl { list-style: none; padding: 2px 16px 0; display: flex; flex-direction: column; gap: 8px; }
.soc-cl li { display: flex; gap: 9px; align-items: flex-start; animation: socIn .25s ease both; }
.soc-cl li > div { min-width: 0; flex: 1; }
.soc-cl p { font-size: 14.5px; line-height: 1.35; word-break: break-word; }
.soc-cl p b { font-weight: 800; cursor: pointer; margin-right: 3px; }
.soc-cl small { font-size: 12px; color: var(--muted); }
.soc-cl small button { border: 0; background: none; color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; padding: 4px 2px; }
.soc-cf { display: flex; align-items: center; gap: 8px; padding: 10px 12px 12px 16px; margin-top: 6px; border-top: 1px solid var(--line-2); }
.soc-cf input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 8px 0; outline: none; color: var(--ink); }
.soc-cf input::placeholder { color: var(--muted); }
.soc-qe { display: flex; gap: 2px; }
.soc-qe button { border: 0; background: none; font-size: 20px; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; transition: transform .1s; }
.soc-qe button:active { transform: scale(1.3); }
.soc-send { display: none; border: 0; background: none; color: var(--c-primary); font-weight: 850; font-size: 15px; cursor: pointer; padding: 6px 4px; }
.soc-cf.typing .soc-send { display: block; }
.soc-cf.typing .soc-qe { display: none; }
.soc-more-sentinel { display: grid; place-items: center; padding: 18px; }
.soc-spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--c-primary); animation: socSpin .8s linear infinite; }
.soc-end { text-align: center; color: var(--muted); font-size: 13.5px; padding: 10px 0 24px; }
.soc-empty { text-align: center; color: var(--muted); padding: 24px 16px; list-style: none; }
.soc-empty > span { display: block; font-size: 44px; margin-bottom: 6px; }
.soc-empty-big { background: var(--card); border: 1px dashed var(--line); border-radius: 22px; padding: 34px 22px; }
.soc-empty-big b { display: block; color: var(--ink); font-size: 18px; margin-bottom: 4px; }
.soc-empty-big p { margin-bottom: 16px; }

/* ---------- choix de réaction ---------- */
.soc-picker { position: fixed; z-index: 1200; display: flex; gap: 2px; padding: 6px 8px; border-radius: 99px; background: var(--card); box-shadow: 0 10px 34px rgba(0,0,0,.28); border: 1px solid var(--line); animation: socPick .22s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes socPick { from { opacity: 0; transform: translateY(10px) scale(.8); } }
.soc-picker button { border: 0; background: none; font-size: 30px; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; transition: transform .12s; }
.soc-picker button:hover, .soc-picker button:active { transform: scale(1.3) translateY(-4px); }
.soc-picker button.on { background: color-mix(in srgb, var(--c-primary) 16%, transparent); }
.soc-picker button:nth-child(1) { animation: socPick .25s .02s both; } .soc-picker button:nth-child(2) { animation: socPick .25s .05s both; } .soc-picker button:nth-child(3) { animation: socPick .25s .08s both; }
.soc-picker button:nth-child(4) { animation: socPick .25s .11s both; } .soc-picker button:nth-child(5) { animation: socPick .25s .14s both; } .soc-picker button:nth-child(6) { animation: socPick .25s .17s both; }
.soc-fly { position: fixed; z-index: 1500; pointer-events: none; font-size: 30px; transform: translate(-50%, -50%); animation: socFly 1.2s cubic-bezier(.2,.7,.3,1) both; }
@keyframes socFly { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.9) rotate(20deg); } }
.soc-confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 2000; pointer-events: none; }

/* ---------- feuilles plein écran ---------- */
.soc-sheet { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0); transition: background .22s; display: flex; justify-content: center; align-items: flex-end; }
.soc-sheet.in { background: rgba(0,0,0,.5); }
.soc-sheet.out { background: rgba(0,0,0,0); }
.soc-sh-in { width: 100%; max-width: 640px; height: 100%; background: var(--bg); overflow-y: auto; overscroll-behavior: contain; transform: translateY(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1);
  padding-bottom: env(safe-area-inset-bottom, 0px); -webkit-overflow-scrolling: touch; }
.soc-sheet.in .soc-sh-in { transform: none; }
.soc-sheet.out .soc-sh-in { transform: translateY(100%); }
@media (min-width: 700px) { .soc-sheet { align-items: center; } .soc-sh-in { height: auto; max-height: 92vh; border-radius: 24px; } }
.soc-onehead { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.soc-onehead b { flex: 1; font-size: 17px; font-weight: 850; }
.soc-back { border: 0; background: none; font-size: 30px; line-height: 1; width: 44px; height: 44px; border-radius: 50%; color: var(--ink); cursor: pointer; }
.soc-pub { border: 0; background: var(--c-primary); color: #fff; font-weight: 850; border-radius: 99px; padding: 10px 18px; min-height: 40px; cursor: pointer; font-size: 15px; }
.soc-pub:disabled { opacity: .4; cursor: default; }
.soc-onebody { padding: 12px; }
.soc-mini .soc-sh-in, .soc-menu .soc-sh-in { height: auto; max-height: 75vh; border-radius: 24px 24px 0 0; }
@media (min-width: 700px) { .soc-mini .soc-sh-in, .soc-menu .soc-sh-in { border-radius: 24px; } }
.soc-menu-in { display: flex; flex-direction: column; padding: 10px 12px 14px; gap: 4px; }
.soc-menu-in::before { content: ''; width: 40px; height: 5px; border-radius: 9px; background: var(--line); margin: 0 auto 8px; }
.soc-menu-in button { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--card); font-size: 16px; font-weight: 650; cursor: pointer; text-align: left; color: var(--ink); }
.soc-menu-in button.danger { color: var(--c-error); }
.soc-menu-in button:last-child { justify-content: center; margin-top: 6px; font-weight: 800; }
.soc-rl { list-style: none; padding: 8px 14px 18px; }
.soc-rl li { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.soc-rl li b { flex: 1; }
.soc-rl li span:not(.soc-av) { font-size: 22px; }
.soc-rl li small { color: var(--muted); font-size: 12px; }

/* profil */
.soc-cover { height: calc(130px + env(safe-area-inset-top, 0px)); background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--u) 70%, #fff) 0%, var(--u) 45%, #311B92 100%); position: relative; }
.soc-shx { position: absolute; right: 12px; top: calc(10px + env(safe-area-inset-top, 0px)); width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(0,0,0,.3); color: #fff; font-size: 18px; cursor: pointer; backdrop-filter: blur(6px); }
.soc-ph { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: -50px; padding: 0 18px; }
.soc-av-xl { box-shadow: 0 0 0 4px var(--bg); background-color: var(--bg); }
.soc-ph h2 { margin-top: 10px; font-size: 26px; font-weight: 900; letter-spacing: -.5px; }
.soc-ptitle { color: var(--ink-2); font-weight: 700; }
.soc-xp { width: min(320px, 90%); height: 10px; border-radius: 9px; background: var(--line); margin: 12px 0 6px; overflow: hidden; }
.soc-xp i { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, #FFB300, #F4511E, #E91E63); animation: socGrow 1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes socGrow { from { width: 0 !important; } }
.soc-xpt { font-size: 13px; color: var(--muted); }
.soc-xpt b { color: var(--ink); }
.soc-pk { display: grid; grid-template-columns: repeat(4, 1fr); margin: 16px 14px 8px; padding: 12px 6px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); text-align: center; }
.soc-pk b { display: block; font-size: 19px; font-weight: 900; }
.soc-pk small { font-size: 12px; color: var(--muted); font-weight: 650; }
.soc-warn { margin: 6px 14px; padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, #FF9800 16%, var(--card)); font-weight: 700; font-size: 14px; }
.soc-tabs { display: flex; margin: 12px 14px 0; border-bottom: 1px solid var(--line); }
.soc-tabs button { flex: 1; border: 0; background: none; padding: 12px 6px; font-weight: 800; font-size: 14.5px; color: var(--muted); border-bottom: 2.5px solid transparent; cursor: pointer; }
.soc-tabs button.on { color: var(--ink); border-bottom-color: var(--ink); }
.soc-tabs small { font-weight: 650; }
.soc-ptro { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; padding: 14px; }
.soc-tr { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 14px 10px 12px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); gap: 2px; }
.soc-tr > span { font-size: 38px; filter: grayscale(1); opacity: .35; }
.soc-tr b { font-size: 13.5px; font-weight: 850; line-height: 1.2; margin-top: 4px; }
.soc-tr small { font-size: 12px; color: var(--muted); line-height: 1.3; }
.soc-tr em { font-style: normal; font-size: 12px; font-weight: 750; color: var(--muted); margin-top: 6px; }
.soc-tr.ok { border-color: color-mix(in srgb, var(--r) 55%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--r) 14%, var(--card)) 0%, var(--card) 70%); }
.soc-tr.ok > span { filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--r) 60%, transparent)); opacity: 1; }
.soc-tr.ok em { color: color-mix(in srgb, var(--r) 75%, var(--ink)); }
.soc-tr.ok::after { content: ''; position: absolute; top: 9px; right: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--r); box-shadow: 0 0 0 3px color-mix(in srgb, var(--r) 30%, transparent); }
.soc-trbar { display: block; width: 80%; height: 5px; border-radius: 9px; background: var(--line); margin-top: 8px; overflow: hidden; }
.soc-trbar i { display: block; height: 100%; background: var(--c-primary); border-radius: 9px; }
.soc-pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px 0 20px; }
.soc-pgrid > .soc-empty { grid-column: 1 / -1; }
.soc-tile { position: relative; aspect-ratio: 1; border: 0; cursor: pointer; color: #fff; display: grid; place-items: center; overflow: hidden; padding: 0; }
.soc-tile > span { font-size: 36px; }
.soc-tile > b { position: absolute; left: 8px; bottom: 6px; font-size: 16px; font-weight: 900; text-shadow: 0 1px 6px rgba(0,0,0,.3); }
.soc-tile > b small { font-size: 12px; margin-left: 2px; }
.soc-tile > em { font-style: normal; font-weight: 800; font-size: 12.5px; padding: 8px; line-height: 1.25; }
.soc-tile .soc-route { width: 100%; height: 100%; }
.soc-tile .soc-route-ln { animation: none; stroke-dashoffset: 0; }
.soc-pact { padding: 0 14px 24px; }
.soc-pact .btn { width: 100%; min-height: 50px; justify-content: center; font-size: 16px; }

/* publier / encourager */
.soc-compbody { padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.soc-comp-who { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.soc-comp-prev { position: relative; border-radius: 20px; background: var(--g); min-height: 230px; display: grid; place-items: center; overflow: hidden; transition: background .3s; }
.soc-comp-prev textarea { width: 100%; height: 100%; min-height: 230px; border: 0; background: transparent; color: #fff; text-align: center; font-size: 24px; font-weight: 850; padding: 28px 20px; resize: none; outline: none; }
.soc-comp-prev textarea::placeholder { color: rgba(255,255,255,.75); }
.soc-comp-prev.has-img { background: #000; display: flex; flex-direction: column; }
.soc-comp-prev.has-img img { width: 100%; max-height: 50vh; object-fit: contain; order: -1; }
.soc-comp-prev.has-img textarea { min-height: 70px; font-size: 17px; font-weight: 600; text-align: left; padding: 12px 16px; }
.soc-moods, .soc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.soc-moods button, .soc-chips button { border: 1px solid var(--line); background: var(--card); border-radius: 99px; padding: 9px 14px; font-size: 14.5px; font-weight: 650; cursor: pointer; color: var(--ink); min-height: 40px; }
.soc-moods button.on, .soc-chips button.on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.soc-chips button { text-align: left; }
.soc-bgs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.soc-bgs > button { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.soc-bgs > button.on { box-shadow: 0 0 0 2.5px var(--ink); }
.soc-addph { margin-left: auto; display: flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); cursor: pointer; font-weight: 700; min-height: 40px; }
.soc-to { display: flex; gap: 8px; flex-wrap: wrap; }
.soc-to button { display: flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border-radius: 99px; border: 1.5px solid var(--line); background: var(--card); font-weight: 750; cursor: pointer; color: var(--ink); }
.soc-to button.on { border-color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 10%, var(--card)); }
.soc-to1 { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.soc-cheer-ta { width: 100%; border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; background: var(--card); resize: none; }

/* activité */
.soc-al { list-style: none; padding: 4px 0 24px; }
.soc-al li { display: flex; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer; }
.soc-al li.new { background: color-mix(in srgb, var(--c-primary) 8%, transparent); }
.soc-al li.soft { opacity: .85; }
.soc-al li p { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.35; }
.soc-al li p small { color: var(--muted); white-space: nowrap; }
.soc-al-e { font-size: 24px; }
.soc-alh { font-weight: 850; font-size: 15px; padding: 16px 16px 4px !important; cursor: default !important; }

/* cloche */
.soc-bell { position: relative; margin-right: 6px; }
.soc-bell em { position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: #FF3B30; color: #fff; font-style: normal; font-size: 12px; font-weight: 850;
  display: grid; place-items: center; border: 2px solid var(--bg-elev); animation: socPop .4s cubic-bezier(.2,.9,.3,1.4) both; }
@keyframes socPop { from { transform: scale(0); } }
body.no-profile .soc-bell { display: none !important; }
#bottomNav a.soc-dot { position: relative; }
#bottomNav a.soc-dot::after { content: ''; position: absolute; top: 6px; left: calc(50% + 9px); width: 9px; height: 9px; border-radius: 50%; background: #FF3B30; border: 2px solid var(--bg-elev); }

/* ---------- story plein écran ---------- */
.soc-story { position: fixed; inset: 0; z-index: 1100; background: #000; color: #fff; display: flex; flex-direction: column; animation: socStoryIn .25s cubic-bezier(.2,.8,.2,1) both; touch-action: none; user-select: none; -webkit-user-select: none; }
@keyframes socStoryIn { from { opacity: 0; transform: scale(.92); } }
.soc-story.out { animation: socStoryOut .18s ease both; }
@keyframes socStoryOut { to { opacity: 0; transform: scale(.94) translateY(30px); } }
.soc-sbars { position: absolute; left: 10px; right: 10px; top: calc(8px + env(safe-area-inset-top, 0px)); display: flex; gap: 4px; z-index: 5; }
.soc-sbars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.35); overflow: hidden; }
.soc-sbars b { display: block; height: 100%; background: #fff; width: 0; }
.soc-shead { position: absolute; left: 12px; right: 6px; top: calc(20px + env(safe-area-inset-top, 0px)); display: flex; align-items: center; gap: 10px; z-index: 6; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.soc-shead b { font-size: 15px; }
.soc-shead small { opacity: .8; font-size: 13px; flex: 1; }
.soc-sx { width: 44px; height: 44px; border: 0; background: none; color: #fff; font-size: 22px; cursor: pointer; }
.soc-sbody { flex: 1; display: flex; }
.soc-sl { flex: 1; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 90px 26px 110px; background: var(--g); gap: 10px; }
.soc-sl h2 { font-size: 30px; font-weight: 900; letter-spacing: -.6px; line-height: 1.15; text-shadow: 0 2px 16px rgba(0,0,0,.25); position: relative; }
.soc-sl p { font-size: 16.5px; opacity: .92; max-width: 30ch; position: relative; }
.soc-sl-emo { font-size: 120px; line-height: 1; filter: drop-shadow(0 12px 26px rgba(0,0,0,.3)); position: relative; }
.soc-sl-emo.bounce { animation: socBounce 1.1s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes socBounce { from { transform: scale(.3) translateY(40px); opacity: 0; } }
.soc-sl-emo.spin { animation: socTroIn 1.2s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes socTroIn { from { transform: scale(.2) rotate(-200deg); opacity: 0; } }
.soc-sl-eye { font-size: 13px !important; font-weight: 850; letter-spacing: 1.6px; text-transform: uppercase; opacity: .85; }
.soc-sl-kpi { display: flex; gap: 0; margin-top: 14px; background: rgba(0,0,0,.18); border-radius: 20px; padding: 12px 6px; backdrop-filter: blur(8px); position: relative; width: min(100%, 360px); }
.soc-sl-kpi > div { flex: 1; min-width: 0; }
.soc-sl-kpi > div + div { border-left: 1px solid rgba(255,255,255,.2); }
.soc-sl-kpi b { display: block; font-size: 23px; font-weight: 900; white-space: nowrap; }
.soc-sl-kpi b i { font-style: normal; font-size: 13px; font-weight: 700; }
.soc-sl-kpi small { font-size: 12px; opacity: .85; }
.soc-sl-rec { color: #FFE082; font-weight: 850; }
.soc-sl-where { font-size: 14px !important; opacity: .85; }
.soc-sl-route { width: min(86vw, 360px); aspect-ratio: 32 / 30; position: relative; }
.soc-sl-route .soc-route { width: 100%; height: 100%; }
.soc-sl-route .soc-route-ln { stroke-width: 5.5; animation-duration: 2.4s; }
.soc-sl-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.soc-sl-img.full { opacity: 1; object-fit: contain; }
.soc-sl-capt { position: absolute !important; left: 0; right: 0; bottom: 100px; font-size: 20px !important; padding: 0 22px; }
.soc-sl-big { font-size: 34px !important; }
.soc-sl-lv { width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; font-size: 84px; font-weight: 950; color: #FFE082; background: rgba(255,255,255,.14); box-shadow: 0 0 0 8px rgba(255,255,255,.18), 0 0 60px rgba(255,213,79,.55); animation: socBounce 1s cubic-bezier(.3,1.6,.5,1) both; }
.soc-sl-btn { margin-top: 18px; position: relative; border: 0; border-radius: 99px; padding: 14px 24px; font-size: 16.5px; font-weight: 850; background: #fff; color: #1c2024; cursor: pointer; min-height: 50px; }
.soc-snav { position: absolute; inset: 70px 0 90px; display: flex; z-index: 3; }
.soc-snav button { border: 0; background: none; cursor: pointer; }
.soc-snav button:first-child { width: 32%; }
.soc-snav button:last-child { flex: 1; }
.soc-sfoot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; align-items: center; gap: 4px; padding: 12px 12px calc(14px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(0deg, rgba(0,0,0,.55), transparent); }
.soc-sfoot input { flex: 1; min-width: 0; height: 46px; border-radius: 99px; border: 1.5px solid rgba(255,255,255,.65); background: rgba(0,0,0,.2); color: #fff; padding: 0 18px; outline: none; }
.soc-sfoot input::placeholder { color: rgba(255,255,255,.8); }
.soc-sfoot button { border: 0; background: none; font-size: 27px; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; transition: transform .12s; }
.soc-sfoot button:active { transform: scale(1.35); }
.soc-sfoot button.on { background: rgba(255,255,255,.22); }
.soc-sviews { gap: 12px; justify-content: center; font-size: 20px; }
.soc-sviews > span { display: flex; align-items: center; gap: 4px; }
.soc-sv0 { font-size: 14px; opacity: .8; }
.soc-story.held .soc-shead, .soc-story.held .soc-sbars, .soc-story.held .soc-sfoot { opacity: 0; transition: opacity .2s; }
@media (min-width: 700px) { .soc-story { padding: 20px calc(50vw - 230px); background: rgba(10,10,12,.96); } .soc-sbody { border-radius: 18px; overflow: hidden; } .soc-sbars, .soc-shead { left: calc(50vw - 220px); right: calc(50vw - 220px); } .soc-sfoot { left: calc(50vw - 230px); right: calc(50vw - 230px); } .soc-snav { left: calc(50vw - 230px); right: calc(50vw - 230px); } }

/* ---------- célébration ---------- */
.soc-cel .soc-sh-in { background: radial-gradient(130% 90% at 50% 0%, #4527A0 0%, #1a1033 55%, #0b0814 100%); color: #fff; display: flex; align-items: center; justify-content: center; }
.soc-cel-in { width: 100%; max-width: 420px; padding: calc(40px + env(safe-area-inset-top, 0px)) 24px 30px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.soc-cel-tro { width: 170px; height: 170px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, color-mix(in srgb, var(--r) 55%, transparent) 0%, transparent 68%); animation: socTroIn 1.1s cubic-bezier(.3,1.5,.5,1) both; position: relative; }
.soc-cel-tro::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--r) 40%, transparent) 0 8deg, transparent 8deg 24deg); animation: socSpin 14s linear infinite; mask: radial-gradient(circle, transparent 38%, #000 40%, transparent 70%); -webkit-mask: radial-gradient(circle, transparent 38%, #000 40%, transparent 70%); }
.soc-cel-tro span { font-size: 100px; filter: drop-shadow(0 0 26px var(--r)); position: relative; }
.soc-cel-lv { width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); box-shadow: 0 0 0 8px rgba(255,255,255,.14); background: radial-gradient(circle, rgba(255,213,79,.28) 0%, rgba(255,255,255,.08) 70%); animation: socBounce 1s cubic-bezier(.3,1.6,.5,1) both; margin-bottom: 6px; }
.soc-cel-lv span { font-size: 82px; font-weight: 950; color: #FFE082; }
.soc-cel-eye { font-size: 13px; font-weight: 850; letter-spacing: 1.8px; text-transform: uppercase; color: #FFD54F; margin-top: 6px; }
.soc-cel h2 { font-size: 32px; font-weight: 950; letter-spacing: -.7px; line-height: 1.1; }
.soc-cel-in > p { opacity: .9; }
.soc-cel-more { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.soc-cel-more span { display: flex; flex-direction: column; align-items: center; font-size: 38px; width: 80px; }
.soc-cel-more small { font-size: 12px; font-weight: 700; opacity: .85; }
.soc-cel-xp { font-size: 30px; font-weight: 950; color: #FFD54F; margin-top: 4px; animation: socBounce .9s .4s cubic-bezier(.3,1.6,.5,1) both; }
.soc-cel-note { font-size: 14px; opacity: .75 !important; margin-top: 8px; }
.soc-cel-btns { display: flex; gap: 10px; width: 100%; margin-top: 18px; }
.soc-cel-btns .btn { flex: 1; min-height: 52px; justify-content: center; font-size: 16px; }
.soc-cel-btns .btn-ghost { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #fff; }

.soc-xptoast { position: fixed; z-index: 1300; left: 50%; top: calc(70px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 99px;
  background: #1c2024; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.3); animation: socToast .5s cubic-bezier(.2,.9,.3,1.4) both; white-space: nowrap; }
.soc-xptoast b { color: #FFD54F; font-size: 18px; font-weight: 950; }
.soc-xptoast span { font-size: 13.5px; font-weight: 700; }
.soc-xptoast > i { width: 60px; height: 6px; border-radius: 9px; background: rgba(255,255,255,.2); overflow: hidden; }
.soc-xptoast > i > i { display: block; height: 100%; background: linear-gradient(90deg, #FFB300, #F4511E); border-radius: 9px; }
.soc-xptoast.out { transition: opacity .4s, transform .4s; opacity: 0; transform: translateX(-50%) translateY(-20px); }
@keyframes socToast { from { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(.8); } }

@media (prefers-reduced-motion: reduce) {
  .soc-post, .soc-card .soc-emo, .soc-tro-ico, .soc-cheer .soc-emo, .soc-cel-tro::before, .soc-chip.fire.risk { animation: none !important; }
  .soc-route-ln { animation: none; stroke-dashoffset: 0; }
}

/* =====================================================================
   Finitions de toute l'app : transitions, barre du bas, titres
   ===================================================================== */
/* entrée douce de chaque page (opacité seulement : les écrans plein écran du Coach GPS restent intacts) */
.view > .page:not(.cg) { animation: socPage .26s ease-out both; }
@keyframes socPage { from { opacity: 0; } }
.page-title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card { transition: box-shadow .2s, transform .2s; }
.btn { transition: transform .1s, background .15s, box-shadow .15s; }
.btn-primary { box-shadow: 0 4px 14px color-mix(in srgb, var(--c-primary) 30%, transparent); }
@media (max-width: 900px) {
  .bottom-nav { background: color-mix(in srgb, var(--bg-elev) 78%, transparent); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px);
    box-shadow: 0 -6px 24px rgba(16,24,40,.06); }
  .bottom-nav a .ic { box-sizing: content-box; padding: 4px 16px; border-radius: 99px; transition: background .2s, transform .2s; }
  .bottom-nav a.active .ic { background: color-mix(in srgb, var(--c-primary) 15%, transparent); }
  .bottom-nav a:active .ic { transform: scale(.9); }
  .bottom-nav a { gap: 1px; }
  .sub-nav a { transition: background .15s, color .15s; }
  .topbar { backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); }
}
html[data-theme="dark"] .bottom-nav { background: rgba(10,11,14,.78); }
@media (prefers-reduced-motion: reduce) { .view > .page:not(.cg) { animation: none; } }