/* * Fiche produit — excel-exercice.com * Fichier : woocommerce-produit.css · v1.5.0 (21/08/2026) * * v1.5.0 — Chantier « harmonisation des couleurs » (Fred, capture à l’appui) : * 1. LE BOUTON D’ACHAT prend l’ambre de la charte. Il était en #d8951b avec une * ombre grise et en Arial : c’était le SEUL bouton d’achat du site à ne pas * ressembler aux autres. Sur la boutique juste avant, le même geste est en * #8F6316 plat — le visiteur passait d’un bouton à l’autre en 1 clic. * Taille, largeur et arrondi INCHANGÉS (ils plaisent à Fred) : seule la * couleur, l’ombre et la police changent. Section 4. * 2. LE BANDEAU NOIR « Description » disparaît quand il est seul. Section 6. * * v1.4.1 — Bouton d’achat : liseré 1px #a76c21 (ambre) à la place du 2px vert. * v1.4.0 — Bouton d’achat : habillage réglé par Fred (orange #d8951b, liseré vert, * Arial 19px), rapatrié depuis Themify sur un sélecteur STABLE. Détail section 4. * * v1.3.0 — Produits liés : contenu centré, titre 14,5px et prix 17px (ces vignettes * sont une suggestion, elles ne doivent pas concurrencer le produit consulté). * Le libellé « Related Products » vient du GABARIT Themify « ProduitWooCommerce » * (page 44089), pas d'une chaîne traduisible : Fred l'a corrigé dans le Builder. * * v1.2.0 — Encadré de la description longue (réglage de Fred, généralisé à TOUTES les * fiches) + habillage des produits liés selon la charte (bouton ambre, prix Inter). * * v1.1.0 — Retours de Fred après mise en ligne : marge de 132px sous l'en-tête * supprimée, titre porté à 36px, espace rétabli entre le titre et la description. * ⚠️ Les règles de mise en page qui visent un conteneur `.module-*` du Builder * restent SANS EFFET (padding et marge ignorés, vérifié en direct) : il faut viser * l'élément à l'intérieur — d'où les `!important` sur le h1 plutôt que sur le module. * Chargé UNIQUEMENT sur une fiche produit, via le snippet 105 (is_product()). * Thème enfant : infinite-child * * POURQUOI CE FICHIER EXISTE * Jusqu'au 18/08/2026, la fiche produit était la SEULE page marchande sans CSS dédié * (la boutique, le panier et /mon-compte/ en avaient un). Elle héritait donc des * réglages génériques de Themify : texte à 19px, interligne 35px, 19px entre chaque * puce, prix à 20,9px (à peine plus gros que le texte) en alignement « justify », * image de 542px sans arrondi ni ombre. Constaté et mesuré avec Fred. * * ⚠️ ARCHITECTURE : la fiche est rendue par les MODULES Themify Builder Pro, dans cet * ordre en colonne de droite : * .module-product-title → .module-product-description → .module-product-price * → .module-add-to-cart → .module-product-rating * L'image est dans une colonne à gauche (.module-product-image). * * COULEUR DU BOUTON : ambre #8F6316 — la charte réserve l'ambre à l'ACHAT et le vert * au gratuit/apprentissage (VALIDATED §Règle couleurs). Choix confirmé par Fred le * 18/08/2026, alors que le bouton était en vert #125912. */ /* ── Tokens : branchés sur la charte, valeur de secours après la virgule ───────── */ :root{ --pr-ink: var(--c-ink, #0e1814); --pr-text: var(--c-text, #36443e); --pr-muted: var(--c-muted, #677571); --pr-border: var(--c-border, #d4dcd7); --pr-btn: var(--c-btn, #8F6316); --pr-btn-h: var(--c-btn-hover, #7B5513); --pr-xls: var(--t-xls, #107C41); } /* ════════════════════════════════════════════════════════ 0. RESPIRATION GÉNÉRALE — la page démarrait 140px sous l'en-tête ════════════════════════════════════════════════════════ */ /* Le Builder posait `margin-top:132px` sur chaque rangée : le fil d'Ariane flottait très bas, et toute la page était poussée vers le bas (constaté par Fred, 18/08). */ body.single-product .module_row{margin-top:26px!important} /* ════════════════════════════════════════════════════════ 1. IMAGE — plus petite, arrondie, avec une ombre douce ════════════════════════════════════════════════════════ */ body.single-product .module-product-image, body.single-product .woocommerce-product-gallery{ max-width:380px;margin-left:auto;margin-right:auto } /* ⚠️ !important sur l'ombre et l'arrondi : le thème pose ses propres règles sur les images de galerie et gagnait la main. */ body.single-product .woocommerce-product-gallery__image img, body.single-product .woocommerce-product-gallery img{ border-radius:14px!important; border:1px solid var(--pr-border); box-shadow:0 14px 30px -12px rgba(19,32,26,.28)!important; background:#fff } /* ════════════════════════════════════════════════════════ 2. TEXTES — respiration normale (on descend de 19px à 16.5px) ════════════════════════════════════════════════════════ */ /* Titre : 36px (le thème le laissait à 27px, à peine plus gros que le texte). ⚠️ MARGE DU BAS = 42px pour n'en voir que ~23 : le Builder pose un `margin-top:-19px` sur le module de description juste dessous, et les deux marges FUSIONNENT. Ne pas « corriger » ce 42 en le trouvant trop grand — c'est 42 − 19. */ body.single-product .module-product-title h1, body.single-product h1.product_title{ font-size:36px!important;line-height:1.18!important;margin:0 0 42px!important; color:var(--pr-ink);font-weight:800;text-decoration:none } body.single-product .module-product-description, body.single-product .woocommerce-product-details__short-description, body.single-product .woocommerce-Tabs-panel{ font-size:16.5px;line-height:1.62;color:var(--pr-text);text-align:left } body.single-product .woocommerce-Tabs-panel h3{ font-size:19px;line-height:1.3;font-weight:800;color:var(--pr-ink); margin:26px 0 8px } body.single-product .woocommerce-Tabs-panel h3:first-child{margin-top:0} body.single-product .woocommerce-Tabs-panel p, body.single-product .module-product-description p{margin:0 0 12px} /* Listes : c'était le pire — 35px d'interligne et 19px entre chaque puce. */ body.single-product .module-product-description ul, body.single-product .woocommerce-product-details__short-description ul, body.single-product .woocommerce-Tabs-panel ul{ margin:0 0 14px;padding-left:22px;list-style:none } body.single-product .module-product-description li, body.single-product .woocommerce-product-details__short-description li, body.single-product .woocommerce-Tabs-panel li{ position:relative; font-size:16.5px;line-height:1.55; margin:0 0 6px!important;padding-left:4px } /* Puce ronde verte, à la place de la puce par défaut. */ body.single-product .module-product-description li::before, body.single-product .woocommerce-product-details__short-description li::before, body.single-product .woocommerce-Tabs-panel li::before{ content:"";position:absolute;left:-16px;top:.62em; width:6px;height:6px;border-radius:50%;background:var(--pr-xls) } /* ════════════════════════════════════════════════════════ 3. PRIX — gros, en gras, CENTRÉ juste au-dessus du bouton ════════════════════════════════════════════════════════ */ body.single-product .module-product-price, body.single-product .summary .price{ text-align:center!important; /* annule le `justify` hérité du thème */ margin:18px 0 12px } /* ⚠️ !important : Themify pose `font-size:1.1em` sur p.price (= 20,9px, à peine plus que le texte courant). Sans lui, le prix reste minuscule. */ body.single-product .module-product-price p.price, body.single-product .module-product-price .price, body.single-product .module-product-price .woocommerce-Price-amount, body.single-product .summary p.price, body.single-product .summary span.price{ display:block; font-family:var(--c-font-title,Inter,system-ui,sans-serif); font-size:34px!important;line-height:1.1!important;font-weight:800!important; color:var(--pr-ink);text-align:center!important } body.single-product .price .woocommerce-Price-currencySymbol{font-size:.66em!important;font-weight:700} /* Mention sous le prix : pas de récurrence à afficher, ce sont des paiements uniques. */ body.single-product .price del{opacity:.45;font-size:.6em;font-weight:600;margin-right:8px} /* ════════════════════════════════════════════════════════ 4. BOUTON D'ACHAT — ambre de la charte, large et centré ════════════════════════════════════════════════════════ */ body.single-product .module-add-to-cart{text-align:center} body.single-product form.cart{text-align:center} /* Largeur : le bouton épouse son formulaire (232px, largeur imposée par le thème). Une min-width plus grande le faisait DÉBORDER à droite — il n'était alors plus aligné avec le prix, ce que Fred a vu tout de suite. */ /* ⚠️ v1.4.0 (18/08/2026) — HABILLAGE RÉGLÉ PAR FRED, RAPATRIÉ ICI. Fred a mis au point ce bouton directement dans Themify, avec ce sélecteur : .themify_builder_content-44089 .tb_c7cp802.module-add-to-cart .button ⛔ NE JAMAIS GARDER UN SÉLECTEUR DE CETTE FORME. Deux pièges, tous deux vérifiés cette nuit sur d'autres pages : · `tb_c7cp802` est un nom fabriqué par Themify. Il le REGÉNÈRE à la moindre modification de la page, et le style saute sans prévenir. · `44089` désigne UNE fiche produit. Les 14 autres produits n'auraient jamais eu ce bouton. → Le style est conservé à l'identique, posé sur le sélecteur stable ci-dessous : il s'applique à TOUTES les fiches produit et survit à Themify. Rien à refaire le jour où le Builder renumérote. */ body.single-product .single_add_to_cart_button, body.single-product button.single_add_to_cart_button.alt{ display:inline-block;min-width:0!important;width:100%!important;box-sizing:border-box; padding:14px 2.5em 12px!important; background-color:var(--c-btn,#8F6316)!important;color:#fff!important; border:1px solid var(--c-btn,#8F6316)!important;border-radius:var(--r-sm,10px)!important; font-family:var(--font-text,'Inter',system-ui,sans-serif); font-size:19px!important;line-height:100%;text-transform:none; box-shadow:none!important;font-weight:700!important; transition:background .15s ease,transform .15s ease } body.single-product .single_add_to_cart_button:hover{ background-color:var(--c-btn-hover,#7B5513)!important;border-color:var(--c-btn-hover,#7B5513)!important;transform:translateY(-1px) } /* Champ quantité : inutile pour un accès nominatif, on le neutralise visuellement. */ body.single-product form.cart .quantity{margin-right:10px} /* ════════════════════════════════════════════════════════ 5. BOÎTE DE LA DESCRIPTION LONGUE — encadré crème sur fond blanc ════════════════════════════════════════════════════════ Réglage trouvé par Fred le 18/08/2026. Sa version d'origine visait `.themify_builder_content-44089 .tb_e654821` : l'identifiant de CETTE page et une classe générée par le Builder — donc inopérante sur les autres fiches produit, et perdue à la moindre régénération du layout. Reprise ici en version universelle. */ body.single-product .module-product-reviews{ margin-bottom:2em; padding:26px 4%; background:#fff; border:2px solid #bcad82; border-radius:10px; box-shadow:5px 5px 3px 0 rgb(227 218 197 / 77%) } /* ════════════════════════════════════════════════════════ 6. PRODUITS LIÉS — charte, et plus d'anglais ════════════════════════════════════════════════════════ */ body.single-product .module-related-products{margin-top:34px} /* Titre de la section : « RELATED PRODUCTS » est traduit côté PHP (snippet 105). Ici on ne fait que l'habiller. */ /* ⚠️ Sélecteur DESCENDANT : le titre n'est pas un enfant direct du module, il est emballé dans `.related.tbp_posts_wrap` par le gabarit Themify. Un `>` ne matche pas. */ body.single-product .module-related-products .related h2, body.single-product .module-related-products h2, body.single-product .related.products h2{ font-family:var(--c-font-title,Inter,system-ui,sans-serif); font-size:22px!important;font-weight:800;text-transform:none!important;letter-spacing:0; color:var(--pr-ink);margin:0 0 18px } /* Carte centrée et texte plus discret (demande Fred, 18/08) : ces vignettes sont une suggestion, elles ne doivent pas concurrencer le produit consulté. */ body.single-product .module-related-products li.product{ background:#fff;border:1px solid var(--pr-border);border-radius:12px; padding:16px;box-shadow:0 8px 20px -14px rgba(19,32,26,.35); text-align:center!important } body.single-product .module-related-products li.product img{ border:1px solid var(--pr-border);border-radius:10px;background:#fff } body.single-product .module-related-products li.product .woocommerce-loop-product__title{ font-size:14.5px!important;line-height:1.35;font-weight:700;color:var(--pr-ink); margin:12px 0 6px;text-align:center!important } body.single-product .module-related-products li.product .price{ display:block; font-family:var(--c-font-title,Inter,system-ui,sans-serif); font-size:17px!important;font-weight:800!important;color:var(--pr-ink)!important; text-align:center!important } /* Bouton ambre, comme partout ailleurs — il était vert. */ body.single-product .module-related-products li.product a.button{ background:var(--pr-btn)!important;color:#fff!important;border:0!important; border-radius:9px!important;padding:11px 16px!important; font-family:var(--c-font-title,Inter,system-ui,sans-serif); font-size:12px!important;font-weight:800;letter-spacing:.03em;text-transform:uppercase; display:inline-block;float:none!important } body.single-product .module-related-products li.product a.button:hover{ background:var(--pr-btn-h)!important } /* ⚠️ Même piège que sur la boutique : pour un VISITEUR, l'image, le titre et le prix sont DANS le lien produit, alors qu'ils en sont les frères en admin. Sans cette règle, la carte redeviendrait invisible pour les clients. */ body.single-product .module-related-products li.product a.woocommerce-loop-product__link:has(img){ display:block!important;position:static;inset:auto; font-size:inherit;line-height:inherit;color:inherit } /* ════════════════════════════════════════════════════════ 7. DÉTAILS ════════════════════════════════════════════════════════ */ /* Notation vide : n'affiche pas une coquille sans avis. */ body.single-product .module-product-rating:empty{display:none} /* Fil d'Ariane discret. */ body.single-product .module-woocommerce-breadcrumb{font-size:13px;color:var(--pr-muted)} /* ── Responsive ────────────────────────────────────────── */ @media(max-width:780px){ body.single-product .module-product-image, body.single-product .woocommerce-product-gallery{max-width:320px} body.single-product .module-product-title h1, body.single-product h1.product_title{font-size:25px} body.single-product .module-product-price .price, body.single-product .summary p.price{font-size:30px} body.single-product .single_add_to_cart_button{padding:14px 20px!important} } /* ════════════════════════════════════════════════════════ 6. ONGLET « DESCRIPTION » EN DOUBLE — 21/08/2026 ═════════════════════════════════════════════════════ POURQUOI (Fred, 21/08/2026) : « je me retrouve encore avec un bandeau description, puis encore en dessous description. Il y a une redondance. » Ce qu il voyait, mesuré dans le HTML de la fiche : ← le bandeau noir

Description

… Un système d onglets à UN SEUL onglet ne sert à rien : il n y a nulle part où aller, il ne fait qu annoncer le titre qui suit. Les avis clients étant désactivés, cet onglet est seul sur toutes les fiches. On garde le TITRE (il est aux couleurs du site) et on retire le BANDEAU. ⚠ li:only-child est volontaire : le jour où les avis clients seront réactivés, il y aura DEUX onglets — la barre réapparaîtra toute seule et restera cliquable. Rien à se rappeler. */ body.single-product .woocommerce-tabs ul.tabs:has(li:only-child){ display:none!important } /* Filet pour un navigateur sans :has() — le bandeau reste, mais discret. */ body.single-product .woocommerce-tabs ul.tabs li a{ background:transparent!important; color:var(--pr-ink,#0e1814)!important; font-family:var(--font-text,'Inter',system-ui,sans-serif)!important; font-weight:700!important } /* Le titre du panneau reprend la taille d un titre de SECTION : il s affichait à la taille d un titre de PAGE alors qu il coiffe deux lignes de texte. */ body.single-product .woocommerce-Tabs-panel h2{ font-family:var(--font-text,'Inter',system-ui,sans-serif)!important; font-size:22px!important;font-weight:800!important; color:var(--pr-ink,#0e1814)!important; margin:0 0 14px!important }