/* ── Cards groupe ─────────────────────────────────── */
.gc {background:var(--sur);border-radius:var(--radius);border:1px solid var(--line);overflow:hidden;box-shadow:var(--sh);transition:box-shadow .2s,transform .15s;cursor:pointer}
.gc:hover{box-shadow:var(--sh2);transform:translateY(-1px)}
.gc__banner{height:52px;background:linear-gradient(135deg,var(--brand),var(--b2));display:flex;align-items:center;justify-content:center;font-size:1.5rem}
.gc__body{padding:.8rem .9rem}
.gc__name{font:600 .9rem/1.3 'Lora',serif;color:var(--ink);margin-bottom:.2rem}
.gc__desc{font:400 .72rem/1.5 'DM Sans',sans-serif;color:var(--soft);margin-bottom:.5rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gc__footer{padding:.5rem .9rem;border-top:1px solid var(--line);background:var(--bg);display:flex;align-items:center;justify-content:space-between}
.gc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.g-filter{padding:.3rem .8rem;border-radius:20px;border:1.5px solid var(--line);background:var(--sur);font:500 .75rem/1 'DM Sans',sans-serif;color:var(--muted);cursor:pointer;transition:all .15s}
.g-filter:hover{border-color:var(--b2);color:var(--brand)}
.g-filter.active{background:var(--brand);color:#fff;border-color:var(--brand)}

/* ── Onglets admin groupe ─────────────────────────── */
.gr-tabs{display:flex;gap:0;border-bottom:2px solid var(--line);margin-bottom:0}
.gr-tab{padding:.6rem 1rem;font:600 .8rem/1 'DM Sans',sans-serif;color:var(--soft);border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s}
.gr-tab.active{color:var(--brand);border-bottom-color:var(--brand)}

/* ── Modal groupe ─────────────────────────────────── */
.gm-overlay{position:fixed;inset:0;background:rgba(11,18,32,.45);z-index:2000;display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;pointer-events:none;transition:opacity .2s}
.gm-overlay.open{opacity:1;pointer-events:all}
.gm{background:var(--sur);border-radius:var(--radius);width:100%;max-width:580px;max-height:88vh;overflow-y:auto;box-shadow:var(--sh2);transform:translateY(12px);transition:transform .2s}
.gm-overlay.open .gm{transform:translateY(0)}
.gm__head{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem .75rem;border-bottom:1px solid var(--line)}
.gm__emoji{width:44px;height:44px;border-radius:8px;background:var(--bbg);display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0}
.gm__close{margin-left:auto;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--bg);font-size:1.1rem;color:var(--muted);cursor:pointer;flex-shrink:0}
.gm__body{padding:1rem 1.25rem}

/* Membres liste */
.mb-row{display:flex;align-items:center;gap:.65rem;padding:.5rem 0;border-bottom:1px solid var(--line)}
.mb-row:last-child{border-bottom:none}
.mb-role{font:600 .6rem/1 'DM Sans',sans-serif;padding:.15rem .45rem;border-radius:20px}
.mb-role.admin{background:#fef3c7;color:#92400e}
.mb-role.membre{background:var(--bbg);color:var(--brand)}

/* Chat groupe */
.chat-wrap{display:flex;flex-direction:column;height:340px}
.chat-msgs{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem;padding:.5rem 0}
.chat-msg{max-width:80%;padding:.5rem .75rem;border-radius:12px;font:.78rem/1.5 'DM Sans',sans-serif}
.chat-msg.mine{align-self:flex-end;background:var(--brand);color:#fff;border-radius:12px 12px 4px 12px}
.chat-msg.other{align-self:flex-start;background:var(--bg);border:1px solid var(--line);border-radius:12px 12px 12px 4px}
.chat-msg__author{font:600 .6rem/1 'DM Sans',sans-serif;opacity:.7;margin-bottom:.2rem}
.chat-msg__time{font:.58rem/1 'DM Sans',sans-serif;opacity:.6;text-align:right;margin-top:.15rem}
.chat-input-wrap{display:flex;gap:.5rem;padding-top:.65rem;border-top:1px solid var(--line);margin-top:.5rem}
.chat-input{flex:1;padding:.5rem .75rem;border:1.5px solid var(--line);border-radius:20px;font:.82rem/1 'DM Sans',sans-serif;outline:none;background:var(--bg);color:var(--ink);transition:border-color .2s}
.chat-input:focus{border-color:var(--b2);background:var(--sur)}

/* Formulaire */
.fi{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.65rem}
.fl{font:600 .75rem/1 'DM Sans',sans-serif;color:var(--muted)}
.fin{padding:.55rem .75rem;border:1.5px solid var(--line);border-radius:var(--radius-sm);font:.85rem/1 'DM Sans',sans-serif;color:var(--ink);background:var(--bg);outline:none;transition:border-color .2s}
.fin:focus{border-color:var(--b2);background:var(--sur)}

/* ══════════════════════════════════════════════════
   ENRICHISSEMENTS GROUPES v2 — design orange groupe
   ══════════════════════════════════════════════════ */

/* Variables orange groupe */
:root {
  --org:#ff6a1a;
  --orgDk:#c43b00;
  --orgBg:#fff7ed;
  --orgLine:#fed7aa;
}

/* ── Hero bandeau groupes ────────────────────────── */
.g-hero {
  background: linear-gradient(135deg, #3d1600 0%, #7c2d00 50%, var(--orgDk) 100%);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.25rem;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.g-hero::before {
  content: '';
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: rgba(255,106,26,.15);
  top: -100px; right: -80px;
  pointer-events: none;
}
.g-hero-left {}
.g-hero-tag {
  display: inline-flex; align-items: center; gap: .35rem;
  background: rgba(255,106,26,.2); border: 1px solid rgba(255,106,26,.4);
  border-radius: 20px; padding: .25rem .7rem;
  font: 700 .58rem/1 'DM Sans',sans-serif; color: #ffb380;
  letter-spacing: .07em; text-transform: uppercase; margin-bottom: .6rem;
}
.g-hero-title {
  font: 700 1.35rem/1.2 'Lora',serif; color: #fff; margin-bottom: .35rem;
}
.g-hero-title em { font-style: italic; color: #ffb380; }
.g-hero-sub {
  font: 400 .78rem/1.55 'DM Sans',sans-serif;
  color: rgba(255,255,255,.6); max-width: 42ch;
}
.g-hero-stats {
  display: flex; gap: 1.5rem; flex-wrap: wrap; flex-shrink: 0;
}
.g-hero-stat { text-align: center; }
.g-hero-stat-n {
  font: 700 1.5rem/1 'Lora',serif; color: #fff; display: block;
}
.g-hero-stat-l {
  font: 400 .62rem/1.3 'DM Sans',sans-serif;
  color: rgba(255,255,255,.5); margin-top: .2rem;
}
.g-hero-cta {
  display: inline-flex; align-items: center; gap: .4rem;
  background: #fff; color: var(--orgDk);
  padding: .6rem 1.25rem; border-radius: 24px;
  font: 700 .8rem/1 'DM Sans',sans-serif;
  transition: all .2s; flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.g-hero-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.3); }

/* ── Filtres enrichis ─────────────────────────────── */
.g-filter-wrap {
  display: flex; gap: .4rem; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  background: var(--sur); border-radius: var(--radius);
  border: 1px solid var(--line); padding: .75rem 1rem;
  margin-bottom: 1rem;
}
.g-filters-left { display: flex; gap: .4rem; flex-wrap: wrap; }

/* Filtre organisationnel = orange */
.g-filter[data-t="organisationnel"]:hover { border-color: var(--org); color: var(--orgDk); }
.g-filter[data-t="organisationnel"].active { background: var(--org); border-color: var(--org); }
.g-filter[data-t="mes"].active { background: #7c3aed; border-color: #7c3aed; }

/* ── Cards groupe enrichies ──────────────────────── */
.gc {
  border-radius: 14px !important;
  border: 1.5px solid var(--line) !important;
  transition: all .22s !important;
}
.gc:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 28px rgba(11,18,32,.12) !important;
}

/* Bannière colorée selon type — injectée via JS data-type */
.gc[data-type="organisationnel"] .gc__banner {
  background: linear-gradient(135deg, var(--orgDk), var(--org)) !important;
}
.gc[data-type="thematique"] .gc__banner {
  background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
}
.gc[data-type="geographique"] .gc__banner {
  background: linear-gradient(135deg, #0369a1, #38bdf8) !important;
}

/* Barre colorée en bas de la card selon type */
.gc::after {
  content: '';
  display: block;
  height: 3px;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(90deg, var(--brand), var(--b2));
  opacity: 0;
  transition: opacity .2s;
}
.gc:hover::after { opacity: 1; }
.gc[data-type="organisationnel"]:hover::after { background: linear-gradient(90deg, var(--orgDk), var(--org)); }
.gc[data-type="thematique"]:hover::after { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
.gc[data-type="geographique"]:hover::after { background: linear-gradient(90deg, #0369a1, #38bdf8); }

/* Nb membres mis en valeur */
.gc__nb {
  font: 700 .65rem/1 'DM Sans',sans-serif;
  color: var(--soft);
  display: flex; align-items: center; gap: .25rem;
}

/* ── Section titre enrichi ───────────────────────── */
.g-section-title {
  font: 700 1rem/1 'Lora',serif; color: var(--ink);
  padding: .25rem 0; margin-bottom: .85rem;
  display: flex; align-items: center; gap: .5rem;
  border-bottom: 2px solid var(--b100);
}
.g-section-title.org { border-bottom-color: var(--orgLine); }
.g-section-count {
  margin-left: auto;
  font: 600 .65rem/1 'DM Sans',sans-serif;
  color: var(--soft); background: var(--bg);
  padding: .2rem .55rem; border-radius: 20px;
  border: 1px solid var(--line);
}

/* ── Widget sidebar enrichi ──────────────────────── */
.g-widget-groupe-row {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .9rem; border-bottom: 1px solid var(--line);
  cursor: pointer; transition: background .15s;
}
.g-widget-groupe-row:last-child { border-bottom: none; }
.g-widget-groupe-row:hover { background: var(--bbg); }
.g-widget-groupe-emoji {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--bbg); display: flex; align-items: center;
  justify-content: center; font-size: 1rem; flex-shrink: 0;
}
.g-widget-groupe-name {
  font: 600 .78rem/1.2 'DM Sans',sans-serif; color: var(--ink);
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.g-widget-groupe-role {
  font: 600 .58rem/1 'DM Sans',sans-serif;
  padding: .18rem .45rem; border-radius: 20px; flex-shrink: 0;
}
.g-widget-groupe-role.admin { background: #fef3c7; color: #92400e; }
.g-widget-groupe-role.membre { background: var(--bbg); color: var(--brand); }

/* ── Lien découvrir (bandeau bas de page) ────────── */
.g-discover-banner {
  margin-top: 2rem;
  background: linear-gradient(135deg, var(--orgBg), #ffe8d6);
  border: 1.5px solid var(--orgLine); border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.g-discover-banner-text {
  flex: 1;
  font: 400 .82rem/1.6 'DM Sans',sans-serif; color: var(--orgDk);
}
.g-discover-banner-text strong { font-weight: 700; display: block; margin-bottom: .2rem; font-size: .9rem; }
.g-discover-link {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--org); color: #fff;
  padding: .55rem 1.1rem; border-radius: 20px;
  font: 600 .78rem/1 'DM Sans',sans-serif; transition: all .2s; flex-shrink: 0;
}
.g-discover-link:hover { background: var(--orgDk); transform: translateY(-1px); }

/* ── Créer groupe modal enrichie ─────────────────── */
.gm[data-modal="create"] .gm__head {
  background: linear-gradient(135deg, var(--orgBg), #ffe8d6);
  border-bottom-color: var(--orgLine);
}
.gm[data-modal="create"] .gm__emoji {
  background: var(--org); font-size: 1.6rem;
}

/* ── Vide state ──────────────────────────────────── */
.g-empty {
  text-align: center; padding: 3rem 1.5rem;
  color: var(--soft); font: 400 .85rem/1.7 'DM Sans',sans-serif;
}
.g-empty-ico { font-size: 2.5rem; display: block; margin-bottom: .75rem; }
.g-empty-link {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .85rem; color: var(--org); font-weight: 600;
  font-size: .82rem; border-bottom: 1px solid var(--orgLine);
  transition: color .15s;
}
.g-empty-link:hover { color: var(--orgDk); }

/* ── Responsive ──────────────────────────────────── */
@media(max-width:700px) {
  .g-hero { padding: 1.1rem 1.25rem; }
  .g-hero-stats { gap: 1rem; }
  .g-hero-title { font-size: 1.1rem; }
  .g-filter-wrap { padding: .6rem .75rem; }
}