/* ============================================
   ARVOLUOTTO — ukk.css
   Styles propres à la page FAQ (UKK) uniquement.
   ============================================ */

/* ---------- RECHERCHE ---------- */
.faq-search-wrap { max-width: 560px; margin: 0 auto; position: relative; }
.faq-search-wrap svg {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: #9AA79D; pointer-events: none;
}
#faqSearch {
  width: 100%;
  font-family: var(--police-texte);
  font-size: 15px;
  padding: 14px 18px 14px 48px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-pill);
  background: #FFFFFF;
  color: var(--texte);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
#faqSearch:focus { border-color: var(--vert-pur); box-shadow: 0 0 0 3px rgba(0,166,81,0.15); }
#faqSearch::placeholder { color: #9AA79D; }

/* ---------- NAV CATÉGORIES (pills) ---------- */
.faq-categories-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 28px 0 0;
}
.faq-categories-nav a {
  font-size: 14px;
  font-weight: 600;
  color: var(--vert-fonce);
  background: #FFFFFF;
  border: 1px solid var(--bordure);
  padding: 9px 18px;
  border-radius: var(--rayon-pill);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.faq-categories-nav a:hover { background: var(--vert-pur); color: #fff; border-color: var(--vert-pur); }

/* ---------- CATÉGORIE ---------- */
.faq-category { max-width: 780px; margin: 0 auto 64px; scroll-margin-top: 104px; }
.faq-category:last-child { margin-bottom: 0; }
.faq-category-head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.faq-category-head .icon-badge { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; }
.faq-category-head .icon-badge svg { width: 20px; height: 20px; }
.faq-category-head h2 { font-size: 20px; color: var(--texte); }
.faq-category-head .count { font-size: 13px; color: #9AA79D; margin-top: 2px; }

/* ---------- ACCORDÉON : voir style.css (global) ---------- */

/* ---------- Résultat de recherche vide ---------- */
.faq-no-results {
  display: none;
  text-align: center;
  padding: 40px 20px;
  color: #9AA79D;
  font-size: 15px;
}
.faq-no-results.is-visible { display: block; }

/* ---------- Responsive ---------- */
@media (max-width: 560px) {
  .faq-category-head h2 { font-size: 18px; }
  .faq-question { font-size: 14px; padding: 16px 18px; }
}