/* ═══════════════════════════════════════════════════════════════════════════
   FAQ : partagé entre faq.html (page publique) et staff-hh-faq.html (aperçu
   de ce que voient les membres, sans dupliquer le style ailleurs).
   ═══════════════════════════════════════════════════════════════════════════ */

.fq-recherche{
  display:flex; align-items:center; gap:.5rem; max-width:460px;
  padding:.65rem .95rem; border-radius:12px; margin-bottom:1.5rem;
  background:var(--background-secondary); border:1px solid var(--border-color);
}
.fq-recherche:focus-within{ border-color:var(--primary-color); }
.fq-recherche .material-symbols-outlined{ color:var(--text-secondary); font-size:1.15rem; }
.fq-recherche input{
  flex:1; min-width:0; border:none; background:none; outline:none;
  font-family:inherit; font-size:.9rem; color:var(--text-primary);
}

.fq-liste{ display:flex; flex-direction:column; gap:.6rem; max-width:78ch; }

/* <details> natif : le repli fonctionne sans JavaScript, et le navigateur
   gère seul le clavier et la recherche dans la page. */
.fq-item{
  background:var(--background-secondary); border:1px solid var(--border-color);
  border-radius:14px; overflow:hidden;
}
.fq-item[open]{ border-color:var(--primary-color); }
.fq-item summary{
  display:flex; align-items:center; gap:.7rem; cursor:pointer;
  padding:1rem 1.2rem; font-weight:700; font-size:.95rem; list-style:none;
}
.fq-item summary::-webkit-details-marker{ display:none; }
.fq-item summary::after{
  content:'expand_more'; font-family:'Material Symbols Outlined';
  margin-left:auto; color:var(--text-secondary); transition:transform .2s ease;
}
.fq-item[open] summary::after{ transform:rotate(180deg); }
.fq-item summary:hover{ color:var(--primary-color); }
.fq-reponse{ padding:0 1.2rem 1.15rem; color:var(--text-secondary); line-height:1.75; font-size:.9rem; }
.fq-reponse p + p{ margin-top:.7rem; }

.fq-cat{
  font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  padding:.18rem .45rem; border-radius:5px; flex:none;
  background:rgba(99,102,241,.14); color:var(--primary-color);
}

/* Bloc « poser une question », en bas : on lit d'abord, on demande ensuite. */
.fq-demande{
  margin-top:2rem; max-width:78ch; padding:1.4rem;
  background:linear-gradient(135deg, rgba(99,102,241,.10), rgba(139,92,246,.06));
  border:1px solid rgba(99,102,241,.3); border-radius:18px;
}
.fq-demande h2{ font-size:1.1rem; font-weight:900; margin-bottom:.4rem; }
.fq-demande p{ font-size:.87rem; color:var(--text-secondary); line-height:1.6; margin-bottom:1rem; }
.fq-champ{
  width:100%; padding:.8rem 1rem; border-radius:12px; resize:vertical; min-height:92px;
  font-family:inherit; font-size:.92rem; color:var(--text-primary);
  background:var(--background-secondary); border:1px solid var(--border-color);
}
.fq-champ:focus{ outline:none; border-color:var(--primary-color); }
.fq-pied{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin-top:.7rem; }
.fq-compte{ font-size:.78rem; color:var(--text-secondary); margin-left:auto; }
.fq-btn{
  display:inline-flex; align-items:center; gap:.45rem; cursor:pointer;
  padding:.7rem 1.3rem; border-radius:11px; border:none; font-family:inherit;
  font-size:.88rem; font-weight:800; color:#fff; background:var(--gradient-primary);
}
.fq-btn:disabled{ opacity:.5; cursor:not-allowed; }
.fq-msg{ display:none; margin-top:.8rem; padding:.7rem .95rem; border-radius:11px; font-size:.87rem; }
.fq-msg.show{ display:block; }
.fq-msg.ok{ background:rgba(34,197,94,.14); border:1px solid rgba(34,197,94,.4); color:#4ade80; }
.fq-msg.ko{ background:rgba(248,113,113,.14); border:1px solid rgba(248,113,113,.4); color:#fca5a5; }