/* Theme Name: Zampela Boutique Theme URI: https://zampela.com/ Description: Thème enfant d'Agama pour la boutique Zampela — grille de planches, survol à deux images, fiches produits en colonne. Palette dorée, grise et brune de la marque. Author: Nathaniel Template: agama Version: 1.16.4 Requires PHP: 7.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: zampela-boutique */ /* ========================================================================== 1. PALETTE Ces couleurs sont modifiables sans toucher au code : Apparence > Personnaliser > Boutique Zampela > Couleurs Les valeurs ci-dessous ne servent que de secours. ========================================================================== */ :root{ --zp-dore:#DCC48B; /* tous les traits, filets et séparateurs */ --zp-gris:#7a7a7a; /* textes secondaires, mentions */ --zp-brun:#6F6254; /* titres et textes principaux */ --zp-fond:#FCFBF7; /* fond de page, blanc à peine crème */ --zp-encre:#1C2620; /* bouton d'achat — le ton sombre de la maquette */ --zp-menu:180px; /* hauteur du menu fixe : le bloc collant s'arrête dessous */ --zp-feuille:#FFFFFF;/* fond des planches */ --zp-serif:'Fraunces', Georgia, 'Times New Roman', serif; --zp-sans:'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --zp-echelle-texte:1; /* réglable dans Personnaliser > Écritures */ --zp-echelle-titres:1; --zp-largeur:100%; /* réglable : Personnaliser > Grille > Largeur */ --zp-marge:clamp(1.2rem,4vw,4rem); /* gouttière latérale en pleine largeur */ --zp-colonnes:3; } /* ========================================================================== 1 bis. EN-TÊTE Ces règles s'appliquent à tout le site, et non à la seule boutique : l'en-tête est commun à toutes les pages. ========================================================================== */ /* Le bloc menu + boutons touchait presque le bord droit. On lui redonne de l'air, en proportion de l'écran : discret sur téléphone, franc sur grand écran. Le logo ne bouge pas. */ #masthead #agama-primary-nav{ padding-right:clamp(.5rem, 2.2vw, 2.75rem); } /* Le compteur du panier : le rouge vif d'Agama (#ff5252) jure avec la charte. On reprend le doré, avec un texte sombre — du blanc sur ce doré clair donnerait un contraste d'environ 1,8 pour 1, illisible. */ #masthead .navbar-buttons .badge, #masthead .navbar-buttons .badge-danger, .navbar-buttons .badge.badge-danger{ background-color:var(--zp-dore); color:var(--zp-encre); font-weight:600; } #masthead .navbar-buttons a.badge-danger:hover, #masthead .navbar-buttons a.badge-danger:focus{ background-color:var(--zp-brun); color:var(--zp-feuille); } /* ========================================================================== 2. CADRE GÉNÉRAL ========================================================================== */ .zp-shop{ background:var(--zp-fond); color:var(--zp-brun); font-family:var(--zp-sans); font-size:calc(16px * var(--zp-echelle-texte)); line-height:1.6; -webkit-font-smoothing:antialiased; } .zp-shop *, .zp-shop *::before, .zp-shop *::after{box-sizing:border-box} /* Le fond crème de la maquette. Le poser sur le seul ne suffit pas : Agama repeint en blanc ses propres conteneurs, qui recouvrent la page. On le pose donc aussi sur chacun d'eux. L'en-tête et le pied de page ne sont pas concernés. */ /* Agama pose « body.custom-background-empty { background-color:#fff } ». Cette règle a la même spécificité que « body.zp-shop » : on la double pour passer devant sans recourir à !important. */ body.zp-shop.custom-background-empty, body.zp-shop.custom-background-white, body.zp-shop .site, body.zp-shop #agama-main-wrapper, body.zp-shop, body.zp-shop #page, body.zp-shop .site, body.zp-shop #content, body.zp-shop .site-content, body.zp-shop .content-area, body.zp-shop #primary, body.zp-shop .zp-primary, body.zp-shop .zp-content, body.zp-shop main, body.zp-shop .woocommerce{ background-color:var(--zp-fond); } /* Un seul ancêtre en « overflow » autre que visible suffit à neutraliser position:sticky sur le bloc d'informations. On dégage la chaîne complète, de la page jusqu'à la fiche. Les cadres photo, eux, gardent leur overflow:hidden : ils sont en dessous, pas au-dessus. */ body.zp-shop, body.zp-shop #page, body.zp-shop .site, body.zp-shop #content, body.zp-shop #primary, body.zp-shop .zp-primary, body.zp-shop .zp-content, /* -------------------------------------------------------------------------- LA PLEINE LARGEUR Régler --zp-largeur ne suffit pas : nos conteneurs sont eux-mêmes enfermés dans la grille du thème parent. Agama place le contenu dans #agama-main-wrapper > #page > #main.wrapper > .vision-row.tv-row, et .tv-container de Bootstrap plafonne à 1140 px. Tant que ces bornes tiennent, la boutique ne peut pas s'étendre au-delà. On les lève ici — et sur les seules pages de catalogue, grâce à la classe zp-shop-page. Le reste du site garde sa mise en page. .tv-row porte des marges négatives de 15 px pour compenser les gouttières de Bootstrap : remises à zéro, sans quoi elles provoqueraient un débordement horizontal une fois la largeur libérée. -------------------------------------------------------------------------- */ body.zp-shop-page #page, body.zp-shop-page #page.site, body.zp-shop-page #main, body.zp-shop-page #main.wrapper, body.zp-shop-page #main .vision-row, body.zp-shop-page #main .tv-row, body.zp-shop-page #main .tv-container, body.zp-shop-page #primary, body.zp-shop-page .zp-primary, body.zp-shop-page .zp-content{ max-width:none; width:100%; margin-left:0; margin-right:0; padding-left:0; padding-right:0; float:none; } /* La rangée Bootstrap redevient un simple bloc : ses colonnes flottantes n'ont plus lieu d'être puisque la boutique gère sa propre grille. */ body.zp-shop-page #main .vision-row.tv-row{ display:block; } /* L'en-tête et le pied de page ne sont pas concernés : ils vivent hors de #main et gardent la largeur du reste du site. Sans cette limite, la boutique aurait un en-tête différent des autres pages. */ /* Le conteneur principal d'Agama, identifié à la source : dans son style.css, « #agama-main-wrapper » porte « overflow:hidden » (ligne 2091). C'était LE blocage du bloc collant : un seul ancêtre suffit à neutraliser position:sticky, où qu'il se trouve dans la page. Même correction que partout ailleurs — « clip » découpe pareil sans ouvrir de conteneur de défilement. On en profite pour retirer son fond blanc et son ombre portée, qui traversaient le fond crème de la boutique. */ body.zp-shop #agama-main-wrapper, body.zp-shop #agama-main-wrapper.is-full-width{ overflow-x:clip; overflow-y:visible; background-color:var(--zp-fond); box-shadow:none; } body.zp-shop .zp-single, body.zp-shop .zp-fiche, body.zp-shop .zp-galerie{ /* « clip » plutôt que « visible » : la découpe est la même que « hidden », mais sans ouvrir de conteneur de défilement — position:sticky continue donc de fonctionner. La protection contre le débordement horizontal reste en place. */ overflow-x:clip; overflow-y:visible; } /* Les zones neutres du thème parent qui traverseraient la boutique. */ body.zp-shop .entry-content, body.zp-shop article.page, body.zp-shop .zp-single{ background-color:transparent; } .zp-shop img{display:block;max-width:100%;height:auto} .zp-shop a{color:inherit;text-decoration:none} .zp-shop .zp-eyebrow{ font-size:.68rem; text-transform:uppercase; letter-spacing:.2em; color:var(--zp-gris); font-weight:600; } /* Le thème parent enferme WooCommerce dans une colonne étroite : on reprend toute la largeur pour la boutique. */ body.zp-shop-page #primary, body.zp-shop-page .site-content{ width:100%; max-width:100%; flex:0 0 100%; padding-left:0; padding-right:0; } body.zp-shop-page #secondary, body.zp-shop-page .widget-area{display:none} /* ========================================================================== 3. BARRE DE RAYONS (catégories) ========================================================================== */ .zp-rayons{ position:-webkit-sticky; position:sticky; top:0; z-index:20; background:var(--zp-fond); border-top:1px solid var(--zp-dore); border-bottom:1px solid var(--zp-dore); } .zp-rayons__inner{ max-width:var(--zp-largeur); margin:0 auto; display:flex; justify-content:center; gap:clamp(1rem,4vw,3.5rem); padding:0 1.2rem; overflow-x:auto; scrollbar-width:none; } .zp-rayons__inner::-webkit-scrollbar{display:none} .zp-shop .zp-rayon{ position:relative; display:block; padding:1.15rem .2rem; font-size:.72rem; text-transform:uppercase; letter-spacing:.17em; font-weight:500; color:var(--zp-gris); white-space:nowrap; transition:color .25s ease; } .zp-shop .zp-rayon:hover, .zp-shop .zp-rayon.is-active{color:var(--zp-brun)} .zp-shop .zp-rayon.is-active::after{ content:""; position:absolute; left:0;right:0;bottom:-1px; height:2px; background:var(--zp-dore); } /* ========================================================================== 4. PRÉSENTATION DE RAYON Deux cas : une page WordPress choisie dans la catégorie (zone Elementor, libre), ou le simple chapeau titre + description. ========================================================================== */ .zp-intro{ /* contenu Elementor, on ne contraint rien */ max-width:100%; margin:0 auto; } .zp-intro > .elementor{margin-bottom:2rem} .zp-chapeau{ max-width:640px; margin:0 auto; padding:3.4rem 2rem 2.8rem; text-align:center; } .zp-chapeau h1{ font-family:var(--zp-serif); font-weight:300; font-variation-settings:'WONK' 1; font-size:calc(clamp(2rem,4.6vw,3.1rem) * var(--zp-echelle-titres)); line-height:1.12; letter-spacing:-.01em; color:var(--zp-brun); margin:0; } .zp-chapeau p{ margin:1rem 0 0; color:var(--zp-gris); font-size:.98rem; } .zp-chapeau--serre{padding-top:2.4rem} /* Filet doré décoratif, réutilisable */ .zp-filet{ width:64px; height:1px; margin:2.2rem auto; background:var(--zp-dore); border:0; } /* ========================================================================== 5. GRILLE DE PLANCHES ========================================================================== */ .zp-planches{ max-width:var(--zp-largeur); margin:0 auto; padding:0 var(--zp-marge) 5rem; display:grid; grid-template-columns:1fr; gap:3.4rem 2rem; align-items:start; /* autorise des hauteurs différentes */ list-style:none; } @media(min-width:680px){ .zp-planches{grid-template-columns:repeat(2,1fr)} } @media(min-width:1080px){ .zp-planches{ grid-template-columns:repeat(var(--zp-colonnes),1fr); gap:4rem 2.6rem; } } /* WooCommerce pose un « clearfix » sur ul.products. Dans une grille, ces pseudo-éléments comptent comme des cases : d'où une case vide en tête de grille, et le décalage de toute la suite. On les neutralise. */ .zp-shop ul.zp-planches::before, .zp-shop ul.zp-planches::after, .woocommerce ul.zp-planches::before, .woocommerce ul.zp-planches::after{ content:none; display:none; } .zp-shop ul.zp-planches li.product, .zp-planche{ display:flex; flex-direction:column; width:auto; margin:0; float:none; clear:none; } /* --- le cadre --- */ .zp-planche__cadre{ display:block; position:relative; width:100%; aspect-ratio:var(--zp-ratio, 1/1); background:var(--zp-feuille); border:1px solid var(--zp-dore); overflow:hidden; cursor:pointer; transition:border-color .45s ease; /* Stabilise le rendu : sans cela, le navigateur recompose l'image à chaque image de l'animation et elle paraît vibrer. */ transform:translateZ(0); backface-visibility:hidden; } /* Le survol est déclenché par la carte entière, pas par le cadre. Le cadre se soulève de quelques pixels : s'il portait lui-même le survol, il glisserait sous le curseur, sortirait de sa zone, redescendrait, et le cycle recommencerait plusieurs fois par seconde — l'image semblerait trembler. La carte, elle, ne bouge jamais : le survol reste stable. */ /* Au survol, rien ne bouge et rien ne s'assombrit : seule la bascule entre les deux images se joue, en fondu et mise au point. Pour retrouver un cadre qui se marque, ajouter ici : border-color:var(--zp-brun); et pour le soulèvement : transform:translateY(-6px) translateZ(0); */ .zp-planche__cadre:focus-visible{ border-color:var(--zp-brun); } .zp-planche__cadre:focus-visible{ outline:2px solid var(--zp-dore); outline-offset:3px; } /* Repli pour les navigateurs sans aspect-ratio */ @supports not (aspect-ratio:1/1){ .zp-planche__cadre{height:0;padding-bottom:100%} } /* --- les deux images --- */ .zp-planche__img{ position:absolute; inset:0; width:100%; height:100%; margin:0; /* Seuls l'opacité et le flou sont animés. Aucune transformation : la moindre mise à l'échelle recalcule l'image à chaque trame et les contours semblent vibrer. */ transition:opacity .55s ease, filter .55s ease; /* Fixe l'image sur sa propre couche : elle n'est plus recomposée à chaque trame de l'animation. */ transform:translateZ(0); backface-visibility:hidden; } /* WooCommerce impose « height:auto » et une marge basse à toute image de vignette, avec une spécificité plus forte que la règle ci-dessus : .woocommerce ul.products li.product a img. L'image gardait donc sa hauteur naturelle et laissait du blanc sous elle dans les cadres les plus hauts. On repasse devant, sélecteur pour sélecteur. */ .zp-shop ul.zp-planches li.product a img.zp-planche__img, .woocommerce ul.zp-planches li.product a img.zp-planche__img{ width:100%; height:100%; margin:0; display:block; box-shadow:none; } /* L'aperçu occupe tout le cadre, sans marge blanche : les proportions réelles de l'œuvre se retrouvent sur la fiche produit, au clic. */ .zp-planche__img--face{ object-fit:cover; padding:0; } .zp-planche__img--dos{ object-fit:cover; padding:0; opacity:0; /* Un flou trop marqué scintille pendant la transition : 6 px suffisent à donner la bascule de mise au point. Plus aucune mise à l'échelle : l'image reste rigoureusement immobile. */ filter:blur(6px); } .zp-planche:hover .zp-planche__img--face, .zp-planche__cadre:focus-visible .zp-planche__img--face{ opacity:0; filter:blur(6px); } .zp-planche:hover .zp-planche__img--dos, .zp-planche__cadre:focus-visible .zp-planche__img--dos{ opacity:1; filter:blur(0); } /* --- pastille d'état --- */ .zp-planche__etat{ position:absolute; top:0;left:0; z-index:2; background:var(--zp-brun); color:var(--zp-feuille); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; padding:.4rem .75rem; font-weight:600; } /* --- étiquette d'herbier --- */ .zp-planche__etiquette{padding:1.1rem .2rem 0} /* Un seul filet dans l'étiquette : celui qui annonce le prix. Tout autre trait — hérité du thème parent, de WooCommerce ou d'une extension — est neutralisé ici. Sans cette remise à zéro, une fiche sans ligne de description affiche deux traits encadrant du vide. */ .zp-shop .zp-planche__etiquette, .zp-shop .zp-planche__etiquette > *, .zp-shop .zp-planche__etiquette > * > *{ border:0; } .zp-shop .zp-planche__etiquette .zp-planche__prix{ border-top:1px solid var(--zp-dore); } .zp-planche__serie{ display:block; font-size:.62rem; text-transform:uppercase; letter-spacing:.2em; color:var(--zp-gris); font-weight:600; margin-bottom:.35rem; } .zp-shop .zp-planche__titre{ font-family:var(--zp-serif); font-weight:400; font-size:calc(1.3rem * var(--zp-echelle-titres)); line-height:1.2; color:var(--zp-brun); margin:0 0 .5rem; padding:0; } .zp-planche__titre em{font-style:italic;font-weight:300} .zp-planche__spec{ font-size:.79rem; color:var(--zp-gris); line-height:1.45; margin:0; } /* Sans ligne de description, le prix remonte : pas de vide entre deux traits. */ .zp-shop .zp-planche__spec + .zp-planche__prix{margin-top:.85rem} .zp-shop .zp-planche__prix{ margin:.7rem 0 0; padding-top:.7rem; border-top:1px solid var(--zp-dore); font-size:.88rem; letter-spacing:.03em; font-weight:500; color:var(--zp-brun); } .zp-shop .zp-planche__prix .woocommerce-Price-amount{color:inherit} .zp-shop .zp-planche__prix del{opacity:.5;margin-right:.4em} .zp-shop .zp-planche__prix ins{text-decoration:none} .zp-planche__prix--vendu{color:var(--zp-gris);font-weight:400} /* On masque les boutons ajoutés par WooCommerce dans la boucle */ .zp-planches .button, .zp-planches .added_to_cart, .zp-planches .onsale{display:none} /* ========================================================================== 5 bis. MOSAÏQUE, SOMMAIRE ET VOLETS ========================================================================== */ /* -------------------------------------------------------------------------- La mosaïque. Des rangées de 4 px, et chaque planche en occupe autant qu'il lui en faut (js/mosaique.js). Les œuvres gardent leurs proportions réelles et remontent combler les vides, au lieu de s'aligner sur la plus haute de leur rangée. Sans JavaScript, « align-items:start » suffit à garder une grille lisible. -------------------------------------------------------------------------- */ body.zp-grille-mosaique .zp-planches{ grid-auto-rows:4px; align-items:start; row-gap:0; /* l'écart est repris dans le calcul des rangées */ } body.zp-grille-mosaique .zp-planches:not(.zp-mosaique-calee){ grid-auto-rows:auto; row-gap:3.4rem; } @media(min-width:1080px){ body.zp-grille-mosaique .zp-planches:not(.zp-mosaique-calee){row-gap:4rem} } /* En mosaïque, le cadre suit les proportions de l'œuvre, sans les forcer. */ body.zp-grille-mosaique .zp-planche__cadre{ aspect-ratio:var(--zp-ratio, 4/5); } /* -------------------------------------------------------------------------- Le sommaire latéral. -------------------------------------------------------------------------- */ .zp-catalogue{ max-width:var(--zp-largeur); margin:0 auto; padding:0 var(--zp-marge) 5rem; } .zp-catalogue__grille{min-width:0} /* La grille vit désormais dans le conteneur : elle n'a plus à se recentrer. */ .zp-catalogue .zp-planches, .zp-catalogue .zp-plus, .zp-catalogue .zp-vide, .zp-catalogue .woocommerce-pagination{ max-width:none; margin-left:0; margin-right:0; padding-left:0; padding-right:0; } .zp-catalogue .zp-planches{padding-bottom:0;margin-top:0} .zp-catalogue .zp-plus{margin-bottom:0;margin-top:3rem} @media(min-width:1000px){ body.zp-avec-sommaire .zp-catalogue{ display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr); gap:3.5rem; align-items:start; } } .zp-sommaire{margin:0 0 2.5rem} @media(min-width:1000px){ .zp-sommaire{ position:-webkit-sticky; position:sticky; top:var(--zp-menu, 180px); align-self:start; margin:0; } } .zp-sommaire__titre{ font-size:.62rem; text-transform:uppercase; letter-spacing:.2em; color:var(--zp-gris); font-weight:600; margin:0 0 .8rem; padding-bottom:.7rem; border-bottom:1px solid var(--zp-dore); } .zp-sommaire__titre + .zp-sommaire__liste + .zp-sommaire__titre{margin-top:2.2rem} .zp-sommaire__liste{ list-style:none; margin:0 0 1.6rem; padding:0; } .zp-sommaire__liste li{margin:0} .zp-shop .zp-sommaire__lien{ display:flex; align-items:baseline; justify-content:space-between; gap:.8rem; padding:.5rem 0; font-size:.82rem; line-height:1.35; color:var(--zp-gris); transition:color .25s ease; } .zp-shop .zp-sommaire__lien:hover{color:var(--zp-brun)} .zp-shop .zp-sommaire__lien.is-active{ color:var(--zp-brun); font-weight:600; } .zp-sommaire__lien em{ font-family:var(--zp-serif); font-style:normal; font-size:.72rem; opacity:.55; font-variant-numeric:oldstyle-nums; } /* Sur petit écran, le sommaire devient une ligne défilante au-dessus. */ @media(max-width:999px){ .zp-sommaire__interieur{ display:flex; gap:1.6rem; overflow-x:auto; scrollbar-width:none; padding-bottom:.4rem; } .zp-sommaire__interieur::-webkit-scrollbar{display:none} .zp-sommaire__titre{ border:0; padding:0; margin:0; white-space:nowrap; align-self:center; } .zp-sommaire__liste{ display:flex; gap:1.1rem; margin:0; } .zp-shop .zp-sommaire__lien{ padding:.35rem 0; white-space:nowrap; font-size:.75rem; } } /* -------------------------------------------------------------------------- Les volets « Plus d'informations ». -------------------------------------------------------------------------- */ /* La section dépliante, sous les deux colonnes et sur toute la largeur. Les textes longs y respirent, au lieu d'être comprimés dans la colonne du bouton d'achat. La lecture reste confortable grâce à une mesure limitée : au-delà d'environ 80 caractères par ligne, l'œil se perd. */ .zp-complements{ max-width:var(--zp-largeur); margin:0 auto; padding:1rem var(--zp-marge) 4rem; } .zp-shop .zp-complements__titre{ font-family:var(--zp-serif); font-weight:300; font-variation-settings:'WONK' 1; font-size:calc(clamp(1.5rem,2.6vw,2rem) * var(--zp-echelle-titres)); color:var(--zp-brun); margin:0 0 1.6rem; padding:0; } .zp-complements .zp-volets{ max-width:none; margin-top:0; } /* Le texte occupe toute la largeur du volet. Sur très grand écran il se répartit en deux colonnes plutôt que de s'étirer : au-delà d'environ 90 caractères par ligne, l'œil perd sa place en revenant à la marge. */ @media(min-width:1500px){ .zp-complements .zp-volet__contenu{ column-count:2; column-gap:4.5rem; } .zp-complements .zp-volet__contenu > *{break-inside:avoid} } .zp-volets{ margin-top:1.8rem; border-top:1px solid var(--zp-dore); } .zp-volet{ border-bottom:1px solid var(--zp-dore); } .zp-shop .zp-volet__titre{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 0; cursor:pointer; list-style:none; font-size:.68rem; text-transform:uppercase; letter-spacing:.16em; font-weight:600; color:var(--zp-brun); transition:color .25s ease; } .zp-shop .zp-volet__titre:hover{color:var(--zp-gris)} .zp-shop .zp-volet__titre:focus-visible{ outline:2px solid var(--zp-dore); outline-offset:2px; } /* La flèche par défaut des navigateurs est masquée au profit du signe. */ .zp-volet__titre::-webkit-details-marker{display:none} .zp-volet__titre::marker{content:''} /* Un « + » qui devient « − » à l'ouverture, tracé en CSS. */ .zp-volet__signe{ position:relative; flex:0 0 auto; width:11px; height:11px; } .zp-volet__signe::before, .zp-volet__signe::after{ content:''; position:absolute; background:var(--zp-dore); transition:transform .3s ease, opacity .3s ease; } .zp-volet__signe::before{ top:5px;left:0; width:11px;height:1px; } .zp-volet__signe::after{ top:0;left:5px; width:1px;height:11px; } .zp-volet[open] .zp-volet__signe::after{ transform:rotate(90deg); opacity:0; } /* À l'ouverture, le contenu se révèle en fondu. L'élément

n'anime rien de lui-même : l'animation se déclenche au moment où le contenu est affiché, ce qui suffit à adoucir l'apparition. */ .zp-volet[open] .zp-volet__contenu{ animation:zp-deplier .45s cubic-bezier(.2,.7,.3,1) both; } @keyframes zp-deplier{ from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} } @media(prefers-reduced-motion:reduce){ .zp-volet[open] .zp-volet__contenu{animation:none} } .zp-volet__contenu{ padding:0 0 1.4rem; font-size:.88rem; line-height:1.75; color:var(--zp-gris); } .zp-volet__contenu p{margin:0 0 .9rem} .zp-volet__contenu p:last-child{margin-bottom:0} .zp-volet__contenu ul{ margin:0 0 .9rem; padding-left:1.1rem; list-style:none; } .zp-volet__contenu li{ position:relative; margin-bottom:.35rem; } .zp-volet__contenu li::before{ content:'\2736'; position:absolute; left:-1.1rem; color:var(--zp-dore); font-size:.7em; top:.25em; } @media(prefers-reduced-motion:reduce){ .zp-volet__signe::before, .zp-volet__signe::after{transition:none} } /* ========================================================================== 6. BANDEAU DE RÉASSURANCE ========================================================================== */ .zp-socle{ border-top:1px solid var(--zp-dore); background:#F7F4EC; } .zp-socle__inner{ max-width:1000px; margin:0 auto; padding:3.4rem 2rem; display:grid; gap:2.4rem; text-align:center; } @media(min-width:760px){ .zp-socle__inner{grid-template-columns:repeat(3,1fr)} } .zp-shop .zp-socle h3{ font-family:var(--zp-serif); font-weight:400; font-size:1.05rem; color:var(--zp-brun); margin:.6rem 0 .35rem; } .zp-socle p{font-size:.83rem;color:var(--zp-gris);margin:0} .zp-socle__glyphe{ font-family:var(--zp-serif); font-size:1.5rem; color:var(--zp-dore); font-weight:300; line-height:1; } /* ========================================================================== 7. FICHE PRODUIT Colonne de photos qui défile à gauche, bloc d'informations fixe à droite. ========================================================================== */ /* -------------------------------------------------------------------------- Remise à zéro — à lire avant de toucher au reste. WooCommerce, Agama et Bootstrap posent chacun leurs règles sur « div.product » et sur « div.summary » : flottements, largeurs en pourcentage, marges négatives, « clearfix » en pseudo-éléments. Notre bloc d'informations porte la classe « summary » — WooCommerce en a besoin pour ses formulaires de variation — et héritait donc de « float:right ; width:48% ». Posé sur une grille, ce mélange faisait chevaucher les photos. On annule tout ici, une bonne fois, avant de poser notre mise en page. -------------------------------------------------------------------------- */ .zp-shop .zp-single, .zp-shop .zp-single .zp-fiche, .zp-shop .zp-single .zp-galerie, .zp-shop .zp-single .zp-vue, .zp-shop .zp-single .zp-fiche-bas{ float:none; clear:none; width:auto; max-width:none; min-height:0; position:static; } .zp-shop .zp-single .zp-vue{position:relative} /* Les « clearfix » de WooCommerce deviennent des cases dans une grille et des éléments dans une colonne flex : ils décalent tout ce qui suit. */ .zp-shop .zp-single::before, .zp-shop .zp-single::after, .zp-shop .zp-single .zp-fiche::before, .zp-shop .zp-single .zp-fiche::after, .zp-shop .zp-single .zp-galerie::before, .zp-shop .zp-single .zp-galerie::after{ content:none; display:none; } /* Aucune photo n'est positionnée, ne flotte, ni ne se superpose. Toutes les propriétés de dimension sont réglées ici, à une seule et même spécificité. Poser ailleurs une règle concurrente moins spécifique serait sans effet : c'est ce qui avait déformé les cadres. */ .zp-shop .zp-single .zp-vue img{ position:static; float:none; display:block; /* La photo occupe toute la surface intérieure du cadre, et « contain » préserve ses proportions en l'inscrivant dedans. Surtout pas de max-width/max-height en pourcentage ici : la hauteur du bouton dépendrait de l'image, et l'image de la hauteur du bouton. Cette référence circulaire faisait retomber le navigateur sur une vignette de quelques dizaines de pixels. */ width:100%; height:100%; object-fit:contain; object-position:center; margin:0; padding:0; border:0; box-shadow:none; transform:none; opacity:1; } /* --- la mise en page --- */ .zp-fiche{ max-width:var(--zp-largeur); margin:0 auto; padding:2.6rem var(--zp-marge) 6rem; display:grid; gap:2.4rem; } @media(min-width:940px){ .zp-fiche{ /* La colonne de texte gagne en largeur : les libellés du relevé et les lignes de description respirent au lieu de se casser tous les cinq mots. */ grid-template-columns:minmax(0,1fr) minmax(24rem,.86fr); gap:clamp(2.6rem,4.5vw,5rem); align-items:start; } } /* fil d'ariane maison */ .zp-fil{ max-width:var(--zp-largeur); margin:0 auto; padding:1.3rem var(--zp-marge); border-bottom:1px solid var(--zp-dore); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--zp-gris); } .zp-fil a:hover{color:var(--zp-brun)} .zp-fil span{color:var(--zp-dore);margin:0 .5em} /* --- colonne gauche : les photos --- */ .zp-galerie{ display:flex; flex-direction:column; gap:1.4rem; margin:0; } /* Sur la fiche produit, chaque photo garde ses proportions réelles. Une image paysage donne un cadre paysage, une image portrait un cadre portrait : plus de grande zone vide autour de l'œuvre. */ .zp-vue{ position:relative; display:grid; /* « stretch » et non « center » : le bouton doit remplir la surface pour que la photo ait une hauteur de référence. Le centrage de l'œuvre est assuré par object-fit, pas par la grille. */ place-items:stretch; background:var(--zp-feuille); border:1px solid var(--zp-dore); /* La marge généreuse de la maquette : l'œuvre est posée sur une feuille, pas collée au bord du cadre. */ padding:clamp(22px,6.5%,64px); margin:0; line-height:0; /* Hauteur définie, calculée sur les proportions de CETTE photo (voir zp_ratio_image() dans inc/produit-meta.php). Sans hauteur définie, un cadre se réduit à ses marges et la photo déborde sur la suivante. */ aspect-ratio:var(--zp-ratio, 4/5); /* Filet de sécurité : quoi qu'il arrive, rien ne sort du cadre. */ overflow:hidden; } /* Repli pour les navigateurs sans aspect-ratio : une hauteur raisonnable plutôt qu'un cadre écrasé. */ @supports not (aspect-ratio:1/1){ .zp-vue{min-height:60vh} } /* Fiche produit : pas d'ombre au survol non plus. Le curseur en loupe suffit à signaler que la photo s'agrandit au clic. */ /* La photo est un bouton : elle ouvre la visionneuse. Le bouton ne doit rien ajouter visuellement — ni fond, ni bordure, ni cadre de mise au point par défaut : c'est la planche elle-même qui répond au survol. */ .zp-vue__loupe{ display:block; /* Taille définie, héritée de la surface intérieure du cadre : c'est ce qui donne à la photo un repère stable pour se dimensionner. */ width:100%; height:100%; padding:0; margin:0; border:0; background:none; cursor:zoom-in; font:inherit; color:inherit; position:relative; line-height:0; } .zp-vue__loupe:focus-visible{ outline:2px solid var(--zp-dore); outline-offset:6px; } /* Chaque photo garde ses proportions réelles : ni recadrage, ni hauteur imposée. C'est ici, et seulement ici, que l'œuvre se voit entière. */ /* Les dimensions des photos sont réglées plus haut, dans le bloc de remise à zéro. Ne rien ajouter ici : une règle moins spécifique resterait sans effet et donnerait l'illusion d'un réglage actif. */ /* La mention « Agrandir », discrète, à l'approche du curseur. */ .zp-vue__mention{ position:absolute; bottom:.8rem;left:.9rem; padding:.34rem .7rem; background:var(--zp-feuille); border:1px solid var(--zp-dore); color:var(--zp-gris); font-size:.6rem; line-height:1; letter-spacing:.16em; text-transform:uppercase; opacity:0; transform:translateY(4px); transition:opacity .4s ease, transform .4s ease; } .zp-vue:hover .zp-vue__mention, .zp-vue__loupe:focus-visible .zp-vue__mention{ opacity:1; transform:translateY(0); } .zp-vue__rang{ position:absolute; bottom:.7rem;right:.9rem; font-family:var(--zp-serif); font-size:.68rem; color:var(--zp-gris); letter-spacing:.08em; } /* --- colonne droite : le bloc fixe --- La spécificité doit tenir tête à la remise à zéro plus haut, qui impose « position:static » à toute la fiche : sans cela, le bloc ne collerait pas. */ /* WooCommerce impose « float:right ; width:48% » à div.summary avec le sélecteur « .woocommerce div.product div.summary » — trois classes et deux éléments. Une chaîne de trois classes perd contre lui : c'est ce qui réduisait la colonne de texte à la moitié de sa place et empêchait le bloc de coller au défilement. On ajoute .zp-fiche et .summary à la chaîne, et on verrouille les deux déclarations décisives (voir plus bas). */ body.zp-shop .zp-single .zp-fiche .zp-infos, body.zp-shop .zp-single .zp-fiche .zp-infos.summary, body.zp-shop.woocommerce .zp-single .zp-fiche .zp-infos.summary{ align-self:start; /* WooCommerce impose « float:right ; width:48% » à div.summary. Ces deux déclarations sont les seules du fichier à porter !important : la règle adverse est chargée par le plugin, dont l'ordre de chargement varie selon les extensions actives. On ne laisse pas ce hasard décider de la largeur de la colonne. */ float:none !important; width:100% !important; clear:none; max-width:none; min-width:0; margin:0; padding:0; } @media(min-width:940px){ body.zp-shop .zp-single .zp-fiche .zp-infos, body.zp-shop .zp-single .zp-fiche .zp-infos.summary, body.zp-shop.woocommerce .zp-single .zp-fiche .zp-infos.summary{ position:-webkit-sticky;position:sticky; /* Le menu du site reste affiché en haut : le bloc s'immobilise juste en dessous, pas sous le bord de la fenêtre. Réglable d'un seul endroit, la variable --zp-menu en haut de ce fichier. */ top:var(--zp-menu, 180px); align-self:start; /* indispensable : un bloc étiré ne peut pas coller */ float:none; width:100%; /* Le bloc suit simplement le défilement, comme dans la maquette. Pas d'ascenseur interne : il coupait le bloc en deux visuellement. Si le contenu dépasse l'écran, la page défile normalement et le bloc se décroche en bas de sa colonne. */ } } /* ========================================================================== 7 bis. LA VISIONNEUSE Ouverte au clic sur une photo de la fiche produit. ========================================================================== */ /* Fige la page derrière la visionneuse. */ html.zp-fige, html.zp-fige body{overflow:hidden} .zp-visionneuse{ position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; gap:clamp(.4rem,2vw,1.6rem); padding:clamp(1rem,4vw,3rem); background:rgba(38,33,28,.94); opacity:0; transition:opacity .32s ease; } .zp-visionneuse[hidden]{display:none} .zp-visionneuse.is-ouverte{opacity:1} .zp-visionneuse__scene{ margin:0; flex:1 1 auto; display:flex; align-items:center; justify-content:center; min-width:0; height:100%; } .zp-visionneuse__img{ display:block; max-width:100%; max-height:100%; width:auto;height:auto; object-fit:contain; background:var(--zp-feuille); padding:clamp(8px,1.4vw,20px); box-shadow:0 40px 90px -40px rgba(0,0,0,.7); animation:zp-parait .4s ease both; } @keyframes zp-parait{ from{opacity:0;transform:scale(.985)} to{opacity:1;transform:none} } /* Les commandes : un trait doré sur le fond sombre, rien de plus. */ .zp-visionneuse__nav, .zp-visionneuse__fermer{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:3rem;height:3rem; padding:0; border:1px solid rgba(220,196,139,.45); border-radius:50%; background:none; color:var(--zp-dore); font-size:1.6rem; line-height:1; cursor:pointer; transition:background-color .3s ease, border-color .3s ease, color .3s ease; } .zp-visionneuse__nav:hover, .zp-visionneuse__fermer:hover, .zp-visionneuse__nav:focus-visible, .zp-visionneuse__fermer:focus-visible{ background:var(--zp-dore); border-color:var(--zp-dore); color:var(--zp-brun); } .zp-visionneuse__nav:focus-visible, .zp-visionneuse__fermer:focus-visible{ outline:2px solid var(--zp-feuille); outline-offset:3px; } .zp-visionneuse__fermer{ position:absolute; top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem); font-size:1.9rem; } .zp-visionneuse__rang{ position:absolute; bottom:clamp(1rem,3vw,2rem); left:0;right:0; margin:0; text-align:center; font-family:var(--zp-serif); font-size:.74rem; letter-spacing:.22em; color:var(--zp-dore); } /* Sur mobile, les flèches passent en bas, de part et d'autre du compteur. */ @media(max-width:700px){ .zp-visionneuse{padding:4.5rem 1rem 5.5rem} .zp-visionneuse__nav{ position:absolute; bottom:clamp(.8rem,3vw,1.6rem); } .zp-visionneuse__nav--precedent{left:1.2rem} .zp-visionneuse__nav--suivant{right:1.2rem} } @media(prefers-reduced-motion:reduce){ .zp-visionneuse, .zp-visionneuse__img{transition:none;animation:none} } .zp-shop .zp-infos__titre{ font-family:var(--zp-serif); font-weight:300; font-variation-settings:'WONK' 1; font-size:calc(clamp(1.9rem,3.6vw,2.6rem) * var(--zp-echelle-titres)); line-height:1.13; color:var(--zp-brun); margin:.55rem 0 .9rem; padding:0; /* Certains titres de produits dépassent 80 caractères : on évite qu'un mot déborde de la colonne, et on équilibre les lignes. */ overflow-wrap:break-word; text-wrap:balance; } .zp-shop .zp-infos__prix, .zp-shop .zp-infos p.price{ font-size:1.25rem; font-weight:500; letter-spacing:.02em; color:var(--zp-brun); padding-bottom:1.4rem; margin:0; border-bottom:1px solid var(--zp-dore); } .zp-shop .zp-infos p.price del{opacity:.5;margin-right:.4em} .zp-shop .zp-infos p.price ins{text-decoration:none} .zp-infos__pitch{ margin:1.4rem 0 1.8rem; font-size:.96rem; line-height:1.72; color:var(--zp-gris); } .zp-infos__pitch em{font-family:var(--zp-serif);font-style:italic} /* --- le relevé : les attributs du produit --- */ .zp-releve{ border-top:1px solid var(--zp-dore); margin:0 0 1.9rem; } .zp-releve__ligne{ display:grid; grid-template-columns:10.5rem 1fr; gap:1rem; padding:.72rem 0; border-bottom:1px solid var(--zp-dore); font-size:.83rem; } .zp-releve dt{ text-transform:uppercase; letter-spacing:.14em; font-size:.63rem; color:var(--zp-gris); font-weight:600; padding-top:.18em; margin:0; } .zp-releve dd{margin:0;color:var(--zp-brun)} .zp-releve dd em{font-family:var(--zp-serif);font-style:italic} @media(max-width:520px){ .zp-releve__ligne{grid-template-columns:1fr;gap:.2rem} } /* --- bouton panier --- */ /* -------------------------------------------------------------------------- Le formulaire d'ajout au panier. WooCommerce fait flotter la quantité à gauche et le bouton à sa suite. Posés dans une colonne étroite, les deux se chevauchent : le bouton passe sous le champ de quantité et déborde. On remplace tous ces flottements par une simple colonne. -------------------------------------------------------------------------- */ body.zp-shop .zp-single .zp-infos form.cart, .zp-shop .zp-infos .cart{ display:flex; flex-direction:column; align-items:stretch; gap:1rem; margin:0; float:none; width:100%; } /* Les « clearfix » de WooCommerce deviennent des éléments dans la colonne flex et y creusent un vide. */ body.zp-shop .zp-single .zp-infos form.cart::before, body.zp-shop .zp-single .zp-infos form.cart::after{ content:none; display:none; } /* Le champ de quantité : une boîte compacte, alignée à gauche, qui ne flotte pas et n'entraîne rien derrière elle. */ body.zp-shop .zp-single .zp-infos .quantity{ float:none; margin:0; width:auto; display:block; } body.zp-shop .zp-single .zp-infos .quantity input.qty, body.zp-shop .zp-single .zp-infos .quantity input{ width:5.5rem; min-height:3rem; text-align:center; border:1px solid var(--zp-dore); background:var(--zp-feuille); color:var(--zp-brun); font-family:var(--zp-sans); font-size:.95rem; border-radius:0; padding:.5rem; box-shadow:none; } /* Le bouton occupe toute la largeur, sous la quantité. */ body.zp-shop .zp-single .zp-infos form.cart button.single_add_to_cart_button, body.zp-shop .zp-single .zp-infos form.cart .single_add_to_cart_button{ float:none; width:100%; margin:0; min-height:3.4rem; } /* Le lien « Effacer » des variations : discret, jamais en gras. */ body.zp-shop .zp-single .zp-infos .reset_variations{ display:inline-block; margin:.2rem 0 0; font-size:.75rem; letter-spacing:.06em; color:var(--zp-gris); text-decoration:underline; text-underline-offset:3px; } body.zp-shop .zp-single .zp-infos .reset_variations:hover{color:var(--zp-brun)} /* Le bloc de prix propre à la variation choisie. */ body.zp-shop .zp-single .zp-infos .woocommerce-variation-price{ margin:0; font-size:1.05rem; font-weight:500; color:var(--zp-brun); } body.zp-shop .zp-single .zp-infos .woocommerce-variation-add-to-cart{ display:flex; flex-direction:column; gap:1rem; align-items:stretch; } /* Agama peint ses boutons avec sa couleur principale — devenue le doré via la charte — au moyen d'une feuille interne très spécifique. On repasse devant en ajoutant « .zp-single » à la chaîne. */ .zp-shop .zp-single .zp-infos button.single_add_to_cart_button, .zp-shop .zp-single .zp-infos .single_add_to_cart_button, .zp-shop .zp-infos button.single_add_to_cart_button, .zp-shop .zp-infos .single_add_to_cart_button{ display:block; width:100%; /* Doré de la charte, comme les traits. Le texte passe en encre sombre : sur ce doré clair, du blanc ne serait pas lisible. */ background:var(--zp-dore); color:var(--zp-encre); border:0; border-radius:0; padding:1.05rem; font-family:var(--zp-sans); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600; line-height:1.2; transition:background .25s ease; } .zp-shop .zp-single .zp-infos button.single_add_to_cart_button:hover, .zp-shop .zp-infos button.single_add_to_cart_button:hover{ background:var(--zp-brun); color:var(--zp-feuille); } .zp-infos__epuise{ display:block; width:100%; text-align:center; padding:1.05rem; border:1px solid var(--zp-dore); color:var(--zp-gris); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600; } .zp-infos__mentions{ margin-top:1.1rem; font-size:.75rem; color:var(--zp-gris); text-align:center; line-height:1.7; } /* quantité */ .zp-shop .zp-infos .quantity input{ border:1px solid var(--zp-dore); background:var(--zp-feuille); color:var(--zp-brun); padding:.6rem; } .zp-shop .zp-infos .quantity{margin-bottom:.9rem} /* variations */ /* Les variations : le libellé au-dessus du menu, pas à côté. Dans une colonne, deux cellules côte à côte écrasent le menu déroulant. */ body.zp-shop .zp-single .zp-infos table.variations, body.zp-shop .zp-single .zp-infos table.variations tbody, body.zp-shop .zp-single .zp-infos table.variations tr, body.zp-shop .zp-single .zp-infos table.variations th, body.zp-shop .zp-single .zp-infos table.variations td{ display:block; width:100%; border:0; background:none; padding:0; text-align:left; } body.zp-shop .zp-single .zp-infos table.variations tr + tr{margin-top:1rem} body.zp-shop .zp-single .zp-infos table.variations th{margin-bottom:.4rem} .zp-shop .zp-infos table.variations{ border:0; margin-bottom:1.2rem; width:100%; } .zp-shop .zp-infos table.variations th, .zp-shop .zp-infos table.variations td{ border:0; padding:.4rem 0; background:none; } .zp-shop .zp-infos table.variations label{ text-transform:uppercase; letter-spacing:.14em; font-size:.63rem; color:var(--zp-gris); font-weight:600; } .zp-shop .zp-infos select{ width:100%; border:1px solid var(--zp-dore); background:var(--zp-feuille); color:var(--zp-brun); padding:.8rem .9rem; min-height:3rem; font-family:var(--zp-sans); font-size:.9rem; border-radius:0; } /* ========================================================================== 8. PRODUITS APPARENTÉS ========================================================================== */ /* -------------------------------------------------------------------------- Les suggestions de bas de fiche. WooCommerce produit « section.related.products » : c'est cette classe qu'il faut viser, et non une classe maison, sans quoi la section se retrouve sans gouttière, collée au bord de l'écran. -------------------------------------------------------------------------- */ .zp-shop .zp-single .related.products, .zp-shop .zp-single .up-sells.products, .zp-apparentes{ border-top:1px solid var(--zp-dore); max-width:var(--zp-largeur); margin:0 auto; padding:3.6rem var(--zp-marge) 4rem; clear:both; float:none; width:auto; } .zp-shop .zp-single .related.products > h2, .zp-shop .zp-single .up-sells.products > h2, .zp-shop .zp-apparentes__titre{ font-family:var(--zp-serif); font-weight:300; font-variation-settings:'WONK' 1; font-size:calc(1.6rem * var(--zp-echelle-titres, 1)); color:var(--zp-brun); text-align:center; margin:0 0 2.6rem; padding:0; } /* Une seule rangée de vignettes plus fines. En pleine largeur, les trois colonnes de la boutique donneraient des suggestions démesurées, qui voleraient la vedette à l'œuvre consultée. */ .zp-shop .zp-single .related.products .zp-planches, .zp-shop .zp-single .up-sells.products .zp-planches{ max-width:none; margin:0; padding:0; gap:2rem 1.6rem; } @media(min-width:900px){ .zp-shop .zp-single .related.products .zp-planches, .zp-shop .zp-single .up-sells.products .zp-planches{ grid-template-columns:repeat(var(--zp-colonnes-apparentes, 4), minmax(0, 1fr)); } } /* Les étiquettes s'allègent à cette échelle. */ .zp-shop .zp-single .related.products .zp-planche__titre{ font-size:calc(1rem * var(--zp-echelle-titres, 1)); } .zp-shop .zp-single .related.products .zp-planche__spec{display:none} /* En mosaïque, les suggestions gardent une rangée régulière : le calage n'a pas lieu d'être sur une seule ligne. */ body.zp-grille-mosaique .related.products .zp-planches{ grid-auto-rows:auto; row-gap:2rem; } body.zp-grille-mosaique .related.products .zp-planche{grid-row:auto !important} /* ========================================================================== 9. PAGINATION & DIVERS WOOCOMMERCE ========================================================================== */ /* --- « Voir plus d'œuvres » --- */ .zp-plus{ max-width:var(--zp-largeur); margin:0 auto 5rem; padding:0 2rem; text-align:center; } .zp-plus__bouton{ display:inline-flex; flex-direction:column; align-items:center; gap:.35rem; padding:1rem 2.6rem; border:1px solid var(--zp-dore); background:none; color:var(--zp-brun); text-decoration:none; transition:background-color .45s ease, border-color .45s ease, color .45s ease; } .zp-plus__bouton:hover, .zp-plus__bouton:focus-visible{ background:var(--zp-dore); border-color:var(--zp-dore); color:var(--zp-brun); } .zp-plus__bouton:focus-visible{ outline:2px solid var(--zp-brun); outline-offset:3px; } .zp-plus__texte{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; } .zp-plus__reste{ font-family:var(--zp-serif); font-size:.72rem; font-style:italic; color:var(--zp-gris); letter-spacing:.04em; } .zp-plus__bouton:hover .zp-plus__reste, .zp-plus__bouton:focus-visible .zp-plus__reste{ color:var(--zp-brun); } /* Pendant le chargement : le bouton s'estompe et cesse de répondre. */ .zp-plus.is-chargement .zp-plus__bouton{ opacity:.5; pointer-events:none; } /* La zone de politesse ne s'adresse qu'aux lecteurs d'écran. */ .zp-plus__annonce{ position:absolute; width:1px;height:1px; margin:-1px;padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; } .zp-shop .woocommerce-pagination{ max-width:var(--zp-largeur); margin:0 auto 4rem; padding:0 2rem; text-align:center; } .zp-shop .woocommerce-pagination ul{ border:0; display:inline-flex; gap:.4rem; } .zp-shop .woocommerce-pagination ul li{border:0} .zp-shop .woocommerce-pagination ul li a, .zp-shop .woocommerce-pagination ul li span{ border:1px solid var(--zp-dore); color:var(--zp-gris); padding:.6rem .9rem; font-size:.75rem; letter-spacing:.1em; background:none; } .zp-shop .woocommerce-pagination ul li span.current{ background:var(--zp-dore); color:var(--zp-brun); } .zp-shop .woocommerce-message, .zp-shop .woocommerce-info, .zp-shop .woocommerce-error{ max-width:var(--zp-largeur); margin:0 auto 2rem; border-top-color:var(--zp-dore); background:var(--zp-feuille); color:var(--zp-brun); } .zp-vide{ max-width:640px; margin:0 auto; padding:4rem 2rem 6rem; text-align:center; color:var(--zp-gris); } /* ========================================================================== 10. ACCESSIBILITÉ ========================================================================== */ @media(prefers-reduced-motion:reduce){ .zp-shop *{ animation-duration:.01ms !important; transition-duration:.01ms !important; } } .zp-sr{ position:absolute; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }