/* social.css — chargé en DERNIER (après redesign.css et messagerie-mobile.css)
   Look « réseau social premium » sur PC + bannière de profil visible. */
:root{
  --s-bg:#f4f6fb; --s-card:#fff; --s-line:#e8ecf4; --s-text:#0f172a; --s-mute:#6b7690;
  --s-grad:linear-gradient(135deg,#2563eb 0%,#7c3aed 55%,#ec4899 100%);
  --s-shadow:0 1px 2px rgba(15,23,42,.04),0 12px 32px -12px rgba(30,41,90,.18);
  --s-shadow-h:0 2px 4px rgba(15,23,42,.05),0 22px 48px -14px rgba(60,40,160,.28);
}
body{background:var(--s-bg) !important}

/* ---------- PROFIL : bannière visible ---------- */
.pf{text-align:left !important;background:var(--s-card);border-radius:28px;box-shadow:var(--s-shadow);overflow:hidden;padding-bottom:6px;gap:0 !important}
#content > .pf{max-width:860px !important;width:min(100%,860px) !important}
.pf .pf-banner{
  display:block !important;position:relative;width:100%;aspect-ratio:3/1;min-height:150px;max-height:300px;
  border:0 !important;border-radius:0 !important;box-shadow:none !important;
  background:var(--s-grad);overflow:hidden}
.pf .pf-banner.is-empty::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.28),transparent 45%),radial-gradient(circle at 85% 80%,rgba(255,255,255,.18),transparent 40%)}
.pf .pf-banner-img{width:100%;height:100%;object-fit:cover;display:block;animation:sFade .5s ease both}
.pf .pf-banner::before{content:"";position:absolute;inset:auto 0 0 0;height:45%;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.28),transparent)}
.pf .pf-settings-banner-btn{position:absolute !important;top:14px !important;right:14px !important;z-index:2;width:42px !important;height:42px !important;
  background:rgba(255,255,255,.85) !important;backdrop-filter:blur(10px);box-shadow:0 6px 18px rgba(0,0,0,.18);transition:transform .2s}
.pf .pf-settings-banner-btn:hover{transform:rotate(45deg) scale(1.05)}
.pf .pf-head{flex-direction:row !important;align-items:flex-end !important;gap:18px !important;margin:-58px 28px 0 !important;position:relative;z-index:2;padding:0 !important}
.pf .pf-avatar-wrap{transform:none !important;margin:0 !important;flex:none}
.pf .pf-avatar{border:5px solid var(--s-card) !important;box-shadow:0 10px 28px rgba(15,23,42,.22)}
.pf .pf-ident{padding-bottom:8px;min-width:0}
.pf .pf-name{justify-content:flex-start !important;font-size:26px !important;letter-spacing:-.02em}
.pf .pf-id{font-size:13px}
.pf .pf-bio{max-width:none !important;margin:14px 28px 6px !important;font-size:15px;line-height:1.55;color:#334155}
.pf .pf-links{margin:8px 28px !important;justify-content:flex-start}
.pf .profile-stats-row{justify-content:flex-start !important;margin:16px 28px !important;gap:10px}
.pf .profile-stat{padding:12px 22px !important;border:1px solid var(--s-line) !important;border-radius:16px;background:#fafbff;align-items:flex-start;transition:transform .2s,box-shadow .2s}
.pf .profile-stat:hover{transform:translateY(-2px);box-shadow:var(--s-shadow)}
.pf .profile-actions-row{justify-content:flex-start !important;margin:0 28px 16px !important}
.pf .profile-actions-row .btn{border-radius:999px !important;min-width:140px;padding:11px 22px;font-weight:700}
.pf .profile-actions-row .btn-primary{background:var(--s-grad) !important;border:0 !important;box-shadow:0 10px 24px -8px rgba(124,58,237,.55)}
.pf .profile-tabs{margin:8px 12px 0 !important;border-bottom:1px solid var(--s-line)}
.pf .profile-tab{transition:color .2s}
.pf .profile-tab.is-active{border-bottom:3px solid #7c3aed !important;color:var(--s-text)}
.pf #profile-tab-content{padding:14px 12px 12px}
.pf .profile-grid{display:grid !important;grid-template-columns:repeat(3,1fr);gap:6px}
.pf .profile-grid-item{border-radius:14px;overflow:hidden;aspect-ratio:1;transition:transform .25s,box-shadow .25s}
.pf .profile-grid-item:hover{transform:scale(1.025);box-shadow:var(--s-shadow-h)}
.pf .profile-grid-media{width:100%;height:100%;object-fit:cover}
@media (max-width:640px){
  .pf{border-radius:0 0 22px 22px}
  .pf .pf-banner{aspect-ratio:2.4/1;min-height:120px}
  .pf .pf-head{margin:-44px 16px 0 !important;gap:12px !important}
  .pf .pf-name{font-size:21px !important}
  .pf .pf-bio,.pf .pf-links,.pf .profile-stats-row,.pf .profile-actions-row{margin-left:16px !important;margin-right:16px !important}
}

/* ---------- ACCUEIL / FIL : cartes premium ---------- */
@media (min-width:861px){
  #content > .home-page{max-width:1120px !important;width:min(100%,1120px) !important}
  .home-layout-v2{grid-template-columns:minmax(0,600px) 320px !important;gap:36px !important;justify-content:center}
  .home-side-v2{position:sticky;top:84px;align-self:start}
}
.feed-list-v2{gap:22px !important}
.feed-card{background:var(--s-card) !important;border:1px solid var(--s-line) !important;border-radius:24px !important;box-shadow:var(--s-shadow) !important;
  padding:0 !important;overflow:hidden !important;transition:transform .25s,box-shadow .25s;animation:sUp .45s cubic-bezier(.2,.8,.2,1) both;content-visibility:auto;contain-intrinsic-size:640px}
.feed-card:hover{box-shadow:var(--s-shadow-h) !important}
.feed-card-head{padding:14px 18px !important}
.feed-avatar{width:44px;height:44px;border-radius:50%;overflow:hidden;display:block;box-shadow:0 0 0 2px #fff,0 0 0 4px #c4b5fd}
.feed-card-pseudo{font-size:15px !important;cursor:pointer}
.feed-card-pseudo:hover{color:#7c3aed}
.feed-media-wrap,.feed-media{border-radius:0 !important;background:#eef1f8 !important}
.feed-media{max-height:720px !important;min-height:220px}
.feed-card-caption{padding:0 18px !important;margin:14px 0 0 !important;font-size:15px !important}
.feed-card-actions{padding:10px 12px 14px !important;border-top:0 !important;gap:2px !important}
.feed-action-btn{border-radius:999px !important;color:#475569;transition:transform .15s,background .15s,color .15s}
.feed-action-btn:hover{background:#f1f3fb !important;transform:translateY(-1px)}
.feed-like-btn.is-active{color:#ef4444 !important}
.feed-like-btn.is-active svg{fill:#ef4444;animation:sPop .35s}
.feed-repost-btn.is-active{color:#16a34a !important}
.home-side-card-v2{border:1px solid var(--s-line) !important;border-radius:22px !important;box-shadow:var(--s-shadow) !important;background:var(--s-card)}
.story-avatar-ring{transition:transform .2s}
.story-item:hover .story-avatar-ring{transform:scale(1.06)}

@keyframes sUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes sFade{from{opacity:0}to{opacity:1}}
@keyframes sPop{50%{transform:scale(1.35)}}
@media (prefers-reduced-motion:reduce){.feed-card,.pf-banner-img{animation:none !important}}