/* ============================================================
   L'ATELIER — PAGE CATÉGORIE — COLLE TECHNIQUE UNIQUEMENT
   Le design décoratif (.cathead, .toolbar, .pcard, .filters/.fg/.chips/
   .range, .pager, .seo…) est fourni VERBATIM par atelier-maquette.css :
   le markup réel porte désormais ces classes exactes. Ce fichier ne
   contient QUE la colle nécessaire pour réconcilier le DOM/CSS réel de
   PrestaShop (Bootstrap, <style> inline du layout, markup ps_facetedsearch)
   avec ces classes — aucune redéfinition de style décoratif.
   ============================================================ */

/* le hook displayContentWrapperTop rend un <aside id="search_filters_wrapper"
   class="filters"> VIDE (ps_facetedsearch sans facettes configurées) → boîte
   bordée vide en haut. Masqué tant que les facettes ne sont pas configurées.
   (Le vrai panneau filtres est .catgrid > aside.filters, sans cet id.) */
#search_filters_wrapper{ display:none; }

/* ---- Layout maquette : catégorie pleine largeur, cathead en haut, .catgrid [filtres|listing] ----
   Colonnes Bootstrap natives neutralisées ; le hook displayLeftColumn est
   ré-injecté dans .catgrid > aside.filters par product-list.tpl. ---- */
:is(body#category,body#new-products,body#search,body#prices-drop,body#best-sales,body#manufacturer,body#supplier) #left-column,
:is(body#category,body#new-products,body#search,body#prices-drop,body#best-sales,body#manufacturer,body#supplier) #right-column{ display:none !important; }
:is(body#category,body#new-products,body#search,body#prices-drop,body#best-sales,body#manufacturer,body#supplier) #content-wrapper{ width:100%; max-width:none; flex:0 0 100%; padding:0; background:transparent; }
:is(body#category,body#new-products,body#search,body#prices-drop,body#best-sales,body#manufacturer,body#supplier) #main{ padding:0; }
.catgrid{ display:grid; grid-template-columns:248px 1fr; gap:34px; align-items:start; padding-bottom:20px; }
.catgrid-main{ min-width:0; }
.catgrid .filters{ position:sticky; top:16px; }

/* ---- En-tête catégorie : la maquette stylise .cathead p ; le markup réel
   met la description dans #category-description. On mappe la cible. ---- */
.cathead #category-description,
.cathead #category-description p{
  font-family:var(--body);font-size:16px;color:var(--muted);max-width:680px;
}

/* ---- Grille produits : passer en CSS grid 3 colonnes ----
   Le markup réel est #js-product-list > .products(.row) (pas .prow), et un
   <style> inline du layout force .products{display:flex} +
   .contenair_liste_prod/article{max-width:320px/276px} +
   .thumbnail-container img{min-height:274px}. On gagne en spécificité pour
   imposer la grille de la maquette (.prow) et neutraliser ces contraintes. */
#content-wrapper #js-product-list > .products,
#js-product-list .products.row{
  display:grid !important;grid-template-columns:repeat(3,1fr);gap:22px;margin:0;
  max-width:none;align-items:stretch;
}
#content-wrapper #js-product-list .products > .contenair_liste_prod{
  width:auto;max-width:none;min-height:0;padding:0;margin:0;float:none;display:block;
}
#content-wrapper #js-product-list .products .product-miniature{
  width:100%;max-width:none;min-height:0;height:100%;padding:0;
}

/* ---- Carte produit : colle structurelle absente de la maquette ----
   La maquette a <a class="pcard"> en racine. Le markup réel garde
   <article class="product-miniature … pcard"> + un <a class="pcard-link">
   interne (microdata/JS PS). On reproduit le comportement flex du lien
   racine et on neutralise les marges natives du titre. */
.product-miniature.pcard{height:100%;}
.product-miniature.pcard .pcard-link{
  display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none;
}
.product-miniature.pcard h4.product-title{margin:0;}

/* ---- Filtres : enrobage réel #search_filters_wrapper.filters ----
   .filters (fond/bordure/sticky) vient d'atelier-maquette.css ; ici on
   reskine le markup INTERNE généré par ps_facetedsearch pour ressembler
   aux .fg / .chips / .range de la maquette (markup non réécrit). */
.filters #search_filters{padding:0;}
.filters ul{list-style:none;margin:0;padding:0;}

/* Groupe de facette ≈ .fg */
.filters .facet{padding:16px 0;border-bottom:1px dotted var(--line);}
.filters .facet:last-child{border-bottom:0;}

/* Titre de facette ≈ .filters h4 */
.filters .facet-title,
.filters #search_filters > p:first-child{
  font-family:var(--label);text-transform:uppercase;letter-spacing:.12em;
  font-size:12.5px;font-weight:600;color:var(--terracotta-deep);margin-bottom:10px;
}

/* Lignes de facette ≈ .filters label */
.filters .facet-label{
  display:flex;align-items:center;gap:9px;font-family:var(--body);font-size:14.5px;
  padding:4px 0;color:var(--ink);cursor:pointer;margin:0;
}
.filters .facet-label.active,
.filters .facet-label:hover{color:var(--terracotta-deep);}
.filters .facet-label a{color:inherit;flex:1;}
/* checkbox custom ps_facetedsearch : theme.css cachait l'input natif et stylait le
   <span class="ps-shown-by-js"> (coche). Sans theme.css les deux s'affichent
   (coche doublée). On masque le span décoratif et on affiche l'input natif stylé. */
.filters .custom-checkbox{display:inline-flex;align-items:center;}
.filters .custom-checkbox .ps-shown-by-js{display:none !important;}
.filters .custom-checkbox input[type=checkbox]{opacity:1;position:static;margin:0;}
.filters input[type=checkbox],
.filters input[type=radio]{accent-color:var(--terracotta);width:15px;height:15px;}
.filters .magnitude{margin-left:auto;color:var(--muted);font-size:12px;}

/* Pastilles couleur ≈ .chips */
.filters .color{width:18px;height:18px;border:1px solid var(--line);display:inline-block;}

/* Slider prix (jQuery UI) — override COMPLET du style jQuery UI par défaut
   (jquery-ui.min.css est chargé) pour coller à la maquette (.range). */
.filters .faceted-slider{ list-style:none; padding:6px 6px 2px; margin:0; }
.filters .faceted-slider p{ font-family:var(--label); text-transform:uppercase; letter-spacing:.08em;
  font-size:12.5px; color:var(--muted); margin:0 0 4px; }
/* la barre */
.filters .ui-slider{ position:relative; height:5px; background:var(--line) !important; border:0 !important;
  border-radius:3px; margin:20px 9px 14px; }
.filters .ui-slider .ui-slider-range{ position:absolute; top:0; height:100%; background:var(--terracotta) !important;
  border:0 !important; border-radius:3px; }
/* les poignées (jQuery UI met .ui-state-default avec bordure/bg image) */
.filters .ui-slider .ui-slider-handle,
.filters .ui-slider .ui-state-default{ position:absolute; top:-7px; width:18px; height:18px; margin-left:-9px;
  background:var(--petrol) !important; border:2px solid var(--paper) !important; border-radius:50% !important;
  box-shadow:0 1px 4px rgba(33,41,31,.35); cursor:pointer; outline:none; }
.filters .ui-slider .ui-slider-handle:hover,
.filters .ui-slider .ui-slider-handle.ui-state-active,
.filters .ui-slider .ui-state-hover{ background:var(--terracotta-deep) !important; }
/* neutraliser les fonds/dégradés jQuery UI */
.filters .ui-widget-content{ background:var(--line) !important; border:0 !important; }
.filters .ui-widget-header{ background:var(--terracotta) !important; }
.filters .ui-corner-all{ border-radius:3px; }
/* affichage de la plage (valeurs + bouton) */
.filters #facet_label,
.filters [id^=facet_label],
.filters .ps-emptyClearAll,
.filters .slider-value{ font-family:var(--body); font-size:14px; color:var(--ink); }

/* Bouton "tout effacer" (généré par le module) */
.filters .js-search-filters-clear-all{
  font-family:var(--label);text-transform:uppercase;letter-spacing:.08em;font-size:11px;
  background:transparent;border:1px solid var(--line);color:var(--terracotta-deep);
  padding:6px 12px;cursor:pointer;margin-top:10px;
}
.filters .js-search-filters-clear-all:hover{
  background:var(--petrol);color:var(--paper);border-color:var(--petrol);
}

/* ---- Toolbar : colle des éléments PS absents de la maquette ---- */
.toolbar .toolbar-actions{display:flex;align-items:center;gap:12px;}
.toolbar .sort-label{
  font-family:var(--label);text-transform:uppercase;letter-spacing:.1em;
  font-size:12px;color:var(--muted);
}
.toolbar select.atelier-sort{
  font-family:var(--body);border:1px solid var(--line);background:#fff;
  padding:8px 12px;font-size:14px;color:var(--ink);cursor:pointer;
}
.toolbar .filter-button{
  font-family:var(--label);text-transform:uppercase;letter-spacing:.1em;font-size:12px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:8px 14px;cursor:pointer;
}

/* ---- Pagination : .pager vient d'atelier-maquette.css ; ici états PS ---- */
.pagination .pager{flex-wrap:wrap;}
.pagination .pager .spacer{
  min-width:40px;height:40px;display:grid;place-items:center;
  border:0;background:transparent;color:var(--muted);
}
.pagination .pager a.disabled{opacity:.4;pointer-events:none;}

/* ---- Sidebar gauche RÉELLE (recherche + arbre catégories) habillée en carte .filters ----
   Tant que les facettes ps_facetedsearch ne sont pas configurées en admin, le
   .filters affiche le widget recherche + .block-categories (ps_categorytree).
   On l'habille comme la carte .filters de la maquette (sinon : bloc blanc brut). */
.filters{ background:var(--paper); border:1px solid var(--line); padding:16px 20px 20px; }
/* confinement : rien ne doit dépasser la carte filtres (search, slider, etc.) */
.filters, .filters *{ box-sizing:border-box; max-width:100%; }
/* widget recherche : le markup PS porte la classe `search-widget` (tiret) ET
   l'id `search_widget` (underscore) → on cible les deux (le CSS ne ciblait que
   l'underscore → input non stylé qui débordait). */
.filters .search-widget,
.filters .search_widget,
.filters #search_widget{ margin:0 0 14px; }
.filters .search-widget form,
.filters .search_widget form{ display:flex; position:relative; width:100%; }
.filters .search-widget input[type=text],
.filters .search_widget input[type=text]{ width:100%; height:36px; border:1px solid var(--line);
  background:#fff; padding:0 34px 0 12px; font-family:var(--body); font-size:14px; color:var(--ink); border-radius:2px; }
.filters .search-widget button,
.filters .search_widget button{ background:transparent; border:0; position:absolute; right:6px;
  top:50%; transform:translateY(-50%); color:var(--terracotta-deep); padding:0; cursor:pointer; }
.filters .search-widget button span{ display:none; } /* libellé "Search" texte → on garde l'icône */
.filters .block-categories{ border-top:1px dotted var(--line); padding-top:14px; }
.filters .block-categories::before{ content:"Catégories"; display:block; font-family:var(--label);
  text-transform:uppercase; letter-spacing:.12em; font-size:12.5px; font-weight:600;
  color:var(--terracotta-deep); margin-bottom:10px; }
.filters .block-categories ul{ list-style:none; padding:0; margin:0; }
.filters .block-categories li{ margin:0; }
.filters .block-categories a{ display:block; font-family:var(--body); font-size:14px;
  color:var(--ink); padding:4px 0; line-height:1.3; }
.filters .block-categories a:hover{ color:var(--terracotta-deep); }
.filters .block-categories a.a_on,
.filters .block-categories .nav-item.active > a{ color:var(--terracotta-deep); font-weight:600; }

/* ============================================================
   RESPONSIVE — pages catégorie / listing
   Breakpoints : 1024 (tablette : .catgrid 1 col + filtres repliables),
   768 (produits 3→2), 480 (produits →1). Baseline testée : 360px.
   ============================================================ */

/* Toggle « Filtrer » CSS-only : masqué hors mobile. La checkbox #filters-toggle
   et le <label.filters-toggle-label> sont rendus par product-list.tpl ;
   .filters-body enrobe tout le contenu des filtres pour pouvoir le replier. */
.filters-toggle-input{display:none;}
.filters-toggle-label{display:none;}

/* ---- ≤1024px : la sidebar filtres passe AU-DESSUS de la grille,
   pleine largeur, et le contenu se replie derrière le bouton « Filtrer ». ---- */
@media(max-width:1024px){
  .catgrid{grid-template-columns:1fr;gap:20px;}
  .catgrid .filters,
  #search_filters_wrapper.filters{position:static;top:auto;}

  /* bouton « Filtrer » plein largeur */
  .filters .filters-toggle-label{
    display:flex;align-items:center;justify-content:space-between;
    font-family:var(--label);text-transform:uppercase;letter-spacing:.1em;
    font-size:12.5px;font-weight:600;color:var(--terracotta-deep);
    padding:12px 4px;margin:0;cursor:pointer;min-height:44px;
  }
  .filters .filters-toggle-label::after{
    content:"+";font-size:20px;line-height:1;color:var(--terracotta-deep);
  }
  .filters-toggle-input:checked ~ .filters .filters-toggle-label::after{content:"–";}

  /* contenu replié par défaut sur mobile */
  .filters .filters-body{display:none;}
  .filters-toggle-input:checked ~ .filters .filters-body{display:block;}

  /* la carte filtres respire moins en mode plié */
  .catgrid > .filters{padding:0 16px;}

  /* le bouton « Filtrer » natif PS (#search_filter_toggler.filter-button, piloté
     par JS) ferait doublon avec notre toggle CSS-only → masqué sur mobile. */
  .toolbar .filter-button{display:none;}
}

/* ---- ≤768px : produits 3 → 2 colonnes ----
   (la grille de base ligne ~43 porte !important → on surenchérit) */
@media(max-width:768px){
  #content-wrapper #js-product-list > .products,
  #js-product-list .products.row{grid-template-columns:repeat(2,1fr) !important;gap:16px;}

  .cathead{padding:14px 0 22px;}

  /* toolbar : autoriser le retour à la ligne tri + compteur */
  .toolbar{flex-wrap:wrap;gap:10px;}
  .toolbar .toolbar-actions{flex-wrap:wrap;min-width:0;}
  /* select de tri : ne jamais déborder à droite */
  .toolbar select.atelier-sort{max-width:100%;min-width:0;}
}

/* ---- ≤480px : produits → 1 colonne ---- */
@media(max-width:480px){
  #content-wrapper #js-product-list > .products,
  #js-product-list .products.row{grid-template-columns:1fr !important;gap:18px;}

  .toolbar{justify-content:flex-start;}
  .toolbar .toolbar-actions{width:100%;}
  .toolbar select.atelier-sort{flex:1;}

  /* pager centré, cibles ≥40px (déjà 40 dans la maquette) */
  .pagination .pager,.pager{flex-wrap:wrap;gap:6px;margin-top:24px;}

  /* bloc SEO : padding réduit, reste lisible */
  .seo{padding:20px 18px;}
}