/* ============================================================================= * SERIGRAPHIE-BOUTIQUE — Layout PLP (Product List Page) v0.2.0 * ============================================================================= * Dépendances : tokens.css, cards.css, chips.css, badges.css, buttons.css, * inputs.css, breadcrumbs.css, halftone.css * * Structure : * 1. Hero contextuel d'univers (titre + description + breadcrumbs) * 2. Barre de contrôles (count résultats + tri + view toggle) * 3. Layout 2 colonnes : filtres latéraux + grille produits * 4. Pagination * 5. Cross-sell discret transversal (Médias & Supports) * * Activation tracking univers : * ============================================================================= */ .sb-plp { max-width: var(--sb-container-max-width); margin: 0 auto; padding: 0 var(--sb-sp-6); } /* --------------------------------------------------------------------------- * SECTION 1 — Hero contextuel d'univers * ------------------------------------------------------------------------- */ .sb-plp__hero { padding: var(--sb-sp-8) 0 var(--sb-sp-6); position: relative; border-bottom: 1px solid var(--sb-color-cendre); } .sb-plp__hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient( circle, var(--sb-color-ink) 1.5px, transparent 2px ); background-size: 16px 16px; opacity: 0.04; pointer-events: none; } .sb-plp__hero-content { position: relative; max-width: 760px; } .sb-plp__hero-tag { font-family: var(--sb-font-mono); font-size: var(--sb-fs-xs); letter-spacing: var(--sb-ls-widest); text-transform: uppercase; color: var(--sb-color-accent); font-weight: var(--sb-fw-medium); margin-bottom: var(--sb-sp-3); display: block; } .sb-plp__hero-title { font-size: var(--sb-fs-2xl); font-weight: var(--sb-fw-medium); line-height: var(--sb-lh-tight); letter-spacing: var(--sb-ls-tight); margin: 0 0 var(--sb-sp-3); } .sb-plp__hero-description { font-size: var(--sb-fs-base); color: var(--sb-text-secondary); line-height: var(--sb-lh-relaxed); margin: 0 0 var(--sb-sp-4); } /* Chips de raccourcis (sous-catégories de l'univers) */ .sb-plp__hero-shortcuts { display: flex; gap: var(--sb-sp-2); flex-wrap: wrap; margin-top: var(--sb-sp-4); } /* --------------------------------------------------------------------------- * SECTION 2 — Barre de contrôles * ------------------------------------------------------------------------- */ .sb-plp__controls { display: flex; justify-content: space-between; align-items: center; gap: var(--sb-sp-4); padding: var(--sb-sp-5) 0; border-bottom: 1px solid var(--sb-color-cendre); flex-wrap: wrap; } .sb-plp__count { font-size: var(--sb-fs-sm); color: var(--sb-text-secondary); } .sb-plp__count strong { color: var(--sb-text-primary); font-weight: var(--sb-fw-medium); } .sb-plp__controls-right { display: flex; gap: var(--sb-sp-3); align-items: center; } .sb-plp__sort { min-width: 200px; } .sb-plp__view-toggle { display: inline-flex; border: 1px solid var(--sb-color-cendre); border-radius: var(--sb-radius-sm); overflow: hidden; } .sb-plp__view-toggle button { background: var(--sb-color-paper); border: none; padding: var(--sb-sp-2) var(--sb-sp-3); color: var(--sb-text-secondary); cursor: pointer; display: flex; align-items: center; transition: background-color var(--sb-duration-fast) var(--sb-ease-out); } .sb-plp__view-toggle button:hover { background: var(--sb-color-cendre-soft); } .sb-plp__view-toggle button.is-active { background: var(--sb-color-ink); color: var(--sb-color-paper); } .sb-plp__view-toggle svg { width: 16px; height: 16px; } /* --------------------------------------------------------------------------- * SECTION 3 — Layout 2 colonnes (filtres + grille) * ------------------------------------------------------------------------- */ .sb-plp__main { display: grid; grid-template-columns: 260px 1fr; gap: var(--sb-sp-8); padding: var(--sb-sp-6) 0 var(--sb-sp-10); } /* --------------------------------------------------------------------------- * SIDEBAR FILTRES * ------------------------------------------------------------------------- */ .sb-plp__filters { position: sticky; top: calc(var(--sb-header-height) + var(--sb-sp-4)); align-self: start; max-height: calc(100vh - var(--sb-header-height) - var(--sb-sp-8)); overflow-y: auto; padding-right: var(--sb-sp-3); } .sb-plp__filters-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sb-sp-4); padding-bottom: var(--sb-sp-3); border-bottom: 1px solid var(--sb-color-cendre); } .sb-plp__filters-title { font-size: var(--sb-fs-sm); font-weight: var(--sb-fw-medium); letter-spacing: var(--sb-ls-wider); text-transform: uppercase; color: var(--sb-text-primary); margin: 0; } .sb-plp__filters-clear { font-size: var(--sb-fs-xs); color: var(--sb-color-accent); text-decoration: underline; text-underline-offset: 2px; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; } /* Chips actifs (filtres cochés) */ .sb-plp__active-filters { display: flex; flex-wrap: wrap; gap: var(--sb-sp-2); margin-bottom: var(--sb-sp-4); } /* Groupe de filtre (accordéon) */ .sb-plp__filter-group { border-bottom: 1px solid var(--sb-color-cendre); padding: var(--sb-sp-4) 0; } .sb-plp__filter-group-title { display: flex; justify-content: space-between; align-items: center; width: 100%; background: none; border: none; padding: 0; font-family: var(--sb-font-sans); font-size: var(--sb-fs-sm); font-weight: var(--sb-fw-medium); color: var(--sb-text-primary); cursor: pointer; margin-bottom: var(--sb-sp-3); text-align: left; } .sb-plp__filter-group-title::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid var(--sb-text-secondary); border-bottom: 1.5px solid var(--sb-text-secondary); transform: rotate(45deg); transition: transform var(--sb-duration-fast) var(--sb-ease-out); } .sb-plp__filter-group.is-collapsed .sb-plp__filter-group-title::after { transform: rotate(-45deg); } .sb-plp__filter-group.is-collapsed .sb-plp__filter-options { display: none; } .sb-plp__filter-options { display: flex; flex-direction: column; gap: var(--sb-sp-2); } .sb-plp__filter-option { display: flex; align-items: center; justify-content: space-between; font-size: var(--sb-fs-sm); color: var(--sb-text-primary); cursor: pointer; } .sb-plp__filter-option-count { font-size: var(--sb-fs-micro); color: var(--sb-text-tertiary); font-family: var(--sb-font-mono); } /* Range de prix */ .sb-plp__price-range { display: flex; gap: var(--sb-sp-2); align-items: center; margin-top: var(--sb-sp-2); } .sb-plp__price-range input { width: 80px; min-height: 36px; padding: var(--sb-sp-2); font-size: var(--sb-fs-xs); font-family: var(--sb-font-mono); border: 1px solid var(--sb-color-cendre); border-radius: var(--sb-radius-sm); } /* Bouton mobile "Filtrer" — caché desktop */ .sb-plp__filters-toggle { display: none; width: 100%; margin-bottom: var(--sb-sp-4); } /* --------------------------------------------------------------------------- * GRILLE PRODUITS * ------------------------------------------------------------------------- */ .sb-plp__products { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sb-sp-4); } /* Variante liste (view toggle) */ .sb-plp__products.is-list-view { grid-template-columns: 1fr; gap: var(--sb-sp-3); } .sb-plp__products.is-list-view .sb-card-product { flex-direction: row; max-width: none; } .sb-plp__products.is-list-view .sb-card-product__media { width: 200px; aspect-ratio: 1/1; flex-shrink: 0; } .sb-plp__products.is-list-view .sb-card-product__body { flex: 1; padding: var(--sb-sp-5); } /* État vide */ .sb-plp__empty { grid-column: 1 / -1; padding: var(--sb-sp-12); text-align: center; color: var(--sb-text-secondary); border: 1px dashed var(--sb-color-cendre); border-radius: var(--sb-radius-lg); } .sb-plp__empty-title { font-size: var(--sb-fs-lg); font-weight: var(--sb-fw-medium); color: var(--sb-text-primary); margin: 0 0 var(--sb-sp-2); } /* Skeleton loading state (à utiliser pendant chargement AJAX) */ .sb-plp__skeleton { background: var(--sb-color-paper-alt); border-radius: var(--sb-radius-md); height: 320px; animation: sb-skeleton-pulse 1.5s ease-in-out infinite; } @keyframes sb-skeleton-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .sb-plp__skeleton { animation: none; } } /* --------------------------------------------------------------------------- * SECTION 4 — Pagination * ------------------------------------------------------------------------- */ .sb-plp__pagination { display: flex; justify-content: center; align-items: center; gap: var(--sb-sp-2); padding: var(--sb-sp-8) 0; font-family: var(--sb-font-sans); } .sb-plp__page { min-width: 36px; height: 36px; padding: 0 var(--sb-sp-3); display: inline-flex; align-items: center; justify-content: center; font-size: var(--sb-fs-sm); color: var(--sb-text-primary); text-decoration: none; border: 1px solid var(--sb-color-cendre); border-radius: var(--sb-radius-sm); background: var(--sb-color-paper); cursor: pointer; transition: all var(--sb-duration-fast) var(--sb-ease-out); } .sb-plp__page:hover:not([disabled]) { border-color: var(--sb-color-graphite); } .sb-plp__page.is-current { background: var(--sb-color-ink); color: var(--sb-color-paper); border-color: var(--sb-color-ink); font-weight: var(--sb-fw-medium); } .sb-plp__page[disabled] { opacity: 0.4; cursor: not-allowed; } .sb-plp__page-gap { padding: 0 var(--sb-sp-2); color: var(--sb-text-tertiary); } /* --------------------------------------------------------------------------- * SECTION 5 — Cross-sell discret (Médias & Supports) * ------------------------------------------------------------------------- */ .sb-plp__cross-sell { margin: var(--sb-sp-10) 0; padding: var(--sb-sp-5) var(--sb-sp-6); background: var(--sb-color-paper-alt); border: 1px dashed var(--sb-color-cendre); border-radius: var(--sb-radius-md); display: flex; justify-content: space-between; align-items: center; gap: var(--sb-sp-6); font-size: var(--sb-fs-sm); } .sb-plp__cross-sell-text { color: var(--sb-text-secondary); margin: 0; } .sb-plp__cross-sell-text strong { color: var(--sb-text-primary); font-weight: var(--sb-fw-medium); } .sb-plp__cross-sell-link { font-weight: var(--sb-fw-medium); color: var(--sb-color-accent); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--sb-sp-2); } .sb-plp__cross-sell-link:hover { text-decoration: underline; text-underline-offset: 3px; } /* --------------------------------------------------------------------------- * RESPONSIVE * ------------------------------------------------------------------------- */ @media (max-width: 1023px) { .sb-plp__products { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767px) { .sb-plp__main { grid-template-columns: 1fr; gap: var(--sb-sp-4); } .sb-plp__filters { position: relative; top: auto; max-height: none; display: none; } .sb-plp__filters.is-open { display: block; } .sb-plp__filters-toggle { display: flex; } .sb-plp__products { grid-template-columns: repeat(2, 1fr); gap: var(--sb-sp-3); } .sb-plp__controls { gap: var(--sb-sp-3); } .sb-plp__sort { min-width: 140px; flex: 1; } .sb-plp__cross-sell { flex-direction: column; align-items: flex-start; gap: var(--sb-sp-3); } } @media (max-width: 480px) { .sb-plp__products { grid-template-columns: 1fr; } }