/* ============================================================ PLP HOME DESIGN SYSTEM — tokens + composants homogènes Chargé uniquement sur la home. Prefixe .plp- (pas de collision). Ancré sur la marque : police thème (Helvetica), accent #2279be, boutons pill radius 40 (comme le thème), or réservé au VIP. ============================================================ */ :root{ --plp-accent:#2279be; --plp-accent-strong:#0e2a44; --plp-accent-deep:#002b31; --plp-ink:#121212; --plp-ink-soft:rgba(18,18,18,.6); --plp-bg-soft:#f6f8fa; --plp-line:#e6e9ec; --plp-gold:#d4af37; /* réservé section VIP */ --plp-radius-btn:9999px; /* = radius réel du bouton add-to-cart (pill plein) */ --plp-cta-grad:linear-gradient(90deg,#2279be,#002b31); /* = fond bouton add-to-cart (canonique) */ --plp-cta-grad-hover:linear-gradient(90deg,#002b31,#2279be); /* = hover add-to-cart (gradient inversé) */ --plp-radius-card:14px; --plp-shadow:0 4px 22px rgba(3,24,37,.08); /* échelle typographique unique */ --plp-h1:clamp(2rem,5vw,3rem); /* 32 → 48 */ --plp-h2:clamp(23px,2.8vw,32px);/* 26 → 34 */ --plp-h3:1.375rem; /* 22 */ --plp-body:1rem; /* 16 */ --plp-small:.875rem; /* 14 */ --plp-eyebrow:.8125rem; /* 13 */ --plp-section-y:clamp(2.5rem,6vw,4.5rem); --plp-maxw:1200px; } /* ---- Layout ---- */ .plp-section{ padding-block:var(--plp-section-y); } .plp-container{ max-width:var(--plp-maxw); margin-inline:auto; padding-inline:clamp(1rem,4vw,2.5rem); } /* ---- Typographie homogène (police du thème partout) ---- */ .plp-eyebrow{ font-family:var(--font-body-family); font-size:var(--plp-eyebrow); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--plp-accent); margin:0 0 .6rem; } .plp-title{ font-family:var(--font-heading-family); font-size:var(--plp-h2); line-height:1.15; font-weight:600; /* aligné sur les titres du thème (400-600), pas plus lourd */ letter-spacing:-.01em; color:var(--plp-ink); margin:0 0 .75rem; text-wrap:balance; } .plp-title--xl{ font-size:var(--plp-h1); } .plp-subtitle{ font-family:var(--font-heading-family); font-size:var(--plp-h3); font-weight:600; color:var(--plp-ink); margin:0 0 .5rem; } .plp-lead{ font-family:var(--font-body-family); font-size:var(--plp-body); line-height:1.6; color:var(--plp-ink-soft); margin:0 auto; max-width:60ch; } /* ---- Boutons : UN seul style + hover unifié ---- */ .plp-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--font-body-family); font-size:var(--plp-body); font-weight:600; line-height:1; text-decoration:none; cursor:pointer; padding:.95rem 1.9rem; border-radius:var(--plp-radius-btn); border:1px solid transparent; transition:transform .15s ease, background-color .2s ease, box-shadow .2s ease, color .2s ease; } .plp-btn--primary{ background:var(--plp-cta-grad); color:#fff; } .plp-btn--primary:hover{ background:var(--plp-cta-grad-hover); } /* = hover add-to-cart : juste le gradient qui s'inverse */ .plp-btn--outline{ background:transparent; color:var(--plp-ink); border-color:var(--plp-line); } .plp-btn--outline:hover{ border-color:var(--plp-accent); color:var(--plp-accent); transform:translateY(-2px); } .plp-btn--gold{ background:var(--plp-gold); color:#1a1a1a; } .plp-btn--gold:hover{ background:#c39d29; transform:translateY(-2px); box-shadow:0 8px 20px rgba(212,175,55,.30); } /* ---- Carte générique ---- */ .plp-card{ background:#fff; border:1px solid var(--plp-line); border-radius:var(--plp-radius-card); box-shadow:var(--plp-shadow); } /* ---- Chips / eyebrows homogènes = style « Our Key Benefits » (.styled-header) ---- Réf : pastille bord 1px #e5e7eb, radius 20, pad 5px 20px, texte dégradé 14px poids 400. Certains chips (Featured Products, Bulk Offers) héritent d'un poids 700 via les classes Dawn .title/.h1/.h2 → on force 400 pour matcher la référence. */ .styled-header span, .styled-header .title, .styled-header .inline-richtext{ font-weight:400 !important; } /* ---- Police homogène : les contrôles de formulaire (button/input/select) n'héritent PAS la police par défaut (défaut UA = Arial) → forcer la police du thème (Helvetica) ---- */ #MainContent button, #MainContent input, #MainContent select, #MainContent textarea{ font-family:var(--font-body-family); } /* ---- Marquee (bandeau défilant) ---- */ .plp-marquee{ overflow:hidden; white-space:nowrap; width:100%; } .plp-marquee__track{ display:flex; width:max-content; margin:0; font-family:var(--font-heading-family); font-weight:400; line-height:1; /* = poids des titres du thème (helvetica_n4 = 400), comme l'original */ animation:plp-marquee-scroll linear infinite; will-change:transform; } .plp-marquee__track span{ display:inline-block; padding-inline:.25em; } @keyframes plp-marquee-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } @media (prefers-reduced-motion:reduce){ .plp-marquee__track{ animation:none; } } /* ── Homogénéité mobile (audit 2026-07-22) ───────────────────────── */ /* Header de collection : aligner le pill eyebrow avec le bouton "view all". En taille h1 le titre hérite d'un margin-top:40px (body h2.title) qui décentre le bouton et sur-espace la section. On zéro le pill, on reporte l'espacement sur le conteneur flex -> les 2 collections (Featured / Bulk) deviennent identiques. */ .flex-header .styled-header{ margin-top:0 !important; } .flex-header{ margin-top:40px; } /* Pill Newsletter : feuille noire (#121212) -> navy de marque #031825 comme les autres eyebrows */ /* leaf dégradé comme les autres eyebrows */ /* Newsletter : la checklist 2 colonnes (175px+164px) déborde sous ~430px et coupe "Exclusive Discounts" / "Earn Prime Points". -> 1 colonne pleine largeur sur téléphone. */ @media (max-width:480px){ .plp-newsletter__benefits{ grid-template-columns:1fr !important; } } /* PLP-HERO-DARK-TEXT */ [id$="image_banner_new_CwGB6K"] .banner__box h2{color:#0e2a44!important;text-shadow:none!important} [id$="image_banner_new_CwGB6K"] .banner__heading, [id$="image_banner_new_CwGB6K"] .banner__heading *{color:#0e2a44!important;text-shadow:none!important} [id$="image_banner_new_CwGB6K"] .banner__text, [id$="image_banner_new_CwGB6K"] .banner__text *{color:#1f3a52!important;text-shadow:none!important} /* scroll-down retiré */ [id$="image_banner_new_CwGB6K"] .banner__buttons > svg{display:none!important} /* texte decale a gauche (desktop) */ @media(min-width:990px){[id$="image_banner_new_CwGB6K"] .banner__box{margin-left:-70px}} /* PLP-MARQUEE-GLASS (revert = supprimer ce bloc) — texte identique au header : teinte .22 + contour blanc + ombre douce */ .plp-marquee__track{ color: rgba(154,174,181,.22) !important; font-weight: 500 !important; -webkit-text-stroke: 1.2px rgba(255,255,255,.70) !important; text-shadow: 0 1px 1px rgba(255,255,255,.70), 0 1px 4px rgba(79,96,104,.12), 0 6px 15px rgba(79,96,104,.15) !important; } /* PLP-MARQUEE-GLASS-END */ /* PLP-HIGHLIGHTS-GLASS (revert = supprimer ce bloc) */ [id$="__multicolumn_76XgzL"] #progress_bar_container{display:none !important} [id$="__multicolumn_76XgzL"] .multicolumn-card__image-wrapper{display:none !important} [id$="__multicolumn_76XgzL"] .multicolumn-list{gap:22px !important;margin-top:46px !important} [id$="__multicolumn_76XgzL"] .multicolumn-list__item{width:calc(25% - 18px) !important;flex:0 0 auto !important;display:flex !important;position:relative} [id$="__multicolumn_76XgzL"] .multicolumn-list__item:not(:first-child)::before{content:"";position:absolute;left:-20px;top:50%;transform:translateY(-50%);width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%232279be%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2012h13%27%2F%3E%3Cpath%20d%3D%27M13%206l6%206-6%206%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;opacity:.6;z-index:5;pointer-events:none} [id$="__multicolumn_76XgzL"] .multicolumn-card{ background:rgba(154,174,181,.22) !important; -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.6) !important; border-radius:18px !important; box-shadow:0 12px 30px -10px rgba(79,96,104,.30) !important; padding:26px 24px !important;height:100% !important;width:100% !important; transition:transform .25s ease, box-shadow .25s ease; } [id$="__multicolumn_76XgzL"] .multicolumn-list__item:hover .multicolumn-card{ transform:translateY(-4px); box-shadow:0 20px 42px -12px rgba(79,96,104,.40) !important; } [id$="__multicolumn_76XgzL"] .multicolumn-card__info{padding:0 !important} [id$="__multicolumn_76XgzL"] .multicolumn-card__info::before{ content:"";display:block;width:52px;height:52px;border-radius:14px;margin:0 0 16px; background-color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.75); background-repeat:no-repeat;background-position:center;background-size:26px 26px; } [id$="__multicolumn_76XgzL"] .multicolumn-list__item:nth-child(1) .multicolumn-card__info::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%232279be%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2%206.5h11v9H2z%27%2F%3E%3Cpath%20d%3D%27M13%209.5h4l3%203v3h-7z%27%2F%3E%3Ccircle%20cx%3D%276.5%27%20cy%3D%2718%27%20r%3D%271.7%27%2F%3E%3Ccircle%20cx%3D%2717%27%20cy%3D%2718%27%20r%3D%271.7%27%2F%3E%3C%2Fsvg%3E")} [id$="__multicolumn_76XgzL"] .multicolumn-list__item:nth-child(2) .multicolumn-card__info::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%232279be%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%203h6%27%2F%3E%3Cpath%20d%3D%27M10%203v5.5L5.2%2017A2%202%200%200%200%207%2020h10a2%202%200%200%200%201.8-3L14%208.5V3%27%2F%3E%3Cpath%20d%3D%27M7.5%2014h9%27%2F%3E%3C%2Fsvg%3E")} [id$="__multicolumn_76XgzL"] .multicolumn-list__item:nth-child(3) .multicolumn-card__info::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%232279be%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2013a8%208%200%200%201%2016%200%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%2713%27%20width%3D%274%27%20height%3D%276%27%20rx%3D%271.5%27%2F%3E%3Crect%20x%3D%2717%27%20y%3D%2713%27%20width%3D%274%27%20height%3D%276%27%20rx%3D%271.5%27%2F%3E%3C%2Fsvg%3E")} [id$="__multicolumn_76XgzL"] .multicolumn-list__item:nth-child(4) .multicolumn-card__info::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%232279be%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272.5%27%20y%3D%275%27%20width%3D%2719%27%20height%3D%2714%27%20rx%3D%272.5%27%2F%3E%3Cpath%20d%3D%27M2.5%209.5h19%27%2F%3E%3Cpath%20d%3D%27M6%2015h4%27%2F%3E%3C%2Fsvg%3E")} @media(max-width:749px){ [id$="__multicolumn_76XgzL"] .multicolumn-list{gap:26px !important;margin-top:34px !important} [id$="__multicolumn_76XgzL"] .multicolumn-list__item{width:100% !important} [id$="__multicolumn_76XgzL"] .multicolumn-list__item:not(:first-child)::before{left:50%;top:-13px;transform:translate(-50%,-50%) rotate(90deg)} [id$="__multicolumn_76XgzL"] .multicolumn-card{padding:22px 20px !important} } /* PLP-HIGHLIGHTS-GLASS-END */ /* PLP-FEATURED-HEADER-ALIGN (revert = supprimer ce bloc) */ @media(min-width:750px){ .flex-header .collection__view-all .button{margin-top:0 !important} } /* PLP-COMPARE-DA (revert = supprimer ce bloc) */ .comparisontable .cd-products-comparison-table{border:1px solid rgba(18,18,18,.08) !important;border-radius:18px !important;box-shadow:0 18px 44px -18px rgba(79,96,104,.26) !important;background:#fff !important} .comparisontable .features{background:#f6f8fa !important;border-right:1px solid rgba(18,18,18,.07) !important} .comparisontable .features .top-info{color:rgba(18,18,18,.6) !important;letter-spacing:.14em !important} .comparisontable .features .cd-features-list li{color:#121212 !important;font-weight:600 !important;letter-spacing:.03em !important} .comparisontable .cd-features-list li{border-bottom:1px solid rgba(18,18,18,.05) !important} .comparisontable .cd-products-columns .product{border-right:1px solid rgba(18,18,18,.06) !important} .comparisontable .cd-products-columns .top-info h3{color:#121212 !important;font-weight:600 !important} /* Colonne Prime Lab = surlignée bleu */ .comparisontable .feature-col.my-product{background:rgba(34,121,190,.06) !important;color:#0e2a44 !important;font-weight:700 !important;border-right:1px solid rgba(18,18,18,.06) !important} .comparisontable .feature-col.my-product.cd-features-list-heading{background:rgba(34,121,190,.13) !important;color:#2279be !important} /* Colonne concurrent = atténuée gris */ .comparisontable .feature-col.compare-product{color:#9aa0aa !important;font-weight:500 !important} .comparisontable .feature-col.compare-product.cd-features-list-heading{color:#9aa0aa !important} .comparisontable .section_header h2{font-weight:600} .comparisontable .section_header h2 span{color:#8a8f98} .comparisontable .section_header{margin-bottom:38px !important} .comparisontable .section_header h2{margin-bottom:0 !important} /* PLP-COMPARE-DA-END */ /* PLP-KEYBENEFITS-DA (revert = supprimer ce bloc) */ .icongridcontainer .icon_grid .icon_details{ background:rgba(154,174,181,.22) !important; -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.6) !important; box-shadow:0 12px 30px -12px rgba(79,96,104,.28) !important; border-radius:16px !important; transition:transform .25s ease, box-shadow .25s ease; } .icongridcontainer .icon_grid .icon_details:hover{transform:translateY(-4px);box-shadow:0 20px 42px -14px rgba(79,96,104,.38) !important} .icongridcontainer .icon_details .index_number{color:rgba(34,121,190,.13) !important} .icongridcontainer .icon_content h6{color:#121212 !important} /* PLP-KEYBENEFITS-DA-END */ /* PLP-HL-ACCORDION (revert=supprimer ce bloc + script plp-hl-accordion) — accordeon CLEAN/TECH/MINIMALISTE, desktop + mobile */ [id$="__multicolumn_76XgzL"] .multicolumn-list{ display:block !important; max-width:840px !important; margin:30px 0 0 !important; gap:0 !important; border-top:1px solid rgba(14,26,36,.11); } [id$="__multicolumn_76XgzL"] .multicolumn-list__item{ width:100% !important; max-width:none !important; flex:none !important; margin:0 !important; display:block !important; border-bottom:1px solid rgba(14,26,36,.11); } [id$="__multicolumn_76XgzL"] .multicolumn-list__item::before{ display:none !important; } [id$="__multicolumn_76XgzL"] .multicolumn-card{ background:transparent !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; padding:0 !important; transition:none !important; } [id$="__multicolumn_76XgzL"] .multicolumn-card:hover{ transform:none !important; box-shadow:none !important; } [id$="__multicolumn_76XgzL"] .multicolumn-card__info{ display:flex !important; flex-wrap:wrap; align-items:center; column-gap:16px; padding:21px 4px !important; cursor:pointer; } [id$="__multicolumn_76XgzL"] .multicolumn-card__info::before{ order:0; flex:0 0 auto; margin:0 !important; width:22px !important; height:22px !important; border-radius:0 !important; background-color:transparent !important; background-size:contain !important; background-repeat:no-repeat !important; background-position:center !important; opacity:.9; } [id$="__multicolumn_76XgzL"] .multicolumn-card__info h3{ order:1; flex:1 1 auto; margin:0 !important; text-align:left !important; font-size:17px !important; font-weight:500 !important; letter-spacing:-.01em; color:#0e1a24 !important; transition:color .2s ease; } [id$="__multicolumn_76XgzL"] .multicolumn-card__info::after{ order:2; flex:0 0 auto; content:"+"; width:22px; text-align:center; font-size:26px; font-weight:300; line-height:1; color:#8a99a5; transition:transform .3s cubic-bezier(.4,0,.2,1), color .2s ease; } [id$="__multicolumn_76XgzL"] .multicolumn-card__info .rte{ order:3; flex:0 0 100%; max-height:0; overflow:hidden; opacity:0; margin-top:0; transition:max-height .35s ease, opacity .3s ease, margin-top .3s ease; } [id$="__multicolumn_76XgzL"] .multicolumn-card__info .rte p{ font-size:15px !important; line-height:1.65 !important; color:rgba(18,18,18,.6) !important; margin:0 !important; max-width:640px; } [id$="__multicolumn_76XgzL"] .multicolumn-card__info:hover h3, [id$="__multicolumn_76XgzL"] .multicolumn-card__info:hover::after{ color:#2279be !important; } [id$="__multicolumn_76XgzL"] .multicolumn-list__item.plp-open .multicolumn-card__info h3{ color:#2279be !important; } [id$="__multicolumn_76XgzL"] .multicolumn-list__item.plp-open .multicolumn-card__info::after{ transform:rotate(45deg); color:#2279be; } @media(prefers-reduced-motion:reduce){ [id$="__multicolumn_76XgzL"] .multicolumn-card__info .rte, [id$="__multicolumn_76XgzL"] .multicolumn-card__info::after{ transition:none !important; } } /* PLP-HL-ACCORDION-END */