/* =========================================================================== refonte-produit.css — CSS de la FICHE PRODUIT (template Elementor 420) --------------------------------------------------------------------------- Chargé UNIQUEMENT sur les fiches produit (is_product()), après refonte.css. Séparé volontairement de refonte.css : ces Ko ne servent qu' ici, il serait absurde de les faire télécharger sur l'accueil ou la boutique. Purge après modification : LiteSpeed (page + CSS/JS + UCSS) puis Cloudflare. =========================================================================== */ /* =========================================================================== ÉTAPE 7 — FICHE PRODUIT (template Elementor 420) --------------------------------------------------------------------------- 7.1 — RAPATRIEMENT du CSS qui était enfermé dans les widgets. Avant cette étape, 26,3 Ko de CSS vivaient dans le champ « CSS personnalisé » de 3 widgets du template 420 : • woocommerce-product-price #2e809904 → 57 o • woocommerce-product-add-to-cart #6c2de3e7 → 3 819 o (moitié dupliquée) • woocommerce-product-data-tabs #3487e4cc → 23 088 o Conséquences : ce CSS était réinjecté dans le HTML de CHACUNE des 161 fiches, il aurait été perdu à la moindre suppression/recréation d'un widget, et il était invisible pour qui lit le thème. Règles de fidélité appliquées ici (l'objectif de 7.1 est le ZÉRO changement visuel, vérifié par empreinte de 2 467 éléments) : 1. `selector` d'Elementor se compile en `.elementor-420 .elementor-element.elementor-element-XXXX` → repris tel quel, spécificité identique. 2. Les règles qui n'étaient PAS préfixées par `selector` étaient globales mais ne s'appliquaient qu'aux pages produit (le fichier post-420.css n'y est chargé que là). Ici, refonte.css est chargé PARTOUT : celles qui pouvaient déborder sur le reste du site sont donc bornées par `:where(.single-product)` — `:where()` ne coûte AUCUNE spécificité, la cascade reste rigoureusement identique. 3. refonte.css se charge après post-420.css : l'ordre de cascade d'origine est conservé. Liste blanche UCSS (prod) : rien de neuf à déclarer ici, les sélecteurs sont ceux de WooCommerce et d'Elementor. Les classes `ts-*` arrivent en 7.2+. =========================================================================== */ /* ---------- 7.1.a — Prix : suffixe TVA en noir (ex-widget #2e809904) ---------- */ .elementor-420 .elementor-element.elementor-element-2e809904 .wts-vat-text { color: #000000 !important; } /* ---------- 7.1.b — Ajout au panier & tarifs dégressifs (ex-widget #6c2de3e7) Le bloc d'origine contenait une COPIE INTÉGRALE de lui-même sous le titre « RESTE DU CSS EXISTANT » (mêmes sélecteurs, mêmes déclarations) : la copie est supprimée, c'est un no-op. Une accolade fermante orpheline (ignorée par les navigateurs) a également été retirée. ---------- */ /* lien « Effacer » des variations : coloré puis masqué (les 2 règles d'origine sont conservées telles quelles — la seconde gagne) */ .reset_variations { color: #FF0000 !important; } .woocommerce .reset_variations { display: none !important; } /* le stock natif de WooCommerce est masqué : c'est le snippet WPCode 11095 qui affiche la pastille « Disponible en stock / Rupture / En réappro. » */ .woocommerce .single-product .stock { visibility: hidden; } .single.woocommerce form.cart table.variations tr th { padding-left: 0; } /* tableaux de la fiche : fond blanc, pas de zébrage, pas de survol. `:where(.single-product)` = borne aux pages produit sans changer la spécificité (ces règles visaient TOUS les tableaux). */ .single-product table tbody > tr:nth-child(odd) > td, :where(.single-product) table tbody > tr:nth-child(odd) > th { background-color: #FFFFFF; } :where(.single-product) table tbody tr:hover > td, :where(.single-product) table tbody tr:hover > th { background-color: #FFFFFF; } /* suffixe « TTC » retiré du prix — uniquement sur la fiche produit (ailleurs — boutique, panier, accueil — il doit rester visible) */ :where(.single-product) .woocommerce-price-suffix { display: none; } .woocommerce-variation-add-to-cart { flex-wrap: wrap !important; } /* prix de la variation masqué (il est réinjecté dans le widget Prix par le script repris en 7.1.d) */ .elementor-420 .elementor-element.elementor-element-6c2de3e7 .woocommerce-variation-price { position: absolute !important; opacity: 0 !important; pointer-events: none !important; height: 0 !important; overflow: hidden !important; } /* tableau des tarifs dégressifs : coins arrondis + cellules centrées */ .elementor-420 .elementor-element.elementor-element-6c2de3e7 .tiered-pricing-table { border-radius: 7px !important; overflow: hidden; border-collapse: separate !important; border-spacing: 0 !important; } .elementor-420 .elementor-element.elementor-element-6c2de3e7 .tiered-pricing-table th, .elementor-420 .elementor-element.elementor-element-6c2de3e7 .tiered-pricing-table td { text-align: center !important; } .elementor-420 .elementor-element.elementor-element-6c2de3e7 .tiered-pricing-table thead tr th:first-child { border-top-left-radius: 7px !important; } .elementor-420 .elementor-element.elementor-element-6c2de3e7 .tiered-pricing-table thead tr th:last-child { border-top-right-radius: 7px !important; } .elementor-420 .elementor-element.elementor-element-6c2de3e7 .tiered-pricing-table tbody tr:last-child td:first-child { border-bottom-left-radius: 7px !important; } .elementor-420 .elementor-element.elementor-element-6c2de3e7 .tiered-pricing-table tbody tr:last-child td:last-child { border-bottom-right-radius: 7px !important; } /* ---------- 7.1.c — Onglets produit (ex-widget #3487e4cc, 23 Ko) Repris À L'IDENTIQUE, ordre des règles compris : ce bloc est un empilement de correctifs successifs (v2 → v3 → v4) dont la redondance ne sera nettoyée qu'en 7.4, au moment où les onglets seront réellement redessinés. Le toucher ici ferait perdre la garantie d'iso-rendu. Portée : `.tabs.wc-tabs`, `#tab-reviews`, `#tab-additional_information` — trois ancrages qui n'existent que sur une fiche produit, aucune bornée supplémentaire n'est donc nécessaire. ---------- */ /* Style commun pour desktop et mobile */ .tabs.wc-tabs { display: flex; justify-content: center; align-items: center; margin-bottom: 20px; /* Suppression de la bordure inférieure */ } .tabs.wc-tabs li { list-style: none; padding: 10px 20px; cursor: pointer; position: relative; } .tabs.wc-tabs li a { text-decoration: none; color: #54595F; font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 16px; display: inline-block; } .tabs.wc-tabs li a:hover, .tabs.wc-tabs li.active a { color: #044BAA; } .tabs.wc-tabs li a::after { content: ""; display: block; width: 0; height: 2px; background-color: #044BAA; transition: width 0.3s ease; margin-top: 5px; } .tabs.wc-tabs li a:hover::after, .tabs.wc-tabs li.active a::after { width: 100%; } .tabs.wc-tabs li + li { border-left: 1px solid #7A7A7A; } /* Style pour mobile (max-width: 768px) */ @media (max-width: 768px) { .tabs.wc-tabs { flex-wrap: wrap; justify-content: space-around; } .tabs.wc-tabs li { flex: 1 1 auto; text-align: center; padding: 10px 10px; border-left: none; } .tabs.wc-tabs li + li { border-left: none; } .tabs.wc-tabs li a { font-size: 14px; } .tabs.wc-tabs li a::after { margin: auto; } } /* ========================================================= TOP SIÈGE – Habillage section Avis (WooCommerce) v2 Scope : #tab-reviews uniquement (aucune modif structurelle) ========================================================= */ #tab-reviews { font-family: 'Montserrat', sans-serif; padding: 30px 0; color: #1a1a1a; } /* ---------- Titre "X avis pour ..." ---------- */ #tab-reviews .woocommerce-Reviews-title { font-family: 'Montserrat', sans-serif; font-size: 22px; font-weight: 700; line-height: 1.4; color: #044BAA; margin: 0 0 28px 0; padding: 0; border: none; letter-spacing: -0.2px; } #tab-reviews .woocommerce-Reviews-title span { font-weight: 600; color: #1a1a1a; } /* ---------- Liste des commentaires ---------- */ #tab-reviews ol.commentlist { list-style: none; margin: 0; padding: 0; } #tab-reviews ol.commentlist li.review { list-style: none; margin: 0 0 20px 0; padding: 0; background: none; border: none; } /* ---------- Conteneur d'un avis ---------- */ #tab-reviews .comment_container { display: flex; align-items: flex-start; gap: 18px; background: #ffffff; border: none; border-radius: 12px; padding: 22px 24px; box-shadow: 0 2px 12px rgba(4, 75, 170, 0.07); transition: box-shadow 0.25s ease, transform 0.25s ease; } #tab-reviews .comment_container:hover { box-shadow: 0 6px 22px rgba(4, 75, 170, 0.12); transform: translateY(-2px); } /* ---------- Avatar ---------- */ #tab-reviews .comment_container > img.avatar { flex-shrink: 0; width: 48px !important; height: 48px !important; border-radius: 50%; object-fit: cover; margin: 0; border: none; box-shadow: 0 0 0 2px #f0efed; } /* ---------- Bloc texte de l'avis ---------- */ #tab-reviews .comment-text { flex: 1; min-width: 0; margin: 0; padding: 0; background: none; border: none; position: relative; } /* ---------- Étoiles ---------- */ #tab-reviews .comment-text .star-rating { float: none; display: inline-block; margin: 0 0 10px 0; font-size: 14px; color: #f5b400; } /* ---------- Méta (auteur, date) ---------- */ #tab-reviews .comment-text p.meta { font-size: 13.5px; line-height: 1.6; color: #5a6a7e; margin: 0 0 12px 0; font-weight: 400; } #tab-reviews .comment-text .woocommerce-review__author { color: #044BAA; font-weight: 700; font-size: 14.5px; } #tab-reviews .comment-text .woocommerce-review__verified { font-style: normal; font-size: 12px; color: #ffffff; background: #006DFF; padding: 2px 8px; border-radius: 4px; margin-left: 4px; display: inline-block; vertical-align: middle; font-weight: 600; } #tab-reviews .comment-text .woocommerce-review__dash { color: #c5cdd8; margin: 0 4px; } #tab-reviews .comment-text .woocommerce-review__published-date { color: #5a6a7e; font-size: 13px; } /* ---------- Description (texte de l'avis) ---------- */ #tab-reviews .comment-text .description { margin: 0 0 14px 0; } #tab-reviews .comment-text .description p { font-size: 15px; line-height: 1.65; color: #1a1a1a; margin: 0; } /* ---------- Images jointes à l'avis ---------- */ #tab-reviews .cr-comment-images { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; } #tab-reviews .cr-comment-images .iv-comment-image { margin: 0; float: none; } #tab-reviews .cr-comment-images .iv-comment-image a { display: block; border-radius: 8px; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; } #tab-reviews .cr-comment-images .iv-comment-image a:hover { transform: scale(1.04); box-shadow: 0 4px 12px rgba(0, 109, 255, 0.25); } #tab-reviews .cr-comment-images .iv-comment-image img { display: block; width: 90px; height: 90px; object-fit: cover; margin: 0; border-radius: 8px; } /* ---------- Message "Seuls les clients connectés..." ---------- */ #tab-reviews .woocommerce-verification-required { font-size: 13.5px; color: #5a6a7e; background: #f0efed; padding: 12px 16px; border-radius: 8px; margin: 24px 0 0 0; line-height: 1.5; border: none; } /* ========================================================= FORMULAIRE D'AJOUT D'AVIS (clients connectés) ========================================================= */ #tab-reviews #review_form_wrapper { margin-top: 32px; } #tab-reviews #review_form, #tab-reviews .cr-single-product-review { background: #ffffff; border-radius: 12px; padding: 28px 28px; box-shadow: 0 2px 12px rgba(4, 75, 170, 0.07); } /* Titre "Ajouter un Avis" */ #tab-reviews #reply-title, #tab-reviews .comment-reply-title { display: block; font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 700; color: #044BAA; margin: 0 0 22px 0; padding: 0 0 12px 0; border-bottom: 1px solid #f0efed; } /* Labels des champs */ #tab-reviews #review_form label, #tab-reviews .cr-single-product-review label { display: block; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 600; color: #1a1a1a; margin: 0 0 8px 0; } /* Astérisque champs requis */ #tab-reviews #review_form .required, #tab-reviews .cr-single-product-review .required { color: #d63638; font-weight: 700; } /* Lignes de notation (étoiles + label) */ #tab-reviews .comment-form-rating, #tab-reviews .cr-rating-row, #tab-reviews .stars { margin-bottom: 18px; } /* Étoiles cliquables du formulaire */ #tab-reviews p.stars a, #tab-reviews .cr-single-product-review .stars a, #tab-reviews .cr-rating-stars a { color: #d4d8de; transition: color 0.2s ease, transform 0.15s ease; } #tab-reviews p.stars:hover a, #tab-reviews .cr-rating-stars:hover a { color: #d4d8de; } #tab-reviews p.stars a:hover, #tab-reviews p.stars a:hover ~ a, #tab-reviews .cr-rating-stars a:hover, #tab-reviews p.stars a.active, #tab-reviews p.stars.selected a.active, #tab-reviews .cr-rating-stars a.active { color: #f5b400; } #tab-reviews p.stars a:hover { transform: scale(1.1); } /* Champs texte et textarea */ #tab-reviews #review_form input[type="text"], #tab-reviews #review_form input[type="email"], #tab-reviews #review_form textarea, #tab-reviews .cr-single-product-review input[type="text"], #tab-reviews .cr-single-product-review input[type="email"], #tab-reviews .cr-single-product-review textarea { width: 100%; font-family: 'Montserrat', sans-serif; font-size: 14px; color: #1a1a1a; background: #ffffff; border: 1px solid #e6eef8; border-radius: 8px; padding: 12px 14px; margin: 0 0 18px 0; box-sizing: border-box; transition: border-color 0.2s ease, box-shadow 0.2s ease; } #tab-reviews #review_form textarea, #tab-reviews .cr-single-product-review textarea { min-height: 110px; resize: vertical; line-height: 1.6; } #tab-reviews #review_form input[type="text"]:focus, #tab-reviews #review_form input[type="email"]:focus, #tab-reviews #review_form textarea:focus, #tab-reviews .cr-single-product-review input[type="text"]:focus, #tab-reviews .cr-single-product-review input[type="email"]:focus, #tab-reviews .cr-single-product-review textarea:focus { outline: none; border-color: #006DFF; box-shadow: 0 0 0 3px rgba(0, 109, 255, 0.12); } /* Upload de fichiers */ #tab-reviews input[type="file"] { font-family: 'Montserrat', sans-serif; font-size: 13px; margin: 6px 0 18px 0; } #tab-reviews input[type="file"]::file-selector-button { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; color: #044BAA; background: #e6eef8; border: none; border-radius: 6px; padding: 8px 14px; margin-right: 12px; cursor: pointer; transition: background 0.2s ease; } #tab-reviews input[type="file"]::file-selector-button:hover { background: #cfdcf3; } /* Texte "Téléverser jusqu'à X images..." */ #tab-reviews .cr-form-notes, #tab-reviews #review_form small, #tab-reviews .cr-single-product-review small { display: block; font-size: 12.5px; color: #5a6a7e; margin: 4px 0 8px 0; line-height: 1.5; } /* Bouton Soumettre */ #tab-reviews #review_form input[type="submit"], #tab-reviews #review_form button[type="submit"], #tab-reviews .cr-single-product-review input[type="submit"], #tab-reviews .cr-single-product-review button[type="submit"], #tab-reviews .form-submit input[type="submit"] { font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 700; color: #ffffff; background: #044BAA; border: none; border-radius: 8px; padding: 13px 32px; margin: 8px 0 0 0; cursor: pointer; letter-spacing: 0.3px; transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; box-shadow: 0 2px 8px rgba(4, 75, 170, 0.2); } #tab-reviews #review_form input[type="submit"]:hover, #tab-reviews #review_form button[type="submit"]:hover, #tab-reviews .cr-single-product-review input[type="submit"]:hover, #tab-reviews .cr-single-product-review button[type="submit"]:hover, #tab-reviews .form-submit input[type="submit"]:hover { background: #006DFF; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0, 109, 255, 0.3); } #tab-reviews #review_form input[type="submit"]:active, #tab-reviews .form-submit input[type="submit"]:active { transform: translateY(0); } /* ========================================================= RESPONSIVE ========================================================= */ /* Tablette */ @media (max-width: 768px) { #tab-reviews .woocommerce-Reviews-title { font-size: 19px; margin-bottom: 22px; } #tab-reviews .comment_container { padding: 18px 18px; gap: 14px; } #tab-reviews .comment_container > img.avatar { width: 42px !important; height: 42px !important; } #tab-reviews #review_form, #tab-reviews .cr-single-product-review { padding: 22px 20px; } } /* Mobile */ @media (max-width: 480px) { #tab-reviews { padding: 20px 0; } #tab-reviews .woocommerce-Reviews-title { font-size: 17px; line-height: 1.35; margin-bottom: 18px; } #tab-reviews .comment_container { flex-direction: column; padding: 16px 16px; gap: 12px; } #tab-reviews .comment_container > img.avatar { width: 40px !important; height: 40px !important; } #tab-reviews .comment-text p.meta { font-size: 12.5px; } #tab-reviews .comment-text .description p { font-size: 14px; } #tab-reviews .cr-comment-images .iv-comment-image img { width: 75px; height: 75px; } #tab-reviews #review_form, #tab-reviews .cr-single-product-review { padding: 18px 16px; } #tab-reviews #reply-title, #tab-reviews .comment-reply-title { font-size: 16px; } #tab-reviews #review_form input[type="submit"], #tab-reviews .form-submit input[type="submit"] { width: 100%; padding: 14px 24px; } } /* ========================================================= TOP SIÈGE – Avis (patch v3) À ajouter à la fin du CSS existant ========================================================= */ /* 1. Suppression de toutes les bordures/lignes parasites (héritées du thème ou de WooCommerce) */ #tab-reviews #comments, #tab-reviews #reviews, #tab-reviews .woocommerce-Reviews, #tab-reviews ol.commentlist, #tab-reviews ol.commentlist li.review, #tab-reviews ol.commentlist li.review > div { border: none !important; outline: none !important; background: none !important; } #tab-reviews ol.commentlist li.review { box-shadow: none !important; } /* 2. Plus d'air à gauche autour de l'avatar */ #tab-reviews .comment_container { padding: 24px 28px 24px 32px; gap: 22px; } /* 3. Ombre plus marquée sur la carte d'avis ET sur le formulaire */ #tab-reviews .comment_container { box-shadow: 0 6px 22px rgba(4, 75, 170, 0.13); } #tab-reviews .comment_container:hover { box-shadow: 0 12px 32px rgba(4, 75, 170, 0.20); } #tab-reviews #review_form, #tab-reviews .cr-single-product-review { box-shadow: 0 6px 22px rgba(4, 75, 170, 0.13); } /* 4. Bouton "Soumettre" : texte blanc verrouillé dans tous les états */ #tab-reviews #review_form input[type="submit"], #tab-reviews #review_form button[type="submit"], #tab-reviews .cr-single-product-review input[type="submit"], #tab-reviews .cr-single-product-review button[type="submit"], #tab-reviews .form-submit input[type="submit"], #tab-reviews #review_form input[type="submit"]:hover, #tab-reviews #review_form input[type="submit"]:focus, #tab-reviews #review_form input[type="submit"]:active, #tab-reviews #review_form input[type="submit"]:visited, #tab-reviews #review_form button[type="submit"]:hover, #tab-reviews .cr-single-product-review input[type="submit"]:hover, #tab-reviews .cr-single-product-review button[type="submit"]:hover, #tab-reviews .form-submit input[type="submit"]:hover, #tab-reviews .form-submit input[type="submit"]:focus { color: #ffffff !important; } /* 5. Masquage du message d'erreur 414 affiché à tort (solution temporaire en attendant correction serveur — voir ci-dessous) */ #tab-reviews #review_form > meta, #tab-reviews #review_form > title, #tab-reviews #review_form > style, #tab-reviews #review_form > div[style*="height"], #tab-reviews #review_form > div[style*="position"], #tab-reviews .cr-single-product-review > div[style*="height"], #tab-reviews .cr-single-product-review > div[style*="position"] { display: none !important; } /* Sécurité supplémentaire : masquer tout titre h1/h2 non Woo dans le wrapper */ #tab-reviews #review_form > h1, #tab-reviews #review_form > h2, #tab-reviews #review_form > p { display: none !important; } /* ========================================================= TOP SIÈGE – Avis (patch v4) - corrections spécificité ========================================================= */ /* 1. SUPPRESSION de la bordure intérieure de .comment-text (c'est ELLE qui crée l'encadrement ligné dans la carte) */ #tab-reviews #comments .commentlist li .comment-text, #tab-reviews .comment_container .comment-text { border: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; border-radius: 0 !important; } /* 2. CONTENEUR de l'avis : on force flex + padding généreux à gauche */ #tab-reviews #comments .commentlist li .comment_container, #tab-reviews .comment_container { display: flex !important; align-items: flex-start !important; gap: 22px !important; padding: 26px 28px 26px 32px !important; background: #ffffff !important; border: none !important; border-radius: 12px !important; box-shadow: 0 6px 22px rgba(4, 75, 170, 0.13) !important; } #tab-reviews #comments .commentlist li .comment_container:hover, #tab-reviews .comment_container:hover { box-shadow: 0 12px 32px rgba(4, 75, 170, 0.20) !important; } /* 3. AVATAR : on neutralise position absolue / float du thème pour qu'il respecte le padding-left du conteneur */ #tab-reviews #comments .commentlist li img.avatar, #tab-reviews .comment_container > img.avatar { position: static !important; float: none !important; margin: 0 !important; top: auto !important; left: auto !important; flex-shrink: 0 !important; width: 48px !important; height: 48px !important; border-radius: 50% !important; box-shadow: 0 0 0 2px #f0efed !important; border: none !important; } /* ========================================================= TOP SIÈGE – Habillage tableau "Informations complémentaires" Scope : #tab-additional_information uniquement ========================================================= */ #tab-additional_information { font-family: 'Montserrat', sans-serif; padding: 30px 0; color: #1a1a1a; } /* ---------- Titre H2 "Informations complémentaires" ---------- */ #tab-additional_information h2 { font-family: 'Montserrat', sans-serif; font-size: 22px; font-weight: 700; line-height: 1.4; color: #044BAA; margin: 0 0 24px 0; padding: 0; border: none; letter-spacing: -0.2px; } /* ---------- Conteneur du tableau (carte blanche avec ombre) ---------- */ #tab-additional_information .woocommerce-product-attributes { width: 100%; border-collapse: separate; border-spacing: 0; background: #ffffff; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 22px rgba(4, 75, 170, 0.13); border: none; margin: 0; } /* ---------- Lignes du tableau ---------- */ #tab-additional_information .woocommerce-product-attributes-item { transition: background 0.2s ease; } /* Alternance de couleurs (zébrage discret) */ #tab-additional_information .woocommerce-product-attributes-item:nth-child(even) { background: #f7faff; } #tab-additional_information .woocommerce-product-attributes-item:nth-child(odd) { background: #ffffff; } #tab-additional_information .woocommerce-product-attributes-item:hover { background: #e6eef8; } /* ---------- Cellules : labels (th) ---------- */ #tab-additional_information .woocommerce-product-attributes-item__label { font-family: 'Montserrat', sans-serif; font-size: 14.5px; font-weight: 700; color: #044BAA; text-align: left; padding: 16px 24px; width: 35%; vertical-align: middle; border: none; background: transparent; font-style: normal; letter-spacing: 0.1px; } /* ---------- Cellules : valeurs (td) ---------- */ #tab-additional_information .woocommerce-product-attributes-item__value { font-family: 'Montserrat', sans-serif; font-size: 14.5px; font-weight: 500; color: #1a1a1a; text-align: left; padding: 16px 24px; vertical-align: middle; border: none; background: transparent; font-style: normal; line-height: 1.6; } /* ---------- Liens à l'intérieur des valeurs (taxonomies type "Tissu bleu, Tissu vert...") ---------- */ #tab-additional_information .woocommerce-product-attributes-item__value a { color: #006DFF; text-decoration: none; font-weight: 500; font-style: normal; transition: color 0.2s ease; } #tab-additional_information .woocommerce-product-attributes-item__value a:hover { color: #044BAA; text-decoration: underline; } #tab-additional_information .woocommerce-product-attributes-item__value p { margin: 0; font-style: normal; } /* ---------- Séparateur fin entre les lignes ---------- */ #tab-additional_information .woocommerce-product-attributes-item + .woocommerce-product-attributes-item .woocommerce-product-attributes-item__label, #tab-additional_information .woocommerce-product-attributes-item + .woocommerce-product-attributes-item .woocommerce-product-attributes-item__value { border-top: 1px solid #eaeff7; } /* ========================================================= RESPONSIVE ========================================================= */ /* Tablette */ @media (max-width: 768px) { #tab-additional_information h2 { font-size: 19px; margin-bottom: 20px; } #tab-additional_information .woocommerce-product-attributes-item__label, #tab-additional_information .woocommerce-product-attributes-item__value { padding: 14px 18px; font-size: 14px; } #tab-additional_information .woocommerce-product-attributes-item__label { width: 40%; } } /* Mobile */ @media (max-width: 480px) { #tab-additional_information { padding: 20px 0; } #tab-additional_information h2 { font-size: 17px; margin-bottom: 16px; } /* Sur mobile : labels et valeurs empilés verticalement pour gagner en lisibilité */ #tab-additional_information .woocommerce-product-attributes, #tab-additional_information .woocommerce-product-attributes tbody, #tab-additional_information .woocommerce-product-attributes-item { display: block; width: 100%; } #tab-additional_information .woocommerce-product-attributes-item__label, #tab-additional_information .woocommerce-product-attributes-item__value { display: block; width: 100% !important; padding: 12px 18px; text-align: left; box-sizing: border-box; } #tab-additional_information .woocommerce-product-attributes-item__label { padding-bottom: 4px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; background: transparent !important; } #tab-additional_information .woocommerce-product-attributes-item__value { padding-top: 0; padding-bottom: 14px; font-size: 14.5px; font-weight: 500; } /* Sur mobile, on isole chaque ligne avec un séparateur clair */ #tab-additional_information .woocommerce-product-attributes-item + .woocommerce-product-attributes-item .woocommerce-product-attributes-item__label { border-top: 1px solid #eaeff7; padding-top: 14px; } /* Sur mobile, on neutralise le hover (peu pertinent au tactile) */ #tab-additional_information .woocommerce-product-attributes-item:hover { background: transparent; } } /* =========================================================================== ÉTAPE 7.2 — FONDATIONS & COQUILLE DE LA FICHE --------------------------------------------------------------------------- Avant : trois largeurs de contenu différentes se succédaient sur la page (fil d'Ariane 1600 px, zone produit ~1450 px décalée à gauche, onglets et ventes incitatives 1140 px). Tout est ramené sur la MÊME grille 1400 que l'accueil et le footer. Classes créées : ts-p-* (liste blanche UCSS prod : ts-p-*) =========================================================================== */ body.single-product { --tsp-max: 1400px; --tsp-pad: clamp(14px, 3vw, 28px); --tsp-gap: clamp(26px, 3vw, 52px); --tsp-r: 18px; --tsp-r-sm: 12px; /* palette : reprise stricte de la charte des étapes 3 à 6 */ --tsp-ink: #0A2540; --tsp-ink-2: #4A5A70; --tsp-ink-3: #7C8CA0; --tsp-brand: #044BAA; --tsp-accent: #006DFF; --tsp-line: rgba(10, 37, 64, 0.09); --tsp-soft: #F2F6FB; --tsp-band: #F7FAFD; /* couleurs d'ÉTAT, assumées et documentées (elles ne sont pas dans la charte mais doivent rester lisibles : le vert #61CE70 d'origine passait sous le seuil de contraste sur fond blanc) */ --tsp-ok-bg: #E7F6EF; --tsp-ok-ink: #0B7A53; --tsp-warn-bg: #FFF3E0; --tsp-warn-ink: #9A5B04; --tsp-alert-bg: #FEF0F0; --tsp-alert-ink: #C2201F; /* décalage des éléments collants sous le header flottant */ --tsp-sticky-top: 150px; } @media (max-width: 1105px) { body.single-product { --tsp-sticky-top: 104px; } } /* ---------- Coquille commune : tout sur 1400 ---------- */ .single-product .elementor-420 .elementor-element.elementor-element-7da6671a, .single-product .elementor-420 .elementor-element.elementor-element-7ed77e5f { width: 100%; max-width: var(--tsp-max); margin-inline: auto; padding-inline: var(--tsp-pad); } .single-product .elementor-420 .elementor-element.elementor-element-278af67b > .e-con-inner, .single-product .elementor-420 .elementor-element.elementor-element-1c29560 > .e-con-inner { max-width: var(--tsp-max); padding-inline: var(--tsp-pad); } /* v2 — les 10 px de marge interne par défaut d'Elementor sur la bande elle-même décalaient les onglets et les ventes incitatives de 10 px vers la droite par rapport au reste de la page */ .single-product .elementor-420 .elementor-element.elementor-element-278af67b, .single-product .elementor-420 .elementor-element.elementor-element-1c29560 { padding-inline: 0; } /* séparateurs et espaceur hérités : le rythme est désormais porté par les bandes de section (comme sur l'accueil) */ .single-product .elementor-420 .elementor-element.elementor-element-84aa707, .single-product .elementor-420 .elementor-element.elementor-element-9b66a92, .single-product .elementor-420 .elementor-element.elementor-element-ec373e9 { display: none; } /* ---------- Fil d'Ariane (était à 9 px sur tablette : illisible) ---------- */ .single-product .elementor-420 .elementor-element.elementor-element-7da6671a { margin-block: 10px 0; } /* v2 — le conteneur INTERNE du fil d'Ariane était encore bridé à 1140 px (la largeur par défaut du Kit) : le texte démarrait 102 px plus à droite que la galerie. On le laisse occuper toute la coquille pour un alignement exact. */ .single-product .elementor-420 .elementor-element.elementor-element-81ee6c1, .single-product .elementor-420 .elementor-element.elementor-element-81ee6c1 > .e-con-inner { max-width: none; padding-inline: 0; /* + les 10 px de marge interne par défaut d'Elementor */ } /* et le widget lui-même, qui était rétréci puis centré sur tablette et mobile */ .single-product .elementor-420 .elementor-element.elementor-element-3e5c79ac { width: 100%; max-width: 100%; align-self: stretch; } /* le préfixe du widget est indispensable : Elementor fixait 9 px en tablette */ body.single-product .elementor-420 .elementor-element.elementor-element-3e5c79ac .woocommerce-breadcrumb, .single-product .woocommerce-breadcrumb { font-family: "Montserrat", sans-serif; font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--tsp-ink-3); } .single-product .woocommerce-breadcrumb a { color: var(--tsp-ink-2); text-decoration: none; } .single-product .woocommerce-breadcrumb a:hover { color: var(--tsp-brand); } @media (max-width: 767px) { body.single-product .elementor-420 .elementor-element.elementor-element-3e5c79ac .woocommerce-breadcrumb, .single-product .woocommerce-breadcrumb { font-size: 12px; } } /* =========================================================================== ÉTAPE 7.3 — ZONE D'ACHAT : galerie collante + carte structurée --------------------------------------------------------------------------- La rangée produit devient une grille à 2 colonnes et 2 rangées : desktop mobile galerie titre titre galerie achat galerie achat Le titre est un enfant direct de la rangée (widget unique depuis 7.2), ce qui permet de le placer AU-DESSUS de la galerie sur mobile et EN HAUT de la colonne d'achat sur desktop — sans dupliquer le

. =========================================================================== */ .single-product .elementor-420 .elementor-element.elementor-element-7ed77e5f { display: grid; grid-template-columns: minmax(0, 1fr) clamp(360px, 36%, 520px); grid-template-rows: auto 1fr; grid-template-areas: "galerie titre" "galerie achat"; align-items: start; column-gap: clamp(34px, 3.8vw, 68px); /* v2 — la colonne d'achat respirait mal */ row-gap: 0; margin-top: 10px; } .single-product .elementor-420 .elementor-element.elementor-element-7ed77e5f > .ts-p-title { grid-area: titre; } .single-product .elementor-420 .elementor-element.elementor-element-3f2bba7a { grid-area: galerie; } .single-product .elementor-420 .elementor-element.elementor-element-3074a360 { grid-area: achat; } /* les largeurs en % héritées d'Elementor n'ont plus de sens en grille */ .single-product .elementor-420 .elementor-element.elementor-element-3f2bba7a, .single-product .elementor-420 .elementor-element.elementor-element-3074a360 { width: auto; max-width: none; padding: 0; } /* ---------- Titre ---------- */ .single-product .ts-p-title .elementor-heading-title, .single-product .ts-p-title h1 { font-family: "Montserrat", sans-serif; font-size: clamp(23px, 2.1vw, 34px); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; color: var(--tsp-ink); margin: 0; } /* v3 — le bord de la carte touchait le bas du titre (0 px mesuré) : la marge avait besoin de la spécificité du widget pour passer devant Elementor. */ .single-product .elementor-420 .elementor-element.elementor-element-6928e56, .single-product .ts-p-title { margin-bottom: 30px; } /* v5 — Sous le titre : DEUX encadrés côte à côte, construits par refonte.js. • à gauche : la note du produit s'il a des avis, sinon la note Trustpilot de la boutique (il y a donc toujours quelque chose à montrer) ; • à droite : le logo de la marque, repris de l'onglet « Marque » — aucune donnée supplémentaire n'est demandée au serveur. La rangée s'adapte : deux colonnes quand la place le permet, une seule en dessous de ~330 px de large. */ .single-product .ts-p-badges { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 14px 0 0; } .single-product .ts-p-badge { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 56px; padding: 9px 13px; background: #FFFFFF; border: 1px solid var(--tsp-line); border-radius: 14px; text-decoration: none; font-family: "Montserrat", sans-serif; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } a.ts-p-badge:hover { border-color: rgba(4, 75, 170, 0.30); box-shadow: 0 6px 18px rgba(10, 37, 64, 0.09); transform: translateY(-1px); } a.ts-p-badge:focus-visible { outline: 2px solid var(--tsp-accent); outline-offset: 2px; } /* bloc texte commun aux deux encadrés : une valeur, une précision */ .single-product .ts-p-badge-txt { display: flex; flex-direction: column; justify-content: center; min-width: 0; line-height: 1.2; } .single-product .ts-p-badge-txt b { font-size: 15px; font-weight: 800; color: var(--tsp-ink); letter-spacing: -0.01em; } .single-product .ts-p-badge-txt b span { font-size: 0.72em; font-weight: 700; color: var(--tsp-ink-2); } .single-product .ts-p-badge-txt small { font-size: 11.5px; font-weight: 600; color: var(--tsp-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- encadré Trustpilot : nuances de vert de la marque ---- */ .single-product .ts-p-badge--trustpilot { background: linear-gradient(135deg, #ECFAF4 0%, #E2F6EE 100%); border-color: rgba(0, 182, 122, 0.30); } a.ts-p-badge--trustpilot:hover { border-color: rgba(0, 182, 122, 0.62); box-shadow: 0 6px 18px rgba(0, 182, 122, 0.18); } .single-product .ts-p-badge--trustpilot .ts-p-badge-txt b { color: #04543D; } .single-product .ts-p-badge--trustpilot .ts-p-badge-txt b span { color: #0B7A53; } .single-product .ts-p-badge--trustpilot .ts-p-badge-txt small { color: #0B7A53; } .single-product .ts-p-badge-tp { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 7px; } /* ---- encadré marque : le logo respire, jamais déformé ---- */ .single-product .ts-p-badge--marque { justify-content: center; padding: 5px 12px; } /* les logos de marque sont des carrés avec beaucoup de blanc autour : bornés à 32 px de haut, le mot-symbole devenait illisible. On les laisse occuper presque toute la hauteur de l'encadré, la largeur suit sans déformation. */ .single-product .ts-p-badge-logo { max-width: 100%; max-height: 48px; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; /* efface le liseré blanc des logos sur fond blanc */ } .single-product .ts-p-badge--marque .ts-p-badge-txt { align-items: center; text-align: center; } .single-product .ts-p-badge--marque .ts-p-badge-txt small { order: -1; text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; } /* ---- étoiles de la note produit ---- */ .single-product .ts-p-rating-stars { position: relative; display: inline-block; flex: 0 0 auto; font-size: 14px; line-height: 1; letter-spacing: 1px; color: #D8DFE8; white-space: nowrap; } .single-product .ts-p-rating-stars::before { content: "★★★★★"; } .single-product .ts-p-rating-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: #FFB400; white-space: nowrap; } .single-product .ts-p-rating-fill::before { content: "★★★★★"; } /* ---------- Galerie : collante au défilement, habillée comme les cartes ---------- */ .single-product .elementor-420 .elementor-element.elementor-element-3f2bba7a { position: sticky; top: var(--tsp-sticky-top); align-self: start; } /* le plugin borne la galerie à la largeur d'image WooCommerce (600 px), non pas sur la galerie elle-même mais sur son conteneur parent : c'est lui qu'il faut libérer. L'image source fait 1200 px, elle reste nette jusqu'à ~800 px. */ .single-product .elementor-420 .elementor-element.elementor-element-6124b173 { width: 100%; max-width: 100%; } body.single-product .woo-variation-product-gallery, body.single-product .woo-variation-gallery-wrapper, body.single-product .elementor-widget-woocommerce-product-images .woocommerce-product-gallery { width: 100% !important; max-width: 100% !important; float: none !important; } body.single-product .woo-variation-gallery-wrapper { width: 100% !important; max-width: 100% !important; margin: 0; background: #FFFFFF; border: 1px solid var(--tsp-line); border-radius: var(--tsp-r); padding: clamp(10px, 1.2vw, 16px); } /* la grande image est bornée en hauteur : sans cela, sur une colonne de 800 px elle dépasse l'écran et la colonne collante devient inutilisable */ body.single-product .woo-variation-gallery-wrapper .woo-variation-gallery-slider img { width: 100%; height: auto; max-height: min(56vh, 560px); object-fit: contain; border-radius: var(--tsp-r-sm); } /* vignettes : coins arrondis, état actif net (il n'y en avait aucun) */ .single-product .woo-variation-gallery-thumbnail-wrapper { margin-top: 10px; } .single-product .woo-variation-gallery-thumbnail-slider .slick-slide img { border-radius: 10px; border: 2px solid transparent; transition: border-color .2s ease, opacity .2s ease; opacity: .72; } .single-product .woo-variation-gallery-thumbnail-slider .slick-slide:hover img { opacity: 1; } .single-product .woo-variation-gallery-thumbnail-slider .slick-current img, .single-product .woo-variation-gallery-thumbnail-slider .slick-slide.wvg-active img { border-color: var(--tsp-accent); opacity: 1; } /* flèches des vignettes : discrètes, rondes */ .single-product .wvg-thumbnail-prev-arrow, .single-product .wvg-thumbnail-next-arrow { color: var(--tsp-brand); opacity: .75; transition: opacity .2s ease; } .single-product .wvg-thumbnail-prev-arrow:hover, .single-product .wvg-thumbnail-next-arrow:hover { opacity: 1; } /* v2 — le déclencheur plein écran est retiré : son icône (dashicons) n'était plus chargée depuis l'optimisation du snippet 12220, il ne restait qu'une pastille blanche vide. Le zoom au survol de l'image reste actif. */ .single-product .woo-variation-gallery-trigger { display: none !important; } /* ---------- v4 — Flèches de navigation de la galerie ---------- MÊME CAUSE que la loupe : le plugin dessine ses flèches avec la police d'icônes Dashicons, retirée du site par le snippet d'optimisation 12220. Il ne restait donc qu'un rectangle gris translucide, sans flèche — en production comme sur staging (ce n'est pas Cloudflare). En prime, les deux flèches de la grande image débordaient de 23 px hors de la carte. Le chevron est redessiné ici en masque SVG (aucune requête réseau, il suit la couleur du bouton), et les boutons reprennent l'habillage des flèches de carrousel de l'accueil. ⚠️ On ne touche NI à `opacity`, NI à `visibility`, NI au JavaScript : la logique d'apparition au survol reste entièrement celle du plugin. */ body.single-product .wvg-slider-prev-arrow, body.single-product .wvg-slider-next-arrow, body.single-product .wvg-thumbnail-prev-arrow, body.single-product .wvg-thumbnail-next-arrow { display: flex !important; align-items: center; justify-content: center; padding: 0 !important; background: #FFFFFF !important; /* les photos produit sont sur fond blanc : sans un filet et une ombre bien marqués, un bouton blanc disparaît complètement. C'est d'ailleurs la raison du fond noir translucide d'origine du plugin. */ border: 1px solid rgba(10, 37, 64, 0.16) !important; border-radius: 999px !important; box-shadow: 0 4px 16px rgba(10, 37, 64, 0.22), 0 1px 3px rgba(10, 37, 64, 0.12); /* le plugin les laissait à 50 % d'opacité en permanence : trop discret une fois le fond passé en blanc (l'affichage au survol reste géré par lui) */ opacity: 1 !important; font-size: 0; text-indent: 0; transition: box-shadow .2s ease, border-color .2s ease; } /* le chevron est dessiné avec deux bordures d'un carré pivoté à 45° : aucune image, aucune police, aucun encodage de données — donc rien qui puisse se perdre en route comme l'icône Dashicons */ body.single-product .wvg-slider-prev-arrow::before, body.single-product .wvg-slider-next-arrow::before, body.single-product .wvg-thumbnail-prev-arrow::before, body.single-product .wvg-thumbnail-next-arrow::before { content: "" !important; display: block !important; width: 9px !important; height: 9px !important; /* la couleur est posée explicitement : le plugin force ses icônes en blanc, ce qui rendait le chevron invisible sur le bouton blanc */ border: 0 solid var(--tsp-brand) !important; /* `!important` sur la rotation : le plugin a des règles ::before propres à chaque position de vignettes, qui remettaient le carré à plat (« L ») */ transform: rotate(45deg) !important; line-height: 0 !important; font-size: 0 !important; transition: border-color .2s ease; } body.single-product .wvg-slider-prev-arrow::before, body.single-product .wvg-thumbnail-prev-arrow::before { border-bottom-width: 2.5px !important; border-left-width: 2.5px !important; margin: 0 0 0 3px !important; } body.single-product .wvg-slider-next-arrow::before, body.single-product .wvg-thumbnail-next-arrow::before { border-top-width: 2.5px !important; border-right-width: 2.5px !important; margin: 0 3px 0 0 !important; } body.single-product .wvg-slider-prev-arrow:hover, body.single-product .wvg-slider-next-arrow:hover, body.single-product .wvg-thumbnail-prev-arrow:hover, body.single-product .wvg-thumbnail-next-arrow:hover { background: #FFFFFF !important; border-color: rgba(0, 109, 255, 0.55) !important; box-shadow: 0 8px 24px rgba(10, 37, 64, 0.30), 0 1px 3px rgba(10, 37, 64, 0.14); } body.single-product .wvg-slider-prev-arrow:hover::before, body.single-product .wvg-slider-next-arrow:hover::before, body.single-product .wvg-thumbnail-prev-arrow:hover::before, body.single-product .wvg-thumbnail-next-arrow:hover::before { border-color: var(--tsp-accent); } body.single-product .wvg-slider-prev-arrow:focus-visible, body.single-product .wvg-slider-next-arrow:focus-visible, body.single-product .wvg-thumbnail-prev-arrow:focus-visible, body.single-product .wvg-thumbnail-next-arrow:focus-visible { outline: 2px solid var(--tsp-accent); outline-offset: 2px; } /* grande image : les flèches débordaient de la carte (left: -40px), on les ramène à l'intérieur, sur les bords de la photo */ body.single-product .wvg-slider-prev-arrow, body.single-product .wvg-slider-next-arrow { width: 42px !important; height: 42px !important; } body.single-product .wvg-slider-prev-arrow { left: 12px !important; right: auto !important; } body.single-product .wvg-slider-next-arrow { right: 12px !important; left: auto !important; } /* bande de vignettes : la zone cliquable faisait toute la hauteur de la bande (30 × 183 px), elle devient un bouton rond centré */ body.single-product .wvg-thumbnail-prev-arrow, body.single-product .wvg-thumbnail-next-arrow { width: 34px !important; height: 34px !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; } /* la bande de vignettes masque son débordement et déborde de 5 px de chaque côté du conteneur des flèches : à 2 px d'écart, les boutons ronds étaient rognés de 3 px. On les rentre de 9 px. */ body.single-product .wvg-thumbnail-prev-arrow { left: 9px !important; right: auto !important; } body.single-product .wvg-thumbnail-next-arrow { right: 9px !important; left: auto !important; } @media (max-width: 767px) { body.single-product .wvg-slider-prev-arrow, body.single-product .wvg-slider-next-arrow { width: 36px !important; height: 36px !important; } body.single-product .wvg-thumbnail-prev-arrow, body.single-product .wvg-thumbnail-next-arrow { width: 30px !important; height: 30px !important; } } /* ---------- La colonne de droite devient UNE carte ---------- */ .single-product .elementor-420 .elementor-element.elementor-element-3074a360 { background: #FFFFFF; border: 1px solid var(--tsp-line); border-radius: var(--tsp-r); padding: clamp(20px, 2vw, 30px); /* v2 — plus d'air */ box-shadow: 0 12px 34px rgba(10, 37, 64, 0.06); gap: 19px; /* v2 — les blocs étaient trop serrés les uns contre les autres */ } /* v2 — ORDRE des blocs de la carte, conforme à la maquette validée : prix → compte à rebours → variations/dégressif/stock/bouton → réassurance → paiement en 4× → partage. On agit par `order` et non en déplaçant les widgets : le snippet 12111 insère le compte à rebours JUSTE AVANT le conteneur de la description courte, donc déplacer ce conteneur dans le DOM emmènerait le compte à rebours avec lui. */ .single-product .elementor-420 .elementor-element.elementor-element-c0fbfd9 { order: 1; } /* le compte à rebours arrive dans un conteneur sans classe : refonte.js lui pose `ts-p-countdown`, et `:has()` sert de filet si le JS n'a pas encore tourné */ .single-product .elementor-420 .elementor-element.elementor-element-3074a360 > .ts-p-countdown, .single-product .elementor-420 .elementor-element.elementor-element-3074a360 > .tscd-wrap, .single-product .elementor-420 .elementor-element.elementor-element-3074a360 > *:has(> .tscd-wrap) { order: 2; } .single-product .elementor-420 .elementor-element.elementor-element-24729394 { order: 3; } .single-product .elementor-420 .elementor-element.elementor-element-6c2de3e7 { order: 4; } .single-product .elementor-420 .elementor-element.elementor-element-e10e1bb { order: 5; } .single-product .elementor-420 .elementor-element.elementor-element-3074a360 > .ppcp-messages, .single-product .elementor-420 .elementor-element.elementor-element-3074a360 > .ts-p-pay { order: 6; } .single-product .elementor-420 .elementor-element.elementor-element-6457107 { order: 7; } /* TOUS les blocs de la carte étaient figés en largeur par les réglages du template (prix 400 px, réassurance 400/380 px, ajout au panier 380 px) : dans une carte de 435 à 756 px selon l'écran, la moitié de la place restait vide et le bouton d'achat ne faisait jamais toute la largeur. */ .single-product .elementor-420 .elementor-element.elementor-element-3074a360 > .elementor-element, .single-product .elementor-420 .elementor-element.elementor-element-3074a360 > .e-con, .single-product .elementor-420 .elementor-element.elementor-element-c0fbfd9, .single-product .elementor-420 .elementor-element.elementor-element-e10e1bb { width: 100%; max-width: 100%; } .single-product .elementor-420 .elementor-element.elementor-element-c0fbfd9 { padding: 0; margin: 0; gap: 11px; /* v2 — « Éco-participation incluse. » touchait le prix barré */ } /* ---------- Prix ---------- */ /* NOTE de spécificité : la typographie des widgets est écrite par Elementor en `.elementor-420 .elementor-element.elementor-element-XXXX …` (0,4,0). Toute règle qui doit la surcharger reprend donc ce préfixe, sinon elle perd. */ body.single-product .elementor-420 .elementor-element.elementor-element-2e809904 .price { font-family: "Montserrat", sans-serif; font-size: clamp(25px, 1.9vw, 30px); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--tsp-ink); text-transform: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0; } /* v2 — prix régulier, prix promo et mention TTC/HT sur UNE ligne, avec des tailles rapprochées : la place ne manque pas en largeur. */ body.single-product .elementor-420 .elementor-element.elementor-element-2e809904 .wts-price-container, body.single-product .elementor-420 .elementor-element.elementor-element-2e809904 .wts-price-wrapper { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 9px; } /* ancien prix : barré, gris, à peine plus petit que le prix promo. v3 — un SEUL trait au milieu : le `` et le `` du montant qu'il contient portaient chacun leur `line-through`, et comme ils n'ont pas la même taille de police les deux traits se dessinaient à des hauteurs différentes — d'où l'impression d'un soulignage en plus du barré. La décoration ne vit désormais QUE sur le `` ; elle se propage naturellement à l'intérieur. */ body.single-product .elementor-420 .elementor-element.elementor-element-2e809904 .price del { font-size: clamp(19px, 1.6vw, 23px) !important; font-weight: 600; color: var(--tsp-ink-3); text-decoration: line-through !important; text-decoration-thickness: 1.5px; opacity: 1; order: 2; } body.single-product .elementor-420 .elementor-element.elementor-element-2e809904 .price del *, body.single-product .elementor-420 .elementor-element.elementor-element-2e809904 .price del .amount, body.single-product .elementor-420 .elementor-element.elementor-element-2e809904 .price del bdi { font-size: inherit; font-weight: inherit; color: inherit; text-decoration: none; } body.single-product .elementor-420 .elementor-element.elementor-element-2e809904 .price ins { text-decoration: none; background: none; order: 1; } /* mention TTC / HT du switch de TVA v7 (30/07, demande Ivane) — le suffixe prend EXACTEMENT la couleur du prix (`--tsp-ink`, cf. la règle `.price` ci-dessus) au lieu du gris `--tsp-ink-2` : « en haut de la page produit le TTC / HT doit être de la même couleur que le prix ». Le `!important` est indispensable : le CSS du Customizer (post 6221, règle `.single-product .wts-price-wrapper .wts-vat-text { color:#000 }`) est imprimé APRÈS les feuilles du thème et gagnerait à spécificité égale. */ body.single-product .elementor-420 .elementor-element.elementor-element-2e809904 .wts-vat-text { font-size: 0.46em; font-weight: 700; color: var(--tsp-ink) !important; letter-spacing: 0.02em; text-transform: uppercase; } /* « Éco-participation incluse. » */ .single-product .elementor-420 .elementor-element.elementor-element-2ebce4d, .single-product .elementor-420 .elementor-element.elementor-element-2ebce4d p { font-size: 12px; line-height: 1.4; color: var(--tsp-ink-3); margin: 0; } /* ---------- Compte à rebours de promo (snippet 12111) ---------- */ .single-product .tscd-wrap { margin: 0; width: 100%; max-width: none !important; } /* v2 — le rouge du compte à rebours est aligné sur celui de l'étiquette de promotion de la galerie : #FF0505 */ .single-product .tscd-card { max-width: none; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #FFF1F1; border: 1px solid rgba(255, 5, 5, 0.20); border-radius: var(--tsp-r-sm); padding: 11px 13px; } .single-product .tscd-label { font-family: "Montserrat", sans-serif; font-size: 12.5px; font-weight: 700; line-height: 1.25; color: #FF0505; margin: 0; } .single-product .tscd-time { gap: 4px; } .single-product .tscd-unit { background: #FF0505; border-radius: 8px; padding: 4px 7px; min-width: 38px; } .single-product .tscd-sep { color: #FF0505; opacity: .55; } /* ---------- Réassurance (description courte) ---------- */ .single-product .elementor-420 .elementor-element.elementor-element-e10e1bb { background: var(--tsp-soft); border-radius: var(--tsp-r-sm); padding: 13px 15px; } /* l'icône est posée en retrait plutôt qu'en flex : en flex, le lien « contactez-nous » deviendrait un élément séparé et la phrase se disloquerait */ .single-product .woocommerce-product-details__short-description p { position: relative; padding-left: 27px; font-family: "Montserrat", sans-serif; font-size: 13.5px; font-weight: 600; line-height: 1.45; color: var(--tsp-ink); margin: 0 0 9px; } .single-product .woocommerce-product-details__short-description p:last-child { margin-bottom: 0; } .single-product .woocommerce-product-details__short-description i { position: absolute; left: 0; top: 2px; width: 18px; text-align: center; color: var(--tsp-brand); font-size: 15px; } .single-product .woocommerce-product-details__short-description a { color: var(--tsp-brand); text-decoration: underline; text-underline-offset: 2px; } /* ---------- Paiement en 4× sans frais (bloc PayPal `.ppcp-messages`) ---------- En production, ce bloc est produit par le plugin woocommerce-paypal-payments (message « Pay Later »). Ce plugin n'est PAS installé sur staging : refonte.js y affiche un aperçu `.ts-p-pay` de même allure, qui s'efface tout seul dès que le vrai bloc est présent. Les deux partagent l'habillage ci-dessous. */ /* Consolide le 2026-08-18 : ce bloc etait dupplique dans le CSS du Customizer (post 6221), qui etait emis APRES le theme et ecrasait silencieusement les regles ci-dessous. Le style du Customizer a ete supprime et ses valeurs reprises ici a l'identique -> une seule source de verite. Les selecteurs `.woocommerce div.product` sont conserves pour garder la specificite face au CSS du plugin PayPal. */ .woocommerce div.product .ppcp-messages, .single-product .ppcp-messages, .single-product .ts-p-pay { display: block; width: 100%; margin: 20px 0 0 !important; padding: 12px 16px; background: linear-gradient(135deg, #F0F6FF 0%, #E8F1FF 100%); border: 1px solid rgba(4, 75, 170, 0.12); border-left: 3px solid var(--tsp-brand); border-radius: 8px; position: relative; transition: box-shadow .2s ease; } .woocommerce div.product .ppcp-messages:hover, .single-product .ppcp-messages:hover, .single-product .ts-p-pay:hover { box-shadow: 0 2px 12px rgba(4, 75, 170, 0.1); } .woocommerce div.product .ppcp-messages iframe, .single-product .ppcp-messages iframe { min-height: 20px !important; } .woocommerce div.product .ppcp-messages::before, .single-product .ppcp-messages::before, .single-product .ts-p-pay-label { content: "💳 Facilité de paiement"; display: block; font-family: "Montserrat", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--tsp-brand); margin-bottom: 6px; } /* Responsive du bloc PayPal — deplace du CSS du Customizer le 2026-08-18. */ @media screen and (max-width: 1024px) { .woocommerce div.product .ppcp-messages, .single-product .ppcp-messages, .single-product .ts-p-pay { margin-top: 18px !important; padding: 10px 14px; } .woocommerce div.product .ppcp-messages::before, .single-product .ppcp-messages::before, .single-product .ts-p-pay-label { font-size: 10px; margin-bottom: 5px; } } @media screen and (max-width: 767px) { .woocommerce div.product .ppcp-messages, .single-product .ppcp-messages, .single-product .ts-p-pay { margin-top: 16px !important; padding: 10px 12px; border-radius: 6px; } .woocommerce div.product .ppcp-messages::before, .single-product .ppcp-messages::before, .single-product .ts-p-pay-label { font-size: 10px; margin-bottom: 4px; } } .single-product .ts-p-pay-txt { display: block; font-family: "Montserrat", sans-serif; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--tsp-ink); } .single-product .ts-p-pay-txt b { font-weight: 800; } .single-product .ts-p-pay-note { display: block; margin-top: 4px; font-size: 10.5px; font-weight: 600; color: var(--tsp-ink-3); font-style: italic; } /* ---------- Pastille de stock (snippet 11095) ---------- */ /* le snippet 11095 écrit son CSS en ligne dans la page avec `.woocommerce div.product p.stock.ts-stock { background: none !important }` (0,4,2) : il faut donc au minimum ce préfixe pour le surcharger. */ body.single-product.woocommerce div.product p.stock.ts-stock, body.single-product p.stock.ts-stock { display: inline-flex !important; align-items: center; gap: 8px; margin: 0; padding: 7px 14px 7px 12px !important; border-radius: 999px; background: var(--tsp-ok-bg) !important; color: var(--tsp-ok-ink) !important; font-family: "Montserrat", sans-serif; font-size: 13px !important; font-weight: 700; width: fit-content; visibility: visible; } body.single-product.woocommerce div.product p.stock.ts-stock .ts-stock__dot { color: inherit !important; font-size: 10px; } /* v2 — le point vert « respire » doucement pour attirer l'œil sur la disponibilité. Uniquement quand le produit est réellement en stock. */ body.single-product p.stock.ts-stock.ts-stock--in .ts-stock__dot { animation: ts-p-pouls 2.4s ease-in-out infinite; transform-origin: center; } @keyframes ts-p-pouls { 0%, 62%, 100% { opacity: 1; transform: scale(1); } 78% { opacity: .55; transform: scale(1.45); } } /* v2 — le « ? » de l'infobulle de réapprovisionnement : blanc dans une pastille bleue, au lieu d'un point d'interrogation nu */ body.single-product .ts-tooltip { display: inline-flex; align-items: center; } body.single-product .ts-tooltip .ts-tooltip__btn { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 999px; background: var(--tsp-brand) !important; color: #FFFFFF !important; font-family: "Montserrat", sans-serif; font-size: 11px; font-weight: 800; line-height: 1; cursor: pointer; transition: background-color .2s ease; } body.single-product .ts-tooltip .ts-tooltip__btn:hover { background: var(--tsp-accent) !important; } body.single-product.woocommerce div.product p.stock.ts-stock .ts-stock__label { color: inherit !important; } body.single-product.woocommerce div.product p.stock.ts-stock.ts-stock--out, body.single-product.woocommerce div.product p.stock.ts-stock.out-of-stock { background: var(--tsp-alert-bg) !important; color: var(--tsp-alert-ink) !important; } body.single-product.woocommerce div.product p.stock.ts-stock.ts-stock--back, body.single-product.woocommerce div.product p.stock.ts-stock.available-on-backorder { background: var(--tsp-warn-bg) !important; color: var(--tsp-warn-ink) !important; } /* ---------- v6 — Estimation de livraison (produits en stock) ---------- Ligne posée par refonte.js juste sous la pastille de stock. Le calcul se fait dans le navigateur : la page étant mise en cache 7 jours par Cloudflare, une date calculée côté serveur y serait figée et pourrait être déjà passée. */ body.single-product p.stock.ts-stock.ts-p-has-eta { margin-bottom: 8px !important; } .single-product .ts-p-eta { margin: 0; padding-left: 2px; font-family: "Montserrat", sans-serif; font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--tsp-ok-ink); } .single-product .ts-p-eta b { font-weight: 800; color: #076B47; white-space: nowrap; } @media (max-width: 767px) { .single-product .ts-p-eta { font-size: 12.5px; } } /* ---------- Délai allongé (fermeture exceptionnelle) ---------- Posée par refonte.js quand le mu-plugin `ts-delais-livraison.php` déclare une fermeture qui touche ce produit. La pastille de stock reste VERTE : le produit est bien disponible, c'est l'expédition qui est décalée. Seule la promesse de livraison passe en ambre, avec un « ? » qui l'explique. */ .single-product .ts-p-eta--retard { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; width: fit-content; max-width: 100%; margin-top: 2px; padding: 7px 14px; border-radius: 999px; background: var(--tsp-warn-bg); color: var(--tsp-warn-ink); } .single-product .ts-p-eta--retard b { color: #7A4703; } /* dernière date + « ? » indissociables (voir refonte.js) */ .single-product .ts-p-eta__fin { display: inline-flex; align-items: center; gap: 8px; } /* le « ? » reste BLEU : c'est déjà le code « information cliquable » du site (même composant que l'infobulle de réapprovisionnement), et il ressort mieux sur le fond ambre qu'un « ? » ambre sur ambre. */ /* l'espacement vient déjà du `gap` de la ligne */ .single-product .ts-tooltip--eta { margin-left: 0; } @media (max-width: 767px) { .single-product .ts-p-eta--retard { padding: 7px 12px; } } /* ---------- Variations & nuanciers ---------- */ .single-product form.cart table.variations { width: 100%; margin-bottom: 6px; } .single-product form.cart table.variations th.label, .single-product form.cart table.variations th.label label { font-family: "Montserrat", sans-serif; font-size: 13px; font-weight: 700; color: var(--tsp-ink); padding-bottom: 6px; } .single-product .variable-items-wrapper .variable-item { border-radius: 9px; box-shadow: 0 0 0 1px var(--tsp-line); transition: box-shadow .18s ease, transform .18s ease; } .single-product .variable-items-wrapper .variable-item:hover { transform: translateY(-1px); } .single-product .variable-items-wrapper .variable-item.selected { box-shadow: 0 0 0 2px var(--tsp-accent); } /* ---------- Tableau des tarifs dégressifs ---------- */ body.single-product .elementor-420 .elementor-element.elementor-element-6c2de3e7 .tiered-pricing-table { width: 100%; border: 1px solid var(--tsp-line) !important; border-radius: var(--tsp-r-sm) !important; font-family: "Montserrat", sans-serif; font-size: 13px; overflow: hidden; } body.single-product .tiered-pricing-table thead th { background: var(--tsp-soft) !important; color: var(--tsp-ink) !important; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 9px 8px !important; border: 0 !important; } body.single-product .tiered-pricing-table tbody td { padding: 10px 8px !important; border: 0 !important; border-top: 1px solid var(--tsp-line) !important; } /* ligne correspondant à la quantité choisie : le plugin la peint en bleu via un