/* Bandeau de recherche (pages catégorie) */
.arp-widget-col {
  margin-bottom: 24px;
}

.arp-widget {
  /* Dégradé aux couleurs de l'univers (variables posées par le gabarit ; vert de la marque par défaut) */
  background: #0C8E44;
  background: linear-gradient(135deg, var(--arp-c1, #0C8E44) 0%, var(--arp-c2, #054A25) 100%);
  padding: 20px 28px 22px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 20px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.arp-widget-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.arp-widget-title {
  /* Police des titres du site (déjà chargée par le thème) ; une seule graisse, donc pas de gras forcé. */
  font-family: 'Protest Strike', 'Poppins', system-ui, sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 16px;
  text-align: center;
}

.arp-widget-label {
  display: block;
  text-align: left;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  margin: 0 0 5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.arp-widget-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
}

.arp-widget-search {
  display: flex;
  flex: 1 1 320px;
  min-width: 260px;
  border-radius: 12px;
  overflow: hidden;
}

.arp-widget-input {
  flex: 1;
  border: none;
  border-radius: 0;
  padding: 0 18px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 14px;
  color: #191919;
}

.arp-widget-submit {
  background: #f39c12;
  color: #fff;
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  border: none;
  border-radius: 0;
  padding: 0 26px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.arp-widget-submit:hover {
  background: #d98700;
}

.arp-widget-select {
  flex: 0 0 auto;
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 0 16px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 14px;
  color: #191919;
  background-color: #fff;
}

.arp-widget-input,
.arp-widget-submit,
.arp-widget-select {
  height: 46px;
}

.arp-widget-input:focus,
.arp-widget-select:focus,
.arp-widget-submit:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.55);
  outline-offset: 1px;
}

/* Page résultats */
.arp-results-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  font-family: 'Poppins', system-ui, sans-serif;
}

.arp-results-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
  padding: 16px;
  background: #f5f8f6;
  border-radius: 16px;
}

.arp-results-filters input,
.arp-results-filters select,
.arp-results-filters button {
  height: 44px;
  border: 1px solid #dfe5e1;
  border-radius: 12px;
  padding: 0 16px;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 14px;
  background: #fff;
}

.arp-results-filters button {
  background: #0C8E44;
  color: #fff;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.arp-results-filters button:hover {
  background: #0a7a3a;
}

.arp-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.arp-result-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 16px;
  border: 1px solid #e8ece9;
  border-radius: 16px;
  text-decoration: none;
  color: #191919;
  background: #fff;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.arp-result-card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.arp-result-card img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

.arp-result-name {
  font-weight: 600;
  font-size: 14px;
}

.arp-result-price {
  font-weight: 700;
  color: #0C8E44;
}

.arp-result-price--quote {
  color: #f39c12;
}

.arp-pagination {
  display: flex;
  gap: 8px;
  margin-top: 24px;
  justify-content: center;
  flex-wrap: wrap;
}

.arp-pagination-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid #dfe5e1;
  text-decoration: none;
  color: #191919;
}

.arp-pagination-link--active {
  background: #0C8E44;
  color: #fff;
  border-color: #0C8E44;
}

.arp-no-results {
  text-align: center;
  color: #666;
  padding: 40px 0;
}

@media (max-width: 575px) {
  .arp-widget { padding: 24px 16px; border-radius: 16px; }
  /* Titre sur une seule ligne : la taille suit la largeur de l'écran (≈ 4,5 % de la largeur), sans retour à la ligne */
  .arp-widget-title { font-size: clamp(14px, 4.5vw, 26px); white-space: nowrap; }
}

.arp-loading {
  opacity: 0.45;
  pointer-events: none;
}

.arp-results-count {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  margin-bottom: 14px;
}


.arp-widget-hint {
  margin: 12px 0 0;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 13px;
}

.arp-widget-hint[hidden] {
  display: none;
}

.arp-widget-select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ---------- Bandeau : champs, résumé, boutons à bascule ---------- */
.arp-widget-row .arp-field {
  flex: 1 1 220px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
}

.arp-widget-row .arp-field .arp-widget-select {
  width: 100%;
}

/* Résumé : nombre de produits, filtres actifs, tout effacer */
.arp-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  font-family: 'Poppins', system-ui, sans-serif;
  color: #fff;
}

.arp-summary[hidden] {
  display: none;
}

.arp-count {
  font-weight: 700;
  font-size: 14px;
}

.arp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.arp-chip {
  padding: 5px 12px;
  border: none;
  border-radius: 999px;
  background: #fff;
  color: var(--arp-c2, #0C8E44);
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.arp-chip:hover {
  background: #e7f4ec;
}

.arp-clear {
  margin-left: auto;
  padding: 5px 4px;
  border: none;
  background: none;
  color: #fff;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

/* Chargement en cours */
.arp-widget-form {
  position: relative;
}

.arp-widget-form.arp-busy .arp-widget-row {
  opacity: 0.6;
  pointer-events: none;
}

.arp-widget-form.arp-busy::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  animation: arp-busy 0.9s linear infinite;
}

@keyframes arp-busy {
  from { background-position: -50% 0; }
  to { background-position: 150% 0; }
}

/* Facettes de la colonne de gauche reprises par le bandeau (doublon) : masquées */
.arp-facet-hidden {
  display: none !important;
}

/* Position d'arrivée quand la liste est ramenée dans l'écran (sous l'en-tête du site) */
#products {
  scroll-margin-top: 110px;
}

@media (max-width: 575px) {
  .arp-widget-row .arp-field {
    flex-basis: 100%;
  }
  .arp-clear {
    margin-left: 0;
  }
}

/* Garde-fous contre le style du thème : hauteur fixe des listes, libellés à gauche */
.arp-widget-row .arp-field .arp-widget-select {
  height: 46px;
  min-height: 0;
  max-height: 46px;
}

.arp-widget-row .arp-field .arp-widget-label {
  text-align: left;
  margin-left: 0;
  width: 100%;
}

/* Liste de produits en cours de rafraîchissement : retour visuel immédiat */
#products.arp-list-busy {
  position: relative;
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

#products.arp-list-busy::after {
  content: '';
  position: absolute;
  top: 120px;
  left: 50%;
  width: 38px;
  height: 38px;
  margin-left: -19px;
  border: 4px solid #0C8E44;
  border-top-color: transparent;
  border-radius: 50%;
  animation: arp-spin 0.8s linear infinite;
}

@keyframes arp-spin {
  to { transform: rotate(360deg); }
}

/* Cases à cocher du bandeau (Coup de cœur, Prix économique…) */
.arp-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 14px;
}

.arp-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #fff;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.arp-check[hidden] {
  display: none;
}

.arp-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: #fff;
  cursor: pointer;
}

.arp-check-count {
  opacity: 0.85;
  font-weight: 400;
}

/* ---------- Styles du bandeau (réglage « Style du bandeau » du back-office) ----------
   universe : dégradé aux couleurs de l'univers (règles de base ci-dessus).
   green    : vert Agrileader unique, travaillé.   dark : sombre de la charte avec filet vert. */
.arp-widget.arp-style-green,
.arp-widget.arp-style-dark {
  position: relative;
  overflow: hidden;
}

.arp-style-green .arp-widget-inner,
.arp-style-dark .arp-widget-inner {
  position: relative;
  z-index: 1;
}

.arp-style-green .arp-widget-title,
.arp-style-dark .arp-widget-title {
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 30px;
}

.arp-style-green .arp-widget-label,
.arp-style-dark .arp-widget-label {
  font-size: 12px;
  letter-spacing: 0.08em;
}

.arp-style-green .arp-widget-select,
.arp-style-dark .arp-widget-select {
  border: 2px solid transparent;
}

/* Vert Agrileader travaillé */
.arp-widget.arp-style-green {
  --arp-c1: #0C8E44 !important;
  --arp-c2: #054A25 !important;
  /* Contraste : le petit texte blanc exige au moins 4,5:1 ; #0C8E44 n'atteint que 4,2:1 (charte). Seul l'angle haut gauche, sans texte, garde ce vert. */
  background: radial-gradient(120% 160% at 0% 0%, #0C8E44 0%, #0b7a3a 36%, #054A25 100%);
  border-radius: 22px;
  box-shadow: 0 10px 28px rgba(5, 74, 37, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.arp-style-green::before {
  content: '';
  position: absolute;
  right: -70px;
  top: -90px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
}

.arp-style-green::after {
  content: '';
  position: absolute;
  left: -50px;
  bottom: -120px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
}

.arp-style-green .arp-widget-label { color: #e4f6ec; }
.arp-style-green .arp-widget-select { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); }
.arp-style-green .arp-widget-select:hover { border-color: #7bc258; }

/* STYLE SOMBRE (charte) AVEC FILET VERT — DÉSACTIVÉ : seul le style « vert travaillé » est utilisé.
   Pour le réactiver : supprimer ce commentaire, puis retirer le blocage de ArpProfiles::style() (voir le commentaire dans cette méthode).
.arp-widget.arp-style-dark {
  --arp-c1: #0C8E44 !important;
  --arp-c2: #054A25 !important;
  background: linear-gradient(135deg, #141112 0%, #101516 55%, #081214 100%);
  border-radius: 18px;
  border-bottom: 6px solid #0C8E44;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.arp-style-dark::before {
  content: '';
  position: absolute;
  right: -60px;
  top: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(12, 142, 68, 0.2), rgba(12, 142, 68, 0) 70%);
}

.arp-style-dark .arp-widget-title { color: #fff; }
.arp-style-dark .arp-widget-label { color: #fff; }
.arp-style-dark .arp-widget-select:hover { border-color: #0C8E44; }
FIN DU STYLE SOMBRE */

/* Mobile : les titres en majuscules sont plus larges, ils se réduisent pour rester sur une ligne */
@media (max-width: 575px) {
  .arp-style-green .arp-widget-title,
  .arp-style-dark .arp-widget-title {
    font-size: clamp(13px, 3.9vw, 22px);
    letter-spacing: 0.01em;
  }
}

/* 6 listes : 3 par ligne (5 listes ou moins : une seule ligne) */
.arp-widget-row.arp-fields-6 .arp-field {
  flex: 1 1 calc(33.333% - 12px);
  min-width: 0;
}

@media (max-width: 575px) {
  .arp-widget-row.arp-fields-6 .arp-field {
    flex-basis: 100%;
  }
}

/* ---------- Mobile : bandeau replié (bouton « Filtrer ») ---------- */
.arp-toggle-mobile {
  display: none;
}

@media (max-width: 575px) {
  .arp-toggle-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 46px;
    margin: 0 0 4px;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 12px;
    background: transparent;
    color: #fff;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
  }

  .arp-toggle-mobile .arp-toggle-count {
    min-width: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: #fff;
    color: var(--arp-c2, #054A25);
    font-size: 13px;
    line-height: 22px;
  }

  .arp-toggle-mobile .arp-toggle-count:empty {
    display: none;
  }

  .arp-toggle-mobile .arp-toggle-arrow {
    transition: transform 0.15s ease;
  }

  .arp-widget:not(.arp-collapsed) .arp-toggle-arrow {
    transform: rotate(180deg);
  }

  /* Replié : seules les pastilles de filtres actifs (résumé) restent visibles */
  .arp-widget.arp-collapsed .arp-widget-row,
  .arp-widget.arp-collapsed .arp-checks {
    display: none;
  }

  .arp-widget.arp-collapsed .arp-widget-title {
    margin-bottom: 12px;
  }
}

/* Message quand le serveur refuse une requête de filtre (429) */
.arp-widget .arp-error {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #fff3cd;
  color: #5c4400;
  font-size: 13px;
  font-weight: 600;
}