/* ============================================================
   Collectes (espace membres)
   Le bandeau vient de bandeau-membre.css : ici, ce qui lui est
   propre - chiffres, pastilles de besoin, cartes de collecte,
   appel au don et fenêtre de participation.
   ============================================================ */

.co-bouton{
  display:inline-flex; align-items:center; gap:9px; padding:9px 18px; border-radius:999px;
  background:var(--gold); color:var(--green-deep, #06441C); font-weight:700; font-size:0.86rem;
}
.co-bouton:hover{opacity:0.9;}

/* ===== Chiffres ===== */
.co-chiffres{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-bottom:24px;}
.co-chiffre{
  display:flex; align-items:center; gap:13px; padding:15px 18px; border-radius:16px;
  background:var(--surface); border:1px solid var(--line);
}
.co-chiffre-ic{
  width:42px; height:42px; flex:none; border-radius:12px; display:grid; place-items:center;
  background:rgba(var(--green-rgb, 23,118,59),0.12); color:var(--green); font-size:20px;
}
.co-chiffre-nb{font-family:var(--display); font-size:1.3rem; font-weight:700; color:var(--text-heading); line-height:1.1;}
.co-chiffre-label{font-size:0.8rem; color:var(--text-muted);}

/* ===== En-têtes de section ===== */
.co-tete{display:flex; align-items:center; gap:13px; margin-bottom:14px;}
.co-tete-ic{
  width:40px; height:40px; flex:none; border-radius:12px; display:grid; place-items:center;
  background:rgba(var(--green-rgb, 23,118,59),0.12); color:var(--green); font-size:19px;
}
.co-tete-titre{font-family:var(--display); font-size:1.2rem; font-weight:700; color:var(--text-heading); line-height:1.2;}
.co-tete-sous{font-size:0.86rem; color:var(--text-muted);}

/* ===== Pastilles de besoin ===== */
.co-cats{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:26px;}
.co-cat{
  display:inline-flex; align-items:center; gap:9px; padding:10px 18px; border-radius:14px; cursor:pointer;
  border:1.5px solid var(--line); background:var(--surface); color:var(--text-heading);
  font-family:var(--body); font-size:0.85rem; font-weight:600;
}
.co-cat .ti{font-size:17px; color:var(--text-muted);}
.co-cat.actif{background:var(--green-deep); border-color:var(--green-deep); color:#FFFFFF;}
.co-cat.actif .ti{color:var(--gold);}
.co-cat:hover:not(.actif){border-color:var(--green); color:var(--green);}
.co-cat:hover:not(.actif) .ti{color:var(--green);}

/* ===== Corps : collectes à gauche, appel au don à droite ===== */
.co-corps{display:grid; grid-template-columns:minmax(0,1fr); gap:18px; align-items:start; padding-bottom:50px;}
@media(min-width:1240px){ .co-corps{grid-template-columns:minmax(0,1fr) 300px;} }
.co-grille{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px;}

/* ===== Carte d'une collecte ===== */
.co-carte{
  display:flex; flex-direction:column; height:100%; overflow:hidden; text-align:left;
  background:var(--surface); border:1px solid var(--line); border-radius:18px; cursor:pointer;
  font-family:var(--body); padding:0;
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.co-carte:hover{border-color:var(--gold); box-shadow:0 12px 28px rgba(var(--green-deep-rgb, 6,68,28),0.1); transform:translateY(-3px);}
.co-visuel{position:relative; width:100%; aspect-ratio:16/10; background:var(--paper-alt); overflow:hidden;}
.co-visuel img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.co-visuel-vide{position:absolute; inset:0; display:grid; place-items:center; font-size:30px; color:var(--text-accent);}
.co-etat{
  position:absolute; top:10px; left:10px; display:inline-flex; align-items:center; gap:7px;
  background:var(--green-deep); color:#FFFFFF; border-radius:999px; padding:5px 12px; font-size:0.72rem; font-weight:600;
}
.co-etat::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--gold);}
.co-etat.close{background:rgba(6,28,14,0.72);}
.co-etat.close::before{background:#C9D6CE;}
.co-carte-corps{padding:14px 16px 16px; display:flex; flex-direction:column; gap:7px; flex:1;}
.co-carte-titre{
  font-family:var(--display); font-size:1rem; font-weight:700; color:var(--text-heading); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.co-carte-desc{
  font-size:0.84rem; color:var(--text-muted); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.co-barre{display:flex; align-items:center; gap:10px; margin-top:6px;}
.co-piste{flex:1; height:8px; border-radius:999px; background:var(--paper-alt); overflow:hidden;}
.co-piste span{display:block; height:100%; border-radius:999px; background:var(--green);}
.co-pourcent{font-family:var(--mono); font-size:0.76rem; font-weight:700; color:var(--text-heading);}
.co-meta{display:flex; gap:14px; flex-wrap:wrap; font-size:0.76rem; color:var(--text-muted);}
.co-meta span{display:inline-flex; align-items:center; gap:5px;}
.co-meta .ti{font-size:14px;}
.co-savoir{
  margin-top:auto; width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 16px; border-radius:12px; border:0; cursor:pointer; margin-top:12px;
  background:var(--green-deep); color:#FFFFFF; font-family:var(--body); font-size:0.84rem; font-weight:600;
}
.co-carte:hover .co-savoir{background:var(--green);}
:root[data-theme="dark"] .co-savoir{background:var(--green-soft, #7FD9A0); color:var(--green-deep, #06441C);}
.co-vide{grid-column:1 / -1; padding:40px 0; text-align:center; color:var(--text-muted); font-family:var(--mono); font-size:0.85rem;}

/* ===== Appel au don ===== */
.co-appel{
  text-align:center; padding:26px 22px; border-radius:20px;
  background:linear-gradient(180deg, #FDF6E6 0%, var(--surface) 100%); border:1px solid rgba(248,183,24,0.45);
}
:root[data-theme="dark"] .co-appel{background:linear-gradient(180deg, rgba(248,183,24,0.12) 0%, var(--surface) 100%);}
@media(min-width:1240px){ .co-appel{position:sticky; top:16px;} }
.co-appel-ic{
  width:54px; height:54px; margin:0 auto 14px; border-radius:16px; display:grid; place-items:center;
  background:rgba(var(--green-rgb, 23,118,59),0.12); color:var(--green); font-size:26px;
}
.co-appel-titre{font-family:var(--display); font-size:1.2rem; font-weight:700; color:var(--text-heading); line-height:1.3;}
.co-appel-texte{font-size:0.86rem; color:var(--text-muted); margin:12px 0 18px;}
.co-appel-bouton{
  display:inline-flex; align-items:center; justify-content:center; gap:9px; width:100%;
  padding:12px 20px; border-radius:999px; background:var(--gold); color:var(--green-deep, #06441C); font-weight:700; font-size:0.88rem;
}
.co-appel-bouton:hover{opacity:0.9;}

/* ===== Fenêtre de participation ===== */
.co-voile{
  position:fixed; inset:0; z-index:1500; background:rgba(6,28,14,0.55);
  display:none; align-items:flex-start; justify-content:center; padding:32px 16px; overflow-y:auto;
}
.co-voile.ouvert{display:flex;}
.co-fiche{width:min(680px,100%); background:var(--surface); border-radius:18px; overflow:hidden;
  box-shadow:0 24px 60px rgba(6,28,14,0.35);}
.co-fiche-tete{
  display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line);
}
.co-fiche-titre{font-family:var(--display); font-weight:700; color:var(--text-heading); font-size:1.02rem;}
.co-fiche-fermer{
  margin-left:auto; width:34px; height:34px; border-radius:50%; cursor:pointer; display:grid; place-items:center;
  border:1px solid var(--line); background:var(--surface); color:var(--text-muted); font-size:17px;
}
.co-fiche-fermer:hover{border-color:var(--green); color:var(--green);}
.co-fiche-corps{padding:6px 20px 22px;}
/* Le bloc de participation garde ses styles : dans la fenêtre, il n'a
   plus besoin de son propre cadre. */
.co-fiche-corps .collecte{border:0; padding:14px 0; margin:0;}
/* L'en-tête porte déjà le titre et le type. */
.co-fiche-corps .collecte-titre{display:none;}
body.co-ouvert{overflow:hidden;}