/* ==========================================================================
   WELLPUTT — page categorie (page)

   Chargee seulement sur une page categorie, quand « Habiller la liste » ou
   « Reprendre la mise en page » est actif. C'est la feuille v1 (wpcategory)
   reprise telle quelle sous le prefixe .wp-* ; la banniere, le bandeau
   d'arguments et les sections sont dans front.css.

   1. .wp-cat             mise en page complete : colonne de filtres, liste
   2. html.wp-cat-skin    habillage de la grille et des cartes produit,
                          reconstruites par front.js (.wp-lcard)
   3. barre d'outils (compteur + tri du module)
   ========================================================================== */

.wp-cat{ display:block; }
/* Comme en v1 : la marge laterale est portee par le conteneur, mesure par front.js. */
.wp-cat .wp-section,
.wp-cat .wp-section--text{ padding-left:0 !important; padding-right:0 !important; }
@media (max-width:640px){
  .wp-cat .wp-section,
  .wp-cat .wp-section--text{ padding-left:20px !important; padding-right:20px !important; }
}

/* Colonne de filtres */
.wp-cat__layout{ display:block; }
@media (min-width:1000px){
  .wp-cat__layout--side{
    display:grid;
    grid-template-columns:clamp(200px,16vw,260px) minmax(0,1fr);
    gap:clamp(28px,3vw,56px);
    align-items:start;
  }
}
.wp-side{ margin-bottom:32px; }
.wp-side--left{ position:sticky; top:100px; }
@media (max-width:999px){ .wp-side--left{ position:static; } }
.wp-side__title{
  font-family:var(--wp-title); font-weight:600; text-transform:uppercase;
  letter-spacing:2.5px; font-size:13px; color:#999;
  margin:0 0 16px; padding-bottom:14px; border-bottom:1px solid rgba(0,0,0,.1);
}
.wp-side--top .wp-side__title{ display:none; }
/* Titre + « Effacer les filtres » sur une ligne, le trait passe sous les deux. */
.wp-side__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin:0 0 16px; padding-bottom:14px; border-bottom:1px solid rgba(0,0,0,.1);
}
.wp-side__head .wp-side__title{ margin:0; padding:0; border:0; }
button.wp-side__title{ background:none; cursor:default; text-align:left; line-height:inherit; }
.wp-side__clear{
  padding:0; border:0; background:none; cursor:pointer;
  font-family:var(--wp-title); font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--wp-accent); text-decoration:underline; text-underline-offset:3px;
}
.wp-side__clear:hover,
.wp-side__clear:focus-visible{ color:var(--wp-ink); }
.wp-side__clear[hidden]{ display:none; }
.wp-side--top .wp-side__head{ border:0; padding:0; margin:0 0 10px; justify-content:flex-end; }
.wp-side--top .wp-side__inner{ display:flex; flex-wrap:wrap; gap:18px; align-items:flex-start; }
.wp-main{ min-width:0; }
.wp-listhead{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; }

/* Les blocs de la colonne gauche du theme se remettent en flux vertical */
.wp-side__inner > *{ margin-bottom:22px; }
.wp-side__inner .block,
.wp-side__inner .block-categories,
.wp-side__inner #search_filters{ box-shadow:none; border:0; padding:0; background:transparent; }

/* Curseur de prix (noUiSlider de ps_facetedsearch) aux couleurs du site : barre fine, plage
   orange, poignees rondes. Le dessin d'origine (poignees de 8 px, blanches) etait invisible. */
#search_filters_wrapper .noUi-target{
  height:4px; margin:16px 9px 10px; border:0; border-radius:2px; box-shadow:none; background:rgba(0,0,0,.1);
}
#search_filters_wrapper .noUi-connect{ background:var(--wp-accent); }
#search_filters_wrapper .noUi-horizontal .noUi-handle{
  width:18px; height:18px; top:-7px; right:-9px; border:2px solid var(--wp-accent); border-radius:50%;
  background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.15); cursor:grab;
}
#search_filters_wrapper .noUi-handle::before,
#search_filters_wrapper .noUi-handle::after{ display:none; }
#search_filters_wrapper .noUi-handle:active{ cursor:grabbing; transform:scale(1.1); }
#search_filters_wrapper .noUi-handle:focus-visible{ outline:2px solid var(--wp-ink); outline-offset:2px; }

/* Zone de liste */
.wp-cat__list{ background:#fff; padding:clamp(34px,5vh,64px) 0 clamp(50px,7vh,90px); }
.wp-count{
  font-family:var(--wp-title); font-size:13px; letter-spacing:2px;
  text-transform:uppercase; color:#999; margin:0;
}
.wp-count[hidden]{ display:none !important; }
.wp-cat__title{ margin:0 0 24px; }
.wp-tools{ margin:0; }
.wp-facets{ margin-bottom:26px; }
.wp-activefilters{ margin-bottom:20px; }
.wp-pagination{ margin-top:clamp(30px,4vh,56px); }

/* ---------- 2. Habillage des blocs natifs -------------------------------- */
/* La grille */
html.wp-cat-skin .wp-cat .products,
html.wp-cat-skin .wp-cat #js-product-list .products{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:clamp(18px,2vw,30px) !important;
  margin:0 !important;
}
/* Grand ecran : 4 colonnes. Memes selecteurs que la regle de base (avec #js-product-list,
   plus fort) : sans lui la grille restait a 3 colonnes tres larges. */
@media (min-width:1500px){
  html.wp-cat-skin .wp-cat .products,
  html.wp-cat-skin .wp-cat #js-product-list .products{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
}
@media (max-width:1100px){
  html.wp-cat-skin .wp-cat .products{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
html.wp-cat-skin .wp-cat .products > *{
  width:auto !important; max-width:none !important; flex:initial !important;
  margin:0 !important; padding:0 !important; display:flex !important;
}

/* La carte, reconstruite par le JS du module (.wp-lcard) */
/* La banniere colle au menu : le theme laisse 15 px au-dessus du contenu, sur le fond gris de
   #wrapper, ce qui faisait une bande grise entre le menu et la banniere. Seulement quand la page
   a une banniere : sans elle, le fil d'Ariane garde son espace sous le menu. */
html.wp-cat-skin #wrapper:has(.wp-catbanner){ padding-top:0 !important; }

html.wp-cat-skin .wp-cat .wp-lcard{
  position:relative !important; display:flex !important; flex-direction:column !important;
  width:100% !important; height:100% !important; margin:0 !important; padding:0 !important;
  background:#fff !important; border:1px solid rgba(0,0,0,.13) !important;
  border-radius:12px !important; overflow:hidden !important; text-align:left !important;
  box-shadow:none !important;
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1), border-color .3s ease !important;
}
html.wp-cat-skin .wp-cat .wp-lcard:hover{
  transform:translateY(-6px) !important; box-shadow:0 22px 50px rgba(0,0,0,.12) !important;
  border-color:rgba(0,0,0,.16) !important;
}
html.wp-cat-skin .wp-cat .wp-lcard__media{
  position:relative !important; display:block !important; background:#fff !important;
  aspect-ratio:1/1 !important; overflow:hidden !important;
  padding:0 !important; margin:0 !important; border:0 !important; line-height:0 !important;
}
html.wp-cat-skin .wp-cat .wp-lcard__media img{
  position:absolute !important; top:0 !important; left:0 !important;
  width:100% !important; height:100% !important; max-width:none !important; max-height:none !important;
  object-fit:contain !important; object-position:center !important;
  padding:18px !important; box-sizing:border-box !important;
  background:transparent !important; border-radius:0 !important; image-rendering:auto !important;
}
/* Survol : la photo zoome doucement ; avec une 2e photo (preparee par le theme), elle s'efface
   et la 2e se pose en fondu */
html.wp-cat-skin .wp-cat .wp-lcard__img{ transition:opacity .45s ease, transform .9s cubic-bezier(.16,1,.3,1) !important; }
html.wp-cat-skin .wp-cat .wp-lcard__img--alt{ opacity:0 !important; transform:scale(1.08); }
@media (hover:hover){
  html.wp-cat-skin .wp-cat .wp-lcard:hover .wp-lcard__img{ transform:scale(1.05); }
  html.wp-cat-skin .wp-cat .wp-lcard--alt:hover .wp-lcard__img:not(.wp-lcard__img--alt){ opacity:0 !important; }
  html.wp-cat-skin .wp-cat .wp-lcard--alt:hover .wp-lcard__img--alt{ opacity:1 !important; transform:scale(1); }
}
@media (prefers-reduced-motion:reduce){
  html.wp-cat-skin .wp-cat .wp-lcard__img{ transform:none !important; transition:opacity .3s ease !important; }
}
html.wp-cat-skin .wp-cat .wp-lcard__flags{
  position:absolute !important; top:16px !important; left:16px !important;
  right:auto !important; bottom:auto !important;
  margin:0 !important; padding:0 !important; list-style:none !important;
  display:flex !important; flex-direction:column !important; align-items:flex-start !important;
  gap:6px !important; z-index:2 !important; line-height:1 !important; width:auto !important;
}
html.wp-cat-skin .wp-cat .wp-lcard__flag{
  font-family:var(--wp-title) !important; font-size:11px !important; font-weight:500 !important;
  letter-spacing:1.4px !important; text-transform:uppercase !important;
  padding:8px 12px 7px !important; margin:0 !important; border:0 !important; border-radius:0 !important;
  background:var(--wp-ink) !important; color:#fff !important;
  line-height:1 !important; white-space:nowrap !important;
  display:block !important; width:auto !important; height:auto !important; box-sizing:border-box !important;
  min-height:0 !important; text-align:left !important; box-shadow:none !important; opacity:1 !important;
}
html.wp-cat-skin .wp-cat .wp-lcard__flag--accent{ background:var(--wp-accent) !important; }
html.wp-cat-skin .wp-cat .wp-lcard__body{
  display:flex !important; flex-direction:column !important; flex:1 1 auto !important;
  padding:20px 20px 22px !important; margin:0 !important;
}
html.wp-cat-skin .wp-cat .wp-lcard__eyebrow{
  font-family:var(--wp-title); font-weight:400; font-size:11px; letter-spacing:2.4px;
  text-transform:uppercase; color:#9a9a9a; margin:0 0 8px !important;
}
html.wp-cat-skin .wp-cat .wp-lcard__title{
  font-family:var(--wp-title); font-weight:500; text-transform:uppercase; letter-spacing:.6px;
  font-size:17px; line-height:1.25; margin:0 0 10px !important;
}
html.wp-cat-skin .wp-cat .wp-lcard__title a{ color:var(--wp-ink); text-decoration:none; }
html.wp-cat-skin .wp-cat .wp-lcard__title a:hover{ color:var(--wp-accent); }
html.wp-cat-skin .wp-cat .wp-lcard__text{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-weight:300; font-size:13.5px; line-height:1.55; color:var(--wp-muted); margin:0 0 18px !important;
}
html.wp-cat-skin .wp-cat .wp-lcard__variants{ margin:0 0 16px; }
html.wp-cat-skin .wp-cat .wp-lcard__variants .variant-links{ display:flex; gap:8px; align-items:center; }
html.wp-cat-skin .wp-cat .wp-lcard__variants .color{
  width:22px !important; height:22px !important; border-radius:50% !important;
  display:inline-block !important; border:1px solid rgba(0,0,0,.15) !important; margin:0 !important;
}
html.wp-cat-skin .wp-cat .wp-lcard__foot{
  display:flex !important; align-items:flex-end !important; justify-content:space-between !important;
  gap:10px !important; margin-top:auto !important;
  /* Jamais de passage a la ligne carte par carte : front.js (cardFeet) mesure et, si une
     seule carte deborde, empile prix et bouton dans toutes (.wp-cat--stack, plus bas). */
  flex-wrap:nowrap !important;
}
/* Prix barre AU-DESSUS du prix (petit, gris) : le bloc prix n'est pas plus large qu'un prix
   seul, donc une promo ne fait pas empiler toute la grille. Ligne du prix haute comme le
   bouton (40 px) et bas de carte aligne en bas : prix et boutons alignes sur toute la rangee. */
html.wp-cat-skin .wp-cat .wp-lcard__price{
  font-family:var(--wp-title); font-weight:600; font-size:22px; color:var(--wp-ink);
  display:inline-flex; flex-direction:column-reverse; align-items:flex-start; gap:0; line-height:40px;
  white-space:nowrap; flex:0 0 auto;
}
html.wp-cat-skin .wp-cat .wp-lcard__cta{ flex:0 0 auto; }
html.wp-cat-skin .wp-cat .wp-lcard__old{
  font-family:var(--wp-body); font-weight:300; font-size:14px; line-height:1.2; color:#aaa; text-decoration:line-through;
}
html.wp-cat-skin .wp-cat .wp-lcard__cta form{ margin:0 !important; padding:0 !important; }
html.wp-cat-skin .wp-cat .wp-lcard__cta .input-group-add-cart{ display:block !important; }
html.wp-cat-skin .wp-cat .wp-lcard__cta .input-qty{ display:none !important; }
/* « Ajouter au panier + » / « Choisir » (2026-10-29) : vrai bouton orange, texte blanc
   (c'etait un lien orange sans fond, pas assez visible). Survol et focus : l'orange fonce
   des boutons du site (#D9471C) ; focus clavier : contour noir en plus. Desactive (produit
   non commandable, ajout en cours) : gris, texte gris fonce. La fiche produit n'est pas concernee.
   Jamais de « display » ici : les modules Wellstroke / Ghost Hole (produits personnalisables) et
   les produits en rupture masquent ce bouton par display:none, il doit le rester. La hauteur
   vient donc du padding (11 + 16 + 11 + bordures = 40 px). */
html.wp-cat-skin .wp-cat .wp-lcard__cta button,
html.wp-cat-skin .wp-cat .wp-lcard__cta a{
  background:var(--wp-accent) !important; border:1px solid var(--wp-accent) !important; border-radius:4px !important;
  box-shadow:none !important; color:#fff !important; padding:11px 12px !important; margin:0 !important;
  width:auto !important; min-width:0 !important; min-height:0 !important; height:auto !important;
  font-family:var(--wp-title) !important; font-weight:600 !important; font-size:13px !important; line-height:16px !important;
  text-align:center !important; vertical-align:middle !important;
  letter-spacing:.8px !important; text-transform:uppercase !important; white-space:nowrap !important;
  cursor:pointer !important; text-decoration:none !important;
}
html.wp-cat-skin .wp-cat .wp-lcard__cta button:is(:hover, :focus-visible),
html.wp-cat-skin .wp-cat .wp-lcard__cta a:is(:hover, :focus-visible){
  background:#D9471C !important; border-color:#D9471C !important; color:#fff !important;
}
html.wp-cat-skin .wp-cat .wp-lcard__cta button:focus-visible,
html.wp-cat-skin .wp-cat .wp-lcard__cta a:focus-visible{ outline:2px solid var(--wp-ink) !important; outline-offset:2px !important; }
html.wp-cat-skin .wp-cat .wp-lcard__cta button:is(:disabled, .disabled),
html.wp-cat-skin .wp-cat .wp-lcard__cta a.disabled{
  background:#e4e4e4 !important; border-color:#e4e4e4 !important; color:#5c5c5c !important;
  cursor:not-allowed !important; translate:none !important; opacity:1 !important;
}

html.wp-cat-skin .wp-cat .products-sort-order .select-title,
html.wp-cat-skin .wp-cat .facet-title,
html.wp-cat-skin .wp-cat .h6,
html.wp-cat-skin .wp-cat .facet .collapse-icons + .facet-title{
  font-family:var(--wp-title); text-transform:uppercase; letter-spacing:1.2px; font-size:13.5px;
}
html.wp-cat-skin .wp-cat .btn-primary,
html.wp-cat-skin .wp-cat .product-miniature .add-to-cart{
  font-family:var(--wp-title); font-weight:600; letter-spacing:1.6px;
  text-transform:uppercase; border-radius:4px;
}
html.wp-cat-skin .wp-cat .btn-primary{
  background:var(--wp-accent); border-color:var(--wp-accent); color:#fff;
}
html.wp-cat-skin .wp-cat .btn-primary:hover{
  background:#d8491f; border-color:#d8491f;
}
html.wp-cat-skin .wp-cat .pagination .page-list .current a,
html.wp-cat-skin .wp-cat .pagination a:hover{ color:var(--wp-accent); }

/* Barre d'outils de la liste : compteur a gauche, tri a droite, une seule ligne */
html.wp-cat-skin .wp-cat .wp-toolbar{
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  gap:20px !important; flex-wrap:wrap !important;
  padding:0 0 16px !important; margin:0 0 26px !important;
  border-bottom:1px solid rgba(0,0,0,.1) !important;
}
html.wp-cat-skin .wp-cat .wp-toolbar .wp-listhead{ margin:0 !important; }
html.wp-cat-skin .wp-cat .wp-toolbar #js-product-list-top{ margin:0 !important; }
/* "Showing 1-7 of 7 item(s)" du theme : redondant avec notre compteur */
html.wp-cat-skin .wp-cat .wp-tools .total-products,
html.wp-cat-skin .wp-cat .wp-tools .hidden-sm-down.total-products,
html.wp-cat-skin .wp-cat .wp-tools .showing{ display:none !important; }
html.wp-cat-skin .wp-cat .wp-tools .row,
html.wp-cat-skin .wp-cat .wp-tools .products-selection{
  display:flex !important; align-items:center !important; justify-content:flex-end !important;
  margin:0 !important; width:auto !important;
}
html.wp-cat-skin .wp-cat .wp-tools .products-sort-order{ margin:0 !important; }

/* Tri du module. Le compteur et le tri du theme (#js-product-list-top) font
   doublon avec la barre du module des que la page est reprise, habillee ou non. */
.wp-cat #js-product-list-top{ display:none !important; }
.wp-sort{ display:flex; align-items:center; gap:12px; }
.wp-sort__label{
  font-family:var(--wp-title); font-size:12px; letter-spacing:2px;
  text-transform:uppercase; color:#999; margin:0;
}
.wp-sort__select{
  font-family:var(--wp-title); font-size:13px; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--wp-ink); background:#fff; border:1px solid rgba(0,0,0,.16);
  border-radius:2px; padding:10px 34px 10px 14px; line-height:1;
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23111' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; background-size:9px;
}
.wp-sort__select:focus{ outline:none; border-color:var(--wp-accent); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1099px){
  html.wp-cat-skin .wp-cat .products{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:999px){
  /* Les filtres passent au-dessus de la grille, en flux */
  .wp-cat__layout--side{ display:block !important; }
  .wp-side{ margin-bottom:26px; }
  .wp-side--left{ position:static !important; top:auto !important; }
  .wp-side__inner{ display:flex; flex-wrap:wrap; gap:14px 26px; }
  .wp-side__inner > *{ margin-bottom:12px; flex:1 1 240px; min-width:0; }
  html.wp-cat-skin .wp-cat .wp-toolbar{ align-items:flex-start !important; }
}
@media (max-width:767px){
  html.wp-cat-skin .wp-cat .wp-toolbar{
    flex-direction:column !important; align-items:stretch !important; gap:12px !important;
    padding-bottom:14px !important; margin-bottom:20px !important;
  }
  .wp-sort{ width:100%; justify-content:space-between; }
  /* Filtres repliables sur mobile : ils repoussaient la liste des produits de 400 px. */
  .wp-side--left button.wp-side__title{
    cursor:pointer; color:var(--wp-ink); display:inline-flex; align-items:center; gap:10px;
    min-height:44px; margin:-12px 0;
  }
  .wp-side--left button.wp-side__title::after{
    content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:translateY(2px) rotate(-135deg); transition:transform .2s;
  }
  .wp-side--collapsed button.wp-side__title::after{ transform:translateY(-2px) rotate(45deg); }
  .wp-side--collapsed .wp-side__inner{ display:none !important; }
  .wp-side--collapsed .wp-side__head{ margin-bottom:0; }
  .wp-sort__select{ flex:1 1 auto; max-width:60%; }
  .wp-cat__list{ padding-top:26px; padding-bottom:40px; }
}
/* Telephone (2026-11-05) : 2 produits par ligne comme en tablette (c'etait 1 grande carte par
   ligne). Cartes d'environ 170 px : tout est resserre (marges, photo, textes), le nom et les
   etoiles passent l'un sous l'autre, la description garde 2 lignes, les etiquettes wplabels
   reviennent a la ligne au lieu de deborder, prix au-dessus et bouton pleine largeur (plus bas). */
@media (max-width:640px){
  html.wp-cat-skin .wp-cat .products{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; }
  html.wp-cat-skin .wp-cat .wp-lcard{ border-radius:10px !important; }
  html.wp-cat-skin .wp-cat .wp-lcard__media img{ padding:10px !important; }
  html.wp-cat-skin .wp-cat .wp-lcard__body{ padding:12px 12px 14px !important; }
  html.wp-cat-skin .wp-cat .wp-lcard__eyebrow{ font-size:10px; letter-spacing:1.6px; margin-bottom:6px !important; }
  html.wp-cat-skin .wp-cat .wp-lcard__titleline{ flex-direction:column !important; align-items:flex-start !important; gap:5px !important; }
  html.wp-cat-skin .wp-cat .wp-lcard__title{ font-size:15px !important; letter-spacing:.3px; line-height:1.2; overflow-wrap:anywhere; }
  html.wp-cat-skin .wp-cat .wp-lcard__title:not(.wp-lcard__titleline .wp-lcard__title){ margin-bottom:6px !important; }
  html.wp-cat-skin .wp-cat .wp-lcard .wpl--mini_name{ margin:8px 0 2px !important; gap:4px !important; }
  html.wp-cat-skin .wp-cat .wp-lcard .wpl--mini_name .wpl__tag{ font-size:9.5px !important; padding:4px 6px !important; letter-spacing:.3px !important; }
  html.wp-cat-skin .wp-cat .wp-lcard__text{ font-size:12px !important; line-height:1.45 !important; margin:6px 0 12px !important; }
  html.wp-cat-skin .wp-cat .wp-lcard__price{ font-size:18px !important; }
  html.wp-cat-skin .wp-cat .wp-lcard__old{ font-size:12px; }
  /* Cible tactile : le bouton panier garde 40 px de haut ; texte resserre, et s'il ne tient
     toujours pas (libelle anglais plus long), il passe sur 2 lignes au lieu de deborder. */
  html.wp-cat-skin .wp-cat .wp-lcard__cta button,
  html.wp-cat-skin .wp-cat .wp-lcard__cta a{
    padding:12px 6px !important; font-size:11.5px !important; letter-spacing:.4px !important;
    line-height:14px !important; white-space:normal !important;
  }
  html.wp-cat-skin .wp-cat .wp-lcard__flags{ top:8px !important; left:8px !important; gap:4px !important; }
  html.wp-cat-skin .wp-cat .wp-lcard__flag{ font-size:9.5px !important; letter-spacing:1px !important; padding:5px 7px 4px !important; }
}


/* Le theme cible la grille via un ID (#js-product-list) : il faut au moins
   autant de poids que lui pour reprendre le nombre de colonnes en mobile. */
@media (max-width:1099px){
  html.wp-cat-skin .wp-cat #js-product-list .products{
    display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media (max-width:640px){
  html.wp-cat-skin .wp-cat #js-product-list .products{
    display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important;
  }
  html.wp-cat-skin .wp-cat #js-product-list .products > *{
    width:auto !important; max-width:none !important; flex:initial !important;
  }
}
/* Prix et bouton empiles dans TOUTES les cartes, bouton pleine largeur : sur telephone,
   ou des qu'une carte n'a pas la place pour la ligne (classe posee par front.js). */
html.wp-cat-skin .wp-cat.wp-cat--stack .wp-lcard__foot{
  flex-direction:column !important; align-items:stretch !important; gap:12px !important;
}
html.wp-cat-skin .wp-cat.wp-cat--stack .wp-lcard__price{ line-height:1.2; }
html.wp-cat-skin .wp-cat.wp-cat--stack .wp-lcard__cta,
html.wp-cat-skin .wp-cat.wp-cat--stack .wp-lcard__cta button,
html.wp-cat-skin .wp-cat.wp-cat--stack .wp-lcard__cta a{ width:100% !important; }
@media (max-width:640px){
  html.wp-cat-skin .wp-cat .wp-lcard__foot{
    flex-direction:column !important; align-items:stretch !important; gap:12px !important;
  }
  html.wp-cat-skin .wp-cat .wp-lcard__price{ line-height:1.2; }
  html.wp-cat-skin .wp-cat .wp-lcard__cta,
  html.wp-cat-skin .wp-cat .wp-lcard__cta button,
  html.wp-cat-skin .wp-cat .wp-lcard__cta a{ width:100% !important; }
}


/* ---------- Cartes habillees sans reprise de la page --------------------- *
 * Le hook displayProductListReviews ajoute surtitre, phrase et note dans la
 * miniature du theme ; ici seulement leur typographie.                      */
.wp-minicard{ margin:6px 0 10px; }
.wp-minicard__eyebrow{
  font-family:var(--wp-title); font-size:11px; letter-spacing:2.4px; text-transform:uppercase;
  color:#9a9a9a; margin:0 0 4px;
}
.wp-minicard__desc{ font-weight:300; font-size:13px; line-height:1.5; color:var(--wp-muted); margin:0; }

/* ---------- Cartes du guide quand les cartes produit sont habillees -------
 * En v1 le guide d'achat et les produits partageaient la classe .wpc-card :
 * avec l'habillage actif, les cartes du guide prenaient donc le meme
 * traitement que les produits (fond blanc, bordure, visuel carre entier,
 * survol qui souleve, texte sur deux lignes). Repris a l'identique.       */
html.wp-cat-skin .wp-cat .wp-feature{
  position:relative !important; display:flex !important; flex-direction:column !important;
  background:#fff !important; border:1px solid rgba(0,0,0,.13) !important;
  border-radius:12px !important; overflow:hidden !important; text-align:left !important; box-shadow:none !important;
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1), border-color .3s ease !important;
}
html.wp-cat-skin .wp-cat .wp-feature:hover{
  transform:translateY(-6px) !important; box-shadow:0 22px 50px rgba(0,0,0,.12) !important;
  border-color:rgba(0,0,0,.16) !important; background:#fff !important;
}
html.wp-cat-skin .wp-cat .wp-feature__media{
  position:relative !important; display:block !important; background:#fff !important;
  aspect-ratio:1/1 !important; overflow:hidden !important; line-height:0 !important;
}
html.wp-cat-skin .wp-cat .wp-feature__media img{
  position:absolute !important; top:0 !important; left:0 !important;
  width:100% !important; height:100% !important; object-fit:contain !important;
  padding:18px !important; box-sizing:border-box !important;
}
html.wp-cat-skin .wp-cat .wp-feature__body{
  display:flex !important; flex-direction:column !important; flex:1 1 auto !important;
  padding:20px 20px 22px !important;
}
html.wp-cat-skin .wp-cat .wp-feature__title{
  font-weight:500; letter-spacing:.6px; font-size:17px; line-height:1.25; margin:0 0 10px !important;
}
html.wp-cat-skin .wp-cat .wp-feature__text{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:13.5px; line-height:1.55; margin:0 0 18px !important;
}
@media (max-width:640px){
  html.wp-cat-skin .wp-cat .wp-feature__body{ padding:18px 18px 20px !important; }
  html.wp-cat-skin .wp-cat .wp-feature__title{ font-size:18px !important; }
  html.wp-cat-skin .wp-cat .wp-feature__text{ -webkit-line-clamp:3 !important; }
}