/* * My3DCraft — page produit. * Chargé uniquement sur les fiches produit (voir functions.php). * Aucune règle ne cible le thème parent : tout est préfixé .single-product ou .m3c-. */ /* ------------------------------------------------------------------ * * 0. Police auto-hébergée — aucun appel à un tiers * ------------------------------------------------------------------ */ @font-face { font-family: "M3C Poppins"; src: url("../fonts/poppins-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "M3C Poppins"; src: url("../fonts/poppins-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "M3C Poppins"; src: url("../fonts/poppins-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "M3C Poppins"; src: url("../fonts/poppins-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* ------------------------------------------------------------------ * * 1. Tokens * ------------------------------------------------------------------ */ .single-product { --m3c-font: "M3C Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; --m3c-ink: #2a2733; --m3c-ink-strong: #17151d; --m3c-muted: #6f6b7a; --m3c-line: #e4e2e6; --m3c-tint: #f4f3f1; --m3c-radius-btn: 6px; --m3c-radius-media: 12px; --m3c-radius-input: 6px; --m3c-band-pad: clamp(3.5rem, 8vw, 6.5rem); --m3c-gap: clamp(1.75rem, 4.5vw, 3.5rem); /* * Valeurs de repli. Elles sont écrasées produit par produit par le style * inline généré en PHP à partir du champ « Accent colour ». */ --m3c-accent: #17151d; --m3c-accent-text: #ffffff; --m3c-accent-hover: #000000; --m3c-dark: #0d0d10; } /* * La police s'applique à toute la page produit, en-tête et pied de page compris. * Sans cela, Storefront garde Source Sans Pro autour du contenu et l'ensemble * paraît dépareillé. .single-product est une classe du , donc la règle * l'emporte sur le sélecteur d'élément « body » du parent. */ .single-product { font-family: var(--m3c-font); } .single-product div.product, .single-product .m3c-band { color: var(--m3c-ink); } /* Storefront met tous les titres en graisse 300 : trop fin pour ce rendu. */ .single-product h1, .single-product h2, .single-product h3, .single-product h4, .single-product h5, .single-product h6 { font-family: var(--m3c-font); font-weight: 700; letter-spacing: -0.01em; color: var(--m3c-ink-strong); } /* * Conteneur élargi. Storefront plafonne à 66.5em, soit environ 1064 px de * contenu — la référence travaille à 1400 px. La colonne produit était donc * près d'un quart trop étroite, ce qui tasse toute la page. */ @media (min-width: 768px) { .single-product .col-full { box-sizing: border-box; max-width: 1400px; margin-left: auto; margin-right: auto; padding-left: 2rem; padding-right: 2rem; } } /* Barre de navigation réduite au panier : on la garde discrète. */ .single-product .storefront-primary-navigation { padding: 0; } .single-product .site-header { padding-bottom: 1.25rem; } /* ------------------------------------------------------------------ * * 2. Bandeau défilant * ------------------------------------------------------------------ */ .m3c-ticker { background: var(--m3c-ink-strong, #17151d); color: #fff; overflow: hidden; font-family: "M3C Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .m3c-ticker__track { display: flex; width: max-content; animation: m3c-ticker-scroll 42s linear infinite; } .m3c-ticker:hover .m3c-ticker__track { animation-play-state: paused; } .m3c-ticker__group { display: flex; flex: 0 0 auto; } .m3c-ticker__item { display: inline-flex; align-items: center; white-space: nowrap; padding: 0.7rem 0; margin: 0 1.75rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; line-height: 1.4; } .m3c-ticker__item::after { content: ""; display: inline-block; width: 4px; height: 4px; margin-left: 1.75rem; border-radius: 50%; background: currentColor; opacity: 0.45; } @keyframes m3c-ticker-scroll { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .m3c-ticker__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } .m3c-ticker__group:nth-child(2) { display: none; } } /* ------------------------------------------------------------------ * * 3. Mise en page du bloc produit * ------------------------------------------------------------------ */ @media (min-width: 768px) { .single-product div.product { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: var(--m3c-gap); row-gap: 0; align-items: start; } /* La grille neutralise les flottants hérités du parent. */ .single-product div.product > .woocommerce-product-gallery { grid-column: 1; width: auto; float: none; margin: 0; position: sticky; top: 1.5rem; } .single-product div.product > .summary { grid-column: 2; width: auto; float: none; margin: 0; padding-bottom: var(--m3c-band-pad); } .single-product div.product > *:not(.woocommerce-product-gallery):not(.summary) { grid-column: 1 / -1; width: auto; float: none; } } /* ------------------------------------------------------------------ * * 4. Galerie * ------------------------------------------------------------------ */ .single-product .woocommerce-product-gallery { position: relative; } .single-product .woocommerce-product-gallery img { border-radius: var(--m3c-radius-media); display: block; } .single-product .woocommerce-product-gallery__image > a { cursor: zoom-in; display: block; } .single-product .woocommerce-product-gallery .zoomImg { background-color: #fff; border-radius: var(--m3c-radius-media); } @media (min-width: 768px) { /* row-reverse : la liste de vignettes, second enfant dans le DOM, passe à gauche. */ .single-product .woocommerce-product-gallery { display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 0.75rem; } .single-product .woocommerce-product-gallery > .flex-viewport, .single-product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper { flex: 1 1 auto; min-width: 0; margin: 0; } .single-product .woocommerce-product-gallery .flex-control-thumbs { flex: 0 0 76px; display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } .single-product .woocommerce-product-gallery .flex-control-thumbs li { width: 100%; float: none; margin: 0; padding: 0; list-style: none; } } .single-product .woocommerce-product-gallery .flex-control-thumbs img { width: 100%; height: auto; opacity: 0.45; border: 2px solid transparent; border-radius: 8px; cursor: pointer; transition: opacity 0.18s ease, border-color 0.18s ease; } .single-product .woocommerce-product-gallery .flex-control-thumbs img:hover, .single-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active { opacity: 1; border-color: var(--m3c-ink); } /* ------------------------------------------------------------------ * * 5. Colonne d'achat * ------------------------------------------------------------------ */ .single-product div.product .summary .product_title { font-family: var(--m3c-font); font-size: clamp(2rem, 1.2rem + 2.6vw, 2.875rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 0.5rem; color: var(--m3c-ink-strong); } .single-product .m3c-tagline { margin: 0 0 1rem; font-size: 1.0625rem; line-height: 1.5; color: var(--m3c-muted); } .single-product .m3c-tagline p { margin: 0; } .single-product div.product .summary p.price { font-size: 1.75rem; font-weight: 700; line-height: 1.2; color: var(--m3c-ink-strong); margin: 0 0 1.5rem; letter-spacing: -0.01em; } .single-product div.product .summary p.price del { opacity: 0.4; font-weight: 500; margin-right: 0.45rem; } .single-product div.product .summary .woocommerce-product-rating { margin: 0 0 0.75rem; } /* Formulaire d'achat */ .single-product div.product form.cart { margin: 0 0 0.875rem; display: flex; flex-wrap: wrap; gap: 0.625rem; align-items: stretch; } .single-product div.product form.cart .quantity { flex: 0 0 auto; margin: 0; } .single-product div.product form.cart .quantity .qty { height: 100%; min-height: 3.625rem; width: 4.75rem; text-align: center; font-family: var(--m3c-font); font-size: 1rem; font-weight: 600; color: var(--m3c-ink-strong); background: #fff; border: 1px solid var(--m3c-line); border-radius: var(--m3c-radius-input); box-shadow: none; } .single-product div.product form.cart .single_add_to_cart_button.button.alt { flex: 1 1 100%; width: 100%; min-height: 3.75rem; padding: 1.1rem 1.5rem; font-family: var(--m3c-font); font-size: 1.0625rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--m3c-accent-text); background-color: var(--m3c-accent); border: 0; border-radius: var(--m3c-radius-btn); box-shadow: none; transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; } .single-product div.product form.cart .single_add_to_cart_button.button.alt:hover, .single-product div.product form.cart .single_add_to_cart_button.button.alt:focus { background-color: var(--m3c-accent-hover); color: var(--m3c-accent-text); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(23, 21, 29, 0.24); } /* Achat immédiat : second niveau, en charbon, pour ne pas concurrencer l'accent. */ .single-product .m3c-buynow { flex: 1 1 100%; order: 10; width: 100%; min-height: 3.5rem; margin: 0.625rem 0 0; padding: 1rem 1.5rem; font-family: var(--m3c-font); font-size: 1rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: #fff; background: var(--m3c-ink-strong); border: 0; border-radius: var(--m3c-radius-btn); cursor: pointer; transition: background-color 0.15s ease, transform 0.15s ease; } .single-product .m3c-buynow:hover, .single-product .m3c-buynow:focus { background: #000; color: #fff; transform: translateY(-1px); } .single-product div.product form.cart .single_add_to_cart_button.button.alt:active { transform: translateY(0); box-shadow: none; } @media (min-width: 480px) { .single-product div.product form.cart .single_add_to_cart_button.button.alt { flex: 1 1 auto; width: auto; } } /* Ligne de paiement */ .single-product .m3c-checkout-line { margin: 0 0 1.5rem; text-align: center; } .single-product .m3c-checkout-line__secure { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin: 0 0 0.7rem; font-size: 0.8125rem; font-weight: 500; color: var(--m3c-muted); } .single-product .m3c-checkout-line__icon { width: 16px; height: 16px; } .single-product .m3c-paylogos { list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem; margin: 0; padding: 0; } .single-product .m3c-paylogos__item { margin: 0; padding: 0; list-style: none; line-height: 0; } .single-product .m3c-paylogos__item img { display: block; width: 48px; height: 30px; border: 1px solid var(--m3c-line); border-radius: 4px; background: #fff; object-fit: contain; padding: 2px; } .single-product .m3c-checkout-line__methods { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.375rem; margin: 0.7rem 0 0; } .single-product .m3c-checkout-line__method { padding: 0.15rem 0.5rem; border: 1px solid var(--m3c-line); border-radius: 4px; font-size: 0.75rem; background: #fff; } /* Réassurance compacte */ .single-product .m3c-trust { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin: 0 0 1.25rem; padding: 0.875rem 0.5rem; border-top: 1px solid var(--m3c-line); border-bottom: 1px solid var(--m3c-line); } .single-product .m3c-trust__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.35rem; margin: 0; padding: 0; list-style: none; } .single-product .m3c-trust .m3c-icon { width: 21px; height: 21px; color: var(--m3c-ink); } .single-product .m3c-trust__title { font-size: 0.75rem; font-weight: 600; line-height: 1.3; letter-spacing: 0.01em; color: var(--m3c-ink); } /* ------------------------------------------------------------------ * * 6. Accordéons (colonne d'achat et FAQ) * ------------------------------------------------------------------ */ .single-product .m3c-buy-accordions { margin: 0 0 1.25rem; border-top: 1px solid var(--m3c-line); } .single-product .m3c-acc { border-bottom: 1px solid var(--m3c-line); } .single-product .m3c-acc__q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; cursor: pointer; list-style: none; font-size: 0.9375rem; font-weight: 600; line-height: 1.35; color: var(--m3c-ink-strong); } .single-product .m3c-acc__q::-webkit-details-marker { display: none; } .single-product .m3c-acc__chevron { flex: 0 0 auto; width: 18px; height: 18px; color: var(--m3c-muted); transition: transform 0.2s ease; } .single-product .m3c-acc[open] .m3c-acc__chevron { transform: rotate(180deg); } .single-product .m3c-acc__a { padding: 0 0 1.1rem; font-size: 0.9375rem; line-height: 1.6; color: var(--m3c-muted); max-width: 62ch; } .single-product .m3c-acc__a p:last-child { margin-bottom: 0; } /* ------------------------------------------------------------------ * * 7. Bandes de section — jointives, fonds alternés * ------------------------------------------------------------------ */ .single-product .m3c-band { margin: 0; padding: var(--m3c-band-pad) 0; background: #fff; } .single-product .m3c-band--tint { background: var(--m3c-tint); box-shadow: 0 0 0 100vmax var(--m3c-tint); clip-path: inset(0 -100vmax); } .single-product .m3c-band__inner { margin: 0 auto; } .single-product .m3c-band__inner--narrow { max-width: 46rem; } .single-product .m3c-section-title { font-family: var(--m3c-font); font-size: clamp(1.5rem, 1rem + 1.8vw, 2rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 1.5rem; color: var(--m3c-ink-strong); } /* ------------------------------------------------------------------ * * 8. Blocs descriptifs alternés * ------------------------------------------------------------------ */ .single-product .m3c-feature .m3c-band__inner { display: grid; gap: clamp(1.25rem, 3vw, 2.75rem); align-items: center; } .single-product .m3c-feature__media { margin: 0; min-width: 0; } .single-product .m3c-feature__img { display: block; width: 100%; height: auto; border-radius: var(--m3c-radius-media); background: #fff; } .single-product .m3c-feature__heading { font-family: var(--m3c-font); font-size: clamp(1.4rem, 1rem + 1.6vw, 1.95rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 0.7rem; color: var(--m3c-ink-strong); } .single-product .m3c-feature__text { font-size: 1.0625rem; line-height: 1.62; color: var(--m3c-muted); } .single-product .m3c-feature__text p:last-child { margin-bottom: 0; } @media (min-width: 768px) { .single-product .m3c-feature .m3c-band__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } .single-product .m3c-feature--reversed .m3c-feature__media { order: 2; } .single-product .m3c-feature--reversed .m3c-feature__body { order: 1; } } /* ------------------------------------------------------------------ * * 9. Témoignages * ------------------------------------------------------------------ */ .single-product .m3c-testimonials__notice { margin: -0.75rem 0 1.5rem; padding: 0.6rem 0.85rem; border: 1px dashed #c9a227; border-radius: var(--m3c-radius-btn); background: #fdf7e3; color: #6b5514; font-size: 0.8125rem; font-weight: 500; } .single-product .m3c-testimonials__row { display: grid; gap: 1rem; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; scrollbar-width: thin; } .single-product .m3c-tcard { scroll-snap-align: start; display: flex; flex-direction: column; gap: 0.75rem; margin: 0; padding: 1.35rem; background: #fff; border: 1px solid var(--m3c-line); border-radius: var(--m3c-radius-media); } .single-product .m3c-tcard__stars { display: flex; gap: 2px; color: #e8a020; } .single-product .m3c-star { width: 16px; height: 16px; stroke-width: 1; } .single-product .m3c-tcard__quote { margin: 0; padding: 0; border: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--m3c-ink); quotes: none; } .single-product .m3c-tcard__quote p:last-child { margin-bottom: 0; } .single-product .m3c-tcard__author { display: flex; align-items: center; gap: 0.65rem; margin-top: auto; padding-top: 0.5rem; } .single-product .m3c-tcard__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; } .single-product .m3c-tcard__meta { display: flex; flex-direction: column; min-width: 0; } .single-product .m3c-tcard__name { font-size: 0.875rem; font-weight: 600; color: var(--m3c-ink-strong); } .single-product .m3c-tcard__verified { font-size: 0.75rem; font-weight: 500; color: #1f7a4d; } @media (min-width: 768px) { .single-product .m3c-testimonials__row { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; overflow-x: visible; } } /* ------------------------------------------------------------------ * * 10. FAQ * ------------------------------------------------------------------ */ .single-product .m3c-faq__list { border-top: 1px solid var(--m3c-line); } .single-product .m3c-faq__item .m3c-acc__q { font-size: 1rem; padding: 1.1rem 0; } /* ------------------------------------------------------------------ * * 11. Zone d'avis native — espacement seulement * ------------------------------------------------------------------ */ .single-product div.product .woocommerce-tabs { margin: 0; padding: var(--m3c-band-pad) 0; border-top: 1px solid var(--m3c-line); font-family: var(--m3c-font); } /* ------------------------------------------------------------------ * * 12. Formulaire de contact * ------------------------------------------------------------------ */ .single-product .m3c-contact { background: var(--m3c-tint); box-shadow: 0 0 0 100vmax var(--m3c-tint); clip-path: inset(0 -100vmax); } .single-product .m3c-contact__intro { margin: -0.75rem 0 1.5rem; font-size: 1rem; line-height: 1.6; color: var(--m3c-muted); } .single-product .m3c-form__row { display: grid; gap: 1rem; } @media (min-width: 560px) { .single-product .m3c-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .single-product .m3c-form__field { display: flex; flex-direction: column; gap: 0.35rem; margin: 0 0 1rem; } .single-product .m3c-form__field label { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; color: var(--m3c-ink); } .single-product .m3c-form__field input, .single-product .m3c-form__field textarea { width: 100%; padding: 0.8rem 0.9rem; font-family: var(--m3c-font); font-size: 1rem; color: var(--m3c-ink-strong); background: #fff; border: 1px solid var(--m3c-line); border-radius: var(--m3c-radius-input); box-shadow: none; } .single-product .m3c-form__field input:focus, .single-product .m3c-form__field textarea:focus { outline: 2px solid var(--m3c-ink); outline-offset: 1px; border-color: var(--m3c-ink); } .single-product .m3c-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .single-product .m3c-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.375rem; padding: 1rem 1.75rem; font-family: var(--m3c-font); font-size: 1rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; background: var(--m3c-ink-strong); border: 0; border-radius: var(--m3c-radius-btn); cursor: pointer; transition: background-color 0.15s ease, transform 0.15s ease; } .single-product .m3c-btn--full { width: 100%; } .single-product .m3c-btn:hover, .single-product .m3c-btn:focus { background: #000; transform: translateY(-1px); } .single-product .m3c-notice { margin: 0 0 1.25rem; padding: 0.8rem 1rem; border-radius: var(--m3c-radius-btn); font-size: 0.9375rem; } .single-product .m3c-notice--ok { background: #e8f5ee; color: #17603c; border: 1px solid #b6dcc7; } .single-product .m3c-notice--ko { background: #fdecec; color: #8a2020; border: 1px solid #f0c2c2; } /* ------------------------------------------------------------------ * * 13. Sticky add-to-cart — réutilise la barre native de Storefront * ------------------------------------------------------------------ */ .single-product .storefront-sticky-add-to-cart { font-family: var(--m3c-font); } .single-product .storefront-sticky-add-to-cart__content-title { font-size: 0; line-height: 1.25; } .single-product .storefront-sticky-add-to-cart__content-title strong { font-size: 0.9375rem; font-weight: 600; color: var(--m3c-ink-strong); } .single-product .storefront-sticky-add-to-cart__content-price { opacity: 1; font-weight: 700; color: var(--m3c-ink-strong); } .single-product .storefront-sticky-add-to-cart__content-button.button.alt { background-color: var(--m3c-ink-strong); color: #fff; border: 0; border-radius: var(--m3c-radius-btn); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; padding: 0.9rem 1.5rem; } .single-product .storefront-sticky-add-to-cart__content-button.button.alt:hover, .single-product .storefront-sticky-add-to-cart__content-button.button.alt:focus { background-color: #000; color: #fff; } @media (max-width: 767px) { .single-product .storefront-sticky-add-to-cart { display: block; position: fixed; top: auto !important; bottom: 0; left: 0; right: 0; z-index: 99998; margin: 0; padding: 0.625rem 0.75rem; padding-bottom: calc(0.625rem + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid var(--m3c-line); box-shadow: 0 -6px 20px rgba(23, 21, 29, 0.14); animation: none !important; transform: translate3d(0, 105%, 0); transition: transform 0.28s ease; } .single-product .storefront-sticky-add-to-cart--slideInDown { transform: translate3d(0, 0, 0); } .single-product .storefront-sticky-add-to-cart--slideOutUp { transform: translate3d(0, 105%, 0); } .single-product .storefront-sticky-add-to-cart .col-full { padding: 0; margin: 0; max-width: none; } .single-product .storefront-sticky-add-to-cart__content { gap: 0.625rem; } .single-product .storefront-sticky-add-to-cart img { max-width: 2.75rem; margin: 0; border-radius: var(--m3c-radius-btn); } .single-product .storefront-sticky-add-to-cart__content-price { margin-right: 0; font-size: 0.9375rem; } .single-product .storefront-sticky-add-to-cart__content-button.button.alt { padding: 0.85rem 1.15rem; white-space: nowrap; } /* Une seule barre fixe à la fois. */ .single-product .storefront-handheld-footer-bar { display: none; } } /* ------------------------------------------------------------------ * * 14. Réglages fins mobile * ------------------------------------------------------------------ */ @media (max-width: 767px) { .single-product div.product .summary { margin-top: 1.25rem; } .single-product .woocommerce-product-gallery .flex-control-thumbs { display: flex; gap: 0.5rem; margin: 0.75rem 0 0; padding: 0; list-style: none; } .single-product .woocommerce-product-gallery .flex-control-thumbs li { flex: 0 0 22%; margin: 0; list-style: none; } .single-product .m3c-trust { gap: 0.25rem; } } @media (prefers-reduced-motion: reduce) { .single-product .storefront-sticky-add-to-cart, .single-product .m3c-acc__chevron, .single-product .m3c-btn, .single-product div.product form.cart .single_add_to_cart_button.button.alt { transition: none; } } /* ------------------------------------------------------------------ * * 15. Accent produit — pilote liens, titres, accordéons, soulignements * ------------------------------------------------------------------ */ .single-product .m3c-band a, .single-product div.product .summary a, .single-product .woocommerce-tabs a { color: var(--m3c-accent); text-decoration-color: color-mix(in srgb, var(--m3c-accent) 45%, transparent); text-underline-offset: 3px; } .single-product .m3c-band a:hover, .single-product div.product .summary a:hover { color: var(--m3c-accent-hover); } /* Soulignement court sous les titres de section. */ .single-product .m3c-section-title { position: relative; padding-bottom: 0.85rem; } .single-product .m3c-section-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 3.25rem; height: 4px; border-radius: 2px; background: var(--m3c-accent); } /* Petite puce d'accent au-dessus des titres de bloc. */ .single-product .m3c-feature__heading::before { content: ""; display: block; width: 2.5rem; height: 4px; margin-bottom: 1rem; border-radius: 2px; background: var(--m3c-accent); } /* Accordéons : filet d'accent sur l'entrée ouverte. */ .single-product .m3c-acc { border-left: 3px solid transparent; padding-left: 0; transition: border-color 0.18s ease, padding-left 0.18s ease; } .single-product .m3c-acc[open] { border-left-color: var(--m3c-accent); padding-left: 0.9rem; } .single-product .m3c-acc[open] .m3c-acc__q { color: var(--m3c-accent); } .single-product .m3c-acc[open] .m3c-acc__chevron { color: var(--m3c-accent); } .single-product .m3c-tcard__stars { color: var(--m3c-accent); } .single-product .m3c-form__field input:focus, .single-product .m3c-form__field textarea:focus { outline-color: var(--m3c-accent); border-color: var(--m3c-accent); } .single-product .m3c-btn { background: var(--m3c-accent); color: var(--m3c-accent-text); } .single-product .m3c-btn:hover, .single-product .m3c-btn:focus { background: var(--m3c-accent-hover); color: var(--m3c-accent-text); } /* Le prix barré prend le charbon, le prix courant reste dominant. */ .single-product div.product .summary p.price ins { text-decoration: none; font-weight: 700; } /* ------------------------------------------------------------------ * * 16. Bande sombre — le moment fort de la page * ------------------------------------------------------------------ */ .single-product .m3c-band--dark { background: var(--m3c-dark); color: rgba(255, 255, 255, 0.72); box-shadow: 0 0 0 100vmax var(--m3c-dark); clip-path: inset(0 -100vmax); } .single-product .m3c-band--dark .m3c-feature__heading { color: #fff; } .single-product .m3c-band--dark .m3c-feature__text { color: rgba(255, 255, 255, 0.7); } /* * L'image porte seule la lumière : fond transparent et halo diffus tiré de * l'accent du produit, pour prolonger la lueur au-delà du cadre. */ .single-product .m3c-band--dark .m3c-feature__img { background: transparent; box-shadow: 0 0 90px -10px color-mix(in srgb, var(--m3c-accent) 55%, transparent); } .single-product .m3c-band--dark .m3c-feature__heading::before { background: var(--m3c-accent); } /* ------------------------------------------------------------------ * * 17. Densité et impact — titres plus grands, images plein cadre * ------------------------------------------------------------------ */ .single-product div.product .summary .product_title { font-size: clamp(2.15rem, 1.1rem + 3.2vw, 3.25rem); line-height: 1.04; letter-spacing: -0.025em; } .single-product .m3c-section-title { font-size: clamp(1.7rem, 1rem + 2.4vw, 2.5rem); letter-spacing: -0.025em; } .single-product .m3c-feature__heading { font-size: clamp(1.55rem, 1rem + 2vw, 2.35rem); line-height: 1.08; letter-spacing: -0.025em; } .single-product .m3c-feature__text { font-size: 1.125rem; line-height: 1.65; } .single-product div.product .summary p.price { font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.25rem); } .single-product .m3c-feature__img { border-radius: var(--m3c-radius-media); aspect-ratio: 4 / 5; object-fit: cover; } @media (min-width: 768px) { .single-product .m3c-feature .m3c-band__inner { gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .single-product .m3c-feature__img { aspect-ratio: 1 / 1; } } /* ------------------------------------------------------------------ * * 18. Corrections issues de la comparaison écran à écran * ------------------------------------------------------------------ */ /* 18.1 — Galerie plein cadre sur mobile. * calc(50% - 50vw) annule les marges du conteneur sans recourir à une * transformation, qui perturberait le zoom natif de WooCommerce. */ @media (max-width: 767px) { .single-product div.product > .woocommerce-product-gallery { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .single-product .woocommerce-product-gallery img { border-radius: 0; } .single-product .woocommerce-product-gallery .flex-control-thumbs { padding: 0 1.25rem; margin-top: 0.85rem; } .single-product .woocommerce-product-gallery .flex-control-thumbs img { border-radius: 6px; } /* Mêmes règles pour les visuels de bloc : ils occupent la largeur de l'écran. */ .single-product .m3c-feature__media { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .single-product .m3c-feature__img { border-radius: 0; } } /* 18.2 — Hiérarchie des deux boutons. * Le bouton d'achat garde l'aplat d'accent ; « Buy It Now » passe en contour. * Son libellé utilise la teinte assombrie, sans quoi un accent clair serait * illisible sur blanc. */ .single-product .m3c-buynow { background: transparent; color: var(--m3c-accent-ink); border: 2px solid var(--m3c-accent-ink); } .single-product .m3c-buynow:hover, .single-product .m3c-buynow:focus { background: var(--m3c-accent-ink); color: #fff; } /* 18.3 — Prix : l'actuel prend l'accent, le barré s'efface. */ .single-product div.product .summary p.price ins, .single-product div.product .summary p.price > .amount { color: var(--m3c-accent-ink); font-weight: 700; } .single-product div.product .summary p.price del { color: #a8a5b0; opacity: 1; font-weight: 500; } /* 18.4 — Quantité masquée : le champ reste dans le formulaire et vaut 1. * La quantité se règle depuis le panier. */ .single-product div.product form.cart .quantity { display: none; } /* 18.5 — En-tête plus discret, badge de promotion posé sur la galerie. */ .single-product .site-header .site-title { font-size: 1.35rem; line-height: 1.2; margin: 0; } .single-product .site-header .site-title a { color: var(--m3c-ink-strong); text-decoration: none; } .single-product div.product { position: relative; } .single-product div.product > .onsale { position: absolute; top: 0.9rem; left: 0.9rem; z-index: 3; min-height: 0; min-width: 0; margin: 0; padding: 0.3rem 0.7rem; font-family: var(--m3c-font); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; line-height: 1.4; color: var(--m3c-accent-text); background: var(--m3c-accent); border-radius: 4px; } /* 18.6 — Zone d'avis. * Tant qu'il n'y a qu'un seul onglet, la barre d'onglets n'apporte rien et * produit un doublon de titre. On la masque — mais uniquement dans ce cas, * détecté par :has(). Si un onglet Description réapparaît, la barre revient * d'elle-même et le comportement natif reprend. */ .single-product div.product .woocommerce-tabs:has(.tabs li:only-child) > .tabs { display: none; } .single-product div.product .woocommerce-tabs:has(.tabs li:only-child) .woocommerce-Tabs-panel { display: block !important; } .single-product div.product .woocommerce-tabs { padding-top: clamp(2rem, 5vw, 3rem); } .single-product .woocommerce-Tabs-panel { padding-top: 0; } .single-product .woocommerce-Reviews-title { position: relative; font-family: var(--m3c-font); font-size: clamp(1.7rem, 1rem + 2.4vw, 2.5rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; margin: 0 0 1.5rem; padding-bottom: 0.85rem; color: var(--m3c-ink-strong); } .single-product .woocommerce-Reviews-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 3.25rem; height: 4px; border-radius: 2px; background: var(--m3c-accent); } .single-product .woocommerce-noreviews { margin: 0 0 1.5rem; color: var(--m3c-muted); } /* Le dernier item de FAQ ne doit pas laisser un vide avant les avis. */ .single-product .m3c-faq { padding-bottom: 0; } /* 18.7 — Accordéons : case cochée à gauche, comme la référence. */ .single-product .m3c-acc__check { flex: 0 0 auto; width: 20px; height: 20px; margin-right: 0.75rem; color: var(--m3c-accent-ink); } .single-product .m3c-acc__label { flex: 1 1 auto; min-width: 0; } /* 18.8 — Bloc de preuve sociale. * Les valeurs proviennent de WooCommerce : zéro avis affiche cinq étoiles vides * et des zéros, sans rien inventer. */ .single-product .m3c-proof { margin: 0 0 1.1rem; } .single-product .m3c-proof__rating { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.3rem; font-size: 0.9375rem; font-weight: 600; color: var(--m3c-ink); } .single-product .m3c-proof__stars { display: inline-flex; gap: 1px; color: #e8a020; } .single-product .m3c-star { width: 17px; height: 17px; stroke-width: 1.5; fill: none; } .single-product .m3c-star.is-on { fill: currentColor; } .single-product .m3c-proof__sep { color: var(--m3c-line); font-weight: 400; } .single-product .m3c-proof__count { font-weight: 500; color: var(--m3c-muted); } .single-product .m3c-proof__sales { margin: 0; font-size: 0.9375rem; font-weight: 500; color: var(--m3c-muted); } .single-product .m3c-proof__sales strong { color: var(--m3c-ink-strong); font-weight: 700; } /* Les étoiles des cartes de témoignage restent pleines. */ .single-product .m3c-tcard__stars .m3c-star.is-on { fill: currentColor; }