/* Page liste produits de catégorie (CategoryPageContent.astro) — reskin visuel du composant dynamique existant (backend réel déjà construit, voir memory moltow-platform), pas un dépôt de page statique comme le reste de ce chantier. Repris de moltow-08-2026/shop/meubles/canape/index.html (bloc id="cat-canape-b" de la source). ShopSubnav (mega-menu) déjà un composant réel séparé, son propre CSS n'est pas ici. Cible les classes RÉELLES déjà rendues par le composant (pas de renommage de markup, pour ne pas risquer de casser un composant qui dessert potentiellement des centaines de catégories) — le contenu (headerDescription/footerDescription) est déjà le bon texte en base, vérifié mot pour mot contre la maquette. box-sizing:border-box ci-dessous : présent dans le reset global de la maquette (*,*::before,*::after{box-sizing:border-box}) mais absent de page-base.css — sans lui, le padding de .products-list/.toolbar/ .shop-footer-description s'ADDITIONNE à leur max-width au lieu d'être inclus dedans (ex. .products-list : max-width 1400px + 2×48px de padding = 1496px de large réellement rendu). Conséquence concrète repérée par Katia : la grille produits affichait 4 colonnes au lieu de 3 (le calcul auto-fill/minmax avait ~96px de plus que prévu pour se caser une 4e colonne de 19.5rem). */ *, *::before, *::after { box-sizing: border-box; } /* body.logged-in/.logged-out plutôt que le simple `body` : Layout.astro pose toujours l'une de ces deux classes sur , ce qui bat par spécificité (0,1,1 > 0,0,1) le `:global(body){font-family:Poppins,...}` scopé de ProductPageContent.astro — son chunk CSS compilé par Vite se charge après page-products.css dans le HTML final (regroupement de styles de composants, indépendant de l'ordre des écrit dans Layout.astro), sans quoi il gagnerait par ordre de source. Pas de !important : la maquette n'utilise Fraunces (var(--font-display)) que par endroits précis, jamais sur body lui-même — la police système reste la vraie règle body de la source, la même que sur toutes les pages "pour qui". margin/line-height ci-dessous : page-base.css (baseStylesheet commun à toute la famille shop) n'a AUCUN reset body — margin:8px par défaut du navigateur restait donc visible. Sur category/univers ce trou était masqué par le même chunk :global(body) de ProductPageContent.astro (elles l'importent via le résolveur ../../pages/shop/[...path].astro, qui rend aussi les fiches produit) — mais les 4 pages "univers pièce" (RoomHubPageContent.astro, route séparée qui n'importe jamais ProductPageContent.astro) n'en héritaient pas, d'où la marge signalée par Katia. Porté ici, dans la règle partagée par toute la famille, plutôt que rafistolé sur cette seule route — évite de reproduire ce même trou au prochain composant shop qui n'importera pas ProductPageContent.astro. */ body.logged-in, body.logged-out { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; color: var(--ink, #332820); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ===== Fil d'Ariane ===== Retiré la taille/graisse/majuscules de la maquette (.cat-hero .fil, sans équivalent réel dans le markup de cette page — voir plus haut) au profit du style natif de page-base.css (.breadcrumb li{font-size:14px;color: #8996a2}, non gras) — demandé par Katia pour matcher la fiche produit, qui utilise ce même style natif sans override. */ .breadcrumb a:hover { color: var(--terra, #8a6248); } /* page-base.css a .section-title{color:#4b4aed} (indigo legacy, classe globale utilisée dans 50+ fichiers du site, jamais recolorée à la source — même motif que documenté des dizaines de fois sur ce chantier). h1 du hero et "Nos autres catégories" utilisent cette classe. */ .section-title { color: var(--ink, #332820); } /* ===== Hero de catégorie ===== Dans la maquette, .cat-hero est UNE seule section continue qui couvre le fil d'Ariane, le h1/intro ET la barre de filtres. Le composant réel les sépare en 3 .wrapper/.div frères — leur donner à chacun le MÊME dégradé indépendamment créait une rupture visible à chaque frontière (le dégradé recommençait à 0% à chaque fois). Corrigé en un aplat unique (teinte à mi-chemin du dégradé source) plutôt que 3 dégradés indépendants : aucune rupture possible, quel que soit le nombre/la hauteur de ces blocs. */ .wrapper:has(> .breadcrumb), .wrapper.medium.text-center, .wrapper:has(> .products-filters) { background: #f6f4f0; /* page-base.css : .wrapper{max-width:1354px;padding:0 16px} — une colonne centrée, pas pleine largeur. Sans ce reset, le fond ne recouvre que cette colonne (1354px) et laisse des bandes blanches de part et d'autre sur tout viewport plus large (repéré par Katia). */ max-width: none; padding-left: clamp(1.2rem, 4vw, 3rem); padding-right: clamp(1.2rem, 4vw, 3rem); } .wrapper:has(> .breadcrumb) { padding-top: 1rem; } .wrapper.medium.text-center { padding-top: 2rem; padding-bottom: 1.5rem; } .wrapper:has(> .products-filters) { padding-bottom: 0; } /*
entre le hero et les filtres — reste transparent entre les deux .wrapper unifiés ci-dessus, laissant un fin liseré blanc. */ .wrapper.medium.text-center + br { display: none !important; } .wrapper.medium.text-center h1.section-title { font-family: inherit; font-weight: 800; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); letter-spacing: -0.02em; line-height: 1.15; max-width: 30ch; margin: 0 auto 0.5rem; } .wrapper.medium.text-center .font-medium { color: #6b675e; font-size: 0.98rem; } /* ===== Filtres de sous-catégories ===== */ .products-filters { border-bottom: 1px solid #e5e2db; } .list-filter-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.4rem; padding-bottom: 0; } /* page-base.css stylise .list-filter-tag en pastille (bordure pointillée, arrondi, fond) avec un état actif/coché en bleu legacy #484fe3, via des sélecteurs composés plus spécifiques qu'un simple .list-filter-tag (`a.list-filter.active .list-filter-tag`, `input:checked+.list-filter-tag`) — neutralisé ici pour retrouver le texte brut souligné de la maquette. */ .list-filter { position: relative; margin: 0; padding: 0.4rem 0 0.9rem; font-weight: 700; font-size: 0.9rem; color: #6b675e; } .list-filter:hover { color: var(--ink, #332820); } .list-filter.active { color: var(--ink, #332820); } .list-filter.active::after, .list-filter:hover::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--terra, #8a6248); } .list-filter .list-filter-tag, a.list-filter .list-filter-tag { display: inline-block; height: auto; padding: 0; border: none; border-radius: 0; background: none; font-size: inherit; font-weight: inherit; } a.list-filter.active .list-filter-tag, .list-filter input:checked + .list-filter-tag { border: none; } a.list-filter.active .list-filter-tag .label, .list-filter input:checked + .list-filter-tag .label { color: inherit; } /* ===== Barre outils (compteur + accroche) ===== */ .toolbar { max-width: 1360px; margin: 0 auto; padding: 1.4rem clamp(1.2rem, 4vw, 3rem) 0.2rem; display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; font-size: 0.85rem; color: #9a958c; } .toolbar b { color: var(--ink, #332820); font-size: 1rem; } /* ===== Grille produits ===== */ #filtered-list-content { max-width: none; padding: 0; /* Même aplat que le fil d'Ariane/hero/filtres juste au-dessus (voir plus haut) — continuité totale de la bande jusqu'à la grille produits. */ background: #f6f4f0; } .products-list { list-style: none; margin: 0 auto; padding: 1rem clamp(1.2rem, 4vw, 3rem) 2.6rem; max-width: 1400px; display: grid; grid-template-columns: repeat(auto-fill, minmax(19.5rem, 1fr)); gap: 2.6rem 2rem; } .product-list-item { display: flex; flex-direction: column; height: 100%; text-decoration: none; } .product-list-item .project-image-container { margin: 0; position: relative; border-radius: 14px; overflow: hidden; background: #efede8; aspect-ratio: 1 / 1; } .product-list-item .project-image-container img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; transition: transform 0.45s cubic-bezier(0.2, 0.6, 0.2, 1); } .product-list-item:hover .project-image-container img { transform: scale(1.045); } .product-list-item .project-image-container::after { content: 'Voir le produit'; position: absolute; left: 50%; bottom: 0.9rem; translate: -50% 0; background: #fff; color: var(--ink, #332820); font-size: 0.78rem; font-weight: 700; padding: 0.55rem 1.2rem; border-radius: 999px; box-shadow: 0 10px 26px rgba(23, 24, 74, 0.18); opacity: 0; transition: opacity 0.25s, translate 0.25s; pointer-events: none; } .product-list-item:hover .project-image-container::after { opacity: 1; translate: -50% -4px; } /* L'indicateur de stock a été retiré de la liste produits (demande Katia 2026-09-07) — l'info reste sur la fiche produit (ProductPageContent.astro, "Disponibilité : En stock / Sur commande"). */ .product-list-item .specific-badge { position: absolute; top: 0.8rem; right: 0.8rem; background: #fff; color: var(--ink, #332820); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.26rem 0.65rem; border-radius: 999px; box-shadow: 0 4px 12px rgba(23, 24, 74, 0.12); } .product-list-item .content.product-info { padding: 0; } .product-list-item .product-name { margin: 0.85rem 0 0.05rem; font-size: 1.02rem; line-height: 1.3; font-weight: 700; color: var(--ink, #332820); } .product-list-item .product-desc { color: #9a958c; font-size: 0.78rem; min-height: 1.1em; } .product-list-item .price { margin-top: 0.4rem; font-weight: 800; color: var(--ink, #332820); font-size: 1.08rem; } .product-list-item:hover .price { color: var(--terra, #8a6248); } .product-list-item .crosslined-price { color: #9a958c; font-weight: 500; font-size: 0.85rem; margin-right: 0.3rem; } /* Carte promotionnelle insérée dans la grille (contenu réel, hors maquette — simplement restylée pour ne pas jurer dans la nouvelle grille). */ .product-list-item.product-reinssurance { background: var(--terra-soft, #eee2d7); border-radius: 14px; padding: 1.6rem; justify-content: center; color: var(--ink, #332820); /* Ne pas s'étirer sur toute la hauteur de la carte produit (photo + nom + prix) : rester un carré à la hauteur de la seule photo (.project-image-container, aspect-ratio 1/1) — demande patron 2026-09-07. */ height: auto; align-self: start; aspect-ratio: 1 / 1; } .product-list-item.product-reinssurance .title { font-weight: 800; font-size: 1.05rem; margin-bottom: 0.5rem; color: var(--terra-dark, #684735); } /* ===== Pagination ===== */ .pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem; padding: 0 clamp(1.2rem, 4vw, 3rem) 2.6rem; } .pagination .btn-page, .pagination .btn-previous, .pagination .btn-next { display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; height: 2.4rem; padding: 0 0.9rem; border-radius: 999px; border: 1.5px solid #e5e2db; font-weight: 700; font-size: 0.85rem; color: var(--ink, #332820); background: #fff; } .pagination .btn-page:hover, .pagination .btn-previous:hover, .pagination .btn-next:hover { border-color: var(--terra, #8a6248); color: var(--terra, #8a6248); } .pagination .btn-page.active { background: var(--terra, #8a6248); border-color: var(--terra, #8a6248); color: #fff; cursor: default; } /* ===== Section SEO (footerDescription réel) ===== */ .shop-footer-description { max-width: 52rem; margin: 0 auto !important; padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1.2rem, 4vw, 3rem) !important; background: none !important; color: var(--ink-soft, #57483e); line-height: 1.7; font-size: 1rem !important; } .shop-footer-description :global(p) { font-size: 1rem !important; margin: 0 0 1em; } .shop-footer-description :global(h3) { font-size: 1.15rem !important; margin: 1.6rem 0 0.6rem !important; font-weight: 800; color: var(--ink, #332820); } .shop-footer-description :global(ul) { list-style: none; padding-left: 1.1rem; } .shop-footer-description :global(li) { position: relative; padding-left: 0.2rem; } .shop-footer-description :global(li a) { color: var(--terra, #8a6248) !important; font-weight: 700; font-size: 1rem !important; text-decoration: none; } .shop-footer-description :global(li a:hover) { text-decoration: underline; } /* ===== Nos autres catégories ===== */ .autres-cats { background: #f4f2ee; padding: clamp(1.8rem, 3vw, 2.6rem) clamp(1.2rem, 4vw, 3rem); } .autres-cats .h2-style.section-title { font-family: var(--font-display, Georgia, serif); font-weight: 600; font-size: 1.5rem; } .autres-cats .h2-style.section-title strong { color: var(--terra, #8a6248); font-weight: 600; } /* .categories-list/.category-item ci-dessous : scopés à .autres-cats (section "voir aussi" en bas de la liste produits) — les mêmes noms de classe sont réutilisés par UniversPageContent.astro pour sa grille PRINCIPALE de sous-catégories (cartes image, pas des pastilles) ; sans ce scope, cette page-ci volerait le style pastille par erreur. */ .autres-cats .categories-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 0.9rem; } .autres-cats .category-item { padding: 0.5rem 1.05rem; border-radius: 999px; background: #fff; border: 1.5px solid #e5e2db; font-weight: 700; font-size: 0.85rem; color: var(--ink, #332820); text-decoration: none; } .autres-cats .category-item:hover { border-color: var(--terra, #8a6248); color: var(--terra, #8a6248); } /* ===== Pages univers : grille de sous-catégories (.uni-grid/.uni-card) ===== Cartes image + titre, distinctes des pastilles .autres-cats ci-dessus. */ .uni-grid { list-style: none; max-width: var(--measure, 1180px); margin: 0 auto; padding: 2.6rem clamp(1.2rem, 4vw, 3rem); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); gap: var(--gutter, 1.4rem); } .uni-card { display: flex; flex-direction: column; background: var(--card, #fff); border: 1px solid var(--line, #dfd3c7); border-radius: var(--radius, 14px); overflow: hidden; box-shadow: var(--shadow-sm, 0 4px 16px rgba(23, 24, 74, 0.07)); transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; text-decoration: none; } .uni-card figure { margin: 0; overflow: hidden; background: var(--bg-inset, #ebe1d5); } .uni-card figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform 0.35s ease; } .uni-card b { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.9rem 1.1rem; font-weight: 700; font-size: 0.95rem; color: var(--ink, #332820); } .uni-card b::after { content: '\2192'; color: var(--terra, #8a6248); opacity: 0; translate: -6px 0; transition: 0.18s; } .uni-card:hover, .uni-card:focus-visible { border-color: var(--terra, #8a6248); transform: translateY(-4px); box-shadow: var(--shadow, 0 14px 40px rgba(23, 24, 74, 0.1)); } .uni-card:hover figure img { transform: scale(1.06); } .uni-card:hover b { color: var(--terra-dark, #684735); } .uni-card:hover b::after, .uni-card:focus-visible b::after { opacity: 1; translate: 0 0; } /* ===== Pages univers : bandeau CTA final packs (.pack-band) ===== */ .pack-band { background: linear-gradient(135deg, var(--terra, #8a6248), var(--terra-dark, #684735)) !important; color: #fff; text-align: center; padding-block: clamp(2.5rem, 4vw, 3.5rem); } .pack-band .wrapper { max-width: none; padding-inline: clamp(1.2rem, 4vw, 3rem); } .pack-band hgroup { max-width: 48rem; margin: 0 auto 1.6rem; } .pack-band hgroup > p { color: rgba(255, 255, 255, 0.92); } .pack-band [data-eyebrow] { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: #fff; margin-bottom: 0.8rem; } .pack-band [data-eyebrow]::before { content: ''; width: 2rem; height: 2px; background: #fff; border-radius: 2px; } .pack-band h2.section-title { color: #fff; } /* CTA final : réutilise .btn-moltow (déjà terra globalement, moltow-buttons.css) plutôt que d'introduire [data-cta] — jamais utilisé ailleurs sur cette page. */ .pack-band .btn-moltow { background: #fff; color: var(--terra-dark, #684735); } .pack-band .btn-moltow:hover { background: var(--terra-soft, #eee2d7); } .pack-grid { list-style: none; max-width: 56rem; margin: 0 auto clamp(1.6rem, 3vw, 2.2rem); padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; } .pack-pill { display: inline-flex; align-items: center; justify-content: center; flex: 0 1 11.5rem; min-width: 10rem; padding: 0.7rem 1.2rem; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, 0.5); color: #fff; font-weight: 700; font-size: 0.9rem; text-decoration: none; transition: 0.2s; } .pack-pill:hover { background: #fff; color: var(--terra-dark, #684735); border-color: #fff; } /* ===== Pages "univers pièce" (Salon / Salle à manger / Entrée-couloir / Chambre) — voir plan "4 pages univers pièce". Classes préfixées .room- pour ne rien collisionner avec .uni-grid/.uni-card/.pack-band (réutilisés tels quels ci-dessus) ni avec .categories-list/.category-item (piège déjà rencontré sur le lot univers précédent). ===== */ /* Fil d'Ariane sans fond sur ces pages (Katia) — .wrapper.room-breadcrumb bat .wrapper:has(> .breadcrumb) par spécificité égale + ordre de source (déclaré après), sans toucher au fond partagé par CategoryPageContent/ UniversPageContent qui, eux, doivent le garder. */ .wrapper.room-breadcrumb { background: none; max-width: 1354px; padding-left: 16px; padding-right: 16px; padding-top: 0; } .room-hero { padding-block: clamp(2.5rem, 4vw, 4rem) clamp(2rem, 3vw, 3rem); } /* Tailles reprises des VRAIES valeurs calculées de la maquette (DevTools, pas la source CSS — la maquette empile 10