/* ========================================================= DIMINIATURES — Homepage Custom CSS Storefront Child Theme ========================================================= */ /* ── Variables ─────────────────────────────────────────── */ :root { --dimini-dark: #1a1a2e; --dimini-accent: #e63946; --dimini-light: #f8f9fa; --dimini-muted: #6c757d; --dimini-border: #e0e0e0; --dimini-card-bg: #ffffff; --dimini-shadow: 0 2px 12px rgba(0,0,0,.08); --swiper-theme-color: #e63946; } /* ───────────────────────────────────────────────────────── WIDGET MENU CATÉGORIES (.dimini-widget-cat) Styles pour le widget utilisé dans les sidebars Storefront. Réutilise les mêmes classes .cat-tree / .cat-children. ─────────────────────────────────────────────────────── */ .dimini-widget-cat .dimini-cat-nav { margin-top: .5rem; } .dimini-widget-cat .cat-tree > .cat-item > a { font-size: .85rem; padding: .45rem .15rem; } .dimini-widget-cat .cat-children li a { font-size: .8rem; } .dimini-widget-cat .cat-item.current-cat-parent > a, .dimini-widget-cat .cat-item.current-cat > a { color: var(--dimini-accent); font-weight: 700; } /* ───────────────────────────────────────────────────────── FULL-WIDTH — Suppression des contraintes Storefront La classe .dimini-homepage-tpl est ajoutée sur uniquement sur notre template (via functions.php). On écrase tous les max-width/padding de Storefront pour que notre contenu soit naturellement pleine largeur. ─────────────────────────────────────────────────────── */ /* Masque le titre de la page (on n'en a pas besoin) */ .dimini-homepage-tpl .entry-header, .dimini-homepage-tpl .page-title, .dimini-homepage-tpl .entry-content > :not(#dimini-homepage), .dimini-homepage-tpl .entry-footer, .dimini-homepage-tpl .woocommerce-breadcrumb { display: none !important; } #dimini-homepage { margin: 0; padding: 0; /* PAS de overflow:hidden ici — cela bloquerait les sections pleine largeur */ } /* ───────────────────────────────────────────────────────── 1. HERO SLIDER Utilise des réels (pas background-image) pour éviter les repaints coûteux sur mobile. ─────────────────────────────────────────────────────── */ .dimini-hero { width: 100%; overflow: hidden; position: relative; } .hero-swiper { width: 100%; height: 520px; } .hero-slide { position: relative; overflow: hidden; } /* Image de fond réelle (remplace background-image) */ .hero-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; z-index: 0; } .hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient( to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.18) 55%, transparent 100% ); display: flex; align-items: flex-end; padding: 40px 56px; } .hero-text { color: #fff; max-width: 560px; } .hero-title { font-size: clamp(1.2rem, 3vw, 2rem); font-weight: 700; margin: 0 0 .5rem; line-height: 1.2; text-shadow: 0 1px 4px rgba(0,0,0,.5); } .hero-price { display: block; font-size: 1.1rem; margin-bottom: .75rem; opacity: .9; } .hero-price .woocommerce-Price-amount { color: #fff; } .hero-btn.button { background: var(--dimini-accent) !important; color: #fff !important; border: none !important; padding: .55rem 1.5rem !important; border-radius: 4px; font-weight: 600; text-decoration: none; transition: background .2s; display: inline-block; } .hero-btn.button:hover { background: #c1121f !important; } /* ───────────────────────────────────────────────────────── 2. CATALOG WRAP (sidebar + sliders) Cette section a son propre max-width centré. ─────────────────────────────────────────────────────── */ .dimini-catalog-wrap { display: flex; align-items: flex-start; max-width: 1600px; margin: 0 auto; padding: 32px 24px; box-sizing: border-box; } /* ── Sidebar catégories ─────────────────────────────────── */ .dimini-cat-sidebar { flex: 0 0 220px; min-width: 0; position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; padding-right: 16px; border-right: 1px solid var(--dimini-border); scrollbar-width: thin; } .sidebar-title { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--dimini-muted); margin: 0 0 1rem; padding-bottom: .5rem; border-bottom: 2px solid var(--dimini-accent); } .cat-tree, .cat-children { list-style: none; margin: 0; padding: 0; } .cat-tree > .cat-item { border-bottom: 1px solid var(--dimini-border); } .cat-tree > .cat-item > a { display: flex; align-items: center; justify-content: space-between; padding: .55rem .25rem; font-weight: 600; font-size: .88rem; color: var(--dimini-dark); text-decoration: none; transition: color .15s; } .cat-tree > .cat-item > a:hover { color: var(--dimini-accent); } .toggle-icon { font-size: .65rem; transition: transform .2s; color: var(--dimini-muted); flex-shrink: 0; margin-left: 4px; } .cat-item.open > a .toggle-icon { transform: rotate(90deg); } .cat-children { display: none; padding: 0 0 .5rem .8rem; } .cat-item.open > .cat-children { display: block; } .cat-children li a { display: block; padding: .3rem .25rem; font-size: .82rem; color: var(--dimini-muted); text-decoration: none; transition: color .15s; } .cat-children li a:hover { color: var(--dimini-accent); } /* ── Sliders zone ───────────────────────────────────────── */ .dimini-sliders-main { flex: 1; min-width: 0; padding-left: 28px; } /* ───────────────────────────────────────────────────────── 3. SECTION PRODUIT ─────────────────────────────────────────────────────── */ .dimini-product-section { margin-bottom: 40px; } .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; border-bottom: 2px solid var(--dimini-border); padding-bottom: 8px; } .section-title { font-size: 1.15rem; font-weight: 700; margin: 0; color: var(--dimini-dark); } .section-link { font-size: .82rem; color: var(--dimini-accent); text-decoration: none; font-weight: 600; white-space: nowrap; } .section-link:hover { text-decoration: underline; } /* ── Product Swiper ─────────────────────────────────────── */ .product-swiper { width: 100%; padding: 4px 40px 16px; box-sizing: border-box; } .product-swiper .swiper-button-prev, .product-swiper .swiper-button-next { width: 32px; height: 32px; background: #fff; border: 1px solid var(--dimini-border); border-radius: 50%; box-shadow: var(--dimini-shadow); top: 40%; } .product-swiper .swiper-button-prev::after, .product-swiper .swiper-button-next::after { font-size: 12px; font-weight: 900; color: var(--dimini-dark); } .product-swiper .swiper-button-prev { left: 0; } .product-swiper .swiper-button-next { right: 0; } /* ── Product card ───────────────────────────────────────── */ .product-card { background: var(--dimini-card-bg); border: 1px solid var(--dimini-border); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; height: 100%; transition: box-shadow .2s, transform .2s; } .product-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.12); transform: translateY(-2px); } .product-card-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; flex: 1; } .product-thumb { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #f0f0f0; } .product-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; } .product-card:hover .product-img { transform: scale(1.04); } .product-badge { position: absolute; top: 8px; left: 8px; background: var(--dimini-accent); color: #fff; font-size: .68rem; font-weight: 700; padding: 2px 7px; border-radius: 3px; text-transform: uppercase; } .product-details { padding: 10px 12px 6px; flex: 1; } .product-name { font-size: .84rem; font-weight: 600; margin: 0 0 .35rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--dimini-dark); } .product-price { font-size: .9rem; font-weight: 700; } .product-price .woocommerce-Price-amount { color: var(--dimini-accent); } .product-add-to-cart { padding: 8px 12px 12px; } .product-add-to-cart .button { width: 100% !important; text-align: center !important; padding: .45rem !important; font-size: .8rem !important; background: var(--dimini-dark) !important; color: #fff !important; border: none !important; border-radius: 4px; cursor: pointer; transition: background .2s; display: block; text-decoration: none; box-sizing: border-box; } .product-add-to-cart .button:hover { background: var(--dimini-accent) !important; } /* ───────────────────────────────────────────────────────── 3b. CARTES SOUS-CATÉGORIES Affichées à la place des produits quand le mode "subcats" est choisi dans l'admin pour un carrousel donné. ─────────────────────────────────────────────────────── */ .subcat-card { background: var(--dimini-card-bg); border: 1px solid var(--dimini-border); border-radius: 8px; overflow: hidden; transition: box-shadow .2s, transform .2s; } .subcat-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.12); transform: translateY(-2px); } .subcat-link { text-decoration: none; color: inherit; display: block; } .subcat-thumb { aspect-ratio: 1 / 1; overflow: hidden; background: #f0f0f0; position: relative; } .subcat-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; } .subcat-card:hover .subcat-img { transform: scale(1.05); } .subcat-info { padding: 12px 14px; text-align: center; } .subcat-name { font-size: .9rem; font-weight: 700; margin: 0 0 .25rem; color: var(--dimini-dark); line-height: 1.3; } .subcat-count { font-size: .78rem; color: var(--dimini-muted); } /* ───────────────────────────────────────────────────────── 4. SECTION POINTS FORTS — PLEINE LARGEUR (breakout) .dimini-features est à l'intérieur de #dimini-homepage (lui-même dans col-full). Le trick "full-bleed" utilise viewport-width pour s'étendre au-delà du conteneur. ─────────────────────────────────────────────────────── */ .dimini-features { width: 100vw; position: relative; left: 50%; transform: translateX(-50%); box-sizing: border-box; margin-bottom: -5.235848rem; background: var(--dimini-dark); color: #fff; padding: 64px 24px; margin-top: 16px; } .added_to_cart{ margin-top: 10px; border-radius: 5px; text-align: center; font-size: 13px; display: block; padding: 6px; } .dimini-features-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; } .feature-card { text-align: center; } .feature-icon { width: 64px; height: 64px; margin: 0 auto 18px; background: rgba(230,57,70,.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(230,57,70,.4); } /* Icône emoji (remplace les SVG hardcodés) */ .feature-icon-emoji { font-size: 1.8rem; line-height: 1; } /* Compatibilité avec les anciennes SVG si elles restent */ .feature-icon svg { width: 28px; height: 28px; stroke: var(--dimini-accent); } .feature-card h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .65rem; color: #fff; } .feature-card p { font-size: .88rem; line-height: 1.65; color: rgba(255,255,255,.68); margin: 0; } /* ───────────────────────────────────────────────────────── 5. RESPONSIVE ─────────────────────────────────────────────────────── */ /* ── Tablette & mobile (< 960px) — layout général ──────── */ @media (max-width: 960px) { .dimini-catalog-wrap { flex-direction: column; padding: 16px; } .dimini-cat-sidebar { flex: none; width: 100%; position: static; max-height: none; border-right: none; border-bottom: 1px solid var(--dimini-border); padding-right: 0; padding-bottom: 12px; margin-bottom: 16px; } .cat-tree { display: flex; flex-wrap: wrap; gap: 6px; } .cat-tree > .cat-item { border-bottom: none; } .cat-tree > .cat-item > a { background: var(--dimini-light); border: 1px solid var(--dimini-border); border-radius: 20px; padding: .3rem .75rem; font-size: .8rem; white-space: nowrap; } .cat-children { display: none !important; } .toggle-icon { display: none; } .dimini-sliders-main { padding-left: 0; } .dimini-features-inner { grid-template-columns: 1fr; gap: 32px; } /* * ══ PAS DE SWIPER < 960px ══ * Le JS ne crée pas d'instance Swiper. * Grille CSS statique à la place — zéro clignotement. */ .product-swiper { padding: 0 !important; overflow: visible !important; } .product-swiper .swiper-wrapper { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; transform: none !important; transition: none !important; width: auto !important; } .product-swiper .swiper-slide { width: auto !important; margin: 0 !important; } .product-swiper .swiper-button-prev, .product-swiper .swiper-button-next { display: none !important; } /* Pas de hover effects sur tactile */ .product-card, .product-card:hover, .subcat-card, .subcat-card:hover { transition: none !important; transform: none !important; } .product-img, .product-card:hover .product-img, .subcat-img, .subcat-card:hover .subcat-img { transition: none !important; transform: none !important; } /* Limiter à 6 produits visibles (3x2) */ .product-swiper .swiper-slide:nth-child(n+7) { display: none; } } /* ── Mobile (< 768px) — passe à 2 colonnes ────────────── */ @media (max-width: 768px) { .hero-swiper { height: 280px; } .hero-overlay { padding: 16px 20px; } .hero-title { font-size: 1.1rem; } .hero-price { font-size: .9rem; margin-bottom: .5rem; } .hero-btn.button { padding: .4rem 1rem !important; font-size: .85rem !important; } .hero-prev, .hero-next { display: none !important; } /* Grille 2 colonnes au lieu de 3 */ .product-swiper .swiper-wrapper { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } /* Limiter à 4 produits visibles (2x2) */ .product-swiper .swiper-slide:nth-child(n+5) { display: none; } /* Ré-afficher les items 5 et 6 qui étaient masqués par la règle 960px */ /* Non nécessaire : nth-child(n+5) est plus restrictif que nth-child(n+7) */ /* Cards compactes */ .product-name { font-size: .78rem; } .product-price { font-size: .82rem; } .product-details { padding: 6px 8px 4px; } .product-add-to-cart { padding: 4px 8px 8px; } .product-add-to-cart .button { font-size: .75rem !important; padding: .35rem !important; } .subcat-name { font-size: .82rem; } .subcat-count { font-size: .72rem; } .subcat-info { padding: 8px 10px; } } /* ── Petit mobile (< 480px) ── */ @media (max-width: 480px) { .hero-swiper { height: 220px; } .section-header { flex-wrap: wrap; gap: 4px; } .section-title { font-size: 1rem; } .dimini-features { padding: 32px 12px; } .feature-card h3 { font-size: .95rem; } .feature-card p { font-size: .82rem; } .dimini-catalog-wrap { padding: 12px 10px; } }