: .sb-home--focused-serigraphie, .sb-home--focused-numerique, * .sb-home--focused-transfert * * Par défaut : .sb-home (neutre) * ============================================================================= */ .sb-home { max-width: var(--sb-container-max-width); margin: 0 auto; padding: 0 var(--sb-sp-6); } /* --------------------------------------------------------------------------- * SECTION 1 — Hero intro (texte centré, halftone en fond) * ------------------------------------------------------------------------- */ .sb-home__hero { padding: var(--sb-sp-16) 0 var(--sb-sp-8); text-align: center; position: relative; } .sb-home__hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient( circle, var(--sb-color-ink) 1.5px, transparent 2px ); background-size: 18px 18px; opacity: 0.05; pointer-events: none; } .sb-home__hero-tag { display: inline-block; font-family: var(--sb-font-sans); 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); position: relative; } .sb-home__hero-title { font-size: var(--sb-fs-3xl); 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); position: relative; } .sb-home__hero-title em { font-style: normal; color: var(--sb-color-accent); } .sb-home__hero-subtitle { font-size: var(--sb-fs-md); color: var(--sb-text-secondary); max-width: 600px; margin: 0 auto; line-height: var(--sb-lh-relaxed); position: relative; } /* --------------------------------------------------------------------------- * SECTION 2 — Univers (grille adaptative) * ------------------------------------------------------------------------- */ .sb-home__universes { padding: var(--sb-sp-6) 0 var(--sb-sp-4); } /* Mode NEUTRE : 4 tuiles égales (1 ligne desktop, 2x2 tablet, 1 col mobile) */ .sb-home:not([class*="focused-"]) .sb-home__universes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sb-sp-4); } /* Mode FOCUSED : 1 gros (main) + 3 petits en colonne côté droit */ .sb-home[class*="focused-"] .sb-home__universes-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sb-sp-4); } .sb-home[class*="focused-"] .sb-home__universe-main { grid-row: 1 / 4; } .sb-home[class*="focused-"] .sb-home__universe-side { display: grid; grid-template-rows: repeat(3, 1fr); gap: var(--sb-sp-4); } /* Ordre d'affichage selon le profil (via CSS order) * L'univers préféré = order 1 (main), les 3 autres = order 2/3/4 (side) */ .sb-home--focused-serigraphie .sb-home__universe[data-u="serigraphie"] { order: 1; } .sb-home--focused-serigraphie .sb-home__universe[data-u="numerique"] { order: 2; } .sb-home--focused-serigraphie .sb-home__universe[data-u="transfert"] { order: 3; } .sb-home--focused-serigraphie .sb-home__universe[data-u="sublimation"] { order: 4; } .sb-home--focused-numerique .sb-home__universe[data-u="numerique"] { order: 1; } .sb-home--focused-numerique .sb-home__universe[data-u="serigraphie"] { order: 2; } .sb-home--focused-numerique .sb-home__universe[data-u="transfert"] { order: 3; } .sb-home--focused-numerique .sb-home__universe[data-u="sublimation"] { order: 4; } .sb-home--focused-transfert .sb-home__universe[data-u="transfert"] { order: 1; } .sb-home--focused-transfert .sb-home__universe[data-u="serigraphie"] { order: 2; } .sb-home--focused-transfert .sb-home__universe[data-u="numerique"] { order: 3; } .sb-home--focused-transfert .sb-home__universe[data-u="sublimation"] { order: 4; } .sb-home--focused-sublimation .sb-home__universe[data-u="sublimation"] { order: 1; } .sb-home--focused-sublimation .sb-home__universe[data-u="serigraphie"] { order: 2; } .sb-home--focused-sublimation .sb-home__universe[data-u="numerique"] { order: 3; } .sb-home--focused-sublimation .sb-home__universe[data-u="transfert"] { order: 4; } /* Chips sous-catégories dans main universe (apparaissent seulement en focused) */ .sb-home__universe-chips { display: none; flex-wrap: wrap; gap: var(--sb-sp-2); margin-top: var(--sb-sp-4); } .sb-home[class*="focused-"] .sb-home__universe-main .sb-home__universe-chips { display: flex; } .sb-home__universe-chip { display: inline-flex; padding: var(--sb-sp-2) var(--sb-sp-3); background-color: rgba(255, 255, 255, 0.1); color: var(--sb-color-paper); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--sb-radius-pill); font-size: var(--sb-fs-micro); text-decoration: none; transition: background-color var(--sb-duration-fast) var(--sb-ease-out); } .sb-home__universe-chip:hover { background-color: rgba(255, 94, 14, 0.2); border-color: var(--sb-color-accent); } /* --------------------------------------------------------------------------- * SECTION 3 — Univers TRANSVERSAL (Médias & Supports) * ------------------------------------------------------------------------- */ .sb-home__transversal { margin: var(--sb-sp-8) 0 var(--sb-sp-12); } /* Utilise .sb-card-transversal de cards.css */ /* --------------------------------------------------------------------------- * SECTION 4 — Personas (Je débute / Je produis / Je forme) * ------------------------------------------------------------------------- */ .sb-home__personas { padding: var(--sb-sp-10) 0 var(--sb-sp-12); text-align: center; border-top: 1px solid var(--sb-color-cendre); } .sb-home__personas-label { font-size: var(--sb-fs-xs); letter-spacing: var(--sb-ls-widest); text-transform: uppercase; color: var(--sb-text-secondary); font-weight: var(--sb-fw-medium); margin: 0 0 var(--sb-sp-2); } .sb-home__personas-lead { font-size: var(--sb-fs-lg); font-weight: var(--sb-fw-medium); max-width: 640px; margin: 0 auto var(--sb-sp-6); line-height: var(--sb-lh-snug); letter-spacing: var(--sb-ls-tight); } .sb-home__personas-lead em { font-style: normal; color: var(--sb-color-accent); } .sb-home__personas-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sb-sp-3); } /* Chacune utilise .sb-chip.sb-chip--persona */ /* --------------------------------------------------------------------------- * SECTION 5 — Marques distribuées * ------------------------------------------------------------------------- */ .sb-home__brands { padding: var(--sb-sp-8) 0; border-top: 1px solid var(--sb-color-cendre); border-bottom: 1px solid var(--sb-color-cendre); text-align: center; } .sb-home__brands-label { font-size: var(--sb-fs-xs); letter-spacing: var(--sb-ls-widest); text-transform: uppercase; color: var(--sb-text-secondary); font-weight: var(--sb-fw-medium); margin: 0 0 var(--sb-sp-4); } .sb-home__brands-row { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--sb-sp-10); opacity: 0.7; } .sb-home__brand { font-size: var(--sb-fs-sm); font-weight: var(--sb-fw-medium); letter-spacing: var(--sb-ls-wider); color: var(--sb-text-secondary); text-transform: uppercase; text-decoration: none; transition: color var(--sb-duration-fast) var(--sb-ease-out); } .sb-home__brand:hover { color: var(--sb-color-accent); } /* Si logos image : .sb-home__brand-logo */ .sb-home__brand-logo { height: 24px; width: auto; filter: grayscale(1); opacity: 0.8; transition: opacity var(--sb-duration-fast) var(--sb-ease-out); } .sb-home__brand-logo:hover { filter: none; opacity: 1; } /* --------------------------------------------------------------------------- * SECTION 6 — Trust signals (delivery, paiement, SAV, retours) * ------------------------------------------------------------------------- */ .sb-home__trust { padding: var(--sb-sp-10) 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sb-sp-6); } .sb-home__trust-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sb-sp-2); } .sb-home__trust-icon { width: 40px; height: 40px; color: var(--sb-color-accent); flex-shrink: 0; margin-bottom: var(--sb-sp-2); } .sb-home__trust-title { font-size: var(--sb-fs-sm); font-weight: var(--sb-fw-medium); margin: 0; } .sb-home__trust-desc { font-size: var(--sb-fs-xs); color: var(--sb-text-secondary); margin: 0; max-width: 200px; line-height: var(--sb-lh-normal); } /* --------------------------------------------------------------------------- * RESPONSIVE * ------------------------------------------------------------------------- */ @media (max-width: 1023px) { .sb-home__hero-title { font-size: var(--sb-fs-2xl); } /* Tablet : 2×2 en neutre, stack simple en focused */ .sb-home:not([class*="focused-"]) .sb-home__universes-grid { grid-template-columns: repeat(2, 1fr); } .sb-home[class*="focused-"] .sb-home__universes-grid { grid-template-columns: 1fr; } .sb-home[class*="focused-"] .sb-home__universe-main { grid-row: auto; } .sb-home[class*="focused-"] .sb-home__universe-side { grid-template-rows: auto; grid-template-columns: repeat(3, 1fr); } .sb-home__trust { grid-template-columns: repeat(2, 1fr); } .sb-home__brands-row { gap: var(--sb-sp-6); } } @media (max-width: 640px) { .sb-home { padding: 0 var(--sb-sp-4); } .sb-home__hero { padding: var(--sb-sp-10) 0 var(--sb-sp-6); } .sb-home__hero-title { font-size: var(--sb-fs-xl); } .sb-home[class*="focused-"] .sb-home__universe-side { grid-template-columns: 1fr; } .sb-home__trust { grid-template-columns: 1fr; } .sb-home__brands-row { gap: var(--sb-sp-4); } }