/* ============================================================================
   MEETennis — assets/feed.css
   Fil communautaire + badges. S'appuie sur les variables de app.css.
   ============================================================================ */

/* ---- Badges (utilisés aussi au profil et en admin) ---------------------- */
.badge-row{display:inline-flex;gap:4px;align-items:center;vertical-align:middle;margin-left:6px}
.ubadge{display:inline-flex;align-items:center;gap:5px;background:color-mix(in srgb,var(--bc) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--bc) 38%,transparent);border-radius:99px;padding:2px 6px;line-height:1}
.ubadge i{font-style:normal;font-size:11px}
.badge-row.md{gap:7px;margin-left:0;flex-wrap:wrap}
.badge-row.md .ubadge{padding:6px 11px;font-size:12px}
.badge-row.md .ubadge i{font-size:14px}
.ubadge b{font:700 11px/1 Raleway,sans-serif;color:var(--bc)}

/* ---- Composer ----------------------------------------------------------- */
.composer{background:var(--card,#fff);border-radius:16px;padding:14px;margin-bottom:18px;
  box-shadow:0 2px 14px rgba(0,0,0,.06)}
.cp-top{display:flex;gap:11px;align-items:flex-start}
.cp-av{width:38px;height:38px;border-radius:50%;flex:none;background:var(--brand);color:#fff;
  display:grid;place-items:center;font:800 12px/1 Montserrat,sans-serif;overflow:hidden}
.cp-av img{width:100%;height:100%;object-fit:cover}
.composer textarea{flex:1;border:0;background:transparent;resize:vertical;font:400 14.5px/1.6 Raleway,sans-serif;
  color:var(--ink);outline:none;padding:8px 0;min-height:44px}
.cp-preview{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 0}
.cp-preview img{width:72px;height:72px;object-fit:cover;border-radius:9px}
.cp-consent{display:none;margin-top:12px;background:rgba(224,94,1,.07);border-radius:9px;padding:10px 12px}
.cp-consent label{display:flex;gap:9px;align-items:flex-start;font-size:12px;line-height:1.5;color:var(--ink-soft);cursor:pointer}
.cp-consent input{margin-top:2px;flex:none}
.cp-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;
  padding-top:12px;border-top:1px solid rgba(128,128,128,.15)}
.cp-img{cursor:pointer;font:700 13px/1 Raleway,sans-serif;color:var(--ink-soft);padding:9px 12px;
  border-radius:9px;border:1.5px solid rgba(128,128,128,.25)}
.cp-foot .btn{margin:0;width:auto;padding:10px 20px}

/* ---- Publication -------------------------------------------------------- */
.feed{display:flex;flex-direction:column;gap:16px}
.post{background:var(--card,#fff);border-radius:16px;overflow:hidden;box-shadow:0 2px 14px rgba(0,0,0,.06)}
.post.pending{opacity:.85;box-shadow:0 0 0 1.5px #d97706,0 2px 14px rgba(0,0,0,.06)}
.post-pending{background:rgba(217,119,6,.12);color:#a35c00;font:700 11.5px/1.4 Raleway,sans-serif;padding:8px 14px}
.post-head{display:flex;align-items:center;gap:11px;padding:13px 14px 9px}
.post-av{width:40px;height:40px;border-radius:50%;flex:none;background:var(--brand);color:#fff;
  display:grid;place-items:center;font:800 12px/1 Montserrat,sans-serif;overflow:hidden}
.post-av img{width:100%;height:100%;object-fit:cover}
.post-who{flex:1;min-width:0}
.pw-name{font:700 14px/1.3 Raleway,sans-serif;color:var(--ink);display:flex;align-items:center;flex-wrap:wrap}
.post-who time{font-size:11.5px;color:var(--ink-soft)}
.post-flag{background:none;border:0;color:var(--ink-soft);font-size:15px;cursor:pointer;padding:6px;opacity:.5}
.post-flag:hover{opacity:1}
.post-body{padding:2px 14px 12px;font-size:14.5px;line-height:1.65;color:var(--ink);white-space:pre-wrap;word-break:break-word}
.post-imgs{display:grid;gap:3px}
.post-imgs.n1{grid-template-columns:1fr}
.post-imgs.n2,.post-imgs.n4{grid-template-columns:1fr 1fr}
.post-imgs.n3{grid-template-columns:1fr 1fr}
.post-imgs.n3 img:first-child{grid-column:1/-1}
.post-imgs img{width:100%;max-height:420px;object-fit:cover;display:block}
.post-imgs.n2 img,.post-imgs.n3 img:not(:first-child),.post-imgs.n4 img{aspect-ratio:1;max-height:none}
.post-acts{display:flex;gap:6px;padding:9px 10px;border-top:1px solid rgba(128,128,128,.13)}
.pa{flex:1;background:none;border:0;cursor:pointer;padding:9px;border-radius:9px;color:var(--ink-soft);
  font:700 13px/1 Raleway,sans-serif;display:flex;align-items:center;justify-content:center;gap:7px}
.pa:hover{background:rgba(128,128,128,.08)}
.pa .ic{font-size:15px}
.pa.on{color:var(--brand)}
.pa.on .ic{transform:scale(1.15)}

/* ---- Commentaires ------------------------------------------------------- */
.post-comments{padding:4px 14px 14px;border-top:1px solid rgba(128,128,128,.13);background:rgba(128,128,128,.035)}
.cmt{display:flex;gap:9px;padding:11px 0;border-bottom:1px solid rgba(128,128,128,.1)}
.cmt.reply{margin-left:34px;padding-left:10px;border-left:2px solid rgba(128,128,128,.18)}
.cmt-av{width:30px;height:30px;border-radius:50%;flex:none;background:var(--ink-soft);color:#fff;
  display:grid;place-items:center;font:800 10px/1 Montserrat,sans-serif;overflow:hidden}
.cmt-av img{width:100%;height:100%;object-fit:cover}
.cmt-main{flex:1;min-width:0}
.cmt-name{font:700 12.5px/1.4 Raleway,sans-serif;color:var(--ink);display:flex;align-items:center;flex-wrap:wrap;gap:5px}
.cmt-name time{font-weight:400;font-size:10.5px;color:var(--ink-soft)}
.cmt-body{font-size:13.5px;line-height:1.6;color:var(--ink);margin-top:2px;word-break:break-word}
.cmt-acts{display:flex;gap:12px;margin-top:5px}
.cmt-acts button{background:none;border:0;padding:0;cursor:pointer;font:700 11.5px/1 Raleway,sans-serif;color:var(--ink-soft)}
.cmt-acts button:hover{color:var(--ink)}
.cmt-acts .cl.on{color:var(--brand)}
.cmt-empty{font-size:13px;color:var(--ink-soft);text-align:center;padding:16px 0;margin:0}
.cmt-form{margin-top:12px}
.cmt-form textarea{width:100%;border:1.5px solid rgba(128,128,128,.25);border-radius:10px;padding:10px 12px;
  font:400 13.5px/1.55 Raleway,sans-serif;color:var(--ink);background:var(--card,#fff);resize:vertical;outline:none}
.cmt-form textarea:focus{border-color:var(--brand)}
.cmt-form .btn.sm{width:auto;margin:9px 0 0;padding:9px 18px;font-size:12.5px}
.cmt-reply-to{font-size:12px;color:var(--ink-soft);margin-bottom:7px}
.cmt-reply-to button{background:none;border:0;color:var(--ink-soft);cursor:pointer;font-size:15px;padding:0 4px}
.cmt-err{color:#c62828;font-size:12px;margin:7px 0 0}

/* ---- Profil : encart gamification --------------------------------------- */
.gam{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:14px 0}
.gam div{background:rgba(128,128,128,.08);border-radius:11px;padding:12px 8px;text-align:center}
.gam b{display:block;font:800 19px/1 Montserrat,sans-serif;color:var(--ink)}
.gam span{font-size:10.5px;color:var(--ink-soft)}
.level{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--ink-soft);margin-top:4px}
.level b{font:800 15px/1 Montserrat,sans-serif;color:var(--brand)}

@media (min-width:1000px){
  body:has(.feed) .post-imgs img{max-height:520px}
}

/* Le texte passe sous le visuel : il lui faut alors sa marge haute, sinon il
   se colle à l'image. */
.post-imgs + .post-body,
.post-video + .post-body{padding-top:13px}
.post-head + .post-imgs,
.post-head + .post-video{margin-top:4px}