/* =====================================================================
   VISION PME — Modules communautaires
   Aide & FAQ, Entraide entre membres, Rencontrer un expert.
   Chargé APRÈS app.css : ce fichier n'écrase rien, il complète.
   ===================================================================== */

/* ---------- Avatar avec photo ----------
   Requis par UI.avatar() : la variante « initiales » vit déjà dans
   base.css, la variante « photo téléversée » manquait. */
.avatar.has-photo { background-color: var(--surface-3); background-size: cover; background-position: center; color: transparent; }

/* ---------- Aide & FAQ (accordéon) ---------- */
.faq-cat { display: grid; gap: 10px; }
.faq-cat + .faq-cat { margin-top: var(--s-6); }
.faq-cat-head { display: flex; align-items: center; gap: 9px; font: 700 1rem/1.2 var(--font-display); color: var(--text); margin-bottom: 2px; }
.faq-cat-head .icon { width: 18px; height: 18px; color: var(--green-text); }
.faq-item { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-1); overflow: hidden; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.faq-item:hover { border-color: var(--border-strong); }
.faq-item.open { border-color: rgba(0, 206, 134, 0.4); box-shadow: var(--sh-sm); }
.faq-q { width: 100%; display: flex; align-items: center; gap: 12px; padding: 15px 18px; background: none; border: none; cursor: pointer; text-align: left; font: 600 0.9rem/1.45 var(--font-body); color: var(--text); }
.faq-q .chev { margin-left: auto; flex: none; width: 17px; height: 17px; color: var(--text-subtle); transition: transform var(--dur) var(--ease); }
.faq-item.open .faq-q { color: var(--green-text); }
.faq-item.open .faq-q .chev { transform: rotate(180deg); color: var(--green-text); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > p { overflow: hidden; margin: 0; padding: 0 18px; font-size: 0.86rem; color: var(--text-muted); line-height: 1.65; }
.faq-a > p b { color: var(--text); }
.faq-item.open .faq-a > p { padding: 0 18px 16px; }
.faq-contact { padding: 24px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: var(--s-6); }

/* ---------- Pastille d'en-tête de section (Entraide / Experts / FAQ) ---------- */
.feature-intro-ico { flex: none; width: 52px; height: 52px; border-radius: var(--r-md); display: grid; place-items: center; }
.feature-intro-ico .icon { width: 24px; height: 24px; }

/* ---------- Entraide entre membres ---------- */
.bounty-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--s-4); margin-top: var(--s-4); }
.bounty-card {
  display: flex; flex-direction: column; gap: 11px;
  padding: var(--s-5);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur), border-color var(--dur);
}
.bounty-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: rgba(0, 206, 134, 0.4); }
.bounty-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bounty-card h3 { font-size: 1rem; line-height: 1.35; }
.bounty-card > p { font-size: 0.82rem; color: var(--text-muted); line-height: 1.55; flex: 1; }
.bounty-reward { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill); font: 700 0.78rem/1 var(--font-body); white-space: nowrap; }
.bounty-reward .icon { width: 15px; height: 15px; }
.bounty-reward.coins { background: var(--ok-soft); color: var(--green-text); }
.bounty-reward.cash { background: var(--info-soft); color: var(--info); }
.bounty-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-top: 11px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.bounty-author { display: flex; align-items: center; gap: 9px; min-width: 0; }
.bounty-author .nm { font: 600 0.78rem/1.2 var(--font-body); }
.bounty-author .mt { font-size: 0.68rem; color: var(--text-subtle); }

/* Mention de gré à gré : l'entraide est un babillard, la plateforme
   ne traite pas le paiement et n'arbitre pas les litiges. */
.bounty-disclaimer {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 11px 14px; margin-top: var(--s-4);
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: 0.78rem; line-height: 1.55; color: var(--text-muted);
}
.bounty-disclaimer .icon { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--text-subtle); }
.bounty-note { font-size: 0.7rem; line-height: 1.45; color: var(--text-subtle); }

/* ---------- Rencontrer un expert ---------- */
.expert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s-4); margin-top: var(--s-4); }
.expert-card {
  display: flex; flex-direction: column; gap: 13px;
  padding: var(--s-5);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur), border-color var(--dur);
}
.expert-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: rgba(142, 111, 247, 0.4); }
.expert-card.busy { opacity: 0.72; }
.expert-head { display: flex; align-items: center; gap: 13px; }
.expert-name { display: flex; align-items: center; gap: 6px; font: 600 0.98rem/1.25 var(--font-display); }
.expert-verif { display: inline-grid; place-items: center; color: var(--green-text); }
.expert-verif .icon { width: 16px; height: 16px; }
.expert-title { font-size: 0.76rem; color: var(--text-subtle); margin-top: 2px; }
.expert-bio { font-size: 0.82rem; color: var(--text-muted); line-height: 1.55; flex: 1; }
.expert-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.expert-tags .chip { padding: 4px 11px; font-size: 0.68rem; }
.expert-stats { display: flex; gap: var(--s-4); flex-wrap: wrap; font-size: 0.74rem; color: var(--text-muted); }
.expert-stats span { display: inline-flex; align-items: center; gap: 5px; }
.expert-stats .icon { width: 14px; height: 14px; }
.expert-stats .mut { color: var(--text-subtle); }
.expert-stats .dot { width: 7px; height: 7px; border-radius: 50%; }
.expert-dispo { color: var(--green-text); } .expert-dispo .dot { background: var(--green); }
.expert-busy { color: var(--warn); } .expert-busy .dot { background: var(--warn); }
.expert-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-top: 12px; border-top: 1px solid var(--border); }
.expert-rate b { font: 700 1.15rem/1 var(--font-display); color: var(--text); }
.expert-rate span { font-size: 0.72rem; color: var(--text-subtle); }

/* Emplacement réservé à la mention de retenue destinée au partenaire.
   Masqué côté membre : le membre voit son prix, point. */
.expert-retenue { display: none; font-size: 0.7rem; line-height: 1.45; color: var(--text-subtle); }
.expert-retenue.show { display: block; }

/* deux actions sur la carte expert */
.expert-actions { display: grid; gap: 8px; margin-top: var(--s-3); }

/* modale « poser une question » / « rendez-vous » */
.q-flow { display: grid; gap: var(--s-5); }
.q-section { display: grid; gap: 10px; }
.q-label { font: 600 0.85rem/1.3 var(--font-body); color: var(--text); }
.q-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.q-chips .chip .icon { width: 14px; height: 14px; }
.recorder { display: grid; gap: 12px; padding: var(--s-4); border: 1px dashed var(--border-strong); border-radius: var(--r-md); background: var(--surface-2); }
.recorder-preview { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-sm); background: var(--night); display: grid; place-items: center; overflow: hidden; }
.recorder-preview.audio { aspect-ratio: auto; min-height: 64px; padding: var(--s-3); }
.recorder-preview .rec-hint { color: rgba(255, 255, 255, 0.5); font-size: 0.8rem; display: flex; align-items: center; gap: 8px; }
.recorder-preview .rec-hint .icon { width: 18px; height: 18px; }
.recorder-preview video { width: 100%; height: 100%; object-fit: cover; }
.recorder-preview audio { width: 100%; }
.recorder-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); display: inline-block; }
.rec-pulse { animation: rec-blink 1s infinite; }
@keyframes rec-blink { 50% { opacity: 0.3; } }
.q-status { display: inline-flex; align-items: center; gap: 7px; font-size: 0.78rem; color: var(--green-text); }
.q-status .icon { width: 15px; height: 15px; }

/* créneaux de rendez-vous */
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.slot-opt { display: grid; gap: 3px; padding: 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1.5px solid var(--border); cursor: pointer; font-family: inherit; transition: all var(--dur-fast); text-align: center; }
.slot-opt:hover { border-color: var(--green-deep); }
.slot-opt.active { border-color: var(--green); background: var(--ok-soft); }
.slot-opt b { font: 600 0.82rem/1.2 var(--font-body); color: var(--text); }
.slot-opt span { font-size: 0.72rem; color: var(--text-subtle); }

/* options de durée (modale expert) */
.duree-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.duree-opt {
  display: grid; gap: 3px; justify-items: center;
  padding: var(--s-4); border-radius: var(--r-md);
  background: var(--surface-2); border: 1.5px solid var(--border);
  cursor: pointer; font-family: inherit; transition: all var(--dur-fast);
}
.duree-opt:hover { border-color: var(--green-deep); }
.duree-opt.active { border-color: var(--green); background: var(--ok-soft); box-shadow: var(--glow-brand); }
.duree-opt b { font: 700 1rem var(--font-display); color: var(--text); }
.duree-opt span { font-size: 0.72rem; color: var(--green-text); font-weight: 600; }
.expert-cost-row { display: flex; align-items: center; justify-content: space-between; padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: var(--ok-soft); font-size: 0.9rem; }
.expert-cost-row b { font: 700 1.25rem/1 var(--font-display); color: var(--green-text); }