/* ============================================================================= * SERIGRAPHIE-BOUTIQUE — Layout PDP (Product Detail Page) v0.2.0 * ============================================================================= * Dépendances : tokens.css, cards.css, chips.css, badges.css, buttons.css, * inputs.css, breadcrumbs.css, halftone.css * * Structure : * 1. Breadcrumbs * 2. Layout 2 colonnes : galerie (55%) + infos achat (45%) * 3. Tabs : Description / Spécifications / Avis / Livraison * 4. Section "Supports compatibles" (cross-sell discret vers Médias) * 5. Section "Produits complémentaires" (discret, même technique) * 6. Section avis clients détaillée * * Activation tracking univers : * ============================================================================= */ .sb-pdp { max-width: var(--sb-container-max-width); margin: 0 auto; padding: 0 var(--sb-sp-6); } /* --------------------------------------------------------------------------- * SECTION 1 — Breadcrumbs * ------------------------------------------------------------------------- */ .sb-pdp__breadcrumbs { padding: var(--sb-sp-4) 0; } /* --------------------------------------------------------------------------- * SECTION 2 — Layout 2 colonnes * ------------------------------------------------------------------------- */ .sb-pdp__main { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--sb-sp-10); padding: var(--sb-sp-4) 0 var(--sb-sp-12); align-items: start; } /* --------------------------------------------------------------------------- * GALERIE * ------------------------------------------------------------------------- */ .sb-pdp__gallery { display: grid; grid-template-columns: 80px 1fr; gap: var(--sb-sp-3); position: sticky; top: calc(var(--sb-header-height) + var(--sb-sp-4)); } .sb-pdp__gallery-thumbs { display: flex; flex-direction: column; gap: var(--sb-sp-2); } .sb-pdp__gallery-thumb { width: 80px; height: 80px; border: 1px solid var(--sb-color-cendre); border-radius: var(--sb-radius-sm); overflow: hidden; background: var(--sb-color-paper-alt); cursor: pointer; padding: 0; transition: border-color var(--sb-duration-fast) var(--sb-ease-out); } .sb-pdp__gallery-thumb:hover { border-color: var(--sb-color-graphite); } .sb-pdp__gallery-thumb.is-active { border-color: var(--sb-color-ink); border-width: 2px; } .sb-pdp__gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .sb-pdp__gallery-main { position: relative; aspect-ratio: 1 / 1; background: var(--sb-color-paper-alt); border-radius: var(--sb-radius-md); overflow: hidden; background-image: radial-gradient( circle, var(--sb-color-ink) 1.5px, transparent 2px ); background-size: 14px 14px; } .sb-pdp__gallery-image { width: 100%; height: 100%; object-fit: contain; display: block; cursor: zoom-in; } .sb-pdp__gallery-badges { position: absolute; top: var(--sb-sp-4); left: var(--sb-sp-4); display: flex; gap: var(--sb-sp-2); flex-direction: column; align-items: flex-start; } /* --------------------------------------------------------------------------- * INFOS ACHAT * ------------------------------------------------------------------------- */ .sb-pdp__info { display: flex; flex-direction: column; gap: var(--sb-sp-4); } .sb-pdp__brand-row { display: flex; align-items: center; gap: var(--sb-sp-3); margin-bottom: var(--sb-sp-2); } .sb-pdp__sku { font-family: var(--sb-font-mono); font-size: var(--sb-fs-micro); color: var(--sb-text-tertiary); letter-spacing: var(--sb-ls-wider); } .sb-pdp__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; } .sb-pdp__rating { display: flex; align-items: center; gap: var(--sb-sp-3); padding: var(--sb-sp-2) 0; } .sb-pdp__rating-stars { color: var(--sb-color-warning); font-size: var(--sb-fs-md); letter-spacing: -1px; } .sb-pdp__rating-count { font-size: var(--sb-fs-sm); color: var(--sb-text-secondary); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .sb-pdp__short-desc { font-size: var(--sb-fs-base); color: var(--sb-text-secondary); line-height: var(--sb-lh-relaxed); margin: 0; padding: var(--sb-sp-4) 0; border-top: 1px solid var(--sb-color-cendre-soft); border-bottom: 1px solid var(--sb-color-cendre-soft); } /* Prix — HT par défaut, pas de label TTC */ .sb-pdp__price-block { display: flex; align-items: baseline; gap: var(--sb-sp-3); padding: var(--sb-sp-2) 0; } .sb-pdp__price { font-family: var(--sb-font-mono); font-size: var(--sb-fs-3xl); font-weight: var(--sb-fw-medium); color: var(--sb-text-primary); letter-spacing: var(--sb-ls-tight); line-height: 1; } .sb-pdp__price-old { font-family: var(--sb-font-sans); font-size: var(--sb-fs-lg); color: var(--sb-text-tertiary); text-decoration: line-through; font-weight: var(--sb-fw-regular); } .sb-pdp__price-save { font-size: var(--sb-fs-sm); color: var(--sb-color-accent); font-weight: var(--sb-fw-medium); } /* Indicateur stock */ .sb-pdp__stock { display: flex; align-items: center; gap: var(--sb-sp-2); font-size: var(--sb-fs-sm); color: var(--sb-color-success); font-weight: var(--sb-fw-medium); } .sb-pdp__stock.is-low { color: var(--sb-color-warning); } .sb-pdp__stock.is-out { color: var(--sb-color-danger); } .sb-pdp__stock::before { content: ""; width: 8px; height: 8px; border-radius: var(--sb-radius-pill); background: currentColor; } /* Variantes (taille, couleur, volume) */ .sb-pdp__variants { display: flex; flex-direction: column; gap: var(--sb-sp-3); padding: var(--sb-sp-3) 0; } .sb-pdp__variant-group { display: flex; flex-direction: column; gap: var(--sb-sp-2); } .sb-pdp__variant-label { font-size: var(--sb-fs-xs); font-weight: var(--sb-fw-medium); color: var(--sb-text-secondary); letter-spacing: var(--sb-ls-wider); text-transform: uppercase; } .sb-pdp__variant-options { display: flex; flex-wrap: wrap; gap: var(--sb-sp-2); } .sb-pdp__variant-option { min-width: 48px; padding: var(--sb-sp-2) var(--sb-sp-3); background: var(--sb-color-paper); border: 1.5px solid var(--sb-color-cendre); border-radius: var(--sb-radius-sm); font-family: var(--sb-font-sans); font-size: var(--sb-fs-sm); font-weight: var(--sb-fw-medium); cursor: pointer; text-align: center; transition: all var(--sb-duration-fast) var(--sb-ease-out); } .sb-pdp__variant-option:hover:not([disabled]) { border-color: var(--sb-color-graphite); } .sb-pdp__variant-option.is-selected { border-color: var(--sb-color-ink); background: var(--sb-color-ink); color: var(--sb-color-paper); } .sb-pdp__variant-option[disabled] { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; } /* Quantité + CTA */ .sb-pdp__buy-row { display: flex; gap: var(--sb-sp-3); align-items: stretch; padding: var(--sb-sp-4) 0; } .sb-pdp__quantity { display: flex; align-items: center; border: 1.5px solid var(--sb-color-ink); border-radius: var(--sb-radius-sm); overflow: hidden; flex-shrink: 0; } .sb-pdp__quantity-btn { width: 44px; height: 52px; background: var(--sb-color-paper); border: none; font-size: var(--sb-fs-md); color: var(--sb-text-primary); cursor: pointer; transition: background-color var(--sb-duration-fast) var(--sb-ease-out); } .sb-pdp__quantity-btn:hover { background: var(--sb-color-cendre-soft); } .sb-pdp__quantity-input { width: 56px; height: 52px; border: none; border-left: 1.5px solid var(--sb-color-ink); border-right: 1.5px solid var(--sb-color-ink); text-align: center; font-family: var(--sb-font-mono); font-size: var(--sb-fs-base); font-weight: var(--sb-fw-medium); background: var(--sb-color-paper); } .sb-pdp__quantity-input:focus { outline: none; background: var(--sb-color-accent-soft); } .sb-pdp__buy-cta { flex: 1; /* Étend .sb-btn.sb-btn--primary.sb-btn--lg */ } /* Delivery info */ .sb-pdp__delivery { display: flex; flex-direction: column; gap: var(--sb-sp-2); padding: var(--sb-sp-4); background: var(--sb-color-paper-alt); border-radius: var(--sb-radius-md); border: 1px solid var(--sb-color-cendre); } .sb-pdp__delivery-item { display: flex; align-items: center; gap: var(--sb-sp-3); font-size: var(--sb-fs-sm); color: var(--sb-text-primary); } .sb-pdp__delivery-item svg { width: 18px; height: 18px; color: var(--sb-color-accent); flex-shrink: 0; } .sb-pdp__delivery-item small { color: var(--sb-text-secondary); font-size: var(--sb-fs-xs); display: block; margin-top: 2px; } /* --------------------------------------------------------------------------- * SECTION 3 — Tabs (Description / Specs / Avis / Livraison) * ------------------------------------------------------------------------- */ .sb-pdp__tabs { padding: var(--sb-sp-8) 0; border-top: 1px solid var(--sb-color-cendre); } .sb-pdp__tab-list { display: flex; gap: var(--sb-sp-6); border-bottom: 1px solid var(--sb-color-cendre); margin-bottom: var(--sb-sp-6); list-style: none; padding: 0; overflow-x: auto; } .sb-pdp__tab-btn { background: none; border: none; padding: var(--sb-sp-3) 0; font-family: var(--sb-font-sans); font-size: var(--sb-fs-sm); font-weight: var(--sb-fw-medium); color: var(--sb-text-secondary); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; transition: all var(--sb-duration-fast) var(--sb-ease-out); } .sb-pdp__tab-btn:hover { color: var(--sb-text-primary); } .sb-pdp__tab-btn.is-active { color: var(--sb-text-primary); border-bottom-color: var(--sb-color-accent); } .sb-pdp__tab-panel { display: none; max-width: 820px; } .sb-pdp__tab-panel.is-active { display: block; } .sb-pdp__tab-panel h3 { font-size: var(--sb-fs-lg); font-weight: var(--sb-fw-medium); margin: var(--sb-sp-5) 0 var(--sb-sp-3); } .sb-pdp__tab-panel p { font-size: var(--sb-fs-base); line-height: var(--sb-lh-relaxed); color: var(--sb-text-primary); margin: 0 0 var(--sb-sp-4); } /* Table de spécifications */ .sb-pdp__specs { width: 100%; border-collapse: collapse; } .sb-pdp__specs tr { border-bottom: 1px solid var(--sb-color-cendre-soft); } .sb-pdp__specs th, .sb-pdp__specs td { padding: var(--sb-sp-3) var(--sb-sp-4); text-align: left; font-size: var(--sb-fs-sm); vertical-align: top; } .sb-pdp__specs th { font-weight: var(--sb-fw-medium); color: var(--sb-text-secondary); width: 30%; background: var(--sb-color-paper-alt); } .sb-pdp__specs td { color: var(--sb-text-primary); } /* --------------------------------------------------------------------------- * SECTION 4 — Cross-sell Médias & Supports (discret) * ------------------------------------------------------------------------- */ .sb-pdp__cross-sell-transversal { margin: var(--sb-sp-8) 0; padding: var(--sb-sp-5); background: var(--sb-color-paper-alt); border-radius: var(--sb-radius-md); border: 1px dashed var(--sb-color-cendre); display: grid; grid-template-columns: 1fr auto; gap: var(--sb-sp-4); align-items: center; } .sb-pdp__cross-sell-transversal-text { font-size: var(--sb-fs-sm); color: var(--sb-text-secondary); margin: 0; line-height: var(--sb-lh-normal); } .sb-pdp__cross-sell-transversal-text strong { color: var(--sb-text-primary); font-weight: var(--sb-fw-medium); } /* --------------------------------------------------------------------------- * SECTION 5 — Produits complémentaires (même technique, discret) * ------------------------------------------------------------------------- */ .sb-pdp__related { padding: var(--sb-sp-10) 0; border-top: 1px solid var(--sb-color-cendre); } .sb-pdp__related-title { font-size: var(--sb-fs-lg); font-weight: var(--sb-fw-medium); margin: 0 0 var(--sb-sp-2); } .sb-pdp__related-subtitle { font-size: var(--sb-fs-sm); color: var(--sb-text-secondary); margin: 0 0 var(--sb-sp-5); } .sb-pdp__related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sb-sp-4); } /* --------------------------------------------------------------------------- * SECTION 6 — Avis clients (détaillés) * ------------------------------------------------------------------------- */ .sb-pdp__reviews-summary { display: grid; grid-template-columns: 280px 1fr; gap: var(--sb-sp-8); padding: var(--sb-sp-6) 0; border-top: 1px solid var(--sb-color-cendre); margin-top: var(--sb-sp-8); } .sb-pdp__reviews-score { text-align: center; padding: var(--sb-sp-6); background: var(--sb-color-paper-alt); border-radius: var(--sb-radius-md); } .sb-pdp__reviews-score-big { font-size: var(--sb-fs-4xl); font-weight: var(--sb-fw-medium); color: var(--sb-color-accent); line-height: 1; font-family: var(--sb-font-mono); } .sb-pdp__reviews-score-stars { color: var(--sb-color-warning); font-size: var(--sb-fs-xl); margin: var(--sb-sp-2) 0; letter-spacing: -1px; } .sb-pdp__reviews-score-label { font-size: var(--sb-fs-sm); color: var(--sb-text-secondary); } .sb-pdp__reviews-distribution { display: flex; flex-direction: column; gap: var(--sb-sp-2); } .sb-pdp__reviews-bar { display: grid; grid-template-columns: 40px 1fr 40px; gap: var(--sb-sp-3); align-items: center; font-size: var(--sb-fs-xs); color: var(--sb-text-secondary); } .sb-pdp__reviews-bar-track { height: 6px; background: var(--sb-color-cendre-soft); border-radius: var(--sb-radius-pill); overflow: hidden; } .sb-pdp__reviews-bar-fill { height: 100%; background: var(--sb-color-accent); border-radius: var(--sb-radius-pill); } /* Liste des avis */ .sb-pdp__review-list { display: flex; flex-direction: column; gap: var(--sb-sp-5); padding-top: var(--sb-sp-5); } .sb-pdp__review { padding: var(--sb-sp-4) 0; border-bottom: 1px solid var(--sb-color-cendre-soft); } .sb-pdp__review-header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sb-sp-3); margin-bottom: var(--sb-sp-2); flex-wrap: wrap; } .sb-pdp__review-author { font-size: var(--sb-fs-sm); font-weight: var(--sb-fw-medium); } .sb-pdp__review-date { font-size: var(--sb-fs-xs); color: var(--sb-text-tertiary); } .sb-pdp__review-stars { color: var(--sb-color-warning); font-size: var(--sb-fs-sm); letter-spacing: -1px; margin-bottom: var(--sb-sp-2); } .sb-pdp__review-text { font-size: var(--sb-fs-sm); color: var(--sb-text-primary); line-height: var(--sb-lh-relaxed); margin: 0; } /* --------------------------------------------------------------------------- * RESPONSIVE * ------------------------------------------------------------------------- */ @media (max-width: 1023px) { .sb-pdp__main { grid-template-columns: 1fr; gap: var(--sb-sp-6); } .sb-pdp__gallery { position: relative; top: auto; } .sb-pdp__related-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767px) { .sb-pdp__gallery { grid-template-columns: 1fr; } .sb-pdp__gallery-thumbs { flex-direction: row; overflow-x: auto; order: 2; } .sb-pdp__gallery-main { order: 1; } .sb-pdp__title { font-size: var(--sb-fs-xl); } .sb-pdp__price { font-size: var(--sb-fs-2xl); } .sb-pdp__buy-row { flex-direction: column; } .sb-pdp__buy-cta { width: 100%; } .sb-pdp__reviews-summary { grid-template-columns: 1fr; gap: var(--sb-sp-5); } .sb-pdp__related-grid { grid-template-columns: repeat(2, 1fr); } .sb-pdp__cross-sell-transversal { grid-template-columns: 1fr; } }