/* =======================
   AMAZZING FILTER — CSS FINAL (propre & rapide)
   ======================= */

/* Variables (couleurs/espacements) */
#af_form{
  --af-guide-color: #e9ebf3;
  --af-guide-x:     12px;
  --af-branch:      12px;
  --af-open-bg:     rgba(0,0,0,.045); /* fond du <li> ouvert */
  --af-uline:       #00FFB5;          /* trait vert */
  --af-card-gap:    8px;              /* espace blanc AVANT le bloc gris (ajustable) */
}

/* Lisibilité & états */
#af_form li.af-parent-category > label.af-radio-label{ cursor: pointer; }

/* parent ouvert = gras (nom + fallback) */
#af_form li.af-parent-category.is-open > label.af-radio-label,
#af_form li.af-parent-category.is-open > label.af-radio-label .name{
  font-weight: 700 !important;
}

/* feuille sélectionnée (radio coché) = gras (nom + compteur) */
#af_form label.af-radio-label input[type="radio"]:checked ~ .name,
#af_form label.af-radio-label input[type="radio"]:checked ~ .count{
  font-weight: 700 !important;
}

/* Taille des puces (radios) par niveau */
#af_form label.af-radio-label input[type="radio"]{ transform: scale(1.00); margin-right: 6px; }
#af_form ul.child-categories label.af-radio-label input[type="radio"]{ transform: scale(.90); }
#af_form ul.child-categories ul.child-categories label.af-radio-label input[type="radio"]{ transform: scale(.85); }
#af_form ul.child-categories ul.child-categories ul.child-categories label.af-radio-label input[type="radio"]{ transform: scale(.80); }

/* Guides (vertical + petit trait horizontal à hauteur de la puce) */
#af_form ul.child-categories{
  margin: 4px 0 8px var(--af-guide-x);
  padding-left: var(--af-guide-x);
  border-left: 2px solid var(--af-guide-color);
}
#af_form ul.child-categories > li > label.af-radio-label{
  position: relative;
  display: flex;
  align-items: center; /* centre la puce même si 2 lignes */
  padding: 0;
  background: none;
}
#af_form ul.child-categories > li > label.af-radio-label::before{
  content: "";
  position: absolute;
  left: calc(-1 * var(--af-guide-x));
  top: 50%;
  transform: translateY(-50%);
  width: var(--af-branch);
  height: 2px;
  background: var(--af-guide-color);
  pointer-events: none;
}

/* Typo des sous-catégories (cascade claire) */
#af_form ul.child-categories                         label.af-radio-label .name{ font-size: 92%; font-weight: 400; padding-left: 8px; }
#af_form ul.child-categories ul.child-categories     label.af-radio-label .name{ font-size: 88%; }
#af_form ul.child-categories ul.child-categories ul.child-categories label.af-radio-label .name{ font-size: 84%; }

/* Fond sur tout le bloc ouvert (le <li>) */
#af_form li.af-parent-category.is-open{
  background: var(--af-open-bg);
  border-radius: 8px;
  padding: 6px 8px;
  margin-top: var(--af-card-gap); /* espace blanc AVANT le bloc gris (NOUVEAU) */
}
#af_form li.af-parent-category.is-open > ul.child-categories{ margin-top: 6px; }

/* Trait vert animé sous la DERNIÈRE ligne du nom */
#af_form label.af-radio-label .name{
  position: relative;
  display: inline; /* indispensable pour getClientRects() multi-lignes */
}
#af_form label.af-radio-label .name::after{
  content: "";
  position: absolute;
  left: var(--u-x, 0);   /* posé par le JS */
  width: var(--u-w, 0);  /* posé par le JS */
  bottom: -3px;
  height: 2px;
  background: var(--af-uline);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .16s ease-out;
  pointer-events: none;
}
/* visible au hover/focus ET quand la catégorie est ouverte */
#af_form label.af-radio-label:hover .name::after,
#af_form label.af-radio-label:focus-visible .name::after,
#af_form li.af-parent-category.is-open > label.af-radio-label .name::after{
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce){
  #af_form label.af-radio-label .name::after{ transition: none; }
}

/* Remplacement visuel des icônes + / − par flèches (optionnel, tu peux retirer si tu veux garder l’origine) */
#af_form .icon-plus::before,
#af_form .expander.plus::before,
#af_form .af-toggle.plus::before{  content: "▾"; font-weight: 700; }
#af_form .icon-minus::before,
#af_form .expander.minus::before,
#af_form .af-toggle.minus::before{ content: "▴"; font-weight: 700; }

/* (option Font Awesome)
#af_form .icon-plus::before  { font-family:"FontAwesome"; content:"\f078"; }  /\* chevron-down *\/
#af_form .icon-minus::before { font-family:"FontAwesome"; content:"\f077"; }  /\* chevron-up   *\/
*/