/* ========================================================================== 07 — FICHE PRODUIT, BLOCS ÉDITORIAUX, PIED DE PAGE Complète 04-woocommerce.css, qui traite la grille et les prix. Ici : la galerie, le choix de contenance, la réassurance, les onglets, la lettre d'information, les points de vente, le pied de page et la page 404. ========================================================================== */ /* -------------------------------------------------------------------------- 1. FICHE PRODUIT — MISE EN PAGE -------------------------------------------------------------------------- */ body.cp.single-product div.product { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, var(--cp-e-8)); align-items: start; } @media (max-width: 860px) { /* `minmax (0, 1fr)` et non `1fr` — corrige le 5 septembre 2026. `1fr` vaut `minmax (auto, 1fr)`, et une piste `auto` ne descend jamais sous la taille minimale de son contenu. Or FlexSlider pose des largeurs en pixels EN LIGNE sur les diapositives de la galerie : la piste prenait la largeur de la bande entiere, soit 1 406 px de galerie mesures dans une fenetre de 390. Le symptome etait de surcroit muet, `overflow-x: clip` absorbant le debordement. */ body.cp.single-product div.product { grid-template-columns: minmax(0, 1fr); } } body.cp.single-product div.product .woocommerce-product-gallery { width: auto; float: none; margin: 0; } body.cp.single-product div.product .summary { width: auto; float: none; margin: 0; } /* PAS DE `position: sticky` SUR LE RECAPITULATIF — teste puis retire le 5 septembre 2026. Mesure : le recapitulatif fait 1 035 px de haut. Sur un portable, la fenetre en fait 815. Un element colle plus haut que la fenetre ne peut pas coller son haut sans que son bas sorte de l'ecran : il glisse par-dessus ce qui suit, et c'est exactement ce qu'on voyait — titre, prix et contenances flottant au milieu de la description. Le confort visé (garder le bouton d'achat sous la main) ne s'obtient pas ainsi. S'il redevient un besoin, la bonne reponse est une barre d'achat basse sur mobile, pas un bloc colle plus grand que l'ecran. */ /* Les onglets et les produits liés reprennent toute la largeur, sous les deux colonnes. */ body.cp.single-product div.product .woocommerce-tabs, body.cp.single-product div.product .related, body.cp.single-product div.product .upsells { grid-column: 1 / -1; } /* Le `clear` d'OceanWP entre le resume et les onglets : sans objet en grille, et il y ouvrait une rangee vide. */ body.cp.single-product div.product > .clear-after-summary { display: none; } /* L'etiquette de famille, posee au-dessus du titre par `cocopassion-eshop.php`. C'est elle qui amene la couleur sur la fiche, et elle ramene vers la famille la ou le fil d'Ariane ramene vers « Tous les produits », c'est-a-dire vers les soixante. */ body.cp.single-product div.product .summary > .cp-etiquette-famille { margin-bottom: var(--cp-e-3); } /* --- LE BLOC DES VARIATIONS -------------------------------------------------- WooCommerce sort les variations dans un ``, une ligne par attribut. Sur un attribut unique — c'est le cas partout ici — le tableau ne sert qu'a poser un `` mesurait 193 px pour 120 px de contenu. On le repasse en blocs, l'intitule au-dessus. -------------------------------------------------------------------------- */ body.cp.single-product div.product form.cart .variations, body.cp.single-product div.product form.cart .variations tbody, body.cp.single-product div.product form.cart .variations tr, body.cp.single-product div.product form.cart .variations th, body.cp.single-product div.product form.cart .variations td { display: block; width: auto; padding: 0; border: 0; text-align: left; } body.cp.single-product div.product form.cart .variations { margin-bottom: var(--cp-e-5); } body.cp.single-product div.product form.cart .variations th.label { font-family: var(--cp-font-mono); font-size: var(--cp-t-xs); font-weight: 500; letter-spacing: var(--cp-ls-surtitre); text-transform: uppercase; color: var(--cp-texte-doux); margin-bottom: var(--cp-e-3); } body.cp.single-product div.product form.cart .variations th.label label { margin: 0; font: inherit; color: inherit; } body.cp.single-product div.product form.cart .variations tr + tr { margin-top: var(--cp-e-5); } /* LE BLOC DE LA VARIATION CHOISIE EST MASQUE. WooCommerce y republie, une fois la contenance choisie, le prix, la disponibilite et un lien « Effacer » — trois informations qui font doublon au moment ou elles apparaissent : · le prix : `cocopassion.js` remplace desormais la fourchette du haut (« 7,00 € – 30,00 € ») par le prix retenu. Le chiffre se met a jour la ou l'oeil l'a deja lu, au lieu de reapparaitre 200 px plus bas ; · la disponibilite : les contenances epuisees sont grisees dans la rangee de boutons, donc on ne peut plus en choisir une et lire « rupture » apres coup ; · « Effacer » : reannuler un choix parmi quatre boutons visibles n'a pas d'objet — il suffit d'en cliquer un autre. Le bloc reste dans le document : c'est lui que WooCommerce remplit et lit. On le sort du champ visuel, on ne le supprime pas. Et le masquage est commande par `.cp-variations-remplacees`, classe que `cocopassion.js` ne pose QUE s'il a pu construire les boutons et prendre en charge la mise a jour du prix. Sans script, sans jQuery, ou sur un produit a deux attributs, la classe est absente et la fiche se comporte exactement comme avant : le bloc de WooCommerce reste visible. Une fiche produit sans prix affiche serait pire que tout ce que ce masquage fait gagner. */ body.cp.single-product div.product .cp-variations-remplacees .woocommerce-variation, body.cp.single-product div.product .cp-variations-remplacees .reset_variations { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; } /* Le prix du haut, une fois une contenance retenue. Il ne change ni de taille ni de place — seul le nombre change, ce qui rend la mise a jour lisible sans faire sauter la page. */ body.cp.single-product div.product p.price .price { font-size: inherit; font-weight: inherit; color: inherit; } /* Le prix que WooCommerce republie dans le bloc de variation est masque (voir plus haut), mais il porte encore le vert d'OceanWP. Il ne se voit pas aujourd'hui ; il se verrait le jour ou le masquage tomberait — un releve de palette le trouve d'ailleurs deja. On le remet dans l'encre du theme plutot que de compter sur le masquage pour cacher une couleur qui n'a plus cours. */ body.cp.single-product div.product .woocommerce-variation p.price, body.cp.single-product div.product .woocommerce-variation-price .price { color: var(--cp-encre); } /* La barre flottante du theme (`owp-floating-bar`), qui apparait au defilement sur la fiche : fond sombre, et un prix reste en vert OceanWP. Le vert ne se voyait pas — les nombres sont peints par une autre regle et les mots de liaison par la leur — mais il ne demandait qu'une retouche du balisage pour ressortir sur un fond noir. On le rend a la palette, ce qui coute deux lignes et retire le dernier vert releve sur la fiche. */ body.cp .owp-floating-bar .product_price p.price, body.cp .owp-floating-bar .product_price .amount { color: var(--cp-fond); } body.cp .owp-floating-bar .product_price .cp-de { color: color-mix(in srgb, var(--cp-fond) 64%, transparent); } body.cp.single-product div.product p.price del { color: var(--cp-texte-doux); font-weight: 400; } body.cp.single-product div.product p.price ins { text-decoration: none; } /* Badge « Excellence 100% La Réunion », juste sous le prix — voir `cp_badge_excellence_fiche()` dans cocopassion-boutique.php. Pas sur la photo : la pastille de médaille (`cp_eshop_etiquette_de_fiche`) y est déjà. */ body.cp.single-product div.product .cp-fiche-badge { display: flex; align-items: center; gap: var(--cp-e-4); padding: var(--cp-e-3) var(--cp-e-4); margin: var(--cp-e-4) 0; background: var(--cp-fond); border-radius: var(--cp-r-md); } body.cp.single-product div.product .cp-fiche-badge__img { width: 72px; height: 72px; object-fit: contain; flex-shrink: 0; } body.cp.single-product div.product .cp-fiche-badge span { font-size: var(--cp-t-s); line-height: 1.4; color: var(--cp-texte); } /* La quantite et l'achat sur une seule ligne, le bouton prenant la place restante : c'est l'action principale de la page, elle doit etre la plus large. */ body.cp.single-product div.product form.cart .variations_button, body.cp.single-product div.product form.cart:not(.variations_form) { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--cp-e-3); } body.cp.single-product div.product form.cart .quantity { margin: 0; float: none; } body.cp.single-product div.product form.cart .single_add_to_cart_button { flex: 1 1 200px; float: none; } body.cp.single-product div.product .product_meta { font-size: var(--cp-t-xs); color: var(--cp-texte-doux); padding-top: var(--cp-e-4); margin-top: var(--cp-e-4); border-top: 1px solid var(--cp-trait); } body.cp.single-product div.product .product_meta a { color: var(--cp-texte); } body.cp.single-product div.product .related > h2, body.cp.single-product div.product .upsells > h2 { font-family: var(--cp-font-titre); font-size: var(--cp-t-xl); font-weight: 400; color: var(--cp-encre); margin: var(--cp-e-8) 0 var(--cp-e-5); } body.cp .woocommerce-product-gallery__wrapper { border: 1px solid var(--cp-trait); border-radius: var(--cp-r-md); overflow: hidden; background: var(--cp-blanc); } body.cp .woocommerce-product-gallery__image img { display: block; width: 100%; height: auto; } body.cp .flex-control-thumbs { display: flex; gap: var(--cp-e-2); margin-top: var(--cp-e-3); padding: 0; } body.cp .flex-control-thumbs li { width: auto; margin: 0; } body.cp .flex-control-thumbs img { width: 68px; height: 68px; object-fit: cover; border: 1px solid var(--cp-trait); border-radius: var(--cp-r-sm); opacity: 1; transition: border-color var(--cp-vite) var(--cp-courbe), transform var(--cp-vite) var(--cp-courbe); } /* La teinte de la famille plutot que le bordeaux : sur la fiche, elle est la seule chose qui dise d'un coup d'oeil si l'on est dans les gelees ou dans les marmelades. Elle retombe sur le bordeaux quand le produit n'a pas de famille (valeur de repli declaree dans 01-tokens.css). */ body.cp .flex-control-thumbs img:hover, body.cp .flex-control-thumbs img.flex-active { border-color: var(--cp-famille); transform: translateY(-2px); } /* -------------------------------------------------------------------------- 2. CHOIX DE LA CONTENANCE Les variations sont aujourd'hui un menu déroulant natif. Le PHP les transforme en boutons : le client voit les contenances et leurs prix sans avoir à ouvrir quoi que ce soit. Le vrai `
` de 90 px a gauche d'un ``, ce qui decale les boutons de contenance et laisse du vide sous eux : le `