/*
Theme Name: ZeStyle
Author: Spline Online
Description: Thème WordPress + WooCommerce pour la boutique ZeStyle — lifestyle, mode, tech, déco et voyage, univers néon lumineux. Mode clair par défaut 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.61.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: zestyle
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
	   (pour le TEXTE sur fond clair) · --pz-accent-glow = version éclat
	   (pour ce qui n'est pas du texte : icônes, pastilles, points). */
	--pz-accent:      #00f0ff;
	--pz-accent-ink:  #00828a;
	--pz-accent-glow: #00a2ac;

	/* LE PLAFOND DE HAUTEUR DES VIGNETTES (18/09/2026).

	   ⚠ CE QUI CLOCHAIT : une proportion fixe (16/10, 4/3, 1/1) donne une
	   hauteur PROPORTIONNELLE à la largeur de la carte. Or une carte passe
	   pleine largeur dès que sa grille se replie — à 701 px le visuel d'une
	   carte du fil faisait 300 px de large, à 699 px il en faisait 630, donc
	   deux fois plus HAUT. D'où l'impression, juste, que les images
	   GROSSISSENT quand on rétrécit la fenêtre, et qu'elles sont énormes sur
	   téléphone. Aucune proportion ne corrige ça : il faut un plafond.

	   Il est fluide (clamp) et non par paliers : par paliers, la hauteur
	   sauterait au passage de chaque largeur d'écran, ce qu'on veut
	   justement éviter. Il ne mord jamais sur grand écran — il n'entre en
	   jeu que là où la carte s'élargit d'un coup.

	   Deux valeurs : les visuels larges (articles, fil) et les visuels
	   carrés (produits), qu'un plafond trop bas transformerait en meurtrière.

	   ⚠ BAISSÉS LE 18/09/2026, deuxième passe. Les premières valeurs
	   (190/30vw/360 et 230/46vw/380) empêchaient bien l'emballement, mais
	   une vignette de 360 px de haut reste une vignette qui écrase son
	   titre : sur une carte, c'est le TITRE qu'on vient lire, l'image ne
	   fait que l'annoncer. Un tiers de moins, partout. */
	--pz-media-cap:        clamp(170px, 22vw, 260px);
	--pz-media-cap-square: clamp(190px, 27vw, 290px);

	/* 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);
	--pz-flash: var(--pz-accent);
}

/* Sur fond clair, c'est l'encre qui est peinte.

   ⚠ DEUX TEINTES, PAS UNE — corrigé le 18/09/2026. Tout le mode clair
   passait par --pz-ink, calculée pour qu'un TEXTE reste lisible : les
   icônes et les pastilles héritaient donc d'une couleur nettement plus
   sombre que le mode sombre, et le site paraissait éteint en clair.
   Une icône n'est pas du texte : elle demande 3 de contraste, pas 4,5.
   --pz-flash sert donc à tout ce qui est DESSIN (icônes, filets, points,
   bordures, halos) et --pz-ink reste réservée aux MOTS. Ne pas peindre
   un libellé avec --pz-flash : on repasserait sous le seuil lisible. */
: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);
	--pz-flash: var(--pz-accent-glow, 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; }

/* LES CONTENUS EMBARQUÉS (vidéos, cartes, formulaires) — 19/09/2026.

   Un <iframe> collé en HTML brut arrive avec sa taille écrite dedans
   (width="560"). Sur un téléphone de 390 px, il déborde de 170 px : le
   site paraît « s'élargir », et le bord droit de la page se fait couper.
   « body { overflow-x: hidden } » masquait le symptôme sans corriger la
   cause — la vidéo, elle, restait tronquée.

   ⚠ La proportion 16/9 n'est imposée qu'aux hébergeurs de VIDÉO, reconnus
   à leur adresse. Une carte ou un formulaire embarqué garde la hauteur
   qu'on lui a donnée : leur imposer un format de film les écraserait.

   ⚠ Ceci est un FILET DE SÉCURITÉ, pas la bonne façon de faire. La bonne :
   coller l'adresse de la vidéo toute seule sur sa ligne — WordPress
   fabrique alors l'insertion lui-même, et le thème la rend fluide
   (add_theme_support « responsive-embeds », functions.php). */
/* ⚠ UN MOT QUI NE SE COUPE PAS ÉLARGIT TOUTE LA PAGE (19/09/2026).

   Une adresse collée en toutes lettres — « https://www.youtube.com/watch?
   v=Q3zwkxqh1t0&si=J2x64… » — est UN SEUL MOT de soixante caractères, sans
   espace où couper. Le navigateur ne la coupe pas : il élargit son bloc,
   puis la grille, puis la page. C'est la largeur MINIMALE du contenu qui
   grandit, et rien en aval ne peut la rattraper.

   « anywhere » et non « break-word » : les deux coupent le mot, mais seul
   « anywhere » réduit aussi cette largeur minimale — « break-word » laisse
   la grille se faire élargir quand même. C'est toute la différence entre
   soigner le symptôme et le supprimer.

   La coupure n'intervient QUE s'il n'existe aucune autre solution : une
   phrase normale se coupe toujours à ses espaces, comme avant. */
.pz-article__content,
.pz-article__title,
.pz-hall__title,
.pz-hall__text,
.pz-post__title,
.pz-post__excerpt,
.pz-big__title,
.pz-mini__title,
.pz-feature__title,
.pz-product__title,
.pz-comment-list .comment-content,
.woocommerce-Tabs-panel,
.single-product div.product .product_title {
	overflow-wrap: anywhere;
}

iframe, embed, object { max-width: 100%; }

iframe[src*="youtube"],
iframe[src*="youtu.be"],
iframe[src*="vimeo"],
iframe[src*="dailymotion"] {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	display: block;
	border: 0;
	border-radius: var(--pz-radius-s);
}

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);
}

/* ⚠ REVU LE 28/08/2026. La règle d'avant disait « pas de halo en clair, il
   se dissout en gris sale » — et posait une ombre GRISE, qui rendait le
   survol terne sur fond blanc. L'erreur n'était pas le halo, c'était sa
   couleur : une ombre neutre. Un halo SATURÉ, lui, tient très bien sur du
   blanc, à condition de rester une lueur (large, diffuse, peu opaque) et
   de ne jamais toucher au texte, qui garde son encre lisible. */
:root[data-pz-theme="light"] .pz-glow:hover,
:root[data-pz-theme="light"] .pz-glow:focus-within {
	border-color: var(--pz-accent);
	box-shadow:
		inset 0 0 0 2px var(--pz-accent),
		0 6px 18px -6px color-mix(in srgb, var(--pz-accent) 55%, transparent),
		0 14px 36px -14px color-mix(in srgb, var(--pz-accent) 40%, transparent);
}

/* 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);
	}

	:root[data-pz-theme="light"] .pz-glow:hover {
		box-shadow: inset 0 0 0 2px var(--pz-accent), 0 8px 22px -10px var(--pz-accent);
	}
}

/* ---------------------------------------------------------------
   Le néon qui respire (classe .pz-anim sur <body>, 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: "<color>";
	inherits: true;
	initial-value: #00f0ff;
}

@property --pz-accent-ink {
	syntax: "<color>";
	inherits: true;
	initial-value: #00828a;
}

@property --pz-accent-glow {
	syntax: "<color>";
	inherits: true;
	initial-value: #00a2ac;
}

@keyframes pz-cycle {
	0%   { --pz-accent: #00f0ff; --pz-accent-ink: #00828a; --pz-accent-glow: #00a2ac; }
	33%  { --pz-accent: #ff00c8; --pz-accent-ink: #d900aa; --pz-accent-glow: #ff00c8; }
	66%  { --pz-accent: #00ffa3; --pz-accent-ink: #008655; --pz-accent-glow: #00a76b; }
	100% { --pz-accent: #00f0ff; --pz-accent-ink: #00828a; --pz-accent-glow: #00a2ac; }
}

.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-flash);
	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);
	/* Plus de trait d'un pixel : le filet néon ci-dessous fait la séparation. */
}

@supports not (backdrop-filter: blur(4px)) {
	.pz-header { background: var(--pz-bg); }
}

/* LE FILET NÉON SOUS L'EN-TÊTE (18/09/2026).

   Le même que sous la bannière du diaporama et sous les titres de page :
   quatre couleurs qui défilent, trois pixels de haut. Le site se reconnaît
   dès la première ligne, avant même qu'une image ait chargé.

   ⚠ POSÉ DEDANS, PAS DESSOUS (bottom: 0 et non -3px). En débordant, il
   passerait par-dessus les trois premiers pixels de la page — sans gravité
   la plupart du temps, mais l'en-tête est COLLANT : le filet serait passé
   toute la journée sur le texte qui défile dessous. Le trait d'un pixel
   qui séparait l'en-tête du contenu n'a plus lieu d'être : ce filet le
   remplace, et il sépare mieux.

   ⚠ Il vaut pour les DEUX modes et les DEUX tailles d'écran : c'est un
   ornement de 3 px, il ne coûte rien sur téléphone et rien ne le masque. */
.pz-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: linear-gradient(90deg, #00ffa3, #00f0ff, #ff00c8, #ffd54a, #00ffa3);
	background-size: 300% 100%;
	animation: pz-slide 14s linear infinite;
	pointer-events: none;
	z-index: 1;
}

/* Le mouvement se coupe si l'appareil demande moins d'animations ; les
   couleurs, elles, restent — c'est l'identité du site, pas l'effet. */
@media (prefers-reduced-motion: reduce) {
	.pz-header::after { animation: none; }
}

.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: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pz-nav li { position: relative; }

.pz-nav a {
	position: relative;
	display: inline-block;
	padding: 8px 0;
	/* +30 % : le menu était timide pour une boutique qui parle fort. */
	font-size: 1.07rem;
	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
   Le propos à gauche, l'image dans son cadre à droite. L'image n'est
   plus recadrée en fond perdu : on la voit entière, et le texte n'a
   plus besoin d'un voile noir pour rester lisible.
   ========================================================= */
.pz-slider { position: relative; overflow: hidden; background: var(--pz-bg); }

.pz-slide {
	position: relative;
	display: none;
	/* La hauteur se règle au Personnalisateur : --pz-slide-h est posée sur
	   le diaporama lui-même. Sans réglage, une bannière qui annonce, pas
	   une page d'accueil qui occupe tout l'écran. */
	min-height: var(--pz-slide-h, clamp(230px, 26vw, 330px));
	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; } }

/* Le décor : les quatre couleurs des showrooms, posées en lueurs — vert,
   bleu, rose, or. Le site se reconnaît dès la bannière, sans qu'aucune
   photo n'ait besoin d'être étirée. */
.pz-slide__bg {
	position: absolute;
	inset: 0;
	/* Lueurs remontées le 29/08/2026 : à .16–.20 le bandeau lisait gris
	   sombre, les quatre couleurs ne se distinguaient plus du fond. Les
	   ellipses sont aussi plus larges (55 % au lieu de 46) : elles se
	   rejoignent au lieu de faire quatre taches isolées.
	   ⚠ Ne pas monter au-delà : le titre du diaporama est en BLANC, et
	   au-dessus de ces valeurs le contraste passe sous le seuil lisible. */
	background:
		radial-gradient(ellipse at 4% 10%, rgba(0, 255, 163, .62) 0%, rgba(0, 255, 163, .26) 26%, transparent 58%),
		radial-gradient(ellipse at 34% 96%, rgba(0, 240, 255, .58) 0%, rgba(0, 240, 255, .24) 26%, transparent 58%),
		radial-gradient(ellipse at 78% 6%, rgba(255, 0, 200, .58) 0%, rgba(255, 0, 200, .24) 26%, transparent 58%),
		radial-gradient(ellipse at 99% 90%, rgba(255, 213, 74, .52) 0%, rgba(255, 213, 74, .22) 26%, transparent 58%),
		/* ⚠ LE FOND EST VOLONTAIREMENT PLUS NOIR QUE LE RESTE DU SITE. Un
		   néon ne brille pas parce qu'on monte sa couleur : il brille parce
		   que ce qu'il y a autour est sombre. Éclaircir cette base pour
		   « adoucir » éteindrait tout l'effet. */
		#07070d;
}

/* ⚠ LE VOILE DE LECTURE, ET IL N'EST PAS NÉGOCIABLE. Une fois les lueurs
   montées à pleine puissance, la tache verte passe derrière le titre : mesuré
   à 3,87 de contraste avec le blanc, sous le seuil lisible de 4,5. Plutôt que
   de rabaisser les couleurs partout, on assombrit UNIQUEMENT la moitié gauche,
   là où vit le texte. La droite garde tout son flash.
   Vérifié par mesure : _tools/pz-test-contraste.mjs. */
.pz-slide__bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(6, 6, 12, .78) 0%, rgba(6, 6, 12, .55) 26%, transparent 62%);
	pointer-events: none;
	z-index: 1;
}

/* En clair, le texte est sombre : c'est de BLANC qu'il a besoin derrière lui,
   pas de noir. Voile beaucoup plus léger — le contraste y était déjà bon. */
:root[data-pz-theme="light"] .pz-slide__bg::before {
	background: linear-gradient(100deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .3) 30%, transparent 62%);
}

/* La dérive : une lueur supplémentaire glisse PAR-DESSUS les quatre autres,
   comme une aurore.

   ⚠ ELLE PASSE AU-DESSUS, ELLE NE DÉPLACE PAS LE FOND. Premier essai :
   agrandir le fond à 150 % et animer sa position — on ne voyait alors
   qu'une tranche de la composition, et les quatre couleurs perdaient leur
   équilibre selon l'instant. Une couche de plus laisse les quatre lueurs
   exactement où elles sont.

   ⚠ Accrochée à « .pz-anim », donc pilotée par le réglage d'animation déjà
   existant du thème : couper les animations coupe aussi celle-ci. */
.pz-slide__bg::after {
	content: "";
	position: absolute;
	inset: -30%;
	background: radial-gradient(circle at 50% 50%, rgba(0, 240, 255, .30) 0%, rgba(168, 85, 247, .16) 34%, transparent 58%);
	opacity: 0;
	pointer-events: none;
}

:root[data-pz-theme="light"] .pz-slide__bg::after {
	background: radial-gradient(circle at 50% 50%, rgba(232, 0, 168, .26) 0%, rgba(120, 60, 230, .14) 34%, transparent 58%);
}

.pz-anim .pz-slide__bg::after {
	opacity: 1;
	animation: pz-aurora 26s ease-in-out infinite alternate;
}

@keyframes pz-aurora {
	from { transform: translate3d(-14%, -8%, 0); }
	to   { transform: translate3d(14%, 8%, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.pz-anim .pz-slide__bg::after { animation: none; opacity: .5; }
}

/* En clair, on monte moins : sur un fond pâle le fluo sature très vite et
   le texte sombre devient pénible à lire. */
:root[data-pz-theme="light"] .pz-slide__bg {
	/* ⚠ SUR FOND BLANC, LE FLUO NE VIENT PAS DE L'OPACITÉ MAIS DE LA
	   SATURATION. Monter l'alpha d'un vert clair sur du blanc donne du vert
	   pâle, pas du néon. On prend donc des teintes plus DENSES (et non les
	   valeurs « allumées » du mode sombre, qui délavent sur blanc), avec la
	   même chute rapide : un cœur franc, puis plus rien. */
	background:
		radial-gradient(ellipse at 4% 10%, rgba(0, 214, 138, .72) 0%, rgba(0, 214, 138, .30) 26%, transparent 58%),
		radial-gradient(ellipse at 34% 96%, rgba(0, 176, 214, .68) 0%, rgba(0, 176, 214, .28) 26%, transparent 58%),
		radial-gradient(ellipse at 78% 6%, rgba(232, 0, 168, .62) 0%, rgba(232, 0, 168, .24) 26%, transparent 58%),
		radial-gradient(ellipse at 99% 90%, rgba(255, 180, 20, .62) 0%, rgba(255, 180, 20, .26) 26%, transparent 58%),
		#fff;
}

/* Un filet des quatre couleurs ferme la bannière, comme sous les titres
   de page : le site parle d'une seule voix. */
.pz-slider::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: linear-gradient(90deg, #00ffa3, #00f0ff, #ff00c8, #ffd54a, #00ffa3);
	background-size: 300% 100%;
	animation: pz-slide 14s linear infinite;
	pointer-events: none;
	z-index: 5;
}

@media (prefers-reduced-motion: reduce) {
	.pz-slider::after { animation: none; }
}

.pz-slide__inner { position: relative; z-index: 2; width: 100%; padding-block: 22px; }

.pz-slide__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 34px;
	align-items: center;
}

.pz-slide__content { max-width: 560px; }

/* Sans image, le propos occupe toute la largeur. */
.pz-slide--nobg .pz-slide__grid { grid-template-columns: 1fr; }
.pz-slide--nobg .pz-slide__content { max-width: 720px; }

/* ⚠ « --pz-slide-ink » : la couleur choisie pour CETTE diapositive, posée
   en style par PHP. Partout où du texte fixe est peint, elle sert de
   valeur, et la couleur d'origine reste le repli quand elle n'existe pas.
   La seconde ligne du titre (le <em>) ne la lit JAMAIS : son dégradé qui
   défile est la signature du site. */
.pz-slide__kicker {
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: .18em;
	color: var(--pz-slide-ink, var(--pz-muted));
	margin: 0 0 8px;
	white-space: pre-line;
}

.pz-slide__title {
	font-size: clamp(1.7rem, 3.8vw, 2.8rem);
	font-weight: 700;
	line-height: 1.06;
	margin: 0 0 12px;
	color: var(--pz-slide-ink, var(--pz-text));
}

/* La seconde ligne du titre prend la couleur : c'est elle qu'on retient. */
/* ⚠⚠ UNE OMBRE PORTÉE TUE CE DÉGRADÉ. Le mot n'a pas de couleur : il est
   TRANSPARENT, et ce qu'on lit est le dégradé du FOND, découpé à la forme
   des lettres. Or « text-shadow » se peint AU-DESSUS de ce fond. Une ombre
   noire posée là ne se glisse donc pas derrière les lettres : elle les
   remplit. Le 19/09/2026, l'ombre renforcée du réglage « voile : aucun »
   — héritée du titre — a rendu ces mots entièrement NOIRS, en laissant
   croire que l'animation était coupée alors qu'elle tournait dessous.

   D'où ce « none » catégorique : quoi que le titre porte, le mot animé
   n'en veut pas. Pour l'ombrer quand même, il y a « filter: drop-shadow »
   (plus bas) : lui travaille sur l'image RENDUE et se pose derrière. */
.pz-slide__title em {
	text-shadow: none;
	font-style: normal;
	background: linear-gradient(92deg, #00f0ff, #7c4dff 45%, #ff00c8);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: pz-slide 16s linear infinite;
}

.pz-slide__text { color: var(--pz-slide-ink, var(--pz-muted)); max-width: 460px; margin: 0 0 18px; }

/* Le bouton du diaporama : plein, en dégradé, avec sa flèche. */
.pz-btn--slide {
	border: 0;
	color: #fff;
	background: linear-gradient(92deg, #2f6bff, #7c4dff 55%, #ff00c8);
	background-size: 180% 100%;
	transition: background-position .5s var(--pz-ease), transform var(--pz-dur) var(--pz-ease), box-shadow var(--pz-dur) var(--pz-ease);
}

.pz-btn--slide:hover {
	color: #fff;
	background-position: 100% 50%;
	transform: translateY(-2px);
	box-shadow: 0 10px 26px -12px rgba(124, 77, 255, .9);
}

.pz-btn--slide span { transition: transform var(--pz-dur) var(--pz-ease); }
.pz-btn--slide:hover span { transform: translateX(4px); }

/* Le cadre de l'image : un filet dégradé, comme une vitrine. */
.pz-slide__frame {
	position: relative;
	padding: 10px;
	border-radius: var(--pz-radius-l);
	background:
		linear-gradient(var(--pz-surface), var(--pz-surface)) padding-box,
		linear-gradient(125deg, #00f0ff, #7c4dff 50%, #ff00c8) border-box;
	border: 1px solid transparent;
}

:root:not([data-pz-theme="light"]) .pz-slide__frame {
	box-shadow: 0 18px 50px -30px rgba(124, 77, 255, .9);
}

.pz-slide__shot {
	display: block;
	width: 100%;
	/* L'image se cale sur la hauteur choisie pour la bannière, au lieu de
	   l'imposer : sans cela un cadre en 16/10 sur une demi-largeur
	   décidait seul de la hauteur (417 px pour une bannière réglée à 330). */
	height: calc(var(--pz-slide-h, 330px) - 78px);
	min-height: 150px;
	border-radius: calc(var(--pz-radius-l) - 8px);
	/* « contain » : l'image entière, jamais rognée — c'est le point de
	   toute cette refonte. Le fond du cadre comble ce qui dépasse. */
	background-color: var(--pz-surface-2);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

@media (max-width: 900px) {
	/* En colonne, l'image reprend une proportion normale. */
	.pz-slide__shot { height: auto; aspect-ratio: 16 / 10; }
}

/* ---------------------------------------------------------------
   L'IMAGE EN FOND (réglage « Image du diaporama », 15/09/2026).
   Sur smartphone, l'image en cadre s'empilait SOUS le texte et doublait
   la hauteur de la bannière. En fond, elle habille toute la bannière.

   ⚠ UNE BANNIÈRE PHOTO EST UNE SCÈNE : sombre dans les DEUX modes, texte
   clair. Sur une photo, un voile blanc délave l'image et le texte sombre
   se perd dans les zones sombres de la photo.
   --------------------------------------------------------------- */
.pz-slide__photo {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-repeat: no-repeat;
}

/* ⚠ L'IMAGE S'ARRÊTE À LA LARGEUR DU SITE (19/09/2026). Elle couvrait la
   bannière d'un bord à l'autre de l'écran : sur un grand moniteur, un
   fichier de 1120 px était étiré à 2500, soit plus du double — d'où le flou
   que Mica voyait, et qui n'avait rien à voir avec le fichier lui-même.
   Bornée à --pz-max et centrée, elle est affichée à sa taille ou presque.

   Le BANDEAU, lui, reste pleine largeur : ce sont les lueurs néon du fond
   qui débordent de chaque côté, et elles ne perdent rien à être étirées —
   un dégradé n'a pas de pixels à flouter.

   ⚠ Le voile de lecture suit exactement le même cadre, sinon il
   assombrirait la lueur à gauche de l'image au lieu de l'image. */
.pz-slider--img-fond .pz-slide--photo .pz-slide__photo,
.pz-slider--img-fond .pz-slide--photo .pz-slide__bg::before {
	left: 50%;
	right: auto;
	width: min(100%, var(--pz-max));
	transform: translateX(-50%);
}

/* ⚠ ET LES CÔTÉS REDEVIENNENT LE FOND DE LA PAGE. Les quatre lueurs néon
   du bandeau ont été dessinées pour une bannière SANS photo : tant que
   l'image couvrait tout, on ne les voyait pas. Bornée, elle les découvre —
   une tache verte à gauche, une rose à droite, qui se lisent comme une
   bavure et non comme un décor. Sur une bannière photo, les côtés se
   taisent donc et prennent la couleur de la page ; la bannière sans photo,
   elle, garde ses lueurs intactes. */
.pz-slider--img-fond .pz-slide--photo .pz-slide__bg {
	background: var(--pz-bg);
}

.pz-slider--img-cadre .pz-slide__photo { display: none; }
.pz-slider--img-fond .pz-slide__frame { display: none; }
.pz-slider--img-fond .pz-slide--photo .pz-slide__grid { grid-template-columns: 1fr; }
.pz-slider--img-fond .pz-slide--photo .pz-slide__content { max-width: 620px; }

/* Le voile de lecture : fort à gauche où vit le texte, la photo respire à droite.
   Les trois opacités viennent du réglage « Voile sombre sur la photo » ; les
   valeurs écrites ici sont celles du réglage « Normal », gardées en repli
   pour que la bannière reste lisible même sans réglage. */
.pz-slider--img-fond .pz-slide--photo .pz-slide__bg::before,
:root[data-pz-theme="light"] .pz-slider--img-fond .pz-slide--photo .pz-slide__bg::before {
	background: linear-gradient(100deg,
		rgba(6, 6, 12, var(--pz-veil-1, .86)) 0%,
		rgba(6, 6, 12, var(--pz-veil-2, .62)) 38%,
		rgba(6, 6, 12, var(--pz-veil-3, .16)) 80%);
}

/* L'aurore teinterait la photo : on la coupe sur les bannières photo. */
.pz-slider--img-fond .pz-slide--photo .pz-slide__bg::after { display: none; }

.pz-slider--img-fond .pz-slide--photo .pz-slide__title { color: var(--pz-slide-ink, #fff); text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }

/* ⚠ SANS VOILE, L'OMBRE PORTÉE EST LA SEULE DÉFENSE DU TEXTE (réglage
   « Aucun », 19/09/2026). Elle est triple et serrée : une ombre large et
   diffuse se dissoudrait sur une photo chargée, alors que trois passes
   courtes redessinent le contour des lettres sans salir l'image autour.
   Ça ne suffira pas sur une photo blanche et détaillée — mais dans ce cas
   il faut changer la couleur du texte, pas remettre du gris sur la photo. */
.pz-slider--nu .pz-slide--photo .pz-slide__title,
.pz-slider--nu .pz-slide--photo .pz-slide__kicker,
.pz-slider--nu .pz-slide--photo .pz-slide__text {
	text-shadow:
		0 1px 2px rgba(0, 0, 0, .9),
		0 2px 6px rgba(0, 0, 0, .7),
		0 0 18px rgba(0, 0, 0, .5);
}

/* Le mot animé se défend autrement : « drop-shadow » ombre l'image RENDUE
   — le dégradé découpé — et se pose DERRIÈRE, là où « text-shadow » se
   posait devant. Même service, sans effacer la couleur. */
.pz-slider--nu .pz-slide--photo .pz-slide__title em {
	filter:
		drop-shadow(0 1px 2px rgba(0, 0, 0, .85))
		drop-shadow(0 2px 8px rgba(0, 0, 0, .55));
}
.pz-slider--img-fond .pz-slide--photo .pz-slide__kicker,
.pz-slider--img-fond .pz-slide--photo .pz-slide__text { color: var(--pz-slide-ink, rgba(255, 255, 255, .82)); }

@media (max-width: 900px) {
	/* Sur smartphone, toujours en fond — même réglé « dans un cadre ». */
	.pz-slider--img-cadre .pz-slide__frame { display: none; }
	.pz-slider--img-cadre .pz-slide__photo { display: block; }
	.pz-slide--photo .pz-slide__grid { grid-template-columns: 1fr; }

	/* En colonne, le texte couvre toute la largeur : voile vertical, plus
	   léger en haut (la photo se lit), plus dense derrière le bouton. */
	.pz-slider .pz-slide--photo .pz-slide__bg::before,
	:root[data-pz-theme="light"] .pz-slider .pz-slide--photo .pz-slide__bg::before {
		background: linear-gradient(180deg,
			rgba(6, 6, 12, var(--pz-veil-m1, .5)) 0%,
			rgba(6, 6, 12, var(--pz-veil-m2, .74)) 55%,
			rgba(6, 6, 12, var(--pz-veil-m3, .86)) 100%);
	}

	.pz-slider .pz-slide--photo .pz-slide__bg::after { display: none; }
	.pz-slider .pz-slide--photo .pz-slide__title { color: var(--pz-slide-ink, #fff); text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
	.pz-slider .pz-slide--photo .pz-slide__kicker,
	.pz-slider .pz-slide--photo .pz-slide__text { color: var(--pz-slide-ink, rgba(255, 255, 255, .85)); }
}

@media (max-width: 900px) {
	.pz-slide__grid { grid-template-columns: 1fr; gap: 22px; }
	.pz-slide__content { max-width: none; }
	.pz-slide__text { max-width: none; }
	.pz-slide { min-height: 0; }
	.pz-slide__inner { padding-block: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.pz-slide__title em { animation: none; }
}

/* 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; }

/* ⚠ LES FLÈCHES NE DOIVENT PAS MORDRE SUR LE TEXTE (15/09/2026). Tant que
   l'écran n'est pas assez large pour laisser une marge autour du contenu,
   la flèche gauche se posait sur le titre. On écarte le contenu d'autant,
   et les pastilles gardent leur place sous le bouton. */
.pz-slider--arrows .pz-slide__inner { padding-bottom: 40px; }

@media (max-width: 1400px) {
	.pz-slider--arrows .pz-slide__grid { padding-inline: 68px; }
}

/* Sur smartphone : pas de flèches (on fait glisser au doigt, les pastilles
   restent), et le contenu reprend toute la largeur. */
@media (max-width: 900px) {
	.pz-slider__arrow { display: none; }
	.pz-slider--arrows .pz-slide__grid { padding-inline: 20px; }
	.pz-slider__dots { bottom: 12px; }
	.pz-slider--arrows .pz-slide__inner { padding-bottom: 34px; }
}

/* =========================================================
   6. RANG DE CATÉGORIES
   ========================================================= */
.pz-cats { background: var(--pz-bg-2); border-block: 1px solid var(--pz-line-soft); }

/* ⚠ UNE LIGNE, TOUJOURS — ET QUI GLISSE (19/09/2026). C'était une GRILLE
   de six colonnes, qui retombait à trois puis à deux : sur téléphone les
   rubriques s'empilaient « deux par deux » et le rang, censé être un simple
   repère sous l'en-tête, devenait un pavé de trois étages.

   Une ligne souple qui déborde et se fait glisser au doigt vaut mieux qu'un
   empilement : on voit tout de suite qu'il y a une suite, et la hauteur de
   l'en-tête ne bouge plus jamais.

   ⚠ « flex: 1 0 auto » — le 0 est le point important : les pastilles
   GRANDISSENT pour remplir la largeur quand il y a la place, mais ne
   RÉTRÉCISSENT jamais sous leur taille naturelle. Avec un 1 à la place,
   elles se seraient comprimées jusqu'à rendre les mots illisibles au lieu
   de déborder. */
.pz-cats__row {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: 10px;
	/* Un rang de rubriques est un repère, pas une section : il ne prend
	   que la place de ses pastilles. */
	padding: 10px 0;
	/* La barre de défilement est un détail d'atelier : on la cache, le
	   glissement reste. */
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.pz-cats__row::-webkit-scrollbar { display: none; }

/* ---------------------------------------------------------------
   LES FLÈCHES DE LA LIGNE (19/09/2026).

   ⚠ Elles sont POSÉES PAR-DESSUS la ligne, pas à côté. Mises à côté,
   elles auraient mangé deux fois 30 px de largeur — précisément là où la
   place manque, c'est-à-dire sur téléphone. Par-dessus, elles ne coûtent
   rien ; le petit fond dégradé sous chacune empêche la rubrique qui passe
   dessous de rendre le dessin illisible.

   ⚠ Aucune ne s'affiche tant que le JavaScript n'a pas MESURÉ que la ligne
   déborde (attribut « hidden » à la sortie du serveur). Une flèche qui ne
   mène nulle part est pire que pas de flèche.
   --------------------------------------------------------------- */
.pz-cats__nav { position: relative; }

.pz-cats__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--pz-line);
	border-radius: 999px;
	background: var(--pz-surface);
	color: var(--pz-text);
	cursor: pointer;
	transition: color var(--pz-dur) var(--pz-ease), border-color var(--pz-dur) var(--pz-ease);
}

/* ⚠⚠ SANS CETTE LIGNE, LES FLÈCHES NE SE CACHENT PAS. L'attribut
   « hidden » du HTML ne pose qu'un « display: none » de navigateur, de
   priorité minuscule : le « display: inline-flex » de la classe ci-dessus
   passe devant, et les flèches restent affichées même quand le JavaScript
   les a désignées comme inutiles. Mesuré le 19/09/2026 : le script avait
   raison (débord 0, flèches marquées cachées), c'est la feuille de style
   qui les rallumait. Toute classe qui impose un « display » doit prévoir
   son propre cas « hidden ». */
.pz-cats__arrow[hidden] { display: none; }

.pz-cats__arrow svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

.pz-cats__arrow:hover,
.pz-cats__arrow:focus-visible { color: var(--pz-flash); border-color: var(--pz-flash); }

.pz-cats__arrow--prev { left: -6px; }
.pz-cats__arrow--next { right: -6px; }

/* Le voile qui dit « ça continue par là ». Il ne vit que sous une flèche
   visible : quand la ligne tient entière, il n'y a rien à annoncer. */
.pz-cats__arrow::before {
	content: "";
	position: absolute;
	top: -12px;
	bottom: -12px;
	width: 44px;
	z-index: -1;
	pointer-events: none;
}

.pz-cats__arrow--prev::before {
	left: -10px;
	background: linear-gradient(90deg, var(--pz-bg-2) 40%, transparent);
}

.pz-cats__arrow--next::before {
	right: -10px;
	background: linear-gradient(270deg, var(--pz-bg-2) 40%, transparent);
}

/* Sur un écran tactile, la cible doit être franche. */
@media (max-width: 700px) {
	.pz-cats__arrow { width: 34px; height: 34px; }
	.pz-cats__arrow--prev { left: -10px; }
	.pz-cats__arrow--next { right: -10px; }
}

.pz-cats__row > .pz-cat { flex: 1 0 auto; min-width: 84px; }

/* Le petit mot qui annonce un groupe DANS la ligne : « Boutique », « Blog ».

   ⚠ Il est DEDANS, pas au-dessus (19/09/2026, deuxième passe). Au-dessus,
   chaque groupe demandait sa propre bande et l'accueil en affichait deux :
   deux titres, deux traits, deux fois la hauteur. Dedans, les deux
   rayonnages partagent une seule ligne qui se fait glisser au doigt.

   Il ne sert QUE là où deux groupes se suivent — ailleurs le contexte
   suffit, et le mot serait du bruit. */
.pz-cats__tag {
	flex: 0 0 auto;
	align-self: center;
	font-size: .58rem;
	text-transform: uppercase;
	letter-spacing: .14em;
	font-weight: 600;
	color: var(--pz-muted);
	white-space: nowrap;
	padding: 0 2px;
}

/* À partir du deuxième groupe, un filet sépare — sans lui, les deux
   rayonnages se liraient comme une seule liste. */
.pz-cats__tag--sep {
	border-left: 1px solid var(--pz-line);
	padding-left: 14px;
	margin-left: 6px;
}

.pz-cat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 8px 6px;
	border-radius: var(--pz-radius);
	/* Chaque rubrique porte SON cadre, à SA couleur, dès le repos
	   (21/09/2026). Avant, le cadre n'apparaissait qu'au survol : la seule
	   rubrique encadrée en permanence était celle réglée en arc-en-ciel, qui
	   avait donc l'air sélectionnée sans l'être. La couleur de repli sert aux
	   navigateurs sans `color-mix` : un cadre neutre plutôt qu'aucun cadre. */
	border: 1px solid var(--pz-line);
	border-color: color-mix(in srgb, var(--pz-flash) 32%, 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-flash); 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);
}

/* ⚠ LE HALO APPUYÉ EST RÉSERVÉ AUX ÉCRANS QUI SURVOLENT (21/09/2026).
   `hover: hover` écarte les téléphones, où le « survol » se déclenche au
   doigt et resterait allumé après le tap. Sur PC, la rangée doit réagir
   franchement : c'est elle qui donne envie d'ouvrir une rubrique. */
@media (min-width: 901px) and (hover: hover) {
	.pz-cat:hover { transform: translateY(-5px); }

	:root:not([data-pz-theme="light"]) .pz-cat:hover {
		box-shadow:
			0 0 24px 3px color-mix(in srgb, var(--pz-accent) 60%, transparent),
			0 0 52px 10px color-mix(in srgb, var(--pz-accent) 28%, transparent);
	}

	/* En clair, un halo néon ne se voit pas : c'est un liseré net plus une
	   ombre portée colorée qui font le même travail. */
	:root[data-pz-theme="light"] .pz-cat:hover {
		box-shadow:
			inset 0 0 0 1px color-mix(in srgb, var(--pz-flash) 55%, transparent),
			0 10px 26px -10px color-mix(in srgb, var(--pz-flash) 60%, transparent);
	}
}

.pz-cat__icon {
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Un pictogramme au trait : il prend l'éclat, pas l'encre — sinon il
	   lit gris-foncé en mode clair alors qu'il est fluo en sombre. */
	color: var(--pz-flash);
	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);
}

/* =========================================================
   6 bis. LE CADRAGE DES VISUELS
   Une seule règle pour toutes les vignettes du site.

   Deux problèmes distincts sont traités ici :

   1. LA HAUTEUR — plafonnée par --pz-media-cap (voir les jetons). Sans
      plafond, une carte qui passe pleine largeur double la hauteur de son
      image : c'est ce qui faisait grossir les visuels quand la fenêtre
      rétrécit.

   2. LE CADRAGE — la boutique mélange des photos en LARGEUR et en
      HAUTEUR. Réglage « Cadrage des visuels » :
        • Remplir (défaut)  : l'image couvre la case. On recadre au tiers
          supérieur et non au centre : sur une photo en hauteur, c'est le
          haut qui porte le sens (un visage, le col d'un vêtement), pas le
          milieu. Une photo en largeur, elle, ne bouge presque pas.
        • Image entière     : l'image tient tout entière dans la case, et
          le vide est comblé par elle-même, agrandie et floutée. Rien n'est
          coupé, et la grille reste alignée au pixel.
   ========================================================= */
.pz-hall__media,
.pz-post__media,
.pz-mini__media,
.pz-halfcard__media,
.pz-big__media,
.pz-feature__media,
.pz-article__cover {
	max-height: var(--pz-media-cap);
}

.pz-product__media,
.pz-soon__media {
	max-height: var(--pz-media-cap-square);
}

/* Le recadrage par le haut, pour le mode « remplir ». 34 % et non 50 % :
   assez descendu pour qu'une photo en largeur ne perde pas son sujet,
   assez remonté pour qu'une photo en hauteur garde sa tête. */
.pz-hall__media img,
.pz-post__media img,
.pz-mini__media img,
.pz-halfcard__media img,
.pz-big__media img,
.pz-feature__media img,
.pz-product__media img,
.pz-article__cover img {
	object-position: center 34%;
}

/* L'en-tête d'article : une case, comme les autres. Sans proportion
   imposée, une photo en hauteur occupait tout l'écran avant le premier mot.
   ⚠ La figure porte la case ; l'image la remplit. */
.pz-article__cover {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--pz-surface-2);
}

.pz-article__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------------------------------------------------------------
   MODE « IMAGE ENTIÈRE » : l'image posée en entier, le vide comblé par
   elle-même en flou. PHP dépose son adresse dans --pz-shot.

   ⚠ Le fond est un CALQUE SOUS l'image (::before), pas le fond de la case :
   il déborde de 6 % et se floute, et un flou appliqué au bord d'un bloc
   laisse un liseré clair — le débordement le fait passer hors cadre.
   --------------------------------------------------------------- */
body.pz-fit-whole :is(
	.pz-hall__media,
	.pz-post__media,
	.pz-mini__media,
	.pz-halfcard__media,
	.pz-big__media,
	.pz-feature__media,
	.pz-product__media,
	.pz-article__cover
) img {
	/* ⚠ On ne touche NI à position NI à z-index : dans le fil et les petites
	   cartes du blog, l'image est volontairement hors du flux (absolue), et
	   la remettre en flux lui rendrait le pouvoir de fixer la hauteur de
	   toute la rangée. L'ordre de peinture est réglé par le calque, plus bas. */
	object-fit: contain;
	object-position: center center;
}

body.pz-fit-whole :is(
	.pz-hall__media,
	.pz-post__media,
	.pz-mini__media,
	.pz-halfcard__media,
	.pz-big__media,
	.pz-feature__media,
	.pz-product__media,
	.pz-article__cover
) {
	isolation: isolate;
}

body.pz-fit-whole :is(
	.pz-hall__media,
	.pz-post__media,
	.pz-mini__media,
	.pz-halfcard__media,
	.pz-big__media,
	.pz-feature__media,
	.pz-product__media,
	.pz-article__cover
)::before {
	content: "";
	position: absolute;
	inset: -6%;
	/* Sous l'image, au-dessus du fond de la case. « isolation » (posée
	   ci-dessous) enferme ce -1 dans la vignette : sans elle, le calque
	   glisserait derrière le fond de la carte et on ne le verrait plus. */
	z-index: -1;
	background-image: var(--pz-shot, none);
	background-size: cover;
	background-position: center center;
	filter: blur(22px) saturate(1.15);
	opacity: .55;
	pointer-events: none;
}

/* Sans image (--pz-shot absente), le calque ne peint rien : la case garde
   son fond uni. Rien à masquer de plus. */

/* =========================================================
   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.02); }

.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.02); }

.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__body { min-width: 0; }
.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); }

/* « +2 » : l'article désigne d'autres produits, visibles en le lisant. */
.pz-linked__more {
	margin-left: auto;
	flex: 0 0 auto;
	font-size: .72rem;
	font-weight: 600;
	color: var(--pz-muted);
	border: 1px solid var(--pz-line);
	border-radius: 999px;
	padding: 2px 8px;
}

/* =========================================================
   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);
	/* Les deux colonnes s'alignent sur la plus haute : la colonne blog
	   répartit alors ses deux articles sur toute la hauteur des produits,
	   au lieu de se tasser en haut. */
	align-items: stretch;
}

/* Chaque colonne du bloc « phares » est autonome : son titre, puis son
   contenu. Les deux titres se retrouvent donc à la même hauteur, et le
   lien « voir tout » reste au-dessus des produits qu'il ouvre. */
.pz-spotlight__side { display: flex; flex-direction: column; min-width: 0; }
/* ⚠ LA MÊME MARGE DES DEUX CÔTÉS, C'EST LA CONDITION DE L'ALIGNEMENT.
   Les deux titres ont la même hauteur ; si leurs marges basses diffèrent, les
   deux colonnes ne démarrent pas à la même ligne et les articles cessent de
   se caler sur les rangées de produits (18 px ici contre 24 en face : la
   colonne blog gagnait six pixels, et le quatrième article dérivait). */
.pz-spotlight__side .pz-section-head { margin-bottom: 24px; }
.pz-spotlight__products,
.pz-spotlight__blog { flex: 1 1 auto; }

.pz-spotlight__products { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--pz-gap); }

/* La colonne blog de l'accueil : deux articles empilés, sous leur propre
   titre. Le second n'a pas de chapeau — il complète, il ne raconte pas. */
.pz-spotlight__blog { display: flex; flex-direction: column; gap: var(--pz-gap); }


/* ⚠ CARTE COUCHÉE, ET C'EST VOULU. Empilées (image au-dessus, texte
   dessous), ces cartes doivent partager en hauteur la colonne des produits :
   l'image, dont le contenu ne pèse rien, se faisait écraser à dix pixels
   dès que le chapeau prenait quatre lignes. Couchées, image à gauche sur un
   tiers et texte à droite sur deux tiers, l'image ne se bat plus contre le
   texte : elle prend la hauteur de la carte, quelle qu'elle soit. */
.pz-spotlight__blog .pz-feature {
	flex: 1 1 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	align-items: stretch;
	/* Deux articles remplissent la colonne des produits pile poil. Un seul
	   article s'étirerait sur toute sa hauteur, et son image deviendrait une
	   lame verticale : on plafonne. Mieux vaut un peu de vide dessous qu'une
	   photo méconnaissable. */
	max-height: 340px;
}

/* Seul dans sa colonne, l'article ne s'étire plus du tout : il prend la
   hauteur de son texte, et pas un pixel de plus. Deux raisons — le vide sous
   la date n'a rien à dire, et à 128 px de large une boîte trop haute ne montre
   qu'une mince bande verticale de la photo, très agrandie, ce qui se lit comme
   un flou alors que le fichier est net. Le plafond ne sert plus que de garde-fou. */
.pz-spotlight__blog .pz-feature:only-child {
	flex: 0 1 auto;
	height: auto;
	max-height: 268px;
}

.pz-spotlight__blog .pz-feature__media {
	/* Plus de ratio imposé : la hauteur vient de la carte. Et donc pas de
	   plafond non plus — la carte a déjà le sien (max-height: 268px). */
	aspect-ratio: auto;
	height: 100%;
	min-height: 128px;
	max-height: none;
}

/* ⚠ LE TEXTE NE DOIT JAMAIS ÊTRE COUPÉ PAR LE BAS DE LA CARTE. La carte a
   une hauteur plafonnée et « overflow: hidden » : un titre sur trois lignes
   ou un chapeau un peu long passaient sous le bord, en emportant la date.
   On borne donc le nombre de lignes — le navigateur pose lui-même les points
   de suspension — et le contenu part du HAUT, ce qui récupère la place
   perdue au-dessus du titre. */
.pz-spotlight__blog .pz-feature__body {
	justify-content: flex-start;
	gap: 7px;
	min-height: 0;
	/* Moins de marge intérieure haut et bas que sur une carte empilée :
	   ici la hauteur est comptée, chaque pixel rendu au texte se voit. */
	padding: 14px 16px;
}

.pz-spotlight__blog .pz-feature__title,
.pz-spotlight__blog .pz-feature__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ⚠ L'INTERLIGNE DOIT ÊTRE PLUS LARGE QUE SUR UN TITRE NON COUPÉ. « overflow:
   hidden » tranche à la hauteur exacte des lignes, pas à celle des lettres :
   avec l'interligne serré de 1,22 des grands titres, le bas des caractères de
   la dernière ligne passait sous la coupe et le titre paraissait scié en deux. */
.pz-spotlight__blog .pz-feature__title {
	-webkit-line-clamp: 2;
	line-height: 1.34;
}

.pz-spotlight__blog .pz-feature__text {
	-webkit-line-clamp: 4;
	line-height: 1.5;
}

/* ⚠ LE NOMBRE DE LIGNES SUIT LE NOMBRE D'ARTICLES. À deux articles chaque
   carte reçoit la moitié de la colonne et le chapeau tient sur quatre lignes ;
   à quatre, chaque carte n'a plus qu'un quart, et quatre lignes passeraient
   sous le bord. C'est PHP qui pose la classe, pas une supposition du CSS. */
.pz-spotlight__blog--3 .pz-feature__text { -webkit-line-clamp: 3; }
.pz-spotlight__blog--4 .pz-feature__text { -webkit-line-clamp: 2; }

/* Serrées à quatre, les cartes respirent moins : on rend au texte ce que
   la marge intérieure lui prenait. */
.pz-spotlight__blog--4 .pz-feature__body { padding: 11px 14px; gap: 5px; }
.pz-spotlight__blog--4 .pz-feature__title { font-size: 1rem; }

/* La date reste collée au bas du texte, jamais poussée hors du cadre. */
.pz-spotlight__blog .pz-post__meta { margin-top: 2px; }
.pz-spotlight__blog .pz-feature__title { font-size: 1.06rem; }

/* Sur un téléphone, la carte reste couchée — c'est la forme d'une brève,
   et elle évite de pousser les produits très bas — mais l'image cède un peu
   de place au texte, qui devient le point serré. */
@media (max-width: 560px) {
	.pz-spotlight__blog .pz-feature { grid-template-columns: 38% minmax(0, 1fr); }
	.pz-spotlight__blog .pz-feature__body { padding: 14px; }
	.pz-spotlight__blog .pz-feature__media { min-height: 104px; }
}

/* Un titre de section « habillé » : les quatre couleurs du site, qui
   glissent dans le texte, et un soulignement du même dégradé. */
.pz-section-title--fancy {
	background: linear-gradient(92deg, #00ffa3, #00f0ff 32%, #ff00c8 64%, #ffd54a);
	background-size: 220% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: pz-slide 16s linear infinite;
}

.pz-section-title--fancy a { color: inherit; }

.pz-section-title--fancy::after {
	width: 64px;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, #00ffa3, #00f0ff, #ff00c8, #ffd54a);
	background-size: 200% 100%;
	animation: pz-slide 16s linear infinite;
}

:root:not([data-pz-theme="light"]) .pz-section-title--fancy::after {
	box-shadow: 0 0 12px -2px rgba(0, 240, 255, .8);
}

/* En clair, un dégradé pâle sur fond pâle ne se lit plus : le texte
   repasse à l'encre, le soulignement garde les couleurs. */
/* ⚠ EN CLAIR AUSSI, ÇA DÉFILE — depuis le 19/09/2026. Ces trois titres
   perdaient TOUT en mode clair : gradient supprimé, « animation: none »,
   texte plat. La raison d'origine était juste — un fluo pâle sur fond pâle
   ne se lit pas — mais la conclusion était trop large : ce n'est pas
   l'animation qui posait problème, c'est la CLAIRETÉ des couleurs.

   On garde donc le mouvement, et on change la palette : les quatre teintes
   « encre » du thème, mesurées à 4,5 de contraste sur blanc, là où les
   teintes allumées tournent autour de 1,4. Même dégradé, même cadence,
   lisible. */
:root[data-pz-theme="light"] .pz-section-title--fancy {
	background: linear-gradient(92deg, #008655, #00828a 32%, #d900aa 64%, #927000);
	/* ⚠ La propriété raccourcie « background » REMET À ZÉRO la découpe :
	   sans ces trois lignes, le dégradé se peint en rectangle derrière un
	   texte redevenu opaque, et rien ne défile. Mesuré, pas supposé. */
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	background-size: 220% 100%;
}

@media (prefers-reduced-motion: reduce) {
	.pz-section-title--fancy,
	.pz-section-title--fancy::after { animation: none; }
}

@media (max-width: 900px) {
	.pz-spotlight__blog { gap: 16px; }
}

.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); }
/* On recadre par le CENTRE : une image plus haute ou plus large que sa
   case perd équitablement de chaque côté, jamais tout le bas ni toute
   la droite. C'est la valeur par défaut, mais elle se perd au premier
   object-position écrit ailleurs : on l'écrit donc noir sur blanc. */
.pz-feature__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	transition: transform .6s var(--pz-ease);
}
.pz-feature:hover .pz-feature__media img { transform: scale(1.02); }
.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 {
	/* Titre centré, comme celui du journal : les deux en-têtes de page
	   se tiennent. */
	text-align: center;
	padding: 34px 0 26px;
	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 auto; }

.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); }

/* Les widgets ne sont pas tous les nôtres : WordPress et ses extensions
   posent ici leurs propres formulaires. On les habille au thème pour
   qu'aucun champ nu ne vienne trouer la boutique. */
.pz-widget p,
.pz-widget label { font-size: .9rem; color: var(--pz-muted); margin: 0 0 8px; }

.pz-widget input[type="search"],
.pz-widget input[type="text"],
.pz-widget input[type="email"],
.pz-widget select {
	width: 100%;
	padding: 9px 14px;
	border-radius: 999px;
	border: 1px solid var(--pz-line);
	background: var(--pz-surface);
	color: var(--pz-text);
	font: inherit;
	font-size: .9rem;
}

.pz-widget button,
.pz-widget input[type="submit"] {
	margin-top: 8px;
	padding: 9px 18px;
	border-radius: 999px;
	border: 1px solid var(--pz-line);
	background: transparent;
	color: var(--pz-ink);
	font: inherit;
	font-size: .82rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color var(--pz-dur) var(--pz-ease), color var(--pz-dur) var(--pz-ease);
}

.pz-widget button:hover,
.pz-widget input[type="submit"]:hover { border-color: var(--pz-ink); }

.pz-widget .search-form { display: flex; flex-direction: column; align-items: flex-start; }

/* =========================================================
   DÉCLINAISONS (variations WooCommerce)
   Le moteur reste celui de WooCommerce ; on l'habille, et on double
   ses menus déroulants de boutons — plus sûrs au doigt, et lisibles
   sur fond sombre, ce que ne sont pas les <select> du navigateur.
   ========================================================= */
.pz-variations-intro {
	margin: 0 0 10px;
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--pz-muted);
}

.variations {
	width: 100%;
	margin: 0 0 18px;
	border-collapse: collapse;
}

.variations th,
.variations td {
	display: block;
	width: 100%;
	padding: 0;
	text-align: left;
	border: 0;
}

.variations th {
	padding-top: 12px;
	font-size: .74rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--pz-muted);
}

.variations label { margin: 0; }

/* Le menu natif : lisible en sombre comme en clair. Il reste la seule
   voie possible si le script n'est pas là. */
.variations select {
	width: 100%;
	max-width: 340px;
	margin-top: 8px;
	padding: 11px 40px 11px 14px;
	border: 1px solid var(--pz-line);
	border-radius: var(--pz-radius-s);
	background-color: var(--pz-surface);
	color: var(--pz-text);
	font-size: .92rem;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	/* La flèche est dessinée ici : celle du navigateur est noire sur noir. */
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

.variations select:focus { outline: none; border-color: var(--pz-ink); }
.variations select option { background: var(--pz-surface); color: var(--pz-text); }

/* Quand les boutons sont en place, le menu passe au second plan — mais il
   reste dans la page, pour WooCommerce et pour les lecteurs d'écran. */
.pz-variations--buttons .variations select {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ⚠ Surtout pas « .pz-swatch » : ce nom sert déjà aux pastilles de couleur
   des cartes produit (13 px, rondes). Les boutons héritaient de leur
   largeur et le texte débordait. */
.pz-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

.pz-choice {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	/* 44 px de haut : la cible minimale confortable au doigt. */
	min-height: 44px;
	padding: 8px 16px;
	border: 1px solid var(--pz-line);
	border-radius: 999px;
	background: var(--pz-surface);
	color: var(--pz-text);
	font-size: .84rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color var(--pz-dur) var(--pz-ease), color var(--pz-dur) var(--pz-ease), box-shadow var(--pz-dur) var(--pz-ease);
}

.pz-choice:hover { border-color: var(--pz-ink); color: var(--pz-ink); }

.pz-choice.is-active {
	border-color: var(--pz-ink);
	color: var(--pz-ink);
	box-shadow: inset 0 0 0 1px var(--pz-ink);
}

:root:not([data-pz-theme="light"]) .pz-choice.is-active {
	box-shadow: inset 0 0 0 1px var(--pz-ink), 0 0 14px -4px var(--pz-accent);
}

/* Une valeur qui porte une couleur la montre : le mot seul ne dit pas
   la nuance. La pastille vient de l'attribut, jamais inventée. */
.pz-choice--color::before {
	content: "";
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--pz-choice, transparent);
	border: 1px solid var(--pz-line);
	flex: 0 0 auto;
}

/* Prix, stock et bouton de la déclinaison choisie */
.woocommerce-variation { margin-bottom: 14px; }

.woocommerce-variation-price .price {
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--pz-text);
}

.woocommerce-variation-availability .stock { font-size: .86rem; color: var(--pz-muted); }
.woocommerce-variation-availability .stock.out-of-stock { color: var(--pz-magenta); }

.reset_variations {
	display: inline-block;
	order: 2;
	margin-top: 10px;
	font-size: .76rem;
	color: var(--pz-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.reset_variations:hover { color: var(--pz-ink); }

/* Tant qu'aucune déclinaison n'est choisie, WooCommerce masque le bouton :
   on garde la place, pour que la page ne saute pas au moment du choix. */
.single_variation_wrap { min-height: 92px; }

@media (max-width: 480px) {
	.pz-choice { padding: 8px 14px; font-size: .8rem; }
	.variations select { max-width: 100%; }
}

/* 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: -60% 40% -60% -20%;
	background: radial-gradient(ellipse at 30% 50%, rgba(0, 240, 255, .30), transparent 66%);
	animation: pz-drift 22s ease-in-out infinite alternate;
	pointer-events: none;
}

:root[data-pz-theme="light"] .pz-blog-hero::before {
	background: radial-gradient(ellipse at 30% 50%, rgba(0, 240, 255, .22), transparent 70%);
}

:root[data-pz-theme="light"] .pz-blog-hero__title {
	background: linear-gradient(92deg, #008655, #00828a 32%, #d900aa 64%, #927000);
	/* ⚠ La propriété raccourcie « background » REMET À ZÉRO la découpe :
	   sans ces trois lignes, le dégradé se peint en rectangle derrière un
	   texte redevenu opaque, et rien ne défile. Mesuré, pas supposé. */
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	background-size: 200% 100%;
}

.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;
	/* Même traitement que le titre de la boutique : les quatre couleurs
	   des showrooms, qui glissent lentement. */
	background: linear-gradient(92deg, #00ffa3, #00f0ff 35%, #ff00c8 68%, #ffd54a);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: pz-slide 18s linear infinite;
}

.pz-blog-hero__sub { position: relative; color: var(--pz-muted); margin: 0; }

/* 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.02); }
.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 */
/* padding-BLOCK seulement : « padding: 44px 0 » annulait la marge latérale de .pz-wrap, et toutes les pages collaient aux bords sur mobile (corrigé 14/09/2026). */
.pz-article { max-width: 780px; margin-inline: auto; padding-block: 44px; }
.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; }

/* La même rangée de pastilles, ailleurs : fiche produit, pied de page. */
.pz-tagrow { display: flex; gap: 8px; flex-wrap: wrap; }
.pz-tagrow--product { margin: 34px 0 8px; }

/* WooCommerce écrit déjà « Étiquettes : … » en petit dans sa ligne de
   méta, sous le prix : on ne le dit pas deux fois — la rangée du bas
   remplace cette mention. */
.product_meta .tagged_as { display: none; }

/* Encart produits liés, version article.
   Un seul produit : la bande large de la maquette. Deux ou trois : la même
   pastille, en colonnes, sous une ligne qui dit ce que c'est. */
.pz-linked-block { margin: 34px 0 0; }

.pz-linked-block__title {
	margin: 0 0 12px;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--pz-muted);
}

.pz-linked-block__list { display: grid; gap: 12px; }
.pz-linked-block--2 .pz-linked-block__list { grid-template-columns: 1fr 1fr; }
.pz-linked-block--3 .pz-linked-block__list { grid-template-columns: repeat(3, 1fr); }

.pz-linked--wide { margin: 0; padding: 16px; gap: 16px; }
.pz-linked--wide img { width: 84px; height: 84px; }

/* À plusieurs, l'image rétrécit : trois colonnes doivent tenir la ligne. */
.pz-linked-block--2 .pz-linked--wide,
.pz-linked-block--3 .pz-linked--wide { padding: 12px; gap: 12px; }
.pz-linked-block--2 .pz-linked--wide img,
.pz-linked-block--3 .pz-linked--wide img { width: 60px; height: 60px; }

@media (max-width: 780px) {
	.pz-linked-block--2 .pz-linked-block__list,
	.pz-linked-block--3 .pz-linked-block__list { grid-template-columns: 1fr; }
}

/* =========================================================
   LES RANGÉES DU JOURNAL
   Trois articles : un grand, deux plus petits. D'une rangée à l'autre,
   le grand change de bord — c'est ce balancement qui donne le rythme.
   ========================================================= */
.pz-row {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: var(--pz-gap);
	align-items: stretch;
	margin-bottom: var(--pz-gap);
}

/* Une rangée sur deux : le grand passe à droite. */
.pz-row--flip .pz-big { order: 2; }
.pz-row--flip .pz-row__side { order: 1; }

/* ⚠ minmax(0, 1fr) et non 1fr : sans le minimum à zéro, une piste de
   grille ne descend jamais sous la hauteur naturelle de son contenu — et
   une image de 720 px imposait sa taille à toute la rangée. */
.pz-row__side { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: var(--pz-gap); min-height: 0; }

/* Le grand article */
.pz-big { position: relative; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }

.pz-big__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--pz-surface-2);
}

.pz-big__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--pz-ease); }
.pz-big:hover .pz-big__media img { transform: scale(1.02); }
.pz-big__chip { position: absolute; top: 14px; left: 14px; z-index: 2; }

.pz-big__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }

.pz-big__title {
	margin: 0;
	font-size: clamp(1.1rem, 1.9vw, 1.45rem);
	line-height: 1.22;
	font-weight: 700;
	color: var(--pz-ink);
}

/* La une : plus haute, et son chapeau respire. */
.pz-row--lead .pz-big__media { aspect-ratio: 16 / 10; }
.pz-row--lead .pz-big__title { font-size: clamp(1.25rem, 2.3vw, 1.75rem); }

/* Les deux petites cartes */
.pz-mini { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; min-height: 0; }

.pz-mini__media {
	position: relative;
	/* Elle prend ce qui reste de la hauteur : deux cartes empilées
	   remplissent exactement la hauteur du grand article. */
	min-height: 0;
	overflow: hidden;
	background: var(--pz-surface-2);
}

/* ⚠ Image HORS DU FLUX : une image dans le flux impose sa hauteur
   naturelle à la piste de grille, et c'est elle qui décidait alors de la
   hauteur de toute la rangée (450 px pour une vignette carrée). Sortie du
   flux, elle ne pèse plus rien : la rangée prend la hauteur du grand
   article, et les deux petites cartes s'y répartissent. */
.pz-mini__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--pz-ease);
}
.pz-mini:hover .pz-mini__media img { transform: scale(1.02); }
.pz-mini__chip { position: absolute; top: 10px; left: 10px; z-index: 2; }

.pz-mini__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 5px; }

.pz-mini__title {
	margin: 0;
	font-size: .95rem;
	line-height: 1.26;
	font-weight: 700;
	color: var(--pz-ink);
}

:root:not([data-pz-theme="light"]) .pz-big__title,
:root:not([data-pz-theme="light"]) .pz-mini__title {
	text-shadow: 0 0 18px color-mix(in srgb, var(--pz-accent) 35%, transparent);
}

@media (max-width: 900px) {
	.pz-row { grid-template-columns: 1fr; }
	.pz-row--flip .pz-big,
	.pz-row--flip .pz-row__side { order: 0; }
	.pz-row__side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
	.pz-mini { grid-template-rows: auto auto; }
	.pz-mini__media { aspect-ratio: 16 / 10; }
}

@media (max-width: 520px) {
	.pz-row__side { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   « Prochain drop » : ce qui n'est pas encore arrivé dans ce showroom.
   Verrouillé, mais bien visible — c'est l'attente qui fait l'envie.
   --------------------------------------------------------------- */
.pz-next { margin-top: 30px; }
.pz-next__head { margin-bottom: 18px; }

.pz-soon { position: relative; overflow: hidden; display: flex; flex-direction: column; }

/* Rien du produit n'est montré — même voilée, une image se devine. À la
   place, la marque, à la couleur du showroom, sur un fond de la même
   teinte en très pâle. L'image véritable prend le relais à l'heure dite. */
.pz-soon__media {
	position: relative;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background:
		radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--pz-accent) 26%, transparent), transparent 70%),
		color-mix(in srgb, var(--pz-accent) 12%, var(--pz-surface));
	color: var(--pz-ink);
}

:root[data-pz-theme="light"] .pz-soon__media {
	background:
		radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--pz-accent) 34%, transparent), transparent 72%),
		color-mix(in srgb, var(--pz-accent) 18%, #fff);
}

/* ⚠ Le porteur est un span : sans display, sa largeur suit son contenu et
   le « 56 % » du dessin se calculait sur rien — la marque se retrouvait
   décalée à gauche. */
.pz-soon__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.pz-mark { width: 56%; height: auto; overflow: visible; }

/* ⚠ Sans ces deux règles, le navigateur remplit les tracés en NOIR : un
   SVG sans « fill » déclaré est plein par défaut, et le prisme comme le
   cadenas devenaient des silhouettes opaques. */
.pz-mark__glass,
.pz-mark__tube { fill: none; stroke: currentColor; stroke-linejoin: round; stroke-linecap: round; }

/* Le verre : épais et translucide. Le filament : fin et net. */
.pz-mark__glass { stroke-width: 3.6; opacity: .28; }
.pz-mark__tube  { stroke-width: 1.25; }

:root:not([data-pz-theme="light"]) .pz-mark {
	filter: drop-shadow(0 0 6px color-mix(in srgb, var(--pz-accent) 75%, transparent));
}

/* Le cadenas se range dans un coin : la marque tient le centre. */
.pz-soon__lock {
	position: absolute;
	top: 10px;
	right: 10px;
	display: inline-flex;
	color: var(--pz-ink);
	opacity: .85;
}

.pz-soon__lock svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; }

.pz-soon__body { padding: 12px 13px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }

.pz-soon__title {
	margin: 0;
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.28;
	color: var(--pz-text);
}

/* Le bandeau d'attente, sur la fiche d'un produit en cascade */
.pz-drop-note {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0 0 18px;
	padding: 12px 16px;
	border-left: 3px solid var(--pz-ink);
	border-radius: var(--pz-radius-s);
	background: color-mix(in srgb, var(--pz-accent) 10%, var(--pz-surface));
}

.pz-drop-note strong { color: var(--pz-ink); font-size: .9rem; }
.pz-drop-note span { color: var(--pz-muted); font-size: .8rem; }

/* Repère réservé à l'administration : ce produit ne serait pas visible
   pour un client, la cascade le retient encore. */
.pz-hidden-note {
	display: block;
	margin-top: 6px;
	padding: 4px 8px;
	border: 1px dashed var(--pz-line);
	border-radius: var(--pz-radius-s);
	font-size: .66rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--pz-muted);
}

/* ---------------------------------------------------------------
   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-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);
}

/* 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(260px, 32vw, 380px); }

/* Rang des rubriques */
.pz-cats--blog { padding-block: 12px; }
.pz-cats__title {
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: var(--pz-muted);
	margin: 0 0 8px;
}
.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);
	/* ⚠ C'EST UN EN-TÊTE, PAS UNE PAGE D'ACCUEIL. À 52/44 px, le bandeau
	   poussait les produits du showroom sous la ligne de flottaison — or
	   c'est eux qu'on vient voir. Ces valeurs ont été coupées deux fois,
	   sur mesure ; ne pas les regonfler « pour aérer ». */
	padding: 18px 0 18px;
}

/* ---- 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: 24px;
	align-items: start;
}

.pz-room__kicker {
	font-size: .74rem;
	text-transform: uppercase;
	letter-spacing: .2em;
	color: var(--pz-muted);
	margin: 0 0 2px;
}

.pz-room__title {
	font-size: clamp(1.9rem, 4.6vw, 2.9rem);
	line-height: 1.04;
	text-transform: uppercase;
	margin: 0 0 8px;
	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: 52ch; margin: 0 0 12px; font-size: .94rem; }

.pz-room__perks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px 18px;
}

.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-flash); }
.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; }

/* Le bouton d'abonnement à la salle Star.
   Il porte l'or de la salle, pas la couleur de la salle où se trouve le
   visiteur : c'est ailleurs qu'il l'emmène, et ça doit se voir au premier
   coup d'œil, y compris en salle rose. La teinte vient de l'attribut posé
   par zestyle_room_attr() sur la salle Star, jamais d'un jaune écrit ici. */
.pz-room__starbtn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	border-radius: 999px;
	border: 1px dashed var(--pz-accent, #ffd54a);
	color: var(--pz-accent, #ffd54a);
	background: color-mix(in srgb, var(--pz-accent, #ffd54a) 10%, transparent);
	font-size: .74rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	text-decoration: none;
	transition:
		border-color var(--pz-dur) var(--pz-ease),
		background   var(--pz-dur) var(--pz-ease),
		box-shadow   var(--pz-dur) var(--pz-ease);
}

/* En clair, l'or fluo sur fond pâle devient illisible : on passe à l'encre
   assombrie de la salle, comme partout ailleurs dans le thème. */
:root[data-pz-theme="light"] .pz-room__starbtn {
	color: var(--pz-accent-ink, #8a6200);
	border-color: var(--pz-accent-ink, #8a6200);
}

/* Seule la version cliquable réagit : un bouton inerte qui s'allume au
   survol promet une page qui n'existe pas. */
.pz-room__starbtn--link:hover,
.pz-room__starbtn--link:focus-visible {
	border-style: solid;
	background: color-mix(in srgb, var(--pz-accent, #ffd54a) 18%, transparent);
}

:root:not([data-pz-theme="light"]) .pz-room__starbtn--link:hover,
:root:not([data-pz-theme="light"]) .pz-room__starbtn--link:focus-visible {
	box-shadow: 0 0 18px -4px var(--pz-accent, #ffd54a);
}

@media (max-width: 560px) {
	.pz-room__starbtn { font-size: .68rem; padding: 11px 16px; }
}

/* ---- Le panneau « next prism drop » ----
   Il a remplacé l'encart de progression, qui répétait la barre de parcours
   désormais présente en haut de toutes les pages. */
.pz-room__drop {
	position: relative;
	/* ⚠ COUCHÉ, PAS EMPILÉ. En colonne (titre, prisme, anneau), le panneau
	   faisait 250 px de haut — et comme c'est la plus haute des deux
	   colonnes, il creusait un vide de cent pixels sous les avantages, à
	   gauche. Côte à côte, il tombe à la moitié et le bandeau avec lui. */
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 6px 16px;
	padding: 14px 18px;
	border: 1px solid var(--pz-line);
	border-radius: var(--pz-radius-l);
	background: color-mix(in srgb, var(--pz-bg) 72%, transparent);
}

.pz-room__drop .pz-room__label { grid-column: 1 / -1; }

/* La marque, à la couleur de la salle : pas de visuel du produit, ce
   serait dévoiler ce qu'on annonce. */
.pz-room__dropmark {
	width: 56px;
	height: 56px;
	display: grid;
	place-items: center;
	color: var(--pz-accent, var(--pz-ink));
}

.pz-room__dropmark .pz-mark { width: 100%; height: auto; }

:root[data-pz-theme="light"] .pz-room__dropmark { color: var(--pz-accent-ink, var(--pz-ink)); }

.pz-timer--drop { flex-direction: row; align-items: center; gap: 12px; }
.pz-timer--drop .pz-timer__ring { width: 58px; height: 58px; flex: 0 0 auto; }
.pz-timer--drop .pz-timer__label { font-size: .9rem; color: var(--pz-ink); text-align: left; }

/* Les boutons, sous les DEUX colonnes. */
.pz-room__inner .pz-room__actions {
	grid-column: 1 / -1;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--pz-line-soft);
}

/* 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) {
	/* ⚠ minmax(0, 1fr) et non 1fr : une case de grille refuse par défaut de
	   devenir plus étroite que son contenu, et la bande d'avantages qui
	   glisse mesure près de trois écrans. En « 1fr » elle poussait toute la
	   page de travers au lieu de défiler dans sa propre boîte. */
	.pz-room__inner { grid-template-columns: minmax(0, 1fr); }
	.pz-room__inner > * { min-width: 0; }
	/* ⚠ LES AVANTAGES DEFILENT, ILS NE S'EMPILENT PLUS. Empilés, trois
	   avantages prenaient deux cents pixels de haut — sur un téléphone,
	   c'est le bandeau entier. En bande qui glisse, ils tiennent sur une
	   ligne et restent tous accessibles d'un pouce.

	   ⚠ PAS DE DIAPORAMA AUTOMATIQUE, ET PAS SUR GRAND ÉCRAN : ce sont les
	   ARGUMENTS de la salle. Sur un écran large ils tiennent tous les trois,
	   donc ils restent tous les trois — en cacher deux derrière un geste que
	   personne ne fait, ce serait les perdre. Ici, c'est la place qui manque,
	   pas l'attention. Et un défilement natif se manipule sans JavaScript. */
	.pz-room__perks {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 12px;
		padding-bottom: 6px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.pz-room__perks::-webkit-scrollbar { display: none; }

	.pz-room__perks li {
		/* 78 % : le voisin dépasse volontairement du bord droit. C'est ce
		   bout visible qui dit qu'il y en a d'autres — sans lui, personne
		   ne devine qu'on peut glisser. */
		flex: 0 0 78%;
		scroll-snap-align: start;
		padding: 12px 14px;
		border: 1px solid var(--pz-line-soft);
		border-radius: var(--pz-radius-s);
		background: color-mix(in srgb, var(--pz-bg) 55%, transparent);
	}

	.pz-room__perks strong { font-size: .95rem; }
	.pz-room__perks em { font-size: .86rem; }
	.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; }

/* ---------------------------------------------------------------
   LES RÉSEAUX, DEUX TAILLES SELON L'ENDROIT (19/09/2026).

   En haut, ils accompagnent le menu : petits, discrets, ils ne doivent
   pas concurrencer les onglets. En bas, ils tiennent compagnie à la
   marque dans un espace large et vide : c'est le dernier endroit de la
   page, celui où l'on cherche où nous suivre — ils ont le droit d'être
   vus.

   ⚠ Aucun ne s'affiche sans adresse renseignée ET interrupteur allumé :
   cela se décide en PHP (zestyle_socials()), pas ici.
   --------------------------------------------------------------- */
.pz-social--head { gap: 6px; margin-right: 4px; }
.pz-social--head a { width: 30px; height: 30px; border-radius: 8px; }
.pz-social--head svg { width: 15px; height: 15px; }

.pz-social--big { gap: 12px; margin-top: 16px; }
.pz-social--big a { width: 46px; height: 46px; border-radius: 12px; }
.pz-social--big svg { width: 24px; height: 24px; }

/* ⚠ PAS DE RÉSEAUX DANS L'EN-TÊTE SUR TÉLÉPHONE. À 390 px, la barre
   porte déjà le menu, le logo, la loupe et le bouton clair/sombre :
   trois logos de plus la feraient déborder ou rapetisser le logo. Ils
   restent au pied de page, en grand, où on les trouve très bien. */
@media (max-width: 900px) {
	.pz-social--head { display: none; }
}

/* Les étiquettes du pied de page (inc/tags.php) : la place restée libre
   entre les colonnes et la ligne de crédit. */
.pz-footer__tags {
	border-top: 1px solid var(--pz-line-soft);
	padding: 18px 0 4px;
}

.pz-footer__tags .pz-footer__title { margin-bottom: 12px; }

.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;
}

/* =========================================================
   BANDEAU DE TITRE DE PAGE (Shop, Blog, archives)
   Le fond reste sombre — c'est un titre, pas une bannière — mais un
   filet des quatre couleurs court en haut, et un souffle coloré dérive
   lentement derrière le titre. Assez pour qu'on sente la marque.
   ========================================================= */
.pz-shop-head,
.pz-blog-hero {
	position: relative;
	overflow: hidden;
}

/* Le filet du haut : les quatre teintes des showrooms, qui glissent. */
.pz-shop-head::after,
.pz-blog-hero::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #00ffa3, #00f0ff, #ff00c8, #ffd54a, #00ffa3);
	background-size: 300% 100%;
	animation: pz-slide 14s linear infinite;
	pointer-events: none;
	z-index: 2;
}

/* Le souffle derrière le titre. En mode clair il s'éclaircit au lieu de
   s'allumer : un néon sur blanc devient une tache grise. */
.pz-shop-head::before {
	content: "";
	position: absolute;
	inset: -60% 40% -60% -20%;
	background: radial-gradient(ellipse at 30% 50%, rgba(0, 240, 255, .30), transparent 66%);
	animation: pz-drift 22s ease-in-out infinite alternate;
	pointer-events: none;
}

:root[data-pz-theme="light"] .pz-shop-head::before {
	background: radial-gradient(ellipse at 30% 50%, rgba(0, 240, 255, .22), transparent 70%);
}

.pz-shop-head > *,
.pz-blog-hero > * { position: relative; z-index: 1; }

/* Le titre de la boutique reprend le dégradé du journal : les deux pages
   se répondent. */
.pz-shop-title {
	background: linear-gradient(92deg, #00ffa3, #00f0ff 35%, #ff00c8 68%, #ffd54a);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: pz-slide 18s linear infinite;
}

:root[data-pz-theme="light"] .pz-shop-title {
	background: linear-gradient(92deg, #008655, #00828a 32%, #d900aa 64%, #927000);
	/* ⚠ La propriété raccourcie « background » REMET À ZÉRO la découpe :
	   sans ces trois lignes, le dégradé se peint en rectangle derrière un
	   texte redevenu opaque, et rien ne défile. Mesuré, pas supposé. */
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	background-size: 200% 100%;
}

@keyframes pz-slide {
	from { background-position: 0% 50%; }
	to   { background-position: 300% 50%; }
}

@keyframes pz-drift {
	from { transform: translateX(-6%); }
	to   { transform: translateX(10%); }
}

@media (prefers-reduced-motion: reduce) {
	.pz-shop-head::after,
	.pz-blog-hero::after,
	.pz-shop-head::before,
	.pz-blog-hero::before,
	.pz-shop-title,
	.pz-blog-hero__title { animation: none; }
}

/* =========================================================
   ÉCRANS TACTILES : la couleur ne peut plus attendre le survol
   Sur un téléphone, personne ne survole : une carte qui ne s'allume
   qu'au pointeur reste éteinte pour de bon. On pose donc la couleur
   en permanence — celle du showroom quand on y est, les quatre
   teintes ailleurs.
   ========================================================= */
@media (hover: none) {
	.pz-post,
	.pz-mini,
	.pz-halfcard,
	.pz-big,
	.pz-level {
		border-color: var(--pz-ink);
	}

	:root:not([data-pz-theme="light"]) .pz-post,
	:root:not([data-pz-theme="light"]) .pz-mini,
	:root:not([data-pz-theme="light"]) .pz-halfcard,
	:root:not([data-pz-theme="light"]) .pz-big {
		box-shadow: 0 0 12px -4px color-mix(in srgb, var(--pz-accent) 65%, transparent);
	}

	/* Les produits, hors showroom : le filet prend les quatre couleurs. */
	.pz-product {
		border: 1px solid transparent;
		background:
			linear-gradient(var(--pz-surface), var(--pz-surface)) padding-box,
			linear-gradient(125deg, #00ffa3, #00f0ff 34%, #ff00c8 68%, #ffd54a) border-box;
	}

	/* Dans un showroom, c'est SA couleur qui borde — on est chez lui. */
	#pz-room-pieces .pz-product,
	.pz-next .pz-soon {
		background: var(--pz-surface);
		border: 1px solid var(--pz-ink);
	}

	:root:not([data-pz-theme="light"]) #pz-room-pieces .pz-product,
	:root:not([data-pz-theme="light"]) .pz-next .pz-soon {
		box-shadow: 0 0 14px -4px color-mix(in srgb, var(--pz-accent) 70%, transparent);
	}
}

/* =========================================================
   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; }

	/* ⚠ INDISPENSABLE. Toute la mécanique de remplissage ci-dessus n'a de
	   sens que sur deux colonnes, où le blog s'aligne sur la hauteur des
	   produits. Sur une seule colonne il n'y a plus rien à partager : les
	   cartes partaient d'une base nulle et, comme elles sont en « overflow:
	   hidden », CSS désactive leur taille minimale automatique — elles
	   tombaient à deux pixels de haut, invisibles. On coupe donc le
	   remplissage et chacune reprend sa hauteur naturelle. */
	.pz-spotlight__products,
	.pz-spotlight__blog { flex: 0 0 auto; }

	.pz-spotlight__blog .pz-feature {
		flex: 0 0 auto;
		height: auto;
		max-height: none;
	}
	/* ⚠ Plus de repli en colonnes : le rang est une LIGNE qui glisse
	   (19/09/2026). Les pastilles se resserrent un peu, c'est tout. */
	.pz-cats__row > .pz-cat { min-width: 76px; padding: 8px 4px; }
	.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; }

	/* ⚠ Le flou du fond de l'en-tête doit disparaître ici.
	   backdrop-filter crée un BLOC CONTENEUR pour les descendants en
	   position:fixed : le tiroir, qui vit dans l'en-tête, se retrouvait
	   ancré sur lui — 108 px de haut au lieu de tout l'écran, tronqué,
	   avec sa croix et le premier lien qui dépassaient. Sur téléphone,
	   un en-tête opaque vaut de toute façon mieux qu'un flou coûteux. */
	.pz-header {
		backdrop-filter: none;
		background: var(--pz-bg);
	}

	/* 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); box-shadow: -20px 0 60px -20px rgba(0, 0, 0, .8); }
	.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 > .pz-cat { min-width: 70px; }
	.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; }

	/* Barre du blog : les filtres défilent, la recherche prend la ligne.

	   ⚠ LE `min-width: 0` N'EST PAS DÉCORATIF (21/09/2026). Un élément
	   flex reçoit `min-width: auto`, c'est-à-dire « au moins la largeur de
	   mon contenu ». La rangée de rubriques, en `nowrap`, réclamait donc
	   la somme de toutes ses pastilles — 489 px mesurés sur un écran de
	   390 — et son `overflow-x: auto` ne servait à rien : il n'y avait
	   plus rien à faire défiler puisque la boîte avait grandi. La barre
	   entière s'élargissait, la recherche avec, et toute la page suivait.
	   Mesuré au navigateur, pas deviné. */
	.pz-blog-bar { flex-direction: column; align-items: stretch; min-width: 0; }
	.pz-blog-bar__cats {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
		min-width: 0;
		max-width: 100%;
	}
	.pz-blog-bar__cats .pz-chip { flex: 0 0 auto; }
	.pz-blog-search { min-width: 0; max-width: 100%; }
	.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;
	/* QUATRE quarts depuis le 29/08/2026 : qui je suis · où j'en suis ·
	   ce que ça me donne · ce qui suit. L'identité ouvre la lecture, elle
	   est donc la plus étroite : c'est un repère, pas le sujet. */
	grid-template-columns: .85fr 1.4fr 1.2fr .9fr;
	gap: 0;
	align-items: stretch;
}

/* ---- Le repli sur téléphone ----
   Sur grand écran, la ligne repliée n'existe pas et le <details> se
   comporte comme une simple boîte : rien à ouvrir, rien à fermer. */
.pz-journey__fold { display: block; }
.pz-journey__peek { display: none; }

/* Le triangle par défaut du navigateur est retiré : on pose notre propre
   chevron, qui pivote. Les deux notations sont nécessaires — WebKit
   n'écoute que la sienne. */
.pz-journey__peek::-webkit-details-marker { display: none; }
.pz-journey__peek { list-style: none; }

/* Au bout du parcours, le quart « palier suivant » disparaît : les trois
   restants se repartagent la largeur au lieu de laisser une case vide.
   ⚠ Cette règle pesant plus lourd que « .pz-journey__inner » seul, elle
   écrasait les points de rupture et gardait trois colonnes sur un
   téléphone : elle est donc reprise à CHAQUE palier ci-dessous. */
.pz-journey--end .pz-journey__inner { grid-template-columns: .9fr 1.5fr 1.3fr; }

/* ---- 1er quart : l'identité ---- */
.pz-journey__who {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 22px 24px;
	border-right: 1px solid var(--pz-line-soft);
}

.pz-journey__id { display: flex; align-items: center; gap: 12px; min-width: 0; }

.pz-journey__avatar {
	width: 52px;
	height: 52px;
	border-radius: 999px;
	border: 2px solid var(--pz-accent, var(--pz-line));
	flex: 0 0 auto;
}

.pz-journey__name { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pz-journey__name strong { font-size: 1.02rem; color: var(--pz-text); }
.pz-journey__out { font-size: .82rem; color: var(--pz-muted); text-decoration: none; }
.pz-journey__out:hover { color: var(--pz-ink); }

/* Le bouton d'accès au showroom, sous la jauge. */
.pz-journey__go { margin-top: 14px; align-self: flex-start; }

.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-flash); 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) {
	/* Quatre quarts ne tiennent pas sous 900 px : on passe à deux, et
	   l'identité reste en tête — c'est elle qui dit à qui parle la barre. */
	.pz-journey__inner,
	.pz-journey--end .pz-journey__inner { grid-template-columns: 1fr 1fr; }
	.pz-journey__who { border-right: none; border-bottom: 1px solid var(--pz-line-soft); }
	.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,
	.pz-journey--end .pz-journey__inner { grid-template-columns: 1fr; }

	/* ⚠ LA BARRE SE REPLIE ICI, ET C'EST INDISPENSABLE : déployée, elle
	   occupe un écran entier — et elle est désormais sur TOUTES les pages,
	   donc au-dessus de tout ce que le visiteur venait lire. */
	.pz-journey__peek {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 12px 20px;
		cursor: pointer;
	}

	.pz-journey__miniav {
		width: 36px;
		height: 36px;
		border-radius: 999px;
		border: 2px solid var(--pz-accent, var(--pz-line));
		flex: 0 0 auto;
	}

	.pz-journey__peektext { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1 1 auto; }
	.pz-journey__peektext strong { font-size: 1rem; color: var(--pz-text); }
	.pz-journey__peekpts { font-size: .9rem; color: var(--pz-muted); white-space: nowrap; }

	.pz-journey__chev { width: 20px; height: 20px; flex: 0 0 auto; color: var(--pz-muted); transition: transform var(--pz-dur) var(--pz-ease); }
	.pz-journey__chev svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 2.2; }

	/* Le chevron pointe vers le bas quand c'est replié, vers le haut une
	   fois ouvert : le geste se lit avant d'être fait. */
	.pz-journey__fold:not([open]) .pz-journey__chev { transform: rotate(90deg); }
	.pz-journey__fold[open] .pz-journey__chev { transform: rotate(-90deg); }

	/* Déployée, l'identité ne se répète pas : la ligne repliée la porte déjà. */
	.pz-journey__fold[open] .pz-journey__id { display: none; }
	.pz-journey__fold[open] .pz-journey__who { padding-top: 0; }
	.pz-journey__benefits { border-left: none; border-top: 1px solid var(--pz-line-soft); }
	.pz-journey__benefits ul { flex-direction: column; gap: 12px; }

	/* En une colonne, l'identité s'étale en ligne : avatar, pseudo et
	   boutons côte à côte, plutôt qu'une colonne de quatre étages qui
	   repousse la jauge sous la ligne de flottaison. */
	.pz-journey__who { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
	.pz-journey__id { flex: 1 1 100%; }
	.pz-journey__go { width: 100%; text-align: center; margin-top: 10px; }
}

/* =========================================================
   15. WOOCOMMERCE
   WooCommerce sort ses listes en <ul class="products"><li>.
   On les remet dans la même grille que le reste du thème, pour
   que la boutique et l'accueil montrent la même carte.
   ========================================================= */
ul.products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--pz-gap);
}

ul.products li.product { display: flex; margin: 0; }
ul.products li.product > .pz-product { width: 100%; }

/* ⚠ NE PAS SUPPRIMER — sans ce bloc, la boutique s'écrase en colonne.
   La feuille de WooCommerce dispose ses listes à l'ancienne, en flottants :
   « li.product { float: left; width: 22.05% } ». Ses sélecteurs commencent
   par « .woocommerce », donc ils sont plus forts que les nôtres et ce 22 %
   se recalcule À L'INTÉRIEUR de notre case de grille — d'où une carte de
   cinquante pixels. Ses ::before/::after de dégagement, eux, deviennent des
   cases de grille à part entière et décalent le premier produit d'un cran.
   On neutralise donc les deux — et le préfixe « body » n'est pas décoratif :
   à poids égal, c'est la feuille chargée en dernier qui gagne, et ce n'est
   pas la nôtre. Ce sélecteur d'élément en plus nous fait passer devant. */
body.woocommerce ul.products::before,
body.woocommerce ul.products::after,
body.woocommerce-page ul.products::before,
body.woocommerce-page ul.products::after {
	content: none;
	display: none;
}

/* Le « [class] » compte aussi : sous 768 px, WooCommerce charge une 2e
   feuille (woocommerce-smallscreen.css) écrite
   « .woocommerce ul.products[class*=columns-] li.product { width: 48% } ».
   Son sélecteur d'attribut la rendait plus forte que ce bloc : chaque carte
   ne prenait plus que la moitié de sa case, sur téléphone seulement. */
body.woocommerce ul.products[class] li.product,
body.woocommerce-page ul.products[class] li.product {
	float: none;
	clear: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}

body.woocommerce ul.products li.product a img,
body.woocommerce-page ul.products li.product a img { margin: 0; box-shadow: none; }

.woocommerce-result-count { color: var(--pz-muted); font-size: .84rem; margin: 0; }

.woocommerce-ordering select,
.woocommerce-widget-layered-nav-dropdown select,
.pz-shop-main select {
	padding: 9px 14px;
	border-radius: 999px;
	border: 1px solid var(--pz-line);
	background: var(--pz-surface);
	color: var(--pz-text);
}

.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
	list-style: none;
	margin: 0 0 20px;
	padding: 14px 18px;
	border-radius: var(--pz-radius-s);
	border: 1px solid var(--pz-ink);
	background: var(--pz-surface);
	font-size: .9rem;
}

.woocommerce-notices-wrapper .woocommerce-error { border-color: var(--pz-magenta); }

.woocommerce-pagination ul {
	list-style: none;
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: 34px 0;
	margin: 0;
	flex-wrap: wrap;
}

.woocommerce-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);
}

.woocommerce-pagination .page-numbers:hover { border-color: var(--pz-ink); color: var(--pz-ink); }
.woocommerce-pagination .page-numbers.current { background: var(--pz-ink); border-color: var(--pz-ink); color: var(--pz-inverse); }

/* Fiche produit

   ⚠ PAS DEUX COLONNES ÉGALES (corrigé le 18/09/2026). À parts égales, la
   photo prenait la moitié de l'écran et le titre se retrouvait dans une
   colonne si étroite qu'il descendait en escalier sur six lignes. Or sur
   une fiche, ce qu'on vient lire — le nom, le prix, le bouton — est à
   droite. La photo est donc bornée, le texte prend tout le reste. */
.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
	gap: 44px;
	align-items: start;
	padding: 20px 0 40px;
}

.single-product div.product .woocommerce-product-gallery { grid-column: 1; }
.single-product div.product .summary { grid-column: 2; }
.single-product div.product .woocommerce-tabs,
.single-product div.product .related,
.single-product div.product .up-sells { grid-column: 1 / -1; }

/* ⚠ Le titre suivait la largeur de l'ÉCRAN (3.4vw) alors qu'il vit dans une
   colonne : sur un grand écran il montait à 42 px dans une demi-page, d'où
   l'escalier. Pente plus douce et plafond plus bas. */
.single-product div.product .product_title { font-size: clamp(1.35rem, 2.1vw, 1.95rem); line-height: 1.16; margin-bottom: 12px; }
.single-product div.product .price { font-size: 1.5rem; font-weight: 700; color: var(--pz-text); }
.single-product div.product .price del { color: var(--pz-muted); font-weight: 400; }
.single-product div.product .price ins { text-decoration: none; color: var(--pz-magenta); }

/* ⚠ ON N'AGRANDIT JAMAIS UNE PHOTO AU-DELÀ DE SA TAILLE RÉELLE. WooCommerce
   pose « width: 100% » sur l'image de la galerie : une jaquette de 275 px de
   large était étirée à 440 px sur téléphone — plus grosse ET plus floue, pour
   rien. « width: auto » la laisse à sa taille, « max-width » l'empêche de
   déborder, et le plafond de hauteur évite qu'une photo en hauteur mange
   l'écran avant le prix et le bouton.

   ⚠⚠ ET C'EST UNE BAGARRE DE PRIORITÉ, PAS UN RÉGLAGE (corrigé le
   18/09/2026). La règle de WooCommerce — « .woocommerce div.product
   div.images img » — compte TROIS classes ; la nôtre n'en comptait que
   trois aussi, mais arrivait avec autant d'éléments en moins : c'est donc
   SON « width: 100% » qui passait, pendant que notre « max-height »
   passait, lui, sans opposition. Largeur imposée d'un côté, hauteur bridée
   de l'autre : la jaquette était écrasée en carré. D'où deux parades, et
   les deux sont nécessaires :

     1. « .woocommerce.single-product » en tête — quatre classes, la règle
        repasse devant celle de WooCommerce et « width: auto » s'applique ;
     2. « object-fit: contain » — la ceinture. Même si une extension
        reprenait un jour la main sur la largeur, l'image se poserait
        ENTIÈRE dans la case au lieu de s'y déformer. Une photo peut être
        recadrée, jamais étirée.

   ⚠ Ne pas retirer le sélecteur court : il sert de repli si le corps de
   page ne porte pas la classe « woocommerce ». */
.single-product div.product .woocommerce-product-gallery img,
.single-product div.product .woocommerce-product-gallery__image img,
.woocommerce.single-product div.product .woocommerce-product-gallery img,
.woocommerce.single-product div.product .woocommerce-product-gallery__image img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: min(58vh, 420px);
	object-fit: contain;
	margin-inline: auto;
	display: block;
	border-radius: var(--pz-radius);
}

.woocommerce-tabs ul.tabs {
	list-style: none;
	display: flex;
	gap: 8px;
	padding: 0;
	margin: 0 0 20px;
	border-bottom: 1px solid var(--pz-line);
	flex-wrap: wrap;
}

.woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 10px 16px;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--pz-muted);
	border-bottom: 2px solid transparent;
	transition: color var(--pz-dur) var(--pz-ease), border-color var(--pz-dur) var(--pz-ease);
}

.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover { color: var(--pz-ink); border-bottom-color: var(--pz-ink); }

/* Boutons WooCommerce : on leur donne l'allure des nôtres */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.wc-block-components-button {
	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);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.wc-block-components-button:hover {
	background: var(--pz-ink);
	color: var(--pz-inverse);
	transform: translateY(-2px);
}

:root:not([data-pz-theme="light"]) .woocommerce a.button:hover,
:root:not([data-pz-theme="light"]) .woocommerce button.button:hover {
	box-shadow: 0 0 18px 1px color-mix(in srgb, var(--pz-accent) 50%, transparent);
}

/* Champs de formulaire (commande, compte, avis) */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce table.cart td.actions .coupon .input-text {
	padding: 11px 14px;
	border-radius: var(--pz-radius-s);
	border: 1px solid var(--pz-line);
	background: var(--pz-surface);
	color: var(--pz-text);
	width: 100%;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus { outline: none; border-color: var(--pz-ink); }

/* Panier et commande */
.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--pz-line);
	border-radius: var(--pz-radius);
	overflow: hidden;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 14px;
	border-bottom: 1px solid var(--pz-line-soft);
	text-align: left;
}

.woocommerce table.shop_table th { font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: var(--pz-muted); }

.woocommerce .quantity input.qty {
	width: 72px;
	padding: 9px;
	text-align: center;
	border-radius: 999px;
	border: 1px solid var(--pz-line);
	background: var(--pz-surface);
	color: var(--pz-text);
}

/* Étiquette « promo » native, alignée sur la nôtre */
.woocommerce span.onsale {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--pz-magenta);
	color: #fff;
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

@media (max-width: 1080px) {
	ul.products { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
	.single-product div.product { grid-template-columns: 1fr; gap: 26px; }
	.single-product div.product .woocommerce-product-gallery,
	.single-product div.product .summary { grid-column: 1; }

	/* ⚠ EN UNE COLONNE, LA GALERIE DOIT ÊTRE BRIDÉE. Sans cela elle passe
	   de la moitié de la page à sa totalité : à 899 px la photo du produit
	   était DEUX FOIS plus grande qu'à 901 px, et mangeait l'écran avant le
	   prix et le bouton. Bornée puis centrée, elle garde la taille qu'elle
	   avait juste avant le repli. */
	.single-product div.product .woocommerce-product-gallery {
		/* 300 et non 440 : sur un téléphone, 440 px de photo, c'est tout
		   l'écran avant d'avoir lu le nom du produit. */
		max-width: 300px;
		margin-inline: auto;
	}

	.single-product div.product .woocommerce-product-gallery img,
	.single-product div.product .woocommerce-product-gallery__image img,
	.woocommerce.single-product div.product .woocommerce-product-gallery img,
	.woocommerce.single-product div.product .woocommerce-product-gallery__image img {
		/* ⚠ La largeur reste « auto » (héritée de la règle principale) : ce
		   plafond ne doit JAMAIS être le seul à mordre, sinon l'image
		   s'écrase — c'est le bug du 18/09/2026. */
		max-height: min(42vh, 340px);
	}
}

@media (max-width: 680px) {
	ul.products { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 460px) {
	ul.products { grid-template-columns: 1fr; }
}

/* =========================================================
   PLAN DU SITE
   Beaucoup de liens, donc peu d'ornement : des colonnes qui
   se remplissent seules, et des listes qui restent lisibles
   même à deux cents entrées.
   ========================================================= */
.pz-plan {
	/* Des colonnes de texte, pas une grille : les blocs n'ont pas la même
	   hauteur, et une grille laisserait un grand trou à droite du bloc le
	   plus long. En colonnes, ils s'empilent et remplissent la page. */
	column-width: 260px;
	column-gap: 40px;
	padding-bottom: 20px;
}

.pz-plan__block {
	break-inside: avoid;
	page-break-inside: avoid;
	margin: 0 0 30px;
}

.pz-plan__title {
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .14em;
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--pz-line);
	color: var(--pz-plan-hue, var(--pz-ink));
}

/* Les quatre couleurs des showrooms, dans l'ordre, en boucle : le plan du
   site parle la même langue que le reste du thème. */
.pz-plan__block:nth-child(4n + 1) { --pz-plan-hue: #00ffa3; }
.pz-plan__block:nth-child(4n + 2) { --pz-plan-hue: #00f0ff; }
.pz-plan__block:nth-child(4n + 3) { --pz-plan-hue: #ff00c8; }
.pz-plan__block:nth-child(4n + 4) { --pz-plan-hue: #ffd54a; }

:root[data-pz-theme="light"] .pz-plan__title { color: var(--pz-text); }

:root[data-pz-theme="light"] .pz-plan__title {
	border-bottom-color: var(--pz-plan-hue, var(--pz-line));
}

.pz-plan__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pz-plan__list li { line-height: 1.35; }

.pz-plan__list a {
	font-size: .93rem;
	color: var(--pz-muted);
	text-decoration: none;
	transition: color var(--pz-dur) var(--pz-ease);
}

.pz-plan__list a:hover,
.pz-plan__list a:focus-visible { color: var(--pz-ink); }

.pz-plan__xml { font-size: .85rem; color: var(--pz-muted); margin: 8px 0 0; }
.pz-plan__xml a { color: var(--pz-ink); }

.pz-plan-link {
	font-size: .84rem;
	color: var(--pz-muted);
	text-decoration: none;
	transition: color var(--pz-dur) var(--pz-ease);
}

.pz-plan-link:hover,
.pz-plan-link:focus-visible { color: var(--pz-ink); }

@media (max-width: 560px) {
	.pz-plan { column-width: auto; columns: 1; }
}

/* =========================================================
   ESPACE CLIENT (WooCommerce)
   WooCommerce sort ici son propre balisage : un menu à gauche,
   le contenu à droite, et — hors connexion — deux colonnes
   « u-column1 / u-column2 » qu'il dispose encore en flottants.
   Mêmes précautions que pour la grille produits : nos règles
   sont préfixées par « body » pour passer devant sa feuille.
   ========================================================= */
.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: 232px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
	padding-bottom: 20px;
}

/* ⚠ NE PAS SUPPRIMER — sans ces trois règles, le menu du compte tombe à
   soixante-dix pixels de large. Même cause que la grille produits : la
   feuille de WooCommerce dispose l'espace client en flottants (« menu 30 %,
   contenu 68 % ») et ces pourcentages se recalculent À L'INTÉRIEUR de nos
   cases de grille. Ses ::after de dégagement, eux, deviennent des cases à
   part entière. Le préfixe « body » nous fait passer devant sa feuille. */
body.woocommerce-account .woocommerce::before,
body.woocommerce-account .woocommerce::after {
	content: none;
	display: none;
}

body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
}

/* Connexion et inscription : pas de menu, donc pleine largeur. */
.woocommerce-account.woocommerce-page:not(.logged-in) .woocommerce { display: block; }

/* ---- Le menu de l'espace client ---- */
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 11px 14px;
	border-radius: 12px;
	border: 1px solid transparent;
	font-size: .92rem;
	color: var(--pz-muted);
	text-decoration: none;
	transition: color var(--pz-dur) var(--pz-ease), border-color var(--pz-dur) var(--pz-ease), background var(--pz-dur) var(--pz-ease);
}

.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li a:focus-visible {
	color: var(--pz-ink);
	border-color: var(--pz-line);
}

.woocommerce-MyAccount-navigation li.is-active a {
	color: var(--pz-ink);
	background: var(--pz-surface);
	border-color: var(--pz-ink);
}

/* La déconnexion se distingue du reste : ce n'est pas une rubrique. */
.woocommerce-MyAccount-navigation-link--customer-logout a {
	margin-top: 10px;
	border-top: 1px solid var(--pz-line-soft);
	border-radius: 0;
	padding-left: 0;
}

.woocommerce-MyAccount-content > p:first-child { margin-top: 0; }
.pz-account__room-note { color: var(--pz-ink); font-weight: 600; }

/* ---- Connexion / inscription côte à côte ---- */
body.woocommerce-account .col2-set,
body.woocommerce-account .u-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
	width: auto;
}

/* ⚠ MÊME PIÈGE QUE LA GRILLE PRODUITS. Les ::before/::after de dégagement
   de WooCommerce deviennent des cases de grille à part entière : sans cette
   règle, « Se connecter » et « S'inscrire » se retrouvent poussés d'un cran
   vers la droite, avec un grand vide à gauche. */
body.woocommerce-account .col2-set::before,
body.woocommerce-account .col2-set::after,
body.woocommerce-account .u-columns::before,
body.woocommerce-account .u-columns::after {
	content: none;
	display: none;
}

/* Deux formulaires courts n'ont pas besoin de toute la largeur d'un écran
   de bureau : au-delà, les champs deviennent des banderoles. */
#customer_login { max-width: 940px; margin-inline: auto; }

body.woocommerce-account .col2-set .col-1,
body.woocommerce-account .col2-set .col-2,
body.woocommerce-account .u-column1,
body.woocommerce-account .u-column2 {
	float: none;
	width: auto;
	padding: 24px;
	border: 1px solid var(--pz-line);
	border-radius: var(--pz-radius);
	background: var(--pz-surface);
}

/* Les adresses n'ont pas de cadre : elles vivent DANS le contenu. */
body.woocommerce-account .woocommerce-Addresses .u-column1,
body.woocommerce-account .woocommerce-Addresses .u-column2 {
	padding: 20px;
	background: transparent;
}

body.woocommerce-account .col2-set h2,
body.woocommerce-account .u-columns h2,
.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	margin: 0 0 18px;
	color: var(--pz-ink);
}

.woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.woocommerce-Address-title a { font-size: .84rem; color: var(--pz-muted); }
.woocommerce-Address-title a:hover { color: var(--pz-ink); }
.woocommerce-Address address { font-style: normal; line-height: 1.7; color: var(--pz-muted); }

/* ---- Les formulaires ---- */
.woocommerce-form-row,
.woocommerce-form .form-row { margin: 0 0 16px; display: flex; flex-direction: column; gap: 6px; }

.woocommerce-form label,
.woocommerce-EditAccountForm label {
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--pz-muted);
}

.woocommerce-form-login__rememberme,
.woocommerce-form__label-for-checkbox {
	flex-direction: row;
	align-items: center;
	gap: 8px;
	text-transform: none;
	letter-spacing: 0;
}

.woocommerce-form-login__rememberme span,
.woocommerce-form__label-for-checkbox span { font-size: .9rem; }

.woocommerce-EditAccountForm fieldset {
	margin: 26px 0 0;
	padding: 22px;
	border: 1px solid var(--pz-line);
	border-radius: var(--pz-radius);
}

.woocommerce-EditAccountForm legend {
	padding: 0 8px;
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--pz-ink);
}

.woocommerce-password-strength { font-size: .84rem; margin-top: 6px; }
.woocommerce-password-hint,
.woocommerce-form em,
.woocommerce-privacy-policy-text { font-size: .84rem; color: var(--pz-muted); }
.woocommerce-LostPassword { font-size: .88rem; margin: 12px 0 0; }

/* ---- Le tableau des commandes ---- */
.woocommerce-orders-table__cell-order-actions .button { margin: 2px 4px 2px 0; }
.woocommerce-order-details,
.woocommerce-customer-details { margin-top: 34px; }

/* ---- Téléphone et tablette ---- */
@media (max-width: 900px) {
	/* ⚠ minmax(0, 1fr) et non 1fr : une case de grille refuse par défaut de
	   devenir plus étroite que son contenu, et la rangée de pastilles du
	   menu mesure près de sept cents pixels. En « 1fr » elle poussait toute
	   la page hors de l'écran au lieu de défiler dans sa propre boîte. */
	.woocommerce-account .woocommerce { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.woocommerce-MyAccount-navigation,
	.woocommerce-MyAccount-content { min-width: 0; }

	/* Filet de sécurité sur les tableaux. WooCommerce empile lui-même les
	   lignes de « shop_table_responsive » sur petit écran ; s'il ne le fait
	   pas — feuille retirée, tableau d'une extension — le tableau défile
	   dans sa propre boîte au lieu de pousser toute la page de travers. */
	.woocommerce-MyAccount-content,
	.woocommerce-cart-form { overflow-x: auto; }

	/* Le menu redevient une rangée de pastilles qui défile : sur un
	   téléphone, une colonne de sept liens repousserait le contenu
	   sous la ligne de flottaison. */
	.woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 8px;
		padding-bottom: 6px;
		scrollbar-width: none;
	}

	.woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }

	.woocommerce-MyAccount-navigation li a {
		white-space: nowrap;
		border-radius: 999px;
		border-color: var(--pz-line);
		padding: 9px 16px;
	}

	.woocommerce-MyAccount-navigation-link--customer-logout a {
		margin-top: 0;
		border-top: 1px solid var(--pz-line);
		border-radius: 999px;
		padding-left: 16px;
	}
}

@media (max-width: 560px) {
	body.woocommerce-account .col2-set .col-1,
	body.woocommerce-account .col2-set .col-2,
	body.woocommerce-account .u-column1,
	body.woocommerce-account .u-column2 { padding: 18px; }
}

/* =========================================================
   PANIER, COMMANDE, CONFIRMATION
   Le tunnel d'achat, habillé aux mêmes règles que le reste :
   WooCommerce fournit toute la mécanique, on ne touche qu'à
   la mise en page. Ici encore ses flottants passent devant
   les nôtres, d'où les sélecteurs préfixés par « body ».
   ========================================================= */

/* ---- Le panier ---- */
.woocommerce-cart .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 40px;
	align-items: start;
}

body.woocommerce-cart .woocommerce::before,
body.woocommerce-cart .woocommerce::after { content: none; display: none; }

body.woocommerce-cart .woocommerce-cart-form,
body.woocommerce-cart .cart-collaterals {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
}

body.woocommerce-cart .cart-collaterals .cart_totals { float: none; width: auto; }

.cart_totals {
	padding: 24px;
	border: 1px solid var(--pz-line);
	border-radius: var(--pz-radius);
	background: var(--pz-surface);
	position: sticky;
	top: 96px;
}

.cart_totals h2 {
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	margin: 0 0 16px;
	color: var(--pz-ink);
}

.cart_totals table.shop_table { border: none; }
.cart_totals .order-total .amount { font-size: 1.2rem; color: var(--pz-ink); }
.wc-proceed-to-checkout { margin-top: 18px; }
.wc-proceed-to-checkout .button { display: block; width: 100%; text-align: center; }

.woocommerce-cart-form .product-thumbnail img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }
.woocommerce-cart-form td.actions { padding-top: 18px; }
.woocommerce-cart-form td.actions .coupon { display: flex; gap: 8px; flex-wrap: wrap; }
.product-remove a.remove { color: var(--pz-muted); font-size: 1.2rem; text-decoration: none; }
.product-remove a.remove:hover { color: var(--pz-magenta); }

/* ---- La commande ---- */
.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

body.woocommerce-checkout form.checkout::before,
body.woocommerce-checkout form.checkout::after { content: none; display: none; }

/* ⚠ « form.checkout » n'est pas décoratif. Le sélecteur de WooCommerce
   (« .woocommerce .checkout #customer_details ») contient lui aussi
   l'identifiant : à identifiant égal, c'est le nombre de classes qui
   départage, et il en a deux. Sans cette classe en plus, ses « 52 % » et
   « 44 % » se recalculent dans nos cases et la commande se ratatine. */
body.woocommerce-checkout form.checkout #customer_details,
body.woocommerce-checkout form.checkout #order_review,
body.woocommerce-checkout form.checkout #order_review_heading {
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
}

/* Le récapitulatif et son titre forment UNE colonne : le titre se place
   au-dessus du récapitulatif, pas dans une case à lui. */
body.woocommerce-checkout form.checkout #order_review_heading { grid-column: 2; grid-row: 1; align-self: end; }
body.woocommerce-checkout form.checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
body.woocommerce-checkout form.checkout #order_review { grid-column: 2; grid-row: 2; }

.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #customer_details h3 {
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	margin: 0 0 16px;
	color: var(--pz-ink);
}

/* Adresses de facturation et de livraison : l'une sous l'autre, jamais
   deux colonnes de champs serrés dans une demi-largeur. */
body.woocommerce-checkout #customer_details .col2-set,
body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2 {
	display: block;
	float: none;
	width: auto;
	padding: 0;
	border: none;
	background: transparent;
}

body.woocommerce-checkout #customer_details .col-2 { margin-top: 30px; }

.woocommerce-checkout #order_review {
	padding: 24px;
	border: 1px solid var(--pz-line);
	border-radius: var(--pz-radius);
	background: var(--pz-surface);
}

.woocommerce-checkout #payment ul.payment_methods {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	border: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.woocommerce-checkout #payment ul.payment_methods li {
	padding: 12px 14px;
	border: 1px solid var(--pz-line);
	border-radius: 12px;
	background: var(--pz-bg-2);
}

.woocommerce-checkout #payment div.payment_box {
	margin: 10px 0 0;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--pz-surface-2);
	font-size: .88rem;
	color: var(--pz-muted);
}

.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #place_order { width: 100%; margin-top: 8px; }
.woocommerce-terms-and-conditions-wrapper { font-size: .88rem; color: var(--pz-muted); margin-bottom: 14px; }

/* ---- La confirmation ---- */
.woocommerce-order .woocommerce-thankyou-order-received {
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--pz-ink);
	margin: 0 0 20px;
}

ul.woocommerce-thankyou-order-details.order_details {
	list-style: none;
	margin: 0 0 30px;
	padding: 20px;
	border: 1px solid var(--pz-line);
	border-radius: var(--pz-radius);
	background: var(--pz-surface);
	display: flex;
	flex-wrap: wrap;
	gap: 22px 34px;
}

ul.woocommerce-thankyou-order-details li {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: .76rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--pz-muted);
	border: none;
}

ul.woocommerce-thankyou-order-details li strong {
	font-size: 1rem;
	text-transform: none;
	letter-spacing: 0;
	color: var(--pz-text);
}

/* ---- Téléphone et tablette ---- */
@media (max-width: 900px) {
	.woocommerce-cart .woocommerce,
	.woocommerce-checkout form.checkout { grid-template-columns: minmax(0, 1fr); gap: 26px; }

	.cart_totals { position: static; }

	/* En une colonne, l'ordre lu compte : mes informations, puis le
	   récapitulatif, puis le paiement. */
	body.woocommerce-checkout form.checkout #customer_details,
	body.woocommerce-checkout form.checkout #order_review_heading,
	body.woocommerce-checkout form.checkout #order_review { grid-column: 1; grid-row: auto; }
}

@media (max-width: 560px) {
	.cart_totals,
	.woocommerce-checkout #order_review { padding: 18px; }
	.woocommerce-cart-form .product-thumbnail { display: none; }
}

/* =========================================================
   TABLEAU DE BORD DU CLIENT
   Des tuiles, parce qu'il n'y a pas d'ordre de lecture unique :
   l'un vient voir sa commande, l'autre ses points. La tuile
   « progression » prend la couleur du showroom du visiteur.
   ========================================================= */
.pz-dash__hello { font-size: 1.1rem; margin: 0 0 22px; color: var(--pz-text); }

.pz-dash {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
	gap: 20px;
	align-items: start;
	/* « dense » remplit les trous : la tuile des commandes occupe deux
	   colonnes et ne rentre pas toujours dans la place restante ; sans
	   ça, elle passe à la ligne en laissant une case vide derrière elle,
	   et le tableau de bord se lit en escalier. */
	grid-auto-flow: dense;
}

.pz-dash__card {
	padding: 22px;
	border: 1px solid var(--pz-line);
	border-radius: var(--pz-radius);
	background: var(--pz-surface);
}

.pz-dash__card--room { border-color: var(--pz-accent, var(--pz-line)); }
.pz-dash__card--orders { grid-column: span 2; }

.pz-dash__title {
	font-size: .76rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	margin: 0 0 16px;
	color: var(--pz-muted);
}

.pz-dash__card--room .pz-dash__title { color: var(--pz-accent-ink, var(--pz-ink)); }
:root:not([data-pz-theme="light"]) .pz-dash__card--room .pz-dash__title { color: var(--pz-accent, var(--pz-ink)); }

.pz-dash__strong { font-size: 1.02rem; font-weight: 600; margin: 0 0 4px; color: var(--pz-text); }
.pz-dash__note { font-size: .86rem; color: var(--pz-muted); margin: 0 0 10px; }
.pz-dash__next { font-size: .86rem; color: var(--pz-ink); margin: 12px 0 0; }
.pz-dash__room { margin: 0 0 14px; }

/* ---- Les commandes ---- */
.pz-dash__orders { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.pz-dash__orders a {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: baseline;
	gap: 6px 16px;
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid transparent;
	text-decoration: none;
	transition: border-color var(--pz-dur) var(--pz-ease), background var(--pz-dur) var(--pz-ease);
}

.pz-dash__orders a:hover,
.pz-dash__orders a:focus-visible { border-color: var(--pz-line); background: var(--pz-bg-2); }

.pz-dash__order-id { font-weight: 700; color: var(--pz-ink); }
.pz-dash__order-date { font-size: .86rem; color: var(--pz-muted); }

.pz-dash__order-state {
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px solid var(--pz-line);
	color: var(--pz-muted);
	white-space: nowrap;
}

.pz-dash__order-total { font-weight: 600; color: var(--pz-text); white-space: nowrap; }
.pz-dash__more { font-size: .86rem; color: var(--pz-ink); }

/* ---- Listes de liens ---- */
.pz-dash__links,
.pz-dash__services { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.pz-dash__links a,
.pz-dash__services a { color: var(--pz-ink); text-decoration: none; font-size: .93rem; }

.pz-dash__links a:hover,
.pz-dash__services a:hover { text-decoration: underline; }

.pz-dash__services li { display: flex; flex-direction: column; gap: 2px; }
.pz-dash__services .pz-dash__note { margin: 0; font-size: .82rem; }

/* ---- Petits ecrans ---- */
@media (max-width: 900px) {
	.pz-dash { grid-template-columns: minmax(0, 1fr); }
	.pz-dash__card--orders { grid-column: auto; }
}

@media (max-width: 560px) {
	.pz-dash__card { padding: 18px; }

	/* Quatre colonnes sur un telephone rendraient chaque commande
	   illisible : on repasse en deux lignes. */
	.pz-dash__orders a { grid-template-columns: auto 1fr; }
	.pz-dash__order-state { grid-column: 1; justify-self: start; }
	.pz-dash__order-total { grid-column: 2; justify-self: end; }
}

/* =========================================================
   PRISM'HALL — le fil de l'accueil (v2, 29/08/2026)
   Une publication par ligne, comme un vrai fil. Trois étages :
   qui publie · le contenu · la bande d'actions.
   ⚠ L'image change de côté selon le type — à GAUCHE pour un
   produit, à DROITE pour un article. Le balisage, lui, ne
   change pas : c'est l'ordre des colonnes qui bascule, et un
   lecteur d'écran entend toujours le texte en premier.
   ========================================================= */
.pz-hall__head { flex-direction: column; align-items: flex-start; gap: 6px; }
.pz-hall__baseline { margin: 0; color: var(--pz-muted); font-size: .94rem; }

.pz-hall__feed {
	display: flex;
	flex-direction: column;
	gap: var(--pz-gap);
	/* Un fil se lit en colonne : au-delà d'environ 820 px, l'œil doit
	   balayer d'un bord à l'autre pour relier une image à son titre. */
	max-width: 820px;
	margin-inline: auto;
}

.pz-hall__card--product { --pz-kind: var(--pz-cyan); --pz-kind-ink: #00768a; }
.pz-hall__card--post    { --pz-kind: var(--pz-magenta); --pz-kind-ink: #a3007f; }

.pz-hall__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
	/* Deux pixels : assez pour se voir en descendant le fil, pas assez
	   pour transformer la page en grille de cases. */
	border: 2px solid color-mix(in srgb, var(--pz-kind, var(--pz-line)) 55%, transparent);
}

:root[data-pz-theme="light"] .pz-hall__card {
	border-color: color-mix(in srgb, var(--pz-kind-ink, var(--pz-line)) 45%, transparent);
}

/* ---------------------------------------------------------------
   Un article ne se lit pas comme un produit : fond légèrement teinté
   (21/09/2026). Dans un fil où les deux se mêlent par date, le cadre
   coloré ne suffisait pas à les distinguer d'un coup d'œil — surtout
   sur téléphone, où les cartes se suivent en pile.

   Seul l'ARTICLE est teinté : c'est l'écart avec le produit resté neutre
   qui fait repère. Teinter les deux reviendrait à ne rien teinter.

   Assez léger pour ne pas gêner la lecture ni concurrencer le néon :
   la teinte se remarque en parcourant, pas en regardant une carte seule.
   ------------------------------------------------------------ */
/* ⚠ Deux corrections du 21/09/2026, après essai sur le site réel :

   1. La carte porte un fond, mais ses enfants le RECOUVRENT — la barre du
      bas est opaque (`--pz-bg-2`) et le visuel occupe le reste. Il ne
      restait que de minces bandes teintées : on ne voyait rien. La barre
      est donc teintée elle aussi, pour que la carte entière se lise.
   2. Chaque `background` est doublé d'une couleur en dur AVANT le
      color-mix : un navigateur qui ne connaît pas `color-mix` jette la
      déclaration entière et ne montre plus aucune teinte, ni en clair ni
      en sombre. La ligne du dessus prend alors le relais. */

.pz-hall__card--post {
	background: #2f1132;
	background: color-mix(in srgb, var(--pz-magenta) 12%, var(--pz-surface));
}

.pz-hall__card--post .pz-hall__bar {
	background: #2a0b2a;
	background: color-mix(in srgb, var(--pz-magenta) 12%, var(--pz-bg-2));
}

/* En clair, le magenta pur virerait au rose bonbon : on passe par son
   encre, plus sourde, et plus discrètement. */
:root[data-pz-theme="light"] .pz-hall__card--post {
	background: #f8ebf5;
	background: color-mix(in srgb, var(--pz-kind-ink) 8%, var(--pz-surface));
}

:root[data-pz-theme="light"] .pz-hall__card--post .pz-hall__bar {
	background: #e6d9eb;
	background: color-mix(in srgb, var(--pz-kind-ink) 8%, var(--pz-bg-2));
}

.pz-hall__card:hover,
.pz-hall__card:focus-within { border-color: var(--pz-kind, var(--pz-ink)); }

:root[data-pz-theme="light"] .pz-hall__card:hover,
:root[data-pz-theme="light"] .pz-hall__card:focus-within {
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--pz-kind) 45%, transparent),
		0 8px 24px -8px color-mix(in srgb, var(--pz-kind) 50%, transparent);
}

:root:not([data-pz-theme="light"]) .pz-hall__card:hover,
:root:not([data-pz-theme="light"]) .pz-hall__card:focus-within {
	box-shadow:
		0 0 14px -2px color-mix(in srgb, var(--pz-kind) 45%, transparent),
		0 0 32px 2px color-mix(in srgb, var(--pz-kind) 18%, transparent);
}

/* ---- 1er étage : qui publie ---- */
.pz-hall__top {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px 0;
}

.pz-hall__avatar {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	border: 1px solid var(--pz-line);
	background: var(--pz-bg-2);
	color: var(--pz-accent, var(--pz-ink));
	overflow: hidden;
}

.pz-hall__avatar .pz-mark { width: 62%; height: auto; }

.pz-hall__who { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.pz-hall__who b { font-size: .95rem; color: var(--pz-text); }
/* Une seule ligne : avec la pastille à côté, « a publié un article · il y
   a 3 heures » passait à la ligne et déformait l'en-tête d'une carte à
   l'autre. Ce qui dépasse se coupe, la date reste l'essentiel. */
.pz-hall__act {
	font-size: .82rem;
	color: var(--pz-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pz-hall__kind {
	flex: 0 0 auto;
	padding: 5px 13px;
	border-radius: 999px;
	font-size: .64rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	background: var(--pz-bg);
	border: 1px solid var(--pz-kind, var(--pz-line));
	color: var(--pz-kind, var(--pz-ink));
	white-space: nowrap;
}

:root[data-pz-theme="light"] .pz-hall__kind {
	color: var(--pz-kind-ink, var(--pz-ink));
	border-color: var(--pz-kind-ink, var(--pz-line));
}

/* La pastille « nouveau » porte la couleur de la rubrique, pas celle du
   type : c'est une information de fraîcheur, pas de nature. */
.pz-hall__kind--new {
	border-color: var(--pz-accent, var(--pz-line));
	color: var(--pz-accent, var(--pz-ink));
}

:root[data-pz-theme="light"] .pz-hall__kind--new {
	color: var(--pz-accent-ink, var(--pz-ink));
	border-color: var(--pz-accent-ink, var(--pz-line));
}

/* ---- 2e étage : le contenu ---- */
.pz-hall__main {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
	gap: 20px;
	align-items: center;
	padding: 16px 18px;
}

/* Article : texte à gauche, image à droite (l'ordre du balisage). */
.pz-hall__card--post .pz-hall__media { order: 2; }
.pz-hall__card--post .pz-hall__body  { order: 1; }

/* Produit : image à gauche, texte à droite. */
.pz-hall__card--product .pz-hall__main { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); }
.pz-hall__card--product .pz-hall__media { order: 1; }
.pz-hall__card--product .pz-hall__body  { order: 2; }

.pz-hall__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--pz-radius-s);
	background: var(--pz-surface-2);
	/* 16/10 plutôt que 16/11 : sur un article au texte court, une image
	   plus haute laissait une bande vide de part et d'autre du texte. */
	aspect-ratio: 16 / 10;
}

.pz-hall__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	transition: transform .6s var(--pz-ease);
}

.pz-hall__card:hover .pz-hall__media img { transform: scale(1.02); }

.pz-hall__body { display: flex; flex-direction: column; gap: 9px; min-width: 0; }

/* ⚠ Titre borné à deux lignes, interligne desserré : la coupe tombe à la
   hauteur des LIGNES, pas des caractères — trop serré, elle scie le bas
   des lettres de la dernière ligne. */
.pz-hall__title {
	margin: 0;
	font-size: 1.32rem;
	font-weight: 700;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.pz-hall__title a {
	background: linear-gradient(92deg, var(--pz-accent, #00f0ff), var(--pz-ink));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-decoration: none;
}

/* En clair, un dégradé fluo sur fond pâle ne se lit plus : le titre repasse
   à l'encre assombrie de sa rubrique. */
:root[data-pz-theme="light"] .pz-hall__title a {
	background: none;
	color: var(--pz-accent-ink, var(--pz-text));
}

.pz-hall__price { margin: 0; font-weight: 700; color: var(--pz-text); font-size: 1.18rem; }
.pz-hall__price del { color: var(--pz-muted); font-weight: 400; margin-right: 8px; font-size: .92rem; }
.pz-hall__price ins { text-decoration: none; }

.pz-hall__text {
	margin: 0;
	font-size: .95rem;
	line-height: 1.5;
	color: var(--pz-muted);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	/* Cinq lignes sur la GRANDE carte (21/09/2026, avant : trois). Les
	   cartes en duo, elles, masquent ce texte — la règle ne les touche pas. */
	-webkit-line-clamp: 5;
	overflow: hidden;
}

/* ---- 3e étage : la bande d'actions ---- */
.pz-hall__bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	border-top: 1px solid var(--pz-line-soft);
	background: var(--pz-bg-2);
	/* ⚠ Au-dessus du lien qui couvre le visuel, sinon les boutons ne
	   reçoivent aucun clic. */
	position: relative;
	z-index: 3;
}

.pz-hall__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	padding: 0 14px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent;
	color: var(--pz-muted);
	font-size: .86rem;
	cursor: pointer;
	text-decoration: none;
	transition: color var(--pz-dur) var(--pz-ease), border-color var(--pz-dur) var(--pz-ease), background var(--pz-dur) var(--pz-ease);
}

.pz-hall__ico { width: 22px; height: 22px; display: block; flex: 0 0 auto; }

/* Trait épaissi : à 1,7 les pictogrammes se diluaient sur fond sombre. */
.pz-hall__ico svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 2.2; }

/* Le prisme de la marque dessine son propre trait (verre + filament) :
   on lui rend sa pleine largeur, sa finesse vient de ses classes. */
.pz-hall__ico .pz-mark,
.pz-hall__avatar .pz-mark { width: 100%; height: 100%; }

.pz-hall__btn:hover,
.pz-hall__btn:focus-visible {
	color: var(--pz-kind, var(--pz-ink));
	border-color: currentColor;
	background: color-mix(in srgb, currentColor 12%, transparent);
}

:root:not([data-pz-theme="light"]) .pz-hall__btn:hover,
:root:not([data-pz-theme="light"]) .pz-hall__btn:focus-visible {
	box-shadow: 0 0 12px -3px currentColor;
}

/* Le favori allumé : plein, et rose. */
.pz-hall__btn--fav.is-on { color: var(--pz-magenta); }
.pz-hall__btn--fav.is-on .pz-hall__ico svg { fill: currentColor; stroke: currentColor; }

/* Le nombre de cœurs. Il survit là où le mot « J'aime » est masqué (mobile,
   cartes étroites) : c'est le chiffre qui porte l'information. Masqué tant
   qu'il vaut 0 — un site qui démarre n'affiche pas des zéros partout. */
.pz-hall__count { font-variant-numeric: tabular-nums; font-weight: 600; }
.pz-hall__count[hidden] { display: none; }

/* Le retour du partage : sans mot, un bouton muet passe pour cassé. */
.pz-hall__btn--share.is-done .pz-hall__label { display: none; }

.pz-hall__btn--share.is-done::after {
	content: attr(data-pz-note);
	white-space: nowrap;
	font-size: .86rem;
	color: var(--pz-ink);
}

/* Le bouton d'achat ferme la bande, poussé à droite. */
.pz-hall__cart {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 42px;
	padding: 0 20px;
	border-radius: 999px;
	border: 1px solid transparent;
	background: linear-gradient(92deg, var(--pz-violet), var(--pz-magenta));
	color: #fff;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: filter var(--pz-dur) var(--pz-ease), box-shadow var(--pz-dur) var(--pz-ease);
}

.pz-hall__cart:hover,
.pz-hall__cart:focus-visible { filter: brightness(1.12); box-shadow: 0 0 18px -4px var(--pz-magenta); }
.pz-hall__cart .pz-hall__ico { width: 20px; height: 20px; }
.pz-hall__cart .pz-hall__ico svg { stroke: currentColor; }

/* La rupture prend la place du bouton : un vide ne dit rien, « rupture »
   dit tout et évite le clic déçu. */
.pz-hall__stock {
	margin-left: auto;
	padding: 10px 18px;
	border: 1px solid var(--pz-magenta);
	border-radius: 999px;
	color: var(--pz-magenta);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ---- Charger plus ---- */
.pz-hall__more { display: flex; justify-content: center; padding: 28px 0 4px; }
.pz-hall__more .is-busy { opacity: .55; cursor: progress; }

/* ---- Le retour au fil, en haut d'une fiche ---- */
.pz-hall__back {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 18px 0 0;
	padding: 8px 16px 8px 12px;
	border: 1px solid var(--pz-line);
	border-radius: 999px;
	font-size: .8rem;
	color: var(--pz-muted);
	text-decoration: none;
	transition: color var(--pz-dur) var(--pz-ease), border-color var(--pz-dur) var(--pz-ease);
}

.pz-hall__back:hover,
.pz-hall__back:focus-visible { color: var(--pz-ink); border-color: var(--pz-ink); }
.pz-hall__backico { width: 15px; height: 15px; display: inline-block; }
.pz-hall__backico svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* ---- Téléphone ----
   ⚠ ON GROSSIT, ON NE COMPRIME PAS. À bout de bras, un texte de 13 px et
   une icône de 17 px ne se lisent pas. L'image passe donc AU-DESSUS du
   texte, pleine largeur : c'est ce qui libère la place pour les grands
   corps. La bande d'actions, elle, garde sa forme — elle est déjà à plat. */
@media (max-width: 700px) {
	.pz-hall__main {
		display: block;
		padding: 14px;
	}

	.pz-hall__card--product .pz-hall__main { grid-template-columns: none; }

	/* ⚠ La proportion du visuel sur téléphone n'est PAS ici : elle est
	   fixée plus bas, dans le second bloc « max-width: 700px » (16/10).
	   Un 4/3 écrit ici n'a jamais rien fait — même sélecteur, même média,
	   c'est le dernier qui l'emporte. Retiré le 18/09/2026 plutôt que
	   laissé à tromper le prochain lecteur. */

	.pz-hall__top { padding: 14px 14px 0; gap: 11px; }
	.pz-hall__avatar { width: 46px; height: 46px; }
	.pz-hall__who b { font-size: 1.06rem; }
	.pz-hall__act { font-size: .92rem; }
	.pz-hall__kind { font-size: .72rem; padding: 6px 13px; }

	/* Le visuel ayant maigri, le titre peut respirer : trois lignes au lieu
	   de deux. Un nom de produit comme « The Legend of Zelda: Breath of the
	   Wild – Nintendo Switch 2 Edition » se coupait au milieu. */
	.pz-hall__title { font-size: 1.36rem; -webkit-line-clamp: 3; }
	.pz-hall__price { font-size: 1.34rem; }
	.pz-hall__text { font-size: 1.06rem; -webkit-line-clamp: 4; }

	/* La bande déborderait à quatre éléments : les libellés s'effacent,
	   les cibles restent grandes. */
	.pz-hall__bar { gap: 4px; padding: 9px 10px; }
	.pz-hall__btn { min-height: 52px; padding: 0 12px; }
	.pz-hall__label { display: none; }
	.pz-hall__ico { width: 28px; height: 28px; }
	.pz-hall__cart { min-height: 52px; padding: 0 18px; font-size: .82rem; }
	.pz-hall__cart .pz-hall__ico { width: 24px; height: 24px; }
	.pz-hall__stock { padding: 12px 16px; font-size: .8rem; }
}

@media (max-width: 420px) {
	/* Sur les plus petits écrans, le texte du bouton d'achat cède : le
	   pictogramme du panier suffit, et il reste une grande cible. */
	.pz-hall__cart { padding: 0 16px; font-size: 0; gap: 0; }
	.pz-hall__cart .pz-hall__ico { width: 26px; height: 26px; }
}

/* =========================================================
   ANTI-SPAM DES COMMENTAIRES
   Un prisme à cliquer parmi quatre, entre la zone de texte
   et le bouton d'envoi. Petit sur grand écran, assez gros
   au doigt sur téléphone.
   ========================================================= */
.pz-spam { margin: 0 0 18px; }

.pz-spam__ask {
	margin: 0 0 10px;
	font-size: .84rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--pz-muted);
}

.pz-spam__choices { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.pz-spam__prism {
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid var(--pz-line);
	border-radius: 12px;
	background: var(--pz-surface);
	color: var(--pz-accent);
	cursor: pointer;
	transition:
		border-color var(--pz-dur) var(--pz-ease),
		box-shadow   var(--pz-dur) var(--pz-ease),
		transform    var(--pz-dur) var(--pz-ease);
}

/* Le prisme dessine son propre trait (verre + filament) : on lui donne
   la place, sa finesse vient de ses classes. */
.pz-spam__prism .pz-mark { width: 76%; height: auto; }

:root[data-pz-theme="light"] .pz-spam__prism { color: var(--pz-accent-ink); }

.pz-spam__prism:hover,
.pz-spam__prism:focus-visible { border-color: currentColor; transform: translateY(-2px); }

/* Le choix retenu : franc, pour qu'on voie qu'on a bien cliqué. */
.pz-spam__prism.is-on {
	border-color: currentColor;
	box-shadow: inset 0 0 0 1px currentColor;
	background: color-mix(in srgb, currentColor 12%, var(--pz-surface));
}

:root:not([data-pz-theme="light"]) .pz-spam__prism.is-on {
	box-shadow: inset 0 0 0 1px currentColor, 0 0 16px -4px currentColor;
}

.pz-spam__warn {
	margin: 10px 0 0;
	font-size: .88rem;
	color: var(--pz-magenta);
}

/* ⚠ LE LEURRE SE CACHE EN CSS, PAS AVEC « type=hidden ». Un robot ignore
   la feuille de style : il voit un champ ordinaire et le remplit, ce qui le
   dénonce. Avec « hidden », il l'aurait ignoré comme tout le monde.
   Ne pas « nettoyer » cette règle en la remplaçant par display:none seul —
   certains robots sautent justement ce qui est en display:none. */
.pz-spam__trap {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* Au doigt, 46 px se ratent : on passe à 60. */
@media (max-width: 700px) {
	.pz-spam__ask { font-size: .92rem; }
	.pz-spam__choices { gap: 12px; }
	.pz-spam__prism { width: 60px; height: 60px; border-radius: 14px; }
	.pz-spam__warn { font-size: .96rem; }
}

/* =========================================================
   PIED DE PAGE : Mentions légales · Contact · Plan du site
   ========================================================= */
.pz-footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }

/* =========================================================
   PAGE CONTACT
   ========================================================= */
.pz-contact { max-width: 720px; margin-top: 28px; margin-inline: auto; }
.pz-contact__intro { color: var(--pz-muted); }
.pz-contact__form { display: grid; gap: 4px; }
.pz-contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.pz-contact__field { margin: 0 0 14px; }

.pz-contact__field label {
	display: block;
	margin-bottom: 6px;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.pz-contact__field input,
.pz-contact__field textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--pz-line);
	border-radius: var(--pz-radius-s);
	background: var(--pz-surface);
	color: var(--pz-text);
	font-size: 1rem;
	transition: border-color var(--pz-dur) var(--pz-ease), box-shadow var(--pz-dur) var(--pz-ease);
}

.pz-contact__field textarea { min-height: 170px; resize: vertical; }

.pz-contact__field input:focus,
.pz-contact__field textarea:focus {
	outline: none;
	border-color: var(--pz-ink);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pz-ink) 25%, transparent);
}

.pz-contact__field.is-error input,
.pz-contact__field.is-error textarea { border-color: #ff3d7f; }

.pz-contact__consent { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; color: var(--pz-muted); }
.pz-contact__consent input { width: 18px; height: 18px; margin-top: 3px; flex: 0 0 auto; accent-color: var(--pz-ink); }
.pz-contact__consent.is-error { color: #ff3d7f; }

/* Le piège à robots : hors de l'écran, pas « display:none » (certains robots le repèrent). */
.pz-contact__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.pz-contact__msg { margin-bottom: 20px; padding: 14px 18px; border: 1px solid; border-radius: var(--pz-radius-s); }
.pz-contact__msg p { margin: 0; }
.pz-contact__msg ul { margin: 8px 0 0; padding-left: 20px; }
.pz-contact__msg--ok { border-color: #00ffa3; background: rgba(0, 255, 163, .08); }
.pz-contact__msg--error { border-color: #ff3d7f; background: rgba(255, 61, 127, .08); }
:root[data-pz-theme="light"] .pz-contact__msg--ok { border-color: #00795a; }
:root[data-pz-theme="light"] .pz-contact__msg--error,
:root[data-pz-theme="light"] .pz-contact__field.is-error input,
:root[data-pz-theme="light"] .pz-contact__field.is-error textarea { border-color: #c2185b; }
:root[data-pz-theme="light"] .pz-contact__consent.is-error { color: #c2185b; }

@media (max-width: 640px) {
	.pz-contact__row { grid-template-columns: 1fr; }
}

/* =========================================================
   FIL PRISM'HALL : la pastille de NATURE (15/09/2026)
   « Article » ou « Produit », PLEINE, à gauche de la pastille en
   contour (« Nouveau » ou la rubrique). Deux formes, deux rôles :
   la pleine dit ce que c'est, le contour dit si c'est frais.
   ========================================================= */
.pz-hall__badges { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; }

.pz-hall__type {
	padding: 5px 11px;
	border-radius: 999px;
	font-size: .64rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #0a0a0f;
}

.pz-hall__type--post { background: #a855f7; box-shadow: 0 0 14px -3px rgba(168, 85, 247, .8); color: #fff; }
.pz-hall__type--product { background: #ffb800; box-shadow: 0 0 14px -3px rgba(255, 184, 0, .8); }

/* En clair : les encres, sans halo. */
:root[data-pz-theme="light"] .pz-hall__type { box-shadow: none; color: #fff; }
:root[data-pz-theme="light"] .pz-hall__type--post { background: #6b21a8; }
:root[data-pz-theme="light"] .pz-hall__type--product { background: #8a6200; }

@media (max-width: 560px) {
	.pz-hall__badges { gap: 4px; }
	.pz-hall__type,
	.pz-hall__badges .pz-hall__kind { padding: 4px 8px; font-size: .58rem; letter-spacing: .06em; }
}

/* Sur smartphone, la pastille dit déjà « Article » ou « Produit » : le verbe
   « a publié un article » s'efface et la date, qui se faisait couper, reste. */
@media (max-width: 560px) {
	.pz-hall__verb { display: none; }
}

/* =========================================================
   FIL : LE RYTHME « 1 GRANDE CARTE, PUIS 2 » (17/09/2026)
   Accueil ET boutique (réglage « Boutique présentée comme le fil »).
   Rangée 1 : une carte pleine largeur. Rangée 2 : deux cartes côte à
   côte, image au-dessus du texte. Et ainsi de suite, même quand « Voir
   plus » ajoute une fournée (nth-child compte sur tout le fil).
   Une carte seule en fin de liste reprend toute la largeur.
   ========================================================= */
.pz-hall__feed,
body.pz-shop-hall ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pz-gap);
	/* Largeur du site, comme la page Blog (27/09/2026, avant : 980 px) :
	   Mica veut toutes les pages alignées sur la même largeur. */
	max-width: none;
	margin-inline: auto;
}

body.pz-shop-hall ul.products li.product > .pz-hall__card { width: 100%; }

.pz-hall__feed > .pz-hall__card:nth-child(3n + 1),
.pz-hall__feed > .pz-hall__card:nth-child(3n + 2):last-child,
body.pz-shop-hall ul.products > li:nth-child(3n + 1),
body.pz-shop-hall ul.products > li:nth-child(3n + 2):last-child {
	grid-column: 1 / -1;
}

/* Les cartes en duo : image au-dessus, texte dessous, libellés d'icônes effacés. */
.pz-hall__feed > .pz-hall__card:nth-child(3n + 2):not(:last-child) .pz-hall__main,
.pz-hall__feed > .pz-hall__card:nth-child(3n) .pz-hall__main,
body.pz-shop-hall ul.products > li:nth-child(3n + 2):not(:last-child) .pz-hall__main,
body.pz-shop-hall ul.products > li:nth-child(3n) .pz-hall__main {
	display: block;
	padding: 14px 16px;
}

.pz-hall__feed > .pz-hall__card:nth-child(3n + 2):not(:last-child) .pz-hall__media,
.pz-hall__feed > .pz-hall__card:nth-child(3n) .pz-hall__media,
body.pz-shop-hall ul.products > li:nth-child(3n + 2):not(:last-child) .pz-hall__media,
body.pz-shop-hall ul.products > li:nth-child(3n) .pz-hall__media {
	aspect-ratio: 4 / 3;
	margin-bottom: 12px;
}

.pz-hall__feed > .pz-hall__card:nth-child(3n + 2):not(:last-child) .pz-hall__title,
.pz-hall__feed > .pz-hall__card:nth-child(3n) .pz-hall__title,
body.pz-shop-hall ul.products > li:nth-child(3n + 2):not(:last-child) .pz-hall__title,
body.pz-shop-hall ul.products > li:nth-child(3n) .pz-hall__title { font-size: 1.12rem; }

.pz-hall__feed > .pz-hall__card:nth-child(3n + 2):not(:last-child) .pz-hall__btn .pz-hall__label,
.pz-hall__feed > .pz-hall__card:nth-child(3n) .pz-hall__btn .pz-hall__label,
body.pz-shop-hall ul.products > li:nth-child(3n + 2):not(:last-child) .pz-hall__btn .pz-hall__label,
body.pz-shop-hall ul.products > li:nth-child(3n) .pz-hall__btn .pz-hall__label { display: none; }

/* En duo, la carte est étroite : la date se contente de sa pastille. */
.pz-hall__feed > .pz-hall__card:nth-child(3n + 2):not(:last-child) .pz-hall__badges .pz-hall__type,
.pz-hall__feed > .pz-hall__card:nth-child(3n) .pz-hall__badges .pz-hall__type,
body.pz-shop-hall ul.products > li:nth-child(3n + 2):not(:last-child) .pz-hall__badges .pz-hall__type,
body.pz-shop-hall ul.products > li:nth-child(3n) .pz-hall__badges .pz-hall__type { padding: 4px 8px; font-size: .58rem; }

/* ---------------------------------------------------------
   SMARTPHONE : LE MÊME RYTHME, EN RÉDUIT (18/09/2026)
   Mica veut « pareil » sur téléphone : la grande carte reste telle
   quelle (règles « Téléphone » plus haut), et les cartes en DUO se
   compactent pour tenir à deux sur ~180 px chacune :
     • en-tête : catégorie et date seules (Article/Produit et Nouveau
       masqués — la grande carte les montre, le duo n'a pas la place) ;
     • titre sur 2 lignes, sans extrait ni prix barré ;
     • bande d'actions en icônes, bouton d'achat en rond (le texte du
       lien passe à font-size 0, l'icône garde sa taille en px).
   Cibles gardées à 40 px : réduit, mais encore touchable au pouce.
   --------------------------------------------------------- */
@media (max-width: 700px) {
	.pz-hall__feed,
	body.pz-shop-hall ul.products { gap: 12px; }

	.pz-hall__feed > .pz-hall__card:nth-child(3n + 2):not(:last-child),
	.pz-hall__feed > .pz-hall__card:nth-child(3n),
	body.pz-shop-hall ul.products > li:nth-child(3n + 2):not(:last-child) .pz-hall__card,
	body.pz-shop-hall ul.products > li:nth-child(3n) .pz-hall__card { --pz-duo: 1; }

	:is(.pz-hall__feed > .pz-hall__card:nth-child(3n + 2):not(:last-child), .pz-hall__feed > .pz-hall__card:nth-child(3n), body.pz-shop-hall ul.products > li:nth-child(3n + 2):not(:last-child), body.pz-shop-hall ul.products > li:nth-child(3n)) .pz-hall__top { padding: 9px 9px 0; gap: 6px; }

	:is(.pz-hall__feed > .pz-hall__card:nth-child(3n + 2):not(:last-child), .pz-hall__feed > .pz-hall__card:nth-child(3n), body.pz-shop-hall ul.products > li:nth-child(3n + 2):not(:last-child), body.pz-shop-hall ul.products > li:nth-child(3n)) .pz-hall__badges { display: none; }

	:is(.pz-hall__feed > .pz-hall__card:nth-child(3n + 2):not(:last-child), .pz-hall__feed > .pz-hall__card:nth-child(3n), body.pz-shop-hall ul.products > li:nth-child(3n + 2):not(:last-child), body.pz-shop-hall ul.products > li:nth-child(3n)) .pz-hall__cat { padding: 3px 8px; font-size: .58rem; letter-spacing: .05em; }

	:is(.pz-hall__feed > .pz-hall__card:nth-child(3n + 2):not(:last-child), .pz-hall__feed > .pz-hall__card:nth-child(3n), body.pz-shop-hall ul.products > li:nth-child(3n + 2):not(:last-child), body.pz-shop-hall ul.products > li:nth-child(3n)) .pz-hall__act { font-size: .68rem; }

	:is(.pz-hall__feed > .pz-hall__card:nth-child(3n + 2):not(:last-child), .pz-hall__feed > .pz-hall__card:nth-child(3n), body.pz-shop-hall ul.products > li:nth-child(3n + 2):not(:last-child), body.pz-shop-hall ul.products > li:nth-child(3n)) .pz-hall__main { padding: 9px; }

	:is(.pz-hall__feed > .pz-hall__card:nth-child(3n + 2):not(:last-child), .pz-hall__feed > .pz-hall__card:nth-child(3n), body.pz-shop-hall ul.products > li:nth-child(3n + 2):not(:last-child), body.pz-shop-hall ul.products > li:nth-child(3n)) .pz-hall__media { aspect-ratio: 1 / 1; margin-bottom: 8px; }

	:is(.pz-hall__feed > .pz-hall__card:nth-child(3n + 2):not(:last-child), .pz-hall__feed > .pz-hall__card:nth-child(3n), body.pz-shop-hall ul.products > li:nth-child(3n + 2):not(:last-child), body.pz-shop-hall ul.products > li:nth-child(3n)) .pz-hall__body { gap: 4px; }

	:is(.pz-hall__feed > .pz-hall__card:nth-child(3n + 2):not(:last-child), .pz-hall__feed > .pz-hall__card:nth-child(3n), body.pz-shop-hall ul.products > li:nth-child(3n + 2):not(:last-child), body.pz-shop-hall ul.products > li:nth-child(3n)) .pz-hall__title { font-size: .88rem; line-height: 1.25; }

	:is(.pz-hall__feed > .pz-hall__card:nth-child(3n + 2):not(:last-child), .pz-hall__feed > .pz-hall__card:nth-child(3n), body.pz-shop-hall ul.products > li:nth-child(3n + 2):not(:last-child), body.pz-shop-hall ul.products > li:nth-child(3n)) .pz-hall__price { font-size: .86rem; }

	:is(.pz-hall__feed > .pz-hall__card:nth-child(3n + 2):not(:last-child), .pz-hall__feed > .pz-hall__card:nth-child(3n), body.pz-shop-hall ul.products > li:nth-child(3n + 2):not(:last-child), body.pz-shop-hall ul.products > li:nth-child(3n)) .pz-hall__price del,
	:is(.pz-hall__feed > .pz-hall__card:nth-child(3n + 2):not(:last-child), .pz-hall__feed > .pz-hall__card:nth-child(3n), body.pz-shop-hall ul.products > li:nth-child(3n + 2):not(:last-child), body.pz-shop-hall ul.products > li:nth-child(3n)) .pz-hall__text,
	:is(.pz-hall__feed > .pz-hall__card:nth-child(3n + 2):not(:last-child), .pz-hall__feed > .pz-hall__card:nth-child(3n), body.pz-shop-hall ul.products > li:nth-child(3n + 2):not(:last-child), body.pz-shop-hall ul.products > li:nth-child(3n)) .pz-swatches { display: none; }

	:is(.pz-hall__feed > .pz-hall__card:nth-child(3n + 2):not(:last-child), .pz-hall__feed > .pz-hall__card:nth-child(3n), body.pz-shop-hall ul.products > li:nth-child(3n + 2):not(:last-child), body.pz-shop-hall ul.products > li:nth-child(3n)) .pz-hall__bar { gap: 0; padding: 4px 6px; }

	:is(.pz-hall__feed > .pz-hall__card:nth-child(3n + 2):not(:last-child), .pz-hall__feed > .pz-hall__card:nth-child(3n), body.pz-shop-hall ul.products > li:nth-child(3n + 2):not(:last-child), body.pz-shop-hall ul.products > li:nth-child(3n)) .pz-hall__btn { min-height: 40px; padding: 0 7px; }

	:is(.pz-hall__feed > .pz-hall__card:nth-child(3n + 2):not(:last-child), .pz-hall__feed > .pz-hall__card:nth-child(3n), body.pz-shop-hall ul.products > li:nth-child(3n + 2):not(:last-child), body.pz-shop-hall ul.products > li:nth-child(3n)) .pz-hall__btn .pz-hall__ico { width: 20px; height: 20px; }

	/* Le bouton d'achat devient un rond : le texte s'efface, l'icône reste. */
	:is(.pz-hall__feed > .pz-hall__card:nth-child(3n + 2):not(:last-child), .pz-hall__feed > .pz-hall__card:nth-child(3n), body.pz-shop-hall ul.products > li:nth-child(3n + 2):not(:last-child), body.pz-shop-hall ul.products > li:nth-child(3n)) .pz-hall__cart { width: 40px; min-height: 40px; height: 40px; margin-left: auto; padding: 0; justify-content: center; font-size: 0; gap: 0; }

	:is(.pz-hall__feed > .pz-hall__card:nth-child(3n + 2):not(:last-child), .pz-hall__feed > .pz-hall__card:nth-child(3n), body.pz-shop-hall ul.products > li:nth-child(3n + 2):not(:last-child), body.pz-shop-hall ul.products > li:nth-child(3n)) .pz-hall__cart .pz-hall__ico { width: 20px; height: 20px; }

	:is(.pz-hall__feed > .pz-hall__card:nth-child(3n + 2):not(:last-child), .pz-hall__feed > .pz-hall__card:nth-child(3n), body.pz-shop-hall ul.products > li:nth-child(3n + 2):not(:last-child), body.pz-shop-hall ul.products > li:nth-child(3n)) .pz-hall__stock { padding: 6px 8px; font-size: .6rem; }
}

/* ---------------------------------------------------------
   La pastille de CATÉGORIE (remplace « zestyle.fr »)
   Pleine, à la couleur néon de la catégorie ; texte noir ou
   blanc selon la clarté (--pz-cat-on, calculé côté serveur).
   --------------------------------------------------------- */
.pz-hall__who { justify-content: center; gap: 4px; }

.pz-hall__cat {
	align-self: flex-start;
	display: inline-block;
	max-width: 100%;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--pz-accent, #00f0ff);
	color: var(--pz-cat-on, #0a0a0f);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-shadow: 0 0 14px -3px var(--pz-accent, #00f0ff);
	transition: filter var(--pz-dur) var(--pz-ease);
}

.pz-hall__cat:hover,
.pz-hall__cat:focus-visible { color: var(--pz-cat-on, #0a0a0f); filter: brightness(1.12); }

.pz-rainbow .pz-hall__cat { background: linear-gradient(90deg, #00ffa3, #00f0ff, #ff00c8, #ffd54a); color: #0a0a0f; }

/* En clair : l'encre de la catégorie, texte blanc, sans halo. */
:root[data-pz-theme="light"] .pz-hall__cat,
:root[data-pz-theme="light"] .pz-hall__cat:hover { background: var(--pz-accent-ink, #00768a); color: #fff; box-shadow: none; }

/* La GRANDE carte sur téléphone, un peu resserrée elle aussi (18/09/2026) :
   les corps agrandis d'avant faisaient d'une seule carte presque un écran.
   Les cartes en duo gardent leurs propres tailles (sélecteurs plus précis). */
@media (max-width: 700px) {
	.pz-hall__media { aspect-ratio: 16 / 10; margin-bottom: 10px; }
	.pz-hall__main { padding: 12px; }
	.pz-hall__top { padding: 12px 12px 0; }
	.pz-hall__title { font-size: 1.18rem; }
	.pz-hall__price { font-size: 1.08rem; }
	/* Quatre lignes sur téléphone (21/09/2026, avant : deux) : la grande
	   carte y occupe toute la largeur, elle peut porter du texte. */
	.pz-hall__text { font-size: .94rem; -webkit-line-clamp: 4; }
	.pz-hall__btn { min-height: 44px; }
	.pz-hall__ico { width: 24px; height: 24px; }
	.pz-hall__cart { min-height: 44px; }
}

/* =========================================================
   PAGES À LA LARGEUR DU SITE (27/09/2026)
   Les pages (panier, commande, compte, CGV, contact…) étaient bornées à
   780 px comme un article. Elles prennent maintenant la même largeur que
   la page Blog. Seul l'ARTICLE garde sa colonne de lecture de 780 px :
   au-delà, une ligne de texte devient trop longue à suivre.
   ========================================================= */
.pz-article.pz-article--wide { max-width: var(--pz-max); }

/* L'ARTICLE À LA LARGEUR DU SITE SUR ORDINATEUR (30/09/2026, v0.61.1).
   À 780 px, puis 940 px, la colonne paraissait perdue au milieu d'un grand
   écran. Elle prend maintenant la même largeur que la fiche produit
   (--pz-max) : article et produit s'alignent sur les mêmes bords. Le texte
   grossit un peu pour que les lignes restent faciles à suivre.
   Tablette et téléphone ne changent pas. */
@media (min-width: 1100px) {
	.pz-article:not(.pz-article--wide) { max-width: var(--pz-max); }
	.pz-article:not(.pz-article--wide) .pz-article__content { font-size: 1.12rem; }
	.pz-article .pz-comments { max-width: none; }
}

/* =========================================================
   PASTILLES D'ÉTIQUETTES (27/09/2026)
   Réglage « Étiquettes mises en pastille » (Personnaliser → Accueil).
   En bas à gauche de l'image de chaque vignette, fond aux quatre
   couleurs du site qui glissent, comme le filet sous l'en-tête.
   Texte foncé : lisible sur le vert, le cyan, le rose et le jaune.
   Elles laissent passer le clic vers la carte.
   ========================================================= */
.pz-tagpills {
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 10px;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	pointer-events: none;
}

.pz-tagpill {
	padding: 4px 10px;
	border-radius: 999px;
	background: linear-gradient(90deg, #00ffa3, #00f0ff, #ff00c8, #ffd54a, #00ffa3);
	background-size: 300% 100%;
	animation: pz-slide 8s linear infinite;
	color: #0b0b14;
	font-size: .62rem;
	font-weight: 800;
	letter-spacing: .1em;
	line-height: 1.3;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
}

@media (max-width: 700px) {
	.pz-tagpills { left: 7px; right: 7px; bottom: 7px; gap: 4px; }
	.pz-tagpill { padding: 3px 8px; font-size: .56rem; letter-spacing: .06em; }
}

@media (prefers-reduced-motion: reduce) {
	.pz-tagpill { animation: none; }
}

/* =========================================================
   LA CARTE « TEST » (27/09/2026)
   Troisième famille du fil, à côté de l'article (magenta) et du produit
   (cyan) : le BLEU NÉON de la palette ZeStyle, --pz-blue #2f6bff.
   Pas le cyan : il est déjà au produit, les deux se confondraient.
     • cadre   : #2f6bff (sombre) · encre #1d4ed8 (clair)
     • fond    : bleu pâle — #eef3ff en clair, #141d3a en sombre
   Même mécanique que l'article teinté plus haut : la barre du bas est
   teintée aussi, et chaque fond a sa couleur en dur avant le color-mix.
   Double classe : doit passer devant « --post » / « --product ».
   ========================================================= */
.pz-hall__card.pz-hall__card--test {
	--pz-kind: var(--pz-blue);
	--pz-kind-ink: #1d4ed8;
	background: #141d3a;
	background: color-mix(in srgb, var(--pz-blue) 16%, var(--pz-surface));
}

.pz-hall__card.pz-hall__card--test .pz-hall__bar {
	background: #111834;
	background: color-mix(in srgb, var(--pz-blue) 16%, var(--pz-bg-2));
}

:root[data-pz-theme="light"] .pz-hall__card.pz-hall__card--test {
	background: #eef3ff;
	background: color-mix(in srgb, var(--pz-blue) 8%, var(--pz-surface));
}

:root[data-pz-theme="light"] .pz-hall__card.pz-hall__card--test .pz-hall__bar {
	background: #dde6fa;
	background: color-mix(in srgb, var(--pz-blue) 10%, var(--pz-bg-2));
}

/* =========================================================
   CŒUR + PARTAGE SUR LE BLOG (27/09/2026)
   Mêmes boutons que la bande du fil (.pz-hall__btn), même compteur par
   article. Sur une carte : à droite de la date, en icônes + nombre.
   Dans l'article : sous la signature, avec leurs libellés.
   ⚠ Au-dessus du lien qui couvre la carte (.pz-cover, z-index 1),
   sinon le clic ouvrirait l'article au lieu de donner un cœur.
   ========================================================= */
.pz-post__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}

.pz-social {
	position: relative;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.pz-social--card { margin-left: auto; }

.pz-social--card .pz-hall__btn {
	min-height: 36px;
	padding: 0 9px;
	gap: 6px;
	font-size: .8rem;
}

.pz-social--card .pz-hall__ico { width: 19px; height: 19px; }
.pz-social--card .pz-hall__label { display: none; }
.pz-social--card .pz-hall__btn--share.is-done::after { font-size: .74rem; }

.pz-social--article {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 12px;
}

/* =========================================================
   LE TEXTE DES CARTES EN DUO (27/09/2026)
   Sur PC, une carte en duo garde un début de texte : 3 lignes (la grande
   carte en a 5). Sur téléphone, il reste masqué (règle « SMARTPHONE »).
   Les produits sans description courte prennent le début de leur
   description principale (inc/hall.php).
   ========================================================= */
:is(.pz-hall__feed > .pz-hall__card:nth-child(3n + 2):not(:last-child), .pz-hall__feed > .pz-hall__card:nth-child(3n), body.pz-shop-hall ul.products > li:nth-child(3n + 2):not(:last-child), body.pz-shop-hall ul.products > li:nth-child(3n)) .pz-hall__text {
	-webkit-line-clamp: 3;
}

/* =========================================================
   ZESTYLE — PASTILLES FLUO PLEINES (06/10/2026)
   Avant (héritage PrismAtiX) : en mode clair, les pastilles prenaient
   l'ENCRE de la catégorie (teinte assombrie) et le site paraissait
   éteint — or le clair est désormais le mode par défaut.
   Maintenant, dans LES DEUX modes : fond plein à la couleur fluo de la
   catégorie, texte quasi noir (#0b0b14). Les six fluos de la palette
   (cyan, rose, orange, jaune, vert, violet, bleu éclairci) portent tous
   un texte foncé au-delà de 4,5 de contraste.
   Survol / pastille active : on inverse (fond noir, texte fluo).
   ========================================================= */
.pz-chip,
:root[data-pz-theme] .pz-chip {
	border: 0;
	background: var(--pz-accent, #00f0ff);
	color: #0b0b14;
	font-weight: 800;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: 0 0 14px -4px var(--pz-accent, #00f0ff);
}

:root[data-pz-theme="light"] .pz-chip {
	box-shadow: 0 2px 10px -3px color-mix(in srgb, var(--pz-accent, #00f0ff) 80%, transparent);
}

.pz-chip:hover,
.pz-chip:focus-visible,
.pz-chip.is-active,
:root[data-pz-theme] .pz-chip:hover,
:root[data-pz-theme] .pz-chip.is-active {
	background: #0b0b14;
	color: var(--pz-accent, #00f0ff);
}

.pz-rainbow.pz-chip,
.pz-rainbow .pz-chip,
:root[data-pz-theme] .pz-rainbow.pz-chip,
:root[data-pz-theme] .pz-rainbow .pz-chip {
	background: linear-gradient(90deg, #ff00c8, #b44dff, #00f0ff, #00ffa3, #ffe600, #ff8a00);
	color: #0b0b14;
}

/* Les #étiquettes n'ont pas de catégorie : elles tournent sur les fluos
   pour qu'une rangée d'étiquettes ne soit pas un bloc tout cyan. */
:is(.pz-article__tags, .pz-tagrow, .pz-footer__tags) .pz-chip:nth-child(6n + 1) { --pz-accent: #00f0ff; }
:is(.pz-article__tags, .pz-tagrow, .pz-footer__tags) .pz-chip:nth-child(6n + 2) { --pz-accent: #ff00c8; }
:is(.pz-article__tags, .pz-tagrow, .pz-footer__tags) .pz-chip:nth-child(6n + 3) { --pz-accent: #ffe600; }
:is(.pz-article__tags, .pz-tagrow, .pz-footer__tags) .pz-chip:nth-child(6n + 4) { --pz-accent: #00ffa3; }
:is(.pz-article__tags, .pz-tagrow, .pz-footer__tags) .pz-chip:nth-child(6n + 5) { --pz-accent: #ff8a00; }
:is(.pz-article__tags, .pz-tagrow, .pz-footer__tags) .pz-chip:nth-child(6n + 6) { --pz-accent: #b44dff; }

/* La rubrique d'un article et la catégorie d'un produit, sous l'image :
   de simples mots colorés, elles deviennent de vraies pastilles. */
.pz-post__cat,
.pz-product__cat {
	align-self: flex-start;
	display: inline-block;
	max-width: 100%;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--pz-accent, #00f0ff);
	color: #0b0b14;
	font-weight: 800;
	letter-spacing: .1em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

:root:not([data-pz-theme="light"]) .pz-post__cat { text-shadow: none; box-shadow: 0 0 14px -4px var(--pz-accent, #00f0ff); }

.pz-rainbow .pz-post__cat,
.pz-rainbow .pz-product__cat {
	background: linear-gradient(90deg, #ff00c8, #b44dff, #00f0ff, #00ffa3, #ffe600, #ff8a00);
}

/* La pastille de catégorie du fil ZESTYLE HALL : en clair aussi, le fluo
   plein (et non plus l'encre sombre avec texte blanc). */
:root[data-pz-theme="light"] .pz-hall__cat,
:root[data-pz-theme="light"] .pz-hall__cat:hover {
	background: var(--pz-accent, #00f0ff);
	color: var(--pz-cat-on, #0b0b14);
	box-shadow: 0 2px 10px -3px color-mix(in srgb, var(--pz-accent, #00f0ff) 80%, transparent);
}

:root[data-pz-theme="light"] .pz-rainbow .pz-hall__cat {
	background: linear-gradient(90deg, #ff00c8, #b44dff, #00f0ff, #00ffa3, #ffe600, #ff8a00);
	color: #0b0b14;
}

/* =========================================================
   BOUTON « READ » DES CARTES D'ARTICLE (07/10/2026)
   Pilule pleine à la couleur fluo de la rubrique, texte foncé, flèche
   qui avance au survol de la CARTE (toute la carte est cliquable).
   Posé dans : carte du blog (.pz-post), carte moitié-moitié
   (.pz-halfcard) et carte article du fil ZESTYLE HALL.
   ========================================================= */
.pz-readbtn {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding: 8px 16px 8px 18px;
	border-radius: 999px;
	background: var(--pz-accent, #00f0ff);
	color: #0b0b14;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .14em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 6px 18px -8px var(--pz-accent, #00f0ff);
	transition: transform var(--pz-dur) var(--pz-ease), box-shadow var(--pz-dur) var(--pz-ease), background var(--pz-dur) var(--pz-ease), color var(--pz-dur) var(--pz-ease);
}

.pz-readbtn__arrow { display: inline-block; transition: transform var(--pz-dur) var(--pz-ease); }

/* « Read this article » (11/10/2026, v0.61.2) : plus long que « Read ».
   Il ne déborde jamais d'une carte étroite : il se resserre dans les
   mini-cartes et passe à la ligne s'il le faut, au lieu d'être coupé. */
.pz-readbtn { max-width: 100%; }
.pz-mini .pz-readbtn { padding: 7px 12px 7px 14px; letter-spacing: .08em; }
@media (max-width: 420px) {
	.pz-readbtn { white-space: normal; text-align: left; }
}

/* Le bouton s'allume quand on survole la carte, pas seulement lui. */
:is(.pz-post, .pz-halfcard, .pz-hall__card, .pz-big, .pz-mini):hover .pz-readbtn,
.pz-readbtn:hover,
.pz-readbtn:focus-visible {
	background: #0b0b14;
	color: var(--pz-accent, #00f0ff);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -10px var(--pz-accent, #00f0ff);
	text-decoration: none;
}

:is(.pz-post, .pz-halfcard, .pz-hall__card, .pz-big, .pz-mini):hover .pz-readbtn__arrow,
.pz-readbtn:hover .pz-readbtn__arrow { transform: translateX(4px); }

/* Mode sombre : au survol, un fond blanc lisible plutôt que noir sur noir. */
:root:not([data-pz-theme="light"]) :is(.pz-post, .pz-halfcard, .pz-hall__card, .pz-big, .pz-mini):hover .pz-readbtn,
:root:not([data-pz-theme="light"]) .pz-readbtn:hover {
	background: #fff;
	color: #0b0b14;
	box-shadow: 0 0 22px -4px var(--pz-accent, #00f0ff);
}

.pz-rainbow .pz-readbtn {
	background: linear-gradient(90deg, #ff00c8, #b44dff, #00f0ff, #00ffa3, #ffe600, #ff8a00);
}

/* Dans le fil, le texte d'à côté est court : on ne pousse pas le bouton
   tout en bas, il suit l'extrait. */
.pz-hall__body .pz-readbtn { margin-top: 4px; }

/* Petites cartes serrées : un bouton plus compact. */
.pz-grid--auto .pz-readbtn { padding: 6px 12px 6px 14px; font-size: .64rem; }

@media (max-width: 700px) {
	.pz-readbtn { padding: 7px 13px 7px 15px; font-size: .66rem; }
}

@media (prefers-reduced-motion: reduce) {
	.pz-readbtn,
	.pz-readbtn__arrow { transition: none; }
}

/* Grande carte « à la une » et petites cartes des rangées (07/10/2026). */
.pz-big__body .pz-readbtn { margin-top: 10px; }
.pz-mini__body .pz-readbtn { margin-top: 6px; padding: 6px 12px 6px 14px; font-size: .62rem; }