/* ==========================================================================
   TADAGBÉ — Les communautés de réseautage (communautes.html)
   Prolonge equipes.css : les onglets et le bandeau y sont déjà définis.
   ========================================================================== */

/* ---------- Vos communautés, en tête d'annuaire --------------------------- */
.cm-mes{margin-bottom:22px}
.cm-mes__t{display:block;font-family:'Archivo',Arial,sans-serif;font-size:11px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--texte-3);margin-bottom:10px}
.cm-mes__l{display:flex;flex-wrap:wrap;gap:8px}
.cm-mes__l a{display:inline-flex;align-items:center;gap:8px;font-size:12.6px;font-weight:600;
  color:var(--c,#2E7D32);background:#fff;border:1px solid var(--bord);border-left:3px solid var(--c,#2E7D32);
  border-radius:var(--r);padding:8px 14px;transition:box-shadow .18s}
.cm-mes__l a:hover{box-shadow:0 6px 18px -12px rgba(0,0,0,.45)}

/* ---------- Cartes de communauté ------------------------------------------ */
.cmgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(292px,1fr));gap:16px}
.cmc{background:#fff;border:1px solid var(--bord);border-radius:var(--r);padding:20px 22px;
  display:flex;flex-direction:column;border-top:3px solid var(--c,#2E7D32);
  position:relative;transition:transform .4s var(--ease),box-shadow .4s,border-color .3s}
.cmc:hover{transform:translateY(-4px);box-shadow:var(--ombre-fort)}
/* Le lien couvre la carte entière ; le pied repasse au-dessus pour que
   « Rejoindre » reste un bouton et non une zone morte. */
.cmc__lien{position:absolute;inset:0;z-index:1;border-radius:inherit}
.cmc__lien:focus-visible{outline:2px solid var(--vert);outline-offset:3px}
.cmc__pied{position:relative;z-index:2}
.cmc:hover h3{color:var(--c,#2E7D32)}
.cmc__ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 13%,transparent);color:var(--c);margin-bottom:12px}
.cmc h3{font-size:17px;line-height:1.25}
.cmc p{font-size:12.8px;line-height:1.65;color:var(--texte-2);margin-top:7px}
.cmc__meta{list-style:none;margin:13px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px}
.cmc__meta li{display:flex;align-items:center;gap:6px;font-size:11.8px;color:var(--texte-3)}
.cmc__meta li svg{color:var(--c,#2E7D32);flex:none}
.cmc__pied{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:auto;padding-top:16px}
/* Les deux actions tiennent sur une ligne et se partagent la largeur :
   « Ouvrir le forum » est plus long que l'ancien libellé. */
.cmc__pied>.btn{flex:1 1 0;min-width:0;justify-content:center;white-space:nowrap}
.cmc__dedans{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:#3E8035}

/* ---------- Onglets : rejoindre / quitter --------------------------------- */
.eq-tab--join{color:var(--vert-fonce);margin-left:auto}
.eq-tab--sortie{color:var(--texte-3);margin-left:auto;font-weight:600;text-transform:none;
  letter-spacing:0}
.eq-tab--sortie:hover{color:#C7362F}

/* ---------- La colonne du fil --------------------------------------------- */
.cm-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px;align-items:start}

.cm-pub{margin-bottom:18px}
.cm-pub__t{grid-template-columns:repeat(auto-fit,minmax(min(130px,100%),1fr));margin-bottom:12px}
.cm-pub .field{margin-bottom:10px}

.cm-invite{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px;
  padding:18px 20px;border-radius:var(--r);background:linear-gradient(120deg,#F1F7F0,#F8F8F8);
  border:1px solid #DCE8DA;border-left:3px solid var(--vert)}
.cm-invite div{flex:1;min-width:220px}
.cm-invite b{display:block;font-family:'Archivo',Arial,sans-serif;font-size:15px}
.cm-invite span{display:block;font-size:12.6px;line-height:1.55;color:var(--texte-2);margin-top:4px}

/* ---------- Une publication ----------------------------------------------- */
.po{background:#fff;border:1px solid var(--bord);border-radius:var(--r);padding:18px 20px;
  margin-bottom:13px;border-left:3px solid var(--c,#2F63A8)}
.po__hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:11px}
.po__av{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--vert-fonce);color:#fff;font-family:'Archivo',Arial,sans-serif;
  font-size:11.5px;font-weight:800}
.po__qui{display:flex;flex-direction:column;min-width:0}
.po__qui b{font-size:13.2px;font-weight:700}
.po__qui i{font-style:normal;font-size:11px;color:var(--texte-3)}
.po__type{display:inline-flex;align-items:center;gap:6px;font-size:9.8px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--c,#2F63A8);
  background:color-mix(in srgb,var(--c) 12%,transparent);border-radius:20px;padding:5px 10px}
.po__ts{font-size:11px;color:var(--texte-3);margin-left:auto}
.po h3{font-size:16px;line-height:1.32}
.po__txt{font-size:13.4px;line-height:1.75;color:var(--texte-2);margin-top:7px;white-space:pre-line}
.po__act{display:flex;gap:8px;margin-top:13px}
.po__b{display:inline-flex;align-items:center;gap:7px;font-size:11.8px;font-weight:600;
  color:var(--texte-2);background:var(--gris-2);border:0;border-radius:20px;padding:7px 13px;
  cursor:pointer;transition:background .18s,color .18s}
.po__b:hover{background:#E8EFE7;color:var(--vert-fonce)}
.po__rep{list-style:none;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--gris-2);
  display:grid;gap:14px}
.po__rep li{display:grid;grid-template-columns:34px 1fr auto;gap:0 10px;align-items:center}
.po__rep li p{grid-column:2/-1;font-size:12.8px;line-height:1.65;color:var(--texte-2);margin-top:4px}
.po__form{margin-top:13px;padding-top:13px;border-top:1px solid var(--gris-2)}
.po__form textarea{width:100%;min-height:72px;margin-bottom:9px}

.cm-actifs{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.cm-actifs li{display:flex;align-items:center;gap:10px}
.cm-actifs__t{flex:1;min-width:0;display:flex;flex-direction:column}
.cm-actifs b{font-size:12.8px}
.cm-actifs i{font-style:normal;font-size:10.8px;color:var(--texte-3)}
.cm-actifs em{flex:none;font-style:normal;font-family:'Archivo',Arial,sans-serif;font-size:11px;
  font-weight:800;color:var(--vert);background:#F1F7F0;border-radius:20px;padding:4px 9px}

/* ---------- Membres ------------------------------------------------------- */
.cm-mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.cm-m{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--bord);
  border-radius:var(--r);padding:14px 16px}
.cm-m div{flex:1;min-width:0;display:flex;flex-direction:column}
.cm-m b{font-size:13.4px}
.cm-m span{font-size:11.6px;color:var(--texte-2);margin-top:2px}
.cm-m i{font-style:normal;font-size:11px;color:var(--texte-3)}

/* ---------- Événements et opportunités ------------------------------------ */
.cm-ev{display:grid;gap:10px}
.cm-ev article{display:flex;gap:15px;background:#fff;border:1px solid var(--bord);
  border-radius:var(--r);padding:14px 17px}
.cm-ev__d{flex:none;width:52px;height:56px;border-radius:11px;background:var(--vert-fonce);
  color:#fff;display:grid;place-items:center;align-content:center}
.cm-ev__d b{font-family:'Archivo',Arial,sans-serif;font-size:19px;line-height:1}
.cm-ev__d i{font-style:normal;font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  color:#C9DCC7;margin-top:2px}
.cm-ev article>div{flex:1;min-width:0}
.cm-ev article>div>b{display:block;font-family:'Archivo',Arial,sans-serif;font-size:14.5px}
.cm-ev article>div>span{display:block;font-size:11.6px;color:var(--texte-3);margin-top:3px}
.cm-ev article>div>p{font-size:12.6px;line-height:1.6;color:var(--texte-2);margin-top:6px}

.cm-opp{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.cm-opp li{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fff;
  border:1px solid var(--bord);border-radius:var(--r);padding:13px 16px}
.cm-opp b{font-size:13.6px}
.cm-opp span{flex:1;min-width:150px;font-size:11.6px;color:var(--texte-3)}

@media(max-width:980px){ .cm-grid{grid-template-columns:1fr} }