/* ============================================================
LES TROPÉZIENNES — CHARTE TYPOGRAPHIQUE v1.0
Playfair Display (H1/H2/noms produits) + DM Sans (tout le reste)
Module override PS 1.7.8 — priority 999, après thème
============================================================ */
/* ── 1. POLICES ──
Chargées par le hook PHP (preconnect + ), PAS par @import :
un @import ici crée une requête chaînée bloquante
(CSS module → CSS Google → woff2). Voir trpzcharte.php. */
/* ── 2. VARIABLES ── */
:root {
--trpz-beige: #faf9f7;
--trpz-brun: #2C2416;
--trpz-sable: #E5D4A4;
--trpz-taupe: #9A8870;
--trpz-terra: #C8503A;
--font-display: 'Playfair Display', Georgia, serif;
--font-body: 'DM Sans', system-ui, sans-serif;
}
/* ── 3. BASE ── */
body {
font-family: var(--font-body) !important;
font-weight: 300;
color: var(--trpz-brun);
background-color: var(--trpz-beige);
-webkit-font-smoothing: antialiased;
}
/* ── 4. H1 — titre catégorie / page ── */
h1,
.page-heading,
#js-product-list-top .h1,
.category-top-menu h1 {
font-family: var(--font-display) !important;
font-size: clamp(26px, 3.5vw, 44px);
font-weight: 700;
font-style: normal;
letter-spacing: 0.01em;
line-height: 1.05;
color: var(--trpz-brun);
font-optical-sizing: auto;
}
/* Titre page panier — plus d'espace et taille augmentée */
.cart-grid .page-heading,
#cart .page-heading,
body#cart h1,
body#cart .page-heading,
.checkout-step h1 {
font-size: clamp(34px, 4vw, 52px) !important;
margin-top: 32px !important;
margin-bottom: 32px !important;
padding-top: 8px !important;
}
/* Bouton "Ajouter" code promo — secondaire, compact (pas aussi gros que Commander) */
.cart-voucher button,
.cart-summary-voucher button,
#promo-code button,
.promo-code button,
.js-discount button,
.cart-voucher .btn-primary,
[class*="voucher"] button[type="submit"] {
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
background-color: #f0ece3 !important;
color: var(--trpz-brun) !important;
border: 1px solid #C8BFB0 !important;
border-radius: 0 !important;
padding: 0 16px !important;
height: auto !important;
white-space: nowrap !important;
}
.cart-voucher button:hover,
[class*="voucher"] button[type="submit"]:hover {
background-color: #e6ddc9 !important;
border-color: var(--trpz-brun) !important;
}
/* Champ code promo à la charte */
.cart-voucher input[type="text"],
#promo-code input,
[class*="voucher"] input[type="text"] {
font-family: var(--font-body) !important;
font-size: 13px !important;
font-weight: 300 !important;
color: var(--trpz-brun) !important;
background-color: #faf9f7 !important;
border: 1px solid #C8BFB0 !important;
border-radius: 0 !important;
padding: 10px 12px !important;
}
/* ── 5. H2 — sous-titres sections ── */
h2,
.h2 {
font-family: var(--font-display) !important;
font-size: clamp(18px, 2.2vw, 28px);
font-weight: 400;
font-style: italic;
letter-spacing: 0.01em;
line-height: 1.2;
color: var(--trpz-brun);
}
/* ── 6. NOM PRODUIT en card listing ── */
.product-miniature .product-title,
.product-miniature .product-title a,
.product-miniature h2.product-title,
.product-miniature h3.product-title {
font-family: var(--font-display) !important;
font-size: 15px !important;
font-weight: 700;
font-style: normal;
letter-spacing: 0.01em;
line-height: 1.25;
color: var(--trpz-brun);
text-decoration: none;
}
/* ── 7. NAVIGATION principale + MÉGA-MENU ── */
/* Onglets nav niveau 0 */
.main-menu--desktop .main-menu__tree > li > a,
#header .top-menu > li > a,
.js-top-menu > li > a {
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 400 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
color: var(--trpz-brun) !important;
}
/* Onglet actif / hover — soulignement discret */
.main-menu--desktop .main-menu__tree > li:hover > a,
.main-menu--desktop .main-menu__tree > li.active > a {
color: var(--trpz-brun) !important;
}
/* Panneau déroulant (menu-container) — fond charte */
.main-menu--desktop .main-menu__tree > li .menu-container {
background-color: #faf9f7 !important;
border-top: 0.5px solid #E8E3DC !important;
border-bottom: 0.5px solid #D4C9B0 !important;
padding: 28px 0 !important;
box-shadow: 0 8px 24px rgba(44,36,22,0.06) !important;
}
/* Titres de famille (data-depth 1) — Playfair italique */
.main-menu--desktop .menu-container a[data-depth="1"],
.main-menu__title {
font-family: var(--font-display) !important;
font-size: 15px !important;
font-weight: 700 !important;
font-style: italic !important;
letter-spacing: 0.01em !important;
color: var(--trpz-brun) !important;
margin-bottom: 6px !important;
}
/* Retirer la flèche/pseudo après les titres famille */
.main-menu--desktop .menu-container a[data-depth="1"]:after {
display: none !important;
}
/* Sous-liens (data-depth 2) — DM Sans léger */
.main-menu--desktop .menu-container a[data-depth="2"] {
font-family: var(--font-body) !important;
font-size: 13px !important;
font-weight: 300 !important;
letter-spacing: 0.02em !important;
color: #4A4235 !important;
padding: 5px 0 !important;
transition: color 0.15s ease;
}
.main-menu--desktop .menu-container a[data-depth="2"]:hover {
color: var(--trpz-brun) !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
}
/* Lien "Voir tout" — mis en avant */
.main-menu--desktop .menu-container a[data-depth="2"][href*="voir-tout"],
.main-menu--desktop .menu-container .see-all a {
font-weight: 500 !important;
color: var(--trpz-brun) !important;
text-decoration: underline !important;
text-underline-offset: 4px !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
font-size: 11px !important;
}
/* Supprimer le tooltip title parasite sous l'onglet actif */
.main-menu--desktop .main-menu__tree > li > a[title]:hover::after,
.main-menu__tree [title]::after {
display: none !important;
content: none !important;
}
/* Menu mobile — cohérence typo */
.main-menu__mobile .menu a {
font-family: var(--font-body) !important;
font-size: 14px !important;
font-weight: 300 !important;
color: var(--trpz-brun) !important;
}
.main-menu__mobile .menu .h5,
/* Popover (autres menus déroulants éventuels) */
.popover .popover-body a {
font-family: var(--font-body) !important;
font-size: 13px;
font-weight: 300;
letter-spacing: 0.02em;
color: var(--trpz-brun);
}
.popover {
background-color: #faf9f7 !important;
border: 0.5px solid #D4C9B0 !important;
}
/* ── 8. BODY TEXT ── */
p, li, span, label {
font-family: var(--font-body);
font-weight: 300;
line-height: 1.75;
}
/* Label matière / couleur sous nom produit */
.product-miniature .product-description,
.product-miniature .product-flags span,
.product-miniature .variant-links {
font-family: var(--font-body) !important;
font-size: 10px;
font-weight: 300;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--trpz-taupe);
}
/* Flags produit (Épuisé, Soldes...) — sans padding */
.product-flags,
.product-flags li,
.product-flags .product-flag {
padding: 0 !important;
}
/* ── 9. PRIX ── */
.product-price,
.price,
.product-miniature .price {
font-family: var(--font-body) !important;
font-size: 15px;
font-weight: 500;
color: var(--trpz-brun);
}
.regular-price,
.product-miniature .regular-price {
font-family: var(--font-body) !important;
font-size: 13px;
font-weight: 300;
color: var(--trpz-taupe);
text-decoration: line-through;
}
.has-discount .price,
.product-miniature .discount-percentage {
color: var(--trpz-terra) !important;
}
/* ── 10. BREADCRUMB ── */
.breadcrumb,
.breadcrumb a,
.breadcrumb-item {
font-family: var(--font-body) !important;
font-size: 11px;
font-weight: 300;
letter-spacing: 0.04em;
color: var(--trpz-taupe);
}
.breadcrumb-item.active {
font-weight: 400;
color: var(--trpz-brun);
}
/* ── 11. CTA & HIÉRARCHIE PRIX FICHE PRODUIT ── */
/* ── Prix principal : ancre visuelle, taille affirmée ── */
.product__current-price,
.product__prices .product__current-price {
font-family: var(--font-body) !important;
font-size: 26px !important;
font-weight: 500 !important;
letter-spacing: -0.01em;
color: var(--trpz-brun) !important;
line-height: 1;
}
/* Bloc discount (prix barré + badge %) — sélecteurs RÉELS du thème */
.product__discount {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
margin: 0 !important;
}
/* Prix barré (nom réel : product__price-regular) */
.product__price-regular,
.product__prices .product__price-regular,
.product__prices .regular-price,
.prices__wrapper .regular-price {
font-family: var(--font-body) !important;
font-size: 16px !important;
font-weight: 300 !important;
color: var(--trpz-taupe) !important;
text-decoration: line-through !important;
}
/* Badge pourcentage -20% (façon Odaje) — visible SEULEMENT si rempli par le JS */
.product__discount-percentage.trpz-badge-filled,
.trpz-discount-badge {
display: inline-block !important;
font-family: var(--font-body) !important;
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: 0.04em !important;
color: #faf9f7 !important;
background-color: var(--trpz-terra) !important;
padding: 3px 8px !important;
border-radius: 0 !important;
line-height: 1.3 !important;
}
/* Badge non rempli (vide ou whitespace) : totalement masqué, pas de fond terracotta parasite */
.product__discount-percentage:not(.trpz-badge-filled) {
display: none !important;
background: none !important;
padding: 0 !important;
}
/* Bloc prix cloné sous le titre (trpz-prices-injected) — garantir l'affichage du trio */
.trpz-prices-injected .prices__wrapper {
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin-bottom: 0 !important;
flex-wrap: wrap !important;
}
.trpz-prices-injected .product__discount {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
order: 1 !important;
}
.trpz-prices-injected .product__discount-percentage {
order: 0 !important; /* badge en premier, façon Odaje */
}
.trpz-prices-injected .product__current-price {
order: 2 !important;
}
/* Dispo "EN STOCK" toujours en dernier (à droite du prix) */
.trpz-prices-injected #product-availability,
.trpz-prices-injected .product-availability {
order: 3 !important;
}
/* Wrapper prix + dispo : alignement propre */
.prices__wrapper {
display: flex !important;
align-items: center !important;
gap: 12px !important;
margin-bottom: 20px !important;
}
/* ── CTA Ajouter au panier — conversion ── */
.btn-primary,
.add-to-cart,
button[data-button-action="add-to-cart"] {
font-family: var(--font-body) !important;
font-size: 14px !important;
font-weight: 500 !important;
letter-spacing: 0.2em;
text-transform: uppercase;
background-color: var(--trpz-brun) !important;
color: #faf9f7 !important;
border: none !important;
border-radius: 0 !important;
/* Pleine largeur + hauteur généreuse */
width: 100% !important;
height: 54px !important;
padding: 0 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
/* Micro-animation */
transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
box-shadow: 0 2px 8px rgba(44,36,22,0.15);
position: relative;
overflow: hidden;
}
/* Hover : léger lift + sable */
.btn-primary:hover,
.add-to-cart:hover {
background-color: #3D3220 !important;
color: var(--trpz-sable) !important;
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(44,36,22,0.22) !important;
}
/* Active : press feedback */
.btn-primary:active,
.add-to-cart:active {
transform: translateY(0) !important;
box-shadow: 0 1px 4px rgba(44,36,22,0.15) !important;
}
/* CTA bloqué tant qu'aucune taille choisie */
.trpz-cta-locked,
.product__add-to-cart button.trpz-cta-locked,
button.trpz-cta-locked[disabled] {
background-color: #C4BBAC !important;
color: #faf9f7 !important;
cursor: not-allowed !important;
opacity: 1 !important;
box-shadow: none !important;
transform: none !important;
pointer-events: auto !important;
}
.trpz-cta-locked:hover {
background-color: #C4BBAC !important;
transform: none !important;
box-shadow: none !important;
}
/* Icône panier dans le CTA */
.btn-primary img,
.add-to-cart img,
.btn-with-icon img {
width: 16px !important;
height: 16px !important;
filter: brightness(0) invert(1) !important;
opacity: 0.85;
}
/* Wishlist fiche produit — cercle sobre */
.pw-fav-toggle,
.cart-wishlist .pw-fav-toggle {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 44px !important;
height: 44px !important;
top: 0 !important;
border: none !important;
border-radius: 50% !important;
background: transparent !important;
transition: border-color 0.2s ease, background 0.2s ease;
flex-shrink: 0;
}
/* Pas de bordure sur les états add/remove (listing + fiche) */
.product-miniature .pw-fav-toggle .pw-fav-add,
.product-miniature .pw-fav-toggle .pw-fav-remove,
.pw-fav-toggle .pw-fav-add,
.pw-fav-toggle .pw-fav-remove {
border: none !important;
}
.pw-fav-toggle:hover {
background: #f0ece3 !important;
}
/* Aligner CTA + wishlist côte à côte */
.d-flex.g-2.align-items-center,
.product-actions__button.add {
display: flex !important;
gap: 8px !important;
align-items: stretch !important;
}
.product-actions__button.add {
flex: 1 !important;
}
/* Empêcher le CTA de casser sur plusieurs lignes */
.product-actions__button.add .btn-primary,
.product__add-to-cart .btn-primary,
.add-to-cart {
white-space: nowrap !important;
}
/* ── Bloc alerte réappro (mail alert, taille épuisée) ── */
/* Forcer la disposition verticale : le bloc passe SOUS le CTA, pleine largeur */
.product__actions .row,
.js-product-actions .row {
flex-direction: column !important;
}
/* Conteneur mail alert */
.mailalert-block,
#mailalert-link-block,
.js-mailalert,
[class*="mailalert"] {
position: relative !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin-top: 16px !important;
padding: 16px !important;
background-color: #f5f2ec !important;
border: 0.5px solid #E8E3DC !important;
border-radius: 0 !important;
z-index: auto !important;
clear: both !important;
float: none !important;
inset: auto !important;
}
/* Texte d'intro "Intéressé par ce produit ?" */
.mailalert-block p,
#mailalert-link-block p,
[class*="mailalert"] p,
.mailalert-prompt {
font-family: var(--font-body) !important;
font-size: 13px !important;
font-weight: 300 !important;
line-height: 1.5 !important;
color: var(--trpz-brun) !important;
margin-bottom: 12px !important;
}
/* Champ email de l'alerte */
.mailalert-block input[type="email"],
#mailalert-link-block input[type="email"],
[class*="mailalert"] input[type="text"],
[class*="mailalert"] input[type="email"] {
font-family: var(--font-body) !important;
font-size: 14px !important;
font-weight: 300 !important;
color: var(--trpz-brun) !important;
background-color: #faf9f7 !important;
border: 1px solid #C8BFB0 !important;
border-radius: 0 !important;
padding: 12px 14px !important;
height: auto !important;
width: 100% !important;
}
.mailalert-block input:focus,
[class*="mailalert"] input:focus {
border-color: var(--trpz-brun) !important;
box-shadow: none !important;
outline: none !important;
}
/* Bouton VALIDER de l'alerte (module ps_emailalerts : .js-mailalert-add) */
/* NE PAS forcer display ni width : le module gère l'affichage (display:none par défaut,
révélé au bon moment). On ne fait qu'appliquer la charte quand il est visible. */
.mailalert-block button,
#mailalert-link-block button,
[class*="mailalert"] button[type="submit"],
.js-mailalert .js-mailalert-add,
.mailalert-block .btn {
font-family: var(--font-body) !important;
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
background-color: var(--trpz-brun) !important;
color: #faf9f7 !important;
border: none !important;
border-radius: 0 !important;
padding: 12px 20px !important;
margin-top: 8px !important;
width: auto !important;
}
/* Respecter le masquage natif du bouton (le module le révèle lui-même) */
.js-mailalert .js-mailalert-add[style*="display: none"],
.js-mailalert .js-mailalert-add[style*="display:none"] {
display: none !important;
}
/* Message de retour (succès/erreur) à la charte */
.js-mailalert .alert-success {
font-family: var(--font-body) !important;
font-size: 13px !important;
color: #21834d !important;
background-color: #EDF4EF !important;
border: 0.5px solid #cfe3d6 !important;
border-radius: 0 !important;
padding: 10px 14px !important;
}
.mailalert-block button:hover,
[class*="mailalert"] button[type="submit"]:hover,
.js-mailalert .js-mailalert-add:hover {
background-color: #3D3220 !important;
}
/* ── Espacement vertical fiche produit ── */
/* Nom produit fiche (fusion — voir aussi désactivation ancien doublon plus bas) */
.product__name,
h1.product__name,
.h4.product__name {
font-family: var(--font-display) !important;
font-size: clamp(24px, 3vw, 36px) !important;
font-weight: 700;
font-style: normal;
letter-spacing: 0.01em;
line-height: 1.05;
color: var(--trpz-brun);
margin-bottom: 6px !important;
}
/* Sous-titre court (Sandales femme) — fond transparent */
.product__description-short,
.product__description-short.rich-text {
background: transparent !important;
margin-bottom: 2px !important;
line-height: 1.5 !important;
}
.product__description-short p {
font-family: var(--font-body) !important;
font-size: 14px !important;
font-weight: 300;
color: var(--trpz-taupe) !important;
margin: 0 0 4px !important;
line-height: 1.5 !important;
}
/* Listes à puces resserrées dans la description haute */
.product__description-short ul,
.product__description-short ol {
margin: 6px 0 !important;
padding-left: 18px !important;
}
.product__description-short ul li,
.product__description-short ol li {
margin-bottom: 2px !important;
line-height: 1.45 !important;
}
/* Lien "En savoir +" */
.btn.link.btn-more {
font-family: var(--font-body) !important;
font-size: 12px;
font-weight: 400;
color: var(--trpz-brun) !important;
text-decoration: underline !important;
text-underline-offset: 3px;
padding: 0 !important;
background: none !important;
border: none !important;
margin: 6px 0 16px !important;
display: inline-block;
cursor: pointer;
}
/* Contenu de description tronqué (toggle via JS) */
.product__description-short .trpz-desc-hidden {
display: none !important;
}
/* Bloc variants — espacement réduit entre couleur et taille */
.product__variants {
margin-bottom: 12px !important;
}
.product__variants .variant,
.page-product .product__variants .variant {
margin-bottom: 10px !important;
border: 0 !important;
padding: 0 !important;
}
/* Bloc actions (CTA) */
.product__add-to-cart,
.product-add-to-cart {
margin-top: 8px !important;
}
/* Séparateur supprimé */
.product__add-to-cart::before {
display: none !important;
}
/* ── 12. MODULE ALMA — paiement 3x ── */
/* Widget Alma masqué quand le produit n'est pas éligible (posé par le JS) */
.trpz-alma-hidden {
display: none !important;
}
/* Widget Alma : fond transparent, pas de border */
.alma-pp-container,
.alma-payment-plans-container,
.alma-pp-container.ps17 {
background-color: transparent !important;
border: none !important;
padding: 0 !important;
}
/* Conteneur interne obfusqué Alma */
[class*="_widgetContainer_"],
[class*="alma-widget-container"],
[class*="alma-payment-plans-container"] {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Ligne principale : logo + plans + bouton info */
[class*="_primaryContainer_"] {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 10px 14px !important;
background: #f5f2ec !important;
border: 0.5px solid #D4C9B0 !important;
border-radius: 0 !important;
}
/* Logo Alma SVG */
[class*="_primaryContainer_"] svg {
height: 16px !important;
width: auto !important;
opacity: 0.75;
flex-shrink: 0;
}
/* Bouton plan (ex: "3x") */
[class*="_planButton_"],
[class*="alma-payment-plans-active-option"],
[class*="alma-payment-plans-eligibility-options"] button {
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.08em !important;
color: var(--trpz-brun) !important;
background: transparent !important;
border: 1px solid #C8BFB0 !important;
border-radius: 4px !important;
padding: 3px 10px !important;
cursor: pointer;
transition: all 0.15s ease;
}
[class*="_planButton_"][class*="_active_"],
[class*="alma-payment-plans-active-option"][aria-selected="true"] {
background: var(--trpz-brun) !important;
color: #faf9f7 !important;
border-color: var(--trpz-brun) !important;
}
/* Bouton "En savoir plus" / icône info */
[class*="_knowMore_"],
[class*="alma-payment-plans-know-more-action"] {
background: transparent !important;
border: none !important;
padding: 0 !important;
cursor: pointer;
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex: 1;
}
/* Zone texte info (ex: "À partir de 80,00€") */
[class*="_infoContainer_"],
[class*="_info_"],
[class*="alma-payment-plans-payment-info"] {
background: transparent !important;
border: none !important;
padding: 0 !important;
}
[class*="_info_"] p,
[class*="alma-payment-plans-payment-info"] p {
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 300 !important;
color: var(--trpz-taupe) !important;
margin: 0 !important;
letter-spacing: 0.02em;
}
/* Non éligible (prix < 80€) : afficher sobrement */
[class*="_notEligible_"] {
opacity: 0.6;
}
/* Texte sous le CTA (mode "après le prix") */
.alma-pp-container.ps17 ~ *,
.tropz-alma-container p {
font-family: var(--font-body) !important;
font-size: 13px !important;
font-weight: 300 !important;
color: var(--trpz-taupe) !important;
letter-spacing: 0.02em;
}
/* Encadré Alma dans le bloc prix (image 2 — style carte) */
#product .product__prices .alma-pp-container,
.product__actions .alma-pp-container {
margin-top: 12px !important;
}
/* Annuler le fond blanc de la carte Alma (encadré gris) */
[id^="alma-installments-"] {
background: transparent !important;
border: none !important;
padding: 0 !important;
}
/* Texte "Ou payez X € puis..." sous le bouton (widget texte) */
.product__add-to-cart ~ .tropz-alma-container,
.tropz-alma-container {
border: none !important;
padding-top: 0 !important;
margin-top: 0 !important;
}
/* Masquer l'annonce screen reader Alma */
[class*="_announceText_"] {
display: none !important;
}
.facets-title,
#search_filters .facet .facet-title,
.sort-by-row label,
#js-product-list-header .total-products {
font-family: var(--font-body) !important;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--trpz-brun);
}
#search_filters .facet-label,
#search_filters .facet ul li a {
font-family: var(--font-body) !important;
font-size: 12px;
font-weight: 300;
color: var(--trpz-brun);
}
/* ── 12b. BLOC RÉASSURANCE (injecté JS) — livraison / retour / relais ── */
.trpz-reassurance {
display: flex !important;
flex-direction: column !important;
gap: 7px !important;
margin: 16px 0 4px !important;
padding-top: 14px !important;
border-top: 0.5px solid #E8E3DC !important;
}
.trpz-reassurance-item {
display: flex !important;
align-items: center !important;
gap: 9px !important;
font-family: var(--font-body) !important;
font-size: 12px !important;
font-weight: 300 !important;
letter-spacing: 0.02em !important;
color: #6B6152 !important;
line-height: 1.3 !important;
}
.trpz-reassurance-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 18px !important;
height: 18px !important;
font-size: 11px !important;
color: var(--trpz-taupe) !important;
border: 0.5px solid #D4C9B0 !important;
border-radius: 50% !important;
flex-shrink: 0 !important;
}
/* ── 13. BANDEAU PROMO ── */
#header-banner,
#header-banner p,
.header-banner,
.header-top .banner p,
.header .header__banner.top-banner-pro,
.header__banner.top-banner-pro,
header .header-banner,
#topbannerpro,
#topbannerpro > div,
#topbannerpro > div > p,
.top-banner-pro .bx-wrapper,
.top-banner-pro .bx-viewport,
.top-banner-pro .bxslider,
.top-banner-pro .bxslider > div,
#topbannerpro .bx-clone {
font-family: var(--font-body) !important;
font-size: 11px;
font-weight: 300;
letter-spacing: 0.12em;
background-color: #f0ece3 !important;
color: #000000 !important;
}
/* Texte du bandeau forcé en blanc inline par le module → forcer noir */
.header__banner.top-banner-pro *,
.header .header__banner.top-banner-pro *,
#topbannerpro span,
#topbannerpro div,
.top-banner-pro .bxslider span,
.top-banner-pro .bx-clone span {
color: #000000 !important;
background-color: transparent !important;
}
/* Pictos réseaux sociaux du bandeau haut : les fichiers sources sont blancs
(pensés pour l'ancien fond foncé #221613). Sur le fond crème de la charte ils
étaient invisibles → forcés en noir.
brightness(0) plutôt qu'invert(100%) : le noir est garanti même si les
fichiers passaient un jour en couleur (une inversion donnerait alors leur
complémentaire, pas du noir).
Scopé au bandeau haut : les mêmes pictos du footer et du menu mobile
ne sont pas concernés. */
.header .header__banner.top-banner-pro .block-social a img,
.header__banner.top-banner-pro .block-social img {
filter: brightness(0) !important;
}
/* Header sticky (au scroll) : fond beige de la charte */
.header.fixed-header,
.header.fixed-header .offcanvas {
background-color: #faf9f7 !important;
}
/* ── 13b. TYPO MENU (AdvancedTopMenu) — DM Sans petites capitales espacées ── */
.advtm_menu_span,
.advtm_menu a.a-niveau1,
.desktop-nav .advtm_menu_span,
.desktop-nav a.a-niveau1 {
font-family: var(--font-body) !important;
font-size: 12.5px !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
}
/* Padding des items du méga-menu déroulant */
.desktop-nav #adtm_menu div.adtm_column_wrap ul.adtm_elements li {
padding: 10px 10px !important;
}
/* ── 14. BADGES / FLAGS ── */
.product-flag {
font-family: var(--font-body) !important;
font-size: 9px !important;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
border-radius: 0 !important;
}
.product-flag.new {
background-color: var(--trpz-brun) !important;
color: var(--trpz-sable) !important;
}
.product-flag.discount,
.product-flag.on-sale {
background-color: var(--trpz-terra) !important;
color: #fff !important;
}
/* Badges réels sur image (.badge dans .product-flags-left) */
.product-flags-left .badge {
font-family: var(--font-body) !important;
font-size: 10px !important;
font-weight: 500 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
border-radius: 0 !important;
padding: 4px 8px !important;
}
.product-flags-left .badge.discount {
background-color: var(--trpz-terra) !important;
color: #faf9f7 !important;
}
.product-flags-left .badge.on-sale {
background-color: var(--trpz-terra) !important;
color: #faf9f7 !important;
}
/* Sur la fiche produit, masquer le "Promo !" redondant (le badge -20% prix suffit) */
.page-product .MagicZoom .product-flags-left .badge.on-sale,
.page-product .MagicToolboxContainer .badge.on-sale {
display: none !important;
}
/* Sur le listing, éviter le doublon badge image : garder "Promo !", masquer le -20% image */
/* (le -20% s'affiche déjà près du prix dans la carte) */
.product-miniature .product-flags-left .badge.discount {
display: none !important;
}
/* ── 15. FOND ── */
#main,
.page-wrapper,
#content-wrapper,
#content {
background-color: var(--trpz-beige);
}
/* ── 15a. PAGE LOGIN / COMPTE ── */
/* Titre "S'identifier" */
.title-account,
.page-header .h1 .title-account,
#authentication .page-header h1 {
font-family: var(--font-display) !important;
font-size: clamp(28px, 3vw, 40px) !important;
font-weight: 400 !important;
font-style: italic !important;
color: var(--trpz-brun) !important;
}
/* Carte de connexion */
.login.card,
#authentication .login {
background-color: #faf9f7 !important;
border: 0.5px solid #E8E3DC !important;
border-radius: 0 !important;
box-shadow: 0 4px 20px rgba(44,36,22,0.05) !important;
}
/* Labels formulaire */
.login .form-label,
#authentication .form-label,
.form-validation .form-label,
#customer-form .form-label,
.page-customer-account .form-label,
.checkout .form-label {
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: var(--trpz-taupe) !important;
margin-bottom: 6px !important;
}
/* Champs input */
.login .form-control,
#authentication .form-control,
.form-validation .form-control,
#customer-form .form-control,
.page-customer-account .form-control,
.checkout .form-control {
font-family: var(--font-body) !important;
font-size: 14px !important;
font-weight: 300 !important;
color: var(--trpz-brun) !important;
background-color: #faf9f7 !important;
border: 1px solid #C8BFB0 !important;
border-radius: 0 !important;
padding: 12px 14px !important;
height: auto !important;
}
.login .form-control:focus,
#authentication .form-control:focus,
#customer-form .form-control:focus,
.checkout .form-control:focus {
border-color: var(--trpz-brun) !important;
box-shadow: none !important;
outline: none !important;
}
/* CORRECTION MAJEURE : bouton "Montrer/Cacher" mot de passe */
/* Il est en btn-primary donc brun plein pleine largeur — le rendre discret */
/* CORRECTION : bouton "Montrer/Cacher" mot de passe — TOUS formulaires */
/* (login, création compte, tunnel, adresse...) */
.show-password,
.show-password.btn-primary,
.password-field .show-password,
.input-group .show-password,
button[data-action="show-password"] {
background-color: transparent !important;
background: transparent !important;
border: 1px solid #C8BFB0 !important;
border-left: none !important;
border-radius: 0 !important;
padding: 0 14px !important;
width: auto !important;
min-width: 48px !important;
max-width: 56px !important;
flex: 0 0 auto !important;
height: auto !important;
}
.show-password:hover,
button[data-action="show-password"]:hover {
background-color: #f0ece3 !important;
}
.show-password img,
button[data-action="show-password"] img {
filter: brightness(0) saturate(100%) invert(15%) sepia(20%) saturate(600%) hue-rotate(5deg) !important;
opacity: 0.6 !important;
margin: 0 !important;
width: 18px !important;
height: auto !important;
}
/* L'input-group doit rester en ligne — TOUS formulaires */
.input-group.password-field,
.password-field.js-parent-focus,
.login .input-group,
#authentication .input-group {
display: flex !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
}
/* Message d'aide mot de passe */
.form-informations-subtitle,
.login .text-muted {
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 300 !important;
color: var(--trpz-taupe) !important;
font-style: italic;
}
/* Bouton Connexion (primaire) */
#submit-login,
.login #submit-login.btn-primary {
font-family: var(--font-body) !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
background-color: var(--trpz-brun) !important;
color: #faf9f7 !important;
border: none !important;
border-radius: 0 !important;
padding: 14px 20px !important;
}
#submit-login:hover {
background-color: #3D3220 !important;
}
/* Lien "Mot de passe oublié" + "Créez votre compte" */
.login__forgot-password a,
.login__register-prompt a,
.create-one a {
font-family: var(--font-body) !important;
font-size: 13px !important;
font-weight: 400 !important;
color: var(--trpz-brun) !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
}
.no-account {
font-family: var(--font-body) !important;
font-size: 13px !important;
font-weight: 300 !important;
color: var(--trpz-taupe) !important;
}
/* Séparateur "Ou connectez-vous avec" */
.ets_solo_or span,
.login__separator {
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 400 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: var(--trpz-taupe) !important;
}
/* Titre "Se connecter avec un compte social" */
.ets_solo_social_title {
font-family: var(--font-display) !important;
font-size: 18px !important;
font-weight: 400 !important;
font-style: italic !important;
color: var(--trpz-brun) !important;
}
/* Texte RGPD */
.rgpd-text p {
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 300 !important;
line-height: 1.6 !important;
color: var(--trpz-taupe) !important;
}
/* ── Formulaire création de compte (customer-form) ── */
/* Tunnel + panier : retirer le fond du wrapper */
body#checkout .wrapper,
body#checkout #wrapper,
#checkout .wrapper,
body#cart .wrapper,
body#cart #wrapper,
#cart .wrapper {
background-color: transparent !important;
}
/* Mon compte : fond gris natif du thème → beige de la charte */
body#my-account .wrapper,
body#my-account #wrapper,
#my-account .wrapper {
background-color: #faf9f7 !important;
}
/* Titre de section tunnel → Playfair italique */
#checkout-personal-information-step .step-title,
.checkout-step .step-title,
#checkout .content-title,
.checkout-process .step-title,
section.checkout-step h1,
section.checkout-step h2 {
font-family: var(--font-display) !important;
font-size: clamp(22px, 2.5vw, 30px) !important;
font-weight: 400 !important;
font-style: italic !important;
color: var(--trpz-brun) !important;
letter-spacing: 0.01em !important;
}
/* Onglets "Commander en tant qu'invité / Connexion" → DM Sans sobre */
#checkout-guest-form .nav-link,
.checkout-step .nav-tabs .nav-link,
#customer-form ~ * .nav-link,
.identification__tabs a,
a[data-link-action="show-guest-form"],
a[data-link-action="show-login-form"] {
font-family: var(--font-body) !important;
font-size: 13px !important;
font-weight: 400 !important;
letter-spacing: 0.04em !important;
color: var(--trpz-taupe) !important;
text-transform: none !important;
}
/* Onglet actif */
#checkout-guest-form .nav-link.active,
.checkout-step .nav-tabs .nav-link.active,
.identification__tabs a.active {
font-weight: 500 !important;
color: var(--trpz-brun) !important;
text-decoration: underline !important;
text-underline-offset: 4px !important;
}
/* "Créer un compte" — discret, aligné sur les labels (pas un titre) */
.form-informations-title {
font-family: var(--font-body) !important;
font-size: 13px !important;
font-weight: 500 !important;
font-style: normal !important;
letter-spacing: 0.04em !important;
color: var(--trpz-brun) !important;
}
.form-informations-option {
font-family: var(--font-body) !important;
font-size: 12px !important;
font-weight: 300 !important;
color: var(--trpz-taupe) !important;
}
/* Civilité (radios) + cases à cocher RGPD/newsletter */
#customer-form .civility_form span,
#customer-form .form-check-label,
.page-customer-account .form-check-label {
font-family: var(--font-body) !important;
font-size: 13px !important;
font-weight: 300 !important;
color: var(--trpz-brun) !important;
}
/* Radios et checkboxes cochés — couleur charte */
#customer-form .form-check-input:checked,
.page-customer-account .form-check-input:checked {
background-color: var(--trpz-brun) !important;
border-color: var(--trpz-brun) !important;
}
#customer-form .form-check-input:focus,
.page-customer-account .form-check-input:focus {
box-shadow: 0 0 0 2px rgba(44,36,22,0.15) !important;
border-color: var(--trpz-brun) !important;
}
/* ── Dashboard "Mon compte" : cartes de navigation ── */
/* Titre de bienvenue */
.page-customer .title-page,
.page-header .title-page {
font-family: var(--font-display) !important;
color: var(--trpz-brun) !important;
}
/* Grille de cartes (conteneur réel : .customer-link) */
.customer-link {
display: flex !important;
flex-wrap: wrap !important;
gap: 14px !important;
}
/* Chaque carte : les liens .customer-link__link ET les liens modules (col-* avec .link-item) */
.customer-link > a {
background-color: #ffffff !important;
border: 0.5px solid #E8E3DC !important;
border-radius: 0 !important;
box-shadow: none !important;
transition: border-color 0.15s ease, background-color 0.15s ease !important;
flex: 1 1 calc(33.333% - 14px) !important;
min-width: 200px !important;
}
/* Contenu de la carte (span.link-item) */
.customer-link > a .link-item {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
padding: 28px 16px !important;
font-family: var(--font-body) !important;
font-weight: 500 !important;
letter-spacing: 0.02em !important;
color: var(--trpz-brun) !important;
text-transform: uppercase !important;
font-size: 13px !important;
text-align: center !important;
}
/* Icônes des cartes (img svg + material-icons Payplug) */
.customer-link > a .link-item img,
.customer-link > a .link-item .material-icons {
margin: 0 !important;
color: var(--trpz-brun) !important;
}
/* Hover : liseré + fond sable léger */
.customer-link > a:hover {
background-color: #f5f2ec !important;
border-color: var(--trpz-taupe) !important;
}
/* ── Menu latéral gauche (.account-menu) ── */
.account-menu__title {
font-family: var(--font-display) !important;
color: var(--trpz-brun) !important;
}
.account-menu__line .link-item,
.account-menu a .link-item {
font-family: var(--font-body) !important;
font-size: 14px !important;
color: var(--trpz-brun) !important;
}
.account-menu__line:hover .link-item {
color: var(--trpz-terra) !important;
}
/* Déconnexion en bas du menu latéral : discret */
.account-menu--signout .link-item {
color: var(--trpz-taupe) !important;
}
/* Texte des mentions dans les checkbox (em, p) */
#customer-form .form-check-label em,
#customer-form .form-check-label p {
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 300 !important;
font-style: italic !important;
color: var(--trpz-taupe) !important;
}
/* Bouton "Continuer" (création compte / tunnel) */
#customer-form .continue.btn-primary,
.form-footer .continue,
button[data-link-action="register-new-customer"] {
font-family: var(--font-body) !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
background-color: var(--trpz-brun) !important;
color: #faf9f7 !important;
border: none !important;
border-radius: 0 !important;
padding: 14px 24px !important;
}
button[data-link-action="register-new-customer"]:hover {
background-color: #3D3220 !important;
}
/* Bouton désactivé (avant validation formulaire) */
#customer-form .continue.btn-primary.disabled,
.form-footer .continue.disabled {
background-color: #C4BBAC !important;
color: #faf9f7 !important;
cursor: not-allowed !important;
opacity: 1 !important;
}
/* ── CTA "Passer la commande" (confirmation checkout) — brun charte plein ── */
/* L'action la plus importante du tunnel doit dominer visuellement */
#payment-confirmation button,
#payment-confirmation .btn-primary,
#payment-confirmation button[type="submit"],
.js-payment-confirmation button,
.ps-shown-by-js #payment-confirmation button {
font-family: var(--font-body) !important;
font-size: 14px !important;
font-weight: 500 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
background-color: var(--trpz-brun) !important;
color: #faf9f7 !important;
border: none !important;
border-radius: 0 !important;
padding: 18px 24px !important;
width: 100% !important;
}
#payment-confirmation button:hover,
.js-payment-confirmation button:hover {
background-color: #3D3220 !important;
}
/* État désactivé (avant coche CGV) — grisé sable, pas délavé */
#payment-confirmation button:disabled,
#payment-confirmation button.disabled {
background-color: #C4BBAC !important;
color: #faf9f7 !important;
cursor: not-allowed !important;
opacity: 1 !important;
}
/* ── 15a-bis. WIDGET MONDIAL RELAY (point relais) ── */
/* Titre "Sélectionnez votre Point Relais" */
.MR-Widget .MRW-Title {
font-family: var(--font-display) !important;
font-size: 16px !important;
font-weight: 400 !important;
font-style: italic !important;
color: var(--trpz-brun) !important;
background-color: #f5f2ec !important;
padding: 14px 16px !important;
}
/* Bouton "Chercher" (vert Mondial Relay → charte) */
.MR-Widget .MRW-BtGo {
font-family: var(--font-body) !important;
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
background-color: var(--trpz-brun) !important;
border-color: var(--trpz-brun) !important;
border-radius: 0 !important;
color: #faf9f7 !important;
}
/* Champs de recherche ville/CP */
.MR-Widget .iArg0,
.MR-Widget .Arg2 {
font-family: var(--font-body) !important;
border: 1px solid #C8BFB0 !important;
border-radius: 0 !important;
color: var(--trpz-brun) !important;
}
/* Liste des points relais */
.MR-Widget .PR-Name {
font-family: var(--font-body) !important;
font-size: 13px !important;
font-weight: 500 !important;
color: var(--trpz-brun) !important;
}
.MR-Widget .PR-List-Item {
border-bottom: 0.5px solid #E8E3DC !important;
padding: 10px 8px !important;
}
.MR-Widget .PR-List-Item:hover {
background-color: #f5f2ec !important;
}
/* Point relais sélectionné */
.MR-Widget .PR-List-Item.PR-Selected,
.MR-Widget .PR-List-Item.active {
background-color: #f0ece3 !important;
border-left: 2px solid var(--trpz-terra) !important;
}
/* Boutons "Utiliser ce point relais / locker" — secondaire contenu (pas gros bloc) */
/* Ordre vertical garanti : widget → bouton d'action → message d'erreur en dernier */
#mondialrelay_content {
display: flex !important;
flex-direction: column !important;
}
#mondialrelay_content #mondialrelay_widget { order: 0 !important; }
#mondialrelay_content #mondialrelay_save-container { order: 1 !important; }
#mondialrelay_content #mondialrelay_result { order: 2 !important; }
/* Conteneurs bouton + message : flux vertical séparé (évite le chevauchement) */
#mondialrelay_save-container {
position: relative !important;
display: block !important;
clear: both !important;
text-align: center !important;
margin-bottom: 8px !important;
z-index: 2 !important;
}
#mondialrelay_result {
position: relative !important;
display: block !important;
clear: both !important;
margin-top: 8px !important;
z-index: 1 !important;
}
#mondialrelay_save-container .mondialrelay_save-relay,
.mondialrelay_save-relay.btn-primary {
font-family: var(--font-body) !important;
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
background-color: var(--trpz-brun) !important;
color: #faf9f7 !important;
border: none !important;
border-radius: 0 !important;
padding: 13px 24px !important;
width: auto !important;
min-width: 240px !important;
margin: 12px auto 0 !important;
display: block !important;
position: relative !important;
z-index: 1 !important;
}
#mondialrelay_save-container .mondialrelay_save-relay[style*="display: none"] {
display: none !important;
}
#mondialrelay_save-container .mondialrelay_save-relay:hover {
background-color: #3D3220 !important;
}
/* Modale locker (consigne) — boutons vert/rose MR → charte */
.MRW-LockerModal .btn.green {
font-family: var(--font-body) !important;
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
background-color: var(--trpz-brun) !important;
border: none !important;
border-radius: 0 !important;
color: #faf9f7 !important;
}
.MRW-LockerModal .btn.pink-border {
font-family: var(--font-body) !important;
font-size: 12px !important;
font-weight: 400 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
background-color: transparent !important;
border: 1px solid #C8BFB0 !important;
border-radius: 0 !important;
color: var(--trpz-brun) !important;
}
.MRW-LockerModal .surligne {
color: var(--trpz-terra) !important;
}
/* Bouton géolocalisation "autour de ma position" (vert MR → charte) */
.MR-Widget .MRW-BtGeoGo {
background-color: var(--trpz-brun) !important;
border-color: var(--trpz-brun) !important;
border-radius: 0 !important;
}
/* Coche verte du point sélectionné → terracotta charte */
.MR-Widget .PR-List-Item .PR-Selected-Icon,
.MR-Widget .PR-Selected .PR-Selected-Icon {
filter: grayscale(1) !important;
}
/* Message d'alerte "Merci de sélectionner..." (bloc rose MR → charte discrète) */
#mondialrelay_result #mondialrelay_errors,
#mondialrelay_errors,
.MRW-Errors,
#mondialrelay_content .alert,
#mondialrelay_content [class*="error"] {
background-color: #f5f2ec !important;
color: var(--trpz-brun) !important;
border: 0.5px solid #E8E3DC !important;
border-left: 2px solid var(--trpz-terra) !important;
border-radius: 0 !important;
font-family: var(--font-body) !important;
font-size: 13px !important;
padding: 12px 16px !important;
}
/* ── 15b. POP-IN AJOUT PANIER (blockcart modal) ── */
/* Conteneur modal */
#blockcart-modal .modal-content,
.blockcart-modal .modal-content {
background-color: #faf9f7 !important;
border: none !important;
border-radius: 0 !important;
box-shadow: 0 12px 48px rgba(44,36,22,0.18) !important;
}
/* Header */
#blockcart-modal .modal-header,
.blockcart-modal .modal-header {
border-bottom: 0.5px solid #E8E3DC !important;
padding: 20px 28px !important;
}
/* Titre "Produit ajouté avec succès" */
#blockcart-modal .modal-title,
.blockcart-modal .modal-title {
font-family: var(--font-display) !important;
font-size: 22px !important;
font-weight: 400 !important;
font-style: italic !important;
color: var(--trpz-brun) !important;
letter-spacing: 0.01em !important;
}
#blockcart-modal .modal-title .material-icons {
color: #5A8A6A !important;
}
/* Corps */
#blockcart-modal .modal-body,
.blockcart-modal .modal-body {
padding: 24px 28px !important;
}
/* Nom produit */
#blockcart-modal .product-name,
#blockcart-modal .h6.product-name {
font-family: var(--font-display) !important;
font-size: 16px !important;
font-weight: 700 !important;
color: var(--trpz-brun) !important;
letter-spacing: 0.02em !important;
}
/* Prix produit */
#blockcart-modal .product-price,
#blockcart-modal .price-modal .product-price {
font-family: var(--font-body) !important;
font-size: 16px !important;
font-weight: 500 !important;
color: var(--trpz-brun) !important;
}
/* Attributs (couleur / taille) */
#blockcart-modal .information .d-block {
font-family: var(--font-body) !important;
font-size: 12px !important;
font-weight: 300 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
color: var(--trpz-taupe) !important;
}
/* Carte résumé panier */
#blockcart-modal .blockcart-modal__summery.card,
#blockcart-modal .blockcart-modal__summery {
background-color: #f5f2ec !important;
border: 0.5px solid #E8E3DC !important;
border-radius: 0 !important;
padding: 20px !important;
}
#blockcart-modal .blockcart-modal__summery p {
font-family: var(--font-body) !important;
font-size: 13px !important;
font-weight: 300 !important;
color: var(--trpz-brun) !important;
}
/* Total TTC */
#blockcart-modal .blockcart-modal__total,
#blockcart-modal .product-total {
border-top: 0.5px solid #D4C9B0 !important;
padding-top: 12px !important;
}
#blockcart-modal .blockcart-modal__total .label {
font-family: var(--font-body) !important;
font-size: 12px !important;
font-weight: 400 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: var(--trpz-taupe) !important;
}
#blockcart-modal .blockcart-modal__total .value {
font-family: var(--font-body) !important;
font-size: 18px !important;
font-weight: 500 !important;
color: var(--trpz-brun) !important;
}
/* Encadré marketing "Livraison gratuite à partir de..." */
#blockcart-modal .stress-marketing {
font-family: var(--font-body) !important;
font-size: 12px !important;
font-weight: 300 !important;
color: var(--trpz-brun) !important;
background-color: #EDF4EF !important;
border-radius: 0 !important;
padding: 10px 12px !important;
margin-bottom: 14px !important;
}
/* Bouton Commander (primaire) */
#blockcart-modal .btn-primary {
font-family: var(--font-body) !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
background-color: var(--trpz-brun) !important;
color: #faf9f7 !important;
border: none !important;
border-radius: 0 !important;
padding: 14px 20px !important;
margin-bottom: 10px !important;
}
#blockcart-modal .btn-primary:hover {
background-color: #3D3220 !important;
}
/* Bouton Continuer vos achats (secondaire) */
#blockcart-modal .btn-outline-primary {
font-family: var(--font-body) !important;
font-size: 12px !important;
font-weight: 400 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
background-color: transparent !important;
color: var(--trpz-brun) !important;
border: 1px solid #C8BFB0 !important;
border-radius: 0 !important;
padding: 12px 20px !important;
}
#blockcart-modal .btn-outline-primary:hover {
background-color: #f0ece3 !important;
border-color: var(--trpz-brun) !important;
}
/* Image produit dans la modal */
#blockcart-modal .product-image {
border-radius: 0 !important;
background-color: #f0ece3 !important;
}
/* Bouton fermer */
#blockcart-modal .btn-close {
opacity: 0.5 !important;
}
#blockcart-modal .btn-close:hover {
opacity: 1 !important;
}
/* ── 16. FOOTER — fond et contrastes ── */
/* Footer pleine largeur (edge-to-edge) */
#footer,
.page-footer,
.wrapper__footer,
#footer-wrapper,
.footer-wrapper {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
padding-left: 0 !important;
padding-right: 0 !important;
overflow-x: hidden !important;
}
/* Wrappers parents — éliminer les bandes blanches parasites */
.page-footer,
#footer.page-footer,
.wrapper__footer,
#footer-wrapper,
.footer-wrapper,
#footer > .container-fluid,
#footer > div {
background-color: #f0ece3 !important;
}
#footer,
footer,
.footer-container,
.footer__top,
.footer__bottom,
#footer .container,
footer .container,
.block_newsletter,
.newsletter-block,
#footer .footer-container {
background-color: transparent !important;
color: #000000 !important;
}
/* Texte courant du footer : noir */
#footer p,
footer p,
#footer li,
footer li,
#footer span,
footer span {
color: #000000 !important;
}
/* Zone newsletter */
.block_newsletter,
#footer .block_newsletter,
.newsletter__wrapper {
background-color: #f0ece3 !important;
}
/* Titre newsletter */
#footer .block_newsletter p:first-child,
#footer [class*="newsletter"] h2,
#footer [class*="newsletter"] p.title {
font-family: var(--font-display) !important;
font-size: 16px !important;
font-weight: 400 !important;
font-style: italic !important;
color: var(--trpz-sable) !important;
margin-bottom: 16px !important;
}
/* Input email newsletter */
.block_newsletter input[type="email"],
.newsletter-block input[type="email"],
#footer input[type="email"] {
background-color: rgba(255,255,255,0.07) !important;
border: 1px solid rgba(229,212,164,0.25) !important;
border-right: none !important;
border-radius: 0 !important;
color: #faf9f7 !important;
font-family: var(--font-body) !important;
font-size: 13px;
font-weight: 300;
padding: 10px 16px !important;
height: 44px !important;
}
#footer input[type="email"]::placeholder,
.block_newsletter input::placeholder {
color: rgba(229,212,164,0.4) !important;
}
/* Bouton Ok newsletter */
#footer .block_newsletter button,
#footer .block_newsletter [type="submit"],
#footer .block_newsletter input[type="submit"],
#footer .block_newsletter .btn,
.newsletter-block button[type="submit"],
.block_newsletter form button,
.block_newsletter form .btn,
[class*="newsletter"] button[type="submit"],
[class*="newsletter"] input[type="submit"] {
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
background-color: var(--trpz-sable) !important;
color: var(--trpz-brun) !important;
border: none !important;
border-radius: 0 !important;
padding: 0 24px !important;
min-height: 44px !important;
height: 44px !important;
cursor: pointer;
transition: background 0.15s ease;
}
#footer .block_newsletter button:hover,
#footer .block_newsletter input[type="submit"]:hover,
.newsletter-block button[type="submit"]:hover,
[class*="newsletter"] button[type="submit"]:hover {
background-color: #faf9f7 !important;
}
/* Liens footer */
#footer a,
footer a {
font-family: var(--font-body) !important;
font-size: 12px;
font-weight: 300;
letter-spacing: 0.06em;
color: rgba(229,212,164,0.75) !important;
text-decoration: none;
transition: color 0.15s ease;
}
#footer a:hover,
footer a:hover {
color: var(--trpz-sable) !important;
text-decoration: none;
}
/* Titres blocs footer */
#footer .block-title,
#footer h3,
footer h3 {
font-family: var(--font-body) !important;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--trpz-sable) !important;
opacity: 0.9;
}
/* Texte divers footer */
#footer p,
footer p,
#footer li,
footer li {
font-family: var(--font-body) !important;
font-size: 12px;
font-weight: 300;
color: rgba(229,212,164,0.65) !important;
}
/* Icônes sociales — fond sable discret */
#footer [class*="social"] a,
#footer .social-sharing a,
footer .block-social a {
background-color: rgba(229,212,164,0.12) !important;
border: 1px solid rgba(229,212,164,0.2) !important;
border-radius: 50% !important;
color: var(--trpz-sable) !important;
transition: background 0.15s ease;
}
#footer [class*="social"] a:hover,
footer .block-social a:hover {
background-color: rgba(229,212,164,0.25) !important;
}
/* Bande copyright bottom */
#footer .footer-copyright,
#footer .copyright,
footer .footer-bottom {
background-color: transparent !important;
border-top: 0.5px solid #D4C9B0 !important;
line-height: 2 !important;
padding: 14px 20px !important;
}
#footer .footer-copyright a,
#footer .copyright a,
footer .footer-bottom a {
line-height: 2 !important;
padding: 2px 0 !important;
display: inline-block !important;
}
/* Reassurance au-dessus du footer */
.footer-before,
.block-reassurance,
.reassurance-block,
.footer__reassurance {
background-color: #f0ece3 !important;
border-top: 0.5px solid #D4C9B0 !important;
margin-bottom: 0 !important;
padding-bottom: 24px !important;
}
.block-reassurance p,
.footer__reassurance p,
.block-reassurance span,
.footer__reassurance span {
font-family: var(--font-body) !important;
color: var(--trpz-brun) !important;
font-size: 12px;
font-weight: 300;
}
/* Supprimer marges blanches parasites autour du footer */
#footer {
margin-top: 0 !important;
padding-top: 0 !important;
}
.block-reassurance + *,
.footer__reassurance + * {
margin-top: 0 !important;
}
/* Neutraliser tout wrapper blanc résiduel entre réassurance et footer */
.footer-before + .page-footer,
.block-reassurance ~ .page-footer {
margin-top: 0 !important;
}
/* ── BASCULE FOOTER : fond crème #f0ece3 + typo noire ── */
/* Surcharge haute spécificité (préfixe body) pour battre le thème natif Hummingbird */
body #footer,
body footer#footer,
body .footer,
body .footer__main,
body .footer__main__top,
body #footer .footer__main,
body #footer .container,
html body #footer,
html body #footer .footer__main {
background-color: #f0ece3 !important;
background-image: none !important;
}
/* Fonds : tous les conteneurs footer passent en crème */
#footer,
footer,
.page-footer,
.wrapper__footer,
#footer-wrapper,
.footer-wrapper,
#footer.page-footer,
#footer > .container-fluid,
#footer > div,
.footer-container,
.footer__main,
.footer__top,
.footer__bottom,
.footer__main__top,
#footer .container,
footer .container,
#footer .footer-container,
.block_newsletter,
.newsletter-block,
#footer .block_newsletter,
.email-subscription,
.copyright,
.everblock,
#block_footer {
background-color: #f0ece3 !important;
color: #000000 !important;
}
/* Textes, liens, titres : noir */
#footer *,
footer *,
.copyright *,
.email-subscription *,
.footer__block *,
.footer__block__content *,
.block-reassurance *,
.footer__reassurance * {
color: #000000 !important;
}
/* Liens footer : noir, soulignés au survol */
#footer a,
footer a,
.copyright a,
.footer__block a,
.cms-page-link,
.custom-page-link {
color: #000000 !important;
text-decoration: none !important;
}
#footer a:hover,
footer a:hover,
.copyright a:hover,
.footer__block a:hover,
.cms-page-link:hover,
.custom-page-link:hover {
color: #000000 !important;
text-decoration: underline !important;
}
/* Champ email newsletter : fond blanc, texte noir, bordure discrète */
#footer input[type="email"],
.email-subscription input[type="email"] {
background-color: #ffffff !important;
color: #000000 !important;
border: 0.5px solid #C8BFB0 !important;
}
#footer input[type="email"]::placeholder,
.email-subscription input[type="email"]::placeholder {
color: var(--trpz-taupe) !important;
}
/* Bouton newsletter : brun charte, texte crème (le seul élément contrasté) */
#footer .block_newsletter button,
#footer .block_newsletter [type="submit"],
.email-subscription .btn-primary,
.email-subscription [type="submit"] {
background-color: #d5cab2 !important;
color: var(--trpz-brun) !important;
border: none !important;
width: 40% !important;
height: 41px !important;
min-height: 41px !important;
}
/* Icônes sociales : fond crème plus soutenu, pas de fond sombre */
#footer .block-social a,
.block-social a {
background-color: rgba(44,36,22,0.06) !important;
}
#footer .block-social a:hover,
.block-social a:hover {
background-color: rgba(44,36,22,0.14) !important;
}
/* ── 17. FICHE PRODUIT — corrections fond ── */
/* Élargir la zone héros (galerie + infos) — largeur généreuse maîtrisée, DESKTOP */
@media (min-width: 992px) {
.page-product #main > .container,
.page-product .product-container,
.page-product #product > .container,
.page-product .row.product__row {
max-width: 1550px !important;
width: 100% !important;
padding-left: 32px !important;
padding-right: 32px !important;
}
/* Les sections basses (cross-sell, réassurance) restent dans leur conteneur natif */
.page-product .featured-products .container,
.page-product .product-accessories .container {
max-width: 1140px !important;
}
/* Confort de lecture : limiter la largeur du texte descriptif sur grand écran */
.page-product .product__description-short,
.page-product .product__description,
.page-product .product__col .rich-text {
max-width: 620px !important;
}
}
/* Fond global page produit */
.page-product #content-wrapper,
.page-product #main,
.page-product .page-content,
.page-product .wrapper__content,
#content-wrapper.wrapper__content {
background-color: var(--trpz-beige) !important;
}
/* ── Fond moutarde : module MagicZoom ── */
.MagicToolboxContainer,
.MagicToolboxContainer *,
.magic-slide,
.MagicZoom,
.mz-figure,
.MagicToolboxSelectorsContainer,
.magictoolbox-selector,
.mz-thumb,
.product__left,
.product__left .col-lg-6 {
background-color: var(--trpz-beige) !important;
background: var(--trpz-beige) !important;
}
/* ── Désactiver la lightbox ELEMENTOR au clic (la vraie pop-in) ──
La pop-in au clic sur l'image n'est PAS MagicZoom mais la lightbox Elementor
(swiper). On masque l'overlay et on rétablit le scroll du body au cas où
Elementor le bloque à l'ouverture. */
#elementor-lightbox-slideshow-single-img,
.elementor-lightbox,
.dialog-lightbox-widget,
.dialog-type-lightbox {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* Le curseur ne doit pas suggérer un clic zoomable sur l'image principale */
.elementor-lightbox-image,
a[data-elementor-open-lightbox] img,
[data-elementor-lightbox] {
cursor: default !important;
}
/* Masquer le hint "Click to zoom" */
.mz-hint,
.mz-hint-message,
.MagicToolboxContainer .mz-hint {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
/* Neutraliser le curseur loupe sur l'image principale */
#MagicZoomPlusImageMainImage,
.MagicZoom,
.mz-figure,
.mz-figure img {
cursor: default !important;
}
/* Empêcher l'affichage de la fenêtre de zoom (magnifier/window) */
.mz-zoom-window,
.mz-lens {
display: none !important;
opacity: 0 !important;
}
/* Masquer la lightbox expand si elle s'ouvre malgré tout */
.mz-expand,
.mz-lightbox {
display: none !important;
}
/* ── Layout galerie colonne (thumbnails left) — DESKTOP UNIQUEMENT ── */
/* Sur mobile, MagicZoom repasse en layout bottom : on ne force pas le flex row */
@media (min-width: 992px) {
/* Rééquilibrer : colonne image plus large que la colonne infos */
.page-product .product__left.col-lg-6,
.page-product .product__left {
flex: 0 0 58% !important;
max-width: 58% !important;
width: 58% !important;
padding-left: 0 !important;
padding-right: 16px !important;
}
.page-product .product__col.col-lg-6,
.page-product .product__col {
flex: 0 0 42% !important;
max-width: 42% !important;
width: 42% !important;
}
/* Colonne vignettes plus étroite */
.MagicToolboxContainer .MagicToolboxSelectorsContainer,
.MagicToolboxContainer .mz-thumb,
.selectors-left .MagicToolboxSelectorsContainer {
width: 72px !important;
max-width: 72px !important;
flex: 0 0 72px !important;
margin-top: 0 !important;
padding-top: 0 !important;
align-self: flex-start !important;
}
/* Vignettes elles-mêmes */
.MagicToolboxContainer .magictoolbox-selector,
.MagicToolboxContainer .mz-thumb img {
width: 64px !important;
max-width: 64px !important;
}
/* Première vignette alignée avec le haut de l'image */
.MagicToolboxContainer .MagicToolboxSelectorsContainer .magictoolbox-selector:first-child,
.MagicToolboxContainer .mz-thumb:first-child {
margin-top: 0 !important;
}
/* Zone image principale — occupe tout l'espace restant (valeurs validées en test) */
.MagicToolboxContainer .mz-figure,
.MagicToolboxContainer .MagicZoom,
.MagicToolboxContainer > a.MagicZoom {
flex: 1 1 auto !important;
max-width: 100% !important;
width: 100% !important;
margin-top: 0 !important;
}
/* CONTENEUR INTERMÉDIAIRE (la vraie cause des bandes vides) */
/* Il a padding-left:10px + width:auto natif → ne remplit pas la largeur */
.MagicToolboxContainer .MagicToolboxMainContainer,
.MagicToolboxContainer.selectorsLeft .MagicToolboxMainContainer {
flex: 1 1 auto !important;
width: auto !important;
max-width: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin: 0 !important;
min-width: 0 !important;
}
/* Le magic-slide interne doit aussi remplir */
.MagicToolboxContainer .magic-slide,
.MagicToolboxContainer .magic-slide.mt-active {
width: 100% !important;
max-width: 100% !important;
}
/* Conteneur global : flex row, vignettes alignées en haut, espace resserré */
.MagicToolboxContainer {
display: flex !important;
align-items: flex-start !important;
gap: 8px !important;
}
/* Image principale : remplir toute la largeur de sa zone */
.MagicToolboxContainer .mz-figure img,
.MagicToolboxContainer .MagicZoom img,
#MagicZoomPlusImageMainImage img {
width: 100% !important;
height: auto !important;
object-fit: cover !important;
}
}
/* Galerie carousel Bootstrap */
.product__images,
.js-images-container,
#product-images,
.carousel-inner,
.carousel-item,
.thumbnails__container,
.thumbnails__list,
.thumbnail {
background-color: var(--trpz-beige) !important;
}
/* ── Fonds blancs accordéon description ── */
/* Classes exactes trouvées dans le HTML */
.product__infos,
.accordion,
.accordion-flush,
.accordion-item,
.info.accordion-item,
#description,
#product-details,
#product-features,
.info__content,
.info__content.accordion-collapse,
.accordion-collapse,
.accordion-body,
.product__description,
.rich-text,
.product__description-short {
background-color: var(--trpz-beige) !important;
border-color: #D4C9B0 !important;
}
/* Panier UNIQUEMENT : accordion-body sans fond */
body#cart .accordion-body,
.page-cart .accordion-body,
#cart .accordion-body {
background-color: transparent !important;
}
/* Boutons accordéon (titre Description / Caractéristiques) */
.info__title,
.accordion-header,
.accordion-button,
.accordion-button:not(.collapsed),
.accordion-button.collapsed {
font-family: var(--font-display) !important;
font-size: 17px !important;
font-weight: 400;
font-style: italic;
color: var(--trpz-brun) !important;
background-color: var(--trpz-beige) !important;
box-shadow: none !important;
}
/* Icône chevron accordéon — retirer le filtre Bootstrap */
.accordion-button::after {
filter: none !important;
}
/* Texte description — corriger les liens colorés */
.product__description p,
.product__description a,
.product__description-short p,
.product__description-short a,
.accordion-body p,
.accordion-body a {
font-family: var(--font-body) !important;
font-size: 14px;
font-weight: 300;
line-height: 1.75;
color: var(--trpz-brun) !important;
text-decoration: none;
}
/* Tableau caractéristiques + qualités environnementales — filets fins uniformes */
.product__features .detail,
.detail__title,
.detail__right span {
font-family: var(--font-body) !important;
font-size: 12px;
font-weight: 300;
color: var(--trpz-brun);
background-color: transparent !important;
}
/* Filet de séparation fin et clair — uniforme partout (comme Qualités Env.) */
.accordion-body .detail,
.product__features .detail,
.info__content .detail,
li.detail {
border: none !important;
border-bottom: 0.5px solid #E8E3DC !important;
padding: 12px 0 !important;
margin: 0 !important;
list-style: none !important;
}
/* Dernière ligne sans filet */
.accordion-body .detail:last-child,
.product__features .detail:last-child,
li.detail:last-child {
border-bottom: none !important;
}
/* Neutraliser les bordures épaisses natives éventuelles */
.product__features,
.accordion-body ul,
.accordion-body .product__features {
border: none !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
/* Cards produits similaires / consultés */
.product-miniature .card,
.product-miniature .card-body,
.product-miniature__infos,
.product-miniature__infos.card-body {
background-color: var(--trpz-beige) !important;
border: none !important;
}
/* Nom produit card (classe exacte du HTML) */
.product-miniature__title {
font-family: var(--font-display) !important;
font-size: 14px !important;
font-weight: 700;
letter-spacing: 0.01em;
color: var(--trpz-brun);
}
/* Prix card (classe exacte du HTML) */
.product-miniature__price {
font-family: var(--font-body) !important;
font-size: 14px;
font-weight: 500;
color: var(--trpz-brun);
}
/* Titre sections "4 autres produits" */
.section-title {
font-family: var(--font-display) !important;
font-size: 22px;
font-weight: 400;
font-style: italic;
color: var(--trpz-brun);
}
/* ── 18. SÉLECTEUR DE TAILLES — rectangles 4px ── */
/* Label "Choisir votre taille" */
.product__variants .variant .form-label {
font-family: var(--font-body) !important;
font-size: 11px;
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--trpz-taupe);
margin-bottom: 10px;
display: block;
}
/* Conteneur liste tailles */
.sizes-group ul,
#group_56 {
display: flex !important;
flex-wrap: wrap;
gap: 6px !important;
list-style: none;
padding: 0;
margin: 0 0 10px;
}
/* Chaque item */
.sizes-group .input-container,
#group_56 .input-container {
margin: 0 0.5rem 0.5rem 0 !important;
padding: 0 !important;
position: relative;
}
/* Neutraliser le style carré du thème natif sur le conteneur (survol + sélection) */
.page-product .input-container.checked,
.page-product .input-container:hover,
.sizes-group .input-container.checked,
.sizes-group .input-container:hover,
#group_56 .input-container.checked,
#group_56 .input-container:hover {
background: transparent !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
}
/* Cacher input radio natif */
.sizes-group .input-container input[type="radio"],
#group_56 .input-container input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
/* Label parent : ne porte AUCUN style carré (bordure/fond/outline du thème) */
.sizes-group .input-container label,
#group_56 .input-container label {
display: inline-flex !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
border-radius: 50% !important;
outline: none !important;
}
/* Pas d'outline carré au focus/clic sur les éléments taille */
.sizes-group .input-container label:focus,
.sizes-group .input-container label:focus-visible,
.sizes-group .radio-label:focus,
.sizes-group .radio-label:focus-visible,
.sizes-group .input-container input[type="radio"]:focus + .radio-label,
#group_56 .input-container label:focus,
#group_56 .input-container label:focus-visible,
#group_56 .radio-label:focus,
#group_56 .radio-label:focus-visible {
outline: none !important;
box-shadow: none !important;
}
/* Label taille — état normal : pill sobre */
.sizes-group .radio-label,
#group_56 .radio-label {
display: flex !important;
align-items: center;
justify-content: center;
width: 42px !important;
min-width: 42px !important;
height: 42px !important;
padding: 0 !important;
font-family: var(--font-body) !important;
font-size: 13px !important;
font-weight: 400 !important;
color: var(--trpz-brun) !important;
background-color: #faf9f7 !important;
border: 1px solid #C8BFB0 !important;
border-radius: 50% !important;
cursor: pointer;
transition: border-color 0.15s ease;
user-select: none;
position: relative;
overflow: hidden;
text-decoration: none !important;
}
/* Hover : liseré brun seul, pas de changement de couleur de fond */
.sizes-group .radio-label:hover,
#group_56 .radio-label:hover {
border-color: var(--trpz-brun) !important;
background-color: #faf9f7 !important;
}
/* Taille sélectionnée — pill noir plein */
.sizes-group .input-container.checked .radio-label,
#group_56 .input-container.checked .radio-label {
background-color: var(--trpz-brun) !important;
color: #faf9f7 !important;
border-color: var(--trpz-brun) !important;
font-weight: 500 !important;
}
/* Taille épuisée — classe .inactif (réelle du thème Hummingbird) */
.sizes-group .input-container.inactif .radio-label,
#group_56 .input-container.inactif .radio-label,
.sizes-group .input-container.disabled .radio-label,
#group_56 .input-container.disabled .radio-label {
color: #C0B8AC !important;
border-color: #E0D9CE !important;
background-color: #faf9f7 !important;
cursor: not-allowed;
text-decoration: none !important;
opacity: 1 !important;
}
/* Diagonale sur taille épuisée */
.sizes-group .input-container.inactif .radio-label::before,
#group_56 .input-container.inactif .radio-label::before,
.sizes-group .input-container.disabled .radio-label::before,
#group_56 .input-container.disabled .radio-label::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
to top right,
transparent calc(50% - 0.5px),
#C0B8AC calc(50% - 0.5px),
#C0B8AC calc(50% + 0.5px),
transparent calc(50% + 0.5px)
);
border-radius: 50%;
pointer-events: none;
}
/* Sélectionnée + épuisée */
.sizes-group .input-container.checked.inactif .radio-label,
#group_56 .input-container.checked.inactif .radio-label {
background-color: #C0B8AC !important;
color: #faf9f7 !important;
border-color: #C0B8AC !important;
}
/* Lien guide des tailles */
.btn-infos a,
.btn.btn-infos {
font-family: var(--font-body) !important;
font-size: 11px;
font-weight: 300;
letter-spacing: 0.08em;
color: var(--trpz-taupe) !important;
text-decoration: underline !important;
text-underline-offset: 3px;
background: none !important;
border: none !important;
padding: 0 !important;
}
/* Message "Merci de vérifier la taille..." — masqué */
.product__check-size,
.product__check-size p,
p.product__check-size,
.js-product-availability .product__check-size,
#product-availability.product__check-size {
display: none !important;
}
/* ── 19. SÉLECTEUR DE COULEURS ── */
/* Sélecteurs exacts PS 1.7.8 Hummingbird — taille 1.6rem */
.custom-checkbox input[type=checkbox] + span.color,
.variant-links .color,
label .color,
.color-hover .color {
width: 1.6rem !important;
height: 1.6rem !important;
border-radius: 50% !important;
border: 2px solid rgba(0,0,0,0.05) !important;
outline: 1.5px solid #D4C9B0;
outline-offset: 2px;
cursor: pointer;
transition: outline 0.15s ease, border-color 0.15s ease;
display: inline-block;
}
/* États actif / hover — sélecteurs exacts fournis */
.custom-checkbox input[type=checkbox] + span.color.active,
.custom-checkbox input[type=checkbox] + span.color:hover,
.variant-links .color.active,
.variant-links .color:hover,
label .color.active,
label .color:hover {
width: 1.6rem !important;
height: 1.6rem !important;
border-radius: 50% !important;
outline: 2.5px solid var(--trpz-brun) !important;
outline-offset: 3px;
border-color: transparent !important;
}
/* Conteneur couleur — espacement */
.color-hover {
margin: 0 !important;
position: relative;
}
/* Cacher input radio couleur */
.color-hover input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
/* Liste couleurs fiche produit */
#group_55,
.variant ul.d-flex {
display: flex !important;
flex-wrap: wrap;
gap: 10px !important;
list-style: none;
padding: 0;
margin: 0 0 14px;
align-items: center;
}
/* Nom couleur sous la pastille */
.color-hover .text,
.variant .text {
font-family: var(--font-body) !important;
font-size: 9px !important;
font-weight: 300;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--trpz-taupe);
text-align: center;
margin-top: 5px;
display: block;
}
/* Couleurs sur cards listing — plus petites */
.product-miniature .variant-links .color,
.product-miniature-variants .variant-links .color {
width: 14px !important;
height: 14px !important;
outline-width: 1px;
outline-offset: 1px;
}
.product-miniature .variant-links .color:hover,
.product-miniature .variant-links .color.active {
width: 14px !important;
height: 14px !important;
outline: 1.5px solid var(--trpz-brun) !important;
outline-offset: 2px;
}
/* ── 20. FONDS BLANCS RESTANTS ── */
/* Footer complet */
#footer,
footer,
.footer-container,
.footer__top,
.footer__bottom,
#footer .container,
footer .container,
.block_newsletter,
.newsletter-block,
#footer .footer-container {
background-color: #f0ece3 !important;
color: #000000 !important;
}
/* Zone newsletter — crème */
.block_newsletter,
#footer .block_newsletter,
.newsletter__wrapper {
background-color: #f0ece3 !important;
}
/* Input email newsletter — fond blanc lisible sur crème */
.block_newsletter input[type="email"],
.newsletter-block input[type="email"],
#footer input[type="email"] {
background-color: #ffffff !important;
border: 0.5px solid #C8BFB0 !important;
border-radius: 0 !important;
color: #000000 !important;
font-family: var(--font-body) !important;
font-size: 13px;
font-weight: 300;
}
#footer input[type="email"]::placeholder,
.block_newsletter input::placeholder {
color: var(--trpz-taupe) !important;
}
/* Liens footer — noir */
#footer a,
footer a {
color: #000000 !important;
opacity: 1;
}
#footer a:hover,
footer a:hover {
opacity: 1;
text-decoration: underline;
text-underline-offset: 3px;
}
/* Texte mentions légales footer — noir */
#footer p,
footer p,
#footer li,
footer li,
#footer span,
footer span {
font-family: var(--font-body) !important;
font-size: 12px;
font-weight: 300;
color: #000000 !important;
}
/* Zone blanche sous le footer (réassurance / paiement sécurisé) */
.footer-before,
.block-reassurance,
.reassurance-block,
.footer__reassurance,
#footer .reassurance,
.footer-container .row:first-child {
background-color: #f0ece3 !important;
}
.block-reassurance p,
.footer__reassurance p,
.block-reassurance span {
font-family: var(--font-body) !important;
color: var(--trpz-brun) !important;
font-size: 12px;
font-weight: 300;
}
/* Description produit — liens colorés résiduels */
.product__description *[style*="color"],
.accordion-body *[style*="color"],
.rich-text *[style*="color"] {
color: var(--trpz-brun) !important;
}
/* Supprimer les backgrounds inline (collés depuis Word/Google Docs) */
.product__description span,
.product__description p span,
.accordion-body.rich-text span,
.rich-text span {
background-color: transparent !important;
font-family: var(--font-body) !important;
font-size: 14px !important;
color: var(--trpz-brun) !important;
white-space: normal !important;
}
/* ── 21. BADGE DISPONIBILITÉ ── */
/* "En stock" — sobre, dans la charte */
#product-availability,
.product-availability,
span#product-availability {
display: inline-flex !important;
align-items: center;
gap: 5px;
}
/* Badge générique disponibilité */
.product-available,
.availability.product-available,
span.product-available {
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #5A8A6A !important;
background-color: #EDF4EF !important;
border: none !important;
border-radius: 20px !important;
padding: 3px 10px !important;
display: inline-block !important;
}
/* Pastille verte avant le texte */
.product-available::before,
.availability.product-available::before {
content: '';
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #5A8A6A;
margin-right: 5px;
vertical-align: middle;
}
/* Derniers articles */
.product-last-items,
.availability.last_remaining_items,
span.product-last-items {
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #A0622A !important;
background-color: #FBF0E6 !important;
border: 1px solid #E8C9A0 !important;
border-radius: 20px !important;
padding: 3px 10px !important;
display: inline-block !important;
}
.product-last-items::before {
content: '';
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #C8503A;
margin-right: 5px;
vertical-align: middle;
}
/* Rupture de stock */
.product-unavailable,
.availability.product-unavailable {
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--trpz-taupe) !important;
background-color: #f0ece3 !important;
border: 1px solid #C8BFB0 !important;
border-radius: 20px !important;
padding: 3px 10px !important;
display: inline-block !important;
}
/* ── 22. UX LISTING — GRILLE PRODUITS ── */
/* Grille : espacement entre les cards */
#js-product-list .products.row {
--bs-gutter-x: 12px !important;
row-gap: 18px !important;
}
/* Card : fond transparent, sans border Bootstrap */
.product-miniature .card {
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}
/* ── Conteneur image ── */
.product-miniature .product-miniature__image-container,
.product-miniature .thumbnail-container {
background-color: transparent !important;
position: relative !important;
display: block !important;
}
/* Le lien image ne porte AUCUN fond (il pouvait être plus haut que l'image → bande crème) */
.product-miniature .product-miniature__image-container > a,
.product-miniature .thumbnail-container > a {
display: block !important;
background-color: transparent !important;
line-height: 0 !important;
}
/* Le fond crème est porté par l'IMAGE seule (elle a le ratio 3/4 exact) */
.product-miniature .product-miniature__image.card-img-top,
.product-miniature img.ar-ai-main-img {
background-color: #f0ece3 !important;
width: 100% !important;
aspect-ratio: 3 / 4 !important;
height: auto !important;
object-fit: cover !important;
display: block !important;
transform: none !important;
transition: none !important;
}
/* Pas de zoom au survol (l'image débordait sur la carte voisine) */
.product-miniature:hover .product-miniature__image.card-img-top,
.product-miniature:hover img.ar-ai-main-img {
transform: none !important;
}
/* Image de survol (AR-AI) : même cadre/format que l'image principale
(sinon elle est plus petite → bande vide en bas de la carte au survol) */
.product-miniature .ar-ai-container {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
}
.product-miniature .ar-ai-container img,
.product-miniature .ar-ai-container .img-responsive {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
/* ── Wishlist listing : rendu natif du thème conservé ── */
.product-miniature {
position: relative !important;
}
/* ── Variants couleurs : SOUS le visuel (en flux, après l'image) ── */
.product-miniature .product-miniature-variants {
position: static !important;
padding: 8px 0 2px !important;
background: #faf9f7 !important;
border-radius: 0 !important;
min-height: 0 !important;
display: flex !important;
align-items: center !important;
z-index: auto !important;
}
/* Si aucune pastille à afficher, ne pas laisser d'espace vide */
.product-miniature .product-miniature-variants:not(:has(.variant-links a.color)) {
display: none !important;
}
.product-miniature-variants .product-miniature__link {
display: none !important;
}
.product-miniature .variant-links {
display: flex !important;
flex-wrap: nowrap !important;
gap: 4px !important;
align-items: center !important;
max-width: 100% !important;
overflow: hidden !important;
}
/* Limiter à 6 pastilles visibles max ; au-delà le compteur natif .count prend le relais */
.product-miniature .variant-links a.color:nth-of-type(n+7) {
display: none !important;
}
.product-miniature .variant-links a.color {
width: 14px !important;
height: 14px !important;
border-radius: 50% !important;
border: 1px solid rgba(255,255,255,0.5) !important;
outline: 1px solid transparent !important;
outline-offset: 2px !important;
display: inline-block !important;
transition: outline 0.12s ease;
flex-shrink: 0;
}
.product-miniature .variant-links a.color:hover,
.product-miniature .variant-links a.color.active {
outline: 1.5px solid var(--trpz-brun) !important;
outline-offset: 2px !important;
}
.product-miniature .variant-links .js-count.count {
font-family: var(--font-body) !important;
font-size: 10px;
font-weight: 400;
color: var(--trpz-taupe);
}
/* ── Infos texte ── */
.product-miniature .product-miniature__infos.card-body {
padding: 0 0 0 !important;
background: transparent !important;
border: none !important;
}
.product-miniature .product-miniature__infos__top {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
.product-miniature .product-miniature__infos__top a {
text-decoration: none !important;
}
.product-miniature p.product-miniature__title {
font-family: var(--font-display) !important;
font-size: 16px !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
color: var(--trpz-brun) !important;
margin: 0 !important;
line-height: 1.2 !important;
text-transform: uppercase !important;
}
/* ── Prix carte listing (consolidé) ── */
/* Bloc infos bas : colonne, aligné à gauche comme le titre, marges nulles */
.product-miniature .product-miniature__infos__bottom {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
padding-left: 0 !important;
margin-left: 0 !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
/* Ligne prix : badge -20% → barré → réduit (ordre Odaje), resserré */
.product-miniature .product-miniature__prices {
display: flex !important;
flex-direction: row !important;
align-items: baseline !important;
column-gap: 6px !important;
row-gap: 0 !important;
flex-wrap: wrap !important;
margin: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Prix courant */
.product-miniature span.product-miniature__price {
font-family: var(--font-body) !important;
font-size: 14px !important;
font-weight: 400 !important;
color: var(--trpz-brun) !important;
letter-spacing: 0 !important;
order: 2 !important;
}
/* Prix barré (nom réel : product-miniature__regular-price) */
.product-miniature .product-miniature__discount-price,
.product-miniature .product-miniature__regular-price {
font-family: var(--font-body) !important;
font-size: 12px !important;
font-weight: 300 !important;
color: var(--trpz-taupe) !important;
text-decoration: line-through !important;
}
/* Conteneur prix barré : en ligne, ne force pas de retour à la ligne, order 1 */
.product-miniature .product-miniature__discount-price {
display: inline-flex !important;
align-items: baseline !important;
margin: 0 !important;
order: 1 !important;
}
/* Badge -20% carte (span.product-miniature.discount) + révélé du hidden-on-mobile, order 0 */
.product-miniature .product-miniature.discount,
span.product-miniature.discount,
.product-miniature .product-miniature__prices .hidden-on-mobile {
order: 0 !important;
}
.product-miniature .product-miniature.discount,
span.product-miniature.discount {
display: inline-block !important;
font-family: var(--font-body) !important;
font-size: 10px !important;
font-weight: 500 !important;
letter-spacing: 0.04em !important;
color: var(--trpz-terra) !important;
background: transparent !important;
padding: 0 !important;
}
.product-miniature .product-miniature__prices .hidden-on-mobile {
display: inline-block !important;
}
/* Masquer les conteneurs vides (produits SANS promo) — évite le trait résiduel */
.product-miniature .product-miniature__prices .hidden-on-mobile:empty,
.product-miniature .product-miniature__discount-price:empty,
.product-miniature .product-miniature.discount:empty,
.product-miniature span.product-miniature.discount:empty,
.product-miniature .product-miniature__discount-price:not(:has(.product-miniature__regular-price)) {
display: none !important;
}
/* Masquer la version mobile-only du -20% (doublon) */
.product-miniature .product-miniature__infos__bottom > .hidden-on-desktop {
display: none !important;
}
/* ── 22b. PAGINATION ── */
.pagination-container {
margin-top: 32px !important;
padding-bottom: 24px !important;
}
.pagination {
display: flex !important;
gap: 4px !important;
justify-content: center !important;
align-items: center !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.page-item .page-link {
font-family: var(--font-body) !important;
font-size: 12px !important;
font-weight: 400 !important;
color: var(--trpz-brun) !important;
background: transparent !important;
border: 1px solid #C8BFB0 !important;
border-radius: 20px !important;
padding: 6px 14px !important;
min-width: 36px !important;
text-align: center;
transition: all 0.15s ease;
text-decoration: none !important;
}
.page-item .page-link:hover {
background: #f0ece3 !important;
border-color: var(--trpz-brun) !important;
}
.page-item.active .page-link {
background: var(--trpz-brun) !important;
color: #faf9f7 !important;
border-color: var(--trpz-brun) !important;
font-weight: 500 !important;
}
/* ── 22c. FILTRES OFFCANVAS MOBILE ── */
#search_filter_toggler {
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: var(--trpz-brun) !important;
background: #faf9f7 !important;
border: 1px solid #C8BFB0 !important;
border-radius: 20px !important;
padding: 8px 20px !important;
width: 100% !important;
}
#offcanvas-faceted {
background-color: #faf9f7 !important;
}
#offcanvas-faceted .offcanvas-header {
border-bottom: 0.5px solid #D4C9B0 !important;
padding: 16px 20px !important;
}
#offcanvas-faceted .offcanvas-title {
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: var(--trpz-brun) !important;
}
.search-filters .facet-title .accordion-button {
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: var(--trpz-brun) !important;
background: transparent !important;
box-shadow: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.hr-faceted { border-color: #E8E3DC !important; }
/* ── Filtre tailles listing — charte rectangles ── */
/* Liste en flex wrap */
.facet-sizes .accordion-body,
.facet-sizes ul.accordion-body {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
padding: 10px 0 4px !important;
list-style: none !important;
margin: 0 !important;
}
/* Items */
.facet-sizes .accordion-body li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Masquer le conteneur form-check par défaut */
.facet-sizes .facet-label,
.facet-sizes .search-filters-label {
margin: 0 !important;
padding: 0 !important;
}
.facet-sizes .form-check {
padding: 0 !important;
margin: 0 !important;
min-height: auto !important;
}
/* Masquer le checkbox natif */
.facet-sizes .form-check-input {
position: absolute !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
pointer-events: none !important;
margin: 0 !important;
}
/* Label = rectangle — même charte que fiche produit */
.facet-sizes .form-check-label {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 48px !important;
height: 38px !important;
padding: 0 12px !important;
font-family: var(--font-body) !important;
font-size: 13px !important;
font-weight: 400 !important;
color: var(--trpz-brun) !important;
background: #faf9f7 !important;
border: 1px solid #C8BFB0 !important;
border-radius: 4px !important;
cursor: pointer !important;
transition: all 0.15s ease;
margin: 0 !important;
user-select: none;
}
/* Hover */
.facet-sizes .form-check-label:hover {
border-color: var(--trpz-brun) !important;
background: #f0ece3 !important;
}
/* Sélectionné — :has() pour cibler le label parent depuis l'input enfant */
.facet-sizes .form-check-label:has(input:checked) {
background: var(--trpz-brun) !important;
color: #faf9f7 !important;
border-color: var(--trpz-brun) !important;
font-weight: 500 !important;
}
/* Lien à l'intérieur du label */
.facet-sizes .search-filters-link {
font-family: var(--font-body) !important;
font-size: 13px !important;
font-weight: inherit !important;
color: inherit !important;
text-decoration: none !important;
background: none !important;
border: none !important;
padding: 0 !important;
display: inline !important;
}
.noUi-connect { background: var(--trpz-brun) !important; }
.noUi-handle {
border: 2px solid var(--trpz-brun) !important;
border-radius: 50% !important;
box-shadow: none !important;
}
/* ── 22d. TITRE + TRI LISTING ── */
#product-list-header .h1 {
font-family: var(--font-display) !important;
font-size: clamp(24px, 4vw, 40px) !important;
font-weight: 700 !important;
letter-spacing: 0.01em !important;
color: var(--trpz-brun) !important;
margin-bottom: 4px !important;
}
.total-products p {
font-family: var(--font-body) !important;
font-size: 12px !important;
font-weight: 300 !important;
color: var(--trpz-taupe) !important;
}
.products-sort-order .dropdown-item {
font-family: var(--font-body) !important;
font-size: 12px !important;
font-weight: 300 !important;
color: var(--trpz-brun) !important;
}
.products-sort-order .dropdown-item:hover {
background: #f0ece3 !important;
}
/* ── Filtres desktop (COULEURS / TAILLES / PRIX) — +1pt de typo ── */
/* Boutons de facettes barre desktop — sobre, juste taille augmentée */
#_desktop_faceted .facet-title .accordion-button,
#_desktop_faceted .facet .facet-title,
.faceted-search-adapter .facet-title button,
#search_filters .facet-title .accordion-button {
font-family: var(--font-body) !important;
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: var(--trpz-brun) !important;
background: transparent !important;
box-shadow: none !important;
}
/* Bouton "Voir plus de filtres" */
#js-more-filters {
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 400 !important;
letter-spacing: 0.1em !important;
color: var(--trpz-brun) !important;
text-decoration: underline !important;
text-underline-offset: 4px !important;
background: none !important;
border: none !important;
}
/* Bouton tri desktop */
#selected-sort-btn,
.products-sort-order .accordion-button,
.products-sort-order,
.products-sort-order label,
.products-sort-order .sort-by,
#js-product-list-header .sort-by {
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 400 !important;
font-style: normal !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: var(--trpz-brun) !important;
}
#selected-sort-btn,
.products-sort-order .accordion-button {
background: transparent !important;
border: 1px solid #C8BFB0 !important;
border-radius: 20px !important;
padding: 6px 16px !important;
box-shadow: none !important;
}
/* ── 23. FICHE PRODUIT MOBILE — dropdown taille + CTA sticky ── */
/* Sur mobile PS affiche un