/* Polices Poppins (titres) / Open Sans (corps) : auto-hébergées via « Aegis+ › Réglages généraux » (upload de typo, aucun appel à Google Fonts). Sans téléversement : repli sur les polices système. */ /* CH Poêles — fiche produit. Refonte gabarit (fond blanc, accents verts, cartes). */ /* Police corps = Open Sans ; titres = Poppins (déclarés par classe). Palette maquette Lovable. */ .chp-fiche, .chp-prods, .chp-cats, .chp-similar { font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } /* Variables globales (disponibles pour TOUS les widgets : fiche, produits, catégories…). Sans cela var(--chp-accent) était indéfini hors .chp-fiche → CTA sans fond, le thème reprenait la main (ex. rouge au survol). La page Réglages peut surcharger --chp-accent. */ :root { --chp-ink: #171B1F; --chp-text: #2B3033; --chp-muted: #5E6468; --chp-line: #E2E5E8; --chp-accent: #51B148; --chp-accent-dk: #45993D; --chp-soft: #EFF2F5; } .chp-fiche { --chp-ink: #171B1F; /* titres / encre */ --chp-text: #2B3033; /* texte courant */ --chp-muted: #5E6468; /* gris secondaire */ --chp-line: #E2E5E8; /* bordures */ --chp-accent: #51B148; /* vert vif (maquette) — accents + CTA */ --chp-accent-dk: #45993D; --chp-soft: #EFF2F5; /* fonds doux (price box / sections) */ color: var(--chp-text); max-width: 1180px; margin: 0 auto; font-size: 16px; line-height: 1.6; } .chp-fiche *, .chp-fiche *::before, .chp-fiche *::after { box-sizing: border-box; } /* --- Lien retour --- */ .chp-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--chp-muted); margin: 0 0 14px; } .chp-breadcrumb a { color: var(--chp-muted); text-decoration: none; } .chp-breadcrumb a:hover { color: var(--chp-accent); } .chp-breadcrumb__sep { color: var(--chp-line, #D1D5DB); } .chp-breadcrumb__current { color: var(--chp-ink); font-weight: 600; } .chp-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--chp-muted); text-decoration: none; margin: 0 0 18px; } .chp-back:hover { color: var(--chp-ink); } .chp-back__arrow { font-size: 1.1em; } /* --- Haut : galerie + infos --- */ .chp-fiche__top { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } .chp-fiche__top--solo { grid-template-columns: 1fr; } @media (max-width: 860px) { .chp-fiche__top { grid-template-columns: 1fr; gap: 22px; } /* display:contents fait remonter les enfants de .chp-info comme items de la grille. */ .chp-fiche__top > .chp-info { display: contents; } .chp-info__eyebrow { order: 1; } .chp-info__title { order: 2; } .chp-info__accroche { order: 3; } .chp-keyspecs { order: 4; margin-bottom: 0; } .chp-finitions { order: 5; margin-bottom: 0; } .chp-fiche__top > .chp-gallery { order: 6; } .chp-pricebox { order: 7; } /* Image de présentation FIXE (arrondie, sans cadre) à DROITE du titre + logo de marque. Le sur-titre (POÊLES À GRANULÉS · MCZ) reste PLUS HAUT que l'image, qui s'aligne sur le titre (donc descendue). La grande galerie reste en dessous. */ .chp-fiche__top:not(.chp-fiche__top--solo) { grid-template-columns: minmax(0, 1fr) 48%; column-gap: 14px; row-gap: 12px; align-items: start; } .chp-fiche__top:not(.chp-fiche__top--solo) .chp-info__eyebrow { grid-column: 1 / -1; order: 1; } .chp-fiche__top:not(.chp-fiche__top--solo) .chp-info__title { grid-column: 1; order: 2; margin-bottom: 0; font-size: clamp(20px, 5.6vw, 30px); } .chp-fiche__top:not(.chp-fiche__top--solo) .chp-info__presimg { grid-column: 2; grid-row: span 2; order: 2; align-self: start; } .chp-fiche__top:not(.chp-fiche__top--solo) .chp-info__brand { grid-column: 1; order: 3; } .chp-fiche__top:not(.chp-fiche__top--solo) .chp-info__accroche { order: 4; } .chp-fiche__top:not(.chp-fiche__top--solo) .chp-info__accroche, .chp-fiche__top:not(.chp-fiche__top--solo) .chp-keyspecs, .chp-fiche__top:not(.chp-fiche__top--solo) .chp-finitions, .chp-fiche__top:not(.chp-fiche__top--solo) > .chp-gallery, .chp-fiche__top:not(.chp-fiche__top--solo) .chp-pricebox { grid-column: 1 / -1; } } /* Image de présentation (mobile uniquement) : arrondie, sans cadre. Masquée sur PC. */ .chp-info__presimg { display: none; } @media (max-width: 860px) { .chp-info__presimg { display: block; border-radius: 14px; overflow: hidden; } .chp-info__presimg img { width: 100%; height: auto; display: block; border-radius: 14px; } /* Fil d'Ariane masqué sur mobile : on garde seulement « Retour au catalogue ». */ .chp-breadcrumb { display: none; } } /* Logo de la marque sous le nom du modèle (petit). */ .chp-info__brand { margin: 2px 0 10px; } .chp-info__brand img { height: 30px; width: auto; max-width: 150px; object-fit: contain; display: block; } /* Logo cliquable vers la page marque : pas de style de lien hérité. */ .chp-info__brandlink { display: inline-block; text-decoration: none; transition: opacity .15s ease, transform .15s ease; } .chp-info__brandlink:hover { opacity: .72; transform: translateY(-1px); } /* Sécurité : de l'air en haut sur mobile (le texte ne passe pas sous le header). */ @media (max-width: 600px) { .chp-fiche { padding-top: 28px; } } /* --- Grande description repliable (« Lire plus ») — mobile + PC --- */ .chp-desc-wrap { position: relative; display: flex; flex-direction: column; margin-bottom: 20px; } .chp-desc-wrap.is-collapsed .chp-desc { max-height: 260px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 100%); mask-image: linear-gradient(to bottom, #000 76%, transparent 100%); } .chp-readmore { margin-top: 10px; padding: 8px 0; background: none; border: 0; cursor: pointer; display: inline-flex; align-self: flex-end; align-items: center; gap: 6px; font-family: Poppins, sans-serif; font-weight: 700; font-size: 15px; color: var(--chp-accent); } .chp-readmore[hidden] { display: none; } .chp-readmore:hover { text-decoration: underline; } .chp-readmore:hover, .chp-readmore:focus, .chp-readmore:focus-visible, .chp-readmore:active { background: none !important; box-shadow: none !important; } .chp-readmore__ic { transition: transform .2s ease; } .chp-desc-wrap.is-open .chp-readmore__ic { transform: rotate(180deg); } /* --- Galerie --- */ /* Cadre carré fixe : la photo REMPLIT le cadre (cover), centrée, sans bandes blanches — toutes les images occupent le même cadre (le contenu dessous ne bouge plus). Clic → lightbox qui montre l'image entière (contain). */ .chp-gallery__main { aspect-ratio: 1 / 1; border-radius: 16px; border: 1px solid var(--chp-line); background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; } .chp-gallery__main { cursor: zoom-in; } .chp-gallery__main img { width: 100%; height: 100%; object-fit: cover; object-position: center; padding: 0; display: block; border-radius: 0; background: none; } .chp-gallery__thumbs { display: flex; gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; flex-wrap: wrap; } .chp-gallery__thumbs button { padding: 0; border: 2px solid var(--chp-line); background: none; border-radius: 12px; cursor: pointer; overflow: hidden; width: 84px; height: 84px; transition: border-color .15s ease; } .chp-gallery__thumbs button.is-active { border-color: var(--chp-accent); } .chp-gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; } /* --- Infos --- */ .chp-info__eyebrow { text-transform: uppercase; letter-spacing: .1em; font-size: 13px; font-weight: 700; color: var(--chp-accent); margin: 0 0 8px; } .chp-info__title { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; margin: 0 0 12px; color: var(--chp-ink); font-family: Poppins, sans-serif; font-weight: 800; } .chp-info__accroche { color: var(--chp-muted); font-size: 1.05rem; margin: 0 0 22px; } /* --- Finitions --- */ .chp-finitions { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; flex-wrap: wrap; } .chp-finitions__label { font-size: 14px; color: var(--chp-muted); } .chp-finitions__list { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0; } .chp-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--chp-line); cursor: pointer; padding: 0; } .chp-swatch.is-active { box-shadow: 0 0 0 2px var(--chp-accent); } .chp-finitions__name { font-size: 14px; font-weight: 600; } /* --- Accessibilité : focus clavier visible (audit F8) --- */ .chp-swatch:focus-visible, .chp-gallery__thumbs button:focus-visible, .chp-filter__btn:focus-visible, .chp-sort__select:focus-visible, .chp-loadmore:focus-visible { outline: 3px solid var(--chp-accent); outline-offset: 2px; } /* --- 3 specs clés --- */ .chp-keyspecs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 24px; } @media (max-width: 480px) { .chp-keyspecs { grid-template-columns: 1fr 1fr; } } .chp-keyspec { border: 1px solid var(--chp-line); border-radius: 14px; padding: 16px; text-align: center; } .chp-keyspec__label { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--chp-muted); margin-bottom: 6px; } .chp-keyspec__value { display: block; font-weight: 800; font-size: 1.15rem; color: var(--chp-accent); font-family: Poppins, sans-serif; } /* Mobile : cadres résumé (puissance/rendement) plus compacts + moins d'espace avant les finitions. (Placé après les règles de base pour bien les surcharger.) */ @media (max-width: 860px) { .chp-keyspecs { gap: 10px; margin: 0 0 10px; } .chp-keyspec { padding: 9px 10px; border-radius: 12px; } .chp-keyspec__label { margin-bottom: 3px; } .chp-keyspec__value { font-size: 1rem; } .chp-finitions { margin: 0 0 14px; } } /* --- Boîte prix / devis --- */ .chp-pricebox { position: relative; background: var(--chp-soft); border: 1px solid #CFE6CC; border-radius: 18px; padding: 22px 24px; margin: 0 0 26px; } .chp-share-wrap { position: absolute; top: 16px; right: 16px; } .chp-share { width: 36px; height: 36px; min-width: 0; box-sizing: border-box; padding: 0; margin: 0; line-height: 0; display: flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--chp-line); background: #fff; color: var(--chp-muted); cursor: pointer; transition: border-color .15s ease, color .15s ease; } .chp-share svg { display: block; margin: 0; } /* Menu de partage (PC) */ .chp-share-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 210px; display: flex; flex-direction: column; gap: 2px; padding: 6px; background: #fff; border: 1px solid var(--chp-line); border-radius: 14px; box-shadow: 0 12px 34px rgba(16,24,32,.16); } .chp-share-menu[hidden] { display: none; } .chp-share-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 9px 11px; border: 0; background: none; border-radius: 9px; font: 600 14px/1.2 "Open Sans", system-ui, sans-serif; color: var(--chp-ink); text-align: left; text-decoration: none; cursor: pointer; transition: background .12s ease, color .12s ease; } .chp-share-menu__item svg { flex: 0 0 auto; color: var(--chp-muted); } .chp-share-menu__item:hover, .chp-share-menu__item:focus-visible { background: var(--chp-soft); color: var(--chp-ink); outline: none; } .chp-share-menu__item:hover svg, .chp-share-menu__item:focus-visible svg { color: var(--chp-accent); } .chp-share-menu__item.is-copied { color: var(--chp-accent); } .chp-share-menu__item.is-copied svg { color: var(--chp-accent); } @media (max-width: 480px) { .chp-share-menu { right: auto; left: 0; } } .chp-share:hover { border-color: var(--chp-accent); color: var(--chp-accent); } /* Neutralise un éventuel button:hover{background:red} hérité du thème. */ .chp-share:hover, .chp-share:focus, .chp-share:focus-visible, .chp-share:active { background: #fff !important; box-shadow: none !important; outline: none; } .chp-share:focus-visible { outline: 3px solid var(--chp-accent) !important; outline-offset: 2px; } .chp-gallery__thumbs button:hover, .chp-gallery__thumbs button:focus, .chp-gallery__thumbs button:active { background: none !important; } .chp-pricebox__links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(0,0,0,.08); } .chp-pricebox__link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--chp-muted); text-decoration: none; transition: color .15s ease; } button.chp-pricebox__link { border: 0; background: none; padding: 0; margin: 0; cursor: pointer; font-family: inherit; line-height: 1.2; } .chp-pricebox__link:hover, .chp-pricebox__link:focus-visible { color: var(--chp-accent); } button.chp-pricebox__link:hover, button.chp-pricebox__link:focus, button.chp-pricebox__link:focus-visible, button.chp-pricebox__link:active { background: none !important; box-shadow: none !important; outline: none; } button.chp-pricebox__link:focus-visible { outline: 2px solid var(--chp-accent) !important; outline-offset: 3px; border-radius: 4px; } .chp-pricebox__link svg { flex: 0 0 auto; } /* Fenêtre modale (comparateur « Calculer vos économies ») */ .chp-modal { position: fixed; inset: 0; z-index: 99990; display: flex; align-items: center; justify-content: center; padding: 20px; } .chp-modal[hidden] { display: none; } .chp-modal__overlay { position: absolute; inset: 0; background: rgba(10,15,20,.55); backdrop-filter: blur(2px); } .chp-modal__dialog { position: relative; z-index: 1; width: 100%; max-width: 1000px; max-height: 92vh; overflow: auto; background: #fff; border-radius: 20px; box-shadow: 0 30px 80px rgba(10,15,20,.4); padding: 10px; -webkit-overflow-scrolling: touch; } .chp-modal__close { position: absolute; top: 12px; right: 14px; z-index: 2; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--chp-line); background: #fff; border-radius: 999px; font-size: 22px; line-height: 1; color: var(--chp-muted); cursor: pointer; } .chp-modal__close:hover, .chp-modal__close:focus, .chp-modal__close:focus-visible, .chp-modal__close:active { background: #fff !important; border-color: var(--chp-accent) !important; color: var(--chp-accent) !important; box-shadow: none !important; outline: none; } .chp-modal__body { padding: 8px; } body.chp-modal-open { overflow: hidden; } @media (max-width: 480px) { .chp-modal { padding: 10px; } .chp-modal__dialog { border-radius: 16px; } } .chp-pricebox__eyebrow { display: block; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; color: var(--chp-muted); margin-bottom: 2px; } .chp-pricebox__price { display: block; font-family: Poppins, sans-serif; font-weight: 800; font-size: 2rem; color: var(--chp-ink); line-height: 1.1; } .chp-pricebox__cur { font-size: 1rem; font-weight: 700; } .chp-pricebox__note { font-size: 13px; color: var(--chp-muted); margin: 6px 0 16px; } /* --- CTA --- */ .chp-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 0; } /* Mention discrète sous les boutons : agences où le produit n'est pas exposé. */ .chp-indispo { margin: 10px 0 0; font-size: .82rem; font-weight: 400; color: #C9564C; } .chp-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: 999px; font-weight: 700; text-decoration: none; cursor: pointer; border: 1px solid transparent; font-family: Poppins, sans-serif; transition: background .15s ease, box-shadow .15s ease, transform .15s ease, color .15s ease; } .chp-btn .chp-ic { width: 1.1em; height: 1.1em; } .chp-btn--primary { background: var(--chp-accent); color: #fff; box-shadow: 0 8px 20px rgba(81, 177, 72,.30); } .chp-btn--primary:hover { background: var(--chp-accent-dk); transform: translateY(-1px); } .chp-btn--ghost { background: #fff; color: var(--chp-ink); border-color: var(--chp-line); } .chp-btn--ghost:hover { background: #fff; border-color: var(--chp-accent); color: var(--chp-accent); } /* --- Description --- */ /* Description + caractéristiques en PLEINE LARGEUR sous le bloc galerie/infos. */ .chp-fiche__body { margin-top: 40px; } .chp-fiche__body .chp-features { margin-top: 40px; } .chp-desc { color: var(--chp-text); margin: 0 0 22px; font-size: 1.05rem; line-height: 1.7; } .chp-desc p { margin: 0 0 16px; } /* Relief du texte de présentation (titres, images, citations, listes, médias). */ .chp-desc h2, .chp-desc h3, .chp-desc h4 { font-family: Poppins, sans-serif; color: var(--chp-ink); font-weight: 800; line-height: 1.2; margin: 1.6em 0 .5em; } .chp-desc h2 { font-size: 1.6rem; } .chp-desc h3 { font-size: 1.3rem; } .chp-desc h4 { font-size: 1.1rem; } .chp-desc a { color: var(--chp-accent); text-decoration: underline; text-underline-offset: 2px; } .chp-desc strong { color: var(--chp-ink); font-weight: 700; } .chp-desc ul, .chp-desc ol { margin: 0 0 16px; padding-left: 1.3em; } .chp-desc li { margin: 0 0 6px; } .chp-desc blockquote { margin: 22px 0; padding: 14px 20px; border-left: 4px solid var(--chp-accent); background: #F1F7F0; border-radius: 0 10px 10px 0; color: var(--chp-ink); font-size: 1.1rem; } .chp-desc blockquote p:last-child { margin: 0; } .chp-desc hr { border: 0; border-top: 1px solid var(--chp-line, #E2E5E8); margin: 28px 0; } /* Images de présentation insérées dans le texte (relief : coins arrondis + ombre). */ .chp-desc img { max-width: 100%; height: auto; border-radius: 14px; box-shadow: 0 12px 30px rgba(15,23,42,.10); } .chp-desc figure { margin: 22px 0; } .chp-desc figure img { display: block; } .chp-desc figcaption, .chp-desc .wp-caption-text { margin-top: 8px; font-size: .9rem; color: var(--chp-muted, #5E6468); text-align: center; } .chp-desc .alignleft { float: left; margin: 6px 24px 16px 0; max-width: 50%; } .chp-desc .alignright { float: right; margin: 6px 0 16px 24px; max-width: 50%; } .chp-desc .aligncenter { display: block; margin: 22px auto; } .chp-desc .wp-caption { max-width: 100%; } .chp-desc .wp-block-image, .chp-desc figure.wp-block-image { margin: 22px 0; } .chp-desc::after { content: ""; display: table; clear: both; } @media (max-width: 520px) { .chp-desc .alignleft, .chp-desc .alignright { float: none; max-width: 100%; margin: 16px 0; } } /* --- Checklist caractéristiques --- */ /* Déclinaisons (variantes puissance / options) */ .chp-variants { margin: 40px 0 0; } .chp-variants__title { font-family: Poppins, sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--chp-ink); margin: 0 0 18px; } .chp-variants__list { display: grid; gap: 16px; } .chp-variant { border: 1px solid var(--chp-line, #E2E5E8); border-radius: 16px; padding: 18px 20px; background: #fff; } .chp-variant__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .chp-variant__label { font-weight: 800; color: var(--chp-ink); font-size: 1.05rem; } .chp-variant__note { color: var(--chp-muted, #5E6468); font-size: .92rem; } .chp-variant__thumbs { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; } .chp-variant__thumbs button { padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; cursor: pointer; background: #f1f3f5; width: 72px; height: 72px; } .chp-variant__thumbs button:hover { border-color: var(--chp-line, #E2E5E8); } .chp-variant__thumbs button.is-active { border-color: var(--chp-accent, #51B148); } .chp-variant__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; } .chp-features { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 26px; list-style: none; padding: 0; margin: 0; } @media (max-width: 520px) { .chp-features { grid-template-columns: 1fr; } } .chp-feature { display: flex; align-items: flex-start; gap: 10px; } .chp-feature__check { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: #E7F2E6; color: var(--chp-accent); display: flex; align-items: center; justify-content: center; margin-top: 1px; } .chp-feature__check svg { width: 13px; height: 13px; } .chp-feature__label { color: var(--chp-text); } /* --- Caractéristiques techniques (grille de cartes à icônes, façon maquette) --- */ .chp-techspecs { margin-top: 56px; border-radius: 22px; padding: 36px; position: relative; isolation: isolate; overflow: hidden; /* Fond « hero » : même dégradé + halos verts que la section hero de l'accueil (les variables --chp-sec-tint / --chp-sec-glow sont héritées de .chp-herobg). */ background: linear-gradient(135deg, var(--chp-sec-tint, rgba(81, 177, 72, .12)) 0%, #fff 46%, #fff 100%); } .chp-techspecs::before, .chp-techspecs::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(80px); pointer-events: none; } .chp-techspecs::before { top: -40px; right: -100px; width: 300px; height: 300px; background: color-mix(in srgb, var(--chp-sec-glow, #51B148) 20%, transparent); } .chp-techspecs::after { bottom: -80px; left: -120px; width: 300px; height: 300px; background: color-mix(in srgb, var(--chp-sec-glow, #51B148) 12%, transparent); } @supports not (background: color-mix(in srgb, #000 10%, transparent)) { .chp-techspecs::before { background: rgba(81, 177, 72, .20); } .chp-techspecs::after { background: rgba(81, 177, 72, .12); } } .chp-techspecs__title { font-size: 26px; margin: 0 0 22px; color: var(--chp-ink); font-family: Poppins, sans-serif; font-weight: 800; } .chp-techspecs__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 960px) { .chp-techspecs__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .chp-techspecs__grid { grid-template-columns: 1fr; } .chp-techspecs { padding: 24px; } } .chp-techcard { background: #fff; border: 1px solid var(--chp-line); border-radius: 14px; padding: 18px; } .chp-techcard__head { display: flex; align-items: center; gap: 8px; color: var(--chp-accent); text-transform: uppercase; letter-spacing: .05em; font-size: 12px; font-weight: 700; margin-bottom: 10px; } .chp-techcard__head .chp-ic { width: 18px; height: 18px; flex: 0 0 auto; } .chp-techcard__label { line-height: 1.2; } .chp-techcard__value { display: block; font-family: Poppins, sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--chp-ink); } /* --- Documents --- */ .chp-docs { margin-top: 40px; } .chp-docs__title { font-size: 22px; margin: 0 0 16px; color: var(--chp-ink); font-family: Poppins, sans-serif; font-weight: 800; } /* Documents PDF : tuiles logo PDF (fond transparent) + titre simplifié dessous. */ .chp-docs__grid { display: flex; flex-wrap: wrap; gap: 14px; } .chp-doc { display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; width: 132px; padding: 16px 12px; text-decoration: none; text-align: center; background: #fff; border: 1px solid var(--chp-line, #E2E5E8); border-radius: 14px; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .chp-doc:hover { border-color: var(--chp-accent); box-shadow: 0 10px 24px rgba(15,23,42,.08); transform: translateY(-2px); } .chp-doc__svg { width: 46px; height: 48px; display: block; } .chp-doc__img { width: 46px; height: 46px; display: block; border-radius: 20%; object-fit: cover; } .chp-doc__label { font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--chp-ink, #171B1F); } @media (max-width: 480px) { .chp-doc { width: calc(50% - 7px); } } /* --- Modèles similaires --- */ .chp-similar { margin-top: 56px; } .chp-similar__title { font-size: 26px; margin: 0 0 22px; color: var(--chp-ink); font-family: Poppins, sans-serif; font-weight: 800; } .chp-similar__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 760px) { .chp-similar__grid { grid-template-columns: 1fr; } } /* Option « Carrousel » (mobile) pour les modèles similaires. */ @media (max-width: 760px) { .chp-similar--carousel .chp-similar__grid { grid-template-columns: none; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 10px; scroll-padding: 0 4px; } .chp-similar--carousel .chp-similar__grid::-webkit-scrollbar { height: 6px; } .chp-similar--carousel .chp-simcard { flex: 0 0 82%; scroll-snap-align: start; } } .chp-simcard { display: flex; flex-direction: column; text-decoration: none; color: inherit; border: 1px solid var(--chp-line); border-radius: 18px; overflow: hidden; background: #fff; } .chp-simcard__media { display: block; aspect-ratio: 1 / 1; background: #f1f3f5; overflow: hidden; border-radius: 17px 17px 0 0; } .chp-simcard__img { width: 100%; height: 100%; object-fit: cover; display: block; } .chp-simcard__body { padding: 18px; } .chp-simcard__brand { display: block; text-transform: uppercase; letter-spacing: .07em; font-size: 11px; color: var(--chp-muted); margin-bottom: 4px; } .chp-simcard__name { display: block; font-family: Poppins, sans-serif; font-weight: 700; color: var(--chp-accent); margin-bottom: 6px; } .chp-simcard__desc { display: block; color: var(--chp-muted); font-size: .92rem; } /* Section « Produits similaires » : réutilise le markup .chp-prod / .chp-prods__track (grille soignée sur desktop, carrousel tactile sur mobile). */ .chp-similar .chp-prods { position: relative; } .chp-similar .chp-prods__track { grid-template-columns: repeat(3, 1fr); } @media (max-width: 1024px) { .chp-similar .chp-prods__track { grid-template-columns: repeat(2, 1fr); } } /* Cartes « Produits similaires » = version compacte du listing (section secondaire, ne doit pas dominer la fiche). Image carrée + corps resserré → cartes bien moins hautes. */ .chp-similar .chp-prod__media { aspect-ratio: 1 / 1; } .chp-similar .chp-prod__body { padding: 18px; gap: 6px; } .chp-similar .chp-prod__title { font-size: 18px; } .chp-similar .chp-prod__accroche { font-size: 14px; -webkit-line-clamp: 2; line-clamp: 2; } .chp-similar .chp-prod__specs { padding-top: 12px; gap: 8px; } .chp-similar .chp-prod__spec-v { font-size: 15px; } @media (max-width: 760px) { .chp-similar .chp-prods__track { grid-template-columns: 1fr; } .chp-similar--carousel .chp-prods__track { display: flex; grid-template-columns: none; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; padding-bottom: 10px; scroll-padding: 0 4px; } .chp-similar--carousel .chp-prods__track::-webkit-scrollbar { height: 6px; } .chp-similar--carousel .chp-prod { flex: 0 0 82%; scroll-snap-align: start; } } /* =================================================================== Widget « CH Produits » — grille + carrousel (les couleurs/typos/espacements sont surchargeables via Elementor) =================================================================== */ .chp-prods { position: relative; } /* ------------------------------------------------------------------ * * Fond de section « hero » (repris de la section hero de l'accueil) : * dégradé diagonal vert clair -> blanc + deux halos verts flous. * Variables surchargeables depuis Elementor : --chp-sec-tint / --chp-sec-glow. * ------------------------------------------------------------------ */ .chp-prods--hero, .chp-prods--soft { --chp-sec-tint: rgba(81, 177, 72, .12); --chp-sec-glow: #51B148; --chp-hero-minh: 0px; /* 0 = hauteur pilotée par le contenu (comme l'accueil) */ position: relative; isolation: isolate; overflow: hidden; min-height: var(--chp-hero-minh, 0px); padding: clamp(36px, 6vw, 88px) clamp(20px, 5vw, 64px); border-radius: 32px; background: linear-gradient(135deg, var(--chp-sec-tint) 0%, #ffffff 46%, #ffffff 100%); } /* Halos lumineux flous (façon brand/20 + brand/10 de la maquette). */ .chp-prods--hero::before, .chp-prods--hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(90px); pointer-events: none; } .chp-prods--hero::before { top: 24px; right: -120px; width: 360px; height: 360px; background: color-mix(in srgb, var(--chp-sec-glow) 22%, transparent); } .chp-prods--hero::after { bottom: -60px; left: -140px; width: 360px; height: 360px; background: color-mix(in srgb, var(--chp-sec-glow) 12%, transparent); } /* Repli navigateurs sans color-mix : halos en vert marque translucide. */ @supports not (background: color-mix(in srgb, #000 10%, transparent)) { .chp-prods--hero::before { background: rgba(81, 177, 72, .22); } .chp-prods--hero::after { background: rgba(81, 177, 72, .12); } } /* Mobile : moins de padding, halos plus discrets pour éviter tout débordement. */ @media (max-width: 600px) { .chp-prods--hero, .chp-prods--soft { border-radius: 20px; } .chp-prods--hero::before, .chp-prods--hero::after { width: 220px; height: 220px; filter: blur(70px); } } /* ------------------------------------------------------------------ * * Recette « Fond hero » PARTAGÉE (widgets Catégories / Fiche + agent * boutiques). Même ambiance que le hero de l'accueil : dégradé diagonal * vert clair -> blanc + deux halos verts flous, respiration py-28 de * l'accueil (padding jusqu'à 112px) et hauteur pilotée par le contenu. * Variante « --soft » = même fond SANS halos. * Variables surchargeables via Elementor : --chp-sec-tint / --chp-sec-glow / * --chp-hero-minh (hauteur minimale responsive, 0 par défaut). * ------------------------------------------------------------------ */ .chp-herobg, .chp-herobg--soft { --chp-sec-tint: rgba(81, 177, 72, .12); --chp-sec-glow: #51B148; --chp-hero-minh: 0px; /* défaut : hauteur pilotée par le contenu = comme l'accueil */ position: relative; isolation: isolate; overflow: hidden; min-height: var(--chp-hero-minh, 0px); padding: clamp(48px, 8vw, 112px) clamp(20px, 5vw, 64px); /* respiration py-28 de l'accueil */ border-radius: 32px; background: linear-gradient(135deg, var(--chp-sec-tint) 0%, #fff 46%, #fff 100%); display: flex; flex-direction: column; justify-content: center; } .chp-herobg::before, .chp-herobg::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(90px); pointer-events: none; } .chp-herobg::before { top: 24px; right: -120px; width: 360px; height: 360px; background: color-mix(in srgb, var(--chp-sec-glow) 22%, transparent); } .chp-herobg::after { bottom: -60px; left: -140px; width: 360px; height: 360px; background: color-mix(in srgb, var(--chp-sec-glow) 12%, transparent); } @supports not (background: color-mix(in srgb, #000 10%, transparent)) { .chp-herobg::before { background: rgba(81, 177, 72, .22); } .chp-herobg::after { background: rgba(81, 177, 72, .12); } } @media (max-width: 600px) { .chp-herobg, .chp-herobg--soft { border-radius: 20px; } .chp-herobg::before, .chp-herobg::after { width: 220px; height: 220px; filter: blur(70px); } } /* Variante PLEINE LARGEUR (bord à bord) : le dégradé occupe toute la largeur de l'écran, comme la bande hero de l'accueil ; le contenu reste centré (max 1160). */ .chp-herobg--full { max-width: none !important; width: 100vw; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; border-radius: 0 !important; padding-left: max(20px, calc((100vw - 1160px) / 2)); padding-right: max(20px, calc((100vw - 1160px) / 2)); } .chp-herobg--full::before { right: max(-120px, calc((100vw - 1160px) / -2 - 40px)); } @media (max-width: 600px) { .chp-herobg--full { padding-left: 20px; padding-right: 20px; padding-top: 80px; } } /* En-tête : surtitre + titre à gauche, filtres à droite */ .chp-prods__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; } .chp-prods__eyebrow { display: block; font-family: Poppins, sans-serif; font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #45993D; margin-bottom: 8px; } .chp-prods__title { margin: 0; font-family: Poppins, sans-serif; font-weight: 800; font-size: 40px; line-height: 1.05; color: #171B1F; } .chp-prods__track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .chp-prod { display: flex; flex-direction: column; height: 100%; /* remplit la cellule de grille -> cartes de hauteur égale */ text-decoration: none; color: inherit; border: 1px solid var(--chp-line, #E2E5E8); border-radius: 18px; overflow: hidden; background: #fff; transition: box-shadow .15s ease, transform .15s ease; } .chp-prod:hover { box-shadow: 0 12px 26px rgba(15,23,42,.10); transform: translateY(-2px); background: #fff; color: inherit; } .chp-prod__media { position: relative; background: #fff; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 17px 17px 0 0; } .chp-prod__badge { position: absolute; top: 16px; left: 16px; z-index: 2; background: #EEF6E6; color: #45993D; font-family: Poppins, sans-serif; font-weight: 800; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; } .chp-prod__media { flex: 0 0 auto; } /* image jamais compressée -> même hauteur partout */ /* Cadre uniforme partout : l'image REMPLIT le cadre (cover), centrée, SANS bandes blanches. Les photos fournisseurs ont des marges blanches → cover les rogne et agrandit le produit. Le cadre .chp-prod__media (aspect-ratio 4/5) définit la zone. */ .chp-prod__img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; box-sizing: border-box; padding: 0; } /* Image pleine taille (100%×100%) + cover forcé (bat le défaut d'Elementor et la hauteur naturelle de l'image). */ .chp-prods .chp-prod__media > .chp-prod__img, .chp-prods .chp-prod__media > picture > .chp-prod__img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; padding: 0 !important; } .chp-prod__body { padding: 22px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; } .chp-prod__eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #45993D; font-weight: 800; } .chp-prod__brand { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #8b929b; font-weight: 700; } .chp-prod__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .chp-prod__title { font-size: 22px; margin: 0; color: #171B1F; font-family: Poppins, sans-serif; font-weight: 800; } .chp-prod__price { font-family: Poppins, sans-serif; font-weight: 800; font-size: 18px; color: #45993D; white-space: nowrap; } /* Description tronquée à 4 lignes -> hauteur de bloc homogène entre cartes. */ .chp-prod__accroche { font-size: 15px; color: #5E6468; margin: 0; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } /* Specs épinglées en bas de la carte -> la ligne PUISSANCE/RENDEMENT s'aligne partout. */ .chp-prod__specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--chp-line, #E2E5E8); } .chp-prod__spec { display: flex; flex-direction: column; gap: 4px; text-align: center; } .chp-prod__spec-l { font-size: 11px; letter-spacing: .04em; color: #8b929b; font-weight: 700; } .chp-prod__spec-v { font-size: 16px; color: #171B1F; font-family: Poppins, sans-serif; font-weight: 800; } .chp-prod__btn { margin-top: 10px; align-self: flex-start; background: #45993D; color: #fff; padding: 10px 18px; border-radius: 8px; font-weight: 600; font-family: Poppins, sans-serif; } /* Carte produit repliable sur mobile : flèche à droite du nom qui révèle description + puissance/rendement (+ bouton) → carte allégée. Masqué sur PC. */ .chp-prod__title { flex: 1 1 auto; } .chp-prod__toggle { display: none; } @media (max-width: 600px) { .chp-prod__head { align-items: center; } .chp-prod__toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 30px; height: 30px; margin-left: 6px; border-radius: 999px; cursor: pointer; background: #EAF6EA; color: var(--chp-accent, #45993D); border: 1px solid rgba(69,153,61,.28); -webkit-tap-highlight-color: transparent; } .chp-prod__toggle svg { width: 16px; height: 16px; transition: transform .2s ease; } .chp-prod.is-open .chp-prod__toggle { background: var(--chp-accent, #45993D); color: #fff; border-color: var(--chp-accent, #45993D); } .chp-prod.is-open .chp-prod__toggle svg { transform: rotate(180deg); } /* Replié par défaut : on masque description + specs + bouton. */ .chp-prod__accroche, .chp-prod__specs, .chp-prod__btn { display: none; } .chp-prod.is-open .chp-prod__accroche { display: -webkit-box; margin-top: 4px; } .chp-prod.is-open .chp-prod__specs { display: grid; } .chp-prod.is-open .chp-prod__btn { display: inline-block; } .chp-prod__body { gap: 6px; } /* Feu design : carte repliee identique au Catalogue -> tete = titre pleine largeur + chevron (le prix cramponne retrecissait le titre sur 5-6 lignes). Le prix reapparait a l'ouverture, avec l'accroche / les specs / le bouton. */ .chp-prods--feudesign .chp-prod__price { display: none; } .chp-prods--feudesign .chp-prod.is-open .chp-prod__price { display: inline; } /* Produits similaires (carrousel) : nom sur 2 lignes réservées → toutes les cartes ont exactement la même hauteur, quel que soit la longueur du nom. */ .chp-similar .chp-prod__title { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; } .chp-similar--carousel .chp-prods__track { align-items: stretch; } } /* Carrousel */ .chp-prods--carousel .chp-prods__track { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding-bottom: 8px; } .chp-prods--carousel .chp-prods__track::-webkit-scrollbar { height: 6px; } .chp-prods--carousel .chp-prod { scroll-snap-align: start; flex: 0 0 calc((100% - 40px) / 3); } .chp-prods__nav { position: absolute; top: 38%; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--chp-line, #E2E5E8); background: #fff; cursor: pointer; font-size: 22px; line-height: 1; box-shadow: 0 4px 12px rgba(0,0,0,.12); } .chp-prods__nav--prev { left: -8px; } .chp-prods__nav--next { right: -8px; } @media (max-width: 1024px) { .chp-prods__track { grid-template-columns: repeat(2, 1fr); } .chp-prods--carousel .chp-prod { flex-basis: calc((100% - 20px) / 2); } } @media (max-width: 680px) { .chp-prods__track { grid-template-columns: 1fr; } .chp-prods--carousel .chp-prod { flex-basis: 85%; } } /* Barre de filtres du catalogue */ .chp-filter { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; } .chp-filter__btn { border: 1px solid var(--chp-line, #E2E5E8); background: #fff; color: #2B3033; padding: 8px 18px; border-radius: 999px; cursor: pointer; font-weight: 600; font-family: Poppins, sans-serif; transition: all .15s ease; text-transform: none; } /* Casse normale garantie sur les puces de filtre catégorie (bat un éventuel text-transform: uppercase hérité de la typo Elementor ou du thème). */ .chp-filter .chp-filter__btn, .chp-prods--catalog [data-facet="cat"] .chp-filter__btn { text-transform: none !important; } .chp-filter__btn:hover { background: #fff !important; border-color: #45993D; color: #45993D; } .chp-filter__btn.is-active, .chp-filter__btn.is-active:hover { background: #45993D !important; border-color: #45993D; color: #fff; } /* Sous-titre de hero + compteur de résultats (gabarit catalogue) */ .chp-prods__desc { margin: 10px 0 0; color: var(--chp-muted, #5E6468); font-size: 16px; line-height: 1.6; max-width: 640px; } .chp-prods__count { font-size: 14px; font-weight: 700; color: var(--chp-muted, #5E6468); white-space: nowrap; } /* Bandeau de contexte « catalogue filtré par agence » (?marques=) — discret */ .chp-prods__scope { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 10px 14px; border-radius: 10px; background: rgba(81,177,72,.10); border: 1px solid rgba(81,177,72,.28); color: #2e6b28; font-size: 14px; line-height: 1.4; } .chp-prods__scope svg { flex: 0 0 auto; color: #45993D; } .chp-prods__scope strong { color: #1f4d1c; font-weight: 700; } .chp-prods--fdark .chp-prods__scope, .chp-prods--fnight .chp-prods__scope { background: rgba(81,177,72,.16); border-color: rgba(81,177,72,.4); color: #d8f5d3; } .chp-prods--fdark .chp-prods__scope strong, .chp-prods--fnight .chp-prods__scope strong { color: #fff; } /* Barre d'outils (filtre + tri) + tri + « charger plus » (audit F3/F12) */ .chp-prods__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } /* Mode « barre » (page catalogue : hero séparé) — outils sur toute la largeur */ .chp-prods__head--bar { display: block; } .chp-prods__head--bar .chp-prods__tools { flex: 1 1 auto; } .chp-prods__head--bar .chp-filter { margin-right: auto; } .chp-sort { display: inline-flex; align-items: center; gap: 8px; } .chp-sort__label { font-size: 14px; color: var(--chp-muted, #5E6468); font-weight: 600; } .chp-sort__select { border: 1px solid var(--chp-line, #E2E5E8); background: #fff; color: #2B3033; padding: 8px 14px; border-radius: 999px; cursor: pointer; font-weight: 600; font-family: Poppins, sans-serif; } /* Anti-thème : fond/couleur verrouillés au survol/focus (sinon select:hover rouge du thème). */ .chp-sort__select:hover, .chp-sort__select:focus { background: #fff; color: #2B3033; border-color: var(--chp-accent); } /* Filtres avancés (recherche / marque / caractéristiques) */ .chp-refine { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 28px; } .chp-refine__search { flex: 1 1 240px; min-width: 200px; max-width: 360px; border: 1px solid var(--chp-line, #E2E5E8); border-radius: 999px; background: #fff; padding: 10px 18px; font-family: Poppins, sans-serif; font-size: 15px; color: #2B3033; } .chp-refine__search:hover, .chp-refine__search:focus { background: #fff; color: #2B3033; border-color: var(--chp-accent); outline: none; } .chp-refine__group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .chp-refine__label { font-size: 13px; font-weight: 700; color: var(--chp-muted, #5E6468); text-transform: uppercase; letter-spacing: .04em; } .chp-chip { border: 1px solid var(--chp-line, #E2E5E8); background: #fff; color: #2B3033; padding: 6px 14px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 14px; font-family: Poppins, sans-serif; transition: all .15s ease; } .chp-chip:hover { background: #fff !important; border-color: #45993D; color: #45993D; } .chp-chip.is-active:hover { background: #45993D !important; color: #fff; } .chp-chip.is-active { background: #45993D !important; border-color: #45993D; color: #fff; } .chp-chip:focus-visible { outline: 3px solid var(--chp-accent); outline-offset: 2px; } .chp-refine__empty { flex: 1 1 100%; margin: 8px 0 0; color: var(--chp-muted, #5E6468); font-style: italic; } /* Hero d'archive catégorie (façon maquette /poeles) rendu par le template modèle. */ .chp-archive-head { max-width: 1180px; margin: 0 auto; padding: 40px 20px 8px; } .chp-archive-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 13px; font-weight: 800; color: var(--chp-accent, #51B148); margin: 0 0 10px; } .chp-archive-title { font-family: Poppins, sans-serif; font-weight: 800; font-size: clamp(2rem, 4vw, 3rem); color: var(--chp-ink); margin: 0 0 12px; line-height: 1.05; letter-spacing: -.02em; } .chp-archive-desc { color: var(--chp-muted, #5E6468); max-width: 660px; font-size: 1.05rem; line-height: 1.6; } /* Gabarit catalogue (filtres latéraux) — façon page /poeles */ .chp-prods--catalog { display: grid; grid-template-columns: 264px 1fr; grid-template-areas: "hero hero" "head head" "refine track" "more more" "cta cta"; column-gap: 36px; } .chp-prods--catalog .chp-prods__head { grid-area: head; } .chp-prods--catalog .chp-prods__track { grid-area: track; } .chp-prods--catalog .chp-prods__more { grid-area: more; } .chp-prods--catalog .chp-pager { grid-area: more; } /* pager pleine largeur, sous les articles */ .chp-prods--catalog .chp-prods__cta { grid-area: cta; } .chp-prods--catalog .chp-refine { grid-area: refine; display: block; margin: 0; align-self: start; position: sticky; top: 24px; background: #fff; border: 1px solid var(--chp-line, #E2E5E8); border-radius: 16px; padding: 22px; } .chp-prods--catalog .chp-refine__group { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin: 0 0 20px; padding: 0 0 20px; border-bottom: 1px solid var(--chp-line, #EFF1F4); } .chp-prods--catalog .chp-refine__group:last-of-type { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .chp-prods--catalog .chp-refine__label { margin: 0 0 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--chp-muted, #5E6468); } /* Barre de recherche avec loupe */ .chp-prods--catalog .chp-refine__search { flex: none; width: 100%; max-width: none; box-sizing: border-box; height: auto; padding: 12px 14px 12px 42px; border: 1px solid var(--chp-line, #E2E5E8); border-radius: 999px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat left 15px center / 17px 17px; color: #171B1F; font-size: 15px; } .chp-prods--catalog .chp-refine__search:focus { border-color: var(--chp-accent, #51B148); outline: none; } /* Catégories : liste verticale avec compteur, élément actif sur fond vert */ .chp-prods--catalog [data-facet="cat"] .chp-filter__btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; margin: 0; border: 0; border-radius: 10px; background: none; color: var(--chp-ink, #171B1F); font-family: inherit; font-weight: 600; font-size: 15px; cursor: pointer; } .chp-prods--catalog [data-facet="cat"] .chp-filter__btn:hover { background: #f4f6f8; color: var(--chp-ink, #171B1F); border: 0; } .chp-prods--catalog [data-facet="cat"] .chp-filter__btn.is-active, .chp-prods--catalog [data-facet="cat"] .chp-filter__btn.is-active:hover { background: #EAF6EA; color: #2e7d32; border: 0; } .chp-filter__count { font-size: 13px; font-weight: 600; color: #9ca3af; } .chp-prods--catalog [data-facet="cat"] .chp-filter__btn.is-active .chp-filter__count { color: #2e7d32; } /* Facettes (marque / puissance / budget / caractéristiques) en CASES À COCHER verticales */ .chp-prods--catalog .chp-chip { display: flex; align-items: center; gap: 11px; width: 100%; justify-content: flex-start; padding: 7px 6px; margin: 0; border: 0; background: none; border-radius: 8px; color: var(--chp-ink, #171B1F); font-family: inherit; font-weight: 500; font-size: 15px; cursor: pointer; } .chp-prods--catalog .chp-chip::before { content: ''; flex: 0 0 auto; width: 19px; height: 19px; border: 2px solid #cbd5e1; border-radius: 5px; background: #fff no-repeat center / 12px 10px; transition: background-color .12s ease, border-color .12s ease; } .chp-prods--catalog .chp-chip:hover { background: #f6f8fa; color: var(--chp-ink, #171B1F); border: 0; } .chp-prods--catalog .chp-chip.is-active { background: none; color: var(--chp-ink, #171B1F); border: 0; font-weight: 600; } .chp-prods--catalog .chp-chip.is-active:hover { background: #f6f8fa; color: var(--chp-ink, #171B1F); } .chp-prods--catalog .chp-chip.is-active::before { background-color: var(--chp-accent, #51B148); border-color: var(--chp-accent, #51B148); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4 4 10-10'/%3E%3C/svg%3E"); } .chp-prods--catalog .chp-refine__empty { margin-top: 12px; } /* Chrome du tiroir mobile (bouton « Filtres », en-tête, pied) — masqué sur desktop */ .chp-refine-toggle, .chp-refine__bar, .chp-refine__apply { display: none; } /* --- Mobile : barre + tiroir de filtres (façon appli e-commerce) --- */ @media (max-width: 860px) { .chp-prods--catalog { grid-template-columns: 1fr; grid-template-areas: "hero" "head" "bar" "track" "more" "cta"; } /* Bouton « Filtres » sticky en haut de la grille */ .chp-prods--catalog .chp-refine-toggle { grid-area: bar; display: inline-flex; align-items: center; gap: 8px; justify-self: start; position: sticky; top: 8px; z-index: 6; margin-bottom: 18px; background: #fff; color: var(--chp-ink); border: 1.5px solid var(--chp-ink); border-radius: 999px; padding: 9px 16px; font-weight: 700; font-family: Poppins, sans-serif; cursor: pointer; box-shadow: 0 4px 14px rgba(15,23,42,.10); } .chp-refine-toggle__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #E5006D; color: #fff; font-size: 12px; font-weight: 800; } /* Le panneau devient un tiroir plein écran */ .chp-prods--catalog .chp-refine { position: fixed; inset: 0; z-index: 99999; margin: 0; border: 0; border-radius: 0; padding: 18px 18px 90px; overflow-y: auto; display: none; box-shadow: none; } .chp-prods--catalog .chp-refine.is-open { display: block; } .chp-refine__bar { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: #fff; padding: 4px 0 14px; margin-bottom: 16px; border-bottom: 1px solid var(--chp-line); } .chp-refine__heading { font-family: Poppins, sans-serif; font-weight: 800; font-size: 20px; color: var(--chp-ink); } .chp-refine__close { background: none; border: 0; font-size: 30px; line-height: 1; color: var(--chp-ink); cursor: pointer; padding: 0 4px; } .chp-refine__apply { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1; background: #fff; padding: 12px 16px; border-top: 1px solid var(--chp-line); } .chp-refine__see { width: 100%; justify-content: center; } } /* Bloc CTA bas de catalogue (« Besoin d'un conseil ? ») */ /* Encart « Besoin d'un conseil ? » : fond dégradé façon hero d'accueil (vert clair diagonal → blanc) au lieu du gris. */ .chp-prods__cta { margin-top: 48px; padding: 40px 24px; text-align: center; background: linear-gradient(135deg, rgba(22, 163, 74, .10) 0%, #ffffff 55%, #ffffff 100%); border: 1px solid rgba(22, 163, 74, .14); border-radius: 18px; } .chp-prods__cta-title { margin: 0 0 8px; font-size: 26px; font-family: Poppins, sans-serif; color: #1F2A37; } .chp-prods__cta-text { margin: 0 auto 22px; max-width: 560px; color: var(--chp-muted, #5E6468); font-size: 16px; } .chp-prods__cta-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } .chp-prods__cta .chp-btn { display: inline-flex; align-items: center; padding: 12px 28px; border-radius: 999px; font-weight: 700; text-decoration: none; transition: all .15s ease; } .chp-prods__cta .chp-btn--primary { background: var(--chp-accent); color: #fff; } .chp-prods__cta .chp-btn--ghost { background: #fff; color: #2B3033; border: 1px solid var(--chp-line, #E2E5E8); } .chp-prods__cta .chp-btn--ghost:hover { background: #fff; border-color: #45993D; color: #45993D; } .chp-prods__more { display: flex; justify-content: center; margin-top: 32px; } .chp-loadmore { border: 1px solid #45993D; background: #fff; color: #45993D; padding: 12px 30px; border-radius: 999px; cursor: pointer; font-weight: 700; font-family: Poppins, sans-serif; transition: all .15s ease; } .chp-loadmore:hover { background: #45993D; color: #fff; } /* =================================================================== Widget « CH Catégories » — cartes riches (gabarit Cormontreuil) =================================================================== */ .chp-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .chp-cat { display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(15,23,42,.08); transition: transform .25s ease, box-shadow .25s ease; } /* --- Effets de survol (selon la classe du conteneur) --- */ .chp-hover-lift .chp-cat:hover, .chp-hover-lift-zoom .chp-cat:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(15,23,42,.14); } .chp-hover-zoom .chp-cat:hover .chp-cat__img, .chp-hover-lift-zoom .chp-cat:hover .chp-cat__img { transform: scale(calc(var(--chp-cat-zoom, 1) * 1.07)); } .chp-hover-glow .chp-cat:hover { box-shadow: 0 0 0 3px rgba(78,125,42,.45), 0 16px 38px rgba(15,23,42,.14); } .chp-hover-reveal .chp-cat:hover .chp-cat__head { transform: translateY(-8px); } .chp-hover-reveal .chp-cat:hover .chp-cat__overlay { opacity: 1; } .chp-hover-reveal .chp-cat__overlay { opacity: .85; } /* Média + overlay */ .chp-cat__media { position: relative; height: 330px; overflow: hidden; border-radius: 18px 18px 0 0; } .chp-cat__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; z-index: 0; transform: scale(var(--chp-cat-zoom, 1)); transform-origin: var(--chp-cat-orig, center center); } .chp-cats--rich .chp-cat__overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(8,10,14,.9) 0%, rgba(8,10,14,.55) 30%, rgba(8,10,14,.12) 62%, rgba(8,10,14,0) 100%); transition: opacity .25s ease; } .chp-cat__badge { position: absolute; top: 16px; left: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; background: #fff; color: #171B1F; font-family: Poppins, sans-serif; font-weight: 800; font-size: 12px; letter-spacing: .04em; padding: 7px 14px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.15); } .chp-cat__badge-ic { color: #45993D; font-size: 14px; line-height: 1; } .chp-cat__counter { position: absolute; top: 16px; right: 16px; z-index: 2; background: rgba(20,24,28,.7); color: #fff; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; } .chp-cats--rich .chp-cat__head { position: absolute; left: 22px; right: 22px; bottom: 20px; top: auto; z-index: 3; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; transition: transform .25s ease; } .chp-cats--rich .chp-cat__head .chp-cat__headline { margin: 0; color: #fff; font-family: Poppins, sans-serif; font-weight: 800; font-size: 26px; line-height: 1.12; min-width: 0; overflow-wrap: anywhere; text-shadow: 0 2px 10px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.6); } .chp-cats--rich .chp-cat__head .chp-cat__num { color: #fff; text-align: right; line-height: 1; flex: 0 0 auto; text-shadow: 0 2px 10px rgba(0,0,0,.6); } .chp-cats--rich .chp-cat__head .chp-cat__num b { display: block; font-family: Poppins, sans-serif; font-weight: 800; font-size: 38px; } .chp-cats--rich .chp-cat__head .chp-cat__num span { font-size: 11px; letter-spacing: .08em; font-weight: 700; opacity: .95; } /* Badge / compteur : au-dessus du dégradé */ .chp-cats--rich .chp-cat__badge, .chp-cats--rich .chp-cat__counter { z-index: 3; } /* Corps */ .chp-cat__body { padding: 22px; display: flex; flex-direction: column; gap: 14px; } .chp-cat__text { margin: 0; font-size: 15px; color: #2B3033; line-height: 1.55; } .chp-cat__tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; } .chp-cat__tags li { background: #f1f3f5; color: #2B3033; font-size: 13px; padding: 6px 12px; border-radius: 999px; } .chp-cat__thumbs { display: flex; align-items: center; gap: 8px; } .chp-cat__thumb { width: 54px; height: 54px; border-radius: 10px; overflow: hidden; border: 1px solid #E2E5E8; flex: none; } .chp-cat__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .chp-cat__more { flex: 1; text-align: center; background: #f1f3f5; color: #5E6468; font-size: 14px; font-weight: 600; padding: 16px 10px; border-radius: 10px; } .chp-cat__cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid #E2E5E8; padding-top: 16px; margin-top: 4px; text-decoration: none; } .chp-cat__cta > span:first-child { color: #171B1F; font-family: Poppins, sans-serif; font-weight: 700; font-size: 16px; } .chp-cat__arrow { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #45993D; color: #fff; font-size: 20px; flex: none; transition: transform .15s ease; } .chp-cat__cta:hover .chp-cat__arrow { transform: translateX(3px); } @media (max-width: 1024px) { .chp-cats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 680px) { .chp-cats { grid-template-columns: 1fr; } .chp-cat__headline { font-size: 24px; } } /* =================================================================== Widget « CH Produit Vedette » (coup de cœur, fond sombre) =================================================================== */ .chp-vd { --chp-vd-cols: 1fr 1fr; display: grid; grid-template-columns: var(--chp-vd-cols); gap: 48px; align-items: center; background: transparent; border-radius: 20px; } /* Côté de l'image via l'ordre (remplace l'ancien hack direction:rtl). */ .chp-vd--right .chp-vd__media { order: 2; } .chp-vd__media { background: #fff; border-radius: 14px; overflow: hidden; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; } .chp-vd__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Vedette : l'image REMPLIT le cadre (étirée/zoom centré) sur tous les écrans. height/width 100% !important : un contrôle Elementor laissait l'image à sa hauteur naturelle (petite) → cover n'avait rien à remplir. */ .chp-vd .chp-vd__media img, .chp-vd__medialink .chp-vd__media img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; } /* Le lien wrapper doit remplir le média, sinon l'image (100% du lien) reste à sa taille naturelle. */ .chp-vd__media > .chp-vd__medialink { display: block !important; width: 100% !important; height: 100% !important; } .chp-vd__content { color: #fff; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } .chp-vd__eyebrow { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid #6BBF3C; color: #6BBF3C; font-family: Poppins, sans-serif; font-weight: 800; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; padding: 8px 18px; border-radius: 999px; margin: 0; } .chp-vd__title { margin: 0; color: #fff; font-family: Poppins, sans-serif; font-weight: 800; font-size: 48px; line-height: 1.05; } .chp-vd__subtitle { margin: 0; color: #AEB4BD; font-family: Poppins, sans-serif; font-weight: 700; font-size: 22px; } .chp-vd__desc { margin: 0; color: #AEB4BD; font-size: 17px; line-height: 1.6; max-width: 560px; } .chp-vd__specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; width: 100%; max-width: 28rem; } .chp-vd__spec { background: #1E242B; border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 8px; } .chp-vd__spec-ic { width: 24px; height: 24px; color: #6BBF3C; } .chp-vd__spec-ic svg { width: 24px; height: 24px; } .chp-vd__spec-l { font-size: 12px; letter-spacing: .06em; color: #8B929B; font-weight: 700; } .chp-vd__spec-v { font-size: 22px; font-weight: 800; color: #fff; font-family: Poppins, sans-serif; } .chp-vd__actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } /* Bouton « Découvrir le modèle » = bouton vert du hero de la maquette accueil3 : pilule vert marque #51B148, texte blanc, ombre douce colorée, hover opacité. */ .chp-vd__cta { display: inline-flex; align-items: center; gap: 9px; background: #51B148; color: #fff; text-decoration: none; font-family: Poppins, sans-serif; font-weight: 700; font-size: 15px; padding: 14px 28px; border-radius: 999px; box-shadow: 0 6px 16px -6px rgba(81,177,72,.6); transition: opacity .15s ease, transform .15s ease, box-shadow .15s ease; } .chp-vd__cta:hover { opacity: .95; transform: translateY(-1px); box-shadow: 0 10px 22px -6px rgba(81,177,72,.7); } .chp-vd__cta span[aria-hidden] { font-size: 1.05em; line-height: 0; } /* Coup de cœur (accueil) : bouton CTA centré horizontalement dans son bloc. Ciblé sur .featured-inner (classe wrapper par défaut du widget Vedette) pour ne toucher que ce widget ; align-self:stretch étire la rangée d'actions sur toute la largeur de la colonne texte (align-items:flex-start du parent), puis on centre. */ .featured-inner .chp-vd__actions { align-self: stretch; justify-content: center; } /* Carte vedette entièrement cliquable vers la fiche produit (lien étiré) : un ::after invisible sur le lien du titre couvre toute la carte ; les boutons et le prix restent au-dessus pour garder leurs propres actions. */ .chp-vd { position: relative; } .chp-vd__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .chp-vd__cta, .chp-vd__cta--ghost, .chp-vd__price, .chp-vd__medialink { position: relative; z-index: 2; } .chp-vd__price { color: #fff; font-size: 17px; } .chp-vd__price strong { font-weight: 800; } @media (max-width: 860px) { .chp-vd { grid-template-columns: 1fr; gap: 28px; } .chp-vd--right { direction: ltr; } .chp-vd__title { font-size: 34px; } .chp-vd__specs { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 520px) { .chp-vd__specs { grid-template-columns: repeat(2, 1fr); } } /* =================================================================== Hover harmonisé (générique) — s'applique à toute carte .chp-card-fx =================================================================== */ .chp-card-fx { transition: transform .25s ease, box-shadow .25s ease; } .chp-img-fx { transition: transform .35s ease; } .chp-hover-lift .chp-card-fx:hover, .chp-hover-lift-zoom .chp-card-fx:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(15,23,42,.14); } .chp-hover-zoom .chp-card-fx:hover .chp-img-fx, .chp-hover-lift-zoom .chp-card-fx:hover .chp-img-fx { transform: scale(calc(var(--chp-cat-zoom, 1) * 1.07)); } .chp-hover-glow .chp-card-fx:hover { box-shadow: 0 0 0 3px rgba(78,125,42,.45), 0 16px 38px rgba(15,23,42,.14); } /* =================================================================== « Style minimal » (.chp-bare) — neutralise la décoration de base du plugin pour laisser les classes de thème décider (mise en page gardée) =================================================================== */ .chp-bare .chp-prod, .chp-bare .chp-cat, .chp-bare .chp-card, .chp-bare .chp-vd, .chp-bare .chp-prod__btn, .chp-bare .chp-cat__btn { border: 0; background: transparent; box-shadow: none; border-radius: 0; } .chp-bare .chp-prod:hover, .chp-bare .chp-cat:hover, .chp-bare .chp-card:hover { box-shadow: none; } /* Vedette — lien image/titre + bouton showroom (ghost) */ .chp-vd__medialink { display: block; } .chp-vd__title a { color: inherit; text-decoration: none; } .chp-vd__cta--ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.4); box-shadow: none; } .chp-vd__cta--ghost:hover { background: rgba(255,255,255,.08); transform: translateY(-2px); } /* Tags produit (fiche) */ .chp-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 18px; } .chp-tag { font-size: 13px; background: #f1f3f5; color: #2B3033; padding: 6px 12px; border-radius: 999px; } /* =================================================================== Filtre MOBILE (drawer) — widget « Notre sélection » (CH Produits) Bouton « Filtres » masqué sur desktop (filtres en ligne) ; sur mobile, le panneau .chp-refine devient un tiroir latéral plein écran. =================================================================== */ .chp-refine-toggle { display: none; align-items: center; gap: 8px; padding: 11px 18px; margin: 0 0 20px; border: 1px solid var(--chp-line, #E2E5E8); background: #fff; border-radius: 999px; font-family: Poppins, sans-serif; font-weight: 700; font-size: 15px; color: var(--chp-ink, #171B1F); cursor: pointer; } .chp-refine-toggle.has-active { border-color: var(--chp-accent, #51B148); color: var(--chp-accent, #51B148); } .chp-refine-toggle__badge { background: var(--chp-accent, #51B148); color: #fff; font-size: 12px; font-weight: 700; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; } /* Chrome du tiroir (barre + bouton « Voir ») masqué sur desktop. */ .chp-refine__bar, .chp-refine__apply { display: none; } @media ( max-width: 768px ) { .chp-refine-toggle { display: inline-flex; } .chp-refine { position: fixed; top: 0; right: 0; bottom: 0; left: auto; z-index: 100000; width: min( 90vw, 360px ); flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; margin: 0; padding: 0; background: #fff; box-shadow: -10px 0 44px rgba( 8, 12, 16, .28 ); overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateX( 100% ); transition: transform .28s ease; visibility: hidden; } .chp-refine.is-open { transform: translateX( 0 ); visibility: visible; } /* Fond sombre derrière le tiroir. */ .chp-refine.is-open::before { content: ''; position: fixed; inset: 0; z-index: -1; width: 100vw; height: 100vh; background: rgba( 8, 12, 16, .5 ); } .chp-refine__bar { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 2; background: #fff; padding: 16px 20px; border-bottom: 1px solid var(--chp-line, #E2E5E8); } .chp-refine__heading { font-family: Poppins, sans-serif; font-weight: 800; font-size: 18px; color: var(--chp-ink, #171B1F); } .chp-refine__close { border: 0; background: none; font-size: 30px; line-height: 1; color: var(--chp-muted, #5E6468); cursor: pointer; padding: 0 6px; } .chp-refine__group { flex-direction: column; align-items: flex-start; gap: 10px; margin: 0; padding: 18px 20px; border-bottom: 1px solid var(--chp-line, #EFF1F4); } .chp-refine__search { width: 100%; } .chp-refine__apply { display: block; position: sticky; bottom: 0; z-index: 2; margin-top: auto; background: #fff; padding: 14px 20px; border-top: 1px solid var(--chp-line, #E2E5E8); } .chp-refine__apply .chp-btn { width: 100%; justify-content: center; } body.chp-refine-lock { overflow: hidden; } } /* =================================================================== Filtre MOBILE — barre de pastilles horizontales défilantes Sous 860px : remplace le bouton « Filtres » + tiroir par une rangée scrollable de pastilles (une par facette). Chaque pastille ouvre les options de SA facette dans une feuille (bottom-sheet réutilisant .chp-refine). Ce bloc est placé APRÈS les règles mobiles existantes : il les surcharge par ordre de source. Desktop (> 860px) : intact. =================================================================== */ .chp-pillbar { display: none; } @media (max-width: 860px) { /* Masque l'ancienne UX de filtre (bouton + tiroir) sur mobile. */ .chp-refine-toggle, .chp-prods--catalog .chp-refine-toggle { display: none !important; } /* Panneau .chp-refine caché tant qu'aucune pastille n'ouvre sa feuille. */ .chp-prods .chp-refine:not(.chp-refine--sheet) { display: none; } /* Barre de pastilles : rangée horizontale scrollable. */ .chp-pillbar { display: flex; gap: 8px; align-items: center; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 18px; padding: 2px 2px 6px; scrollbar-width: none; /* Glissé horizontal SANS décaler la page : pan-x réserve le geste au défilement du bandeau (plus de pan vertical/diagonal de la page qui « saute » quand le doigt dévie), et overscroll contain empêche le défilement d'être relayé à la page en bout de course. */ touch-action: pan-x; overscroll-behavior-x: contain; } .chp-pillbar::-webkit-scrollbar { display: none; } .chp-prods--catalog .chp-pillbar { grid-area: bar; position: sticky; top: 8px; z-index: 6; background: transparent; /* épouse le fond dégradé vert de la page (fini la bande blanche) */ -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); /* léger dépoli quand la barre reste collée au défilement */ } /* Indication de défilement : les pastilles se fondent au bord tant qu'il en reste d'autres à découvrir en glissant (classes posées par front.js selon le scroll). */ .chp-pillbar.has-more-right { -webkit-mask-image: linear-gradient(to right, #000 78%, transparent 99%); mask-image: linear-gradient(to right, #000 78%, transparent 99%); } .chp-pillbar.has-more-left.has-more-right { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 78%, transparent 99%); mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 78%, transparent 99%); } .chp-pillbar.has-more-left:not(.has-more-right) { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%); mask-image: linear-gradient(to right, transparent 0, #000 6%); } .chp-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--chp-line, #E2E5E8); background: #fff; color: var(--chp-ink, #171B1F); border-radius: 999px; padding: 9px 16px; cursor: pointer; white-space: nowrap; font-family: Poppins, sans-serif; font-weight: 600; font-size: 14px; } /* Interactions aux couleurs du site : survol / appui / facette active en vert. Fond forcé (!important) pour neutraliser le button:hover rouge hérité du thème. */ .chp-pill:hover, .chp-pill:focus-visible { background: #fff !important; border-color: var(--chp-accent, #51B148); color: var(--chp-accent, #51B148); outline: none; } .chp-pill:active { background: var(--chp-accent, #51B148) !important; border-color: var(--chp-accent, #51B148); color: #fff; } .chp-pill.is-active { border-color: var(--chp-accent, #51B148); color: var(--chp-accent, #51B148); border-width: 2px; padding: 8px 15px; font-weight: 700; background: rgba(81,177,72,.07) !important; } .chp-pill.is-active:active { color: #fff; } .chp-pill__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--chp-accent, #51B148); color: #fff; font-size: 11px; font-weight: 800; line-height: 1; } .chp-pill__badge[hidden] { display: none; } .chp-pill__clear { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-right: -3px; border-radius: 999px; font-size: 12px; line-height: 1; color: var(--chp-muted, #5E6468); } .chp-pill__clear[hidden] { display: none; } .chp-pill__clear:hover { color: var(--chp-ink, #171B1F); } /* Feuille (bottom-sheet) : réutilise .chp-refine, ancrée en bas de l'écran. */ .chp-refine.chp-refine--sheet, .chp-prods--catalog .chp-refine.chp-refine--sheet { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 82vh; margin: 0; z-index: 100000; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; padding: 0; border: 0; border-radius: 18px 18px 0 0; background: #fff; box-shadow: 0 -12px 44px rgba(8,12,16,.28); overflow: hidden; transform: none; visibility: visible; } .chp-refine--sheet::before { content: ''; position: fixed; inset: 0; z-index: -1; background: rgba(8,12,16,.5); } .chp-refine--sheet .chp-refine__bar { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 2; background: #fff; padding: 16px 20px; border-bottom: 1px solid var(--chp-line, #E2E5E8); margin: 0; } /* Seul le groupe de la facette ouverte est visible dans la feuille. */ .chp-refine--sheet .chp-refine__group { display: none; } .chp-refine--sheet .chp-refine__group.is-current { display: flex; flex-direction: column; align-items: stretch; gap: 10px; flex: 1 1 auto; /* remplit toute la hauteur entre en-tête et pied */ background: #fff; /* panneau plein : l'overlay sombre ne transparaît plus (fini la bande grise) */ margin: 0; padding: 18px 20px; border: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Libellé de facette aux couleurs de la marque (comme les sur-titres du site). */ .chp-refine--sheet .chp-refine__label { color: var(--chp-accent, #45993D); font-weight: 800; font-size: 12px; letter-spacing: .08em; margin: 0 0 4px; } .chp-refine--sheet .chp-refine__search { width: 100%; box-sizing: border-box; } .chp-refine--sheet .chp-refine__apply { display: block; position: sticky; bottom: 0; z-index: 2; margin-top: auto; background: #fff; padding: 14px 20px; border-top: 1px solid var(--chp-line, #E2E5E8); } .chp-refine--sheet .chp-refine__apply .chp-btn { width: 100%; justify-content: center; } body.chp-refine-lock { overflow: hidden; } } /* ===== Pagination par pages (Précédent / 1 2 3 / Suivant) ===== */ .chp-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 34px 0 0; } /* !important : le kit Elementor du thème peint tous les