/* css/besoin-card.css — carte d'un besoin, pliable (élément <details>).
   Classes préfixées bc- pour ne pas entrer en conflit avec components.css.
   Les couleurs reprennent vos variables si elles existent (--surface, --text, --muted, --border, --accent). */

.bc {
  --bc-bg: var(--surface, #fff);
  --bc-text: var(--text, #1c2230);
  --bc-muted: var(--muted, #5d6678);
  --bc-line: var(--border, #cfd4dc);
  --bc-accent: var(--accent, #1f3a5f);
  position: relative;
  margin: 0 0 14px;
  background: var(--bc-bg);
  color: var(--bc-text);
  border: 2px solid var(--bc-line);
  border-radius: 12px;
}
.bc[open] { margin-bottom: 34px; } /* place pour le bouton rond qui dépasse en bas */

/* ---- En-tête (cliquable) : ID / titre / catégorie - pays | priorité | budget | date | flèche ---- */
.bc-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
  align-items: center;
  gap: 8px 28px;
  padding: 16px 20px;
  border-radius: 10px;
  cursor: pointer;
  list-style: none;
}
.bc-head::-webkit-details-marker { display: none; }
.bc[open] > .bc-head { border-bottom: 2px solid var(--bc-line); border-radius: 10px 10px 0 0; }

.bc-id { display: grid; gap: 2px; min-width: 0; }
.bc-num { font-size: .8rem; color: var(--bc-muted); }
.bc-titre { font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.bc-cat { font-size: .9rem; color: var(--bc-muted); }
.bc-budget { display: grid; text-align: right; font-weight: 600; white-space: nowrap; }
.bc-budget small { font-size: .78rem; font-weight: 400; color: var(--bc-muted); }
.bc-date { display: grid; text-align: right; white-space: nowrap; }
.bc-date small { font-size: .78rem; color: var(--bc-muted); }
.bc-chev { color: var(--bc-muted); }
.bc[open] .bc-chev { transform: rotate(180deg); }

/* ---- Corps : description sur toute la largeur ---- */
.bc-body { padding: 18px 20px 36px; } /* le bas réserve la place du bouton rond */
.bc-label { margin: 0 0 6px; font-size: .8rem; color: var(--bc-muted); }
.bc-texte { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---- Bouton rond « cible avec flèche » (lien), visible seulement quand la carte est dépliée ----
   Il chevauche le bord bas de la carte. Pour le mettre à gauche : left: 16px; right: auto; */
.bc-cta {
  position: absolute; right: 16px; bottom: -22px;
  display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 50%; background: var(--bc-accent); color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  border: 0; cursor: pointer;
}
.bc-head:focus-visible, .bc-cta:focus-visible { outline: 2px solid var(--bc-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .bc-chev { transition: transform .2s; }
  .bc-cta { transition: transform .15s; }
  .bc-cta:hover { transform: scale(1.08); }
}

@media (max-width: 720px) {
  .bc-head { grid-template-columns: auto auto auto auto; justify-content: space-between; }
  .bc-id { grid-column: 1 / -1; }
  .bc-date { text-align: left; }
}