/* ===== AFO – Advanced Filters (sidebar) ===== */

.afo-filters-block{
  --afo-purple:#4d2c7a;
  --afo-gray-bg:#f5f5f7;
  --afo-border:#d4d4de;

  font-family:'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.afo-filters-form{ margin:0; }

/* =========================================================
   Accordéon <1024px (WCAG)
   ========================================================= */

.afo-filters-accordion{
  border: 1px solid var(--global-gray-400);
  border-radius:3px;
  background:#fff;
  overflow:hidden;
}

.afo-filters-accordion > summary{ list-style:none; }
.afo-filters-accordion > summary::-webkit-details-marker{ display:none; }
.afo-filters-accordion > summary::marker{ content:""; }

.afo-filters-accordion__summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  min-height:48px;
  padding:14px 16px;

  cursor:pointer;
  user-select:none;

  font-family:'BBB Poppins TN Display', Helvetica, Arial;
  font-size:22px;
  font-weight:700;
  line-height:1.1;
  color:var(--global-palette2);

  background:var(--global-palette9);
}

.afo-filters-accordion__summary::after{
  content:"";
  width:24px;
  height:24px;
  flex:0 0 24px;

  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%2333224D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:18px 18px;

  transform:rotate(0deg);
  transition:transform .18s ease;
}

.afo-filters-accordion[open] > .afo-filters-accordion__summary::after{
  transform:rotate(180deg);
}

.afo-filters-accordion__summary:focus,
.afo-filters-accordion__summary:focus-visible{
  outline:2px solid var(--global-palette2);
  outline-offset:2px;
}

.afo-filters-accordion__panel{ padding:18px 16px 16px; }

@media (min-width:1024px){
  .afo-filters-accordion{
    border:0;
    border-radius:0;
    background:transparent;
    overflow:visible;
  }
  .afo-filters-accordion__summary{ display:none; }
  .afo-filters-accordion__panel{ padding:0; }
}

/* ---------- Fieldsets / légendes ---------- */

.afo-filters-group{
  padding:0;
  margin:0 0 20px 0;
  border:0;
}

.afo-filters-group-title{
  margin:0 0 10px 0;
  font-family:'BBB Poppins TN Display', Helvetica, Arial;
  font-size:24px;
  font-weight:600;
  line-height:1.2;
  color:var(--global-palette2);
}

/* ---------- Listes de cases à cocher ---------- */

.afo-filters-checklist{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:0;
  padding-left:0!important;
}

/* spacing stable */
.afo-filters-checkitem + .afo-filters-checkitem{ margin-top:10px; }
.afo-filters-checkitem + .afo-filters-more-row{ margin-top:10px; }
.afo-filters-more-row + .afo-filters-checkitem{ margin-top:10px; }

.afo-filters-checkitem{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:4px 6px;
  border-radius:6px;
}

.afo-filters-checkitem:focus-within{
  outline:2px solid var(--global-palette2);
  outline-offset:2px;
}

.afo-filters-checkitem:hover{ background-color:#f5f5f7; }

.afo-filters-checkbox{
  width:18px;
  height:18px;
  border-radius:4px;
  border:1px solid var(--global-palette1);
  margin-top:3px;
  accent-color:var(--global-palette1);
}

.afo-filters-checkbox:hover,
.afo-filters-checkbox:focus,
.afo-filters-checkbox:focus-visible{
  outline:none;
  border-color:var(--global-palette2);
}

.afo-filters-checkbox:hover + .afo-filters-checklabel,
.afo-filters-checkbox:focus-visible + .afo-filters-checklabel,
.afo-filters-checklabel:hover{
  text-decoration:underline;
}

.afo-filters-checklabel{
  font-family:'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:18px;
  line-height:1.4;
  cursor:pointer;
}

/* =========================================================
   Desktop ONLY (>1024px) : "Voir +" après 3 items
   - Animation plus smooth : max-height + margin + padding
   ========================================================= */
@media (min-width:1025px){

  /* ✅ Les items "more" (ajoutés par JS via .afo-more-item) */
  .afo-filters-checklist .afo-more-item{
    /* base “ouverte” */
    max-height:140px;
    overflow:hidden;

    /* rendre le move + transition plus smooth */
    will-change: max-height, transform, opacity, margin-top, padding;

    transition:
      max-height .26s ease,
      opacity .18s ease,
      transform .26s ease,
      margin-top .26s ease,
      padding-top .26s ease,
      padding-bottom .26s ease,
      visibility 0s;
  }

  /* ✅ état fermé */
  .afo-filters-checklist.afo-more-closed .afo-more-item{
    max-height:0;
    opacity:0;
    transform:translateY(-4px);
    visibility:hidden;
    pointer-events:none;

    /* IMPORTANT : éviter le “pop” de spacing */
    margin-top:0 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;

    /* visibility retardée pour éviter flash */
    transition:
      max-height .22s ease,
      opacity .14s ease,
      transform .22s ease,
      margin-top .22s ease,
      padding-top .22s ease,
      padding-bottom .22s ease,
      visibility 0s linear .22s;
  }

  /* ✅ état ouvert */
  .afo-filters-checklist.afo-more-open .afo-more-item{
    opacity:1;
    transform:none;
    visibility:visible;
    pointer-events:auto;

    /* on rétablit l'espace en douceur */
    margin-top:10px;
  }

  /* Respect prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce){
    .afo-filters-checklist .afo-more-item{
      transition:none !important;
      transform:none !important;
    }
  }

  /* ---- Ligne de séparation + "Voir +/-" ---- */
  .afo-filters-more-row{
    margin-top:6px;
    padding-top:10px;
    border-top: 1px solid var(--global-palette1);
    display:flex;
    justify-content:flex-end;
  }

  .afo-filters-more-btn{
    appearance:none;
    border:0;
    background:transparent;
    padding:6px 0;

    font-family:'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size:16px;
    font-weight:600;
    color:var(--global-palette1);

    cursor:pointer;
    text-decoration:underline;
  }

  .afo-filters-more-btn:focus,
  .afo-filters-more-btn:hover{
    color:var(--global-palette2);
    text-decoration:underline;
    background-color:#fff;
    box-shadow:none;
  }

  .afo-filters-more-btn:focus-visible{
    outline:2px solid var(--global-palette2);
    outline-offset:2px;
    border-radius:6px;
    text-decoration:none;
    box-shadow:none;
  }
}

/* ---------- Select Édition ---------- */

.afo-filters-select-wrap{ margin-top:4px; }

.afo-filters-select{
  width:80%;
  min-height:52px;

  padding:10px 42px 10px 14px;
  border-radius:10px;
  border:1px solid var(--global-palette1);
  background-color:#ffffff;

  font-size:16px;
  line-height:1.3;
  color:#000;

  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%23000000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:14px 14px;

  transition:border-color .15s ease, box-shadow .15s ease, outline-color .15s ease;
}

.afo-filters-select:hover,
.afo-filters-select:focus,
.afo-filters-select:focus-visible{
  outline:2px solid var(--global-palette2);
  outline-offset:2px;
}

.afo-filters-select.is-filtered{
  outline:2px solid var(--global-palette2);
  outline-offset:2px;
}

.afo-filters-empty{
  font-size:12px;
  font-style:italic;
  color:#777;
}

/* ---------- Boutons Filtrer / Réinitialiser ---------- */

.afo-filters-actions{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}

.afo-filters-btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 22px;
  border-radius:9999px;
  border:2px solid var(--global-palette1);
  background:var(--global-palette1);
  color:var(--global-palette9);
  font-weight:600;
  font-size:18px;
  text-decoration:none;
  cursor:pointer;
}

.afo-filters-reset{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 22px;
  border-radius:9999px;
  border:2px solid var(--global-palette1);
  background:#fff;
  color:var(--global-palette1);
  font-weight:600;
  font-size:18px;
  text-decoration:none;
  cursor:pointer;
}

.afo-filters-btn-primary:hover,
.afo-filters-btn-primary:focus-visible,
.afo-filters-reset:hover,
.afo-filters-reset:focus-visible{
  outline:none;
  border:2px solid var(--global-palette2);
  color:#fff;
  background-color: var(--global-palette2);
  box-shadow:none;
}

.afo-filters-reset{
  box-shadow:none;
  border-style:dashed;
}

/* ===== AFO – Filtres actifs (pills) ===== */

.afo-active-filters{
  margin:0 0 20px;
  display:flex;
  flex-wrap:wrap;
  gap:10px 12px;
  font-family:'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.afo-active-filters-label{
  margin:0;
  font-weight:600;
  padding-right: 20px;
  margin-bottom: 10px !important;
}

.afo-active-filters-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  list-style:none;
  margin:0;
  padding-left:0!important;
}

.afo-filter-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:9999px;
  background:#f0eef7;
  border:1px solid #d4d4de;
  font-size:14px;
}

.afo-filter-chip-label{ white-space:nowrap; }

.afo-filter-chip-remove{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:9999px;
  background:#4d2c7a;
  color:#fff;
  text-decoration:none;
  font-size:16px;
  line-height:1;
}

.afo-filter-chip-remove:hover,
.afo-filter-chip-remove:focus-visible{
  background:#2f184d;
  outline:none;
}

.afo-active-filters-reset{
  margin-left:auto;
  font-size:16px;
  text-decoration:underline;
  cursor:pointer;
}

@media (max-width:768px){
  .afo-active-filters{
    flex-direction:column;
    align-items:flex-start;
  }
  .afo-active-filters-reset{ margin-left:0; }
}

/* ===== Layout responsive des filtres ===== */

@media (min-width:768px) and (max-width:1024px){
  .afo-filters-block .afo-filters-sidebar{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    grid-auto-rows:auto;
    gap:16px 20px;
  }

  .afo-filters-block .afo-filters-group:nth-of-type(1){ grid-area:1 / 1 / 2 / 2; }
  .afo-filters-block .afo-filters-group:nth-of-type(2){ grid-area:1 / 2 / 2 / 3; }
  .afo-filters-block .afo-filters-group:nth-of-type(3){ grid-area:1 / 3 / 2 / 4; }

  .afo-filters-block .afo-filters-actions{
    grid-area:2 / 1 / 3 / 4;
    justify-content:center;
  }
}

@media (max-width:767px){
  .afo-filters-block .afo-filters-sidebar{ display:block; }
}