/* poteaubois v2 — base : jetons de la charte (POT-30), réinitialisation, typographie, en-tête, pied de page,
   composants communs. Mobile d'abord (375 px), points de rupture 600 / 900 / 1200 px.
   Référence vivante : page « Guide de style » (page-guide-de-style.php). Points de design : PDS-xx. */

@layer vendor, reset, tokens, base, layout, components, utilities;

/* ---------- Police (auto-hébergée, licence OFL, sous-ensemble latin) ---------- */
@font-face {
	font-family: "Raleway";
	src: url("../fonts/raleway-latin-wght-normal.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Raleway";
	src: url("../fonts/raleway-latin-wght-italic.woff2") format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}
/* Police de repli aux mêmes métriques : le texte ne saute pas quand Raleway arrive (CLS). */
@font-face {
	font-family: "Raleway repli";
	src: local("Arial");
	size-adjust: 104%;
	ascent-override: 90%;
	descent-override: 23%;
	line-gap-override: 0%;
}

@layer tokens {
	:root {
		/* Couleurs (POT-30, contrastes mesurés : voir le guide de style) */
		--pb-encre: #2A2420;          /* texte : 14,45:1 sur crème */
		--pb-encre-douce: #5E554C;    /* texte secondaire : 6,88:1 sur crème */
		--pb-creme: #FBF8F3;          /* fond de page */
		--pb-blanc: #FFFFFF;          /* surfaces */
		--pb-bois: #B19A81;           /* taupe de la marque : DÉCOR SEULEMENT (2,54:1, jamais du texte) */
		--pb-bois-pale: #EFE7DC;      /* en-têtes de tableau, fonds de puces */
		--pb-bois-clair: #F6F1EA;     /* survol, bandes alternées */
		--pb-bois-800: #5C4A36;       /* texte sur bois pâle : 6,89:1 */
		--pb-action: #6B5640;         /* boutons et liens : blanc dessus 6,93:1, sur crème 6,54:1 */
		--pb-action-survol: #574533;  /* survol : blanc dessus 9,11:1 */
		--pb-foret: #2F5D46;          /* repères positifs (naturel, en stock) : 7,14:1 sur crème */
		--pb-foret-pale: #E3EDE6;     /* fond des repères positifs : vert forêt dessus 6,31:1 */
		--pb-ligne: #E2D9CC;          /* filets décoratifs */
		--pb-ligne-forte: #8C8072;    /* bordures de champs : 3,64:1 sur crème (≥ 3:1, WCAG 1.4.11) */
		--pb-erreur: #B42318;         /* uniquement les erreurs : 6,57:1 sur blanc */
		--pb-erreur-pale: #FDECEA;
		--pb-pied-texte: #EDE6DC;     /* pied de page : texte courant sur encre (13,6:1) */
		--pb-pied-doux: #D9D0C4;      /* pied de page : présentation (11,5:1) */
		--pb-pied-note: #CFC5B8;      /* pied de page : mentions (10,3:1) */
		--pb-bois-sombre: #9C8670;    /* décor du pied de page (rangée de poteaux) */
		/* Rôles */
		--pb-fond: var(--pb-creme);
		--pb-surface: var(--pb-blanc);
		--pb-texte: var(--pb-encre);
		--pb-texte-doux: var(--pb-encre-douce);
		--pb-lien: var(--pb-action);
		--pb-focus-anneau: 0 0 0 2px var(--pb-creme), 0 0 0 5px var(--pb-encre);
		/* Typographie : une seule famille, Raleway variable. Corps en 500 (le 400 de Raleway est trop maigre en petit). */
		--pb-police: "Raleway", "Raleway repli", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
		--pb-fs-xs: 0.8125rem;   /* 13 px : notes, jamais en dessous */
		--pb-fs-sm: 0.9375rem;   /* 15 px : données secondaires */
		--pb-fs-base: 1rem;      /* 16 px : texte, champs (pas de zoom iPhone) */
		--pb-fs-md: 1.125rem;    /* 18 px : chapeaux */
		--pb-fs-h4: 1.0625rem;
		--pb-fs-h3: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);   /* 18 → 21 */
		--pb-fs-h2: clamp(1.375rem, 1.2rem + 0.85vw, 1.875rem);    /* 22 → 30 */
		--pb-fs-h1: clamp(1.75rem, 1.4rem + 1.7vw, 2.625rem);      /* 28 → 42 */
		--pb-fs-affiche: clamp(2rem, 1.45rem + 2.6vw, 3.375rem);   /* 32 → 54, héros seulement */
		--pb-lh-titre: 1.12;
		--pb-lh-texte: 1.6;
		--pb-lh-donnee: 1.35;
		--pb-g-texte: 500;
		--pb-g-ui: 650;
		--pb-g-fort: 750;
		--pb-g-titre: 800;
		/* Espaces : grille de 4 px */
		--pb-s1: 0.25rem; --pb-s2: 0.5rem; --pb-s3: 0.75rem; --pb-s4: 1rem;
		--pb-s5: 1.5rem; --pb-s6: 2rem; --pb-s7: 3rem; --pb-s8: 4rem;
		--pb-section: clamp(2.5rem, 2rem + 3vw, 4.5rem);
		/* Mise en page */
		--pb-conteneur: 78rem;        /* 1248 px de contenu */
		--pb-conteneur-texte: 44rem;  /* ≈ 70 caractères par ligne */
		--pb-gouttiere: clamp(1rem, 4vw, 2rem);
		--pb-tap: 2.75rem;            /* 44 px : cible tactile minimale */
		--pb-tap-confort: 3rem;       /* 48 px : actions principales et champs */
		--pb-entete-h: 3.5rem;
		/* Formes */
		--pb-r-s: 6px; --pb-r-m: 10px; --pb-r-l: 16px; --pb-r-pill: 999px;
		--pb-ombre-1: 0 1px 2px rgb(42 36 32 / 0.06), 0 1px 1px rgb(42 36 32 / 0.04);
		--pb-ombre-2: 0 8px 24px rgb(42 36 32 / 0.12), 0 2px 6px rgb(42 36 32 / 0.06);
		--pb-duree: 160ms;
		color-scheme: only light;
	}
	@media (min-width: 900px) {
		:root { --pb-entete-h: 4rem; }
	}
	@media (prefers-reduced-motion: reduce) {
		:root { --pb-duree: 0ms; }
	}
}

@layer reset {
	*, *::before, *::after { box-sizing: border-box; }
	html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--pb-entete-h) + 1rem); }
	@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
	body { margin: 0; }
	img, svg, video { display: block; max-width: 100%; height: auto; }
	input, button, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
	button { cursor: pointer; }
	h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure, blockquote, fieldset, table { margin: 0; }
	ul[class], ol[class] { list-style: none; padding: 0; }
	fieldset { border: 0; padding: 0; min-width: 0; }
	table { border-collapse: collapse; }
	[hidden] { display: none !important; }
}

@layer base {
	body {
		background: var(--pb-fond);
		color: var(--pb-texte);
		font-family: var(--pb-police);
		font-size: var(--pb-fs-base);
		font-weight: var(--pb-g-texte);
		line-height: var(--pb-lh-texte);
		font-variant-numeric: lining-nums; /* Raleway a des chiffres elzéviriens par défaut : illisibles dans un prix (PDS) */
		font-feature-settings: "lnum" 1;
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeLegibility;
		overflow-wrap: anywhere; /* texte agrandi par le téléphone : un mot trop long se coupe, la page ne s'élargit pas */
		/* pages courtes : le pied de page descend en bas de l'écran (audit design DSA-04) */
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		min-height: 100dvh;
	}
	body > main { flex: 1 0 auto; }
	h1, h2, h3, h4 { font-weight: var(--pb-g-titre); line-height: var(--pb-lh-titre); letter-spacing: -0.015em; text-wrap: balance; }
	h1 { font-size: var(--pb-fs-h1); }
	h2 { font-size: var(--pb-fs-h2); }
	h3 { font-size: var(--pb-fs-h3); font-weight: var(--pb-g-fort); }
	h4 { font-size: var(--pb-fs-h4); font-weight: var(--pb-g-fort); }
	p, li { text-wrap: pretty; }
	@media (max-width: 599px) { h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; } } /* césure française des grands titres sur petit écran */
	strong, b { font-weight: var(--pb-g-fort); }
	small { font-size: var(--pb-fs-xs); }
	a { color: var(--pb-lien); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
	a:hover { color: var(--pb-action-survol); text-decoration-thickness: 2px; }
	:focus-visible { outline: 3px solid var(--pb-encre); outline-offset: 2px; border-radius: 2px; }
	::selection { background: var(--pb-bois-pale); color: var(--pb-encre); }
	hr { border: 0; border-top: 1px solid var(--pb-ligne); margin: var(--pb-s6) 0; }
	abbr[title] { text-decoration: none; cursor: help; }
	input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="tel"], input[type="password"], input[type="url"], select, textarea {
		font-size: var(--pb-fs-base); /* 16 px : pas de zoom automatique sur iPhone */
		min-height: var(--pb-tap-confort);
		padding: 0 var(--pb-s3);
		border: 1px solid var(--pb-ligne-forte);
		border-radius: var(--pb-r-s);
		background: var(--pb-blanc);
		color: var(--pb-encre);
		width: 100%;
	}
	textarea { padding-block: var(--pb-s3); min-height: 7rem; }
	input::placeholder, textarea::placeholder { color: #75695D; opacity: 1; } /* 4,9:1 sur blanc */
	input[type="checkbox"], input[type="radio"] { accent-color: var(--pb-action); width: 1.125rem; height: 1.125rem; }
	input[type="number"] { font-variant-numeric: lining-nums; }
	select { padding-right: 2.25rem; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A2420' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.6rem center; background-size: 1.1rem; }
	:is(input, select, textarea):focus-visible { outline: 3px solid var(--pb-encre); outline-offset: 1px; }
	:is(input, select, textarea)[aria-invalid="true"] { border-color: var(--pb-erreur); box-shadow: inset 0 0 0 1px var(--pb-erreur); }
}

@layer layout {
	.pb-conteneur { width: 100%; max-width: calc(var(--pb-conteneur) + 2 * var(--pb-gouttiere)); margin-inline: auto; padding-inline: var(--pb-gouttiere); }
	.pb-conteneur--texte { max-width: calc(var(--pb-conteneur-texte) + 2 * var(--pb-gouttiere)); }
	.pb-section { padding-block: var(--pb-section); }
	.pb-section--blanche { background: var(--pb-surface); border-block: 1px solid var(--pb-ligne); }
	.pb-section--bois { background: var(--pb-bois-clair); border-block: 1px solid var(--pb-ligne); }
	.pb-pile > * + * { margin-top: var(--pb-s4); }
	.pb-pile--serree > * + * { margin-top: var(--pb-s2); }
	.pb-pile--large > * + * { margin-top: var(--pb-s6); }
	.pb-grille { display: grid; gap: var(--pb-s4); grid-template-columns: minmax(0, 1fr); }
	@media (min-width: 600px) {
		.pb-grille--2, .pb-grille--3, .pb-grille--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}
	@media (min-width: 900px) {
		.pb-grille { gap: var(--pb-s5); }
		.pb-grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
		.pb-grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	}

}

@layer components {
	/* ---------- Icônes (sprite Lucide) ---------- */
	.pb-icone { width: 20px; height: 20px; flex: none; }

	/* ---------- Lien d'évitement et éléments masqués ---------- */
	.pb-evitement { position: absolute; left: var(--pb-s3); top: -10rem; z-index: 1000; background: var(--pb-encre); color: var(--pb-blanc); padding: var(--pb-s3) var(--pb-s4); border-radius: var(--pb-r-m); font-weight: var(--pb-g-ui); }
	.pb-evitement:focus { top: var(--pb-s3); color: var(--pb-blanc); }

	/* ---------- Boutons ---------- */
	.pb-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--pb-s2); min-height: var(--pb-tap-confort); padding: 0.6rem 1.15rem; border: 2px solid transparent; border-radius: var(--pb-r-m); font-weight: var(--pb-g-fort); font-size: var(--pb-fs-base); line-height: 1.15; text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--pb-duree), border-color var(--pb-duree), color var(--pb-duree), box-shadow var(--pb-duree); -webkit-tap-highlight-color: transparent; }
	.pb-btn .pb-icone { width: 18px; height: 18px; }
	.pb-btn { max-width: 100%; }
	.pb-btn--action { background: var(--pb-action); color: var(--pb-blanc); }
	.pb-btn--action:hover { background: var(--pb-action-survol); color: var(--pb-blanc); text-decoration: none; }
	.pb-btn--contour { background: var(--pb-blanc); color: var(--pb-encre); border-color: var(--pb-encre); }
	.pb-btn--contour:hover { background: var(--pb-bois-clair); color: var(--pb-encre); text-decoration: none; }
	.pb-btn--discret { background: transparent; color: var(--pb-action); padding-inline: var(--pb-s2); text-decoration: underline; text-underline-offset: 0.2em; }
	.pb-btn--discret:hover { color: var(--pb-action-survol); background: var(--pb-bois-clair); }
	.pb-btn--positif { background: var(--pb-foret); color: var(--pb-blanc); }
	.pb-btn--positif:hover { background: #244A37; color: var(--pb-blanc); }
	.pb-btn--petit { min-height: var(--pb-tap); padding: 0.45rem 0.85rem; font-size: var(--pb-fs-sm); }
	.pb-btn--large { width: 100%; }
	.pb-btn:disabled, .pb-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
	.pb-btn.est-occupe { position: relative; color: transparent !important; pointer-events: none; }
	.pb-btn.est-occupe::after { content: ""; position: absolute; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid var(--pb-blanc); border-right-color: transparent; animation: pb-tourne 0.7s linear infinite; }
	.pb-btn--contour.est-occupe::after { border-color: var(--pb-encre); border-right-color: transparent; }
	@keyframes pb-tourne { to { transform: rotate(1turn); } }
	.pb-btn-icone { display: inline-grid; place-items: center; flex: none; width: var(--pb-tap); height: var(--pb-tap); border: 0; border-radius: var(--pb-r-m); background: transparent; color: var(--pb-encre); text-decoration: none; }
	.pb-btn-icone:hover { background: var(--pb-bois-clair); color: var(--pb-encre); }
	.pb-btn-icone .pb-icone { width: 22px; height: 22px; }
	.pb-lien-fleche { display: inline-flex; align-items: center; gap: var(--pb-s2); min-height: var(--pb-tap); font-weight: var(--pb-g-fort); text-decoration: none; }
	.pb-lien-fleche .pb-icone { width: 18px; height: 18px; transition: transform var(--pb-duree); }
	.pb-lien-fleche:hover .pb-icone { transform: translateX(3px); }
	.pb-lien-fleche:hover { text-decoration: underline; }

	/* ---------- Bascule à deux positions (HT | TTC, Liste | Cartes) ---------- */
	.pb-bascule { display: inline-flex; padding: 0; border: 1px solid var(--pb-ligne-forte); border-radius: var(--pb-r-pill); background: var(--pb-blanc); flex: none; }
	.pb-bascule button, .pb-bascule label { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-width: var(--pb-tap); min-height: var(--pb-tap); padding: 0 0.75rem; border: 0; border-radius: var(--pb-r-pill); background: transparent; color: var(--pb-encre); font-size: var(--pb-fs-sm); font-weight: var(--pb-g-fort); letter-spacing: 0.02em; cursor: pointer; transition: background-color var(--pb-duree), color var(--pb-duree); }
	.pb-bascule button[aria-pressed="true"], .pb-bascule label:has(input:checked) { background: var(--pb-encre); color: var(--pb-blanc); }
	.pb-bascule button:not([aria-pressed="true"]):hover, .pb-bascule label:not(:has(input:checked)):hover { background: var(--pb-bois-clair); }
	.pb-bascule label:has(input:focus-visible) { outline: 3px solid var(--pb-encre); outline-offset: 2px; }
	.pb-bascule input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
	.pb-bascule .pb-icone { width: 18px; height: 18px; }
	.pb-bascule-prix { position: relative; }
	/* Sur les très petits écrans, la bascule de l'en-tête reste à 44 px de haut et 2 × 44 px de large */
	.pb-entete .pb-bascule button { padding: 0 0.5rem; font-size: 0.8125rem; letter-spacing: 0.03em; }

	/* ---------- Prix dans les deux régimes (le cache ne dépend pas du choix du visiteur) ---------- */
	html[data-pb-prix="ttc"] .pb-p-ht, html[data-pb-prix="ht"] .pb-p-ttc,
	html[data-pb-prix="ttc"] [data-pb-regime="ht"], html[data-pb-prix="ht"] [data-pb-regime="ttc"] { display: none !important; }
	.pb-prix { display: inline-flex; flex-direction: column; font-variant-numeric: lining-nums; line-height: 1.2; }
	.pb-prix > [data-pb-regime] { display: flex; flex-direction: column; gap: 0.1rem; }
	.pb-prix--droite > [data-pb-regime] { align-items: flex-end; }
	.pb-prix--ligne > [data-pb-regime] { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: var(--pb-s2); }
	.pb-prix__montant { font-weight: var(--pb-g-titre); font-size: 1.0625rem; letter-spacing: -0.005em; }
	.pb-prix__regime { font-size: max(0.72em, var(--pb-fs-xs)); font-weight: var(--pb-g-ui); color: var(--pb-texte-doux); margin-left: 0.15em; letter-spacing: 0.02em; }
	.pb-prix__autre { font-size: var(--pb-fs-xs); font-weight: var(--pb-g-texte); color: var(--pb-texte-doux); }
	.pb-prix__unite { font-size: var(--pb-fs-xs); font-weight: var(--pb-g-ui); color: var(--pb-texte-doux); }
	.pb-prix--grand .pb-prix__montant { font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); }
	.pb-prix--grand .pb-prix__autre { font-size: var(--pb-fs-sm); }
	.pb-prix--droite { align-items: flex-end; text-align: right; }
	.pb-des { font-size: var(--pb-fs-xs); font-weight: var(--pb-g-ui); color: var(--pb-texte-doux); }

	/* ---------- Badges (toujours un mot : jamais la couleur seule) ---------- */
	.pb-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; border-radius: var(--pb-r-pill); background: var(--pb-bois-pale); color: var(--pb-bois-800); font-size: var(--pb-fs-xs); font-weight: var(--pb-g-fort); line-height: 1.3; max-width: 100%; }
	.pb-badge .pb-icone { width: 14px; height: 14px; }
	.pb-badge--naturel, .pb-badge--stock { background: var(--pb-foret-pale); color: var(--pb-foret); }
	.pb-badge--traite { background: var(--pb-bois-pale); color: var(--pb-bois-800); }
	.pb-badge--brut { background: #F1EEE9; color: var(--pb-encre-douce); box-shadow: inset 0 0 0 1px var(--pb-ligne); }
	.pb-badge--commande { background: var(--pb-blanc); color: var(--pb-encre-douce); box-shadow: inset 0 0 0 1px var(--pb-ligne-forte); }
	.pb-badge--contour { background: transparent; color: var(--pb-encre); box-shadow: inset 0 0 0 1px var(--pb-ligne-forte); }
	.pb-paliers { margin-top: var(--pb-s3); padding: var(--pb-s3) var(--pb-s4); border-radius: var(--pb-r-m); background: var(--pb-foret-pale); color: var(--pb-encre); font-size: var(--pb-fs-sm); }
	.pb-paliers__titre { font-weight: var(--pb-g-fort); color: var(--pb-foret); }
	.pb-paliers__famille { margin-top: 0.15rem; color: var(--pb-texte-doux); font-size: var(--pb-fs-xs); }
	.pb-paliers__liste { display: grid; gap: 0.15rem; margin-top: var(--pb-s1); }
	.pb-paliers__liste li { display: flex; flex-wrap: wrap; gap: 0 var(--pb-s2); align-items: baseline; }
	.pb-paliers__seuil { min-width: 7.5rem; }
	.pb-paliers__prix { font-weight: var(--pb-g-fort); }
	.pb-paliers__remise { font-weight: var(--pb-g-fort); color: var(--pb-foret); }
	.pb-paliers__message { margin-top: var(--pb-s2); font-weight: var(--pb-g-ui); }
	.pb-paliers__message:empty { display: none; }
	.pb-ref__degressif { display: block; font-size: var(--pb-fs-xs); font-weight: var(--pb-g-fort); color: var(--pb-foret); }
	.pb-famille__classe { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pb-s2) var(--pb-s3); margin-top: var(--pb-s3); font-size: var(--pb-fs-sm); color: var(--pb-texte-doux); }
	.pb-fiche__classe { margin-top: var(--pb-s2); max-width: 38rem; }
	.pb-dispo { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--pb-fs-sm); font-weight: var(--pb-g-ui); }
	.pb-dispo::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--pb-foret); flex: none; }
	.pb-dispo--commande::before { background: transparent; box-shadow: inset 0 0 0 2px var(--pb-encre-douce); }
	.pb-dispo--commande { color: var(--pb-encre-douce); }

	/* ---------- Pastilles de filtre (cases à cocher habillées) ---------- */
	.pb-puces { display: flex; flex-wrap: wrap; gap: var(--pb-s2); }
	.pb-puce { position: relative; display: inline-flex; align-items: center; gap: 0.4rem; min-height: var(--pb-tap); padding: 0.3rem 0.8rem; border: 1px solid var(--pb-ligne-forte); border-radius: var(--pb-r-pill); background: var(--pb-blanc); color: var(--pb-encre); font-size: var(--pb-fs-sm); font-weight: var(--pb-g-ui); line-height: 1.2; cursor: pointer; user-select: none; transition: background-color var(--pb-duree), border-color var(--pb-duree), color var(--pb-duree); }
	.pb-puce:hover { background: var(--pb-bois-clair); border-color: var(--pb-encre); }
	.pb-puce input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
	.pb-puce:has(input:checked) { background: var(--pb-encre); border-color: var(--pb-encre); color: var(--pb-blanc); }
	.pb-puce:has(input:checked)::before { content: ""; width: 0.8rem; height: 0.8rem; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; } /* la sélection se voit aussi sans la couleur */
	.pb-puce:has(input:focus-visible) { outline: 3px solid var(--pb-encre); outline-offset: 2px; }
	.pb-puce__n { font-size: var(--pb-fs-xs); font-weight: var(--pb-g-texte); color: var(--pb-texte-doux); font-variant-numeric: lining-nums; }
	.pb-puce:has(input:checked) .pb-puce__n { color: #E6DDD1; }
	.pb-puce.est-vide { border-style: dashed; color: var(--pb-texte-doux); background: var(--pb-bois-clair); }
	.pb-puce.est-vide .pb-puce__n { color: var(--pb-texte-doux); }

	/* ---------- Quantité (− champ +) ---------- */
	.pb-qte { display: inline-flex; align-items: stretch; border: 1px solid var(--pb-ligne-forte); border-radius: var(--pb-r-m); background: var(--pb-blanc); overflow: hidden; flex: none; }
	.pb-qte button { display: grid; place-items: center; width: var(--pb-tap); min-height: var(--pb-tap); border: 0; background: transparent; color: var(--pb-encre); font-size: 1.25rem; font-weight: var(--pb-g-fort); line-height: 1; }
	.pb-qte button:hover:not(:disabled) { background: var(--pb-bois-clair); }
	.pb-qte button:disabled { color: #A89D90; cursor: not-allowed; }
	.pb-qte input { width: 3rem; min-height: var(--pb-tap); padding: 0; border: 0; border-inline: 1px solid var(--pb-ligne); border-radius: 0; text-align: center; font-weight: var(--pb-g-fort); -moz-appearance: textfield; }
	.pb-qte input::-webkit-outer-spin-button, .pb-qte input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
	.pb-qte:focus-within { outline: 3px solid var(--pb-encre); outline-offset: 1px; }
	.pb-qte input:focus-visible { outline: none; }

	/* ---------- Champs de formulaire ---------- */
	.pb-champ { display: grid; gap: 0.35rem; }
	.pb-champ > label, .pb-champ__libelle { font-weight: var(--pb-g-fort); font-size: var(--pb-fs-sm); }
	.pb-champ__aide { font-size: var(--pb-fs-xs); color: var(--pb-texte-doux); }
	.pb-champ__erreur { display: flex; gap: 0.35rem; align-items: center; font-size: var(--pb-fs-sm); font-weight: var(--pb-g-ui); color: var(--pb-erreur); }
	.pb-champ__erreur .pb-icone { width: 16px; height: 16px; }
	.pb-case { display: flex; align-items: center; gap: var(--pb-s3); min-height: var(--pb-tap); cursor: pointer; font-weight: var(--pb-g-ui); }
	.pb-case input { flex: none; margin: 0; }

	/* ---------- Surfaces et encadrés ---------- */
	.pb-carte { background: var(--pb-surface); border: 1px solid var(--pb-ligne); border-radius: var(--pb-r-l); box-shadow: var(--pb-ombre-1); padding: var(--pb-s5); }
	.pb-encadre { background: var(--pb-surface); border: 1px solid var(--pb-ligne); border-left: 4px solid var(--pb-foret); border-radius: var(--pb-r-m); padding: var(--pb-s4) var(--pb-s5); }
	.pb-encadre--bois { border-left-color: var(--pb-bois); }
	.pb-encadre h3, .pb-encadre h4 { margin-bottom: var(--pb-s2); }
	.pb-encadre ul { padding-left: 1.15rem; display: grid; gap: 0.35rem; }
	.pb-encadre li::marker { color: var(--pb-bois); }
	.pb-alerte { display: flex; gap: var(--pb-s3); align-items: flex-start; padding: var(--pb-s3) var(--pb-s4); border-radius: var(--pb-r-m); background: var(--pb-bois-clair); border: 1px solid var(--pb-ligne); font-size: var(--pb-fs-sm); }
	.pb-alerte .pb-icone { margin-top: 0.15rem; color: var(--pb-action); }
	.pb-alerte--erreur { background: var(--pb-erreur-pale); border-color: #F3C3BE; color: #7A1A12; }
	.pb-alerte--erreur .pb-icone { color: var(--pb-erreur); }
	.pb-alerte--ok { background: var(--pb-foret-pale); border-color: #C3D8CB; }
	.pb-alerte--ok .pb-icone { color: var(--pb-foret); }

	/* ---------- Titres de section ---------- */
	.pb-surtitre { display: inline-flex; align-items: center; gap: var(--pb-s2); font-size: var(--pb-fs-xs); font-weight: var(--pb-g-fort); letter-spacing: 0.08em; text-transform: uppercase; color: var(--pb-bois-800); }
	.pb-surtitre::before { content: ""; width: 1.25rem; height: 2px; background: var(--pb-bois); }
	.pb-section__tete { display: grid; gap: var(--pb-s2); margin-bottom: var(--pb-s5); max-width: var(--pb-conteneur-texte); }
	.pb-section__tete p:not(.pb-surtitre) { color: var(--pb-texte-doux); font-size: var(--pb-fs-md); }
	.pb-chapo { font-size: var(--pb-fs-md); color: var(--pb-texte-doux); max-width: 40rem; }
	.pb-page__tete { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pb-s3); padding-block: var(--pb-s4) var(--pb-s6); max-width: var(--pb-conteneur-texte); }
	.pb-note { font-size: var(--pb-fs-xs); color: var(--pb-texte-doux); }

	/* ---------- Fil d'Ariane ---------- */
	.pb-ariane { padding-block: var(--pb-s3) 0; font-size: var(--pb-fs-sm); color: var(--pb-texte-doux); }
	.pb-ariane ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--pb-s1); margin: 0; padding: 0; list-style: none; }
	.pb-ariane li { display: inline-flex; align-items: center; gap: var(--pb-s1); }
	.pb-ariane li:not(:last-child)::after { content: "/"; color: var(--pb-bois); } /* séparateur en fin d'élément : une ligne ne commence jamais par « / » (DSA-41) */
	.pb-ariane a { color: var(--pb-texte-doux); display: inline-flex; align-items: center; min-height: var(--pb-tap); }
	.pb-ariane [aria-current="page"] { color: var(--pb-encre); font-weight: var(--pb-g-ui); }

	/* ---------- Tableaux de données ---------- */
	.pb-tableau-defile { overflow-x: auto; border: 1px solid var(--pb-ligne); border-radius: var(--pb-r-m); background: var(--pb-surface); }
	.pb-tableau-defile:focus-visible { outline-offset: 2px; }
	.pb-tableau { width: 100%; font-size: var(--pb-fs-sm); line-height: var(--pb-lh-donnee); }
	.pb-tableau caption { text-align: left; font-weight: var(--pb-g-fort); padding: var(--pb-s3) var(--pb-s4); }
	.pb-tableau th, .pb-tableau td { padding: 0.65rem var(--pb-s4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--pb-ligne); }
	.pb-tableau thead th { background: var(--pb-bois-pale); color: var(--pb-bois-800); font-size: var(--pb-fs-xs); font-weight: var(--pb-g-fort); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
	.pb-tableau tbody th { font-weight: var(--pb-g-fort); }
	.pb-tableau tbody tr:last-child > * { border-bottom: 0; }
	.pb-tableau .pb-num { text-align: right; white-space: nowrap; }

	/* ---------- Accordéons (details/summary) ---------- */
	.pb-accordeon { border-bottom: 1px solid var(--pb-ligne); }
	.pb-accordeon:first-of-type { border-top: 1px solid var(--pb-ligne); }
	.pb-accordeon > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--pb-s3); min-height: var(--pb-tap-confort); padding-block: var(--pb-s3); list-style: none; cursor: pointer; font-weight: var(--pb-g-fort); }
	.pb-accordeon > summary::-webkit-details-marker { display: none; }
	.pb-accordeon > summary::after { content: ""; width: 1.1rem; height: 1.1rem; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform var(--pb-duree); }
	.pb-accordeon[open] > summary::after { transform: rotate(180deg); }
	.pb-accordeon > summary:hover { color: var(--pb-action); }
	.pb-accordeon__corps { padding-bottom: var(--pb-s4); color: var(--pb-encre); }
	.pb-accordeon__corps > * + * { margin-top: var(--pb-s3); }

	/* ---------- Liste de définitions (fiche technique) ---------- */
	.pb-caracteristiques { display: grid; grid-template-columns: minmax(min(7rem, 40%), auto) minmax(0, 1fr); border: 1px solid var(--pb-ligne); border-radius: var(--pb-r-m); overflow: hidden; background: var(--pb-surface); font-size: var(--pb-fs-sm); line-height: var(--pb-lh-donnee); }
	.pb-caracteristiques dt, .pb-caracteristiques dd { padding: 0.6rem var(--pb-s4); border-bottom: 1px solid var(--pb-ligne); }
	.pb-caracteristiques dt { background: var(--pb-bois-clair); font-weight: var(--pb-g-fort); color: var(--pb-bois-800); }
	.pb-caracteristiques dt:nth-last-of-type(1), .pb-caracteristiques dd:last-of-type { border-bottom: 0; }

	/* ---------- Étapes (formulaire en plusieurs temps) ---------- */
	.pb-etapes { display: flex; gap: var(--pb-s1); counter-reset: etape; }
	.pb-etapes li { flex: 1; display: grid; gap: 0.35rem; font-size: var(--pb-fs-xs); font-weight: var(--pb-g-ui); color: var(--pb-texte-doux); }
	.pb-etapes li::before { content: ""; height: 6px; border-radius: var(--pb-r-pill); background: var(--pb-ligne); }
	.pb-etapes li.est-faite::before, .pb-etapes li[aria-current="step"]::before { background: var(--pb-foret); }
	.pb-etapes li[aria-current="step"] { color: var(--pb-encre); font-weight: var(--pb-g-fort); }
	.pb-etapes__nom { display: none; }
	@media (min-width: 600px) { .pb-etapes__nom { display: block; } }

	/* ---------- Annonce (notification) ---------- */
	.pb-annonce { position: fixed; left: 50%; bottom: max(var(--pb-s4), env(safe-area-inset-bottom)); z-index: 300; transform: translateX(-50%); width: min(30rem, calc(100% - 2 * var(--pb-gouttiere))); }
	.pb-annonce:empty { display: none; }
	.pb-annonce > div { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pb-s2) var(--pb-s4); padding: var(--pb-s3) var(--pb-s4); border-radius: var(--pb-r-m); background: var(--pb-encre); color: var(--pb-blanc); box-shadow: var(--pb-ombre-2); font-weight: var(--pb-g-ui); }
	.pb-annonce a { color: var(--pb-blanc); font-weight: var(--pb-g-fort); display: inline-flex; align-items: center; min-height: var(--pb-tap); }
	.pb-annonce :focus-visible { outline-color: var(--pb-creme); }
	/* Mobile : le message « ajouté au panier » s'affiche en haut, sous l'en-tête, loin de la barre d'achat et des bulles flottantes (14/10/2026). */
	@media (max-width: 899px) { .pb-annonce { top: calc(var(--pb-entete-h, 4rem) + var(--pb-s2)); bottom: auto; } }

	/* ---------- Messages de WooCommerce (ajout au panier, erreurs) ---------- */
	.woocommerce-notices-wrapper:empty { display: none; }
	.woocommerce-message, .woocommerce-info, .woocommerce-error { list-style: none; margin: var(--pb-s4) 0; padding: var(--pb-s3) var(--pb-s4); border-radius: var(--pb-r-m); border: 1px solid var(--pb-ligne); background: var(--pb-foret-pale); color: var(--pb-encre); font-weight: var(--pb-g-ui); display: flex; flex-wrap: wrap; align-items: center; gap: var(--pb-s2) var(--pb-s4); }
	.woocommerce-info { background: var(--pb-bois-clair); }
	.woocommerce-error { background: var(--pb-erreur-pale); border-color: #F3C3BE; color: #7A1A12; }
	.woocommerce-message .button, .woocommerce-info .button { order: 2; display: inline-flex; align-items: center; min-height: var(--pb-tap); padding: 0 var(--pb-s4); border-radius: var(--pb-r-m); background: var(--pb-action); color: var(--pb-blanc); font-weight: var(--pb-g-fort); text-decoration: none; }

	/* ---------- Image absente (photos à fournir, POT-07) ---------- */
	.pb-sans-photo { display: grid; place-items: center; width: 100%; height: 100%; aspect-ratio: 4 / 3; background:
		radial-gradient(circle at 50% 50%, transparent 0 18%, rgb(177 154 129 / 0.25) 18% 19%, transparent 19% 30%, rgb(177 154 129 / 0.22) 30% 31%, transparent 31% 42%, rgb(177 154 129 / 0.18) 42% 43%, transparent 43%),
		var(--pb-bois-clair); color: var(--pb-bois-800); }
	.pb-sans-photo .pb-icone { width: 32px; height: 32px; color: var(--pb-bois); }
}

@layer components {
	/* ---------- Conseils d'usage (accueil, familles, fiches) ---------- */
	.pb-conseils__grille { display: grid; gap: var(--pb-s4); grid-template-columns: minmax(0, 1fr); }
	.pb-conseils__bloc h3, .pb-conseils__bloc h4 { display: flex; align-items: center; gap: var(--pb-s2); font-size: var(--pb-fs-md); }
	.pb-conseils__bloc h3 .pb-icone, .pb-conseils__bloc h4 .pb-icone { color: var(--pb-foret); width: 22px; height: 22px; }
	.pb-conseils__bloc .pb-tableau-defile { margin-top: var(--pb-s3); }
	.pb-conseils__bloc.pb-encadre { border-left-color: var(--pb-bois); }
	@media (max-width: 599.98px) {
		.pb-conseils .pb-tableau thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
		.pb-conseils .pb-tableau, .pb-conseils .pb-tableau tbody, .pb-conseils .pb-tableau tr, .pb-conseils .pb-tableau th, .pb-conseils .pb-tableau td { display: block; }
		.pb-conseils .pb-tableau tr { padding: var(--pb-s3) var(--pb-s3); border-bottom: 1px solid var(--pb-ligne); }
		.pb-conseils .pb-tableau tbody tr:last-child { border-bottom: 0; }
		.pb-conseils .pb-tableau th, .pb-conseils .pb-tableau td { padding: 0.1rem 0; border: 0; text-align: left; white-space: normal; }
		.pb-conseils .pb-tableau td[data-label]::before { content: attr(data-label) "\00A0: "; color: var(--pb-texte-doux); font-weight: var(--pb-g-ui); }
	}
	.pb-tableau--compact th, .pb-tableau--compact td { padding: 0.55rem var(--pb-s3); }
	.pb-tableau tr.est-courant > * { background: var(--pb-foret-pale); }
	.pb-tableau tr.est-courant .pb-badge { margin-left: var(--pb-s1); }
	@media (min-width: 900px) {
		.pb-conseils__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
		.pb-conseils__bloc--large { grid-column: 1 / -1; }
		.pb-conseils__grille--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	}
	/* ---------- Questions fréquentes ---------- */
	.pb-faq__liste { max-width: var(--pb-conteneur-texte); }
}

@layer components {
	/* En-tête et pied de page : dans la couche des composants, après .pb-btn-icone (sinon ses règles d'affichage
	   l'emporteraient sur celles de l'en-tête, la couche « components » passant après « layout »). */
	/* ---------- En-tête : logo, menu, bascule HT/TTC (POT-24, toutes les pages), compte, panier ---------- */
	.pb-entete { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--pb-blanc) 96%, transparent); border-bottom: 1px solid var(--pb-ligne); }
	@supports (backdrop-filter: blur(8px)) { .pb-entete { backdrop-filter: saturate(1.4) blur(8px); } }
	.pb-entete::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--pb-bois); } /* filet taupe : l'identité, en décor */
	.pb-entete__barre { display: flex; align-items: center; gap: var(--pb-s2); min-height: var(--pb-entete-h); min-width: 0; }
	.pb-logo { display: inline-flex; align-items: center; flex: 0 1 auto; min-height: var(--pb-tap); min-width: 0; margin-right: auto; border-radius: var(--pb-r-s); }
	.pb-logo__image { display: block; width: auto; height: 40px; max-width: 100%; object-fit: contain; object-position: left center; } /* 139 × 40 sur mobile ; taille réelle 188 × 54 sur ordinateur */
	@media (min-width: 600px) { .pb-logo__image { height: 46px; } }
	.pb-entete__actions { display: flex; align-items: center; gap: var(--pb-s1); }
	.pb-entete__compte-lien { display: none; }
	.pb-entete__panier { position: relative; }
	.pb-entete__nb { position: absolute; top: 2px; right: 0; min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem; border-radius: var(--pb-r-pill); background: var(--pb-action); color: var(--pb-blanc); font-size: 0.75rem; font-weight: var(--pb-g-fort); line-height: 1.25rem; text-align: center; }

	.pb-nav { display: none; }
	/* TAL-34 : voile sous le menu ouvert, sous l'en-tête (z-index 100) */
	.pb-nav-voile { position: fixed; inset: 0; z-index: 99; background: rgb(42 36 32 / 0.35); }
	.pb-nav-voile[hidden] { display: none; }
	.pb-nav.est-ouvert { display: block; position: fixed; inset: var(--pb-entete-h) 0 auto 0; max-height: calc(100dvh - var(--pb-entete-h)); overflow: auto; background: var(--pb-blanc); border-bottom: 1px solid var(--pb-ligne); box-shadow: var(--pb-ombre-2); }
	.pb-nav__liste { padding: var(--pb-s2) var(--pb-gouttiere); }
	.pb-nav__liste a { display: flex; align-items: center; gap: var(--pb-s3); min-height: var(--pb-tap-confort); color: var(--pb-encre); text-decoration: none; font-weight: var(--pb-g-ui); font-size: var(--pb-fs-md); border-bottom: 1px solid var(--pb-ligne); }
	.pb-nav__liste a[aria-current="page"] { color: var(--pb-action); }
	.pb-nav__liste a[aria-current="page"]::after { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--pb-bois); }
	.pb-nav__sup { padding: var(--pb-s3) var(--pb-gouttiere) var(--pb-s5); display: grid; gap: var(--pb-s2); }
	.pb-nav__prix { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pb-s2) var(--pb-s4); padding: var(--pb-s3) var(--pb-gouttiere) 0; font-weight: var(--pb-g-ui); }
	.pb-sans-js .pb-nav__prix { padding: var(--pb-s2) 0; }
	.pb-nav__sup a { display: inline-flex; align-items: center; gap: var(--pb-s2); min-height: var(--pb-tap); color: var(--pb-encre); font-weight: var(--pb-g-ui); }
	/* Sans JavaScript : le menu reste lisible sous la barre (le bouton n'agit pas) */
	.pb-sans-js .pb-entete__menu { display: none; }
	.pb-sans-js .pb-nav { display: block; width: 100%; order: 10; }
	.pb-sans-js .pb-entete__barre { flex-wrap: wrap; }
	.pb-sans-js .pb-nav__liste { display: flex; flex-wrap: wrap; gap: 0 var(--pb-s4); padding: 0 0 var(--pb-s2); }
	.pb-sans-js .pb-nav__liste a { border: 0; font-size: var(--pb-fs-base); }
	.pb-sans-js .pb-nav__sup { display: none; }

	@media (min-width: 600px) {
		.pb-entete__compte-lien { display: inline-flex; }
	}
	@media (min-width: 1000px) {
		.pb-entete__menu { display: none; }
		.pb-logo { margin-right: var(--pb-s5); }
		.pb-logo__image { height: 54px; }
		.pb-nav, .pb-sans-js .pb-nav { display: block; position: static; margin-right: auto; order: 0; width: auto; }
		.pb-sans-js .pb-entete__barre { flex-wrap: nowrap; }
		.pb-nav__liste, .pb-sans-js .pb-nav__liste { display: flex; gap: var(--pb-s1); padding: 0; }
		.pb-nav__liste a, .pb-sans-js .pb-nav__liste a { position: relative; min-height: var(--pb-tap); padding-inline: var(--pb-s3); border: 0; border-radius: var(--pb-r-s); font-size: var(--pb-fs-sm); }
		.pb-nav__liste a:hover { background: var(--pb-bois-clair); }
		.pb-nav__liste a[aria-current="page"]::after { position: absolute; left: var(--pb-s3); right: var(--pb-s3); bottom: 6px; width: auto; height: 2px; border-radius: 2px; }
		.pb-nav__sup { display: none; }
	}

	/* ---------- Pied de page : identité HOPSTOCK, contact, liens légaux ---------- */
	.pb-pied { margin-top: var(--pb-s8); background: var(--pb-encre); color: var(--pb-pied-texte); font-size: var(--pb-fs-sm); }
	.pb-pied::before { content: ""; display: block; height: 6px; background: repeating-linear-gradient(90deg, var(--pb-bois) 0 22px, var(--pb-bois-sombre) 22px 26px); } /* rangée de poteaux stylisée : décor */
	.pb-pied a { color: #FFFFFF; text-decoration-color: rgb(255 255 255 / 0.45); }
	.pb-pied a:hover { color: #FFFFFF; text-decoration-color: #FFFFFF; }
	.pb-pied :focus-visible { outline-color: var(--pb-creme); }
	.pb-pied__grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pb-s6); padding-block: var(--pb-s7) var(--pb-s6); }
	.pb-pied__marque .pb-logo { margin: 0; padding: 0.4rem 0.75rem; background: var(--pb-creme); border-radius: var(--pb-r-m); } /* logo sombre sur fond clair, couleurs d'origine */
	.pb-pied__marque .pb-logo__image { height: 44px; }
	.pb-pied__marque p { margin-top: var(--pb-s3); max-width: 26rem; color: var(--pb-pied-doux); }
	.pb-pied__titre { font-weight: var(--pb-g-fort); color: #FFFFFF; font-size: var(--pb-fs-base); margin-bottom: var(--pb-s3); }
	.pb-pied__liste { display: grid; gap: 0; }
	.pb-pied__liste a { display: inline-flex; align-items: center; min-height: var(--pb-tap); }
	/* « Gérer mes cookies » (bouton de Complianz) présenté comme les liens de la colonne */
	.pb-pied__gerer { all: unset; display: inline-flex; align-items: center; min-height: var(--pb-tap); color: #FFFFFF; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgb(255 255 255 / 0.45); text-underline-offset: 0.2em; cursor: pointer; }
	.pb-pied__gerer:hover { text-decoration-color: #FFFFFF; text-decoration-thickness: 2px; }
	.pb-pied__gerer:focus-visible { outline: 3px solid var(--pb-creme); outline-offset: 2px; }
	.pb-pied__contact p + p { margin-top: var(--pb-s2); }
	.pb-pied__contact a { display: inline-flex; align-items: center; gap: var(--pb-s2); min-height: var(--pb-tap); }
	.pb-pied__contact .pb-icone { width: 18px; height: 18px; color: var(--pb-bois); }
	.pb-pied__mentions { border-top: 1px solid rgb(255 255 255 / 0.14); padding-block: var(--pb-s4) var(--pb-s5); color: var(--pb-pied-note); font-size: var(--pb-fs-xs); display: flex; flex-wrap: wrap; gap: var(--pb-s2) var(--pb-s5); justify-content: space-between; }
	.pb-pied__mentions button { all: unset; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; color: #FFFFFF; min-height: var(--pb-tap); display: inline-flex; align-items: center; }
	.pb-pied__mentions button:focus-visible { outline: 3px solid var(--pb-creme); outline-offset: 2px; }
	.hs-retract-lien { display: none; } /* lien du mu-plugin de rétractation : repris dans les liens légaux du pied de page */
	@media (min-width: 600px) { .pb-pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
	@media (min-width: 1000px) { .pb-pied__grille { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); } }
}

@layer utilities {
	.pb-sans-js .pb-js-seulement, .pb-js .pb-sans-js-seulement { display: none !important; }
	.pb-vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
	/* texte réservé aux lecteurs d'écran de WordPress et des extensions (Complianz, WooCommerce) : la feuille de Hello qui le
	   masquait n'est plus chargée (lot 1) ; sans cette règle, « Préférences », « Statistiques »… s'affichaient à côté des cases */
	.screen-reader-text:not(:focus) { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }
	.pb-doux { color: var(--pb-texte-doux); }
	.pb-num { font-variant-numeric: lining-nums; white-space: nowrap; }
	.pb-mt2 { margin-top: var(--pb-s2); } .pb-mt3 { margin-top: var(--pb-s3); } .pb-mt4 { margin-top: var(--pb-s4); } .pb-mt5 { margin-top: var(--pb-s5); } .pb-mt6 { margin-top: var(--pb-s6); }
	.pb-actions { display: flex; flex-wrap: wrap; gap: var(--pb-s3); align-items: center; }
	@media (max-width: 599px) { .pb-seulement-large { display: none !important; } }
	@media (min-width: 600px) { .pb-seulement-mobile { display: none !important; } }
}