/* Atelier Chic — page CATÉGORIE (listing, filtres, toolbar, grille, pagination) */ /* ============================================================ PAGE CATÉGORIE ============================================================ */ .breadcrumb{padding:18px 0 0} .breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-50)} .breadcrumb li{display:flex;align-items:center;gap:9px} .breadcrumb li:not(:last-child)::after{content:"›";color:var(--rust)} .breadcrumb a{color:var(--ink-50);transition:color .15s} .breadcrumb a:hover{color:var(--ink)} .breadcrumb li[aria-current]{color:var(--ink);font-weight:600} .cat-hero{padding:30px 0 38px;border-bottom:1px solid var(--line)} .cat-hero .kicker{color:var(--rust);display:flex;align-items:center;gap:11px;margin-bottom:16px} .cat-hero .kicker::before{content:"";width:30px;height:1px;background:var(--rust)} .cat-hero .ch-grid{display:block} /* titre + chapo en pleine largeur, compteur dessous */ .cat-hero h1{font-size:clamp(38px,5.4vw,62px)} .cat-hero h1 em{font-style:italic;color:var(--rust)} .cat-hero .chapo{font-size:15.5px;color:var(--ink-70);margin-top:14px} .cat-hero .ch-meta{font-size:13px;letter-spacing:.04em;color:var(--ink-50);text-align:right;margin-top:14px} .cat-hero .ch-meta b{font-family:var(--serif);font-size:22px;color:var(--ink);font-style:italic;letter-spacing:0;margin-right:6px} .subchips{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px} .subchips a{font-size:12.5px;font-weight:600;padding:8px 15px;border:1px solid var(--line);border-radius:999px;background:var(--paper-2);transition:all .18s} .subchips a:hover,.subchips a.active{background:var(--ink);color:var(--paper);border-color:var(--ink)} .subchips a.active{background:var(--rust);border-color:var(--rust)} .cat-layout{display:grid;grid-template-columns:268px 1fr;gap:40px;padding:36px 0 20px;align-items:start} .cat-layout--full{grid-template-columns:1fr} /* listing sans facettes (recherche…) : produits pleine largeur */ /* L'AJAX faceté marche déjà ; mais le module assombrit TOUTE la page (.faceted-overlay fixed plein écran + spinner) → on dirait un reload complet. On le neutralise : le filtrage se fait sur place (cf. chic.js rétablit aussi la position de scroll). */ .faceted-overlay{display:none!important} @media(max-width:980px){.cat-layout{grid-template-columns:1fr}} .filters{position:sticky;top:96px} .filters .f-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px} .filters .f-top h2{font-size:16px;font-family:var(--sans);font-weight:700;letter-spacing:.04em} .filters .f-clear{font-size:12px;color:var(--rust);font-weight:600} .fgroup{border-top:1px solid var(--line);padding:4px 0} .fgroup>button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:15px 2px;font-size:13.5px;font-weight:700;letter-spacing:.02em} .fgroup>button .fc{transition:transform .25s;color:var(--ink-50)} .fgroup.open>button .fc{transform:rotate(180deg)} .fbody{display:none;padding:0 2px 16px} .fgroup.open .fbody{display:block} .fopt{display:flex;align-items:center;gap:11px;padding:7px 0;cursor:pointer;font-size:13.5px;color:var(--ink-70)} .fopt input{appearance:none;width:18px;height:18px;border:1.5px solid var(--line);border-radius:5px;background:var(--paper-2);flex-shrink:0;position:relative;transition:all .15s;cursor:pointer} .fopt input:checked{background:var(--rust);border-color:var(--rust)} .fopt input:checked::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:700} .fopt:hover{color:var(--ink)} .fopt .ct{margin-left:auto;font-size:11.5px;color:var(--ink-50)} .fopt.swatch input:checked{background:var(--green);border-color:var(--green)} .price-row{display:flex;align-items:center;gap:10px;margin:6px 0 14px} .price-row .pf{flex:1;display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:8px;padding:9px 11px;background:var(--paper-2);font-size:13px} /* padding:0 → annule le padding 12px 15px du input[type=number] global (chic-shop.css), sinon la pastille .pf gonfle à ~62px. Le .pf porte déjà son propre padding. */ .price-row .pf input{width:100%;border:none;background:none;padding:0;font-family:inherit;font-size:13px} .price-row .pf span{color:var(--ink-50)} .price-row .pf-sep{color:var(--ink-50)} .price-track{height:3px;background:var(--line);border-radius:3px;position:relative;margin:14px 8px 6px;cursor:pointer} .price-track .fill{position:absolute;left:12%;right:30%;top:0;bottom:0;background:var(--rust);border-radius:3px} .price-track .knob{position:absolute;top:50%;width:15px;height:15px;border-radius:50%;background:var(--paper-2);border:2px solid var(--rust);transform:translate(-50%,-50%);cursor:grab;z-index:2;touch-action:none} .price-track .knob:active{cursor:grabbing} .toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:28px;flex-wrap:wrap} .toolbar .tb-l{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .toolbar .count{font-size:13.5px;color:var(--ink-70)} .toolbar .count b{color:var(--ink);font-weight:700} .active-chips{display:flex;flex-wrap:wrap;gap:7px} .active-chips .chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;background:var(--paper-3);border:1px solid var(--line);border-radius:999px;padding:5px 7px 5px 12px} .active-chips .chip button{width:18px;height:18px;border-radius:999px;display:grid;place-items:center;color:var(--ink-50);font-size:13px;line-height:1} .active-chips .chip button:hover{background:var(--ink);color:var(--paper)} .tb-r{display:flex;align-items:center;gap:14px} .sortwrap{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-70)} .sortwrap select{font-family:inherit;font-size:13.5px;font-weight:600;border:1px solid var(--line);border-radius:8px;padding:9px 12px;background:var(--paper-2);color:var(--ink);cursor:pointer} .filter-toggle{display:none;align-items:center;gap:9px;font-size:13.5px;font-weight:700;border:1px solid var(--ink);border-radius:999px;padding:10px 18px} .filter-toggle svg{width:17px;height:17px} .cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 26px} @media(max-width:1180px){.cat-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.cat-grid{grid-template-columns:1fr 1fr;gap:20px 16px}} .prod .ph.plate{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px;background:var(--paper-3)} .prod .ph.plate.g{background:var(--green);color:var(--paper)} .prod .ph.plate.r{background:var(--rust);color:#fff} .prod .ph.plate.k{background:var(--ink);color:var(--paper)} .plate .pl-mono{font-family:var(--serif);font-style:italic;font-size:46px;line-height:1} .prod .ph.plate.g .pl-mono,.prod .ph.plate.k .pl-mono,.prod .ph.plate.r .pl-mono{color:#fff} .prod .ph.plate:not(.g):not(.r):not(.k) .pl-mono{color:var(--rust)} .plate .pl-orn{font-size:14px;margin:14px 0 6px;opacity:.55} .plate .pl-ref{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.75} .plate .pl-note{position:absolute;bottom:10px;left:0;right:0;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.5} /* === Pagination — Atelier Chic « pastilles bordées » === Markup PrestaShop : nav.pagination > .pager > a / a.on / span.spacer + a[rel=prev|next] Markup maquette statique : .cur / .pg-arrow / .dots */ .pagination{display:flex;justify-content:center;padding:48px 0 8px} .pagination .pager{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap} .pagination a,.pagination span, .pagination .pager a,.pagination .spacer{ min-width:42px;height:42px;padding:0 6px;display:grid;place-items:center; font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink-70); border-radius:999px;transition:color .18s,background .18s,border-color .18s} .pagination a:hover{background:var(--paper-3);color:var(--ink)} /* page active = cercle encre plein (non cliquable, jamais grisé même si .disabled) */ .pagination .cur, .pagination .pager a.on{background:var(--ink);color:var(--paper);opacity:1;pointer-events:none} /* points de suspension */ .pagination .dots,.pagination .spacer{min-width:30px;color:var(--ink-50);letter-spacing:.12em;pointer-events:none} /* flèches préc./suiv. = pastille bordée */ .pagination .pg-arrow, .pagination .pager a[rel="prev"],.pagination .pager a[rel="next"]{ font-size:22px;line-height:1;color:var(--ink);border:1px solid var(--line)} .pagination .pg-arrow:hover, .pagination .pager a[rel="prev"]:hover,.pagination .pager a[rel="next"]:hover{background:transparent;border-color:var(--ink)} /* grisé seulement pour les flèches préc./suiv. inactives — PAS la page courante */ .pagination .pg-arrow.disabled, .pagination .pager a.disabled:not(.on){opacity:.3;pointer-events:none;border-color:var(--line)} .notfound{margin:44px 0 0} .notfound .wrap2{background:var(--green);color:var(--paper);border-radius:14px;padding:clamp(32px,4.5vw,52px);display:grid;grid-template-columns:1.5fr 1fr;gap:26px;align-items:center;position:relative;overflow:hidden} .notfound .kicker{color:#bcae98} .notfound h2{font-size:clamp(26px,3.4vw,38px);color:#fff;margin:12px 0 12px} .notfound h2 em{font-style:italic;color:#e9a06f} .notfound p{color:#d9d0c0;font-size:14.5px;max-width:50ch} .notfound .nf-cta{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap} .notfound .eye{position:absolute;right:30px;top:-30px;font-size:150px;opacity:.08;font-family:var(--serif)} @media(max-width:720px){.notfound .wrap2{grid-template-columns:1fr}.notfound .nf-cta{justify-content:flex-start}} @media(max-width:980px){ .filter-toggle{display:inline-flex} .filters{position:fixed;top:0;left:0;bottom:0;width:min(88vw,340px);background:var(--paper);z-index:301;transform:translateX(-100%);transition:transform .3s;overflow-y:auto;padding:20px 22px 40px;box-shadow:0 0 60px rgba(0,0,0,.2)} .filters.open{transform:translateX(0)} .filters .f-mobile-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .filters .f-apply{display:flex !important;margin-top:20px;width:100%;justify-content:center} } @media(min-width:981px){.filters .f-mobile-head{display:none}} /* ============================================================ INTÉGRATION PRESTASHOP — facettes ps_facetedsearch, tri, pagination ============================================================ */ .filters .filters-body{margin-top:4px} /* "Filtrer par" rendu par ps_facetedsearch = doublon du

Affiner

→ masqué */ .filters #search_filters > p.text-uppercase{display:none} /* theme.css (Bootstrap) viré → ses utilitaires de visibilité ne masquent plus rien et ps_facetedsearch s'en sert : sans ça on voit la section "Filtres actifs" vide + le titre mobile collapsible en doublon. On ré-applique le strict nécessaire, scopé. */ .filters .hide, .filters .hidden-xs-up, .filters .facet .title.hidden-md-up, .filters .facet .collapse-icons{display:none!important} /* "Filtres actifs" (Marque: Galli / Effacer tout…) = redondant avec les cases cochées + le "Tout effacer" du .f-top → masqué (PrestaShop le ré-affiche quand un filtre est actif, d'où le doublon "2 fois Marque"). Idem le "Clear all" interne aux facettes (.clear-all-wrapper, marqué hidden-sm-up que theme.css ne masque plus) : redondant avec le "Tout effacer" du .f-top → masqué. */ .filters #js-active-search-filters, .filters .clear-all-wrapper{display:none!important} /* facettes -> look .fgroup/.fopt de la maquette */ .filters .facet{border-top:1px solid var(--line);padding:2px 0} .filters .facet .facet-title{font-family:var(--sans);font-size:13.5px;font-weight:700;letter-spacing:.02em;color:var(--ink);text-transform:none;padding:15px 2px 8px;margin:0} /* titre de facette = bouton déplier/replier (chevron + toggle JS .is-collapsed) */ .filters .facet > .facet-title{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;user-select:none} .filters .facet > .facet-title::after{ content:"";width:10px;height:10px;flex:none;background:var(--ink-50);transform:rotate(180deg); transition:transform .34s cubic-bezier(.33,1,.68,1),background .2s; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; } .filters .facet > .facet-title:hover::after{background:var(--ink)} .filters .facet.is-collapsed > .facet-title::after{transform:rotate(0)} .filters .facet .title.hidden-md-up{display:none} /* corps repliable : ouverture/fermeture fluide (grid-template-rows 1fr<->0fr + fondu), bien plus propre qu'un display:none sec. .facet-body est posé en JS autour du