/* =============================================================
   Aplastic94 — Pages catégorie produit (taxonomy-product_cat)
   ============================================================= */

.category-main {
  padding-top: 1.5rem;
  padding-bottom: 3rem;
}

/* ─── Fil d'Ariane ──────────────────────────────────────────── */
/* Le bloc se superpose sinon au bandeau du haut (~80px de décalage constaté
   à l'affichage, indépendant du padding-top global du header) : on force sa
   propre marge haute pour le ramener sous le header. */


.category-breadcrumbs,
.woocommerce-breadcrumb {
  font-size: 0.8rem;
  color: var(--c-text-mid);
  margin-bottom: 1.25rem;
  display: block;
}

/* Neutralise l'alignement "wide" (marges en vw) posé par défaut par le bloc :
   dans la colonne de contenu (81% de la grille), il ferait sortir le fil
   d'Ariane de son emplacement au lieu de rester au-dessus du tri. */
.category-content .category-breadcrumbs.alignwide {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
  width: 100%;
}

.category-breadcrumbs a,
.woocommerce-breadcrumb a {
  color: var(--c-text-mid);
  text-decoration: none;
}

.category-breadcrumbs a:hover,
.woocommerce-breadcrumb a:hover {
  color: var(--c-fuchsia);
}

/* ─── Titre H1 + accroche ───────────────────────────────────── */
.category-title {
  color: var(--c-navy);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 1.75rem;
}

.category-lead {
  color: var(--c-text-mid);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 62ch;
  margin: 0 0 1.75rem;
}

.category-lead:empty {
  display: none;
  margin: 0;
}

/* ─── Colonnes ──────────────────────────────────────────────── */
.category-layout {
  align-items: flex-start;
}

@media (max-width: 782px) {
  .category-layout {
    flex-direction: column;
  }
  .category-sidebar,
  .category-content {
    flex-basis: 100% !important;
    width: 100%;
  }

  /* Le contenu (fil d'Ariane, titre, tri, grille produits) passe avant la
     sidebar (filtres/catégories/avantages/service) : sans ça, en colonne
     unique, il fallait faire défiler toutes les cartes de la sidebar avant
     de voir le moindre produit. */
  .category-content {
    order: 1;
  }
  .category-sidebar {
    order: 2;
    position: static !important;
    margin-top: 2.5rem;
  }

  /* Espacements resserrés entre titre / sous-titre / tri / grille produits :
     les marges pensées pour le desktop (1.5–1.75rem chacune) cumulées
     repoussaient les produits très bas sur un écran mobile étroit, avant
     même d'apparaître au premier écran. */
  .category-main {
    padding-top: 3rem;
  }
  .category-breadcrumbs,
  .woocommerce-breadcrumb {
    margin-bottom: 0.6rem;
  }
  .category-title {
    margin-bottom: 0.5rem;
  }
  .category-lead {
    margin-bottom: 0.85rem;
  }
  .category-toolbar {
    margin-bottom: 1rem;
  }
}

/* ─── Recherche mobile (au-dessus de la grille produits) ───────────────
   Masquée par défaut : sur desktop/tablette, la recherche du header et celle
   de la sidebar filtres (.sidebar-search-filter) suffisent déjà. */
.category-mobile-search {
  display: none;
}

@media (max-width: 782px) {
  .category-mobile-search {
    display: block;
    margin: 0 0 1rem;
  }
  .category-mobile-search .wp-block-search__inside-wrapper {
    border: 1px solid var(--c-border);
    border-radius: 8px;
  }
  .category-mobile-search .wp-block-search__input {
    border: none;
    padding: 0.65rem 0.9rem;
    font-size: 0.9rem;
    width: 100%;
  }
  .category-mobile-search .wp-block-search__button {
    background: var(--c-fuchsia);
    color: var(--c-white);
    border: none;
    border-radius: 0 8px 8px 0;
    padding: 0 1rem;
    cursor: pointer;
  }
  .category-mobile-search .wp-block-search__button:hover {
    background: var(--c-fuchsia-h);
  }
}

/* ═══════════════════════════════════════════════════════════
   SIDEBAR — cartes
   ═══════════════════════════════════════════════════════════ */
/* Décalée du fil d'Ariane (~2.3rem : hauteur de ligne + marge basse) pour que
   la première carte s'aligne avec le H1 de la colonne de droite, plutôt
   qu'avec le fil d'Ariane qui, lui, n'existe que dans cette colonne-là. */
.category-sidebar {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  margin-top: 2.3rem;
}

/* Largeur minimum fixe : au-delà de 782px (bascule mobile plein-largeur),
   la sidebar ne doit plus jamais se réduire au pourcentage de colonne — sinon
   elle devient inutilisable dès que l'écran est un peu moins large. */
@media (min-width: 783px) {
  .category-layout {
    flex-wrap: nowrap !important;
  }
  .category-sidebar {
    flex: 0 0 300px !important;
    width: 300px !important;
    max-width: 300px !important;
  }
  .category-content {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
  }
}

.sidebar-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 1.1rem 1.15rem;
  margin-bottom: 1.25rem;
}

.sidebar-card__title {
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 0.9rem !important;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--c-border);
}

/* Carte Filtres — sans encadré, look sobre façon back-office e-commerce */
.sidebar-card--filters {
  border: none;
  border-bottom: 1px solid var(--c-border);
  border-radius: 0;
  padding: 1.5rem 0 1.25rem;
}

/* Carte Catégories — même logique : plus d'encadré, flush à gauche */
.sidebar-card--categories {
  border: none;
  border-bottom: 1px solid var(--c-border);
  border-radius: 0;
  padding: 0 0 1.25rem;
}

.sidebar-card--categories .sidebar-card__title {
  border-bottom: none;
  padding-bottom: 0;
}

.sidebar-card--filters .sidebar-card__title {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 1.35rem !important;
  color: var(--c-navy) !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}

.sidebar-card--benefits .sidebar-card__title {
  border-bottom-color: rgba(255, 255, 255, 0.15);
}

/* ─── Carte Filtres ─────────────────────────────────────────── */
.sidebar-card--filters .wc-block-product-filters {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.sidebar-card--filters .wc-block-product-filters__overlay-content > * {
  padding: 1rem 0;
  border-bottom: 1px solid var(--c-border);
}

.sidebar-card--filters .wc-block-product-filters__overlay-content > *:first-child {
  padding-top: 0;
}

.sidebar-card--filters .wc-block-product-filter-clear-button {
  border-bottom: none;
  padding-bottom: 0 !important;
}

/* Les groupes de filtres WooCommerce sont rendus dans des <fieldset> : sans
   reset ils affichent le liseré/encadré natif du navigateur autour de
   chaque bloc — c'est ce rectangle qu'on retire ici. */
.sidebar-card--filters fieldset {
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
}

/* Rendre visible le titre de chaque groupe de filtre (masqué en sr-only par défaut) */
.sidebar-card--filters legend.screen-reader-text {
  position: static !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
  white-space: normal !important;
  display: block !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-navy) !important;
  margin: 0 0 0.6rem !important;
}

.sidebar-card--filters .wc-block-product-filter-checkbox-list__items {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.sidebar-card--filters .wc-block-product-filter-checkbox-list__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.83rem;
  color: var(--c-text);
  cursor: pointer;
  padding: 0.15rem 0;
}

.sidebar-card--filters .wc-block-product-filter-checkbox-list__input-wrapper {
  position: relative;
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.sidebar-card--filters .wc-block-product-filter-checkbox-list__input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--c-fuchsia);
  cursor: pointer;
}

.sidebar-card--filters .wc-block-product-filter-checkbox-list__count {
  color: var(--c-text-light);
  font-size: 0.78rem;
}

.sidebar-card--filters .wc-block-product-filter__show-more {
  font-size: 0.78rem;
  color: var(--c-teal-text);
  margin-top: 0.4rem !important;
}

.sidebar-card--filters .wc-block-components-price-slider__range-input-wrapper {
  margin: 0.75rem 0;
}

.sidebar-card--filters .wc-block-components-price-slider__range-input-progress {
  --track-background: var(--c-border);
  --range-color: var(--c-fuchsia);
}

.sidebar-card--filters .wc-block-product-filter-price-slider__content .range-bar,
.sidebar-card--filters .wc-block-product-filter-price-slider__range {
  --range-color: var(--c-fuchsia);
}

/* Grille du curseur de prix : les 2 colonnes d'input sont en largeur "auto" —
   sans largeur fixe, le padding les élargit assez pour faire déborder toute
   la grille (donc le curseur aussi) hors de la sidebar. */
.sidebar-card--filters .wc-block-product-filter-price-slider__content {
  max-width: 100%;
}

.sidebar-card--filters .wc-block-product-filter-price-slider__left input,
.sidebar-card--filters .wc-block-product-filter-price-slider__right input {
  box-sizing: border-box !important;
  width: 4.4rem !important;
  min-width: 0 !important;
  max-width: 100% !important;
  border-radius: 999px !important;
  border: 1.5px solid var(--c-border) !important;
  background: var(--c-gray) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: var(--c-navy) !important;
  padding: 0.5rem 0.4rem !important;
  text-align: center;
  transition: border-color var(--trans), background var(--trans);
}

.sidebar-card--filters .wc-block-product-filter-price-slider__left input:focus,
.sidebar-card--filters .wc-block-product-filter-price-slider__right input:focus {
  border-color: var(--c-teal) !important;
  background: var(--c-white) !important;
  outline: none;
}

.sidebar-card--filters .wc-block-components-price-slider__amount:focus,
.sidebar-card--filters input[type="number"]:focus {
  border-color: var(--c-teal) !important;
  background: var(--c-white) !important;
  outline: none;
}

/* Piste et poignées du curseur de prix : rondes, colorées, sans harshness */
.sidebar-card--filters input[type="range"] {
  accent-color: var(--c-fuchsia);
}

/* ─── Curseur double Diamètre / Épaisseur ────────────────────── */
.attr-range-filter {
  padding: 1rem 0;
  border-bottom: 1px solid var(--c-border);
}

.attr-range-filter__heading {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-navy);
  margin-bottom: 0.9rem;
}

.attr-range-filter__slider {
  position: relative;
  height: 18px;
  margin-bottom: 0.6rem;
}

.attr-range-filter__track {
  position: absolute;
  top: 50%;
  left: 8px;
  right: 8px;
  height: 4px;
  background: var(--c-border);
  border-radius: 999px;
  transform: translateY(-50%);
}

.attr-range-filter__range {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--c-fuchsia);
  border-radius: 999px;
}

.attr-range-filter__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 18px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
}

.attr-range-filter__input::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  background: transparent;
}

.attr-range-filter__input::-moz-range-track {
  background: transparent;
}

.attr-range-filter__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c-white);
  border: 2.5px solid var(--c-fuchsia);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(22, 38, 61, 0.25);
  margin-top: 0;
}

.attr-range-filter__input::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c-white);
  border: 2.5px solid var(--c-fuchsia);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(22, 38, 61, 0.25);
}

.attr-range-filter__values {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--c-navy);
}

/* ─── Filtre couleur ──────────────────────────────────────────── */
.color-swatch-filter {
  padding: 1rem 0;
  border-bottom: 1px solid var(--c-border);
}

.color-swatch-filter__items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.color-swatch-filter__item {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(22, 38, 61, 0.12);
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: transform var(--trans), box-shadow var(--trans);
}

.color-swatch-filter__item:hover {
  transform: translateY(-2px);
}

.color-swatch-filter__item.is-active {
  box-shadow: 0 0 0 2px var(--c-white), 0 0 0 4px var(--c-fuchsia);
}

.color-swatch-filter__item--extra {
  display: none;
}

.color-swatch-filter.is-expanded .color-swatch-filter__item--extra {
  display: inline-block;
}

.color-swatch-filter__toggle {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--c-teal-text);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.color-swatch-filter__toggle:hover {
  text-decoration: underline;
}

/* ─── Filtre Prix (hubs "Nos produits"/"Nos matières") ─────────────────── */
.hub-price-filter {
  padding: 1rem 0;
  border-bottom: 1px solid var(--c-border);
}

.hub-price-filter__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.hub-price-filter__input {
  box-sizing: border-box;
  width: 4.4rem;
  min-width: 0;
  border-radius: 999px;
  border: 1.5px solid var(--c-border);
  background: var(--c-gray);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--c-navy);
  padding: 0.5rem 0.4rem;
  text-align: center;
  transition: border-color var(--trans), background var(--trans);
}

.hub-price-filter__input:focus {
  border-color: var(--c-teal);
  background: var(--c-white);
  outline: none;
}

.hub-price-filter__sep,
.hub-price-filter__unit {
  font-size: 0.78rem;
  color: var(--c-text-mid);
}

/* ─── Label "Prix" (le bloc natif n'affiche pas de titre visible) ──────
   Pas de bordure/padding propre ici : sinon, cumulée à celle du bloc curseur
   juste en dessous, elle dessine un trait qui sépare visuellement le label
   et le curseur comme si c'était deux menus différents. */
.filter-price-heading,
.filter-group-heading {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-navy) !important;
  margin: 1rem 0 0.5rem !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* ─── Filtre "Mot-clé" (page résultats de recherche) ───────────────── */
.sidebar-search-filter {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--c-border);
}

.sidebar-search-filter .wp-block-search__inside-wrapper {
  border: 1px solid var(--c-border);
  border-radius: 8px;
}

.sidebar-search-filter .wp-block-search__input {
  border: none;
  padding: 0.55rem 0.8rem;
  font-size: 0.83rem;
  width: 100%;
}

.sidebar-search-filter .wp-block-search__button {
  background: var(--c-fuchsia);
  color: var(--c-white);
  border: none;
  border-radius: 0 8px 8px 0;
  padding: 0 0.9rem;
  cursor: pointer;
}

.sidebar-search-filter .wp-block-search__button:hover {
  background: var(--c-fuchsia-h);
}

/* ─── Filtres à cases à cocher génériques (Finition, Découpe sur-mesure) ── */
.attr-checkbox-filter {
  padding: 1rem 0;
  border-bottom: 1px solid var(--c-border);
}

.attr-checkbox-filter__items {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.attr-checkbox-filter__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.83rem;
  color: var(--c-text);
  cursor: pointer;
  padding: 0.15rem 0;
}

.attr-checkbox-filter__item input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--c-fuchsia);
  cursor: pointer;
}

/* Filtre "Disponibilité" (stock) : même liste à puces native, pas de titre
   propre fourni par le bloc — on lui donne juste un peu d'air. */
.sidebar-card--filters .wp-block-woocommerce-product-filter-status {
  padding: 1rem 0;
  border-bottom: 1px solid var(--c-border);
}

.sidebar-card--filters .wc-block-product-filter-clear-button {
  align-self: flex-start;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--c-fuchsia);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.sidebar-card--filters .wc-block-product-filter-clear-button:hover {
  text-decoration: underline;
}

.sidebar-card--filters .wc-block-product-filter-removable-chips__items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.sidebar-card--filters .wc-block-product-filter-removable-chips__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--c-gray);
  border-radius: 999px;
  padding: 0.25rem 0.5rem 0.25rem 0.7rem;
  font-size: 0.75rem;
  color: var(--c-navy);
}

.sidebar-card--filters .wc-block-product-filter-removable-chips__remove {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  padding: 2px;
  color: var(--c-text-mid);
}

/* Cacher le bouton/tiroir mobile "Filtrer les produits" — la sidebar est déjà visible */
.sidebar-card--filters .wc-block-product-filters__open-overlay,
.sidebar-card--filters .wc-block-product-filters__overlay-header,
.sidebar-card--filters .wc-block-product-filters__overlay-footer {
  display: none !important;
}

/* ─── Carte Catégories (liste compacte, sans image ni encadré) ── */
.sidebar-card--categories .wc-block-product-categories-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sidebar-card--categories .wc-block-product-categories-list-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  border-bottom: 1px solid var(--c-border);
  border-radius: 0;
  padding: 0.5rem 0;
  transition: color var(--trans);
  position: relative;
}

.sidebar-card--categories .wc-block-product-categories-list-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.sidebar-card--categories a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-grow: 1;
  text-decoration: none;
  min-width: 0;
}

.sidebar-card--categories .wc-block-product-categories-list-item__name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--c-navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--trans);
}

.sidebar-card--categories .wc-block-product-categories-list-item:hover .wc-block-product-categories-list-item__name {
  color: var(--c-teal-text);
}

.sidebar-card--categories .wc-block-product-categories-list-item-count {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--c-white);
  background: var(--c-navy);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}

/* ─── Carte Avantages (fond navy) ─────────────────────────────
   Badge circulaire coloré autour de chaque icône (plus vivant qu'un simple
   trait "—" entre titre et description) + légère animation au survol —
   translation de la ligne et rebond de l'icône, discrète mais "fun". */
.benefits-list li {
  color: var(--c-white) !important;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  transition: transform 0.25s ease;
}

.benefits-list li:hover {
  transform: translateX(3px);
}

.benefits-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Badge blanc plein (pas de teinte teal en fond) : l'icône reste teal
   (#6DB7B2, définie en attribut sur le SVG) et se détache nettement du blanc
   — un fond teinté-teal derrière une icône teal se fondait l'un dans l'autre
   et la rendait quasi invisible. */
.benefits-list__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}

.benefits-list li:hover .benefits-list__icon {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transform: scale(1.15) rotate(-8deg);
}

.benefits-list__text {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  line-height: 1.35;
}

.benefits-list__title {
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--c-white);
}

.benefits-list__desc {
  font-size: 0.74rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.62);
}

/* ─── Carte Service client ──────────────────────────────────── */
.service-line {
  font-size: 0.85rem !important;
  margin: 0 0 0.6rem !important;
}

.service-line a {
  color: var(--c-navy);
  text-decoration: none;
  font-weight: 600;
}

.service-line a:hover {
  color: var(--c-teal-text);
}

.service-hours {
  color: var(--c-text-mid) !important;
  margin-bottom: 1rem !important;
}

.service-cta .wp-block-button__link {
  background-color: var(--c-fuchsia) !important;
  color: var(--c-white) !important;
  border-radius: var(--radius) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  padding: 0.65rem 1rem !important;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-btn);
}

.service-cta .wp-block-button__link:hover {
  background-color: var(--c-fuchsia-h) !important;
}

/* ═══════════════════════════════════════════════════════════
   TOOLBAR — compteur + tri
   ═══════════════════════════════════════════════════════════ */
.category-toolbar {
  margin-bottom: 1.5rem;
}

.category-toolbar .woocommerce-result-count {
  margin: 0;
  color: var(--c-text-mid);
  font-size: 0.83rem;
}

.category-toolbar .wc-block-catalog-sorting {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Le <form> généré par WooCommerce porte une margin-bottom par défaut
   (~14px) : comme il est seul enfant flex de .wc-block-catalog-sorting,
   cette marge s'ajoute à sa hauteur "auto" et décale visuellement le select
   vers le haut par rapport au texte du compteur à côté (rien à centrer,
   la marge occupe déjà tout l'espace disponible). */
.category-toolbar .wc-block-catalog-sorting form.woocommerce-ordering {
  margin: 0 !important;
}

.category-toolbar select.orderby {
  appearance: none;
  background: var(--c-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2316263D'%3E%3Cpath d='M5.25 7.5L10 12.25L14.75 7.5H5.25Z'/%3E%3C/svg%3E") no-repeat right 0.6rem center;
  background-size: 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 0.5rem 2rem 0.5rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--c-navy);
  cursor: pointer;
  transition: border-color var(--trans);
}

.category-toolbar select.orderby:hover,
.category-toolbar select.orderby:focus {
  border-color: var(--c-teal);
  outline: none;
}

@media (max-width: 600px) {
  .category-toolbar {
    flex-wrap: nowrap;
    gap: 0.5rem;
  }
  .category-toolbar .woocommerce-result-count {
    font-size: 0.76rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .category-toolbar select.orderby {
    flex-shrink: 0;
    font-size: 0.76rem;
    padding: 0.4rem 1.7rem 0.4rem 0.7rem;
  }
}

/* ═══════════════════════════════════════════════════════════
   GRILLE PRODUITS — cartes claires, sobres, 4/ligne en grand écran
   ═══════════════════════════════════════════════════════════ */
.category-product-grid .wc-block-product-template {
  gap: 1.75rem !important;
}

/* Le bloc est figé à 4 colonnes (shrinkColumns désactivé) pour garantir 4
   produits/ligne en grand écran (1920px et plus). La formule de largeur de
   WooCommerce suppose son propre gap par défaut (1.25em) : comme on l'a
   agrandi à 1.75rem ci-dessus, on recalcule nous-mêmes la largeur des cartes
   pour que 4 colonnes + 3 gaps tiennent exactement dans 100% de la largeur,
   sans quoi la 4e carte déborde et repasse à la ligne. On redescend ensuite
   à 3 puis 2 colonnes sur les largeurs desktop/tablette plus étroites, la
   sidebar de filtres restant affichée jusqu'à 782px. */
.category-product-grid .wc-block-product-template.columns-4 > li {
  width: calc(25% - 1.3125rem) !important;
}

@media (max-width: 1300px) {
  .category-product-grid .wc-block-product-template.columns-4 > li {
    width: calc(33.333% - 1.1667rem) !important;
  }
}

@media (max-width: 950px) {
  .category-product-grid .wc-block-product-template.columns-4 > li {
    width: calc(50% - 0.875rem) !important;
  }
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--c-white);
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Survol simple et efficace : pas de translation/scale, juste un accent net */
.product-card:hover {
  border-color: var(--c-teal);
  box-shadow: var(--shadow-card);
}

/* Boîte image carrée, homogène quelle que soit la taille réelle de l'image
   source — sinon des cartes voisines avec des photos de dimensions/ratios
   différents (ex. bandeau "produits associés" en fiche produit) affichent des
   images visuellement plus grandes ou plus petites les unes que les autres,
   ce qui décale aussi les titres/prix d'une carte à l'autre sur une même
   ligne. S'applique à deux structures : le bloc natif WooCommerce
   (.wc-block-components-product-image, grille boutique/catégorie) et le
   <img> classique rendu par aplastic94_render_shop_style_product_card()
   (fiche produit, voir functions.php) qui n'a pas ce wrapper. */
.product-card__media {
  margin: 0;
  position: relative;
  background: var(--c-gray);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.product-card__media > a {
  display: block;
  width: 100%;
  height: 100%;
}

.product-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  padding: 0.75rem;
  box-sizing: border-box;
}

.product-card .wc-block-components-product-image {
  margin: 0;
  background: var(--c-gray);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.product-card .wc-block-components-product-sale-badge {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  background: var(--c-gold) !important;
  color: var(--c-navy) !important;
  font-weight: 800;
  font-size: 0.68rem;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ─── Badge de disponibilité (coin haut-gauche de la vignette) ────────────── */
.availability-badge {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 0.32rem 0.65rem 0.32rem 0.55rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  line-height: 1;
}

.availability-badge__icon {
  display: inline-flex;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.availability-badge__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.availability-badge.is-instock {
  background: var(--c-teal);
  color: var(--c-white);
}

/* Petit clin d'œil "en vie" sur le badge En stock, façon indicateur de
   disponibilité en temps réel — désactivé si l'utilisateur préfère moins
   d'animations. */
.availability-badge.is-instock .availability-badge__icon {
  animation: availability-pulse 2.2s ease-in-out infinite;
}

.availability-badge.is-48h {
  background: var(--c-gold);
  color: var(--c-navy);
}

.availability-badge.is-order {
  background: var(--c-fuchsia);
  color: var(--c-white);
}

@keyframes availability-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
  .availability-badge.is-instock .availability-badge__icon {
    animation: none;
  }
}

/* Corps de carte : colonne flex pour ancrer le prix en bas */
.product-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 0.85rem 0.9rem 1rem;
}

/* Ligne de mise en avant (ex. "🚚 Livré sous 24h") — masquée si vide */
.product-card__highlight {
  margin: 0 0 0.4rem !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: var(--c-teal-text) !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.product-card__highlight:empty {
  display: none !important;
}

.product-card__title {
  margin: 0 !important;
}

.product-card__title a {
  color: var(--c-navy) !important;
  text-decoration: none;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  transition: color 0.15s ease;
}

.product-card:hover .product-card__title a {
  color: var(--c-fuchsia) !important;
}

/* Pied de carte : titre + puces restent groupés et alignés en haut (juste
   sous le titre, quel que soit leur nombre) — c'est le footer entier
   (résumé + prix) qui absorbe l'étirement de la carte (toutes les cartes
   d'une même ligne ont la même hauteur), et seul le prix est repoussé en
   bas via margin-top:auto. Avant ce correctif, c'est le TITRE qui absorbait
   l'étirement : sur les fiches à peu de puces, ça ouvrait un vide entre le
   titre et sa propre liste de caractéristiques — visuellement décousu.
   Le prix reste ancré en bas de carte pour une comparaison facile entre
   fiches d'une même ligne (repère visuel constant), sans casser le lien
   visuel titre → caractéristiques. */
.product-card__footer {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin-top: 0.6rem !important;
}

.product-card__footer > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.product-card__footer > .product-card__price {
  margin-top: auto !important;
}

.product-card__price {
  margin: 0 !important;
  text-align: left !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
}

.product-card__price p,
.product-card__price .wc-block-components-product-price {
  margin: 0 !important;
}

.product-card__price .woocommerce-Price-amount {
  color: var(--c-fuchsia) !important;
  font-weight: 800 !important;
  font-size: 1.4rem !important;
}

/* Petit encart pour le prix barré, quand le produit est en promo */
.product-card__price del {
  order: -1;
  text-decoration: none;
  background: var(--c-gray);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
}

.product-card__price del .woocommerce-Price-amount {
  color: var(--c-text-mid) !important;
  font-weight: 600 !important;
  font-size: 0.72rem !important;
  text-decoration: line-through !important;
}

.product-card__price ins {
  text-decoration: none;
}

/* Reprend les caractéristiques de la fiche produit (même contenu, même puce
   ✓ que .woocommerce-product-details__short-description sur la page produit).
   Placée avant le prix dans la carte : marge en dessous plutôt qu'au-dessus. */
.product-card__summary {
  margin: 0 0 0.5rem !important;
  font-size: 0.78rem !important;
  color: var(--c-text-mid) !important;
  line-height: 1.5 !important;
}

.product-card__summary ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.product-card__summary ul li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: 0.25rem;
}

.product-card__summary ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--c-teal-text);
  font-weight: 800;
}

.product-card__summary:empty {
  display: none !important;
}

/* Toute la carte cliquable via un lien étiré posé sur le titre (accessible : un seul lien réel) */
.product-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.product-card .wc-block-components-product-image a {
  position: relative;
  z-index: 0;
}

/* ─── Pagination ────────────────────────────────────────────── */
.category-pagination {
  margin-top: 2.5rem !important;
  gap: 0.5rem !important;
}

.category-pagination a,
.category-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 0.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--c-border);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--c-navy);
  text-decoration: none;
}

.category-pagination .page-numbers.current {
  background: var(--c-fuchsia);
  border-color: var(--c-fuchsia);
  color: var(--c-white);
}

.category-pagination a:hover {
  border-color: var(--c-teal);
  color: var(--c-teal-text);
}

/* ═══════════════════════════════════════════════════════════
   BANDEAU CTA DEVIS — entre la grille produits et le texte SEO
   ═══════════════════════════════════════════════════════════ */
.category-cta-banner {
  margin-top: 2.5rem;
  padding: 1.1rem 1.5rem;
  background: var(--c-off-white, #F7F9FA);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  gap: 1rem 1.5rem;
}

.category-cta-banner__text {
  color: var(--c-navy);
  font-size: 0.92rem;
  font-weight: 600;
  margin: 0;
  flex: 1 1 auto;
}

.category-cta-banner__button {
  margin: 0;
  flex: 0 0 auto;
}

.category-cta-banner .wp-block-button__link {
  border-color: var(--c-fuchsia) !important;
  color: var(--c-fuchsia) !important;
  border-radius: var(--radius) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  padding: 0.6rem 1.1rem !important;
  white-space: nowrap;
}

.category-cta-banner .wp-block-button__link:hover {
  background-color: var(--c-fuchsia) !important;
  color: var(--c-white) !important;
}

@media (max-width: 600px) {
  .category-cta-banner {
    flex-direction: column;
    align-items: flex-start !important;
  }
  .category-cta-banner .wp-block-button__link {
    width: 100%;
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════
   TEXTE SEO + FAQ — bas de page catégorie
   ═══════════════════════════════════════════════════════════ */
.category-seo {
  margin-top: 3.5rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--c-border);
  color: var(--c-text-mid);
  font-size: 0.92rem;
  line-height: 1.75;
}

.category-seo:empty {
  display: none;
}

/* Confort de lecture : le conteneur suit désormais la largeur du site (1440px,
   pour laisser respirer le bloc FAQ ci-dessous, qui a besoin de cette largeur
   pour ses deux colonnes), mais un paragraphe de texte courant sur 1440px est
   difficile à lire — on centre donc le texte de présentation sur une colonne
   de 800px maximum. Le bloc FAQ (.faq-block, deux colonnes) est volontairement
   exclu de cette règle : il gère déjà sa propre largeur en pleine colonne. */
.category-seo > h2,
.category-seo > h3,
.category-seo > p,
.category-seo > ul,
.category-seo > ol {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.category-seo > ul,
.category-seo > ol {
  padding-left: 1.25rem;
}

.category-seo h2 {
  color: var(--c-navy);
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0 0 1rem;
}

.category-seo h3 {
  color: var(--c-navy);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 1.75rem 0 0.5rem;
}

.category-seo p {
  margin: 0 0 1rem;
}

.category-seo ul,
.category-seo ol {
  margin-top: 0;
  margin-bottom: 1rem;
  list-style: disc;
}

.category-seo ol {
  list-style: decimal;
}

.category-seo li {
  margin-bottom: 0.35rem;
}

.category-seo a {
  color: var(--c-fuchsia);
  text-decoration: underline;
}

/* Le CTA du bloc FAQ (.faq-block__cta, défini dans main.css) est un bouton
   plein, pas un lien de corps de texte : la règle générale ".category-seo a"
   ci-dessus est plus spécifique et écrasait son fond + label blanc en le
   réduisant à un lien souligné. On restaure son style bouton ici. */
.category-seo .faq-block__cta {
  color: var(--c-white);
  text-decoration: none;
}

.category-seo .faq-block__cta:hover {
  color: var(--c-white);
}

/* FAQ : entourer chaque question/réponse d'un <div class="faq-item"> dans la
   description de catégorie pour bénéficier du schema.org FAQPage généré
   automatiquement (voir functions.php). La présentation (bloc éditorial +
   accordéon) est générée au rendu par aplastic94_wrap_faq_blocks() — voir
   les classes .faq-block / .faq-accordion__* dans main.css. */