/* ============================================================ CATÉGORIE + FILTRES refonte V2.5 — fashioncurvyshop.com (02/08/2026, refonte-code, étape 4) Déployé dans : wp-content/themes/enfold-child/refonte-categorie.css Source de vérité : maintenance-fcs/ux/refonte-categorie.css Enfilé par functions.php UNIQUEMENT sur is_product_taxonomy()/is_shop() (voir fcs_refonte_categorie_assets()) — aucun poids sur les autres pages. Portée : archives WooCommerce (catégories produit + /boutique/), PAS des pages ALB comme le header/footer/accueil des étapes précédentes. Tout le balisage restylé ici est du balisage WooCommerce/Enfold NATIF (widgets woocommerce_price_filter / woocommerce_layered_nav dans le widget-area Enfold "av_shop_overview", tri natif Enfold .avia-product-sorting, pagination native .pagination, boucle produit ul.products) — 0 surcharge de template WooCommerce (budget registre inchangé, toujours 0/4). Mécanisme de filtres RÉUTILISÉ (pas de nouveau plugin, rien installé) : 3 widgets déjà actifs dans le widget-area Enfold "Shop Overview Page" (id réel : av_shop_overview) : woocommerce_price_filter (slider prix, jQuery UI déjà enqueue par WooCommerce core), 2x woocommerce_layered_nav en natif, custom skin --- */ .template-shop .widget_layered_nav select { appearance: none; -webkit-appearance: none; width: 100%; min-height: 46px; border: 1.5px solid var(--fcs-border); border-radius: var(--fcs-radius-pill); padding: 0 40px 0 18px; font-family: var(--fcs-font-text); font-size: 14px; color: var(--fcs-prune); background: var(--fcs-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='12' height='12' fill='none' stroke='%23c05a78' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center; cursor: pointer; transition: border-color var(--fcs-duration-fast) var(--fcs-ease-out); } .template-shop .widget_layered_nav select:hover, .template-shop .widget_layered_nav select:focus-visible { border-color: var(--fcs-rose); outline: none; } /* --- Arbre de catégories (Iks Menu, widget iksm-widget) --- */ .template-shop .iksm-widget { padding-top: 4px; } .template-shop .iksm-term__link { font-size: 14px; color: var(--fcs-text-secondary); padding: 8px 0; min-height: 40px; display: flex; align-items: center; } .template-shop .iksm-term--current > .iksm-term__inner .iksm-term__link { color: var(--fcs-framboise); font-weight: 600; } /* ============================================================ 7. Grille produits (boucle native WooCommerce/Enfold) ============================================================ */ .template-shop main.template-shop ul.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 24px; list-style: none; margin: 0 0 8px; padding: 0; } .template-shop main.template-shop ul.products > li.product { float: none; width: auto; margin: 0; } .template-shop .inner_product { background: none; border: none; box-shadow: none; } .template-shop .thumbnail_container { position: relative; border-radius: var(--fcs-radius-lg); overflow: hidden; aspect-ratio: 3/4; background: var(--fcs-bg-soft); box-shadow: var(--fcs-shadow-md); transition: box-shadow var(--fcs-duration-fast) var(--fcs-ease-out); display: block; } .template-shop .product:hover .thumbnail_container { box-shadow: var(--fcs-shadow-lg); } .template-shop .thumbnail_container img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--fcs-ease-out); } .template-shop .product:hover .thumbnail_container img { transform: scale(1.06); } .template-shop .inner_product_header_table { padding-top: 12px; } .template-shop .woocommerce-loop-product__title { font-family: var(--fcs-font-text); font-size: 15px; font-weight: 400; color: var(--fcs-text-secondary); margin: 0 0 4px; /* interligne : voir --fcs-hn-lh dans refonte-socle.css (1.35) */ } .template-shop .price { font-family: var(--fcs-font-title); font-size: 17px; color: var(--fcs-prune); } .template-shop .price ins { text-decoration: none; color: var(--fcs-framboise); } .template-shop .price del { opacity: .6; font-size: 13px; } .template-shop span.onsale { position: absolute; top: 14px; left: 14px; background: var(--fcs-prune); color: var(--fcs-white); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--fcs-radius-pill); font-weight: 600; z-index: 2; } /* Bouton liste de souhaits (YITH) : déplacé dans refonte-socle.css le 05/08/2026 (demande gérante : « le coeur en dehors de l'image, à côté du prix ») — SITEWIDE désormais (comme le modèle de carte), pas seulement sur ce gabarit : la recherche et la page liste de souhaits n'ont aucun CSS de gabarit dédié, même raison que le titre ci-dessus. */ /* ============================================================ 8. Pagination native (.pagination) ============================================================ */ .template-shop nav.pagination { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 24px 0 12px; font-family: var(--fcs-font-text); } .template-shop nav.pagination .pagination-meta { font-size: 13px; color: var(--fcs-text-subtle); margin-right: 8px; } .template-shop nav.pagination a, .template-shop nav.pagination span.current { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--fcs-radius-pill); font-size: 13.5px; text-decoration: none; color: var(--fcs-prune); border: 1px solid var(--fcs-border); } .template-shop nav.pagination span.current { background: var(--fcs-framboise); border-color: var(--fcs-framboise); color: var(--fcs-white); font-weight: 600; } .template-shop nav.pagination a:hover { border-color: var(--fcs-rose); color: var(--fcs-framboise); } /* ============================================================ 9. Section SEO : description de catégorie (repositionnée sous la grille) ============================================================ */ .fcs-cat-seo { background: #fdf9fa; border-top: 1px solid var(--fcs-border); padding: 56px 0; margin-top: 16px; } .fcs-cat-seo-inner { max-width: 760px; margin: 0 auto; font-family: var(--fcs-font-text); color: var(--fcs-text-muted); line-height: 1.8; } /* Le texte lui-même (term_description()) N'EST PAS modifié : on n'habille ici que les balises génériques qu'il contient (h1/h2/h3/p/a) — la balise

éventuellement présente DANS le texte existant (contenu legacy, hors mandat refonte-code) est délibérément laissée telle quelle, voir le rapport de livraison pour le point à vérifier avec refonte-seo. / .fcs-cat-seo-inner h1, .fcs-cat-seo-inner h2 { font-family: var(--fcs-font-title); font-size: 30px; font-weight: 400; color: var(--fcs-prune); / --fcs-hn-lh : la règle sitewide de refonte-socle.css (3 ID) bat toute redéclaration de `line-height` d'un fichier de gabarit (2 ID max). La valeur doit donc passer par la variable, posée SUR LE TITRE lui-même. / --fcs-hn-lh: 1.3; line-height: 1.3; margin: 0 0 16px; } .fcs-cat-seo-inner h3 { font-family: var(--fcs-font-text); font-size: 18px; font-weight: 600; color: var(--fcs-prune); margin: 28px 0 8px; } .fcs-cat-seo-inner p { margin: 0 0 16px; font-size: 16px; } / Revue compat 06/08/2026 : plus de text-decoration:none ni de border-bottom ici — la règle sitewide de soulignement du socle (.term-description a) gagne en spécificité et l'on obtenait DEUX traits superposés. Le soulignement du socle fait le travail seul. / #top #main.all_colors .fcs-cat-seo-inner a { color: var(--fcs-framboise, #b04d6b); } #top #main.all_colors .fcs-cat-seo-inner a:hover { color: var(--fcs-prune, #2a1620); } #top #main.all_colors .fcs-cat-seo-inner strong { color: var(--fcs-prune, #2a1620); } / étude 3 (06/08) : aucune règle n'existait pour dans cette description de catégorie (contenu texte réel) — mesuré fg=#f1919c (2,27:1) en Lighthouse réel sur /categorie-produit/lingerie/ / .fcs-cat-seo-toggle { display: none; } / bouton "Lire la suite" : mobile uniquement, section 10 / / ============================================================ 10. Version mobile (≤767px) — seuil cohérent avec mobile-ux.css / refonte-header.css ============================================================ / @media only screen and (max-width: 767px) { .template-shop .container { gap: 0; } .template-shop .container > main.template-shop { flex-basis: 100%; } .template-shop .woocommerce-products-header { padding: 20px 16px 14px; } .woocommerce-products-header__title.page-title { font-size: 40px; } .fcs-cat-teaser { font-size: 13.5px; } .breadcrumb.breadcrumbs .breadcrumb-trail { padding: 0 16px; } .fcs-cat-toolbar { padding: 14px 16px; margin-bottom: 14px; } .fcs-cat-toolbar-left { gap: 12px; } .fcs-cat-filters-toggle-desktop { display: none; } / le repli desktop n'a pas de sens en tiroir mobile / .fcs-cat-filters-toggle-mobile { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border: 1.5px solid var(--fcs-rose); border-radius: var(--fcs-radius-pill); font-family: var(--fcs-font-text); font-size: 14px; font-weight: 600; color: var(--fcs-framboise); background: none; cursor: pointer; } .fcs-cat-filters-badge { background: var(--fcs-framboise); color: var(--fcs-white); font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; } .fcs-cat-active-filters { padding: 0 16px 14px; } .product-sorting.avia-product-sorting { padding: 0 16px; margin-bottom: 14px; } .product-sorting .currently-selected { width: 100%; justify-content: space-between; } .product-sorting .sort-param { display: block; width: 100%; } .template-shop main.template-shop ul.products { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; padding: 0 16px; } .template-shop nav.pagination { padding: 20px 16px 8px; justify-content: center; } .fcs-cat-seo { padding: 28px 0 34px; } .fcs-cat-seo-inner { padding: 0 16px; } .fcs-cat-seo-inner h1, .fcs-cat-seo-inner h2 { font-size: 22px; } .fcs-cat-seo-inner p { font-size: 15px; } / --- Clamp CSS "Lire la suite" : ne modifie pas le texte, en cache une partie visuellement. Le texte complet reste dans le HTML dès le chargement (bon pour le SEO), le clic ne fait que retirer le clamp — décalage exempt de CLS (hadRecentInput, dans les 500ms d'un clic réel). / .fcs-cat-seo-inner { max-height: 165px; / ~3-4 lignes de titre+intro selon la police / overflow: hidden; position: relative; mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%); } .fcs-cat-seo.fcs-cat-seo--expanded .fcs-cat-seo-inner { max-height: none; mask-image: none; -webkit-mask-image: none; } .fcs-cat-seo-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 32px); margin: 14px 16px 0; min-height: 46px; border: 1.5px solid var(--fcs-rose); border-radius: var(--fcs-radius-pill); background: none; font-family: var(--fcs-font-text); font-size: 14.5px; font-weight: 600; color: var(--fcs-framboise); cursor: pointer; } .fcs-cat-seo-toggle .fcs-chev { font-size: 12px; transition: transform var(--fcs-duration-fast) var(--fcs-ease-out); } .fcs-cat-seo--expanded .fcs-cat-seo-toggle .fcs-chev { transform: rotate(180deg); } / --- Tiroir de filtres (même mécanique d'ouverture que le tiroir de nav de l'étape 2 : classe sur , transform + backdrop, JS identique en plus léger). L'aside natif devient l'off-canvas — un seul DOM, pas de doublon de widgets/ID, juste repositionné en CSS. --- Préfixe `#top #main` OBLIGATOIRE sur ce sélecteur (et non un !important, correctif affiné par refonte-compat le 02/08/2026 suite au premier retour de refonte-perf) : la règle native Enfold `.responsive #top #main .sidebar{display:none}` (2 ID + 2 classes, même media max-width:767px) bat toute règle sans ID — sans le préfixe, l'aside reste display:none en permanence sur mobile et le tiroir ne s'affiche jamais, quel que soit le transform/z-index (bug confirmé pur combat de spécificité, aucun rapport avec fixed/transform). Méthode : matcher la spécificité d'Enfold (2 ID) avec plus de classes que lui (3 ici contre 2 chez Enfold), cohérent avec la convention "pas de !important" déjà appliquée au repli desktop juste au-dessus dans ce fichier. / #top #main .template-shop .container > aside.sidebar { position: fixed; left: 0; right: 0; bottom: 0; top: 52px; background: #fdfbfa; border-radius: 22px 22px 0 0; box-shadow: 0 -18px 50px rgba(42, 22, 32, .3); z-index: 999; flex-basis: auto; transform: translateY(100%); transition: transform .3s var(--fcs-ease-out); display: flex; flex-direction: column; overflow: hidden; } / Même préfixe `#top #main` que la règle de base ci-dessus, sinon cette règle d'état (0 ID) perd maintenant face à elle (2 ID) et le tiroir resterait toujours translateY(100%) — piège trouvé en test réel juste après avoir corrigé la règle de base, avant livraison. / html.fcs-filters-open #top #main .template-shop .container > aside.sidebar { transform: translateY(0); } html.fcs-filters-open { overflow: hidden; } .fcs-filters-backdrop { display: none; position: fixed; inset: 0; background: rgba(42, 22, 32, .45); z-index: 998; } html.fcs-filters-open .fcs-filters-backdrop { display: block; } .template-shop .inner_sidebar { flex: 1; overflow-y: auto; padding: 0 16px 90px; } .fcs-filters-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 4px; border-bottom: 1px solid var(--fcs-border); margin-bottom: 4px; position: sticky; top: 0; background: #fdfbfa; z-index: 1; } .fcs-filters-title { font-family: var(--fcs-font-title); font-size: 20px; color: var(--fcs-prune); } .fcs-filters-close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--fcs-text-subtle); background: none; border: 0; cursor: pointer; } .fcs-filters-foot { display: flex; gap: 12px; padding: 14px 16px; background: var(--fcs-white); border-top: 1px solid var(--fcs-border); box-shadow: 0 -6px 20px rgba(42, 22, 32, .06); position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; transform: translateY(100%); transition: transform .3s var(--fcs-ease-out); } html.fcs-filters-open .fcs-filters-foot { transform: translateY(0); } .fcs-filters-cancel, .fcs-filters-apply { flex: 1; min-height: 50px; border-radius: var(--fcs-radius-pill); font-family: var(--fcs-font-text); font-size: 14.5px; font-weight: 600; cursor: pointer; } .fcs-filters-cancel { background: none; border: 1.5px solid var(--fcs-border); color: var(--fcs-text-secondary); } .fcs-filters-apply { flex: 1.6; background: var(--fcs-framboise); border: 0; color: var(--fcs-white); } } / Correctif refonte-compat (02/08/2026, non bloquant, sur le même modèle que le correctif WhatsApp de l'étape 2 dans refonte-header.css) : le badge flottant Société des Avis Garantis (`.agJsWidget`, injecté côté client par le script tiers wcsag-widget-js — position fixed bas-droite, z-index 9990, PAS dans le HTML servi par le serveur, jamais touché ici) recouvre le coin droit du bouton "Voir les N articles" du pied du tiroir de filtres mobile (`.fcs-filters-foot`, z-index 2) quand le tiroir est ouvert — zone morte au clic. Masqué simplement tant que le tiroir est ouvert ; réapparaît à la fermeture (classe `fcs-filters-open` déjà posée/retirée par refonte-categorie.js sur , aucun changement JS nécessaire, aucun réglage du widget tiers touché). `!important` nécessaire ICI (cause différente du cas aside.sidebar plus haut, qui l'évite par préfixe `#top #main`) : le widget injecte SON PROPRE `