/* Theme Name: PrismAtiX Author: Spline Online Description: Thème WordPress + WooCommerce pour la boutique PrismAtiX — mode, art et déco d'avant-garde, univers néon sombre. Mode clair ET mode sombre, une couleur néon par catégorie, diaporama et contenus pilotés depuis Apparence → Personnaliser. Prêt pour la traduction (aucun texte en dur). Version: 0.10.2 Requires at least: 5.9 Tested up to: 6.6 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: prismatix Tags: e-commerce, blog, custom-logo, custom-menu, featured-images, responsive, dark, light */ /* ========================================================= SOMMAIRE 1. Jetons (couleurs, mesures) — sombre puis clair 2. Socle 3. Néon : la mécanique d'accent 4. En-tête et navigation 5. Diaporama 6. Rang de catégories 7. Cartes produit 8. Cartes article 9. Accueil : sections 10. Boutique (archives + fiche produit) 11. Blog (archives + article) 12. Bandeau infolettre 13. Pied de page 14. Utilitaires, accessibilité, impression ========================================================= */ /* ========================================================= 1. JETONS Le mode sombre est la référence. Le mode clair n'est PAS une inversion : le halo disparaît au profit de traits pleins, et chaque teinte néon a une version « encre » plus foncée pour rester lisible sur fond clair (--pz-ink). ========================================================= */ :root { /* Fonds et texte — sombre */ --pz-bg: #0a0a0f; --pz-bg-2: #0d0d15; --pz-surface: #13131d; --pz-surface-2: #1a1a26; --pz-line: rgba(255, 255, 255, .10); --pz-line-soft: rgba(255, 255, 255, .06); --pz-text: #f4f4f8; --pz-muted: #a2a2b8; --pz-inverse: #0a0a0f; /* Palette néon (valeurs « allumées ») */ --pz-cyan: #00f0ff; --pz-magenta: #ff00c8; --pz-amber: #ffb800; --pz-mint: #00ffa3; --pz-violet: #a855f7; --pz-blue: #2f6bff; /* Accent courant. Réécrit en ligne sur chaque carte/rubrique. --pz-accent = version allumée · --pz-accent-ink = version encre */ --pz-accent: #00f0ff; --pz-accent-ink: #00768a; /* Mesures */ --pz-max: 1240px; --pz-gap: 24px; --pz-radius: 14px; --pz-radius-s: 10px; --pz-radius-l: 20px; /* Mouvement */ --pz-ease: cubic-bezier(.2, .7, .3, 1); --pz-dur: .3s; /* Typographie */ --pz-font: "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, "Segoe UI", sans-serif; --pz-font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; } /* ---- Mode clair : on repeint, on n'inverse pas ---- */ :root[data-pz-theme="light"] { --pz-bg: #f5f5fa; --pz-bg-2: #ececf4; --pz-surface: #ffffff; --pz-surface-2: #f2f2f8; --pz-line: rgba(10, 10, 20, .14); --pz-line-soft: rgba(10, 10, 20, .08); --pz-text: #14141f; --pz-muted: #5c5c72; --pz-inverse: #ffffff; } /* --------------------------------------------------------------- --pz-ink : la teinte réellement peinte, selon le mode. ⚠ Elle DOIT être recalculée sur chaque élément. Une variable qui en contient une autre est résolue là où elle est déclarée : posée une seule fois sur :root, --pz-ink resterait figée sur la teinte de la racine, et redéfinir --pz-accent sur une carte n'y changerait rien — tout le site resterait cyan. C'est le bug corrigé en v0.3.0. --------------------------------------------------------------- */ *, *::before, *::after { --pz-ink: var(--pz-accent); } /* Sur fond clair, c'est l'encre qui est peinte. */ :root[data-pz-theme="light"], :root[data-pz-theme="light"] *, :root[data-pz-theme="light"] *::before, :root[data-pz-theme="light"] *::after { --pz-ink: var(--pz-accent-ink); } /* ========================================================= 2. SOCLE ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--pz-bg); color: var(--pz-text); font-family: var(--pz-font); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } a:hover { color: var(--pz-ink); } h1, h2, h3, h4 { font-family: var(--pz-font-display); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; } p { margin: 0 0 1em; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--pz-ink); outline-offset: 3px; border-radius: 4px; } .pz-wrap { width: 100%; max-width: var(--pz-max); margin-inline: auto; padding-inline: 20px; } .pz-section { padding: 56px 0; } .pz-section--tight { padding: 32px 0; } /* Titre de section : capitales fines + trait néon dessous */ .pz-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } .pz-section-title { font-size: clamp(1.15rem, 2.4vw, 1.6rem); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin: 0; position: relative; padding-bottom: 10px; } .pz-section-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 2px; background: var(--pz-ink); } .pz-section-more { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--pz-muted); border-bottom: 1px solid transparent; transition: color var(--pz-dur) var(--pz-ease), border-color var(--pz-dur) var(--pz-ease); } .pz-section-more:hover { color: var(--pz-ink); border-bottom-color: var(--pz-ink); } /* ========================================================= 3. NÉON : LA MÉCANIQUE D'ACCENT Une seule règle gouverne tout l'effet. Les cartes portent --pz-accent / --pz-accent-ink en style « en ligne » (posé par PHP selon la catégorie), et .pz-glow décide de la lueur. Au repos : trait fin. Au survol : halo + légère élévation. ========================================================= */ .pz-glow { border: 1px solid var(--pz-line); border-radius: var(--pz-radius); background: var(--pz-surface); transition: border-color var(--pz-dur) var(--pz-ease), box-shadow var(--pz-dur) var(--pz-ease), transform var(--pz-dur) var(--pz-ease); will-change: transform; } .pz-glow:hover, .pz-glow:focus-within { border-color: var(--pz-ink); transform: translateY(-4px); } /* Le trait de survol est doublé : la bordure d'un pixel reçoit un second pixel peint EN DEDANS. Épaissir la bordure elle-même décalerait tout le contenu de la carte ; l'ombre intérieure, non. (Les deux blocs de halo ci-dessous reprennent l'inset : sans lui, ils l'écraseraient.) */ /* Le halo n'existe qu'en mode sombre : sur fond clair il se dissout en gris sale. En clair on épaissit le trait à la place. */ :root:not([data-pz-theme="light"]) .pz-glow:hover, :root:not([data-pz-theme="light"]) .pz-glow:focus-within { box-shadow: inset 0 0 0 1px var(--pz-ink), 0 0 15px 2px color-mix(in srgb, var(--pz-accent) 55%, transparent), 0 0 30px 5px color-mix(in srgb, var(--pz-accent) 25%, transparent); } :root[data-pz-theme="light"] .pz-glow:hover, :root[data-pz-theme="light"] .pz-glow:focus-within { box-shadow: inset 0 0 0 2px var(--pz-ink), 0 10px 24px -12px rgba(10, 10, 25, .45); } /* Repli pour les navigateurs sans color-mix : un halo de teinte fixe */ @supports not (color: color-mix(in srgb, red 50%, transparent)) { :root:not([data-pz-theme="light"]) .pz-glow:hover { box-shadow: inset 0 0 0 1px var(--pz-ink), 0 0 15px 2px var(--pz-accent); } } /* --------------------------------------------------------------- Le néon qui respire (classe .pz-anim sur , réglable). Déclarer les deux variables comme de vraies couleurs permet au navigateur de les FAIRE GLISSER d'une teinte à l'autre. Sans cette déclaration, elles resteraient du texte et sauteraient d'un coup. Une animation l'emporte sur le style « en ligne » posé par PHP : la teinte de la catégorie sert au repos, le cycle prend la main au survol, puis la teinte d'origine revient. Rien à changer côté PHP. --------------------------------------------------------------- */ @property --pz-accent { syntax: ""; inherits: true; initial-value: #00f0ff; } @property --pz-accent-ink { syntax: ""; inherits: true; initial-value: #00768a; } @keyframes pz-cycle { 0% { --pz-accent: #00f0ff; --pz-accent-ink: #00768a; } 33% { --pz-accent: #ff00c8; --pz-accent-ink: #a3007f; } 66% { --pz-accent: #00ffa3; --pz-accent-ink: #00795a; } 100% { --pz-accent: #00f0ff; --pz-accent-ink: #00768a; } } .pz-anim .pz-glow:hover, .pz-anim .pz-glow:focus-within, .pz-anim .pz-cat:hover, .pz-anim .pz-nav a:hover, .pz-anim .pz-tool:hover, .pz-anim .pz-btn:hover, .pz-anim .pz-chip:hover, .pz-anim .pz-social a:hover, .pz-anim .pz-linked:hover, .pz-anim .pz-section-more:hover, .pz-anim .pz-product__cart:hover { animation: pz-cycle 2.6s linear infinite; } /* L'arc-en-ciel a déjà son dégradé : on ne lui superpose pas un cycle. */ .pz-anim .pz-rainbow:hover { animation: none; } @media (prefers-reduced-motion: reduce) { .pz-anim .pz-glow:hover, .pz-anim .pz-cat:hover, .pz-anim .pz-nav a:hover, .pz-anim .pz-tool:hover, .pz-anim .pz-btn:hover, .pz-anim .pz-chip:hover, .pz-anim .pz-social a:hover, .pz-anim .pz-linked:hover, .pz-anim .pz-section-more:hover, .pz-anim .pz-product__cart:hover { animation: none; } } /* Arc-en-ciel : réservé à la catégorie « Pride & Identité ». Le dégradé remplace la teinte unique sur le trait et le halo. */ .pz-rainbow { position: relative; border-color: transparent; background: linear-gradient(var(--pz-surface), var(--pz-surface)) padding-box, linear-gradient(100deg, #ff004d, #ff8a00, #ffe600, #00ffa3, #00f0ff, #7c4dff, #ff00c8) border-box; border: 1px solid transparent; } :root:not([data-pz-theme="light"]) .pz-rainbow:hover { box-shadow: 0 0 18px 2px rgba(255, 0, 200, .35), 0 0 34px 8px rgba(0, 240, 255, .22); } /* Pastille de teinte (petit rond de couleur) */ .pz-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pz-accent); display: inline-block; flex: 0 0 auto; } .pz-dot--rainbow { background: conic-gradient(#ff004d, #ff8a00, #ffe600, #00ffa3, #00f0ff, #7c4dff, #ff00c8, #ff004d); } /* Pastille de catégorie (étiquette) */ .pz-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; border: 1px solid var(--pz-ink); color: var(--pz-ink); background: color-mix(in srgb, var(--pz-bg) 82%, transparent); backdrop-filter: blur(6px); transition: background var(--pz-dur) var(--pz-ease), color var(--pz-dur) var(--pz-ease); } .pz-chip:hover { background: var(--pz-ink); color: var(--pz-inverse); } /* Boutons */ .pz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 28px; border-radius: 999px; border: 1px solid var(--pz-ink); background: transparent; color: var(--pz-text); font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; cursor: pointer; transition: background var(--pz-dur) var(--pz-ease), color var(--pz-dur) var(--pz-ease), box-shadow var(--pz-dur) var(--pz-ease), transform var(--pz-dur) var(--pz-ease); } .pz-btn:hover { color: var(--pz-inverse); background: var(--pz-ink); transform: translateY(-2px); } :root:not([data-pz-theme="light"]) .pz-btn:hover { box-shadow: 0 0 18px 1px color-mix(in srgb, var(--pz-accent) 50%, transparent); } .pz-btn--solid { background: var(--pz-text); color: var(--pz-inverse); border-color: var(--pz-text); } .pz-btn--solid:hover { background: var(--pz-ink); border-color: var(--pz-ink); color: var(--pz-inverse); } .pz-btn--small { padding: 9px 18px; font-size: .72rem; } /* ========================================================= 4. EN-TÊTE ET NAVIGATION ========================================================= */ /* Barre d'annonce */ .pz-announce { background: linear-gradient(90deg, #12001e, #001a24 40%, #12001e); color: #fff; text-align: center; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; padding: 9px 16px; position: relative; } :root[data-pz-theme="light"] .pz-announce { background: linear-gradient(90deg, #1a1030, #0a2230 40%, #1a1030); } .pz-announce__bolt { color: var(--pz-amber); margin-inline: 8px; } .pz-header { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--pz-bg) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--pz-line-soft); } @supports not (backdrop-filter: blur(4px)) { .pz-header { background: var(--pz-bg); } } .pz-header__inner { display: flex; align-items: center; gap: 20px; min-height: 0; padding-block: 4px; } /* Le logo commande la hauteur de l'en-tête : pas de marge morte autour, sa hauteur se règle au Personnalisateur (--pz-logo). */ .pz-brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; } .pz-brand a { display: flex; align-items: center; line-height: 0; } /* Hauteur IMPOSÉE, pas plafonnée : un max-height ne saurait que rapetisser un grand logo, jamais agrandir un petit. La largeur suit d'elle-même. */ .pz-brand img { height: var(--pz-logo, 104px); width: auto; max-height: none; max-width: 42vw; object-fit: contain; object-position: left center; } /* Le bouton de fermeture n'existe que pour le tiroir mobile. Il porte aussi .pz-tool (display:inline-flex) : il faut donc être plus précis que .pz-tool pour l'emporter. */ .pz-header .pz-nav__close { display: none; } /* Logo de repli : le prisme, dessiné en SVG (aucun fichier requis) */ .pz-brand__fallback { display: flex; align-items: center; gap: 10px; } /* Sans cette règle le prisme se remplit de noir : invisible sur fond sombre, mais c'est un triangle plein en mode clair. */ .pz-brand__mark svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; } .pz-brand__name { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; background: linear-gradient(92deg, #00f0ff, #7c4dff 38%, #ff00c8 62%, #00ffa3); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Navigation */ .pz-nav { flex: 1 1 auto; } .pz-nav ul { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; } .pz-nav li { position: relative; } .pz-nav a { position: relative; display: inline-block; padding: 8px 0; font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--pz-text); transition: color var(--pz-dur) var(--pz-ease); } /* Le soulignement qui glisse. Sa couleur vient de la catégorie du lien : chaque entrée de menu porte sa propre --pz-accent. */ .pz-nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--pz-ink); transform: scaleX(0); transform-origin: left center; transition: transform var(--pz-dur) var(--pz-ease); } .pz-nav a:hover { color: var(--pz-ink); } .pz-nav a:hover::after, .pz-nav a:focus-visible::after { transform: scaleX(1); } :root:not([data-pz-theme="light"]) .pz-nav a:hover::after { box-shadow: 0 0 10px 1px var(--pz-accent); } /* Rubrique courante : le trait reste posé */ .pz-nav .current-menu-item > a::after, .pz-nav .current-menu-parent > a::after, .pz-nav .current-menu-ancestor > a::after, .pz-nav .current_page_item > a::after { transform: scaleX(1); } .pz-nav .current-menu-item > a { color: var(--pz-ink); } /* Sous-menus */ .pz-nav ul ul { position: absolute; top: 100%; left: -14px; min-width: 210px; flex-direction: column; align-items: stretch; gap: 0; padding: 8px; background: var(--pz-surface); border: 1px solid var(--pz-line); border-radius: var(--pz-radius-s); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--pz-dur) var(--pz-ease), transform var(--pz-dur) var(--pz-ease), visibility var(--pz-dur); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .8); } .pz-nav li:hover > ul, .pz-nav li:focus-within > ul { opacity: 1; visibility: visible; transform: translateY(0); } .pz-nav ul ul a { padding: 9px 12px; display: block; } .pz-nav ul ul a::after { display: none; } .pz-nav ul ul a:hover { background: var(--pz-surface-2); } /* Outils de l'en-tête (recherche, compte, favoris, panier, mode) */ .pz-tools { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; } .pz-tool { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--pz-text); cursor: pointer; position: relative; transition: color var(--pz-dur) var(--pz-ease), border-color var(--pz-dur) var(--pz-ease), box-shadow var(--pz-dur) var(--pz-ease); } .pz-tool:hover { color: var(--pz-ink); border-color: var(--pz-ink); } :root:not([data-pz-theme="light"]) .pz-tool:hover { box-shadow: 0 0 14px -2px var(--pz-accent); } .pz-tool svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; } .pz-tool__count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--pz-magenta); color: #fff; font-size: .64rem; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; } /* Panneau déroulant (recherche, compte) */ .pz-drop { position: absolute; top: calc(100% + 10px); right: 0; width: min(320px, calc(100vw - 32px)); padding: 18px; background: var(--pz-surface); border: 1px solid var(--pz-line); border-radius: var(--pz-radius); box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .9); z-index: 70; } .pz-drop[hidden] { display: none; } .pz-tools { position: relative; } .pz-drop__title { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--pz-muted); margin-bottom: 10px; } .pz-drop__note { font-size: .86rem; color: var(--pz-muted); margin: 0; } .pz-drop input[type="search"], .pz-drop input[type="email"], .pz-drop input[type="text"] { width: 100%; padding: 11px 14px; border-radius: 999px; border: 1px solid var(--pz-line); background: var(--pz-bg-2); color: var(--pz-text); } .pz-drop input:focus { outline: none; border-color: var(--pz-ink); } /* Bouton burger (mobile) */ .pz-burger { display: none; } /* ========================================================= 5. DIAPORAMA ========================================================= */ .pz-slider { position: relative; overflow: hidden; background: #000; } .pz-slide { position: relative; display: none; min-height: clamp(380px, 52vw, 560px); align-items: center; } .pz-slide.is-active { display: flex; animation: pz-fade .6s var(--pz-ease); } @keyframes pz-fade { from { opacity: 0; } to { opacity: 1; } } .pz-slide__bg { position: absolute; inset: 0; background-size: cover; background-position: center center; } .pz-slide__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 5, 12, .88) 0%, rgba(5, 5, 12, .55) 45%, rgba(5, 5, 12, .15) 100%); } /* Sans image : un décor néon généré, pour que l'accueil ne soit jamais vide même sans téléversement. */ .pz-slide--nobg .pz-slide__bg { background: radial-gradient(circle at 72% 45%, rgba(0, 240, 255, .38), transparent 45%), radial-gradient(circle at 84% 62%, rgba(255, 0, 200, .34), transparent 42%), radial-gradient(circle at 60% 30%, rgba(0, 255, 163, .22), transparent 40%), #06060c; } .pz-slide__inner { position: relative; z-index: 2; width: 100%; padding-block: 48px; } .pz-slide__content { max-width: 560px; } .pz-slide__kicker { font-size: .76rem; text-transform: uppercase; letter-spacing: .18em; color: #d7d7e6; margin-bottom: 14px; white-space: pre-line; } .pz-slide__title { font-size: clamp(2.2rem, 6vw, 4.2rem); font-weight: 700; line-height: 1.02; margin: 0 0 18px; color: #fff; } .pz-slide__title em { font-style: normal; background: linear-gradient(92deg, #ff5ce1, #b06cff 40%, #00f0ff); -webkit-background-clip: text; background-clip: text; color: transparent; } .pz-slide__text { color: #cfcfe0; max-width: 420px; margin-bottom: 26px; } .pz-slide .pz-btn { color: #fff; border-color: #fff; } .pz-slide .pz-btn:hover { background: #fff; color: #0a0a0f; } /* Barre néon verticale, décor de la maquette */ .pz-slide__bar { position: absolute; top: 18%; bottom: 18%; width: 3px; border-radius: 3px; z-index: 2; } .pz-slide__bar--l { left: 22px; background: var(--pz-magenta); box-shadow: 0 0 18px 2px var(--pz-magenta); } .pz-slide__bar--r { right: 22px; background: var(--pz-mint); box-shadow: 0 0 18px 2px var(--pz-mint); } /* Contrôles */ .pz-slider__dots { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 9px; z-index: 4; } .pz-slider__dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .7); background: transparent; padding: 0; cursor: pointer; transition: background var(--pz-dur) var(--pz-ease), box-shadow var(--pz-dur) var(--pz-ease); } .pz-slider__dot.is-active { background: #fff; box-shadow: 0 0 10px 2px rgba(255, 255, 255, .8); } .pz-slider__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(0, 0, 0, .3); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color var(--pz-dur) var(--pz-ease), background var(--pz-dur) var(--pz-ease); } .pz-slider__arrow:hover { border-color: #fff; background: rgba(0, 0, 0, .55); } .pz-slider__arrow--prev { left: 14px; } .pz-slider__arrow--next { right: 14px; } /* ========================================================= 6. RANG DE CATÉGORIES ========================================================= */ .pz-cats { background: var(--pz-bg-2); border-block: 1px solid var(--pz-line-soft); } .pz-cats__row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; padding: 26px 0; } .pz-cat { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 8px; border-radius: var(--pz-radius); border: 1px solid transparent; text-align: center; transition: border-color var(--pz-dur) var(--pz-ease), transform var(--pz-dur) var(--pz-ease), box-shadow var(--pz-dur) var(--pz-ease); } .pz-cat:hover { border-color: var(--pz-ink); transform: translateY(-4px); } :root:not([data-pz-theme="light"]) .pz-cat:hover { box-shadow: 0 0 15px 2px color-mix(in srgb, var(--pz-accent) 45%, transparent), 0 0 30px 5px color-mix(in srgb, var(--pz-accent) 20%, transparent); } .pz-cat__icon { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; color: var(--pz-ink); transition: filter var(--pz-dur) var(--pz-ease); } .pz-cat__icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; } :root:not([data-pz-theme="light"]) .pz-cat:hover .pz-cat__icon { filter: drop-shadow(0 0 8px var(--pz-accent)); } .pz-cat__name { font-size: .72rem; text-transform: uppercase; letter-spacing: .11em; font-weight: 600; color: var(--pz-text); } /* ========================================================= 7. CARTES PRODUIT ========================================================= */ .pz-grid { display: grid; gap: var(--pz-gap); } .pz-grid--4 { grid-template-columns: repeat(4, 1fr); } .pz-grid--3 { grid-template-columns: repeat(3, 1fr); } .pz-grid--2 { grid-template-columns: repeat(2, 1fr); } /* Grille réglable : le nombre de colonnes vient du Personnalisateur, posé en --pz-cols sur la grille elle-même. Les écrans étroits reprennent la main plus bas, dans les media queries. */ .pz-grid--auto { grid-template-columns: repeat(var(--pz-cols, 5), 1fr); gap: 16px; } /* Le réglage vaut pour l'ordinateur. En dessous, ce sont ces paliers qui commandent : six colonnes sur un téléphone ne se liraient pas. */ @media (max-width: 1080px) { .pz-grid--auto { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 680px) { .pz-grid--auto { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 360px) { .pz-grid--auto, .pz-grid--4, .pz-grid--3, .pz-grid--2, .pz-spotlight__products { grid-template-columns: 1fr; } } .pz-product { position: relative; overflow: hidden; display: flex; flex-direction: column; } .pz-product__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--pz-surface-2); } .pz-product__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--pz-ease); } .pz-product:hover .pz-product__media img { transform: scale(1.06); } .pz-product__badge { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 5px 12px; border-radius: 999px; background: var(--pz-bg); color: var(--pz-text); border: 1px solid var(--pz-line); font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .pz-product__badge--sale { background: var(--pz-magenta); color: #fff; border-color: transparent; } .pz-product__body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; } .pz-product__cat { font-size: .66rem; text-transform: uppercase; letter-spacing: .14em; color: var(--pz-ink); font-weight: 600; } .pz-product__title { font-size: .98rem; font-weight: 600; margin: 0; line-height: 1.35; } .pz-product__price { font-size: 1rem; font-weight: 600; color: var(--pz-text); } .pz-product__price del { color: var(--pz-muted); font-weight: 400; margin-right: 6px; } .pz-product__price ins { text-decoration: none; color: var(--pz-magenta); } .pz-product__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 6px; } .pz-swatches { display: flex; gap: 6px; align-items: center; } .pz-swatch { width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--pz-line); display: inline-block; } .pz-product__cart { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--pz-line); display: inline-flex; align-items: center; justify-content: center; color: var(--pz-text); background: transparent; cursor: pointer; transition: color var(--pz-dur) var(--pz-ease), border-color var(--pz-dur) var(--pz-ease), box-shadow var(--pz-dur) var(--pz-ease); } .pz-product__cart svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.6; } .pz-product__cart:hover { color: var(--pz-ink); border-color: var(--pz-ink); } :root:not([data-pz-theme="light"]) .pz-product__cart:hover { box-shadow: 0 0 14px -2px var(--pz-accent); } .pz-product__cart.loading { opacity: .55; pointer-events: none; } .pz-product__cart.added::after { content: "✓"; } /* Lien qui couvre toute la carte, sans avaler les boutons */ .pz-cover { position: absolute; inset: 0; z-index: 1; font-size: 0; } .pz-product__foot, .pz-product__cart, .pz-product__badge { position: relative; z-index: 2; } /* ========================================================= 8. CARTES ARTICLE ========================================================= */ .pz-post { position: relative; overflow: hidden; display: flex; flex-direction: column; } /* La vignette d'article est plus basse que celle d'un produit : on vient lire des titres, pas regarder des photos. */ .pz-post__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--pz-surface-2); } .pz-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--pz-ease); } .pz-post:hover .pz-post__media img { transform: scale(1.05); } .pz-post__chip { position: absolute; top: 12px; left: 12px; z-index: 2; } .pz-post__body { padding: 12px 13px 14px; display: flex; flex-direction: column; gap: 5px; flex: 1 1 auto; } /* La rubrique, en néon sous l'image — c'est la place qu'occupe le prix sur une carte produit : les deux rangées se lisent pareil. */ .pz-post__cat { font-size: .66rem; text-transform: uppercase; letter-spacing: .14em; color: var(--pz-ink); font-weight: 600; } :root:not([data-pz-theme="light"]) .pz-post__cat { text-shadow: 0 0 12px color-mix(in srgb, var(--pz-accent) 55%, transparent); } .pz-post__title { font-size: .92rem; font-weight: 600; margin: 0; line-height: 1.28; } .pz-post__date { font-size: .72rem; color: var(--pz-muted); } .pz-post__excerpt { font-size: .82rem; line-height: 1.5; color: var(--pz-muted); margin: 0; } /* Serrées à cinq ou six par ligne, les cartes lâchent le chapeau : il ne resterait que deux mots par ligne. */ .pz-grid--auto .pz-post__excerpt { display: none; } @media (min-width: 1081px) { .pz-grid--auto[style*="--pz-cols:3"] .pz-post__excerpt, .pz-grid--auto[style*="--pz-cols:4"] .pz-post__excerpt { display: block; } } /* Encart « produit lié » au bas d'une carte article */ .pz-linked { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 10px; border: 1px solid var(--pz-line); border-radius: var(--pz-radius-s); background: var(--pz-surface-2); position: relative; z-index: 2; transition: border-color var(--pz-dur) var(--pz-ease); } .pz-linked:hover { border-color: var(--pz-ink); } .pz-linked img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; } .pz-linked__name { font-size: .8rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .pz-linked__price { font-size: .78rem; color: var(--pz-muted); } /* ========================================================= 9. ACCUEIL : SECTIONS ========================================================= */ /* Bandeau « phares + blog » : 2×2 à gauche, bloc éditorial à droite */ .pz-spotlight { display: grid; grid-template-columns: 2fr 1fr; gap: var(--pz-gap); align-items: start; } .pz-spotlight__products { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--pz-gap); } .pz-feature { display: flex; flex-direction: column; overflow: hidden; height: 100%; } .pz-feature__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--pz-surface-2); } .pz-feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--pz-ease); } .pz-feature:hover .pz-feature__media img { transform: scale(1.05); } .pz-feature__body { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; } .pz-feature__title { font-size: 1.24rem; font-weight: 700; margin: 0; line-height: 1.22; } .pz-feature__text { font-size: .9rem; color: var(--pz-muted); margin: 0; } .pz-feature__more { margin-top: auto; } /* ========================================================= 10. BOUTIQUE ========================================================= */ .pz-shop-head { padding: 44px 0 28px; border-bottom: 1px solid var(--pz-line-soft); background: var(--pz-bg-2); } .pz-shop-title { font-size: clamp(1.7rem, 4vw, 2.8rem); text-transform: uppercase; letter-spacing: .02em; margin: 0 0 8px; } .pz-shop-desc { color: var(--pz-muted); max-width: 620px; margin: 0; } .pz-shop-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 0; } .pz-shop-filters { display: flex; gap: 8px; flex-wrap: wrap; } .pz-shop-layout { display: grid; grid-template-columns: 250px 1fr; gap: 34px; align-items: start; padding-bottom: 56px; } .pz-shop-side { position: sticky; top: 96px; } .pz-widget { margin-bottom: 26px; } .pz-widget__title { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--pz-line); } .pz-widget ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .pz-widget li a { font-size: .9rem; color: var(--pz-muted); transition: color var(--pz-dur) var(--pz-ease); } .pz-widget li a:hover { color: var(--pz-ink); } /* Fiche produit */ .pz-single-product { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; padding: 44px 0; align-items: start; } .pz-single-product .price { font-size: 1.5rem; font-weight: 700; } /* Pagination */ .pz-pagination { display: flex; justify-content: center; gap: 8px; padding: 34px 0; flex-wrap: wrap; } .pz-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--pz-line); font-size: .86rem; transition: border-color var(--pz-dur) var(--pz-ease), color var(--pz-dur) var(--pz-ease); } .pz-pagination .page-numbers:hover { border-color: var(--pz-ink); color: var(--pz-ink); } .pz-pagination .page-numbers.current { background: var(--pz-ink); border-color: var(--pz-ink); color: var(--pz-inverse); } /* ========================================================= 11. BLOG ========================================================= */ .pz-blog-hero { /* Le fond suit le mode : en clair, un bandeau noir trancherait. */ background: var(--pz-bg-2); border-bottom: 1px solid var(--pz-line-soft); text-align: center; /* Bas de plafond : le titre annonce, il n'occupe pas l'écran. */ padding: 26px 20px 22px; position: relative; overflow: hidden; } :root:not([data-pz-theme="light"]) .pz-blog-hero { background: #06060c; } .pz-blog-hero::before { content: ""; position: absolute; inset: -40% -10% auto; height: 300px; background: radial-gradient(ellipse at center, rgba(124, 77, 255, .35), transparent 62%); pointer-events: none; } .pz-blog-hero__title { position: relative; font-size: clamp(1.5rem, 3.6vw, 2.3rem); text-transform: uppercase; letter-spacing: .01em; margin: 0 0 10px; background: linear-gradient(92deg, #00f0ff, #6ee7ff 25%, #fff 50%, #ff7ae0 72%, #ff00c8); -webkit-background-clip: text; background-clip: text; color: transparent; } .pz-blog-hero__sub { position: relative; color: var(--pz-muted); margin: 0; } /* En mode clair, un titre en dégradé clair sur fond clair ne se lit plus : on repeint le titre à l'encre. */ :root[data-pz-theme="light"] .pz-blog-hero__title { background: none; color: var(--pz-text); } /* Carte « moitié image / moitié texte » (page blog de la maquette) */ .pz-split { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--pz-gap); } .pz-halfcard { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; position: relative; min-height: 260px; } .pz-halfcard__media { position: relative; overflow: hidden; background: var(--pz-surface-2); } .pz-halfcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--pz-ease); } .pz-halfcard:hover .pz-halfcard__media img { transform: scale(1.05); } .pz-halfcard__body { padding: 18px; display: flex; flex-direction: column; gap: 9px; } .pz-halfcard__title { font-size: 1.05rem; font-weight: 700; margin: 0; line-height: 1.28; text-transform: uppercase; letter-spacing: .01em; } /* Article en avant de la page blog */ .pz-editor { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; margin-bottom: var(--pz-gap); position: relative; } .pz-editor__media { position: relative; min-height: 320px; background: var(--pz-surface-2); } .pz-editor__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .pz-editor__body { padding: 28px; display: flex; flex-direction: column; gap: 12px; justify-content: center; } .pz-editor__title { font-size: clamp(1.3rem, 2.6vw, 1.9rem); margin: 0; text-transform: uppercase; line-height: 1.2; } /* Article seul */ .pz-article { max-width: 780px; margin-inline: auto; padding: 44px 0; } .pz-article__head { text-align: center; margin-bottom: 28px; } .pz-article__title { font-size: clamp(1.7rem, 4.2vw, 2.7rem); margin: 12px 0 10px; } .pz-article__meta { color: var(--pz-muted); font-size: .82rem; } .pz-article__cover { margin: 0 0 30px; border-radius: var(--pz-radius); overflow: hidden; } .pz-article__content { font-size: 1.03rem; line-height: 1.75; } .pz-article__content h2 { margin-top: 1.6em; font-size: 1.4rem; } .pz-article__content h3 { margin-top: 1.4em; font-size: 1.15rem; } .pz-article__content img { border-radius: var(--pz-radius-s); margin-block: 1.2em; } .pz-article__content a { color: var(--pz-ink); text-decoration: underline; text-underline-offset: 3px; } .pz-article__content blockquote { margin: 1.6em 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--pz-ink); color: var(--pz-muted); font-size: 1.1rem; } .pz-article__tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 28px; } /* Encart produit lié, version article */ .pz-linked--wide { margin: 34px 0 0; padding: 16px; gap: 16px; } .pz-linked--wide img { width: 84px; height: 84px; } /* --------------------------------------------------------------- La une du blog : un grand article à gauche, une colonne de trois à droite. Sur téléphone, tout se remet en une seule colonne. --------------------------------------------------------------- */ .pz-mag { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pz-gap); align-items: stretch; } .pz-mag__lead { position: relative; overflow: hidden; display: flex; flex-direction: column; } .pz-mag__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--pz-surface-2); } .pz-mag__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--pz-ease); } .pz-mag__lead:hover .pz-mag__media img { transform: scale(1.04); } .pz-mag__chip { position: absolute; top: 14px; left: 14px; z-index: 2; } .pz-mag__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; } .pz-mag__title { margin: 0; font-size: clamp(1.1rem, 2vw, 1.45rem); line-height: 1.22; font-weight: 700; color: var(--pz-ink); } /* La colonne de droite : trois cartes compactes, réparties sur la hauteur du grand article. */ .pz-mag__side { display: grid; grid-template-rows: repeat(auto-fit, minmax(0, 1fr)); gap: var(--pz-gap); } .pz-mini { position: relative; display: grid; grid-template-columns: 120px 1fr; overflow: hidden; min-height: 0; } .pz-mini__media { position: relative; overflow: hidden; background: var(--pz-surface-2); } .pz-mini__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--pz-ease); } .pz-mini:hover .pz-mini__media img { transform: scale(1.06); } .pz-mini__body { padding: 12px 14px; display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 0; } .pz-mini__title { margin: 0; font-size: .9rem; line-height: 1.25; font-weight: 700; color: var(--pz-ink); } /* --------------------------------------------------------------- Encarts de régie --------------------------------------------------------------- */ .pz-ad { padding: 18px 0; } .pz-ad__label { display: block; font-size: .6rem; text-transform: uppercase; letter-spacing: .18em; color: var(--pz-muted); margin-bottom: 6px; } /* Un encart de régie a ses propres mesures : on borne, on ne casse pas la page si le code livré est plus large que prévu. */ .pz-ad__slot { max-width: 100%; overflow-x: auto; min-height: 0; } .pz-ad__slot img, .pz-ad__slot iframe { max-width: 100%; height: auto; } /* --------------------------------------------------------------- Les titres d'articles portent la couleur du site (vert, bleu, rose, jaune — celles des showrooms), pas les titres de produits : une boutique annonce ses prix, un journal annonce ses sujets. --------------------------------------------------------------- */ .pz-post__title, .pz-halfcard__title, .pz-editor__title, .pz-feature__title { color: var(--pz-ink); } :root:not([data-pz-theme="light"]) .pz-mag__title, :root:not([data-pz-theme="light"]) .pz-mini__title, :root:not([data-pz-theme="light"]) .pz-post__title, :root:not([data-pz-theme="light"]) .pz-halfcard__title { text-shadow: 0 0 18px color-mix(in srgb, var(--pz-accent) 35%, transparent); } @media (max-width: 900px) { .pz-mag { grid-template-columns: 1fr; } .pz-mag__side { grid-template-rows: none; } } @media (max-width: 480px) { .pz-mini { grid-template-columns: 92px 1fr; } .pz-mini__body { padding: 10px 12px; } .pz-mag__media { aspect-ratio: 4 / 3; } } /* Diaporama du blog : un peu plus bas que celui de l'accueil, il annonce des articles et non un drop. */ .pz-slider--blog .pz-slide { min-height: clamp(300px, 40vw, 440px); } /* Rang des rubriques */ .pz-cats--blog { padding-block: 30px; } .pz-cats__title { font-size: .78rem; text-transform: uppercase; letter-spacing: .16em; color: var(--pz-muted); margin: 0 0 16px; } .pz-cat__count { font-size: .7rem; color: var(--pz-muted); } /* Barre du blog : filtres + recherche */ .pz-blog-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 0 0 24px; } .pz-blog-bar__cats { display: flex; gap: 8px; flex-wrap: wrap; } /* La pastille de la rubrique ouverte est peinte, pas seulement soulignée. */ .pz-chip.is-active { background: var(--pz-ink); color: var(--pz-inverse); } .pz-blog-search { display: flex; align-items: center; gap: 6px; } .pz-blog-search input[type="search"] { min-width: 210px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--pz-line); background: var(--pz-surface); color: var(--pz-text); font-size: .86rem; } .pz-blog-search input[type="search"]:focus { outline: none; border-color: var(--pz-ink); } .pz-blog-search button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--pz-line); background: transparent; color: var(--pz-text); cursor: pointer; transition: border-color var(--pz-dur) var(--pz-ease), color var(--pz-dur) var(--pz-ease); } .pz-blog-search button:hover { border-color: var(--pz-ink); color: var(--pz-ink); } .pz-blog-search button svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; } /* La signature d'article est un paragraphe : pas de marge parasite. */ .pz-post__date { margin: 0; } /* Retour à la liste, sous l'article */ .pz-article__back { margin: 30px 0 0; font-size: .82rem; } .pz-article__back a { color: var(--pz-muted); } .pz-article__back a:hover { color: var(--pz-ink); } /* Premier article : l'invitation à écrire, visible des seuls rédacteurs */ .pz-empty__cta { text-align: center; margin: 18px 0 0; } /* Bannière boutique, au bas du journal : une bande à part, pour qu'on voie qu'on quitte les articles pour les produits en vente. */ .pz-shopband { background: var(--pz-bg-2); border-top: 1px solid var(--pz-line-soft); padding: 40px 0 48px; } :root:not([data-pz-theme="light"]) .pz-shopband { background: radial-gradient(circle at 12% 0%, rgba(0, 240, 255, .10), transparent 45%), radial-gradient(circle at 88% 100%, rgba(255, 0, 200, .10), transparent 45%), var(--pz-bg-2); } /* --------------------------------------------------------------- Commentaires --------------------------------------------------------------- */ .pz-comments { max-width: 780px; margin-inline: auto; } .pz-comment-list .comment-body { border: 1px solid var(--pz-line); border-radius: var(--pz-radius); background: var(--pz-surface); padding: 16px 18px; } .pz-comment-list .children { list-style: none; margin: 14px 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 14px; } .pz-comment-list .comment-author { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .92rem; } .pz-comment-list .comment-author img { border-radius: 999px; } .pz-comment-list .comment-metadata { font-size: .74rem; color: var(--pz-muted); margin: 4px 0 10px; } .pz-comment-list .comment-metadata a { color: var(--pz-muted); } .pz-comment-list p { margin: 0 0 10px; } .pz-comment-list .reply { font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; } .pz-comment-list .reply a { color: var(--pz-ink); } .pz-comment-list .comment-awaiting-moderation { font-size: .78rem; color: var(--pz-muted); } .comment-respond { margin-top: 30px; } .comment-reply-title { font-size: 1.1rem; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 14px; } .comment-form { display: flex; flex-direction: column; gap: 12px; } .comment-form label { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; color: var(--pz-muted); margin-bottom: 6px; } .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; padding: 12px 16px; border-radius: var(--pz-radius-s); border: 1px solid var(--pz-line); background: var(--pz-surface); color: var(--pz-text); font-family: inherit; font-size: .92rem; } .comment-form textarea { min-height: 150px; resize: vertical; } .comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--pz-ink); } .comment-form .comment-form-cookies-consent { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--pz-muted); } .comment-form .comment-form-cookies-consent label { margin: 0; text-transform: none; letter-spacing: 0; font-size: .8rem; } .comment-form .comment-notes, .comment-form .form-submit { margin: 0; } .comment-form .comment-notes { font-size: .8rem; color: var(--pz-muted); } /* ========================================================= 11 bis. SHOWROOM — la salle du visiteur Toute la page lit --pz-accent : la teinte est posée une seule fois par PHP, selon la salle atteinte. Rien de vert, de bleu ni de rose n'est écrit ici — sauf le scintillement de la salle étoile (.pz-star), qui est un effet et non une couleur. ========================================================= */ .pz-room { position: relative; overflow: hidden; background: var(--pz-bg-2); /* Le liseré du showroom : c'est lui qu'on voit en premier, avant même de lire le titre. */ border-top: 3px solid var(--pz-ink); border-bottom: 1px solid var(--pz-line-soft); padding: 52px 0 44px; } /* ---- Mode sombre : la lumière monte du bas-gauche, derrière le titre ---- Le halo était en haut à DROITE, c'est-à-dire loin du titre : le nom du showroom se lisait sur du noir. Inversé et renforcé, il éclaire ce qu'on est venu voir. */ :root:not([data-pz-theme="light"]) .pz-room::before { content: ""; position: absolute; inset: -10% 25% -45% -25%; background: radial-gradient(ellipse at 28% 62%, color-mix(in srgb, var(--pz-accent) 58%, transparent), transparent 66%); pointer-events: none; filter: blur(2px); } /* Un second voile, plus large et plus doux, pour que la teinte gagne toute la bande au lieu de s'arrêter net. */ :root:not([data-pz-theme="light"]) .pz-room::after { content: ""; position: absolute; inset: 0; background: linear-gradient(75deg, color-mix(in srgb, var(--pz-accent) 26%, transparent) 0%, transparent 58%); pointer-events: none; } /* ---- Mode clair : la même bande, en pastel franc ---- Sur blanc, un halo néon vire au gris sale : on utilise la teinte VIVE en aplat dégradé (elle donne un pastel net — menthe, rose, or) et le texte reste écrit à l'encre foncée, donc parfaitement lisible. Le showroom se reconnaît aussi bien qu'en sombre, sans éblouir. */ :root[data-pz-theme="light"] .pz-room { background: linear-gradient(75deg, color-mix(in srgb, var(--pz-accent) 42%, #fff) 0%, color-mix(in srgb, var(--pz-accent) 16%, #fff) 38%, var(--pz-bg-2) 78%); border-bottom-color: var(--pz-line); } /* Un souffle de couleur plus dense derrière le titre, comme le halo du mode sombre — mais en clair il éclaircit au lieu d'allumer. */ :root[data-pz-theme="light"] .pz-room::before { content: ""; position: absolute; inset: -20% 30% -40% -20%; background: radial-gradient(ellipse at 30% 60%, color-mix(in srgb, var(--pz-accent) 55%, transparent), transparent 68%); pointer-events: none; opacity: .55; } /* La barre de statut prolonge la teinte du showroom sous l'en-tête. */ :root:not([data-pz-theme="light"]) .pz-room__bar { background: linear-gradient(90deg, color-mix(in srgb, var(--pz-accent) 16%, var(--pz-surface)) 0%, var(--pz-surface) 55%); } :root[data-pz-theme="light"] .pz-room__bar { background: linear-gradient(90deg, color-mix(in srgb, var(--pz-accent-ink) 10%, var(--pz-surface)) 0%, var(--pz-surface) 55%); } .pz-room__inner { position: relative; display: grid; grid-template-columns: 1.35fr .95fr; gap: 34px; align-items: start; } .pz-room__kicker { font-size: .74rem; text-transform: uppercase; letter-spacing: .2em; color: var(--pz-muted); margin: 0 0 6px; } .pz-room__title { font-size: clamp(2.1rem, 6vw, 3.6rem); line-height: 1.02; text-transform: uppercase; margin: 0 0 14px; color: var(--pz-ink); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } :root:not([data-pz-theme="light"]) .pz-room__title { text-shadow: 0 0 26px color-mix(in srgb, var(--pz-accent) 55%, transparent); } .pz-room__text { color: var(--pz-muted); max-width: 46ch; margin: 0 0 22px; } .pz-room__perks { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .pz-room__perks li { display: flex; align-items: flex-start; gap: 10px; } .pz-room__perks strong { display: block; font-size: .84rem; } .pz-room__perks em { font-style: normal; font-size: .76rem; color: var(--pz-muted); } .pz-room__perkicon { width: 26px; height: 26px; flex: 0 0 auto; color: var(--pz-ink); } .pz-room__perkicon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.5; } .pz-room__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* Le palier suivant se montre, il ne se clique pas : on ne visite pas une salle qui n'est pas encore ouverte. */ .pz-room__nextbtn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; border: 1px dashed var(--pz-ink); color: var(--pz-ink); font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; } .pz-room__lock { width: 15px; height: 15px; display: inline-block; } .pz-room__lock svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.6; } /* L'encart de progression */ .pz-room__journey { position: relative; padding: 20px; border: 1px solid var(--pz-line); border-radius: var(--pz-radius); background: color-mix(in srgb, var(--pz-surface) 80%, transparent); backdrop-filter: blur(8px); } .pz-room__label { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .16em; color: var(--pz-muted); margin-bottom: 12px; } .pz-room__level { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; flex-wrap: wrap; } .pz-room__levelnum { font-size: .78rem; color: var(--pz-muted); } .pz-room__points { font-size: .82rem; margin: 0 0 4px; } .pz-room__togo { font-size: .78rem; color: var(--pz-muted); margin: 0 0 10px; } /* Le niveau réel d'un abonné : présent, mais nettement en retrait. */ .pz-room__aside { font-size: .72rem; color: var(--pz-muted); opacity: .8; margin: 2px 0 10px; } .pz-room__togo strong { color: var(--pz-ink); } /* La barre de statut */ .pz-room__bar { background: var(--pz-surface); border-bottom: 1px solid var(--pz-line-soft); } .pz-room__barinner { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 16px 0; } .pz-room__barname { font-size: .86rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--pz-ink); padding-right: 22px; border-right: 1px solid var(--pz-line); } .pz-room__cell { display: flex; flex-direction: column; gap: 2px; } .pz-room__cell em { font-style: normal; font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--pz-muted); } .pz-room__cell strong { font-size: .92rem; } .pz-room__on, .pz-room__nextname { color: var(--pz-ink); } /* --------------------------------------------------------------- Le prix dans une salle : public barré, remise, prix de la salle. Les teintes viennent de la salle, posées en ligne par PHP — la carte, elle, garde la couleur de sa catégorie. --------------------------------------------------------------- */ .pz-room-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .pz-room-price del { color: var(--pz-muted); font-weight: 400; font-size: .88rem; text-decoration-thickness: 1px; } .pz-room-price ins { text-decoration: none; color: var(--pz-ink); font-weight: 700; font-size: 1.02rem; } :root:not([data-pz-theme="light"]) .pz-room-price ins { text-shadow: 0 0 14px color-mix(in srgb, var(--pz-accent) 60%, transparent); } .pz-room-price__off { padding: 2px 8px; border-radius: 999px; background: var(--pz-ink); color: var(--pz-inverse); font-size: .64rem; font-weight: 700; letter-spacing: .06em; line-height: 1.5; } /* --------------------------------------------------------------- La jauge de temps : combien de temps cette pièce reste en salle. Un anneau qui se vide, à la couleur de la salle (posée en ligne par PHP), et le décompte en clair à côté. --------------------------------------------------------------- */ .pz-timer { display: flex; align-items: center; gap: 10px; margin-top: 8px; } .pz-timer[hidden] { display: none; } .pz-timer__ring { position: relative; width: 46px; height: 46px; flex: 0 0 auto; } .pz-timer__ring svg { width: 100%; height: 100%; /* Le tracé part du haut et tourne dans le sens des aiguilles. */ transform: rotate(-90deg); } .pz-timer__track, .pz-timer__arc { fill: none; stroke-width: 3; } .pz-timer__track { stroke: var(--pz-line); } .pz-timer__arc { stroke: var(--pz-ink); stroke-linecap: round; transition: stroke-dashoffset 1s linear; } :root:not([data-pz-theme="light"]) .pz-timer__arc { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--pz-accent) 75%, transparent)); } /* Le chiffre au centre de l'anneau : une seule unité, la plus parlante. */ .pz-timer__big { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .68rem; font-weight: 700; letter-spacing: -.01em; color: var(--pz-ink); } .pz-timer__label { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .pz-timer__label em { font-style: normal; font-size: .62rem; text-transform: uppercase; letter-spacing: .14em; color: var(--pz-muted); } .pz-timer__label strong { font-size: .78rem; font-weight: 700; color: var(--pz-ink); font-variant-numeric: tabular-nums; } /* Sous la dernière heure, le temps qui reste bat doucement. */ .pz-timer.is-urgent .pz-timer__label strong, .pz-timer.is-urgent .pz-timer__big { animation: pz-pulse 1.6s ease-in-out infinite; } @keyframes pz-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } @media (prefers-reduced-motion: reduce) { .pz-timer.is-urgent .pz-timer__label strong, .pz-timer.is-urgent .pz-timer__big { animation: none; } .pz-timer__arc { transition: none; } } /* Les cartes de palier */ .pz-level { padding: 18px; display: flex; flex-direction: column; gap: 8px; } .pz-level__name { margin: 0; font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; color: var(--pz-ink); display: flex; align-items: center; gap: 8px; } .pz-level__points { margin: 0; font-size: .76rem; color: var(--pz-muted); } .pz-level__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .8rem; color: var(--pz-muted); } .pz-level__list strong { color: var(--pz-text); font-weight: 600; } .pz-level__here { margin: auto 0 0; font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; color: var(--pz-ink); } .pz-level.is-current { border-color: var(--pz-ink); } /* La barre d'aperçu de l'administration : présente mais discrète, et jamais confondue avec le site public (rayures d'atelier). */ .pz-preview { background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 10px, transparent 10px 20px), var(--pz-surface); border-bottom: 1px dashed var(--pz-line); } .pz-preview__inner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 10px 0; } .pz-preview__label { font-size: .66rem; text-transform: uppercase; letter-spacing: .14em; color: var(--pz-muted); } .pz-preview__rooms { display: flex; gap: 8px; flex-wrap: wrap; } .pz-preview .pz-chip { font-size: .62rem; padding: 3px 10px; } /* Porte fermée : visiteur sans salle */ .pz-room--closed { text-align: center; } .pz-room__closedinner { display: flex; flex-direction: column; align-items: center; gap: 14px; } .pz-room__closedinner .pz-room__title { justify-content: center; } .pz-room__lockbig { width: 46px; height: 46px; color: var(--pz-ink); } .pz-room__lockbig svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.4; } /* --------------------------------------------------------------- La salle étoile : le scintillement. Une seule classe, .pz-star, posée par PHP sur ce qui doit briller. --------------------------------------------------------------- */ @keyframes pz-twinkle { 0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 6px var(--pz-accent)); } 50% { opacity: .55; transform: scale(1.18) rotate(12deg); filter: drop-shadow(0 0 16px var(--pz-accent)); } } @keyframes pz-shine { 0% { background-position: -140% 0; } 100% { background-position: 240% 0; } } .pz-room__star { width: .8em; height: .8em; display: inline-block; color: var(--pz-ink); animation: pz-twinkle 2.4s ease-in-out infinite; } .pz-room__star svg { width: 100%; height: 100%; stroke: currentColor; fill: currentColor; stroke-width: 1.2; } /* Le titre d'une salle étoile reçoit un reflet qui passe. */ :root:not([data-pz-theme="light"]) .pz-room--hero.pz-star .pz-room__title, :root:not([data-pz-theme="light"]) .pz-section-title.pz-star { background-image: linear-gradient(100deg, var(--pz-accent) 20%, #fff 45%, var(--pz-accent) 70%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; animation: pz-shine 4.5s linear infinite; } /* La jauge scintille elle aussi, et une étoile marche en tête. */ .pz-gauge--star .pz-gauge__fill { filter: drop-shadow(0 0 10px var(--pz-accent)); } /* Barre pleine d'un abonné : les repères de palier n'ont plus rien à marquer, ils ne feraient que trouer l'or. */ .pz-gauge--star .pz-gauge__tick { display: none; } /* L'étoile déborde de la barre : on lève le rognage, et ce sont le rail et le remplissage qui gardent eux-mêmes leurs bouts arrondis. */ /* ⚠ Double classe : .pz-gauge pose overflow:hidden plus bas dans la feuille, à spécificité égale il l'emporterait et couperait l'étoile en deux. */ .pz-gauge.pz-gauge--star { overflow: visible; } .pz-gauge--star .pz-gauge__track, .pz-gauge--star .pz-gauge__fill { border-radius: 999px; } .pz-gauge__star { position: absolute; top: 50%; width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; /* Pas de translate ici : l'animation redéfinit transform et le perdrait, l'étoile glisserait sous la barre. */ color: var(--pz-accent); animation: pz-twinkle 1.8s ease-in-out infinite; pointer-events: none; } /* Le liseré sombre la détache du remplissage, quelle que soit la teinte de la zone sur laquelle elle se trouve. */ .pz-gauge__star svg { width: 100%; height: 100%; stroke: var(--pz-bg); fill: currentColor; stroke-width: 1.6; paint-order: stroke; } /* La pastille et la carte de la salle étoile brillent en continu. */ :root:not([data-pz-theme="light"]) .pz-chip.pz-star, :root:not([data-pz-theme="light"]) .pz-level.pz-star { box-shadow: 0 0 14px -2px color-mix(in srgb, var(--pz-accent) 60%, transparent); } /* Personne n'est forcé de voir scintiller quoi que ce soit. */ @media (prefers-reduced-motion: reduce) { .pz-room__star, .pz-gauge__star, :root:not([data-pz-theme="light"]) .pz-room--hero.pz-star .pz-room__title, :root:not([data-pz-theme="light"]) .pz-section-title.pz-star { animation: none; } } @media (max-width: 900px) { .pz-room__inner { grid-template-columns: 1fr; } .pz-room__perks { grid-template-columns: 1fr; } .pz-room__barname { border-right: 0; padding-right: 0; } } /* ========================================================= 12. INFOLETTRE ========================================================= */ .pz-news { background: var(--pz-bg-2); border-block: 1px solid var(--pz-line-soft); } .pz-news__inner { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; padding: 34px 0; } .pz-news__title { font-size: 1.1rem; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 6px; } .pz-news__text { color: var(--pz-muted); font-size: .88rem; margin: 0; } .pz-news__form { display: flex; gap: 10px; flex-wrap: wrap; } .pz-news__form input[type="email"] { min-width: 240px; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--pz-line); background: var(--pz-surface); color: var(--pz-text); } .pz-news__form input[type="email"]:focus { outline: none; border-color: var(--pz-ink); } /* ========================================================= 12 bis. BANDE « LOVE » Une seule ligne sur ordinateur : cœur · mots · lien · réseaux. ========================================================= */ .pz-love { --pz-accent: #ff00c8; --pz-accent-ink: #a3007f; background: radial-gradient(circle at 8% 50%, rgba(255, 0, 200, .22), transparent 42%), linear-gradient(90deg, #1a0726, #24082e 45%, #12061f); border-top: 1px solid var(--pz-line-soft); } :root[data-pz-theme="light"] .pz-love { background: radial-gradient(circle at 8% 50%, rgba(255, 0, 200, .16), transparent 42%), linear-gradient(90deg, #f7e9fb, #f3e6fa 45%, #fbf1fd); border-block: 1px solid var(--pz-line-soft); } .pz-love__inner { display: flex; align-items: center; gap: 22px; padding: 16px 20px; flex-wrap: wrap; } .pz-love__heart { width: 46px; height: 46px; flex: 0 0 auto; color: var(--pz-ink); } .pz-love__heart svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.4; } :root:not([data-pz-theme="light"]) .pz-love__heart { filter: drop-shadow(0 0 10px rgba(255, 0, 200, .65)); } .pz-love__words { flex: 1 1 240px; min-width: 0; } .pz-love__title { margin: 0; font-size: 1.02rem; font-weight: 700; color: #fff; } :root[data-pz-theme="light"] .pz-love__title { color: var(--pz-text); } .pz-love__text { margin: 2px 0 0; font-size: .84rem; color: var(--pz-muted); } .pz-love__link { flex: 0 0 auto; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--pz-ink); border-bottom: 1px solid transparent; transition: border-color var(--pz-dur) var(--pz-ease); } .pz-love__link:hover { border-bottom-color: var(--pz-ink); } .pz-love__follow { display: flex; align-items: center; gap: 14px; margin-left: auto; flex: 0 0 auto; } .pz-love__followlabel { font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; color: var(--pz-muted); } @media (max-width: 680px) { .pz-love__inner { gap: 14px; } .pz-love__follow { margin-left: 0; width: 100%; justify-content: space-between; } .pz-love__heart { width: 36px; height: 36px; } } /* ========================================================= 13. PIED DE PAGE ========================================================= */ .pz-footer { background: var(--pz-bg-2); border-top: 1px solid var(--pz-line-soft); } .pz-footer__cols { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 22px 26px; padding: 28px 0 20px; align-items: start; } /* Le logo du pied de page ne suit pas la hauteur de celui de l'en-tête : à 104 px il creusait une colonne vide sous les menus. */ .pz-footer .pz-brand img { height: min(64px, var(--pz-logo, 104px)); } .pz-footer .pz-brand { margin-bottom: 10px; } .pz-footer__about { color: var(--pz-muted); font-size: .86rem; max-width: 260px; margin: 0; } .pz-footer__title { font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; margin: 0 0 10px; color: var(--pz-text); } .pz-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .pz-footer li a { font-size: .86rem; color: var(--pz-muted); transition: color var(--pz-dur) var(--pz-ease); } .pz-footer li a:hover { color: var(--pz-ink); } .pz-social { display: flex; gap: 10px; } .pz-social a { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--pz-line); display: inline-flex; align-items: center; justify-content: center; color: var(--pz-muted); transition: color var(--pz-dur) var(--pz-ease), border-color var(--pz-dur) var(--pz-ease), box-shadow var(--pz-dur) var(--pz-ease); } .pz-social a:hover { color: var(--pz-ink); border-color: var(--pz-ink); } :root:not([data-pz-theme="light"]) .pz-social a:hover { box-shadow: 0 0 14px -3px var(--pz-accent); } .pz-social svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; } .pz-footer__bottom { border-top: 1px solid var(--pz-line-soft); padding: 13px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .78rem; color: var(--pz-muted); } /* La règle « .pz-footer ul » met les colonnes en pile : les mentions légales, elles, restent sur une ligne. */ .pz-footer .pz-legal { display: flex; flex-direction: row; gap: 18px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .pz-pay { display: flex; gap: 10px; align-items: center; opacity: .8; font-size: .72rem; letter-spacing: .08em; } .pz-pay span { padding: 3px 8px; border: 1px solid var(--pz-line); border-radius: 5px; } /* ========================================================= 14. UTILITAIRES / ACCESSIBILITÉ ========================================================= */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; } .pz-skip { position: absolute; left: -9999px; top: 8px; z-index: 200; padding: 10px 18px; background: var(--pz-ink); color: var(--pz-inverse); border-radius: 8px; } .pz-skip:focus { left: 12px; } .pz-empty { padding: 44px 20px; text-align: center; color: var(--pz-muted); border: 1px dashed var(--pz-line); border-radius: var(--pz-radius); } .pz-empty strong { color: var(--pz-text); display: block; margin-bottom: 6px; } /* Respect du réglage système : on coupe tout mouvement superflu */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .pz-glow:hover { transform: none; } } /* ========================================================= RESPONSIVE — mobile-first inversé (le socle est « bureau ») ========================================================= */ @media (max-width: 1080px) { .pz-footer__cols { grid-template-columns: 1fr 1fr 1fr; } .pz-shop-layout { grid-template-columns: 1fr; } .pz-shop-side { position: static; } } @media (max-width: 900px) { .pz-grid--4 { grid-template-columns: repeat(3, 1fr); } .pz-spotlight { grid-template-columns: 1fr; } .pz-cats__row { grid-template-columns: repeat(3, 1fr); } .pz-split { grid-template-columns: 1fr; } .pz-editor { grid-template-columns: 1fr; } .pz-editor__media { min-height: 220px; } .pz-single-product { grid-template-columns: 1fr; gap: 26px; } /* Menu en tiroir */ .pz-burger { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--pz-text); cursor: pointer; order: -1; } .pz-burger svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; } .pz-nav { position: fixed; inset: 0 0 0 auto; width: min(320px, 86vw); background: var(--pz-surface); border-left: 1px solid var(--pz-line); padding: 84px 24px 24px; transform: translateX(100%); transition: transform var(--pz-dur) var(--pz-ease); z-index: 90; overflow-y: auto; } .pz-nav.is-open { transform: translateX(0); } .pz-header .pz-nav__close { display: inline-flex; } .pz-nav ul { flex-direction: column; align-items: stretch; gap: 4px; } .pz-nav a { padding: 12px 0; display: block; } .pz-nav ul ul { position: static; opacity: 1; visibility: visible; transform: none; border: none; box-shadow: none; padding: 0 0 0 14px; background: transparent; } .pz-nav__close { position: absolute; top: 22px; right: 22px; } } @media (max-width: 680px) { .pz-grid--4, .pz-grid--3 { grid-template-columns: repeat(2, 1fr); } .pz-spotlight__products { grid-template-columns: repeat(2, 1fr); } .pz-cats__row { grid-template-columns: repeat(2, 1fr); } .pz-halfcard { grid-template-columns: 1fr; } .pz-halfcard__media { aspect-ratio: 16 / 9; } .pz-footer__cols { grid-template-columns: 1fr 1fr; } .pz-section { padding: 40px 0; } .pz-news__inner { flex-direction: column; align-items: stretch; } .pz-news__form input[type="email"] { flex: 1 1 auto; min-width: 0; } .pz-slide__bar { display: none; } /* Barre du blog : les filtres défilent, la recherche prend la ligne. */ .pz-blog-bar { flex-direction: column; align-items: stretch; } .pz-blog-bar__cats { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; } .pz-blog-bar__cats .pz-chip { flex: 0 0 auto; } .pz-blog-search input[type="search"] { flex: 1 1 auto; min-width: 0; } .pz-comment-list .children { margin-left: 12px; } } @media (max-width: 460px) { /* Deux colonnes tant que c'est lisible : une seule carte par écran allonge la page sans rien donner de plus à voir. */ .pz-grid--4, .pz-grid--3, .pz-grid--2, .pz-spotlight__products { grid-template-columns: repeat(2, 1fr); } .pz-footer__cols { grid-template-columns: 1fr; } .pz-tool { width: 38px; height: 38px; } } /* ========================================================= 16. PRISM POINTS : JAUGE, BOÎTE DE CONNEXION, BARRE DE PARCOURS Trois phases : bleu → vert → rose. Le fond montre les phases éteintes, la partie remplie les rallume. Les repères marquent les seuils : la barre dit la distance réelle, elle ne décore pas. ========================================================= */ .pz-gauge { position: relative; height: 12px; border-radius: 999px; overflow: hidden; background: var(--pz-surface-2); border: 1px solid var(--pz-line); margin: 10px 0 8px; } .pz-gauge--compact { height: 9px; margin: 8px 0 6px; } .pz-gauge__track, .pz-gauge__fill { position: absolute; inset: 0 auto 0 0; height: 100%; background-size: 100% 100%; background-repeat: no-repeat; } /* Les phases non atteintes restent lisibles mais éteintes. */ .pz-gauge__track { width: 100%; opacity: .16; } /* ⚠ Le remplissage fait TOUTE la largeur et se fait découper à droite. Lui donner une largeur réduite comprimerait le dégradé : à 30 %, les trois phases tiendraient dans le tiers de gauche et la barre mentirait sur la position des seuils. */ .pz-gauge__fill { width: 100%; clip-path: inset(0 100% 0 0); transition: clip-path .6s var(--pz-ease); } /* La lueur suit la teinte du palier atteint. */ :root:not([data-pz-theme="light"]) .pz-gauge__fill { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--pz-accent) 65%, transparent)); } .pz-gauge__tick { position: absolute; top: -1px; bottom: -1px; width: 2px; background: var(--pz-bg); opacity: .7; transform: translateX(-1px); } /* ---- Boîte de connexion (panneau de l'en-tête) ---- */ .pz-tool--avatar { padding: 0; overflow: visible; } .pz-tool__avatar { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--pz-line); object-fit: cover; } .pz-tool--avatar:hover .pz-tool__avatar { border-color: var(--pz-ink); } .pz-drop--account { width: min(340px, calc(100vw - 32px)); } .pz-account__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .pz-account__avatar { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--pz-ink); object-fit: cover; flex: 0 0 auto; } .pz-account__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pz-account__name { font-weight: 700; font-size: 1rem; } .pz-account__role { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--pz-ink); } .pz-account__room { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .pz-account__level { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--pz-muted); } .pz-account__points { font-size: .82rem; font-weight: 600; margin: 0; } .pz-account__demo { font-size: .72rem; color: var(--pz-muted); margin: 6px 0 0; font-style: italic; } .pz-account__links { display: flex; gap: 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--pz-line-soft); font-size: .82rem; } .pz-account__links a { color: var(--pz-muted); } .pz-account__links a:hover { color: var(--pz-ink); } /* ---- Barre de parcours, sous le diaporama ---- */ .pz-journey { background: var(--pz-bg-2); border-bottom: 1px solid var(--pz-line-soft); } .pz-journey__inner { display: grid; grid-template-columns: 1.5fr 1.2fr .9fr; gap: 0; align-items: stretch; } .pz-journey__now, .pz-journey__benefits, .pz-journey__next { padding: 20px 24px; } .pz-journey__benefits, .pz-journey__next { border-left: 1px solid var(--pz-line-soft); } /* Le palier suivant se distingue par sa teinte, pas par un fond criard. */ .pz-journey__next { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--pz-accent) 10%, transparent)); } .pz-journey__label { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .16em; color: var(--pz-muted); margin-bottom: 8px; } .pz-journey__room { font-size: 1.24rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin: 0; color: var(--pz-ink); } :root:not([data-pz-theme="light"]) .pz-journey__room { text-shadow: 0 0 14px color-mix(in srgb, var(--pz-accent) 55%, transparent); } .pz-journey__room--next { display: flex; align-items: center; gap: 8px; font-size: 1.06rem; } .pz-journey__lock { display: inline-flex; width: 16px; height: 16px; color: var(--pz-muted); } .pz-journey__lock svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.6; } .pz-journey__here { font-size: .82rem; color: var(--pz-muted); margin: 4px 0 0; } .pz-journey__scale { display: flex; justify-content: space-between; gap: 14px; font-size: .72rem; color: var(--pz-muted); flex-wrap: wrap; } .pz-journey__scale strong { color: var(--pz-text); font-weight: 600; } .pz-journey__benefits ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; } .pz-journey__benefits li { display: flex; align-items: flex-start; gap: 8px; } .pz-journey__benefits strong { display: block; font-size: .84rem; font-weight: 600; } .pz-journey__benefits em { display: block; font-style: normal; font-size: .72rem; color: var(--pz-muted); } .pz-journey__icon { display: inline-flex; width: 20px; height: 20px; color: var(--pz-ink); flex: 0 0 auto; margin-top: 2px; } .pz-journey__icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.6; } .pz-journey__room--start { font-size: 1.06rem; line-height: 1.25; } .pz-journey__unlock { margin: 8px 0 10px; font-size: .78rem; color: var(--pz-muted); } .pz-journey__more { display: inline-block; margin-top: 8px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--pz-ink); border-bottom: 1px solid transparent; transition: border-color var(--pz-dur) var(--pz-ease); } .pz-journey__more:hover { border-bottom-color: var(--pz-ink); } .pz-journey__teaser { margin: 8px 0 12px; } .pz-journey__teaser strong { display: block; font-size: .9rem; color: var(--pz-ink); } .pz-journey__teaser em { display: block; font-style: normal; font-size: .74rem; color: var(--pz-muted); } @media (max-width: 1080px) { .pz-journey__inner { grid-template-columns: 1fr 1fr; } .pz-journey__next { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--pz-line-soft); } } @media (max-width: 680px) { .pz-journey__inner { grid-template-columns: 1fr; } .pz-journey__benefits { border-left: none; border-top: 1px solid var(--pz-line-soft); } .pz-journey__benefits ul { flex-direction: column; gap: 12px; } } /* ========================================================= 15. WOOCOMMERCE WooCommerce sort ses listes en