@charset "UTF-8";
/* ==========================================================================
   Holz Becker — habillage complet du thème enfant Storefront
   Direction : papier crème, écorce, braise. Éditorial et artisanal.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Jetons de design
   -------------------------------------------------------------------------- */
/*
 * Palette reprise de boisdhermalle.com (négoce de bois belge) :
 *   #88B53B primaire · #A8D05A survol · #20301A vert profond
 *   #7EBD00 badges certification · #911E1E promotions
 *   #F6F6F6 fond doux · #E8E8E8 surfaces · #262626 texte · #666666 secondaire
 * La typographie est Open Sans, sur toute la profondeur du site.
 */
:root {
	--kb-paper:      #f6f6f6;
	--kb-paper-2:    #e8e8e8;
	--kb-paper-3:    #dcdcdc;
	--kb-card:       #ffffff;

	--kb-bark:       #20301a;
	--kb-bark-2:     #2b4023;
	--kb-bark-3:     #38512d;

	--kb-ink:        #262626;
	--kb-ink-2:      #4f4f4f;
	--kb-ink-3:      #666666;

	--kb-ember:      #88b53b;
	--kb-ember-2:    #a8d05a;
	--kb-ember-3:    #edf4df;
	--kb-moss:       #7ebd00;
	--kb-sand:       #a8d05a;
	--kb-promo:      #911e1e;

	/* Le vert de marque passe à 2,6:1 sur blanc : illisible en petit corps.
	   Cette déclinaison assombrie (4,9:1) sert aux textes, liens et surtitres ;
	   le vert de marque reste sur les aplats (boutons, badges, barres). */
	--kb-ember-text: #4e7a12;

	--kb-line:       rgba(38, 38, 38, .14);
	--kb-line-2:     rgba(38, 38, 38, .08);
	--kb-line-light: rgba(240, 245, 236, .18);

	/*
	 * Une seule famille pour tout le site. Les trois variables sont conservées :
	 * elles disent encore le rôle de chaque texte — titre d'accroche, titre
	 * secondaire, texte courant — et permettront de redonner une police propre à
	 * l'un d'eux sans rouvrir la feuille entière. Ce qui distingue désormais les
	 * niveaux, c'est la graisse et l'interlettrage, non le dessin.
	 */
	--kb-display: "Open Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
	--kb-serif:   "Open Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
	--kb-sans:    "Open Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;

	--kb-shell:   1288px;
	--kb-gutter:  clamp(1.15rem, 4vw, 3rem);
	--kb-radius:  8px;
	--kb-radius-lg: 12px;
	--kb-radius-pill: 9999px;

	--kb-shadow-sm: 0 4px 16px rgba(0, 0, 0, .10);
	--kb-shadow:    0 4px 16px rgba(0, 0, 0, .10);
	--kb-shadow-lg: 0 8px 32px rgba(0, 0, 0, .16);

	--kb-ease: cubic-bezier(.22, .61, .36, 1);

	--kb-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E");
	--kb-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.4l2.95 6.1 6.65.92-4.83 4.63 1.18 6.63L12 17.6l-5.95 3.08 1.18-6.63L2.4 9.42l6.65-.92z'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
.holz-becker,
.holz-becker body {
	background: var(--kb-paper);
}

.holz-becker {
	font-family: var(--kb-sans);
	font-size: 17px;
	line-height: 1.68;
	color: var(--kb-ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/* Garde-fou anti-débordement : « hidden » fait de l'élément une boîte de
   défilement, ce qui neutralise silencieusement tout « position: sticky »
   posé en dessous — sommaires et colonnes d'appui compris. « clip » coupe
   pareillement mais ne crée pas de boîte de défilement. La déclaration
   « hidden » reste au-dessus : un navigateur qui ignore « clip » retrouve
   l'ancien comportement plutôt que de laisser la page déborder.
   Storefront pose la même règle sur « .site ». */
.holz-becker,
.holz-becker .site { overflow-x: clip; }

/* Grain global : donne une texture papier à l'ensemble du site. */
.holz-becker::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9990;
	pointer-events: none;
	background-image: var(--kb-grain);
	opacity: .035;
	mix-blend-mode: multiply;
}

.holz-becker h1, .holz-becker h2, .holz-becker h3, .holz-becker h4, .holz-becker h5, .holz-becker h6 {
	font-family: var(--kb-display);
	font-optical-sizing: auto;
	font-weight: 600;
	letter-spacing: -.018em;
	line-height: 1.08;
	color: var(--kb-ink);
	text-wrap: balance;
}

.holz-becker p { text-wrap: pretty; }

.holz-becker a { color: var(--kb-ember-text); text-decoration: none; }
.holz-becker a:hover { color: var(--kb-ember); }

.holz-becker ::selection { background: var(--kb-ember); color: var(--kb-paper); }

/* Anneau de focus.
   Storefront pose « a:focus, input:focus, textarea:focus, button:focus
   { outline: 2px solid #7f54b3 } » : un anneau violet admin qui apparaît même
   au clic souris. On neutralise :focus… */
.holz-becker a:focus,
.holz-becker button:focus,
.holz-becker input:focus,
.holz-becker select:focus,
.holz-becker textarea:focus,
.holz-becker [tabindex]:focus {
	outline: none;
}

/* …et on ne montre l'anneau qu'à la navigation clavier, en vert de marque. */
.holz-becker :focus-visible,
.holz-becker a:focus-visible,
.holz-becker button:focus-visible,
.holz-becker input:focus-visible,
.holz-becker select:focus-visible,
.holz-becker textarea:focus-visible,
.holz-becker [tabindex]:focus-visible {
	outline: 2px solid var(--kb-ember-text);
	outline-offset: 3px;
	border-radius: 3px;
}

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

/* --------------------------------------------------------------------------
   3. Conteneurs
   -------------------------------------------------------------------------- */
.holz-becker .col-full {
	max-width: var(--kb-shell);
	padding-left: var(--kb-gutter);
	padding-right: var(--kb-gutter);
	margin: 0 auto;
}

.holz-becker-shell {
	max-width: var(--kb-shell);
	margin: 0 auto;
	padding-left: var(--kb-gutter);
	padding-right: var(--kb-gutter);
}

.holz-becker .site-content { padding-top: 0; }
.holz-becker:not(.holz-becker-home) .site-content { padding-bottom: clamp(3rem, 7vw, 6rem); }
.holz-becker-home #content.site-content > .col-full { max-width: none; padding: 0; }
.holz-becker-home #content.site-content { padding: 0; }

/* Storefront pose 4,24em de marge sous l'en-tête de la page d'accueil
   (« .home.page:not(…) .site-header », quatre classes : plus fort que
   « .holz-becker .site-header »). Elle laissait une bande claire vide au-dessus du hero. */
.holz-becker.holz-becker-home.home .site-header { margin-bottom: 0; }

.holz-becker .site-content .col-full { padding-top: 0; }

.holz-becker-section {
	position: relative;
	padding: clamp(3.6rem, 8vw, 7.5rem) 0;
	isolation: isolate;
}

.holz-becker-section--paper  { background: var(--kb-paper); }
.holz-becker-section--paper2 { background: var(--kb-paper-2); }
.holz-becker-section--blanc  { background: #fff; }
.holz-becker-section--bark   { background: var(--kb-bark); color: rgba(240, 245, 236, .82); }

.holz-becker-section--bark h1,
.holz-becker-section--bark h2,
.holz-becker-section--bark h3 { color: var(--kb-paper); }

/* Fine ligne de séparation entre deux sections claires. */
.holz-becker-section--paper + .holz-becker-section--paper::before,
.holz-becker-section--paper2 + .holz-becker-section--paper::before,
.holz-becker-section--paper + .holz-becker-section--blanc::before,
.holz-becker-section--blanc + .holz-becker-section--paper::before {
	content: "";
	position: absolute;
	inset: 0 var(--kb-gutter) auto;
	height: 1px;
	background: var(--kb-line-2);
}

/* --------------------------------------------------------------------------
   4. Typographie éditoriale
   -------------------------------------------------------------------------- */
.holz-becker-eyebrow {
	display: flex;
	align-items: center;
	gap: .7rem;
	margin: 0 0 1.15rem;
	font-family: var(--kb-sans);
	font-size: .715rem;
	font-weight: 700;
	letter-spacing: .19em;
	text-transform: uppercase;
	color: var(--kb-ember-text);
}

.holz-becker-eyebrow > span:first-child {
	display: block;
	width: 2.2rem;
	height: 1px;
	background: currentColor;
	opacity: .55;
	flex: none;
}

.holz-becker-eyebrow--light { color: var(--kb-ember-2); }

.holz-becker-sechead {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.6rem 3rem;
	margin-bottom: clamp(2.2rem, 4vw, 3.6rem);
}

.holz-becker-sechead__main { max-width: 42rem; }

.holz-becker-sechead__title {
	margin: 0;
	font-size: clamp(2.05rem, 4.1vw, 3.35rem);
	font-weight: 600;
}

.holz-becker-sechead__intro {
	margin: 1.05rem 0 0;
	max-width: 40rem;
	font-size: 1.03rem;
	color: var(--kb-ink-2);
}

.holz-becker-section--bark .holz-becker-sechead__intro { color: rgba(240, 245, 236, .68); }

.holz-becker-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: .88rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--kb-ink);
	border-bottom: 1px solid var(--kb-line);
	padding-bottom: .35rem;
	transition: gap .3s var(--kb-ease), color .25s, border-color .25s;
}

.holz-becker-link-arrow svg { transition: transform .35s var(--kb-ease); }
.holz-becker-link-arrow:hover { color: var(--kb-ember); border-color: var(--kb-ember); gap: .8rem; }
.holz-becker-section--bark .holz-becker-link-arrow { color: var(--kb-paper); border-color: var(--kb-line-light); }
.holz-becker-section--bark .holz-becker-link-arrow:hover { color: var(--kb-ember-2); border-color: var(--kb-ember-2); }

/* --------------------------------------------------------------------------
   5. Boutons
   -------------------------------------------------------------------------- */
.holz-becker .holz-becker-btn,
.holz-becker button,
.holz-becker input[type="button"],
.holz-becker input[type="reset"],
.holz-becker input[type="submit"],
.holz-becker .button,
.holz-becker a.button,
.holz-becker .woocommerce-Button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	padding: .82rem 1.5rem;
	border: 1px solid transparent;
	/* Boutons en gélule, comme sur la référence. */
	border-radius: var(--kb-radius-pill);
	background: var(--kb-ink);
	color: var(--kb-paper);
	font-family: var(--kb-sans);
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .045em;
	text-transform: uppercase;
	line-height: 1.15;
	text-shadow: none;
	cursor: pointer;
	transition: background .25s var(--kb-ease), color .25s, border-color .25s, transform .25s var(--kb-ease), box-shadow .25s;
	box-shadow: none;
}

.holz-becker .holz-becker-btn:hover,
.holz-becker button:hover,
.holz-becker input[type="submit"]:hover,
.holz-becker .button:hover,
.holz-becker a.button:hover {
	background: var(--kb-bark-3);
	color: var(--kb-paper);
	transform: translateY(-1px);
	box-shadow: var(--kb-shadow-sm);
}

/* Attention : « .holz-becker a.button » (0,2,1) bat une simple classe (0,2,0).
   Les variantes colorées sont donc qualifiées pour rester prioritaires. */
.holz-becker .holz-becker-btn.holz-becker-btn--ember,
.holz-becker a.holz-becker-btn--ember,
.holz-becker button.holz-becker-btn--ember,
.holz-becker a.button.alt,
.holz-becker .button.alt,
.holz-becker button.alt,
.holz-becker a.add_to_cart_button,
.holz-becker .add_to_cart_button,
.holz-becker button.single_add_to_cart_button,
.holz-becker .single_add_to_cart_button,
.holz-becker a.checkout-button,
.holz-becker .checkout-button,
.holz-becker #place_order {
	background: var(--kb-ember);
	/* Texte foncé sur le vert de marque : 6,5:1, là où le blanc plafonne à 2,6:1. */
	color: var(--kb-bark);
	border-color: transparent;
}

.holz-becker .holz-becker-btn.holz-becker-btn--ember:hover,
.holz-becker a.holz-becker-btn--ember:hover,
.holz-becker button.holz-becker-btn--ember:hover,
.holz-becker a.button.alt:hover,
.holz-becker .button.alt:hover,
.holz-becker button.alt:hover,
.holz-becker a.add_to_cart_button:hover,
.holz-becker .add_to_cart_button:hover,
.holz-becker button.single_add_to_cart_button:hover,
.holz-becker .single_add_to_cart_button:hover,
.holz-becker a.checkout-button:hover,
.holz-becker .checkout-button:hover,
.holz-becker #place_order:hover {
	background: var(--kb-ember-2);
	color: var(--kb-bark);
}

.holz-becker .holz-becker-btn--dark { background: var(--kb-bark); color: var(--kb-paper); }
.holz-becker .holz-becker-btn--dark:hover { background: var(--kb-bark-3); }

.holz-becker .holz-becker-btn--ghost,
.holz-becker .holz-becker-btn--outline {
	background: transparent;
	border-color: var(--kb-line);
	color: var(--kb-ink);
}

.holz-becker .holz-becker-btn--outline {
	border-color: rgba(240, 245, 236, .38);
	color: var(--kb-paper);
}

.holz-becker .holz-becker-btn--outline:hover {
	background: rgba(240, 245, 236, .1);
	border-color: var(--kb-paper);
	color: var(--kb-paper);
}

.holz-becker .holz-becker-btn--ghost:hover { background: rgba(38, 38, 38, .06); color: var(--kb-ink); }

.holz-becker .holz-becker-btn--lg { padding: 1.05rem 1.9rem; font-size: .92rem; }

.holz-becker .holz-becker-btn[disabled],
.holz-becker button[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

/* --------------------------------------------------------------------------
   6. Badges, étoiles, puces
   -------------------------------------------------------------------------- */
.holz-becker-badge {
	display: inline-flex;
	align-items: center;
	padding: .3rem .6rem;
	border-radius: 999px;
	font-size: .672rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	background: var(--kb-ink);
	color: var(--kb-paper);
	white-space: nowrap;
}

.holz-becker-badge--sale   { background: var(--kb-promo); color: #fff; }
.holz-becker-badge--custom { background: var(--kb-moss); color: var(--kb-bark); }
.holz-becker-badge--low    { background: var(--kb-sand); color: var(--kb-bark); }
.holz-becker-badge--out    { background: rgba(38, 38, 38, .78); color: var(--kb-paper); }

.holz-becker-stars {
	display: inline-block;
	width: 5.4em;
	height: 1.08em;
	font-size: .78rem;
	background: linear-gradient(90deg,
		var(--kb-ember) 0 calc(var(--rating, 5) / 5 * 100%),
		rgba(38, 38, 38, .2) calc(var(--rating, 5) / 5 * 100%) 100%);
	-webkit-mask-image: var(--kb-star);
	mask-image: var(--kb-star);
	-webkit-mask-size: 1.08em 1.08em;
	mask-size: 1.08em 1.08em;
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	flex: none;
}

.holz-becker-stars--lg { font-size: 1.05rem; }

.holz-becker-section--bark .holz-becker-stars {
	background: linear-gradient(90deg,
		var(--kb-ember-2) 0 calc(var(--rating, 5) / 5 * 100%),
		rgba(240, 245, 236, .22) calc(var(--rating, 5) / 5 * 100%) 100%);
}

/* --------------------------------------------------------------------------
   7. Bandeau d'annonces
   -------------------------------------------------------------------------- */
.holz-becker-announce {
	background: var(--kb-bark);
	color: rgba(240, 245, 236, .8);
	font-size: .78rem;
	letter-spacing: .035em;
	border-bottom: 1px solid rgba(240, 245, 236, .08);
}

.holz-becker-announce__viewport { overflow: hidden; }

.holz-becker-announce__track {
	display: flex;
	align-items: center;
	gap: 2.6rem;
	width: max-content;
	padding: .62rem 0;
	animation: holz-becker-marquee 46s linear infinite;
}

.holz-becker-announce__item {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	white-space: nowrap;
}

.holz-becker-announce__item svg { color: var(--kb-ember-2); flex: none; }

@keyframes holz-becker-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

.holz-becker-announce:hover .holz-becker-announce__track { animation-play-state: paused; }

/* --------------------------------------------------------------------------
   8. En-tête
   -------------------------------------------------------------------------- */
.holz-becker .site-header {
	position: sticky;
	top: 0;
	z-index: 900;
	background: rgba(240, 245, 236, .92);
	backdrop-filter: saturate(140%) blur(14px);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	border-bottom: 1px solid var(--kb-line-2);
	padding: 0;
	margin: 0;
	background-image: none !important;
	transition: box-shadow .3s var(--kb-ease), background .3s;
}

.holz-becker .site-header.is-stuck {
	box-shadow: 0 14px 34px -28px rgba(32, 48, 26, .8);
	background: rgba(240, 245, 236, .97);
}

/* --- Barre utilitaire : pays desservis, horaires, téléphone --------------
   Elle se replie au défilement pour ne garder que la barre principale
   collée en haut. */
.holz-becker-utility {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.2rem;
	flex-wrap: wrap;
	height: 40px;
	overflow: hidden;
	border-bottom: 1px solid var(--kb-line-2);
	transition: height .35s var(--kb-ease), opacity .3s, border-color .3s;
}

.holz-becker .site-header.is-stuck .holz-becker-utility {
	height: 0;
	opacity: 0;
	border-color: transparent;
	pointer-events: none;
}

.holz-becker-utility__hours,
.holz-becker-utility__phone {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin: 0;
	font-size: .76rem;
	color: var(--kb-ink-3);
	white-space: nowrap;
}

.holz-becker-utility__hours svg { color: var(--kb-ink-3); flex: none; }

.holz-becker-utility__phone {
	font-weight: 700;
	color: var(--kb-ink);
	margin-left: auto;
}

.holz-becker-utility__phone svg { color: var(--kb-ember-text); flex: none; }
.holz-becker-utility__phone:hover { color: var(--kb-ember-text); }

/* --- Identité du site et bascule entre boutiques --- */
.holz-becker-identity {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	flex: none;
}

.holz-becker-identity__label {
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--kb-ink-2);
	white-space: nowrap;
}

.holz-becker .holz-becker-switch {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	flex: none;
	padding: .3rem .7rem .3rem .35rem;
	border: 1px solid var(--kb-line);
	border-radius: var(--kb-radius-pill);
	color: var(--kb-ink-2);
	background: var(--kb-card);
	transition: border-color .25s, color .25s, background .25s;
}

.holz-becker .holz-becker-switch:hover {
	border-color: var(--kb-ember);
	color: var(--kb-ember-text);
	background: var(--kb-ember-3);
}

.holz-becker-switch__flag { display: inline-flex; flex: none; }

.holz-becker-switch__label {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.holz-becker-flag {
	display: block;
	width: 21px;
	height: 14px;
	border-radius: 2px;
	overflow: hidden;
	position: relative;
	transition: transform .25s var(--kb-ease);
}

.holz-becker-flag svg { display: block; width: 100%; height: 100%; }

/* Liseré interne : détache les drapeaux clairs (Monaco, Luxembourg) du fond. */
.holz-becker-flag::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 2px;
	box-shadow: inset 0 0 0 1px rgba(38, 38, 38, .22);
}

.holz-becker .holz-becker-ship:hover .holz-becker-flag { transform: translateY(-2px); }
.holz-becker .holz-becker-ship:hover .holz-becker-flag:nth-child(2) { transition-delay: .03s; }
.holz-becker .holz-becker-ship:hover .holz-becker-flag:nth-child(3) { transition-delay: .06s; }
.holz-becker .holz-becker-ship:hover .holz-becker-flag:nth-child(4) { transition-delay: .09s; }
.holz-becker .holz-becker-ship:hover .holz-becker-flag:nth-child(5) { transition-delay: .12s; }
.holz-becker .holz-becker-ship:hover .holz-becker-flag:nth-child(6) { transition-delay: .15s; }

.holz-becker-header {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1.4rem;
	min-height: 78px;
}

/* La règle générique « .holz-becker button » est plus spécifique qu'une classe
   seule : on double la classe pour reprendre la main sur l'affichage. */
.holz-becker .holz-becker-burger {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--kb-line);
	color: var(--kb-ink);
	border-radius: var(--kb-radius);
	box-shadow: none;
}

.holz-becker .holz-becker-burger:hover {
	background: rgba(38, 38, 38, .06);
	color: var(--kb-ember);
	transform: none;
	box-shadow: none;
}

/* --- Logo --- */
.holz-becker-logo {
	display: inline-flex;
	align-items: center;
	gap: .72rem;
	color: var(--kb-ink);
}

.holz-becker-logo__mark {
	width: 42px;
	height: 42px;
	flex: none;
	transition: transform .45s var(--kb-ease);
}

.holz-becker-logo__mark svg { width: 100%; height: 100%; display: block; }

/* Un monogramme carré ne pivote pas : il se soulève. */
.holz-becker-logo:hover .holz-becker-logo__mark { transform: translateY(-2px); }

.holz-becker-logo__type { display: flex; flex-direction: column; line-height: 1.05; }

.holz-becker-logo__name {
	font-family: var(--kb-display);
	font-size: 1.42rem;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--kb-ink);
}

.holz-becker-logo__name em {
	font-style: italic;
	font-weight: 400;
	color: var(--kb-ember);
	margin-left: .12em;
}

.holz-becker-logo__baseline {
	font-size: .59rem;
	font-weight: 600;
	letter-spacing: .155em;
	text-transform: uppercase;
	color: var(--kb-ink-3);
	margin-top: .22rem;
}

/* --- Navigation --- */
.holz-becker-nav { justify-self: center; }

.holz-becker-nav__list {
	display: flex;
	align-items: center;
	gap: .35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.holz-becker-nav__list > li { position: relative; }

.holz-becker-nav__list > li > a {
	display: block;
	padding: .6rem .85rem;
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--kb-ink);
	border-radius: var(--kb-radius);
	transition: color .22s, background .22s;
	/* « Öfen & Kamine » passait sur deux lignes et déformait la barre. */
	white-space: nowrap;
}

.holz-becker-nav__list > li > a::after {
	content: "";
	display: block;
	height: 2px;
	width: 0;
	margin-top: .22rem;
	background: var(--kb-ember);
	transition: width .3s var(--kb-ease);
}

.holz-becker-nav__list > li:hover > a,
.holz-becker-nav__list > li.current-menu-item > a,
.holz-becker-nav__list > li.current-menu-parent > a { color: var(--kb-ember); }

.holz-becker-nav__list > li:hover > a::after,
.holz-becker-nav__list > li.current-menu-item > a::after { width: 100%; }

/* Sous-menus */
.holz-becker-nav__list .sub-menu {
	position: absolute;
	top: calc(100% + .55rem);
	left: -.4rem;
	min-width: 244px;
	list-style: none;
	margin: 0;
	padding: .5rem;
	background: var(--kb-card);
	border: 1px solid var(--kb-line-2);
	border-radius: var(--kb-radius-lg);
	box-shadow: var(--kb-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .22s, transform .28s var(--kb-ease), visibility .22s;
	z-index: 30;
}

.holz-becker-nav__list > li:hover .sub-menu,
.holz-becker-nav__list > li:focus-within .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.holz-becker-nav__list .sub-menu a {
	display: block;
	padding: .55rem .75rem;
	font-size: .88rem;
	font-weight: 500;
	color: var(--kb-ink-2);
	border-radius: var(--kb-radius);
}

.holz-becker-nav__list .sub-menu a:hover { background: var(--kb-paper-2); color: var(--kb-ember); }

/* --- Actions --- */
.holz-becker-header__actions {
	display: flex;
	align-items: center;
	gap: .35rem;
	justify-self: end;
}

.holz-becker-header__phone {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin-right: .5rem;
	padding: .4rem .6rem;
	font-size: .84rem;
	font-weight: 700;
	color: var(--kb-ink);
	white-space: nowrap;
}

.holz-becker-header__phone svg { color: var(--kb-ember); }
.holz-becker-header__phone:hover { color: var(--kb-ember); }

.holz-becker .holz-becker-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--kb-radius);
	color: var(--kb-ink);
	box-shadow: none;
}

.holz-becker .holz-becker-iconbtn:hover {
	background: rgba(38, 38, 38, .06);
	border-color: var(--kb-line-2);
	color: var(--kb-ember);
	transform: none;
	box-shadow: none;
}

.holz-becker .holz-becker-cartbtn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-left: .3rem;
	padding: .6rem .9rem;
	background: var(--kb-ink);
	color: var(--kb-paper);
	border-radius: var(--kb-radius-pill);
	font-weight: 700;
	font-size: .85rem;
	transition: background .25s;
}

.holz-becker .holz-becker-cartbtn:hover { background: var(--kb-ember); color: #fff; }

.holz-becker-cart-badge__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 21px;
	height: 21px;
	padding: 0 .32rem;
	border-radius: 999px;
	background: var(--kb-ember);
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
	transition: background .25s;
}

.holz-becker .holz-becker-cartbtn:hover .holz-becker-cart-badge__num { background: #fff; color: var(--kb-ember); }
.holz-becker-cart-badge__num.is-empty { background: rgba(240, 245, 236, .22); }

/* --- Recherche --- */
.holz-becker-searchbar {
	padding: 0 0 1.5rem;
	border-top: 1px solid var(--kb-line-2);
	margin-top: -1px;
	padding-top: 1.5rem;
	animation: holz-becker-fade-down .34s var(--kb-ease) both;
}

.holz-becker-searchbar[hidden] { display: none; }

.holz-becker-searchbar .woocommerce-product-search {
	display: flex;
	gap: .6rem;
	max-width: 680px;
}

.holz-becker-searchbar .search-field {
	flex: 1;
	font-size: 1.02rem;
	padding: .9rem 1.1rem;
}

.holz-becker-searchbar__hint {
	margin: .8rem 0 0;
	font-size: .82rem;
	color: var(--kb-ink-3);
}

.holz-becker-searchbar__hint a { border-bottom: 1px solid var(--kb-line); }

@keyframes holz-becker-fade-down {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: none; }
}

/* --- Tiroir mobile --- */
.holz-becker-drawer {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(88vw, 380px);
	z-index: 1000;
	background: var(--kb-paper);
	border-left: 1px solid var(--kb-line);
	/* Marge basse généreuse : la barre mobile de Storefront est fixée en bas. */
	padding: 1.4rem var(--kb-gutter) 5.5rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX(100%);
	transition: transform .42s var(--kb-ease);
	box-shadow: var(--kb-shadow-lg);
}

.holz-becker-drawer[hidden] { display: block; visibility: hidden; }
.holz-becker-drawer.is-open { transform: none; visibility: visible; }

.holz-becker-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.2rem;
}

.holz-becker-drawer__head .holz-becker-eyebrow { margin: 0; }

.holz-becker-drawer__list { list-style: none; margin: 0; padding: 0; }

.holz-becker-drawer__list > li { border-bottom: 1px solid var(--kb-line-2); }

.holz-becker-drawer__list a {
	display: block;
	padding: .95rem .2rem;
	font-family: var(--kb-display);
	font-size: 1.28rem;
	font-weight: 600;
	color: var(--kb-ink);
}

.holz-becker-drawer__list .sub-menu {
	list-style: none;
	margin: 0 0 .7rem;
	padding: 0 0 0 .9rem;
	border-left: 2px solid var(--kb-ember-3);
}

.holz-becker-drawer__list .sub-menu a {
	font-family: var(--kb-sans);
	font-size: .95rem;
	font-weight: 500;
	padding: .45rem .2rem;
	color: var(--kb-ink-2);
}

.holz-becker-drawer__foot { display: grid; gap: .6rem; margin-top: 1.6rem; }

.holz-becker-scrim {
	position: fixed;
	inset: 0;
	z-index: 999;
	background: rgba(32, 48, 26, .5);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity .35s;
}

.holz-becker-scrim.is-open { opacity: 1; }

/* Tiroir ouvert : la barre mobile Storefront s'efface pour ne pas le masquer. */
.holz-becker-drawer-open .storefront-handheld-footer-bar { display: none; }


/* Pays livrés dans le tiroir mobile */
.holz-becker-drawer__ship {
	margin-top: .4rem;
	padding-top: 1rem;
	border-top: 1px solid var(--kb-line-2);
}

.holz-becker-drawer__ship .holz-becker-ship { flex-wrap: wrap; gap: .5rem .7rem; }
.holz-becker-drawer__ship .holz-becker-flag { width: 26px; height: 17px; }
/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */
.holz-becker-hero {
	position: relative;
	background: var(--kb-bark);
	color: rgba(240, 245, 236, .82);
	overflow: hidden;
	isolation: isolate;
}

.holz-becker-hero__bg {
	position: absolute;
	inset: 0;
	background-image: var(--hero-img);
	background-size: cover;
	background-position: 50% 42%;
	opacity: .2;
	filter: grayscale(.4) contrast(1.1);
	z-index: -2;
}

.holz-becker-hero__glow {
	position: absolute;
	inset: -30% -10% auto -20%;
	height: 120%;
	background:
		radial-gradient(58% 52% at 18% 30%, rgba(136, 181, 59, .35), transparent 70%),
		radial-gradient(46% 40% at 82% 12%, rgba(168, 208, 90, .22), transparent 72%);
	z-index: -1;
	pointer-events: none;
}

.holz-becker-hero__shell {
	display: grid;
	grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
	/*
	 * Le bandeau se cale aussi sur la hauteur d'écran : l'en-tête prend déjà
	 * ~230 px, et des marges calées sur la seule largeur repoussaient les
	 * chiffres clés sous la ligne de flottaison, même en 1920 × 1080.
	 */
	padding-top: clamp(2rem, 5vh, 3.6rem);
	padding-bottom: clamp(2rem, 5vh, 3.4rem);
}

.holz-becker .holz-becker-hero__title {
	margin: 0 0 1.1rem;
	/* Plafond choisi pour que « Unter 18 % Restfeuchte, » tienne sur une ligne : trois lignes au lieu de quatre. */
	font-size: clamp(2.2rem, min(4.3vw, 6.2vh), 3.3rem);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -.028em;
	color: var(--kb-paper);
	/* L'accroche était un H1 : elle en garde l'équilibrage de lignes. */
	text-wrap: balance;
}

.holz-becker .holz-becker-hero__title em {
	font-style: italic;
	font-weight: 400;
	color: var(--kb-ember-2);
	position: relative;
}

.holz-becker .holz-becker-hero__title em::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: .06em;
	height: .07em;
	background: currentColor;
	opacity: .35;
	transform: scaleX(0);
	transform-origin: left;
	animation: holz-becker-underline 1.1s .8s var(--kb-ease) forwards;
}

@keyframes holz-becker-underline { to { transform: scaleX(1); } }

.holz-becker-hero__lead {
	margin: 0 0 1.6rem;
	max-width: 36rem;
	font-size: clamp(1.02rem, 1.35vw, 1.14rem);
	color: rgba(240, 245, 236, .74);
}

.holz-becker-hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2rem; }

.holz-becker-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 2.4rem;
	margin: 0;
	padding-top: 1.3rem;
	border-top: 1px solid var(--kb-line-light);
}

.holz-becker-hero__stats dt {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(240, 245, 236, .5);
	margin-bottom: .3rem;
}

.holz-becker-hero__stats dd {
	margin: 0;
	font-family: var(--kb-display);
	font-size: clamp(1.5rem, 2.2vw, 2rem);
	font-weight: 500;
	color: var(--kb-paper);
	font-variant-numeric: tabular-nums;
}

.holz-becker-hero__stats small { font-size: .5em; color: var(--kb-ember-2); }

/* --- Visuel --- */
.holz-becker-hero__visual { position: relative; }

.holz-becker-hero__ring {
	position: absolute;
	inset: -18% -22% auto auto;
	width: 128%;
	color: rgba(168, 208, 90, .2);
	pointer-events: none;
	z-index: 0;
}

.holz-becker-rings { width: 100%; height: auto; display: block; }

.holz-becker-rings circle {
	transform-origin: 200px 200px;
	animation: holz-becker-ring-in .9s var(--kb-ease) both;
	animation-delay: calc(var(--i) * 70ms + 200ms);
}

@keyframes holz-becker-ring-in {
	from { opacity: 0; transform: scale(.86); }
	to   { opacity: 1; transform: scale(1); }
}

.holz-becker-hero__card {
	position: relative;
	z-index: 1;
	margin: 0;
	border-radius: var(--kb-radius-lg);
	overflow: hidden;
	background: var(--kb-bark-2);
	box-shadow: var(--kb-shadow-lg);
	transform: rotate(-1.1deg);
	border: 1px solid rgba(240, 245, 236, .1);
}

.holz-becker-hero__card img {
	display: block;
	width: 100%;
	height: clamp(260px, min(34vw, 46vh), 470px);
	object-fit: cover;
}

.holz-becker-hero__card figcaption {
	display: flex;
	flex-direction: column;
	gap: .18rem;
	padding: 1rem 1.2rem;
	background: rgba(32, 48, 26, .92);
	border-top: 1px solid rgba(240, 245, 236, .1);
}

.holz-becker-hero__caption-title {
	font-family: var(--kb-display);
	font-size: 1.02rem;
	color: var(--kb-paper);
}

.holz-becker-hero__caption-sub {
	font-size: .74rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: rgba(240, 245, 236, .45);
}

/* Jauge d'humidité */
.holz-becker-gauge {
	position: absolute;
	z-index: 2;
	left: -1.6rem;
	bottom: 3.2rem;
	width: 122px;
	height: 122px;
	display: grid;
	place-items: center;
	background: var(--kb-paper);
	border-radius: 50%;
	box-shadow: var(--kb-shadow-lg);
	animation: holz-becker-float 7s ease-in-out infinite;
}

.holz-becker-gauge svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }

.holz-becker-gauge circle { fill: none; stroke-width: 6; stroke-linecap: round; }
.holz-becker-gauge__track { stroke: rgba(38, 38, 38, .1); }

.holz-becker-gauge__value {
	stroke: var(--kb-ember);
	stroke-dasharray: 301.6;
	stroke-dashoffset: 301.6;
	animation: holz-becker-gauge 1.4s 1s var(--kb-ease) forwards;
}

@keyframes holz-becker-gauge { to { stroke-dashoffset: calc(301.6 - 301.6 * var(--pct)); } }

.holz-becker-gauge__label { text-align: center; line-height: 1.1; }

.holz-becker-gauge__label strong {
	display: block;
	font-family: var(--kb-display);
	font-size: 1.24rem;
	color: var(--kb-ink);
}

.holz-becker-gauge__label span {
	font-size: .62rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--kb-ink-3);
}

@keyframes holz-becker-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-9px); }
}

.holz-becker-hero__chip {
	position: absolute;
	z-index: 2;
	right: -.5rem;
	top: 1.6rem;
	display: flex;
	align-items: center;
	gap: .55rem;
	padding: .7rem .95rem;
	background: var(--kb-moss);
	color: var(--kb-bark);
	border-radius: var(--kb-radius);
	box-shadow: var(--kb-shadow-lg);
	font-size: .72rem;
	line-height: 1.25;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 700;
}

.holz-becker-hero__chip em { font-style: normal; opacity: .7; font-weight: 500; }

/* Bandeau essences */
.holz-becker-hero__ticker {
	border-top: 1px solid rgba(240, 245, 236, .1);
	overflow: hidden;
	background: rgba(32, 48, 26, .55);
}

.holz-becker-hero__ticker-track {
	display: flex;
	align-items: center;
	gap: 1.6rem;
	width: max-content;
	padding: .9rem 0;
	animation: holz-becker-marquee 38s linear infinite;
	font-family: var(--kb-display);
	font-size: 1.02rem;
	color: rgba(240, 245, 236, .38);
	letter-spacing: .02em;
}

.holz-becker-hero__ticker-track i { color: var(--kb-ember); font-style: normal; }

/* Le surtitre porte le H1 de l'accueil : « .holz-becker h1 » ne doit pas lui imposer
   la graisse, l'interlettrage ni la couleur des titres. */
.holz-becker .holz-becker-hero h1.holz-becker-eyebrow {
	font-family: var(--kb-sans);
	font-size: .715rem;
	font-weight: 700;
	letter-spacing: .19em;
	line-height: inherit;
	text-transform: uppercase;
	text-wrap: pretty;
	color: var(--kb-ember-2);
	margin: 0 0 1.15rem;
	padding: 0;
}

/* --------------------------------------------------------------------------
   10. Univers (catégories)
   -------------------------------------------------------------------------- */
/* Cinq univers sur deux rangées équilibrées : 2+1+1 puis 2+2. */
.holz-becker-univers__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.6rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.holz-becker-univers__item.is-feature,
.holz-becker-univers__item:nth-child(4),
.holz-becker-univers__item:nth-child(5) { grid-column: span 2; }

.holz-becker-univers__item > a {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 300px;
	border-radius: var(--kb-radius-lg);
	overflow: hidden;
	background: var(--kb-bark-2);
	color: var(--kb-paper);
	isolation: isolate;
}

.holz-becker-univers__media { position: absolute; inset: 0; z-index: -2; }

.holz-becker-univers__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.05s var(--kb-ease), filter .5s;
}

.holz-becker-univers__item > a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Voile assez marqué pour que le texte tienne aussi sur une photo claire. */
	background: linear-gradient(178deg, rgba(32, 48, 26, .2) 0%, rgba(32, 48, 26, .55) 52%, rgba(32, 48, 26, .92) 100%);
	transition: background .45s;
}

.holz-becker-univers__item > a:hover .holz-becker-univers__media img { transform: scale(1.06); }

.holz-becker-univers__item > a:hover::after {
	background: linear-gradient(178deg, rgba(32, 48, 26, .25) 0%, rgba(56, 81, 45, .6) 50%, rgba(78, 122, 18, .94) 100%);
}

.holz-becker-univers__body {
	margin-top: auto;
	padding: 1.5rem 1.5rem 1.4rem;
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

.holz-becker-univers__count {
	align-self: flex-start;
	padding: .22rem .55rem;
	border: 1px solid rgba(240, 245, 236, .35);
	border-radius: 999px;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(240, 245, 236, .82);
	margin-bottom: .35rem;
}

.holz-becker-univers__title {
	font-family: var(--kb-serif);
	font-size: clamp(1.38rem, 2.05vw, 1.8rem);
	font-weight: 600;
	letter-spacing: -.005em;
	color: var(--kb-paper);
	line-height: 1.14;
}

.holz-becker-univers__desc {
	font-size: .875rem;
	color: rgba(240, 245, 236, .68);
	max-width: 34ch;
}

.holz-becker-univers__go {
	position: absolute;
	top: 1.2rem;
	right: 1.2rem;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(240, 245, 236, .14);
	border: 1px solid rgba(240, 245, 236, .26);
	color: var(--kb-paper);
	backdrop-filter: blur(4px);
	transition: background .3s, transform .35s var(--kb-ease);
}

.holz-becker-univers__item > a:hover .holz-becker-univers__go {
	background: var(--kb-ember);
	border-color: var(--kb-ember);
	transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   11. Cartes produit
   -------------------------------------------------------------------------- */
.holz-becker ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
	gap: clamp(1.1rem, 2vw, 1.9rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* WooCommerce ajoute .columns-N : on respecte le nombre de colonnes réglé. */
@media (min-width: 992px) {
	.holz-becker ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.holz-becker ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.holz-becker ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.holz-becker ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.holz-becker ul.products::before,
.holz-becker ul.products::after { content: none; display: none; }

.holz-becker ul.products li.product {
	float: none !important;
	clear: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left;
}

.holz-becker-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--kb-card);
	border: 1px solid var(--kb-line-2);
	border-radius: var(--kb-radius-lg);
	overflow: hidden;
	transition: transform .4s var(--kb-ease), box-shadow .4s var(--kb-ease), border-color .3s;
}

.holz-becker-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--kb-shadow-lg);
	border-color: rgba(136, 181, 59, .3);
}

.holz-becker-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--kb-paper-2);
	overflow: hidden;
}

.holz-becker-card__media-link { display: block; height: 100%; }

.holz-becker-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .9s var(--kb-ease);
}

.holz-becker-card:hover .holz-becker-card__media img { transform: scale(1.05); }

.holz-becker-card__badges {
	position: absolute;
	top: .8rem;
	left: .8rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .35rem;
	z-index: 2;
}

.holz-becker-card__peek {
	position: absolute;
	left: .8rem;
	right: .8rem;
	bottom: .8rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	padding: .55rem;
	background: rgba(32, 48, 26, .88);
	color: var(--kb-paper);
	border-radius: var(--kb-radius);
	font-size: .73rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .3s, transform .35s var(--kb-ease);
	pointer-events: none;
}

.holz-becker-card:hover .holz-becker-card__peek { opacity: 1; transform: none; }

.holz-becker-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: .35rem;
	padding: 1.15rem 1.2rem 1.25rem;
}

.holz-becker-card__cat {
	margin: 0;
	font-size: .67rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--kb-ember-text);
}

.holz-becker .holz-becker-card__title {
	margin: 0;
	font-size: 1.12rem;
	font-weight: 600;
	line-height: 1.22;
	padding: 0;
}

.holz-becker .holz-becker-card__title a { color: var(--kb-ink); }
.holz-becker .holz-becker-card__title a:hover { color: var(--kb-ember); }

.holz-becker-card__spec {
	margin: .1rem 0 0;
	font-size: .82rem;
	color: var(--kb-ink-3);
	line-height: 1.45;
}

.holz-becker-card__rating {
	display: flex;
	align-items: center;
	gap: .45rem;
	margin: .2rem 0 0;
	font-size: .78rem;
	color: var(--kb-ink-3);
}

.holz-becker-card__rating em { font-style: normal; opacity: .8; }

.holz-becker-card__foot {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: .7rem;
	margin-top: auto;
	padding-top: .95rem;
}

.holz-becker-card__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .1rem .5rem;
	line-height: 1.15;
}

.holz-becker .holz-becker-card__price .price {
	display: block;
	margin: 0;
	font-family: var(--kb-display);
	font-size: 1.32rem;
	font-weight: 600;
	color: var(--kb-ink);
}

.holz-becker .holz-becker-card__price .price del {
	font-size: .72em;
	font-family: var(--kb-sans);
	color: var(--kb-ink-3);
	opacity: .8;
	margin-right: .35rem;
	font-weight: 500;
}

.holz-becker .holz-becker-card__price .price ins { text-decoration: none; color: var(--kb-ember); }

.holz-becker .holz-becker-card__price .woocommerce-Price-currencySymbol { font-size: .82em; }

.holz-becker-card__unit {
	flex: 1 0 100%;
	font-size: .7rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--kb-ink-3);
	margin-top: .1rem;
}

.holz-becker .woocommerce-price-suffix {
	font-family: var(--kb-sans);
	font-size: .62em;
	font-weight: 600;
	letter-spacing: .08em;
	color: var(--kb-ink-3);
}

.holz-becker .holz-becker-card__cta {
	width: 100%;
	padding: .74rem 1rem;
	font-size: .78rem;
	white-space: nowrap;
}

.holz-becker .holz-becker-card__cta.added { display: none; }

.holz-becker .holz-becker-card__cta.loading::after {
	content: "";
	width: 12px;
	height: 12px;
	margin-left: .4rem;
	border: 2px solid rgba(255, 255, 255, .4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: holz-becker-spin .7s linear infinite;
}

@keyframes holz-becker-spin { to { transform: rotate(360deg); } }

.holz-becker .added_to_cart {
	display: inline-flex;
	align-items: center;
	margin-top: .55rem;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--kb-ember-text);
	border-bottom: 1px solid currentColor;
}

.holz-becker-card__stock {
	display: flex;
	align-items: center;
	gap: .38rem;
	margin: .75rem 0 0;
	font-size: .74rem;
	color: var(--kb-ember-text);
}

.holz-becker-card__stock.is-out { color: var(--kb-ink-3); }
.holz-becker-card__stock svg { flex: none; }

/* --------------------------------------------------------------------------
   12. Sélection (fond blanc, format compact)

   Les photos produit sont des palettes détourées sur blanc : sur un fond blanc
   elles se fondent dans la page, et la carte disparaîtrait sans limite dessinée.
   D'où le filet gris clair, la zone image très légèrement teintée pour la
   détacher du corps de carte, et l'ombre réservée au survol.

   La hauteur, elle, tenait à l'image. Elle passe en 3:2 — contenue et non
   rognée, un recadrage couperait le haut de la pile — et tout le reste de la
   carte se resserre autour : titre sur deux lignes au plus, gouttières, bouton.
   -------------------------------------------------------------------------- */
.holz-becker-selection { padding-block: clamp(2.2rem, 4.4vw, 3.8rem); }

.holz-becker-selection .holz-becker-sechead { margin-bottom: clamp(1.3rem, 2.6vw, 2rem); }
.holz-becker-selection .holz-becker-sechead__title { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.holz-becker-selection .holz-becker-sechead__intro { margin-top: .7rem; font-size: .95rem; }

.holz-becker-selection ul.products { gap: clamp(.8rem, 1.4vw, 1.2rem); }

/*
 * Huit cartes sous 992 px : en grille, deux colonnes étiraient le bloc sur
 * 1 800 à 2 300 px, et la carte devenait trop étroite pour « In den Warenkorb »
 * (le libellé débordait du bouton). Une rangée qui défile au doigt garde des
 * cartes de 240 px au moins, et la carte suivante qui dépasse invite à glisser.
 */
@media (max-width: 991px) {
	.holz-becker .holz-becker-selection ul.products {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(240px, 30%);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--kb-gutter);
		/* La rangée court jusqu'aux bords de l'écran ; la marge basse laisse
		   la place à l'ombre des cartes, que le défilement rognerait. */
		margin-inline: calc(-1 * var(--kb-gutter));
		padding: .2rem var(--kb-gutter) .9rem;
		scrollbar-width: thin;
	}

	.holz-becker .holz-becker-selection ul.products > li.product { scroll-snap-align: start; }
}

.holz-becker-selection .holz-becker-card {
	background: #fff;
	border-color: #e4e4e4;
	box-shadow: none;
}

.holz-becker-selection .holz-becker-card:hover {
	border-color: var(--kb-ember);
	box-shadow: 0 10px 26px -18px rgba(23, 24, 26, .45);
}

.holz-becker-selection .holz-becker-card__media {
	aspect-ratio: 3 / 2;
	background: #fafafa;
	border-bottom: 1px solid #efefef;
}

.holz-becker-selection .holz-becker-card__media img {
	object-fit: contain;
	padding: .45rem;
}

.holz-becker-selection .holz-becker-card__body {
	gap: .18rem;
	padding: .75rem .85rem .85rem;
}

.holz-becker-selection .holz-becker-card__cat { font-size: .63rem; letter-spacing: .13em; }

.holz-becker-selection .holz-becker-card__title {
	font-size: .98rem;
	line-height: 1.28;
	/* Deux lignes au plus : sans cette borne, un titre d'import à rallonge
	   étirerait toute la rangée. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.holz-becker-selection .holz-becker-card__price .price { font-size: 1.14rem; }
.holz-becker-selection .holz-becker-card__foot { padding-top: .55rem; gap: .45rem; }
.holz-becker-selection .holz-becker-card__cta { padding: .56rem 1rem; font-size: .74rem; }
.holz-becker-selection .holz-becker-card__stock { margin-top: .45rem; font-size: .71rem; }

/* --- Guide d'achat des catégories (sous la grille, première page) --------- */
.holz-becker-ratgeber {
	max-width: 52rem;
	margin: clamp(2.5rem, 6vw, 4.5rem) auto 0;
	padding-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--kb-line-2);
	color: var(--kb-ink-2, #444);
	font-size: 1rem;
	line-height: 1.75;
}

.holz-becker .holz-becker-ratgeber h2 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); margin: 0 0 .9rem; }
.holz-becker .holz-becker-ratgeber h3 { font-size: 1.12rem; margin: 2rem 0 .5rem; }
.holz-becker-ratgeber p,
.holz-becker-ratgeber ul,
.holz-becker-ratgeber ol { margin: 0 0 1rem; }
.holz-becker-ratgeber ul,
.holz-becker-ratgeber ol { padding-left: 1.2rem; }
.holz-becker-ratgeber li { margin-bottom: .35rem; }

/* Un tableau large défile dans son cadre plutôt que d'élargir la page. */
.holz-becker-ratgeber__tableau { overflow-x: auto; margin: 0 0 1.2rem; }
.holz-becker-ratgeber table { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: .92rem; }
.holz-becker-ratgeber th,
.holz-becker-ratgeber td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--kb-line-2); vertical-align: top; }
.holz-becker-ratgeber th { color: var(--kb-ink); font-weight: 600; }

.holz-becker-ratgeber details { border-bottom: 1px solid var(--kb-line-2); padding: .85rem 0; }
.holz-becker-ratgeber details:first-of-type { border-top: 1px solid var(--kb-line-2); }
.holz-becker-ratgeber summary { cursor: pointer; font-weight: 600; color: var(--kb-ink); }
.holz-becker-ratgeber details p { margin: .6rem 0 0; }

/* --------------------------------------------------------------------------
   13. Savoir-faire
   -------------------------------------------------------------------------- */
.holz-becker-process__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
	gap: clamp(1.8rem, 4vw, 4rem);
	align-items: start;
	margin-bottom: clamp(2.4rem, 5vw, 4rem);
}

.holz-becker-process__head .holz-becker-sechead { display: block; margin: 0; }

.holz-becker-process__panel {
	background: var(--kb-card);
	border: 1px solid var(--kb-line-2);
	border-radius: var(--kb-radius-lg);
	padding: clamp(1.4rem, 2.5vw, 2rem);
	box-shadow: var(--kb-shadow-sm);
}

.holz-becker-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.05rem; }

.holz-becker-bars li {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: .3rem .8rem;
	align-items: center;
}

.holz-becker-bars__label { font-size: .85rem; font-weight: 600; color: var(--kb-ink-2); }

.holz-becker-bars__val {
	font-family: var(--kb-display);
	font-size: 1rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	grid-row: 1;
	grid-column: 2;
}

.holz-becker-bars__track {
	grid-column: 1 / -1;
	display: block;
	height: 9px;
	border-radius: 999px;
	background: var(--kb-paper-2);
	overflow: hidden;
}

.holz-becker-bars__track i {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--kb-ember), var(--kb-ember-2));
	transition: width 1.2s var(--kb-ease);
}

.is-revealed .holz-becker-bars__track i { width: var(--w); }
.holz-becker-bars__track i.is-mid { background: linear-gradient(90deg, var(--kb-sand), #c3dd8a); }
.holz-becker-bars__track i.is-low { background: linear-gradient(90deg, #9a9a9a, #b8b8b8); }

.holz-becker-process__note { margin: 1.1rem 0 0; font-size: .76rem; color: var(--kb-ink-3); }

.holz-becker-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: clamp(1.2rem, 2.4vw, 2.2rem);
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: step;
}

.holz-becker-steps__item {
	position: relative;
	padding-top: 1.7rem;
	border-top: 2px solid var(--kb-ink);
}

.holz-becker-steps__item::after {
	content: "";
	position: absolute;
	top: -2px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--kb-ember);
	transition: width 1s var(--kb-ease) .2s;
}

.is-revealed.holz-becker-steps__item::after { width: 42%; }

.holz-becker-steps__num {
	font-family: var(--kb-display);
	font-size: .95rem;
	font-weight: 600;
	color: var(--kb-ember);
	letter-spacing: .06em;
}

.holz-becker-steps__item h3 {
	margin: .5rem 0 .6rem;
	font-size: 1.28rem;
	font-weight: 600;
}

.holz-becker-steps__item p { margin: 0; font-size: .92rem; color: var(--kb-ink-2); }

.holz-becker-steps__meta {
	display: block;
	margin-top: .85rem;
	font-size: .71rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--kb-ink-3);
}

/* --------------------------------------------------------------------------
   14. Bloc granulés + calculateur
   -------------------------------------------------------------------------- */
.holz-becker-split__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(1.4rem, 3vw, 2.6rem);
	align-items: stretch;
}

.holz-becker-promo {
	display: flex;
	flex-direction: column;
	background: var(--kb-card);
	border: 1px solid var(--kb-line-2);
	border-radius: var(--kb-radius-lg);
	overflow: hidden;
	box-shadow: var(--kb-shadow-sm);
}

.holz-becker-promo__media {
	position: relative;
	flex: 1 1 auto;
	min-height: 260px;
	background-image: var(--img);
	background-size: cover;
	background-position: center;
	background-color: var(--kb-paper-3);
}

.holz-becker-promo__tag {
	position: absolute;
	left: 1.1rem;
	bottom: 1.1rem;
	padding: .42rem .8rem;
	background: rgba(32, 48, 26, .88);
	color: var(--kb-paper);
	border-radius: 999px;
	font-size: .69rem;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
}

.holz-becker-promo__body { padding: clamp(1.4rem, 2.6vw, 2.2rem); }

.holz-becker-promo__body h3 {
	margin: 0 0 .9rem;
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	line-height: 1.12;
}

.holz-becker-promo__body > p { margin: 0 0 1.3rem; color: var(--kb-ink-2); font-size: .96rem; }

.holz-becker-promo__specs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: .6rem;
	list-style: none;
	margin: 0 0 1.6rem;
	padding: 1.05rem 0;
	border-top: 1px solid var(--kb-line-2);
	border-bottom: 1px solid var(--kb-line-2);
}

.holz-becker-promo__specs li { display: flex; flex-direction: column; gap: .1rem; }

.holz-becker-promo__specs strong {
	font-family: var(--kb-display);
	font-size: 1.16rem;
	font-weight: 600;
	color: var(--kb-ink);
}

.holz-becker-promo__specs span {
	font-size: .68rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--kb-ink-3);
}

/* --- Calculateur --- */
.holz-becker-calc {
	background: var(--kb-bark);
	color: rgba(240, 245, 236, .78);
	border-radius: var(--kb-radius-lg);
	padding: clamp(1.5rem, 3vw, 2.4rem);
	box-shadow: var(--kb-shadow-lg);
	display: flex;
	flex-direction: column;
}

.holz-becker-calc .holz-becker-eyebrow { color: var(--kb-ember-2); }

.holz-becker .holz-becker-calc__title {
	margin: 0 0 .6rem;
	font-size: clamp(1.5rem, 2.3vw, 1.95rem);
	color: var(--kb-paper);
	line-height: 1.12;
}

.holz-becker-calc__intro { margin: 0 0 1.6rem; font-size: .9rem; color: rgba(240, 245, 236, .6); }

.holz-becker-field { margin-bottom: 1.35rem; }

.holz-becker-field label,
.holz-becker-field__legend {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: .55rem;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: rgba(240, 245, 236, .62);
}

.holz-becker-field output {
	font-family: var(--kb-display);
	font-size: 1.02rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--kb-ember-2);
	font-variant-numeric: tabular-nums;
}

.holz-becker-field input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 4px;
	border-radius: 999px;
	background: rgba(240, 245, 236, .16);
	outline: none;
	padding: 0;
	margin: 0;
}

.holz-becker-field input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--kb-ember);
	border: 3px solid var(--kb-bark);
	box-shadow: 0 0 0 1px rgba(240, 245, 236, .3);
	cursor: pointer;
	transition: transform .2s;
}

.holz-becker-field input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }

.holz-becker-field input[type="range"]::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--kb-ember);
	border: 3px solid var(--kb-bark);
	cursor: pointer;
}

.holz-becker-choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }

.holz-becker-choice label {
	display: block;
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
}

.holz-becker-choice input { position: absolute; opacity: 0; width: 0; height: 0; }

.holz-becker-choice span {
	display: block;
	padding: .6rem .4rem;
	text-align: center;
	border: 1px solid rgba(240, 245, 236, .18);
	border-radius: var(--kb-radius);
	font-size: .76rem;
	font-weight: 600;
	color: rgba(240, 245, 236, .72);
	cursor: pointer;
	transition: all .25s;
}

.holz-becker-choice input:checked + span {
	background: var(--kb-ember);
	border-color: var(--kb-ember);
	color: #fff;
}

.holz-becker-choice input:focus-visible + span { outline: 2px solid var(--kb-ember-2); outline-offset: 2px; }

.holz-becker-calc__result {
	margin: .4rem 0 1.4rem;
	padding: 1.15rem 1.25rem;
	background: rgba(240, 245, 236, .05);
	border: 1px solid rgba(240, 245, 236, .12);
	border-radius: var(--kb-radius);
}

.holz-becker-calc__figure { display: flex; align-items: baseline; gap: .6rem; }

.holz-becker-calc__figure strong {
	font-family: var(--kb-display);
	font-size: clamp(2.4rem, 4vw, 3.1rem);
	font-weight: 500;
	color: var(--kb-paper);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.holz-becker-calc__figure span {
	font-size: .8rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--kb-ember-2);
}

.holz-becker-calc__alt p { margin: .6rem 0 0; font-size: .85rem; color: rgba(240, 245, 236, .58); }
.holz-becker-calc__alt span { color: var(--kb-paper); font-weight: 700; }

.holz-becker-calc__legal { margin: .9rem 0 0; font-size: .72rem; color: rgba(240, 245, 236, .42); }

/* --------------------------------------------------------------------------
   15. Avis
   -------------------------------------------------------------------------- */
.holz-becker-avis__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
	gap: clamp(1rem, 2vw, 1.6rem);
	list-style: none;
	margin: 0 0 clamp(2.4rem, 5vw, 4rem);
	padding: 0;
}

.holz-becker-avis__item {
	display: flex;
	flex-direction: column;
	gap: .9rem;
	padding: 1.5rem 1.5rem 1.4rem;
	background: rgba(240, 245, 236, .045);
	border: 1px solid rgba(240, 245, 236, .1);
	border-radius: var(--kb-radius-lg);
	transition: background .3s, border-color .3s, transform .35s var(--kb-ease);
}

.holz-becker-avis__item:hover {
	background: rgba(240, 245, 236, .075);
	border-color: rgba(168, 208, 90, .35);
	transform: translateY(-3px);
}

.holz-becker-avis__item blockquote { margin: 0; padding: 0; border: 0; }

.holz-becker-avis__item blockquote p {
	margin: 0;
	font-family: var(--kb-display);
	font-size: 1.02rem;
	font-weight: 400;
	line-height: 1.5;
	color: rgba(240, 245, 236, .88);
}

.holz-becker-avis__item footer { margin-top: auto; display: flex; flex-direction: column; gap: .1rem; }
.holz-becker-avis__item footer strong { font-size: .88rem; color: var(--kb-paper); }

.holz-becker-avis__item footer span {
	font-size: .73rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: rgba(240, 245, 236, .42);
}

/* --- Format compact -------------------------------------------------------
   Un mur de témoignages n'a pas besoin d'une page entière : c'est une preuve,
   pas un chapitre. Même resserrement que la vitrine produits — mêmes marges de
   section, même échelle de titre — pour que les deux blocs sombres de la page
   d'accueil respirent au même rythme. Les citations gardent leur longueur :
   c'est le corps de texte et l'interligne qui se resserrent, pas le propos. */
.holz-becker-avis { padding-block: clamp(2.6rem, 5.2vw, 4.6rem); }

.holz-becker-avis .holz-becker-sechead { margin-bottom: clamp(1.5rem, 3vw, 2.3rem); }
.holz-becker-avis .holz-becker-sechead__title { font-size: clamp(1.75rem, 3.2vw, 2.55rem); }
.holz-becker-avis .holz-becker-sechead__intro { margin-top: .8rem; font-size: .97rem; }

.holz-becker-avis__grid { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }

.holz-becker-avis__item {
	gap: .7rem;
	padding: 1.15rem 1.2rem 1.1rem;
}

.holz-becker-avis__item .holz-becker-stars--lg { font-size: .92rem; }

.holz-becker-avis__item blockquote p {
	font-size: .95rem;
	line-height: 1.45;
}

.holz-becker-avis .holz-becker-trust--grid {
	gap: 1rem;
	padding-top: clamp(1.3rem, 2.2vw, 1.8rem);
}

.holz-becker-avis .holz-becker-trust__icon { width: 38px; height: 38px; }

/* Arguments */
.holz-becker-trust { list-style: none; margin: 0; padding: 0; }

.holz-becker-trust--grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 1.2rem;
	padding-top: clamp(1.8rem, 3vw, 2.6rem);
	border-top: 1px solid rgba(240, 245, 236, .12);
}

.holz-becker-trust--line {
	display: flex;
	flex-wrap: wrap;
	gap: 1.6rem 2.6rem;
}

.holz-becker-trust__item { display: flex; align-items: flex-start; gap: .8rem; }

.holz-becker-trust__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	flex: none;
	border-radius: 50%;
	border: 1px solid rgba(240, 245, 236, .2);
	color: var(--kb-ember-2);
}

.holz-becker-section--paper .holz-becker-trust__icon,
.holz-becker-section--paper2 .holz-becker-trust__icon { border-color: var(--kb-line); color: var(--kb-ember); }

.holz-becker-trust__text { display: flex; flex-direction: column; gap: .12rem; }
.holz-becker-trust__text strong { font-size: .95rem; color: var(--kb-paper); }
.holz-becker-trust__text span { font-size: .8rem; color: rgba(240, 245, 236, .5); }

.holz-becker-section--paper .holz-becker-trust__text strong,
.holz-becker-section--paper2 .holz-becker-trust__text strong { color: var(--kb-ink); }

.holz-becker-section--paper .holz-becker-trust__text span,
.holz-becker-section--paper2 .holz-becker-trust__text span { color: var(--kb-ink-3); }

/* --------------------------------------------------------------------------
   16. Journal
   -------------------------------------------------------------------------- */
.holz-becker-journal__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
	gap: clamp(1.1rem, 2vw, 1.9rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.holz-becker-journal__item > a { display: flex; flex-direction: column; height: 100%; color: inherit; }

.holz-becker-journal__media {
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: var(--kb-radius-lg);
	overflow: hidden;
	background: var(--kb-paper-2);
	margin-bottom: 1.05rem;
}

.holz-becker-journal__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .9s var(--kb-ease);
}

.holz-becker-journal__item > a:hover .holz-becker-journal__media img { transform: scale(1.05); }

.holz-becker-journal__body { display: flex; flex-direction: column; gap: .5rem; flex: 1; }

.holz-becker-journal__date {
	font-size: .71rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--kb-ink-3);
}

.holz-becker-journal__title {
	font-family: var(--kb-display);
	font-size: 1.28rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--kb-ink);
	transition: color .25s;
}

.holz-becker-journal__item > a:hover .holz-becker-journal__title { color: var(--kb-ember); }
.holz-becker-journal__excerpt { font-size: .9rem; color: var(--kb-ink-2); }
.holz-becker-journal__body .holz-becker-link-arrow { margin-top: auto; align-self: flex-start; }

/* --------------------------------------------------------------------------
   17. FAQ
   -------------------------------------------------------------------------- */
.holz-becker-faq__grid {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	gap: clamp(1.8rem, 4vw, 4rem);
	align-items: start;
}

.holz-becker-faq__aside .holz-becker-sechead { display: block; margin-bottom: 1.6rem; }
.holz-becker-faq__contact { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }

.holz-becker-faq__item {
	border-bottom: 1px solid var(--kb-line);
	padding: .3rem 0;
}

.holz-becker-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.2rem;
	padding: 1.1rem 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--kb-display);
	font-size: clamp(1.02rem, 1.5vw, 1.2rem);
	font-weight: 600;
	color: var(--kb-ink);
	transition: color .25s;
}

.holz-becker-faq__item summary::-webkit-details-marker { display: none; }
.holz-becker-faq__item summary:hover { color: var(--kb-ember); }

.holz-becker-faq__item summary i {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	flex: none;
	border: 1px solid var(--kb-line);
	border-radius: 50%;
	color: var(--kb-ember);
	transition: transform .35s var(--kb-ease), background .25s, color .25s;
}

.holz-becker-faq__item[open] summary i { transform: rotate(135deg); background: var(--kb-ember); color: #fff; }

.holz-becker-faq__answer {
	padding: 0 0 1.3rem;
	max-width: 60ch;
	animation: holz-becker-fade-down .35s var(--kb-ease);
}

.holz-becker-faq__answer p { margin: 0; font-size: .95rem; color: var(--kb-ink-2); }

/* --------------------------------------------------------------------------
   18. Pied de page
   -------------------------------------------------------------------------- */
/*
 * Pied de page compact. Il occupait 880 px sur un écran de bureau, presque une
 * page entière : colonnes aérées, puis déclaration VSBG, bande des paiements
 * centrée sur trois lignes et barre légale, chacune avec ses marges. Colonnes
 * resserrées ; la déclaration partage une rangée avec les paiements (≥ 1025 px).
 */
.holz-becker .site-footer {
	background: var(--kb-bark);
	color: rgba(240, 245, 236, .68);
	padding: clamp(2rem, 3.5vw, 3rem) 0 1rem;
	border-top: 3px solid var(--kb-ember);
}

.holz-becker-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, .72fr) minmax(0, .98fr) minmax(0, 1.1fr);
	gap: clamp(1.4rem, 2.6vw, 2.5rem);
	padding-bottom: clamp(1.4rem, 2.4vw, 2rem);
	border-bottom: 1px solid rgba(240, 245, 236, .12);
}

.holz-becker .site-footer .holz-becker-logo { color: var(--kb-paper); }
.holz-becker .site-footer .holz-becker-logo__name { color: var(--kb-paper); }
.holz-becker .site-footer .holz-becker-logo__baseline { color: rgba(240, 245, 236, .42); }

.holz-becker-footer__pitch {
	margin: .9rem 0 1rem;
	max-width: 34rem;
	font-size: .88rem;
	line-height: 1.55;
	color: rgba(240, 245, 236, .58);
}

.holz-becker-footer__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: .42rem; }

.holz-becker-footer__contact li {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-size: .87rem;
	color: rgba(240, 245, 236, .68);
}

.holz-becker-footer__contact svg { color: var(--kb-ember-2); flex: none; }
.holz-becker-footer__contact a { color: rgba(240, 245, 236, .82); }
.holz-becker-footer__contact a:hover { color: var(--kb-ember-2); }

.holz-becker-footer__col h3 {
	margin: 0 0 .8rem;
	font-family: var(--kb-sans);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--kb-sand);
}

.holz-becker-footer__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: .12rem; }

/* Cible de 26 px : resserrée, mais au-dessus des 24 px minimum du WCAG 2.2. */
.holz-becker-footer__menu a {
	display: block;
	width: fit-content;
	padding: .2rem 0;
	font-size: .88rem;
	line-height: 1.4;
	color: rgba(240, 245, 236, .68);
	transition: color .2s, padding-left .25s var(--kb-ease);
}

.holz-becker-footer__menu a:hover { color: var(--kb-ember-2); padding-left: .28rem; }

.holz-becker-footer__news p { font-size: .87rem; color: rgba(240, 245, 236, .58); margin: 0 0 .8rem; }

.holz-becker-news { display: flex; gap: .5rem; flex-wrap: wrap; }

.holz-becker .holz-becker-news input[type="email"] {
	flex: 1 1 160px;
	min-width: 0;
	padding: .78rem .9rem;
	background: rgba(240, 245, 236, .07);
	border: 1px solid rgba(240, 245, 236, .18);
	border-radius: var(--kb-radius);
	color: var(--kb-paper);
	font-size: .9rem;
}

.holz-becker .holz-becker-news input[type="email"]::placeholder { color: rgba(240, 245, 236, .35); }
.holz-becker .holz-becker-news input[type="email"]:focus { border-color: var(--kb-ember-2); background: rgba(240, 245, 236, .1); }

.holz-becker-footer__legal-note { margin: .8rem 0 0; font-size: .74rem; color: rgba(240, 245, 236, .38); }

/* EUID : une donnée d'identification, pas une coordonnée — d'où l'étiquette. */
.holz-becker-footer__euid span { display: flex; flex-direction: column; gap: .05rem; }
.holz-becker-footer__euid strong { font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: rgba(240, 245, 236, .45); }
.holz-becker-footer__euid em { font-style: normal; letter-spacing: .02em; }

/* Déclaration § 36 VSBG, en clair au pied de page. */
.holz-becker-footer__vsbg {
	margin: 0;
	padding: 1rem 0 .1rem;
	font-size: .76rem;
	line-height: 1.6;
	color: rgba(240, 245, 236, .5);
}

.holz-becker-footer__vsbg a { color: rgba(240, 245, 236, .8); border-bottom: 1px solid rgba(240, 245, 236, .3); }
.holz-becker-footer__vsbg a:hover { color: var(--kb-ember-2); border-color: var(--kb-ember-2); }

/* Rappel des textes obligatoires, dans la barre du bas. */
.holz-becker-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .3rem 1.1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.holz-becker-footer__legal a,
.holz-becker .holz-becker-cookie-open {
	padding: 0;
	background: none;
	border: 0;
	font-family: var(--kb-sans);
	font-size: .76rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(240, 245, 236, .5);
	cursor: pointer;
	box-shadow: none;
}

.holz-becker-footer__legal a:hover,
.holz-becker .holz-becker-cookie-open:hover {
	color: var(--kb-ember-2);
	background: none;
	transform: none;
	box-shadow: none;
}

/* --------------------------------------------------------------------------
   Panneau des cookies

   Ouvert à la demande depuis le pied de page, jamais imposé à l'arrivée : le
   site ne pose que des cookies nécessaires, pour lesquels le § 25 al. 2 TTDSG
   ne demande aucun consentement.
   -------------------------------------------------------------------------- */
.holz-becker-cookie {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: grid;
	place-items: center;
	padding: var(--kb-gutter);
	opacity: 0;
	transition: opacity .28s var(--kb-ease);
}

.holz-becker-cookie[hidden] { display: none; }
.holz-becker-cookie.is-open { opacity: 1; }

.holz-becker-cookie__scrim {
	position: absolute;
	inset: 0;
	background: rgba(20, 24, 18, .58);
	backdrop-filter: blur(3px);
}

.holz-becker-cookie__box {
	position: relative;
	width: min(100%, 660px);
	max-height: min(86vh, 760px);
	overflow-y: auto;
	padding: clamp(1.3rem, 3vw, 2rem);
	background: #fff;
	border-radius: var(--kb-radius-lg);
	box-shadow: 0 40px 90px -50px rgba(20, 24, 18, .8);
	transform: translateY(10px);
	transition: transform .32s var(--kb-ease);
}

.holz-becker-cookie.is-open .holz-becker-cookie__box { transform: none; }

.holz-becker-cookie__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.holz-becker-cookie__head .holz-becker-eyebrow { margin: 0; }

.holz-becker-cookie__title {
	margin: .8rem 0 .6rem;
	font-size: clamp(1.3rem, 2.4vw, 1.7rem);
}

.holz-becker-cookie__intro { margin: 0 0 1.3rem; font-size: .93rem; color: var(--kb-ink-2); }

.holz-becker-cookie__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }

.holz-becker-cookie__cat {
	padding: 1rem 1.1rem;
	border: 1px solid var(--kb-line-2);
	border-radius: var(--kb-radius);
	background: var(--kb-paper);
}

.holz-becker-cookie__cat--none { background: #fafafa; }

.holz-becker-cookie__cat-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	margin-bottom: .4rem;
}

.holz-becker-cookie__cat-head strong { font-size: .98rem; }

.holz-becker-cookie__lock,
.holz-becker-cookie__none {
	padding: .2rem .55rem;
	border-radius: 999px;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.holz-becker-cookie__lock { background: var(--kb-ember); color: #fff; }
.holz-becker-cookie__none { background: #e8e8e8; color: var(--kb-ink-3); }

.holz-becker-cookie__cat p { margin: 0; font-size: .85rem; color: var(--kb-ink-2); }

.holz-becker-cookie__table {
	width: 100%;
	margin-top: .9rem;
	border-collapse: collapse;
	font-size: .78rem;
}

.holz-becker-cookie__table th,
.holz-becker-cookie__table td {
	padding: .42rem .5rem;
	text-align: left;
	border-bottom: 1px solid var(--kb-line-2);
	vertical-align: top;
}

.holz-becker-cookie__table th {
	font-size: .67rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--kb-ink-3);
}

.holz-becker-cookie__table td:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem; }

.holz-becker-cookie__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.4rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--kb-line-2);
}

@media (max-width: 560px) {
	.holz-becker-cookie__foot { flex-direction: column-reverse; align-items: stretch; }
	.holz-becker-cookie__foot .holz-becker-btn { width: 100%; }
	.holz-becker-cookie__table { font-size: .72rem; }
}

.holz-becker-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem 1.6rem;
	padding-top: .9rem;
	border-top: 1px solid rgba(240, 245, 236, .12);
}

/* Bureau : déclaration VSBG à gauche, moyens de paiement à droite, une rangée. */
@media (min-width: 1025px) {
	.holz-becker-footer {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		column-gap: 2.5rem;
	}

	.holz-becker-footer__top,
	.holz-becker-footer__bar { grid-column: 1 / -1; }

	.holz-becker-footer__vsbg { padding: .9rem 0; }
	.holz-becker-footer .holz-becker-pay { justify-content: flex-end; padding: .9rem 0; }
}

.holz-becker-footer__bar p { margin: 0; font-size: .76rem; color: rgba(240, 245, 236, .4); }

/* --- Moyens de paiement ---------------------------------------------------
   Les marques sont composées en HTML et en SVG, pas importées : le pied de
   page ne charge donc aucune image ni ressource d'un tiers. Chaque pastille
   est une tuile blanche autonome — c'est ce fond clair qui les fait ressortir
   sur le vert profond du pied de page. */
.holz-becker-pay {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .5rem .9rem;
	margin: 0;
	padding: .7rem 0 1rem;
}

.holz-becker-pay__title {
	margin: 0;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .19em;
	text-transform: uppercase;
	color: rgba(240, 245, 236, .48);
}

.holz-becker-pay__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.holz-becker-pay__card {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	min-height: 34px;
	padding: 0 .65rem;
	background: #fff;
	border-radius: 5px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
	font-weight: 800;
	font-size: .8rem;
	line-height: 1.1;
	color: #17181a;
	white-space: nowrap;
}

.holz-becker-pay__mark { flex: none; display: block; }
.holz-becker-pay__card--bank .holz-becker-pay__mark { width: 20px; height: 20px; }
.holz-becker-pay__card--mastercard .holz-becker-pay__mark { width: 27px; height: 17px; }

/* Virement : icône + intitulé sur deux lignes, comme sur une vraie vignette. */
.holz-becker-pay__card--bank { gap: .55rem; color: var(--kb-ember-text); }
.holz-becker-pay__bank { display: flex; flex-direction: column; gap: .05rem; text-align: left; }
.holz-becker-pay__bank strong { font-size: .74rem; font-weight: 800; color: #17181a; }

.holz-becker-pay__bank em {
	font-style: normal;
	font-size: .58rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: #6b7280;
}

.holz-becker-pay__card--visa {
	background: #1434cb;
	color: #fff;
	font-style: italic;
	font-size: .9rem;
	letter-spacing: .09em;
}

.holz-becker-pay__card--mastercard {
	gap: .35rem;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: -.01em;
	color: #231f20;
}

.holz-becker-pay__card--amex {
	background: #006fcf;
	color: #fff;
	font-size: .52rem;
	line-height: 1.08;
	letter-spacing: .07em;
	text-align: center;
	white-space: normal;
}

.holz-becker-pay__card--paypal { color: #003087; font-style: italic; font-size: .86rem; letter-spacing: -.01em; }
.holz-becker-pay__card--paypal i { font-style: italic; color: #009cde; }

.holz-becker-pay__card--apple { background: #000; color: #fff; font-size: .86rem; gap: .3rem; }

@media (max-width: 640px) {
	.holz-becker-pay__list { gap: .35rem; }
}

.holz-becker-footer__pay { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 0; padding: 0; }

.holz-becker-footer__pay li {
	padding: .3rem .65rem;
	border: 1px solid rgba(240, 245, 236, .16);
	border-radius: var(--kb-radius);
	font-size: .7rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(240, 245, 236, .55);
}

/* Barre mobile Storefront */
.holz-becker .storefront-handheld-footer-bar {
	background: var(--kb-bark);
	border-top: 1px solid rgba(240, 245, 236, .12);
	box-shadow: 0 -12px 30px -20px rgba(0, 0, 0, .8);
}

.holz-becker .storefront-handheld-footer-bar ul li > a { color: var(--kb-paper); }
.holz-becker .storefront-handheld-footer-bar ul li.cart .count {
	background: var(--kb-ember);
	color: #fff;
	border-color: var(--kb-bark);
}

/* --------------------------------------------------------------------------
   19. WooCommerce — catalogue & pages internes
   -------------------------------------------------------------------------- */
.holz-becker-breadcrumb { padding: 1.5rem 0 .2rem; }

.holz-becker .woocommerce-breadcrumb {
	margin: 0;
	font-size: .78rem;
	letter-spacing: .05em;
	color: var(--kb-ink-3);
	padding: 0;
}

.holz-becker .woocommerce-breadcrumb a { color: var(--kb-ink-2); }
.holz-becker .woocommerce-breadcrumb a:hover { color: var(--kb-ember); }
.holz-becker .woocommerce-breadcrumb .sep { margin: 0 .5rem; opacity: .5; }

.holz-becker .woocommerce-products-header {
	padding: clamp(1.4rem, 3vw, 2.4rem) 0 clamp(1.2rem, 2.5vw, 1.8rem);
	border-bottom: 1px solid var(--kb-line-2);
	margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}

.holz-becker .woocommerce-products-header__title,
.holz-becker .entry-title,
.holz-becker h1.page-title {
	font-size: clamp(2.1rem, 4.4vw, 3.4rem);
	margin: 0 0 .5rem;
	font-weight: 600;
}

.holz-becker .term-description,
.holz-becker .woocommerce-products-header .term-description p {
	max-width: 56ch;
	color: var(--kb-ink-2);
	font-size: 1rem;
}

.holz-becker .storefront-sorting {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .8rem 1.4rem;
	margin: 0 0 1.8rem;
	padding: .85rem 1.1rem;
	background: var(--kb-card);
	border: 1px solid var(--kb-line-2);
	border-radius: var(--kb-radius);
}

.holz-becker .woocommerce-result-count {
	margin: 0;
	font-size: .82rem;
	color: var(--kb-ink-3);
	float: none;
}

.holz-becker .woocommerce-ordering { margin: 0; float: none; }

.holz-becker select,
.holz-becker input[type="text"],
.holz-becker input[type="email"],
.holz-becker input[type="tel"],
.holz-becker input[type="url"],
.holz-becker input[type="password"],
.holz-becker input[type="search"],
.holz-becker input[type="number"],
.holz-becker textarea {
	width: 100%;
	padding: .78rem .9rem;
	background: #fff;
	border: 1px solid var(--kb-line);
	border-radius: var(--kb-radius);
	color: var(--kb-ink);
	font-family: var(--kb-sans);
	font-size: .95rem;
	box-shadow: none;
	transition: border-color .2s, box-shadow .2s;
}

.holz-becker select:focus,
.holz-becker input:focus,
.holz-becker textarea:focus {
	border-color: var(--kb-ember);
	box-shadow: 0 0 0 3px rgba(136, 181, 59, .12);
	outline: none;
}

.holz-becker .woocommerce-ordering select { min-width: 220px; padding-right: 2rem; }

.holz-becker .woocommerce-pagination { margin: 2.6rem 0 0; }
.holz-becker .woocommerce-pagination ul { border: 0; display: flex; gap: .35rem; justify-content: center; }
.holz-becker .woocommerce-pagination ul li { border: 0; }

.holz-becker .woocommerce-pagination ul li a,
.holz-becker .woocommerce-pagination ul li span {
	min-width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	padding: 0 .6rem;
	border: 1px solid var(--kb-line);
	border-radius: var(--kb-radius);
	font-weight: 700;
	font-size: .88rem;
	color: var(--kb-ink);
	background: var(--kb-card);
}

.holz-becker .woocommerce-pagination ul li span.current,
.holz-becker .woocommerce-pagination ul li a:hover {
	background: var(--kb-ink);
	border-color: var(--kb-ink);
	color: var(--kb-paper);
}

.holz-becker-empty {
	padding: 3rem 0;
	text-align: center;
}

.holz-becker-empty p { font-size: 1.1rem; color: var(--kb-ink-2); margin-bottom: 1.2rem; }

/* --- Messages WooCommerce --- */
.holz-becker .woocommerce-message,
.holz-becker .woocommerce-info,
.holz-becker .woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .8rem;
	background: var(--kb-card);
	border: 1px solid var(--kb-line);
	border-left: 3px solid var(--kb-ember);
	border-radius: var(--kb-radius);
	color: var(--kb-ink);
	padding: 1rem 1.2rem;
	margin: 0 0 1.6rem;
	font-size: .93rem;
	list-style: none;
}

.holz-becker .woocommerce-message::before,
.holz-becker .woocommerce-info::before,
.holz-becker .woocommerce-error::before { display: none; }

.holz-becker .woocommerce-message { border-left-color: var(--kb-moss); }
.holz-becker .woocommerce-error { border-left-color: #911e1e; }
.holz-becker .woocommerce-message .button { margin-left: auto; }

/* --------------------------------------------------------------------------
   20. Fiche produit
   -------------------------------------------------------------------------- */
.holz-becker.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
	gap: clamp(1.8rem, 4vw, 3.4rem);
	align-items: start;
	padding-top: clamp(1.4rem, 3vw, 2.4rem);
}

/*
 * Placement explicite : le visuel à gauche, la décision d'achat à droite.
 * WooCommerce sort la galerie en premier dans le balisage, mais ses propres
 * règles de flottement la faisaient retomber dans la seconde colonne — la
 * lecture s'en trouvait inversée.
 */
.holz-becker.single-product div.product .woocommerce-product-gallery,
.holz-becker.single-product div.product .images {
	grid-column: 1;
	grid-row: 1;
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	position: sticky;
	top: calc(var(--kb-header-h, 96px) + 1.2rem);
}

.holz-becker.single-product div.product .summary,
.holz-becker.single-product div.product .entry-summary {
	grid-column: 2;
	grid-row: 1;
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

/*
 * Seuls les blocs qui suivent la fiche traversent les deux colonnes. Le
 * conteneur interne de la galerie figurait ici par erreur : promu élément de
 * grille, il étalait les visuels sur toute la largeur et débordait de la page.
 */
.holz-becker.single-product div.product .woocommerce-tabs,
.holz-becker.single-product div.product .related,
.holz-becker.single-product div.product .upsells { grid-column: 1 / -1; }

/* --- Galerie : grand visuel encadré, vignettes en rail ------------------- */
/*
 * Le cadre se pose sur la fenêtre du carrousel, jamais sur le rail intérieur :
 * celui-ci mesure la somme des diapositives — plus de six mille pixels — et
 * l'encadrer laissait les visuels voisins déborder des deux côtés de la page.
 */
.holz-becker .woocommerce-product-gallery .flex-viewport,
.holz-becker .woocommerce-product-gallery.woocommerce-product-gallery--columns-1 > .woocommerce-product-gallery__wrapper {
	border-radius: var(--kb-radius-lg);
	overflow: hidden;
	background: var(--kb-card);
	border: 1px solid var(--kb-line);
}

/* Tant que le carrousel n'est pas initialisé, une seule vue doit se montrer. */
.holz-becker .woocommerce-product-gallery:not(.flexslider-enabled) .woocommerce-product-gallery__wrapper { overflow: hidden; }

.holz-becker .woocommerce-product-gallery__image img {
	border-radius: 0;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: var(--kb-card);
	padding: clamp(.8rem, 2vw, 1.6rem);
}

.holz-becker .woocommerce-product-gallery { overflow: visible; }

/* Badge « promo » : WooCommerce le sort du visuel, on le repose dessus. */
.holz-becker.single-product div.product { position: relative; }

.holz-becker.single-product div.product > span.onsale {
	position: absolute;
	top: 1.1rem;
	left: 1.1rem;
	z-index: 3;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: .3rem .7rem;
	border-radius: 999px;
	background: var(--kb-promo);
	color: #fff;
	font-family: var(--kb-sans);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1.4;
}

/*
 * Rail de vignettes, en colonne à gauche du grand visuel.
 *
 * WooCommerce place les vignettes après la fenêtre du carrousel : la galerie
 * devient une grille à deux colonnes et chacun reçoit sa place, sans toucher au
 * balisage. Au-delà de six vignettes la colonne défile plutôt que de dépasser
 * la hauteur de l'image.
 */
.holz-becker .flex-control-thumbs {
	display: flex;
	gap: .55rem;
	margin: 0;
	padding: 0;
	list-style: none;
	scrollbar-width: thin;
}

.holz-becker .flex-control-thumbs li {
	width: 78px !important;
	flex: 0 0 78px;
	margin: 0 !important;
}

@media (min-width: 1025px) {
	.holz-becker.single-product div.product .woocommerce-product-gallery {
		display: grid;
		grid-template-columns: 84px minmax(0, 1fr);
		gap: .8rem;
		align-items: start;
	}

	.holz-becker.single-product div.product .woocommerce-product-gallery .flex-viewport,
	.holz-becker.single-product div.product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
		grid-column: 2;
		grid-row: 1;
	}

	.holz-becker.single-product div.product .flex-control-thumbs {
		grid-column: 1;
		grid-row: 1;
		flex-direction: column;
		max-height: 100%;
		overflow-y: auto;
	}

	.holz-becker.single-product div.product .flex-control-thumbs li {
		width: 76px !important;
		flex: 0 0 auto;
	}

	/*
	 * La loupe se pose sur la dernière colonne, quelle qu'elle soit : « -2 »
	 * désigne le début de la dernière piste, que la galerie en compte une ou
	 * deux.
	 */
	.holz-becker.single-product div.product .woocommerce-product-gallery__trigger {
		grid-column: -2 / -1;
		grid-row: 1;
		justify-self: end;
		align-self: start;
		position: relative;
		top: .8rem;
		right: .8rem;
		z-index: 2;
	}

	/*
	 * Quarante et un pour cent des produits n'ont qu'une photo : WooCommerce ne
	 * génère alors aucune vignette, et la colonne de gauche resterait vide,
	 * décalant le visuel de quatre-vingt-quatre pixels. On rend la grille à une
	 * seule colonne dans ce cas.
	 */
	.holz-becker.single-product div.product .woocommerce-product-gallery:not(:has(.flex-control-thumbs)) {
		grid-template-columns: minmax(0, 1fr);
	}

	.holz-becker.single-product div.product .woocommerce-product-gallery:not(:has(.flex-control-thumbs)) .flex-viewport,
	.holz-becker.single-product div.product .woocommerce-product-gallery:not(:has(.flex-control-thumbs)) > .woocommerce-product-gallery__wrapper {
		grid-column: 1;
	}
}

/* En pile, un rail vertical mangerait la largeur : il repasse sous l'image. */
@media (max-width: 1024px) {
	.holz-becker .flex-control-thumbs {
		margin-top: .7rem;
		overflow-x: auto;
	}
}

.holz-becker .flex-control-thumbs img {
	border-radius: var(--kb-radius);
	border: 1px solid var(--kb-line);
	background: var(--kb-card);
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: .25rem;
	opacity: .62;
	cursor: pointer;
	transition: opacity .2s var(--kb-ease), border-color .2s var(--kb-ease);
}

.holz-becker .flex-control-thumbs img.flex-active,
.holz-becker .flex-control-thumbs img:hover { opacity: 1; border-color: var(--kb-bark); }

/*
 * Titre de produit. Les intitulés du catalogue tiennent en soixante-dix signes
 * — « 120 KG Trockenes Birkenfeuerholz für Kamin und Ofen, 25 cm Scheitlänge » —
 * là où le thème d'origine visait des noms courts. À l'ancienne échelle, un tel
 * titre occupait quatre lignes et deux cents pixels, repoussant le prix hors du
 * premier écran. On resserre, et l'on coupe les mots trop longs plutôt que de
 * laisser déborder la colonne.
 */
.holz-becker .single-product .product_title,
.holz-becker.single-product .product_title {
	font-size: clamp(1.45rem, 2.3vw, 2.05rem);
	line-height: 1.22;
	margin: 0 0 .9rem;
	font-weight: 600;
	overflow-wrap: break-word;
	hyphens: auto;
}

.holz-becker-single__eyebrow { margin-bottom: .8rem; }
.holz-becker-single__eyebrow a { color: inherit; }

.holz-becker.single-product div.product .price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: .6rem;
	font-family: var(--kb-display);
	font-size: clamp(1.7rem, 2.8vw, 2.15rem);
	font-weight: 600;
	color: var(--kb-ink);
	margin: 0 0 .3rem;
}

.holz-becker.single-product div.product .price del {
	font-family: var(--kb-sans);
	font-size: .55em;
	font-weight: 500;
	color: var(--kb-ink-3);
	opacity: .85;
}

.holz-becker.single-product div.product .price ins { text-decoration: none; color: var(--kb-ember); }

/* --- Carte d'achat ------------------------------------------------------- */
/*
 * Tout ce qui sert à décider et à commander tient dans une seule surface :
 * prix, prix à l'unité, délais, bouton, moyens de paiement. Ce qui documente le
 * produit vit dessous, hors de la carte.
 */
.holz-becker-buybox {
	border: 1px solid var(--kb-line);
	border-radius: var(--kb-radius-lg);
	background: var(--kb-card);
	padding: clamp(1.1rem, 2.2vw, 1.5rem);
	margin: .2rem 0 1.4rem;
	box-shadow: var(--kb-shadow-sm);
}

.holz-becker-buybox .price { margin-bottom: .15rem !important; }

.holz-becker-unitprice {
	margin: 0 0 1rem;
	font-size: .88rem;
	color: var(--kb-ink-3);
}

.holz-becker-buybox .holz-becker-reassure { margin: 0 0 1.2rem; }

.holz-becker-buybox form.cart { margin: 0 0 1rem; }

/* Moyens de paiement, en pastilles discrètes. */
.holz-becker-paylist {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 0;
	padding: .9rem 0 0;
	border-top: 1px solid var(--kb-line);
	list-style: none;
}

.holz-becker-paylist li {
	padding: .28rem .68rem;
	border: 1px solid var(--kb-line);
	border-radius: var(--kb-radius-pill);
	font-size: .72rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--kb-ink-3);
	background: var(--kb-paper);
}

/* --- Caractéristiques ---------------------------------------------------- */
.holz-becker-specs { margin: 0 0 1.6rem; }

.holz-becker-specs__title {
	font-family: var(--kb-serif);
	font-size: 1.05rem;
	margin: 0 0 .7rem;
	color: var(--kb-bark);
}

.holz-becker-specs dl {
	margin: 0;
	border: 1px solid var(--kb-line);
	border-radius: var(--kb-radius);
	overflow: hidden;
}

.holz-becker-specs dl > div {
	display: grid;
	grid-template-columns: minmax(0, 40%) minmax(0, 60%);
	gap: 1rem;
	padding: .62rem .95rem;
	border-bottom: 1px solid var(--kb-line);
	font-size: .88rem;
}

.holz-becker-specs dl > div:last-child { border-bottom: 0; }
.holz-becker-specs dl > div:nth-child(odd) { background: var(--kb-paper); }

.holz-becker-specs dt { margin: 0; color: var(--kb-ink-3); }
.holz-becker-specs dd { margin: 0; color: var(--kb-ink); font-weight: 500; }

.holz-becker .woocommerce-product-details__short-description {
	margin: 1rem 0 1.4rem;
	font-size: 1rem;
	color: var(--kb-ink-2);
	max-width: 52ch;
}

.holz-becker .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0 0 1.1rem;
	font-size: .85rem;
}

.holz-becker-highlights {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 1.15rem 1.25rem;
	background: var(--kb-paper-2);
	border-radius: var(--kb-radius);
	display: grid;
	gap: .55rem;
}

.holz-becker-highlights li { display: flex; align-items: flex-start; gap: .6rem; font-size: .92rem; color: var(--kb-ink-2); }
.holz-becker-highlights svg { color: var(--kb-ember-text); flex: none; margin-top: .18rem; }

.holz-becker form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: .7rem;
	margin: 0 0 1.4rem !important;
	padding: 0;
}

.holz-becker form.cart .quantity { margin: 0; }

.holz-becker form.cart .quantity .qty {
	width: 92px;
	height: 100%;
	min-height: 52px;
	text-align: center;
	font-weight: 700;
	font-size: 1rem;
}

.holz-becker form.cart .single_add_to_cart_button {
	flex: 1 1 220px;
	min-height: 52px;
	font-size: .92rem;
}

.holz-becker form.cart.variations_form { display: block; }
.holz-becker table.variations { width: 100%; margin-bottom: 1rem; }
.holz-becker table.variations td { padding: .35rem 0; }
.holz-becker table.variations th.label { padding-right: 1rem; font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; }
.holz-becker .woocommerce-variation-add-to-cart { display: flex; gap: .7rem; flex-wrap: wrap; }

.holz-becker-reassure {
	display: grid;
	gap: .9rem;
	margin: 0 0 1.5rem;
	padding: 1.2rem 1.3rem;
	border: 1px dashed var(--kb-line);
	border-radius: var(--kb-radius);
	background: rgba(255, 255, 255, .7);
}

.holz-becker-reassure__item { display: flex; gap: .8rem; align-items: flex-start; }
.holz-becker-reassure__item svg { color: var(--kb-ember); flex: none; margin-top: .15rem; }
.holz-becker-reassure__item p { margin: 0; display: flex; flex-direction: column; gap: .1rem; }
.holz-becker-reassure__item strong { font-size: .9rem; color: var(--kb-ink); }
.holz-becker-reassure__item span { font-size: .8rem; color: var(--kb-ink-3); }

.holz-becker-single__meta {
	list-style: none;
	margin: 0;
	padding: 1.1rem 0 0;
	border-top: 1px solid var(--kb-line-2);
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 2rem;
}

.holz-becker-single__meta li { display: flex; flex-direction: column; gap: .1rem; }

.holz-becker-single__meta span {
	font-size: .67rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--kb-ink-3);
}

.holz-becker-single__meta strong { font-size: .9rem; color: var(--kb-ink); }

/* Étoiles WooCommerce (fiche produit et avis) */
.holz-becker .star-rating {
	color: var(--kb-ember);
	font-size: 1em;
	letter-spacing: .06em;
	float: none;
	margin: 0;
}

.holz-becker .star-rating::before { color: rgba(38, 38, 38, .2); }

/* Les étoiles pleines sont peintes par le ::before du <span> intérieur, en
   violet WooCommerce (#7f54b3). C'est ce pseudo-élément qu'il faut viser. */
.holz-becker .star-rating span,
.holz-becker .star-rating span::before,
.holz-becker .woocommerce-product-rating .star-rating span,
.holz-becker .woocommerce-product-rating .star-rating span::before,
.holz-becker #reviews .star-rating span::before { color: var(--kb-ember-text); }
.holz-becker .woocommerce-review-link { color: var(--kb-ink-3); font-size: .85rem; border-bottom: 1px solid var(--kb-line); }
.holz-becker .woocommerce-review-link:hover { color: var(--kb-ember); }
.holz-becker #reviews .star-rating::before { color: rgba(38, 38, 38, .2); }
.holz-becker .comment-form-rating p.stars a { color: var(--kb-ember); }

/* Onglets — bandeau horizontal pleine largeur (Storefront les met en colonne) */
/* --------------------------------------------------------------------------
   Produits similaires — bandeau défilant
   -------------------------------------------------------------------------- */
/*
 * « min-width: 0 » n'est pas décoratif : une piste de huit cartes mesure deux
 * mille pixels, et une colonne de grille en « 1fr » se laisse élargir par son
 * contenu. Sans cette remise à zéro, le bandeau étirait la fiche entière au
 * lieu de défiler.
 */
.holz-becker-similar {
	grid-column: 1 / -1;
	min-width: 0;
	margin-top: clamp(2rem, 4vw, 3.2rem);
	padding-top: clamp(1.6rem, 3vw, 2.4rem);
	border-top: 1px solid var(--kb-line);
}

.holz-becker-similar__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.2rem;
}

.holz-becker-similar__title {
	margin: 0;
	font-size: clamp(1.2rem, 2vw, 1.6rem);
	font-weight: 600;
	color: var(--kb-bark);
}

.holz-becker-similar__nav { display: flex; gap: .5rem; }

/*
 * Le sélecteur porte l'élément : « .holz-becker button » habille tous les boutons du
 * thème en pastille sombre et l'emporterait sur une simple classe, laissant
 * deux ronds noirs sans icône.
 */
.holz-becker button.holz-becker-similar__arrow {
	width: 42px;
	height: 42px;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--kb-line);
	border-radius: var(--kb-radius-pill);
	background: var(--kb-card);
	color: var(--kb-ink);
	cursor: pointer;
	padding: 0;
	box-shadow: none;
	transition: border-color .2s var(--kb-ease), background .2s var(--kb-ease), opacity .2s var(--kb-ease);
}

.holz-becker button.holz-becker-similar__arrow:hover {
	border-color: var(--kb-bark);
	background: var(--kb-paper);
	color: var(--kb-ink);
}

/* Une flèche qui ne mène nulle part s'efface plutôt que de mentir. */
.holz-becker button.holz-becker-similar__arrow[disabled] { opacity: .3; cursor: default; }
.holz-becker button.holz-becker-similar__arrow[disabled]:hover { background: var(--kb-card); border-color: var(--kb-line); }
.holz-becker button.holz-becker-similar__arrow svg { display: block; }
.holz-becker button.holz-becker-similar__arrow[data-holz-becker-scroll="-1"] svg { transform: rotate(180deg); }

/*
 * Défilement horizontal avec ancrage : chaque carte vient se caler au bord
 * gauche, si bien qu'un demi-produit ne reste jamais coupé à l'arrêt.
 */
.holz-becker-similar__track {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.holz-becker-similar__track::-webkit-scrollbar { display: none; }

.holz-becker .holz-becker-similar__list.products {
	display: flex;
	gap: clamp(.8rem, 1.6vw, 1.3rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.holz-becker .holz-becker-similar__list.products li.product {
	flex: 0 0 clamp(190px, 21vw, 246px);
	width: auto;
	margin: 0;
	scroll-snap-align: start;
}

/* La carte d'achat se termine bien avant la galerie : un écart trop généreux
   creusait un vide au bas de la fiche. */
.holz-becker .woocommerce-tabs { margin-top: clamp(1.6rem, 3vw, 2.6rem); }
.holz-becker .woocommerce-tabs ul.tabs,
.holz-becker .woocommerce-tabs .panel {
	width: 100%;
	float: none;
	margin-left: 0;
	margin-right: 0;
}

.holz-becker .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 0 0 1.8rem;
	padding: 0 0 .9rem;
	border-bottom: 1px solid var(--kb-line);
}

.holz-becker .woocommerce-tabs ul.tabs::before { display: none; }

.holz-becker .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 1px solid var(--kb-line);
	border-radius: 999px;
	margin: 0;
	padding: 0;
}

.holz-becker .woocommerce-tabs ul.tabs li::before,
.holz-becker .woocommerce-tabs ul.tabs li::after { display: none; }

.holz-becker .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: .58rem 1.15rem;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--kb-ink-2);
}

.holz-becker .woocommerce-tabs ul.tabs li.active { background: var(--kb-ink); border-color: var(--kb-ink); }
.holz-becker .woocommerce-tabs ul.tabs li.active a { color: var(--kb-paper); }

.holz-becker .woocommerce-tabs .panel { max-width: 74ch; }
.holz-becker .woocommerce-tabs .panel h2 { font-size: 1.5rem; margin-bottom: 1rem; }

/*
 * Descriptions longues.
 *
 * Les fiches importées portent des textes de plusieurs milliers de signes.
 * Dans une colonne de soixante-quatorze caractères — la mesure confortable
 * pour lire — cela donnait un panneau de deux mille cinq cents pixels de haut
 * avec la moitié droite de la page vide. Deux colonnes conservent la mesure de
 * lecture, remplissent la largeur et divisent la hauteur par deux.
 *
 * Les autres onglets, courts et structurés, restent sur une colonne.
 */
@media (min-width: 1080px) {
	.holz-becker .woocommerce-tabs #tab-description {
		max-width: none;
		columns: 2;
		column-gap: clamp(2.2rem, 4vw, 3.6rem);
		column-rule: 1px solid var(--kb-line);
	}

	/*
	 * Titres, listes et tableaux ne se coupent pas entre deux colonnes ; les
	 * paragraphes, si. Vingt-neuf pour cent des fiches importées n'ont aucune
	 * balise : WordPress les enveloppe alors dans un unique paragraphe de
	 * plusieurs milliers de signes. Interdire sa coupure revenait à tout
	 * entasser dans la première colonne et à laisser l'autre vide.
	 */
	.holz-becker .woocommerce-tabs #tab-description > h2,
	.holz-becker .woocommerce-tabs #tab-description > h3,
	.holz-becker .woocommerce-tabs #tab-description > h4,
	.holz-becker .woocommerce-tabs #tab-description > ul,
	.holz-becker .woocommerce-tabs #tab-description > ol,
	.holz-becker .woocommerce-tabs #tab-description > table,
	.holz-becker .woocommerce-tabs #tab-description > figure { break-inside: avoid; }

	/* Le titre du panneau court sur toute la largeur, au-dessus des colonnes. */
	.holz-becker .woocommerce-tabs #tab-description > h2:first-child {
		column-span: all;
		margin-bottom: 1.4rem;
	}

	.holz-becker .woocommerce-tabs #tab-description > h2:not(:first-child) {
		margin-top: 0;
		font-size: 1.15rem;
	}
}

.holz-becker-delivery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.5rem;
	max-width: none;
}

.holz-becker-delivery-grid h3 { font-size: 1.1rem; margin: 0 0 .5rem; }
.holz-becker-delivery-grid p { margin: 0; font-size: .92rem; color: var(--kb-ink-2); }

.holz-becker .shop_attributes { width: 100%; border-collapse: collapse; }
.holz-becker .shop_attributes th,
.holz-becker .shop_attributes td { padding: .75rem .2rem; border-bottom: 1px solid var(--kb-line-2); text-align: left; font-size: .93rem; }
.holz-becker .shop_attributes th { width: 34%; font-weight: 700; color: var(--kb-ink); }
.holz-becker .shop_attributes td { color: var(--kb-ink-2); }
.holz-becker .shop_attributes td p { margin: 0; }

.holz-becker .related > h2,
.holz-becker .upsells > h2,
.holz-becker .cross-sells > h2 {
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	margin: 0 0 1.6rem;
	padding-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--kb-line-2);
}

/* Barre d'achat collante mobile */
.holz-becker .storefront-sticky-add-to-cart {
	background: rgba(32, 48, 26, .96);
	border-bottom: 0;
	box-shadow: 0 12px 30px -20px rgba(0, 0, 0, .9);
}

.holz-becker .storefront-sticky-add-to-cart a,
.holz-becker .storefront-sticky-add-to-cart__content-title { color: var(--kb-paper); }

/* --------------------------------------------------------------------------
   21. Panier, commande, compte
   -------------------------------------------------------------------------- */
.holz-becker-freeship {
	margin: 0 0 1.6rem;
	padding: 1rem 1.2rem;
	background: var(--kb-paper-2);
	border-radius: var(--kb-radius);
}

.holz-becker-freeship__bar {
	height: 6px;
	border-radius: 999px;
	background: rgba(38, 38, 38, .12);
	overflow: hidden;
	margin-bottom: .7rem;
}

.holz-becker-freeship__bar span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--kb-ember), var(--kb-ember-2));
	transition: width .6s var(--kb-ease);
}

.holz-becker-freeship p { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .88rem; color: var(--kb-ink-2); }
.holz-becker-freeship svg { color: var(--kb-ember); flex: none; }

.holz-becker table.shop_table {
	border: 1px solid var(--kb-line-2);
	border-radius: var(--kb-radius-lg);
	border-collapse: separate;
	border-spacing: 0;
	background: var(--kb-card);
	overflow: hidden;
}

.holz-becker table.shop_table th {
	background: var(--kb-paper-2);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--kb-ink-2);
	padding: .95rem 1rem;
}

.holz-becker table.shop_table td { padding: 1.05rem 1rem; border-top: 1px solid var(--kb-line-2); }
.holz-becker table.shop_table .product-thumbnail img { width: 78px; border-radius: var(--kb-radius); }
.holz-becker table.shop_table .product-name a { color: var(--kb-ink); font-weight: 600; }
.holz-becker table.shop_table .product-name a:hover { color: var(--kb-ember); }

.holz-becker .cart_totals h2,
.holz-becker .cross-sells h2,
.holz-becker .woocommerce-checkout h3 {
	font-size: 1.35rem;
	margin: 0 0 1.1rem;
}

.holz-becker .cart-collaterals .cart_totals { float: none; width: 100%; }

.holz-becker .cart-collaterals {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
	gap: clamp(1.4rem, 3vw, 2.6rem);
	margin-top: 2.4rem;
}

.holz-becker .cart_totals table { width: 100%; }
.holz-becker .checkout-button { width: 100%; margin-top: 1rem; }

.holz-becker .woocommerce-checkout .col2-set { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
.holz-becker .woocommerce-checkout .col2-set .col-1,
.holz-becker .woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; }

.holz-becker #customer_details + #order_review_heading,
.holz-becker #order_review { margin-top: 2rem; }

.holz-becker .woocommerce-checkout #payment {
	background: var(--kb-card);
	border: 1px solid var(--kb-line-2);
	border-radius: var(--kb-radius-lg);
}

.holz-becker .woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--kb-line-2); padding: 1.2rem; }
.holz-becker .woocommerce-checkout #payment div.form-row { padding: 1.2rem; }
.holz-becker .woocommerce-checkout #payment div.payment_box { background: var(--kb-paper-2); border-radius: var(--kb-radius); font-size: .88rem; }
.holz-becker .woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--kb-paper-2); }

.holz-becker .woocommerce form .form-row label { font-size: .82rem; font-weight: 700; letter-spacing: .04em; color: var(--kb-ink-2); margin-bottom: .35rem; }

.holz-becker .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }

.holz-becker .woocommerce-MyAccount-navigation a {
	display: block;
	padding: .7rem .9rem;
	border-radius: var(--kb-radius);
	font-size: .92rem;
	font-weight: 600;
	color: var(--kb-ink-2);
}

.holz-becker .woocommerce-MyAccount-navigation li.is-active a,
.holz-becker .woocommerce-MyAccount-navigation a:hover { background: var(--kb-paper-2); color: var(--kb-ember); }

/* --------------------------------------------------------------------------
   22. Articles & pages
   -------------------------------------------------------------------------- */
.holz-becker .hentry { margin-bottom: 3rem; }
.holz-becker .entry-content { font-size: 1.04rem; color: var(--kb-ink-2); }

/* Largeur de lecture confortable — sur le texte seulement.
   Appliquée à tous les enfants, elle bridait aussi les conteneurs
   WooCommerce (panier, commande) à 72 caractères de large. */
.holz-becker .entry-content > p,
.holz-becker .entry-content > ul,
.holz-becker .entry-content > ol,
.holz-becker .entry-content > dl,
.holz-becker .entry-content > h2,
.holz-becker .entry-content > h3,
.holz-becker .entry-content > h4,
.holz-becker .entry-content > blockquote,
.holz-becker .entry-content > figure { max-width: 72ch; }
.holz-becker .entry-content h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 2.2rem 0 .9rem; color: var(--kb-ink); }
.holz-becker .entry-content h3 { font-size: 1.28rem; margin: 1.8rem 0 .7rem; color: var(--kb-ink); }
.holz-becker .entry-content ul, .holz-becker .entry-content ol { padding-left: 1.2rem; }
.holz-becker .entry-content li { margin-bottom: .45rem; }

.holz-becker .entry-content blockquote {
	margin: 2rem 0;
	padding: 1.2rem 1.6rem;
	border-left: 3px solid var(--kb-ember);
	background: var(--kb-paper-2);
	border-radius: 0 var(--kb-radius) var(--kb-radius) 0;
	font-family: var(--kb-display);
	font-size: 1.12rem;
	color: var(--kb-ink);
}

.holz-becker .entry-content blockquote p:last-child { margin-bottom: 0; }
.holz-becker .entry-content img { border-radius: var(--kb-radius-lg); }
.holz-becker .entry-content table { width: 100%; border-collapse: collapse; margin: 1.6rem 0; }
.holz-becker .entry-content th, .holz-becker .entry-content td { padding: .7rem .8rem; border-bottom: 1px solid var(--kb-line-2); text-align: left; }
.holz-becker .entry-content th { background: var(--kb-paper-2); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }

.holz-becker .page-header, .holz-becker .entry-header { margin-bottom: 1.6rem; }

/* --------------------------------------------------------------------------
   23. Animations d'apparition
   -------------------------------------------------------------------------- */
[data-reveal] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .75s var(--kb-ease), transform .75s var(--kb-ease);
	transition-delay: calc(var(--reveal-delay, 0) * 90ms);
}

[data-reveal].is-revealed { opacity: 1; transform: none; }

.holz-becker-no-js [data-reveal] { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   23 bis. Tunnel d'achat — panier, commande, confirmation
   -------------------------------------------------------------------------- */

/* Aucune colonne latérale dans ce thème : le contenu occupe toute la largeur.
   Storefront réserve 73,9 % au contenu via « body:not(...) .content-area »,
   plus spécifique qu'une simple classe : on qualifie donc par body. */
body.holz-becker .content-area,
body.holz-becker .site-main,
body.holz-becker.woocommerce-cart .content-area,
body.holz-becker.woocommerce-checkout .content-area,
body.holz-becker.woocommerce-account .content-area {
	width: 100%;
	float: none;
	margin-right: 0;
	padding: 0;
}

body.holz-becker .widget-area,
body.holz-becker #secondary { display: none; }

/* --- Fil des étapes ---------------------------------------------------- */
.holz-becker-steps-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1.6rem;
	list-style: none;
	margin: 0 0 clamp(1.6rem, 3vw, 2.4rem);
	padding: 0;
	counter-reset: step;
}

.holz-becker-steps-bar li {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--kb-ink-3);
}

.holz-becker-steps-bar li + li::before {
	content: "";
	width: clamp(1rem, 4vw, 3rem);
	height: 1px;
	background: var(--kb-line);
	margin-right: 1rem;
}

.holz-becker-steps-bar__num {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	flex: none;
	border-radius: 50%;
	border: 1px solid var(--kb-line);
	background: var(--kb-card);
	font-size: .8rem;
	font-variant-numeric: tabular-nums;
}

.holz-becker-steps-bar .is-current { color: var(--kb-ink); }
.holz-becker-steps-bar .is-current .holz-becker-steps-bar__num {
	background: var(--kb-ember);
	border-color: var(--kb-ember);
	color: var(--kb-bark);
}

.holz-becker-steps-bar .is-done { color: var(--kb-ember-text); }
.holz-becker-steps-bar .is-done .holz-becker-steps-bar__num {
	background: var(--kb-ember-3);
	border-color: var(--kb-ember);
	color: var(--kb-ember-text);
}

/* --- Panier : marchandise à gauche, totaux à droite -------------------- */
@media (min-width: 992px) {
	.holz-becker.woocommerce-cart .woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
		gap: clamp(1.6rem, 3vw, 2.8rem);
		align-items: start;
	}

	.holz-becker.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
	.holz-becker.woocommerce-cart .woocommerce > .holz-becker-steps-bar { grid-column: 1 / -1; }

	.holz-becker.woocommerce-cart .woocommerce-cart-form { grid-column: 1; margin: 0; }

	.holz-becker.woocommerce-cart .cart-collaterals {
		grid-column: 2;
		display: block;
		margin: 0;
		position: sticky;
		top: 6.5rem;
	}
}

.holz-becker .cart-collaterals .cart_totals {
	float: none;
	width: 100%;
	background: var(--kb-card);
	border: 1px solid var(--kb-line-2);
	border-radius: var(--kb-radius-lg);
	padding: clamp(1.1rem, 2vw, 1.6rem);
}

.holz-becker .cart_totals h2,
.holz-becker .woocommerce-checkout #order_review_heading {
	margin: 0 0 1rem;
	font-size: 1.3rem;
}

.holz-becker .cart_totals table.shop_table,
.holz-becker .woocommerce-checkout-review-order-table {
	border: 0;
	background: transparent;
	margin: 0;
	width: 100%;
}

.holz-becker .cart_totals table.shop_table th,
.holz-becker .cart_totals table.shop_table td,
.holz-becker .woocommerce-checkout-review-order-table th,
.holz-becker .woocommerce-checkout-review-order-table td {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--kb-line-2);
	padding: .85rem 0;
	vertical-align: top;
	text-transform: none;
	letter-spacing: 0;
	font-size: .92rem;
}

.holz-becker .cart_totals table.shop_table th,
.holz-becker .woocommerce-checkout-review-order-table th {
	color: var(--kb-ink-3);
	font-weight: 600;
	width: 42%;
}

.holz-becker .cart_totals .order-total th,
.holz-becker .cart_totals .order-total td,
.holz-becker .woocommerce-checkout-review-order-table .order-total th,
.holz-becker .woocommerce-checkout-review-order-table .order-total td {
	border-bottom: 0;
	padding-top: 1.1rem;
	font-size: 1.05rem;
	color: var(--kb-ink);
}

.holz-becker .cart_totals .order-total .amount,
.holz-becker .woocommerce-checkout-review-order-table .order-total .amount {
	font-family: var(--kb-display);
	font-size: 1.5rem;
	font-weight: 600;
}

/* Choix du transport : de vraies lignes cliquables. */
.holz-becker #shipping_method {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .45rem;
}

.holz-becker #shipping_method li {
	margin: 0;
	padding: 0;
	display: flex;
	align-items: flex-start;
	gap: .55rem;
}

.holz-becker #shipping_method li input { margin-top: .25rem; flex: none; }

.holz-becker #shipping_method li label {
	display: block;
	margin: 0;
	font-size: .9rem;
	line-height: 1.35;
	color: var(--kb-ink);
	cursor: pointer;
}

.holz-becker .woocommerce-shipping-destination { font-size: .8rem; color: var(--kb-ink-3); margin: .7rem 0 0; }
.holz-becker .shipping-calculator-button { font-size: .82rem; border-bottom: 1px solid var(--kb-line); }

.holz-becker .holz-becker-taxnote {
	display: block;
	margin: .6rem 0 0;
	font-size: .78rem;
	line-height: 1.45;
	color: var(--kb-ink-3);
}

.holz-becker-taxnote-row td { border-bottom: 0 !important; padding-top: .2rem !important; }

.holz-becker .summary .holz-becker-taxnote { margin: -.4rem 0 1.1rem; max-width: 46ch; }

/* --- Tableau du panier -------------------------------------------------- */
.holz-becker table.shop_table.woocommerce-cart-form__contents { overflow: hidden; table-layout: fixed; }

/* Répartition des colonnes : le nom du produit doit respirer, le reste est
   calibré. Sans cela le titre se casse lettre par lettre. */
.holz-becker table.cart .product-remove { width: 52px; padding-left: .9rem; padding-right: 0; }
.holz-becker table.cart .product-thumbnail { width: 96px; padding-left: .6rem; }
.holz-becker table.cart .product-name { width: auto; text-align: left; }
.holz-becker table.cart .product-price,
.holz-becker table.cart .product-subtotal { width: 130px; text-align: right; }
.holz-becker table.cart .product-quantity { width: 120px; text-align: center; }
.holz-becker table.cart th { text-align: left; }
.holz-becker table.cart th.product-price,
.holz-becker table.cart th.product-subtotal { text-align: right; }
.holz-becker table.cart th.product-quantity { text-align: center; }

.holz-becker .woocommerce-cart-form__cart-item .product-name a { font-weight: 600; line-height: 1.3; }
.holz-becker .woocommerce-cart-form__cart-item .product-thumbnail img { border-radius: var(--kb-radius); width: 76px; }

/* Mention de TVA incluse : petite, en corps de texte, pas en chiffre d'affiche. */
.holz-becker .includes_tax,
.holz-becker .tax_label {
	display: block;
	margin-top: .35rem;
	font-family: var(--kb-sans);
	font-size: .75rem;
	font-weight: 500;
	line-height: 1.4;
	color: var(--kb-ink-3);
}

.holz-becker .includes_tax .amount {
	font-family: var(--kb-sans);
	font-size: 1em;
	font-weight: 600;
	color: inherit;
}

.holz-becker .cart .product-remove a.remove {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--kb-paper-2);
	color: var(--kb-ink-2) !important;
	font-size: 1rem;
	line-height: 1;
	text-decoration: none;
}

.holz-becker .cart .product-remove a.remove:hover { background: var(--kb-promo); color: #fff !important; }

.holz-becker .quantity input.qty {
	width: 82px;
	padding: .6rem .4rem;
	text-align: center;
	font-weight: 700;
}

.holz-becker .actions .coupon { display: flex; gap: .6rem; flex-wrap: wrap; float: none; }
.holz-becker .actions .coupon .input-text { flex: 1 1 180px; min-width: 0; }
.holz-becker .cart .actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between; align-items: center; }
.holz-becker .cart .actions .button[name="update_cart"] { background: var(--kb-ink); color: var(--kb-paper); }

.holz-becker-empty-cart { margin-top: 1.4rem; }

/* --- Commande ----------------------------------------------------------- */
@media (min-width: 992px) {
	.holz-becker.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
		column-gap: clamp(1.8rem, 3.5vw, 3rem);
		row-gap: 0;
		align-items: start;
		width: 100%;
	}

	/* Connexion, code promo et messages passent en pleine largeur ; les deux
	   blocs principaux sont placés sur une même rangée explicite, sinon le
	   récapitulatif se retrouve rejeté sous le formulaire. */
	.holz-becker.woocommerce-checkout form.checkout > * { grid-column: 1 / -1; }

	.holz-becker.woocommerce-checkout form.checkout > #customer_details {
		grid-column: 1;
		grid-row: 90;
	}

	.holz-becker.woocommerce-checkout form.checkout > .holz-becker-checkout__aside {
		grid-column: 2;
		grid-row: 90;
		position: sticky;
		top: 6.5rem;
	}
}

/* WooCommerce et Storefront donnent 48 % de large a ces blocs : dans une
   grille, ils doivent remplir leur colonne. */
.holz-becker.woocommerce-checkout .woocommerce { width: 100%; max-width: none; }
.holz-becker.woocommerce-checkout #customer_details,
.holz-becker.woocommerce-checkout .holz-becker-checkout__aside,
.holz-becker.woocommerce-checkout #order_review,
.holz-becker.woocommerce-checkout .col2-set .col-1,
.holz-becker.woocommerce-checkout .col2-set .col-2 {
	width: 100%;
	float: none;
	margin: 0;
}

.holz-becker.woocommerce-checkout .holz-becker-checkout__aside #order_review_heading { margin: 0 0 1rem; }

.holz-becker .woocommerce-checkout .col2-set { display: block; }
.holz-becker .woocommerce-checkout .col2-set .col-1,
.holz-becker .woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; }

.holz-becker .woocommerce-billing-fields h3,
.holz-becker .woocommerce-shipping-fields h3,
.holz-becker .woocommerce-additional-fields h3 {
	font-size: 1.3rem;
	margin: 0 0 1.1rem;
}

.holz-becker .woocommerce-shipping-fields,
.holz-becker .woocommerce-additional-fields { margin-top: 1.8rem; }

.holz-becker .woocommerce form .form-row { padding: 0; margin: 0 0 1rem; }
.holz-becker .woocommerce form .form-row label { display: block; }
.holz-becker .woocommerce form .form-row-first,
.holz-becker .woocommerce form .form-row-last { width: 100%; float: none; }

@media (min-width: 600px) {
	.holz-becker .woocommerce form .form-row-first,
	.holz-becker .woocommerce form .form-row-last { width: calc(50% - .5rem); float: left; }
	.holz-becker .woocommerce form .form-row-last { float: right; }
}

.holz-becker .woocommerce form .form-row .required { color: var(--kb-promo); text-decoration: none; }
.holz-becker .woocommerce .select2-container--default .select2-selection--single {
	height: auto;
	padding: .5rem .3rem;
	border: 1px solid var(--kb-line);
	border-radius: var(--kb-radius);
	background: #fff;
}

.holz-becker #order_review {
	background: var(--kb-card);
	border: 1px solid var(--kb-line-2);
	border-radius: var(--kb-radius-lg);
	padding: clamp(1.1rem, 2vw, 1.6rem);
	position: sticky;
	top: 6.5rem;
}

.holz-becker .woocommerce-checkout #payment {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin-top: 1.2rem;
}

.holz-becker .woocommerce-checkout #payment ul.payment_methods {
	border: 0;
	border-top: 1px solid var(--kb-line-2);
	padding: 1.2rem 0 0;
	margin: 0;
	display: grid;
	gap: .5rem;
}

.holz-becker .woocommerce-checkout #payment ul.payment_methods li {
	background: transparent;
	padding: 0;
	margin: 0;
	list-style: none;
}

.holz-becker .woocommerce-checkout #payment ul.payment_methods li > label {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .75rem .9rem;
	border: 1px solid var(--kb-line);
	border-radius: var(--kb-radius);
	font-weight: 600;
	font-size: .92rem;
	cursor: pointer;
	transition: border-color .2s, background .2s;
}

.holz-becker .woocommerce-checkout #payment ul.payment_methods li > input:checked + label {
	border-color: var(--kb-ember);
	background: var(--kb-ember-3);
}

/* Storefront repeint le bouton radio natif en pastille sombre. On le masque
   et on dessine l'indicateur nous-mêmes, sur le libellé. */
.holz-becker .woocommerce-checkout #payment ul.payment_methods li > input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.holz-becker .woocommerce-checkout #payment ul.payment_methods li > label::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid var(--kb-line);
	background: #fff;
	transition: border-color .2s, box-shadow .2s;
}

.holz-becker .woocommerce-checkout #payment ul.payment_methods li > input:checked + label::before {
	border-color: var(--kb-ember-text);
	box-shadow: inset 0 0 0 4px var(--kb-ember-text);
}

.holz-becker .woocommerce-checkout #payment ul.payment_methods li > input:focus-visible + label {
	outline: 2px solid var(--kb-ember-text);
	outline-offset: 2px;
}

/* Storefront dessine sa propre pastille sur le libellé, avec un glyphe Font
   Awesome violet. On neutralise ses deux pseudo-éléments et on porte
   l'indicateur par l'élément de liste, que le thème parent ne touche pas. */
.holz-becker .woocommerce-checkout #payment ul.payment_methods li > label::before,
.holz-becker .woocommerce-checkout #payment ul.payment_methods li > label::after {
	content: none !important;
	display: none !important;
}

.holz-becker .woocommerce-checkout #payment ul.payment_methods li { position: relative; }

.holz-becker .woocommerce-checkout #payment ul.payment_methods li > label { padding-left: 2.7rem; }

.holz-becker .woocommerce-checkout #payment ul.payment_methods li::before {
	content: "";
	position: absolute;
	left: 1rem;
	top: 1.05rem;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid var(--kb-line);
	background: #fff;
	pointer-events: none;
	z-index: 2;
	transition: border-color .2s, box-shadow .2s;
}

.holz-becker .woocommerce-checkout #payment ul.payment_methods li:has(> input:checked)::before {
	border-color: var(--kb-ember-text);
	box-shadow: inset 0 0 0 4px var(--kb-ember-text);
}

.holz-becker .woocommerce-checkout #payment div.payment_box {
	background: var(--kb-paper-2);
	border-radius: var(--kb-radius);
	margin: .35rem 0 .2rem;
	padding: .9rem 1rem;
	font-size: .85rem;
	color: var(--kb-ink-2);
}

.holz-becker .woocommerce-checkout #payment div.payment_box::before { display: none; }
.holz-becker .woocommerce-checkout #payment div.form-row { padding: 1.2rem 0 0; }
.holz-becker .woocommerce-checkout #payment .woocommerce-privacy-policy-text { font-size: .82rem; color: var(--kb-ink-3); }
.holz-becker .woocommerce-terms-and-conditions-wrapper { margin-bottom: 1rem; }
.holz-becker .woocommerce-terms-and-conditions-checkbox-text { font-size: .88rem; }
.holz-becker #place_order { width: 100%; padding: 1.05rem 1.4rem; font-size: .9rem; }

.holz-becker-checkout-trust {
	list-style: none;
	margin: 1.2rem 0 0;
	padding: 1.1rem 0 0;
	border-top: 1px solid var(--kb-line-2);
	display: grid;
	gap: .55rem;
}

.holz-becker-checkout-trust li {
	display: flex;
	align-items: center;
	gap: .55rem;
	font-size: .82rem;
	color: var(--kb-ink-3);
}

.holz-becker-checkout-trust svg { color: var(--kb-ember-text); flex: none; }

/* Cases et boutons radio à la couleur de la marque.
   Storefront les repeint en gris foncé et WooCommerce en violet admin :
   on repart de l'apparence native, teintée au vert. */
.holz-becker input[type="radio"],
.holz-becker input[type="checkbox"],
.holz-becker .wc_payment_method input[type="radio"],
.holz-becker #shipping_method input[type="radio"],
.holz-becker .woocommerce-form__input-checkbox {
	appearance: auto;
	-webkit-appearance: auto;
	accent-color: var(--kb-ember-text);
	background: none;
	border: 0;
	width: 17px;
	height: 17px;
	box-shadow: none;
}

/* La mention « dont TVA » reste une note, jamais un chiffre d'affiche. */
.holz-becker .cart_totals .order-total .includes_tax .amount,
.holz-becker .woocommerce-checkout-review-order-table .order-total .includes_tax .amount,
.holz-becker .order-total .includes_tax .amount {
	font-family: var(--kb-sans);
	font-size: .75rem;
	font-weight: 600;
	color: var(--kb-ink-3);
}

/* --- Confirmation de commande ------------------------------------------- */
.holz-becker .woocommerce-order { max-width: 900px; }

.holz-becker .woocommerce-notice--success {
	background: var(--kb-ember-3);
	border-left-color: var(--kb-ember);
	font-size: 1.02rem;
}

.holz-becker ul.woocommerce-order-overview {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1px;
	margin: 1.6rem 0;
	padding: 0;
	background: var(--kb-line-2);
	border: 1px solid var(--kb-line-2);
	border-radius: var(--kb-radius-lg);
	overflow: hidden;
}

.holz-becker ul.woocommerce-order-overview li {
	background: var(--kb-card);
	border: 0 !important;
	margin: 0;
	padding: 1.1rem 1.2rem;
	float: none;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--kb-ink-3);
}

.holz-becker ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: .35rem;
	font-family: var(--kb-display);
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--kb-ink);
}

.holz-becker .woocommerce-order-details__title,
.holz-becker .woocommerce-column__title {
	font-size: 1.35rem;
	margin: 2rem 0 1rem;
}

.holz-becker .woocommerce-customer-details address {
	font-style: normal;
	border: 1px solid var(--kb-line-2);
	border-radius: var(--kb-radius-lg);
	padding: 1.1rem 1.2rem;
	background: var(--kb-card);
	line-height: 1.7;
}

.holz-becker .woocommerce-bacs-bank-details {
	background: var(--kb-paper-2);
	border-radius: var(--kb-radius-lg);
	padding: 1.2rem 1.3rem;
	margin: 1.6rem 0;
}

.holz-becker .woocommerce-bacs-bank-details h2,
.holz-becker .woocommerce-bacs-bank-details h3 { font-size: 1.1rem; margin: 0 0 .8rem; }
.holz-becker .wc-bacs-bank-details { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .92rem; }
.holz-becker .wc-bacs-bank-details strong { color: var(--kb-ink); }

/* --- Mon compte ---------------------------------------------------------- */
@media (min-width: 768px) {
	.holz-becker .woocommerce-account .woocommerce-MyAccount-navigation { width: 26%; float: left; }
	.holz-becker .woocommerce-account .woocommerce-MyAccount-content { width: 70%; float: right; }
}

.holz-becker .woocommerce-MyAccount-navigation ul {
	background: var(--kb-card);
	border: 1px solid var(--kb-line-2);
	border-radius: var(--kb-radius-lg);
	padding: .5rem;
}

/* --------------------------------------------------------------------------
   24. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
	.holz-becker-utility__hours { display: none; }
	.holz-becker-nav__list > li > a { padding: .55rem .6rem; font-size: .84rem; }
}

@media (max-width: 1024px) {
	.holz-becker-hero__shell { grid-template-columns: 1fr; }
	.holz-becker-hero__visual { max-width: 560px; }
	.holz-becker-hero__ring { inset: -14% -18% auto auto; width: 100%; }
	/* En colonne unique, la hauteur d'écran ne contraint plus rien : retour à la largeur. */
	.holz-becker .holz-becker-hero__title { font-size: clamp(2.15rem, 5.6vw, 3.4rem); }
	.holz-becker-hero__card img { height: clamp(240px, 56vw, 400px); }
	.holz-becker-process__head { grid-template-columns: 1fr; }
	.holz-becker-split__grid { grid-template-columns: 1fr; }
	.holz-becker-faq__grid { grid-template-columns: 1fr; }
	/* « minmax(0, 1fr) » et non « 1fr » : la piste des produits similaires ne
	   doit pas pouvoir élargir la colonne. */
	.holz-becker.single-product div.product { grid-template-columns: minmax(0, 1fr); }

	/*
	 * Le placement explicite du bureau doit être relâché ici : « grid-column: 2 »
	 * dans une grille à une seule colonne en fabrique une seconde, implicite, et
	 * la fiche se retrouvait coupée en deux moitiés de 158 pixels.
	 */
	.holz-becker.single-product div.product .woocommerce-product-gallery,
	.holz-becker.single-product div.product .images,
	.holz-becker.single-product div.product .summary,
	.holz-becker.single-product div.product .entry-summary {
		grid-column: auto;
		grid-row: auto;
		position: static;
	}

	/*
	 * En colonne unique, un visuel carré pleine largeur repoussait le prix sous
	 * la ligne de flottaison : il fallait faire défiler avant de savoir combien
	 * coûte le produit. On le plafonne à un peu plus de la moitié de la hauteur
	 * d'écran, le cadrage « contain » préservant l'image entière.
	 */
	.holz-becker .woocommerce-product-gallery__image img {
		aspect-ratio: auto;
		max-height: 46vh;
	}

	.holz-becker .cart-collaterals { grid-template-columns: 1fr; }
	/* Pied de page : la marque en bandeau (texte | coordonnées), puis trois colonnes. */
	.holz-becker-footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.holz-becker-footer__brand {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto 1fr;
		column-gap: clamp(1.4rem, 3vw, 2.5rem);
		align-items: start;
	}

	.holz-becker-footer__brand > :first-child { justify-self: start; }
	.holz-becker-footer__brand .holz-becker-footer__pitch { margin-bottom: 0; }
	.holz-becker-footer__brand .holz-becker-footer__contact { grid-column: 2; grid-row: 1 / span 2; }
}

@media (max-width: 900px) {
	.holz-becker { font-size: 16px; }

	.holz-becker-header {
		grid-template-columns: auto 1fr auto;
		min-height: 68px;
	}

	.holz-becker .holz-becker-burger { display: inline-flex; }
	.holz-becker-nav { display: none; }
	/* Sur mobile, les pays livrés partent dans le tiroir de navigation. */
	.holz-becker-utility { display: none; }
	.holz-becker-header__brand { justify-self: center; }
	.holz-becker-logo__baseline { display: none; }
	.holz-becker-logo__mark { width: 34px; height: 34px; }
	.holz-becker-logo__name { font-size: 1.2rem; }
	.holz-becker .holz-becker-iconbtn--account { display: none; }
	.holz-becker .holz-becker-cartbtn { padding: .55rem .7rem; }

	.holz-becker-univers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.holz-becker-univers__item.is-feature,
	.holz-becker-univers__item:nth-child(4),
	.holz-becker-univers__item:nth-child(5) { grid-column: span 1; }
	/* Le bandeau du visuel occupe le bas de la carte : la pastille reste en haut. */
	.holz-becker-hero__chip { top: .8rem; right: .8rem; bottom: auto; }
	.holz-becker-gauge { width: 96px; height: 96px; left: -.6rem; bottom: 2rem; }
	.holz-becker-gauge__label strong { font-size: 1rem; }
	.holz-becker-promo__specs { grid-template-columns: repeat(2, 1fr); }
	.holz-becker .woocommerce-tabs ul.tabs { gap: .3rem; }
}

@media (max-width: 640px) {
	.holz-becker ul.products { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: .75rem; }
	.holz-becker-card__body { padding: .85rem .9rem 1rem; }
	.holz-becker .holz-becker-card__title { font-size: .98rem; }
	.holz-becker .holz-becker-card__price .price { font-size: 1.08rem; }
	.holz-becker-univers__grid { grid-template-columns: 1fr; }
	.holz-becker-card__peek { display: none; }
	.holz-becker-card__spec { font-size: .76rem; }

	.holz-becker-hero__stats { gap: 1.4rem 2rem; }
	.holz-becker-hero__cta .holz-becker-btn { width: 100%; }
	/* Pied de page : boutique et aide côte à côte, le reste en pleine largeur. */
	.holz-becker-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .8rem; }
	.holz-becker-footer__brand { display: block; }
	.holz-becker-footer__brand .holz-becker-footer__pitch { margin-bottom: 1rem; }
	.holz-becker-footer__news { grid-column: 1 / -1; }
	.holz-becker-footer__col h3 { font-size: .66rem; letter-spacing: .05em; }
	.holz-becker-footer__menu a { padding: .28rem 0; line-height: 1.35; }
	.holz-becker .storefront-sorting { flex-direction: column; align-items: stretch; }
	.holz-becker .woocommerce-ordering select { width: 100%; }
	.holz-becker table.shop_table .product-thumbnail img { width: 56px; }
	.holz-becker-choice { grid-template-columns: 1fr; }
	.holz-becker-section--bark .holz-becker-trust--grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
	.holz-becker-gauge { display: none; }
}

/* --------------------------------------------------------------------------
   25. Pages de contenu
   Contact, livraison, à propos, mentions légales, CGV, rétractation,
   confidentialité. Ces pages composent leurs propres sections, comme la page
   d'accueil : le gabarit leur rend la pleine largeur et se tait.
   -------------------------------------------------------------------------- */
.holz-becker-contenu #content.site-content > .col-full { max-width: none; padding: 0; }
.holz-becker-contenu #primary { width: 100%; float: none; margin: 0; }
.holz-becker-contenu .hentry { margin: 0; }
.holz-becker-contenu .site-content { padding-bottom: 0; }

/* Storefront réserve une marge sous la zone de contenu : sur ces pages, elle
   laissait une bande claire entre la dernière section et le pied de page. */
.holz-becker-contenu .content-area { margin-bottom: 0; }

/* --- Bandeau de titre ---------------------------------------------------- */
.holz-becker-pagehead {
	position: relative;
	background: var(--kb-bark);
	padding: clamp(2.2rem, 4.5vw, 3.6rem) 0 clamp(2.6rem, 5.5vw, 4.4rem);
	overflow: hidden;
	isolation: isolate;
}

/* Un halo discret évite l'aplat parfaitement plat. */
.holz-becker-pagehead::before {
	content: "";
	position: absolute;
	inset: -40% -10% auto auto;
	width: 34rem;
	height: 34rem;
	background: radial-gradient(circle, rgba(136, 181, 59, .22), transparent 62%);
	z-index: -1;
	pointer-events: none;
}

.holz-becker-pagehead__inner { position: relative; }

.holz-becker .holz-becker-pagehead__title {
	margin: 0;
	font-family: var(--kb-display);
	font-size: clamp(2.15rem, 4.8vw, 3.7rem);
	line-height: 1.05;
	letter-spacing: -.02em;
	color: #fff;
	max-width: 22ch;
}

.holz-becker-pagehead__lede {
	margin: 1.15rem 0 0;
	max-width: 60ch;
	font-size: clamp(1rem, 1.4vw, 1.14rem);
	line-height: 1.64;
	color: rgba(240, 245, 236, .78);
}

/* --- Bandeau des documents juridiques -------------------------------------
   CGV, Impressum, rétractation, confidentialité : on ne les parcourt pas, on
   y cherche un article précis. Un bandeau de 376 px repoussait le sommaire
   sous la ligne de flottaison. Il se réduit à ce qui oriente — fil d'Ariane,
   surtitre, titre. Le chapô n'était qu'une phrase d'accueil : sur un texte
   juridique, le titre dit déjà tout.
   -------------------------------------------------------------------------- */
.holz-becker-pagehead--compact {
	padding: clamp(1rem, 2vw, 1.5rem) 0 clamp(1.1rem, 2.2vw, 1.7rem);
}

.holz-becker-pagehead--compact::before { display: none; }

.holz-becker-pagehead--compact .holz-becker-pagehead__title {
	font-size: clamp(1.55rem, 2.6vw, 2.15rem);
	max-width: none;
}

.holz-becker-pagehead--compact .holz-becker-eyebrow { margin-bottom: .45rem; }
.holz-becker-pagehead--compact .holz-becker-breadcrumb--light { margin-bottom: .6rem; }
.holz-becker-pagehead--compact .holz-becker-pagehead__lede { display: none; }

.holz-becker-breadcrumb--light { margin-bottom: 1.4rem; }
.holz-becker-breadcrumb--light .woocommerce-breadcrumb,
.holz-becker-breadcrumb--light .woocommerce-breadcrumb a { color: rgba(240, 245, 236, .62); }
.holz-becker-breadcrumb--light .woocommerce-breadcrumb a:hover { color: var(--kb-ember-2); }
.holz-becker-breadcrumb--light .sep { color: rgba(240, 245, 236, .34); }

/* --- Corps de texte ------------------------------------------------------- */
.holz-becker-prose { max-width: 68ch; }
.holz-becker-prose > :first-child { margin-top: 0; }
.holz-becker-prose > :last-child { margin-bottom: 0; }

.holz-becker .holz-becker-prose h2 {
	margin: 2.6rem 0 .9rem;
	font-size: clamp(1.45rem, 2.4vw, 1.85rem);
	line-height: 1.18;
	color: var(--kb-bark);
}

.holz-becker .holz-becker-prose > h2:first-child { margin-top: 0; }

.holz-becker .holz-becker-prose h3 {
	margin: 1.9rem 0 .6rem;
	font-family: var(--kb-serif);
	font-size: 1.12rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	color: var(--kb-bark);
}

.holz-becker-prose p,
.holz-becker-prose li {
	font-size: 1.02rem;
	line-height: 1.76;
	color: var(--kb-ink-2);
}

.holz-becker-prose p { margin: 0 0 1.05rem; }

.holz-becker-prose ul,
.holz-becker-prose ol { margin: 0 0 1.15rem; padding-left: 1.3rem; }
.holz-becker-prose li { margin-bottom: .45rem; }
.holz-becker-prose li::marker { color: var(--kb-ember); }

.holz-becker-prose strong { color: var(--kb-ink); font-weight: 600; }
.holz-becker-prose a { text-decoration: underline; text-underline-offset: .18em; }

/* Adresse ou coordonnées posées telles quelles, sans puces. */
.holz-becker-prose .holz-becker-plain { list-style: none; padding: 0; }
.holz-becker-prose .holz-becker-plain li { margin-bottom: .2rem; }

/* --- Document à sommaire (CGV, confidentialité) ---------------------------- */
/* Sommaire à gauche, texte à droite, l'ensemble centré : sur la pleine largeur
   de la coque, un document juridique laisserait un tiers de page vide. */
.holz-becker-doc {
	display: grid;
	grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
	max-width: 62rem;
	margin-inline: auto;
}

.holz-becker-doc__main.holz-becker-prose { max-width: none; }

/* Variante « contenu d'abord » : le formulaire de contact et ses à-côtés. */
.holz-becker-doc--wide {
	grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
	max-width: none;
}

/* Variante « document juridique » : sommaire, texte, colonne d'appui. Le texte
   ne s'élargit pas — un article de loi se lit à 65 signes comme le reste —
   c'est la troisième colonne qui occupe le tiers droit resté vide. */
.holz-becker-doc--legal {
	grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) minmax(0, 17.5rem);
	gap: clamp(1.8rem, 3.4vw, 3.4rem);
	max-width: none;
}

.holz-becker-doc__aside { position: sticky; top: 7rem; }
.holz-becker-doc__rail { position: sticky; top: 7rem; }

/* La colonne du formulaire compte quatre blocs : collée, on n'atteindrait plus
   son bas. Seul le sommaire, court par nature, reste accroché. */
.holz-becker-doc--wide .holz-becker-doc__aside { position: static; }

/* Une page de contenu enchaîne beaucoup de sections : le rythme de la page
   d'accueil y serait trop ample. */
.holz-becker-section--tight { padding: clamp(2.4rem, 5vw, 4.4rem) 0; }

/* Le sommaire est une surface, pas une liste flottante : posé sur le papier,
   il tient sa colonne et se distingue du texte qu'il indexe. */
.holz-becker-toc {
	padding: 1.2rem 1.1rem 1.3rem;
	background: var(--kb-paper);
	border: 1px solid var(--kb-line-2);
	border-radius: var(--kb-radius-lg);
	max-height: calc(100vh - 9rem);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.holz-becker-toc__title {
	margin: 0 0 .6rem;
	font-family: var(--kb-sans);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--kb-ember-text);
}

/* Ce qui manque à un document de dix articles, c'est de savoir où l'on en est.
   La barre reste à zéro sans JavaScript : un filet, rien de faux. */
.holz-becker-toc__progress {
	display: block;
	height: 2px;
	margin: 0 0 .85rem;
	background: var(--kb-line);
	border-radius: 2px;
	overflow: hidden;
}

.holz-becker-toc__progress > span {
	display: block;
	width: 0;
	height: 100%;
	background: var(--kb-ember);
}

.holz-becker-toc__list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--kb-line); }

.holz-becker-toc__list a {
	display: block;
	padding: .42rem 0 .42rem .85rem;
	margin-left: -1px;
	border-left: 2px solid transparent;
	font-size: .9rem;
	line-height: 1.35;
	color: var(--kb-ink-3);
	transition: color .18s var(--kb-ease), border-color .18s var(--kb-ease);
}

/* Le numéro d'article passe en surtitre : « § 10 » et « Article 10 » n'ont pas
   la même largeur d'une langue à l'autre, une colonne fixe serait bancale. */
.holz-becker-toc__num {
	display: block;
	margin-bottom: .1rem;
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--kb-ink-3);
	opacity: .8;
}

.holz-becker-toc__list a:hover {
	border-left-color: var(--kb-ember);
	color: var(--kb-bark);
}

.holz-becker-toc__list a.is-current {
	border-left-color: var(--kb-ember);
	color: var(--kb-bark);
	font-weight: 600;
}

.holz-becker-toc__list a.is-current .holz-becker-toc__num { color: var(--kb-ember-text); opacity: 1; }

/* --- Articles d'un document juridique -------------------------------------- */
/* Dix paragraphes d'affilée ne donnaient aucun point d'arrêt : un filet et un
   numéro en surtitre suffisent à rendre l'article repérable. */
.holz-becker-docsec { scroll-margin-top: 6.5rem; }

.holz-becker-docsec + .holz-becker-docsec {
	margin-top: clamp(2rem, 3.4vw, 2.9rem);
	padding-top: clamp(2rem, 3.4vw, 2.9rem);
	border-top: 1px solid var(--kb-line-2);
}

.holz-becker .holz-becker-prose .holz-becker-docsec__title {
	display: block;
	margin: 0 0 .85rem;
	font-size: clamp(1.38rem, 2.3vw, 1.78rem);
	line-height: 1.18;
	color: var(--kb-bark);
}

.holz-becker-docsec__num {
	display: block;
	margin-bottom: .45rem;
	font-family: var(--kb-sans);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--kb-ember-text);
}

/* --- Date de mise à jour d'un texte juridique ------------------------------- */
.holz-becker-prose .holz-becker-legal-date {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 clamp(1.7rem, 3vw, 2.4rem);
	padding: .35rem .9rem;
	background: var(--kb-ember-3);
	border-radius: var(--kb-radius-pill);
	font-size: .82rem;
	line-height: 1.4;
	color: var(--kb-ember-text);
}

.holz-becker-prose .holz-becker-legal-date::before {
	content: "";
	flex: none;
	width: .45rem;
	height: .45rem;
	border-radius: 50%;
	background: var(--kb-ember);
}

.holz-becker-prose .holz-becker-legal-date em { font-style: normal; }

/* --- Colonne d'appui d'un document juridique -------------------------------- */
.holz-becker-rail { display: grid; gap: 1rem; }

.holz-becker-rail__card {
	padding: 1.15rem 1.2rem 1.2rem;
	background: var(--kb-card);
	border: 1px solid var(--kb-line-2);
	border-radius: var(--kb-radius-lg);
}

.holz-becker-rail__title {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 .5rem;
	font-family: var(--kb-sans);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--kb-ember-text);
}

.holz-becker-rail__title-icon { display: grid; place-items: center; flex: none; }

.holz-becker-rail__list { list-style: none; margin: 0; padding: 0; }
.holz-becker-rail__list li + li { border-top: 1px solid var(--kb-line-2); }

.holz-becker-rail__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .7rem;
	padding: .58rem 0;
	font-size: .92rem;
	line-height: 1.4;
	color: var(--kb-ink-2);
	transition: color .18s var(--kb-ease);
}

.holz-becker-rail__list a svg {
	flex: none;
	opacity: 0;
	transform: translateX(-.3rem);
	transition: opacity .18s var(--kb-ease), transform .18s var(--kb-ease);
}

.holz-becker-rail__list a:hover { color: var(--kb-ember-text); }
.holz-becker-rail__list a:hover svg,
.holz-becker-rail__list a:focus-visible svg { opacity: 1; transform: none; }

/* Bouton d'impression : « .holz-becker button » impose l'aplat sombre des boutons
   d'achat, qu'un utilitaire de colonne n'a pas à porter. */
.holz-becker .holz-becker-rail__print {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	width: 100%;
	padding: .7rem 1.1rem;
	background: transparent;
	border: 1px solid var(--kb-line);
	border-radius: var(--kb-radius-pill);
	font-family: var(--kb-sans);
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: none;
	color: var(--kb-ink-2);
	box-shadow: none;
	cursor: pointer;
	transition: background .18s var(--kb-ease), border-color .18s var(--kb-ease), color .18s var(--kb-ease);
}

.holz-becker .holz-becker-rail__print:hover {
	background: var(--kb-ember-3);
	border-color: var(--kb-ember);
	color: var(--kb-bark);
	transform: none;
	box-shadow: none;
}

.holz-becker .holz-becker-rail__print[hidden] { display: none; }

.holz-becker-rail__help {
	padding: 1.15rem 1.2rem 1.25rem;
	background: var(--kb-ember-3);
	border-left: 3px solid var(--kb-ember);
	border-radius: var(--kb-radius);
}

.holz-becker-rail__help-title {
	margin: 0 0 .35rem;
	font-family: var(--kb-serif);
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--kb-bark);
}

.holz-becker-rail__help-text { margin: 0 0 .75rem; font-size: .88rem; line-height: 1.6; color: var(--kb-ink-2); }

.holz-becker-rail__help-link {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .26rem 0;
	font-size: .91rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--kb-bark);
	overflow-wrap: anywhere;
}

.holz-becker-rail__help-link svg { flex: none; color: var(--kb-ember-text); }
.holz-becker-rail__help-link:hover { color: var(--kb-ember-text); }

/* --- Cartes d'information -------------------------------------------------- */
.holz-becker-infocards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
	gap: clamp(.9rem, 1.6vw, 1.15rem);
}

.holz-becker-infocard {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	padding: clamp(1.3rem, 2.2vw, 1.65rem);
	background: var(--kb-card);
	border: 1px solid var(--kb-line-2);
	border-radius: var(--kb-radius-lg);
}

.holz-becker-infocard__label {
	margin: 0;
	font-family: var(--kb-sans);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--kb-ember-text);
}

.holz-becker-infocard__value {
	margin: 0;
	font-family: var(--kb-serif);
	font-size: 1.16rem;
	line-height: 1.35;
	color: var(--kb-bark);
}

.holz-becker-infocard__value a { color: inherit; }
.holz-becker-infocard__value a:hover { color: var(--kb-ember-text); }

.holz-becker-infocard__note {
	margin: .25rem 0 0;
	font-size: .9rem;
	line-height: 1.55;
	color: var(--kb-ink-3);
}

/* --- Canaux de contact ------------------------------------------------------ */
/* Même grille que les cartes d'information, mais chaque carte est un geste :
   quatre boîtes identiques ne disaient pas laquelle décroche et laquelle
   répond par écrit. */
.holz-becker-channels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
	gap: clamp(.9rem, 1.6vw, 1.15rem);
}

.holz-becker .holz-becker-channel {
	display: flex;
	flex-direction: column;
	gap: .28rem;
	padding: clamp(1.3rem, 2.2vw, 1.65rem);
	background: var(--kb-card);
	border: 1px solid var(--kb-line-2);
	border-radius: var(--kb-radius-lg);
	color: var(--kb-ink);
	transition: border-color .22s var(--kb-ease), box-shadow .22s var(--kb-ease), transform .22s var(--kb-ease);
}

.holz-becker .holz-becker-channel:hover {
	border-color: var(--kb-ember);
	box-shadow: var(--kb-shadow-sm);
	transform: translateY(-2px);
	color: var(--kb-ink);
}

.holz-becker-channel__icon {
	display: grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	margin-bottom: .6rem;
	border-radius: 50%;
	background: var(--kb-ember-3);
	color: var(--kb-ember-text);
	transition: background .22s var(--kb-ease), color .22s var(--kb-ease);
}

.holz-becker .holz-becker-channel:hover .holz-becker-channel__icon { background: var(--kb-ember); color: var(--kb-bark); }

.holz-becker-channel__label {
	font-family: var(--kb-sans);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--kb-ember-text);
}

.holz-becker-channel__value {
	font-family: var(--kb-serif);
	font-size: 1.16rem;
	line-height: 1.35;
	color: var(--kb-bark);
	overflow-wrap: anywhere;
}

.holz-becker-channel__note {
	margin: .12rem 0 .8rem;
	font-size: .89rem;
	line-height: 1.55;
	color: var(--kb-ink-3);
}

/* Repoussée en bas de carte, l'action aligne les quatre cartes entre elles
   quelle que soit la longueur de la note. */
.holz-becker-channel__action {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin-top: auto;
	padding-top: .95rem;
	border-top: 1px solid var(--kb-line-2);
	font-family: var(--kb-sans);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--kb-ink-3);
	transition: color .22s var(--kb-ease), gap .22s var(--kb-ease);
}

.holz-becker-channel__action svg { flex: none; }
.holz-becker .holz-becker-channel:hover .holz-becker-channel__action { color: var(--kb-ember-text); gap: .65rem; }

/* --- Encart d'appoint titré -------------------------------------------------- */
.holz-becker-panel {
	padding: clamp(1.15rem, 2vw, 1.5rem);
	background: var(--kb-card);
	border: 1px solid var(--kb-line-2);
	border-radius: var(--kb-radius-lg);
	scroll-margin-top: 6.5rem;
}

.holz-becker-panel + .holz-becker-panel,
.holz-becker-panel + .holz-becker-callout { margin-top: .9rem; }

.holz-becker-panel__head {
	display: flex;
	align-items: center;
	gap: .65rem;
	margin: 0 0 .7rem;
	font-family: var(--kb-serif);
	font-size: 1.06rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--kb-bark);
}

.holz-becker-panel__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 50%;
	background: var(--kb-ember-3);
	color: var(--kb-ember-text);
}

.holz-becker-panel__body p {
	margin: 0 0 .8rem;
	font-size: .95rem;
	line-height: 1.68;
	color: var(--kb-ink-2);
}

.holz-becker-panel__body > :last-child,
.holz-becker-panel__body p:last-child { margin-bottom: 0; }

/* Le tableau des horaires est déjà dans une surface : son propre cadre ferait
   double bordure. */
.holz-becker .holz-becker-panel .holz-becker-datatable { border: 0; border-radius: 0; background: transparent; }
.holz-becker .holz-becker-panel .holz-becker-datatable th,
.holz-becker .holz-becker-panel .holz-becker-datatable td { padding: .58rem .1rem; }
.holz-becker .holz-becker-panel .holz-becker-datatable tbody tr:first-child th,
.holz-becker .holz-becker-panel .holz-becker-datatable tbody tr:first-child td { padding-top: 0; }

/* --- Formulaire posé sur une surface ----------------------------------------- */
/* Sans cadre, les champs flottaient sur l'aplat de la section. */
.holz-becker-formcard {
	margin-top: clamp(1.4rem, 2.6vw, 2rem);
	padding: clamp(1.3rem, 2.8vw, 2.1rem);
	background: var(--kb-paper);
	border: 1px solid var(--kb-line-2);
	border-radius: var(--kb-radius-lg);
}

/* Un surtitre posé dans un bloc de prose garde son corps de surtitre. */
.holz-becker-prose .holz-becker-eyebrow { font-size: .715rem; line-height: 1.4; color: var(--kb-ember-text); }

/* --- Chiffres clés ---------------------------------------------------------- */
.holz-becker-keyfacts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: clamp(1rem, 2vw, 1.6rem);
}

.holz-becker-keyfact { padding-left: 1.05rem; border-left: 2px solid var(--kb-ember); }

.holz-becker-keyfact__num {
	display: block;
	font-family: var(--kb-display);
	font-size: clamp(1.7rem, 3vw, 2.15rem);
	line-height: 1;
	color: var(--kb-bark);
}

.holz-becker-keyfact__label {
	display: block;
	margin-top: .4rem;
	font-size: .92rem;
	line-height: 1.5;
	color: var(--kb-ink-3);
}

.holz-becker-section--bark .holz-becker-keyfact__num { color: #fff; }
.holz-becker-section--bark .holz-becker-keyfact__label { color: rgba(240, 245, 236, .72); }

/* --- Tableaux --------------------------------------------------------------- */
.holz-becker .holz-becker-datatable {
	width: 100%;
	margin: 0;
	border: 1px solid var(--kb-line-2);
	border-radius: var(--kb-radius-lg);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--kb-card);
	font-size: .97rem;
}

.holz-becker .holz-becker-datatable th,
.holz-becker .holz-becker-datatable td {
	padding: .85rem 1.1rem;
	text-align: left;
	vertical-align: top;
	line-height: 1.55;
	border: 0;
	border-bottom: 1px solid var(--kb-line-2);
	color: var(--kb-ink-2);
}

.holz-becker .holz-becker-datatable thead th {
	background: var(--kb-bark);
	color: #fff;
	font-family: var(--kb-sans);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.holz-becker .holz-becker-datatable tbody tr:last-child th,
.holz-becker .holz-becker-datatable tbody tr:last-child td { border-bottom: 0; }

.holz-becker .holz-becker-datatable tbody th {
	font-family: var(--kb-sans);
	font-size: .95rem;
	font-weight: 600;
	color: var(--kb-bark);
}

/* Une colonne fixe n'a de sens que sur un tableau à deux colonnes ; sur trois,
   elle écrasait celle du milieu. */
.holz-becker .holz-becker-datatable--hours tbody th { width: 42%; }

.holz-becker .holz-becker-datatable td strong { color: var(--kb-bark); }

/* Un tableau ne doit jamais élargir la page : il défile dans son cadre. */
.holz-becker-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- Encart ----------------------------------------------------------------- */
.holz-becker-callout {
	padding: clamp(1.2rem, 2.2vw, 1.6rem) clamp(1.3rem, 2.4vw, 1.75rem);
	background: var(--kb-ember-3);
	border-left: 3px solid var(--kb-ember);
	border-radius: var(--kb-radius);
}

.holz-becker-callout__title {
	margin: 0 0 .45rem;
	font-family: var(--kb-serif);
	font-size: 1.08rem;
	font-weight: 600;
	color: var(--kb-bark);
}

.holz-becker-callout__text { margin: 0; font-size: .97rem; line-height: 1.65; color: var(--kb-ink-2); }

.holz-becker-callout__links {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.4rem;
	margin: .85rem 0 0;
}

.holz-becker-callout__link { font-weight: 600; }

/* --- Étapes numérotées -------------------------------------------------------- */
.holz-becker-steplist { counter-reset: kb-step; list-style: none; margin: 0; padding: 0; display: grid; gap: 1.35rem; }

.holz-becker-steplist li {
	counter-increment: kb-step;
	position: relative;
	padding-left: 3.2rem;
	margin: 0;
}

.holz-becker-steplist li::before {
	content: counter(kb-step);
	position: absolute;
	left: 0;
	top: -.1rem;
	width: 2.15rem;
	height: 2.15rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--kb-ember-3);
	color: var(--kb-ember-text);
	font-family: var(--kb-display);
	font-size: 1rem;
	font-weight: 600;
}

.holz-becker-steplist__title {
	margin: 0 0 .25rem;
	font-family: var(--kb-serif);
	font-size: 1.06rem;
	font-weight: 600;
	color: var(--kb-bark);
}

.holz-becker-steplist__text { margin: 0; font-size: .97rem; line-height: 1.65; color: var(--kb-ink-3); }

/* --- Illustration -------------------------------------------------------------- */
.holz-becker-figure { margin: 0; }
.holz-becker-figure img { display: block; width: 100%; height: auto; border-radius: var(--kb-radius-lg); }
.holz-becker-figure figcaption { margin-top: .7rem; font-size: .88rem; line-height: 1.55; color: var(--kb-ink-3); }

/* Deux colonnes texte + image, qui se replient sous 900 px. */
.holz-becker-duo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.8rem, 4vw, 3.4rem);
	align-items: center;
}

/* --- Formulaire de contact ------------------------------------------------------ */
.holz-becker-form { margin: 0; }

.holz-becker-form__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1rem 1.15rem;
}

.holz-becker-form__field { margin: 0 0 1.15rem; }
.holz-becker-form__grid .holz-becker-form__field { margin: 0; }

.holz-becker-form__field label {
	display: block;
	margin-bottom: .38rem;
	font-family: var(--kb-sans);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--kb-bark);
}

.holz-becker-form__req { color: var(--kb-ember-text); }

.holz-becker .holz-becker-form input[type="text"],
.holz-becker .holz-becker-form input[type="email"],
.holz-becker .holz-becker-form input[type="tel"],
.holz-becker .holz-becker-form select,
.holz-becker .holz-becker-form textarea {
	width: 100%;
	padding: .78rem .95rem;
	background: var(--kb-card);
	border: 1px solid var(--kb-line);
	border-radius: var(--kb-radius);
	font-family: var(--kb-sans);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--kb-ink);
	box-shadow: none;
	transition: border-color .18s var(--kb-ease);
}

.holz-becker .holz-becker-form textarea { resize: vertical; min-height: 9rem; }

.holz-becker .holz-becker-form input:focus,
.holz-becker .holz-becker-form select:focus,
.holz-becker .holz-becker-form textarea:focus { border-color: var(--kb-ember); }

.holz-becker-form__err {
	display: block;
	margin-top: .35rem;
	font-size: .85rem;
	color: var(--kb-promo);
}

.holz-becker-form__alert {
	margin: 0 0 1.25rem;
	padding: .85rem 1.1rem;
	background: rgba(145, 30, 30, .07);
	border-left: 3px solid var(--kb-promo);
	border-radius: var(--kb-radius);
	font-size: .95rem;
	color: var(--kb-promo);
}

.holz-becker-form__consent { margin: 0 0 1.35rem; }

.holz-becker-form__consent label {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	font-size: .92rem;
	line-height: 1.6;
	color: var(--kb-ink-2);
	cursor: pointer;
}

.holz-becker-form__consent input { margin-top: .28rem; flex: none; }

/* Champ-piège : invisible pour l'œil, présent pour les robots. */
.holz-becker-form__trap {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.holz-becker-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .8rem 1.2rem;
	margin: 0;
}

.holz-becker .holz-becker-form__submit {
	padding: .92rem 2rem;
	background: var(--kb-bark);
	color: #fff;
	border: 0;
	border-radius: var(--kb-radius-pill);
	font-family: var(--kb-sans);
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: .02em;
	cursor: pointer;
	transition: background .18s var(--kb-ease), transform .18s var(--kb-ease);
}

.holz-becker .holz-becker-form__submit:hover { background: var(--kb-bark-3); transform: translateY(-1px); }

.holz-becker-form__note { font-size: .85rem; color: var(--kb-ink-3); }

.holz-becker-form__done {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: clamp(1.3rem, 2.4vw, 1.8rem);
	background: var(--kb-ember-3);
	border-left: 3px solid var(--kb-ember);
	border-radius: var(--kb-radius);
}

.holz-becker-form__done-mark {
	flex: none;
	width: 2rem;
	height: 2rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--kb-ember);
	color: #fff;
	font-size: 1.05rem;
	font-weight: 700;
}

.holz-becker-form__done-title {
	margin: 0 0 .3rem;
	font-family: var(--kb-serif);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--kb-bark);
}

.holz-becker-form__done-text { margin: 0; font-size: .97rem; line-height: 1.65; color: var(--kb-ink-2); }

/* --- Magazine --------------------------------------------------------------------- */
/* Trois colonnes au plus : au-delà, les cartes deviennent des vignettes. */
.holz-becker-journal__grid--archive { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.holz-becker .navigation.pagination { margin: clamp(2rem, 4vw, 3rem) 0 0; }

.holz-becker .navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .4rem;
}

.holz-becker .navigation.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 .6rem;
	border: 1px solid var(--kb-line);
	border-radius: var(--kb-radius-pill);
	font-family: var(--kb-sans);
	font-size: .92rem;
	font-weight: 600;
	color: var(--kb-ink-2);
	background: var(--kb-card);
}

.holz-becker .navigation.pagination .page-numbers:hover { border-color: var(--kb-ember); color: var(--kb-bark); }

.holz-becker .navigation.pagination .page-numbers.current {
	background: var(--kb-bark);
	border-color: var(--kb-bark);
	color: #fff;
}

.holz-becker .navigation.pagination .screen-reader-text { position: absolute; left: -9999px; }

/* --- Repli ------------------------------------------------------------------------ */
/* Sous 1200 px, la troisième colonne n'a plus la largeur d'une colonne : elle
   passe sous le texte et s'étale en rangée plutôt que de rester une bande
   creuse contre le bord. */
@media (max-width: 1200px) {
	.holz-becker-doc--legal { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); }

	.holz-becker-doc__rail {
		position: static;
		grid-column: 1 / -1;
		margin-top: clamp(2rem, 4vw, 3rem);
	}

	.holz-becker-rail { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); align-items: start; }

	/* En rangée, le bouton passe derrière les deux blocs de contenu plutôt que
	   de trôner seul à côté d'eux. */
	.holz-becker-rail__help { order: 1; }

	.holz-becker .holz-becker-rail__print {
		order: 2;
		grid-column: 1 / -1;
		justify-self: start;
		width: auto;
	}
}

@media (max-width: 900px) {
	.holz-becker-journal__grid--archive { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.holz-becker-doc,
	.holz-becker-doc--wide { grid-template-columns: 1fr; }
	.holz-becker-doc__aside { position: static; }
	.holz-becker-toc { max-height: none; overflow: visible; }
	.holz-becker-toc__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
	.holz-becker-duo { grid-template-columns: 1fr; }
	.holz-becker-duo .holz-becker-figure { order: -1; }
}

@media (max-width: 640px) {
	.holz-becker-journal__grid--archive { grid-template-columns: 1fr; }
	.holz-becker .holz-becker-datatable tbody th { width: auto; }
	.holz-becker-form__actions { flex-direction: column; align-items: stretch; }
	.holz-becker .holz-becker-form__submit { width: 100%; }
	.holz-becker-form__note { text-align: center; }
}

/* --------------------------------------------------------------------------
   26. Préférences système
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.holz-becker *,
	.holz-becker *::before,
	.holz-becker *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}

	[data-reveal] { opacity: 1; transform: none; }
	.holz-becker-bars__track i { width: var(--w); }
}

@media print {
	.holz-becker::after,
	.holz-becker-announce,
	.holz-becker .site-header,
	.holz-becker .site-footer,
	.holz-becker-drawer { display: none !important; }

	/* Un texte juridique s'imprime : ne restent que le titre et les articles,
	   sur une seule colonne, et aucun article coupé en deux pages. */
	.holz-becker-doc__aside,
	.holz-becker-doc__rail,
	.holz-becker-breadcrumb { display: none !important; }

	.holz-becker-doc,
	.holz-becker-doc--legal { display: block; max-width: none; }
	.holz-becker-pagehead { background: none; padding: 0 0 1.2rem; }
	.holz-becker-pagehead::before { display: none; }
	.holz-becker .holz-becker-pagehead__title { color: #000; }
	.holz-becker-pagehead__lede { color: #333; }
	.holz-becker-section--tight { padding: 0; }
	.holz-becker-docsec { break-inside: avoid; page-break-inside: avoid; }
}