/* ============================================================ PRÉPARATEUR.E46 — LA FICHE PRODUIT L'habillage complet, posé le 21/08/2026. Le squelette précédent ne faisait que deux choses (fond carbone + titre blanc) en attendant cette étape. ⚠ Ce que cette feuille doit tenir, et pourquoi : - La fiche est le point d'arrivée de la publicité. Tout ce qui n'aide pas à décider est du bruit : on habille la zone d'achat et les blocs de preuve, on ne décore pas. - Fond CARBONE, comme un habitacle de nuit. Donc : jamais de texte posé nu sur le fond — chaque bloc de communication vit dans une PLAQUE (leçon de groupe : « sinon c'est écrit sur la nappe »). - L'or ne sert qu'aux accents et aux prix. Un or en aplat vire au jaune sale sur du carbone. ============================================================ */ body.single-product{ background:var(--pe-carbone); color:var(--pe-blanc-doux); } /* ── 1. LA ZONE D'ACHAT ────────────────────────────────────────────────── */ .product_title{ color:var(--pe-blanc); margin-bottom:.4rem; } .woocommerce div.product .woocommerce-product-details__short-description{ color:var(--pe-blanc-doux); font-size:1.06rem; line-height:1.6; margin-bottom:1.4rem; } /* Le prix : c'est un chiffre qu'on cherche des yeux, il doit se trouver seul. */ .woocommerce div.product p.price, .woocommerce div.product span.price{ color:var(--pe-or-clair); font-family:'Barlow Condensed', sans-serif; font-weight:600; font-size:clamp(2rem, 4.5vw, 2.8rem); font-variant-numeric:tabular-nums; line-height:1.1; margin:.2rem 0 1rem; } /* Les sélecteurs de variante. Un . Avec nos 11,5 px de padding et une interligne de 26 px, le contenu fait 49 px : le libellé « Choisir une option » sortait COUPÉ EN DEUX. Constaté à l'écran le 21/08, pas déduit. On rend la hauteur au contenu et on garde un minimum confortable au doigt. */ height:auto; min-height:48px; line-height:1.25; appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--pe-or) 50%), linear-gradient(135deg,var(--pe-or) 50%,transparent 50%); background-position:calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px); background-size:6px 6px, 6px 6px; background-repeat:no-repeat; } .woocommerce div.product form.cart .variations select:focus-visible{ outline:2px solid var(--pe-or-clair); outline-offset:2px; } .woocommerce div.product .woocommerce-variation-price{ margin-bottom:.8rem; } /* Le verdict de compatibilité : ici, c'est l'information qui décide l'achat. */ body.single-product .pe-compat{ font-size:.98rem; margin:.8rem 0; } /* ── 2. LES ONGLETS ──────────────────────────────────────────────────────── La description remonte dans le corps de page (voir §3) : l'onglet « Description » ferait doublon. On garde la mécanique WooCommerce, on la rend simplement lisible sur fond sombre pour les onglets qui restent. */ .woocommerce div.product .woocommerce-tabs ul.tabs{ border-bottom:1px solid rgba(255,255,255,.09); } .woocommerce div.product .woocommerce-tabs ul.tabs::before{ border:0; } .woocommerce div.product .woocommerce-tabs ul.tabs li{ background:transparent; border:0; border-radius:0; } .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after{ display:none; } .woocommerce div.product .woocommerce-tabs ul.tabs li a{ color:var(--pe-blanc-doux); font-family:'Barlow Condensed', sans-serif; text-transform:uppercase; letter-spacing:.12em; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a{ color:var(--pe-or-clair); box-shadow:inset 0 -2px 0 var(--pe-or); } .woocommerce div.product .woocommerce-tabs .panel{ color:var(--pe-blanc-doux); } /* ── 3. LES BLOCS DE LA FICHE — les plaques ──────────────────────────────── Chaque bloc est une plaque d'instrument : anthracite mat, filet doré fin, intitulé doré en capitales espacées. C'est le même vocabulaire que le fil et les pages-modèles, pour que la fiche ne ressemble pas à une pièce rapportée. */ .pe-f{ max-width:78ch; margin:2.6rem auto 0; padding:0 1rem; } .pe-f > * + *{ margin-top:1.5rem; } .pe-f-plaque{ background:linear-gradient(168deg, var(--pe-anthracite) 0%, #191c1f 100%); border:1px solid rgba(255,255,255,.07); border-top:2px solid var(--pe-or); border-radius:12px; padding:1.7rem clamp(1.1rem, 3vw, 2rem) 1.9rem; box-shadow:0 14px 34px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05); } .pe-f-oeil{ display:block; font-family:'Barlow Condensed', sans-serif; font-size:.78rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--pe-or); margin-bottom:.5rem; } .pe-f h2{ color:var(--pe-blanc); font-size:clamp(1.5rem, 3.2vw, 2.05rem); margin:0 0 .9rem; } .pe-f h3{ color:var(--pe-blanc); font-size:clamp(1.15rem, 2.2vw, 1.35rem); margin:1.4rem 0 .5rem; } .pe-f p{ color:var(--pe-blanc-doux); margin:0 0 .9rem; } .pe-f p:last-child{ margin-bottom:0; } .pe-f strong{ color:var(--pe-blanc); font-weight:600; } /* L'accroche qui porte l'axe de la maison. Pas une citation décorative : c'est la phrase que le visiteur doit retenir en repartant. */ .pe-f-axe{ font-family:'Barlow Condensed', sans-serif; font-size:clamp(1.5rem, 3.6vw, 2.2rem); font-weight:600; line-height:1.14; color:var(--pe-blanc); text-align:center; margin:0; } .pe-f-axe em{ color:var(--pe-or-clair); font-style:normal; } .pe-f-axe + .pe-f-sous{ text-align:center; margin-top:.7rem; color:var(--pe-blanc-doux); font-size:1rem; } /* ── LE COMPARATIF ── ⚠ Trois TYPES de produit, jamais trois marques nommées. Un comparatif qui cite un concurrent doit être objectif et vérifiable point par point (art. L.122-1) ; comparer des catégories dit la même chose sans s'exposer. */ .pe-f-tab-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; } .pe-f-tab{ width:100%; min-width:520px; border-collapse:collapse; font-size:.95rem; } .pe-f-tab th, .pe-f-tab td{ padding:.72rem .8rem; text-align:left; vertical-align:top; border-bottom:1px solid rgba(255,255,255,.07); } .pe-f-tab thead th{ font-family:'Barlow Condensed', sans-serif; text-transform:uppercase; letter-spacing:.08em; font-size:.82rem; color:var(--pe-blanc-doux); font-weight:600; border-bottom:1px solid rgba(201,148,14,.35); } .pe-f-tab thead th.pe-nous{ color:var(--pe-or-clair); } .pe-f-tab tbody th{ font-weight:400; color:var(--pe-blanc-doux); width:24%; } .pe-f-tab td{ color:var(--pe-blanc-doux); } .pe-f-tab td.pe-nous{ color:var(--pe-blanc); background:rgba(201,148,14,.07); box-shadow:inset 2px 0 0 var(--pe-or); } /* ── LA FAQ ──
natif : pas une ligne de JavaScript, et ça reste accessible au clavier et aux lecteurs d'écran, ce qu'un accordéon maison rate presque toujours. */ .pe-f-faq details{ border-bottom:1px solid rgba(255,255,255,.08); padding:.3rem 0; } .pe-f-faq details:last-of-type{ border-bottom:0; } .pe-f-faq summary{ cursor:pointer; list-style:none; padding:.85rem 2rem .85rem 0; position:relative; color:var(--pe-blanc); font-family:'Barlow Condensed', sans-serif; font-size:1.14rem; font-weight:600; } .pe-f-faq summary::-webkit-details-marker{ display:none; } .pe-f-faq summary::after{ content:''; position:absolute; right:.35rem; top:50%; width:9px; height:9px; margin-top:-6px; border-right:2px solid var(--pe-or); border-bottom:2px solid var(--pe-or); transform:rotate(45deg); transition:transform .18s ease; } .pe-f-faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; } .pe-f-faq summary:focus-visible{ outline:2px solid var(--pe-or-clair); outline-offset:3px; } .pe-f-faq details > p{ padding:0 0 1rem; } /* ── LA PLAGE DE COMPATIBILITÉ ── Le seul endroit de la fiche où l'on met des chiffres en avant : c'est ce que le propriétaire vérifie avant de payer. */ .pe-f-plage{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.9rem 0 0; padding:0; list-style:none; } .pe-f-plage li{ font-family:'Bebas Neue','Barlow Condensed',sans-serif; font-size:1.05rem; letter-spacing:.05em; font-variant-numeric:tabular-nums; color:var(--pe-blanc); background:rgba(255,255,255,.05); border:1px solid rgba(201,148,14,.3); border-radius:6px; padding:.3rem .68rem; } /* ── LA RÉASSURANCE ── Des faits repris des CGV, jamais une promesse plus large que ce qu'elles disent. Un chiffre affiché ici et démenti au checkout, c'est un litige. */ .pe-f-rassure{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:.9rem; margin:0; padding:0; list-style:none; } .pe-f-rassure li{ background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07); border-radius:9px; padding:.85rem .95rem; color:var(--pe-blanc-doux); font-size:.93rem; } .pe-f-rassure b{ display:block; color:var(--pe-blanc); font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:1.02rem; letter-spacing:.02em; margin-bottom:.15rem; } @media (max-width:600px){ .pe-f{ margin-top:2rem; } .pe-f-plaque{ border-radius:10px; } } /* ── L'ENGAGEMENT, sous le bouton d'achat ────────────────────────────────── Vert de confiance plutôt qu'or : l'or est déjà partout sur cette page, et c'est justement la seule ligne qui doit se détacher du décor. Le vert dit « c'est acquis », pas « c'est une offre ». */ .pe-engagement{ display:flex; gap:.55rem; align-items:baseline; margin:12px 0 0; padding:11px 14px; border-left:3px solid var(--pe-confiance); background:rgba(46,204,113,.07); border-radius:0 7px 7px 0; font-size:.88rem; line-height:1.5; color:rgba(243,243,243,.82); } .pe-engagement strong{ color:#F3F3F3; font-weight:600; } .pe-engagement span[aria-hidden]{ color:var(--pe-confiance); font-size:1rem; } /* ═══════════════════════════════════════════════════════════════════════════ RÉTRO-ÉCLAIRAGE DE LA PAGE DE VENTE — 22/08/2026 (demande Florient). ⚠ LE CONSTAT, mesuré et non supposé : la fiche reposait sur `--pe-carbone` (#121417) EN APLAT, luminance 20 sur 255, du premier au dernier pixel. Les plaques, à 31, s'en détachaient à peine. Une page qui vend à 141,90 € ne peut pas ressembler à un couloir de parking. ⚠ ON N'ÉCLAIRCIT PAS LE FOND, ON POSE DES SOURCES. Monter le noir vers le gris délave tout et détruit le contraste des textes blancs. Ce qui fait « éclairé », ce sont des halos chauds derrière les éléments — le contre-jour du clip. ⚠ ET LE DÉCOR RÉPÈTE LE PRODUIT : le capitonné en losanges, en CSS pur, est ici chez lui — c'est exactement ce qu'on vend. Discret (opacités sous 6 %) : plus lisible, il ferait nappe de restaurant au lieu de sellerie. ⚠ Bloc en TOUT BAS du fichier, à dessein. Toute retouche de l'ambiance de la fiche se fait ICI. Des réglages de fond empilés à plusieurs endroits finissent par se contredire en silence — leçon Gravano, déjà payée. ═══════════════════════════════════════════════════════════════════════════ */ body.single-product{ /* La même descente que le fil : cohérence d'une page à l'autre de la maison. */ background: linear-gradient(180deg, #343940 0%, /* la lumière de l'atelier */ #2A2E34 16%, #22262B 40%, #1A1D21 66%, #141619 88%, #0E1012 100%) /* l'habitacle de nuit */ fixed; } /* Le capitonné, derrière la colonne de contenu. Fondu vers le bas : la sellerie s'enfonce dans l'ombre à mesure qu'on descend. */ .pe-f{ position:relative; isolation:isolate; } .pe-f::before{ content:''; position:absolute; inset:-2rem -50vw; z-index:-2; pointer-events:none; background-image: repeating-linear-gradient( 45deg, rgba(255,255,255,.05) 0 1px, transparent 1px 64px), repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 1px, transparent 1px 64px), radial-gradient(circle at 0 0, rgba(201,148,14,.18) 0 1.6px, transparent 2.2px); background-size:auto, auto, 64px 64px; background-position:0 0, 0 0, 32px 32px; -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 8%, #000 52%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0%, #000 8%, #000 52%, transparent 100%); } /* Les plaques montent d'un cran et reçoivent leur contre-jour : une lueur dorée diffuse derrière la tranche haute, là où le filet d'or accroche déjà l'œil. */ .pe-f-plaque{ position:relative; background:linear-gradient(168deg, #262A30 0%, #1E2126 100%); border-color:rgba(255,255,255,.09); box-shadow: 0 16px 38px rgba(0,0,0,.45), 0 -1px 26px rgba(201,148,14,.10), /* le halo, au-dessus de la plaque */ inset 0 1px 0 rgba(255,255,255,.08); } /* La zone d'achat mérite sa propre lampe : c'est l'endroit où l'on décide. */ .woocommerce div.product .entry-summary{ position:relative; } .woocommerce div.product .entry-summary::before{ content:''; position:absolute; z-index:-1; inset:-6% -12% 40%; pointer-events:none; background:radial-gradient(ellipse at 50% 20%, rgba(255,255,255,.07) 0%, rgba(201,148,14,.11) 34%, transparent 70%); } /* Le texte gagne le contraste que le fond plus clair lui retire. */ .pe-f p{ color:rgba(243,243,243,.80); } .pe-f-tab td, .pe-f-tab tbody th{ color:rgba(243,243,243,.80); } /* La galerie posée sur un fond plus clair a besoin d'un bord, sinon ses visuels sur fond blanc flottent sans limite. */ .woocommerce div.product div.images img{ border-radius:10px; box-shadow:0 14px 34px rgba(0,0,0,.4); }