/* ========================================================= HEADER — PAGE PRODUCT ========================================================= */ .page-product { --product-accent: var(--color-butter); --product-hero-bg: var(--color-butter); --product-section-bg: var(--color-butter); --product-next-bg: var(--color-butter); --product-number-texture: url('/wp-content/uploads/2026/08/texture-madeleine.webp'); --product-index: "01"; --page-accent: var(--product-accent); background: var(--color-milk); } /* ========================================================= THÈMES PRODUITS La classe de variante peut être ajoutée au par WooCommerce. ========================================================= */ .page-product--vanille, .single-product:has(.product_cat-vanille) { --product-accent: var(--color-butter); --product-hero-bg: var(--color-butter); --product-section-bg: var(--color-butter); --product-next-bg: var(--color-butter); --product-number-texture: url('/wp-content/uploads/2026/08/texture-madeleine.webp'); --product-index: "01"; } .page-product--chocolat, .page-product--chocolat-noir, .single-product:has(.product_cat-chocolat), .single-product:has(.product_cat-chocolat-noir) { --product-accent: var(--color-hazelnut); --product-hero-bg: #7b5953; --product-section-bg: #d6b092; --product-next-bg: #d6b092; --product-number-texture: url('/wp-content/uploads/2026/08/texture-chocolat-noir.webp'); --product-index: "02"; } .page-product--chocolat-noisette, .page-product--noisette-chocolat-au-lait, .single-product:has(.product_cat-chocolat-noisette), .single-product:has(.product_cat-noisette-chocolat-au-lait) { --product-accent: #d6b092; --product-hero-bg: #d6b092; --product-section-bg: var(--color-butter); --product-next-bg: #d6b092; --product-number-texture: url('/wp-content/uploads/2026/08/texture-chocolat-lait.webp'); --product-index: "03"; } .page-product--ruby, .single-product:has(.product_cat-ruby) { --product-accent: var(--color-ruby); --product-hero-bg: var(--color-ruby); --product-section-bg: var(--color-ruby); --product-next-bg: var(--color-ruby); --product-number-texture: url('/wp-content/uploads/2026/08/texture-ruby.webp'); --product-index: "04"; } .page-product--caramel, .single-product:has(.product_cat-caramel) { --product-accent: var(--color-caramel); --product-hero-bg: var(--color-caramel); --product-section-bg: var(--color-caramel); --product-next-bg: var(--color-caramel); --product-number-texture: url('/wp-content/uploads/2026/08/texture-caramel.webp'); --product-index: "05"; } .page-product--matcha, .single-product:has(.product_cat-matcha) { --product-accent: var(--color-matcha); --product-hero-bg: var(--color-matcha); --product-section-bg: var(--color-matcha); --product-next-bg: var(--color-matcha); --product-number-texture: url('/wp-content/uploads/2026/08/texture-matcha.webp'); --product-index: "06"; } .page-product--vegetale, .page-product--vegan, .single-product:has(.product_cat-vegetale), .single-product:has(.product_cat-vegan) { --product-accent: var(--color-butter); --product-hero-bg: var(--color-butter); --product-section-bg: var(--color-matcha); --product-next-bg: var(--color-butter); --product-number-texture: url('/wp-content/uploads/2026/08/texture-madeleine.webp'); --product-index: "07"; } .page-product--vegetale-chocolat, .page-product--vegan-chocolat, .single-product:has(.product_cat-vegetale-chocolat), .single-product:has(.product_cat-vegan-chocolat) { --product-accent: var(--color-chocolate); --product-hero-bg: #7b5953; --product-section-bg: #d6b092; --product-next-bg: #d6b092; --product-number-texture: url('/wp-content/uploads/2026/08/texture-chocolat-noir.webp'); --product-index: "08"; } .page-product .header:not(.nav-open) .burger { color: var(--color-chocolate); border-color: rgb(53 24 22 / .25); } .page-product .header:not(.nav-open) .header-scroll-logo__img { background-color: var(--color-chocolate); } /* ========================================================= HERO ========================================================= */ .product-hero { --product-outer-gutter: max( var(--gutter), calc((100vw - var(--container-wide)) / 2) ); min-height: 90svh; display: grid; grid-template-columns: 56% 44%; padding-top: 0; width: 100%; max-width: 100%; } /* Aligne la fiche produit sur le conteneur large utilisé par les autres pages. */ .product-hero__content-shell { min-width: 0; width: 100%; max-width: none; margin: 0; padding-right: var(--product-outer-gutter); padding-left: var(--gutter); } .product-hero__gallery { position: relative; min-height: 90svh; display: grid; place-items: center; overflow: hidden; background: var(--product-hero-bg); } .product-hero__image { position: relative; z-index: 1; width: min(70%, 760px); aspect-ratio: 1 / 1; } .product-hero__image img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 35px 30px rgb(53 24 22 / .16)); } .product-hero__number { position: absolute; right: -.02em; bottom: -.13em; display: block; color: transparent; background-image: var(--product-number-texture); background-size: cover; background-position: center; background-clip: text; -webkit-background-clip: text; -webkit-text-stroke: 1px rgb(53 24 22 / .12); font-size: clamp(13rem, 24vw, 28rem); font-weight: 700; line-height: .8; letter-spacing: -.08em; } .product-breadcrumb { display: flex; gap: 10px; margin-bottom: var(--space-md); color: var(--page-copy-color); font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; } .product-breadcrumb a{ font-weight: 600; } .product-breadcrumb a:hover{ color: var(--product-accent); } .product-hero__content { min-width: 0; width: 100%; } .page-product .page-hero__intro { margin-top: clamp(42px, 5vw, 72px); } /* ========================================================= FORMAT ========================================================= */ .product-format { display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; padding: 22px 0; border-block: 1px solid var(--page-rule-light); margin-top: var(--space-md); } .product-format > span { grid-column: 1 / -1; font-size: .67rem; letter-spacing: .14em; text-transform: uppercase; opacity: .6; } .product-format strong { font-size: 1.15rem; } .product-format small { align-self: end; font-size: .8rem; opacity: .65; } /* ========================================================= PURCHASE ========================================================= */ .product-purchase { display: grid; grid-template-columns: 130px minmax(0, 1fr); margin-top: var(--space-md); } .quantity { display: grid; grid-template-columns: 38px 1fr 38px; border: 1px solid var(--color-chocolate); } .quantity button { padding: 0; border: 0; color: inherit; } .quantity input { min-width: 0; width: 100%; border: 0; background: transparent; text-align: center; -moz-appearance: textfield; } .quantity input::-webkit-inner-spin-button { -webkit-appearance: none; } .product-purchase__button { position: relative; isolation: isolate; overflow: hidden; min-height: 58px; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 0 24px; border: 1px solid var(--color-chocolate); border-left: 0; color: var(--color-milk); background: var(--color-chocolate) !important; text-align: left; opacity: 1; transition: color .45s var(--ease-main), border-color .45s var(--ease-main), box-shadow .45s var(--ease-main); } .product-purchase__button::before { content: ""; position: absolute; z-index: 0; right: 0; bottom: 0; left: 0; height: 2px; background: var(--product-accent); background-image: var(--product-number-texture); background-position: center; background-size: cover; transform: scaleX(0); transform-origin: left center; transition: transform .45s var(--ease-main); } .product-purchase__button span, .product-purchase__button small { position: relative; z-index: 1; } .product-purchase__button span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; letter-spacing: .01em; } .product-purchase__button span::after { content: "→"; display: inline-block; font-size: .9em; line-height: 1; opacity: .62; transition: transform .45s var(--ease-main); } .product-purchase__button:hover { color: var(--color-milk); border-color: var(--color-chocolate); box-shadow: 0 7px 18px rgb(53 24 22 / .1); } .product-purchase__button:hover::before { transform: scaleX(1); } .product-purchase__button:hover span::after { transform: translateX(2px); } .product-purchase__button:focus-visible { outline: 2px solid var(--color-chocolate); outline-offset: 4px; } .product-purchase__button small { padding-left: 18px; border-left: 1px solid currentColor; opacity: .62; transition: opacity .45s var(--ease-main); } .product-purchase__button:hover small { opacity: .82; } .product-purchase__button:disabled { color: var(--color-milk); background: var(--color-chocolate) !important; box-shadow: none; cursor: default; } .product-purchase__note { margin: 10px 0 0; font-size: .7rem; opacity: .58; } .product-highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; } @media (min-width: 981px) { .product-highlights { position: absolute; right: var(--product-outer-gutter); bottom: 0; left: var(--gutter); } } .product-highlights li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; padding: clamp(18px, 2vw, 26px) clamp(12px, 1.5vw, 22px); border-right: 1px solid var(--page-rule-light); color: var(--color-chocolate); font-size: clamp(.75rem, .8vw, .9rem); font-weight: 600; line-height: 1.2; } .product-highlights li:first-child { padding-left: 0; } .product-highlights li:last-child { padding-right: 0; border-right: 0; } .product-highlights span { font-family: var(--font-primary); font-size: clamp(2rem, 2.5vw, 3rem); font-weight: 600; line-height: .8; color: color-mix( in srgb, var(--product-accent) 45%, var(--color-chocolate) ); opacity: .52; transform: translateY(0); transition: opacity .6s var(--ease-main), transform .6s var(--ease-main); } .product-highlights span::after { content: ""; display: block; width: 26px; margin-top: 10px; border-top: 1px solid currentColor; opacity: .55; transition: width .45s var(--ease-main), opacity .45s var(--ease-main); } .product-highlights li.lit span, .product-highlights span.lit { opacity: 1; transform: translateY(-3px); } .product-highlights li.lit span::after, .product-highlights span.lit::after { width: 46px; opacity: 1; } /* ========================================================= FACTS ========================================================= */ .product-facts { background: var(--color-milk); } .product-facts__header { max-width: 760px; margin-bottom: var(--space-lg); } .product-facts__intro { max-width: 620px; margin: var(--space-md) 0 0; color: var(--page-copy-color); } .product-facts__grid { display: grid; grid-template-columns: 1fr minmax(360px, 500px); gap: clamp(60px, 9vw, 160px); align-items: start; } /* ========================================================= INGREDIENTS ========================================================= */ .product-ingredients { display: grid; gap: 12px; } .product-ingredients details { border-left: 3px solid var(--product-accent); background: color-mix( in srgb, var(--product-section-bg) 48%, var(--color-milk) ); transition: background-color var(--transition), transform var(--transition); } .product-ingredients details:nth-of-type(2) { background: color-mix( in srgb, var(--product-section-bg) 34%, var(--color-milk) ); } .product-ingredients details:nth-of-type(3) { background: color-mix( in srgb, var(--product-section-bg) 62%, var(--color-milk) ); } .product-ingredients details[open] { background: color-mix( in srgb, var(--product-section-bg) 76%, var(--color-milk) ); } .product-ingredients summary { display: grid; grid-template-columns: 52px 1fr 30px; align-items: center; padding: 24px clamp(18px, 2vw, 30px); font-size: clamp(1.1rem, 1.5vw, 1.35rem); font-weight: 600; list-style: none; cursor: pointer; } .product-ingredients summary::-webkit-details-marker { display: none; } .product-ingredients summary span { font-size: .7rem; color: var(--product-accent); opacity: .85; } .product-ingredients summary i { position: relative; width: 32px; height: 32px; border: 2px solid color-mix(in srgb, var(--color-chocolate) 14%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--product-accent) 42%, transparent); box-shadow: inset 0 0 0 4px rgb(252 247 227 / .32); color: transparent; font-size: 0; font-style: normal; transform: rotate(0deg); transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition), transform .5s var(--ease-main); } .product-ingredients summary i::before, .product-ingredients summary i::after { content: ""; position: absolute; top: 50%; left: 50%; width: 11px; height: 1px; background: var(--color-chocolate); transform: translate(-50%, -50%); transition: background-color var(--transition), transform .45s var(--ease-main); } .product-ingredients summary i::after { transform: translate(-50%, -50%) rotate(90deg); } .product-ingredients details[open] summary i { border-color: color-mix(in srgb, var(--color-chocolate) 20%, transparent); background: transparent; box-shadow: inset 0 0 0 1px rgb(53 24 22 / .08); transform: rotate(180deg); } .product-ingredients details[open] summary i::before { background: var(--color-chocolate); } .product-ingredients details[open] summary i::after { background: var(--color-chocolate); transform: translate(-50%, -50%) rotate(90deg) scaleX(0); } @media (hover: hover) { .product-ingredients summary:hover i { border-color: color-mix(in srgb, var(--color-chocolate) 42%, transparent); background: var(--color-chocolate); box-shadow: inset 0 0 0 4px rgb(252 247 227 / .12); transform: rotate(90deg); } .product-ingredients summary:hover i::before, .product-ingredients summary:hover i::after { background: var(--color-milk); } .product-ingredients details[open] summary:hover i { transform: rotate(270deg); } } .product-ingredients summary:focus-visible { outline: 1px solid var(--color-chocolate); outline-offset: 4px; } .product-ingredients details div { padding: 0 clamp(18px, 2vw, 30px) 24px calc(52px + clamp(18px, 2vw, 30px)); } .product-ingredients details p { max-width: 700px; margin: 0; color: rgb(53 24 22 / .72); line-height: 1.65; } /* ========================================================= QUEBEC MARK ========================================================= */ .quebec-mark { display: flex; align-items: center; gap: 22px; margin-top: var(--space-lg); } .quebec-mark img { width: 104px; height: 104px; object-fit: contain; } .quebec-mark p { margin: 0; font-weight: 600; line-height: 1.3; } .quebec-mark span { font-weight: 400; opacity: .65; } /* ========================================================= NUTRITION ========================================================= */ .nutrition { padding: 16px; border: 2px solid var(--color-chocolate); background: var(--color-milk); color: #111; font-family: Arial, sans-serif; } .nutrition header { padding-bottom: 7px; border-bottom: 6px solid #111; } .nutrition header h3, .nutrition header p { margin: 0; font-family: Arial, sans-serif; font-weight: 800; line-height: .94; } .nutrition header h3 { font-size: 2rem; } .nutrition header p { font-size: 1.45rem; } .nutrition header span { display: block; margin-top: 5px; font-size: .95rem; } .nutrition__calories { display: flex; justify-content: space-between; align-items: end; padding: 5px 0; border-bottom: 4px solid #111; } .nutrition__calories strong { font-size: 1.7rem; } .nutrition__calories small { text-align: right; font-weight: 700; line-height: 1.05; } .nutrition dl { margin: 0; } .nutrition dl div { display: grid; grid-template-columns: 1fr auto; padding: 4px 0; border-bottom: 1px solid #111; } .nutrition dt, .nutrition dd { margin: 0; } .nutrition__sub dt { padding-left: 16px; } .nutrition footer { padding-top: 6px; border-top: 4px solid #111; font-size: .72rem; line-height: 1.25; } /* ========================================================= NEXT PRODUCT ========================================================= */ .product-next__inner { display: grid; grid-template-columns: minmax(0, .72fr) minmax(460px, 1.28fr); gap: var(--space-lg); align-items: center; } .page-product .product-next { /* background: var(--product-next-bg); */ padding-block: clamp(52px, 4vw, 72px); } .product-next__intro { max-width: 480px; margin-top: 48px; color: rgb(53 24 22 / .7); line-height: 1.65; } .product-next .btn-link { margin-top: var(--space-md); } .product-next-carousel { position: relative; justify-self: end; width: min(100%, 620px); } .product-next-carousel__viewport { position: relative; overflow: hidden; aspect-ratio: 1 / 1.08; touch-action: pan-y; } .product-next-card { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; padding: 0; color: var(--color-chocolate); opacity: 0; visibility: hidden; transform: translateX(5%); transition: opacity .65s var(--ease-main), transform .75s var(--ease-main), visibility .65s; } .product-next-card.is-active { z-index: 1; opacity: 1; visibility: visible; transform: translateX(0); } .product-next-card--chocolat, .product-next-card--chocolat-noir, .product-next-card--vegetale-chocolat, .product-next-card--vegan-chocolat { background: #7b5953; color: var(--color-milk); } .product-next-card--vanille, .product-next-card--vegetale, .product-next-card--vegan { background: var(--color-butter); } .product-next-card--chocolat-noisette, .product-next-card--noisette-chocolat-au-lait { background: #d6b092; } .product-next-card--ruby { background: var(--color-ruby); } .product-next-card--caramel { background: var(--color-caramel); } .product-next-card--matcha { background: var(--color-matcha); } .product-next-card__media { display: flex; align-items: center; justify-content: center; overflow: hidden; min-height: 0; } .product-next-card__media img { width: 82%; height: 82%; object-fit: contain; transition: transform .8s var(--ease-main), filter .6s ease; } .product-next-card:hover .product-next-card__media img { transform: scale(1.07) rotate(-2deg); } .product-next-card__footer { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 18px; padding: 0 clamp(24px, 3vw, 38px) clamp(22px, 2.4vw, 32px); } .product-next-card__footer small { font-size: .85rem; } .product-next-card__footer strong { font-size: clamp(1.7rem, 3vw, 2.7rem); line-height: 1; } .product-next-card__footer svg { align-self: center; } .product-next-card:hover .product-next-card__footer svg { transform: translate(4px, -4px); } .product-next-carousel__controls { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 18px; } .product-next-carousel__controls button { position: relative; width: 34px; height: 34px; padding: 0; border: 0; background: transparent; opacity: .55; } .product-next-carousel__controls button::before { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border: 1px solid var(--color-chocolate); border-radius: 999px; background: transparent; transform: translate(-50%, -50%); transition: width var(--transition), background-color var(--transition), opacity var(--transition); } .product-next-carousel__controls button.is-active { opacity: 1; } .product-next-carousel__controls button.is-active::before { width: 24px; background: var(--color-chocolate); } /* ========================================================= DESKTOP COMPACT ========================================================= */ @media (min-width: 981px) and (max-width: 1800px) { .product-hero { grid-template-columns: 52% 48%; min-height: 100svh; } .product-hero__gallery { min-height: 100svh; } .product-hero__image { width: min(62%, 620px); } .product-hero__number { font-size: clamp(12rem, 21vw, 21rem); } .page-product .page-hero__intro { margin-top: clamp(30px, 3.5vw, 48px); font-size: clamp(1rem, 1.18vw, 1.18rem); } .product-format { margin-top: clamp(28px, 3vw, 42px); padding-block: 17px; } .product-purchase { margin-top: clamp(22px, 2.2vw, 32px); } .product-highlights li { gap: 8px; padding-block: 17px; } .product-highlights span { font-size: clamp(1.8rem, 2.2vw, 2.35rem); } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 980px) { .product-next__inner { grid-template-columns: 1fr; min-height: 0; } .product-next-carousel { justify-self: center; margin-top: var(--space-lg); } .product-highlights { margin-top: 32px; } .product-hero { grid-template-columns: 1fr; } .product-hero__content-shell { width: 100%; margin: 0; padding-inline: var(--gutter); } .product-hero__gallery { min-height: 68svh; } .product-facts__grid { grid-template-columns: 1fr; } .nutrition { width: min(100%, 520px); } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .product-highlights { grid-template-columns: 1fr; margin-top: 28px; } .product-highlights li, .product-highlights li:first-child, .product-highlights li:last-child { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 16px; padding: 20px 0; border-right: 0; border-bottom: 1px solid var(--page-rule-light); } .product-highlights li:last-child { border-bottom: 0; } .product-highlights span { font-size: 2rem; } .product-highlights span::after { display: none; } .product-hero__gallery { min-height: 62svh; } .product-hero__image { width: 86%; } .product-purchase { grid-template-columns: 112px 1fr; } .product-purchase__button { padding: 0 14px; } .product-purchase__button small { display: none; } .product-next__inner { min-height: 0; } .product-next-carousel { width: min(100%, 460px); } .product-next-card__footer { gap: 12px; padding-inline: 20px; } .product-facts__grid { gap: var(--space-lg); } .quebec-mark img { width: 84px; height: 84px; } .nutrition header h3 { font-size: 1.65rem; } } @media (prefers-reduced-motion: reduce) { .product-next-card, .product-next-card__media img { transition: none; } .product-highlights span, .product-highlights li.lit span, .product-highlights span.lit { opacity: 1; transform: none; transition: none; } .product-highlights span::after, .product-highlights li.lit span::after, .product-highlights span.lit::after { width: 26px; opacity: 1; transition: none; } }