@charset "UTF-8";
/* ==========================================================================
   Klima Bois — 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
   -------------------------------------------------------------------------- */
.klima,
.klima body {
	background: var(--kb-paper);
}

.klima {
	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 ». */
.klima,
.klima .site { overflow-x: clip; }

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

.klima h1, .klima h2, .klima h3, .klima h4, .klima h5, .klima 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;
}

.klima p { text-wrap: pretty; }

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

.klima ::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… */
.klima a:focus,
.klima button:focus,
.klima input:focus,
.klima select:focus,
.klima textarea:focus,
.klima [tabindex]:focus {
	outline: none;
}

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

.klima .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
   -------------------------------------------------------------------------- */
.klima .col-full {
	max-width: var(--kb-shell);
	padding-left: var(--kb-gutter);
	padding-right: var(--kb-gutter);
	margin: 0 auto;
}

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

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

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

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

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

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

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

/* --------------------------------------------------------------------------
   4. Typographie éditoriale
   -------------------------------------------------------------------------- */
.klima-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);
}

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

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

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

.klima-sechead__main { max-width: 42rem; }

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

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

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

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

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

/* --------------------------------------------------------------------------
   5. Boutons
   -------------------------------------------------------------------------- */
.klima .klima-btn,
.klima button,
.klima input[type="button"],
.klima input[type="reset"],
.klima input[type="submit"],
.klima .button,
.klima a.button,
.klima .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;
}

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

/* Attention : « .klima a.button » (0,2,1) bat une simple classe (0,2,0).
   Les variantes colorées sont donc qualifiées pour rester prioritaires. */
.klima .klima-btn.klima-btn--ember,
.klima a.klima-btn--ember,
.klima button.klima-btn--ember,
.klima a.button.alt,
.klima .button.alt,
.klima button.alt,
.klima a.add_to_cart_button,
.klima .add_to_cart_button,
.klima button.single_add_to_cart_button,
.klima .single_add_to_cart_button,
.klima a.checkout-button,
.klima .checkout-button,
.klima #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;
}

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

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

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

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

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

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

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

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

/* --------------------------------------------------------------------------
   6. Badges, étoiles, puces
   -------------------------------------------------------------------------- */
.klima-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;
}

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

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

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

.klima-section--bark .klima-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
   -------------------------------------------------------------------------- */
.klima-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);
}

.klima-announce__viewport { overflow: hidden; }

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

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

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

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

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

/* --------------------------------------------------------------------------
   8. En-tête
   -------------------------------------------------------------------------- */
.klima .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;
}

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

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

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

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

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

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

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

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

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

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

.klima-switch__flag { display: inline-flex; flex: none; }

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

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

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

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

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

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

/* La règle générique « .klima button » est plus spécifique qu'une classe
   seule : on double la classe pour reprendre la main sur l'affichage. */
.klima .klima-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;
}

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

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

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

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

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

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

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

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

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

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

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

.klima-nav__list > li { position: relative; }

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

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

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

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

/* Sous-menus */
.klima-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* --- Tiroir mobile --- */
.klima-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);
}

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

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

.klima-drawer__head .klima-eyebrow { margin: 0; }

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

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

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

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

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

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

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

.klima-scrim.is-open { opacity: 1; }

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


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

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

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

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

.klima-hero__shell {
	display: grid;
	grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
	padding-top: clamp(3.4rem, 7vw, 6.4rem);
	padding-bottom: clamp(3.4rem, 7vw, 6rem);
}

.klima .klima-hero__title {
	margin: 0 0 1.4rem;
	font-size: clamp(2.6rem, 6.1vw, 5.05rem);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -.028em;
	color: var(--kb-paper);
}

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

.klima .klima-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: klima-underline 1.1s .8s var(--kb-ease) forwards;
}

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

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

.klima-hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2.8rem; }

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

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

.klima-hero__stats dd {
	margin: 0;
	font-family: var(--kb-display);
	font-size: clamp(1.8rem, 2.7vw, 2.35rem);
	font-weight: 500;
	color: var(--kb-paper);
	font-variant-numeric: tabular-nums;
}

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

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

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

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

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

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

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

.klima-hero__card img {
	display: block;
	width: 100%;
	height: clamp(320px, 42vw, 540px);
	object-fit: cover;
}

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

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

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

/* Jauge d'humidité */
.klima-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: klima-float 7s ease-in-out infinite;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/* --------------------------------------------------------------------------
   10. Univers (catégories)
   -------------------------------------------------------------------------- */
/* Cinq univers sur deux rangées équilibrées : 2+1+1 puis 2+2. */
.klima-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/* --------------------------------------------------------------------------
   11. Cartes produit
   -------------------------------------------------------------------------- */
.klima 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) {
	.klima ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.klima ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.klima ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.klima ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.klima ul.products::before,
.klima ul.products::after { content: none; display: none; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.klima .klima-card__cta.added { display: none; }

.klima .klima-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: klima-spin .7s linear infinite;
}

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

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

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

.klima-card__stock.is-out { color: var(--kb-ink-3); }
.klima-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.
   -------------------------------------------------------------------------- */
.klima-selection { padding-block: clamp(2.2rem, 4.4vw, 3.8rem); }

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

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

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

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

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

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

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

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

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

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

/* --------------------------------------------------------------------------
   13. Savoir-faire
   -------------------------------------------------------------------------- */
.klima-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);
}

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

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

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

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

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

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

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

.klima-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 .klima-bars__track i { width: var(--w); }
.klima-bars__track i.is-mid { background: linear-gradient(90deg, var(--kb-sand), #c3dd8a); }
.klima-bars__track i.is-low { background: linear-gradient(90deg, #9a9a9a, #b8b8b8); }

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

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

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

.klima-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.klima-steps__item::after { width: 42%; }

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

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

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

.klima-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
   -------------------------------------------------------------------------- */
.klima-split__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(1.4rem, 3vw, 2.6rem);
	align-items: stretch;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.klima-field { margin-bottom: 1.35rem; }

.klima-field label,
.klima-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);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* --------------------------------------------------------------------------
   15. Avis
   -------------------------------------------------------------------------- */
.klima-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;
}

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

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

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

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

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

.klima-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. */
.klima-avis { padding-block: clamp(2.6rem, 5.2vw, 4.6rem); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* --------------------------------------------------------------------------
   16. Journal
   -------------------------------------------------------------------------- */
.klima-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* --------------------------------------------------------------------------
   18. Pied de page
   -------------------------------------------------------------------------- */
.klima .site-footer {
	background: var(--kb-bark);
	color: rgba(240, 245, 236, .68);
	padding: clamp(3rem, 6vw, 5rem) 0 1.4rem;
	border-top: 3px solid var(--kb-ember);
}

.klima-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, .8fr)) minmax(0, 1.15fr);
	gap: clamp(1.6rem, 3vw, 3rem);
	padding-bottom: clamp(2.2rem, 4vw, 3.4rem);
	border-bottom: 1px solid rgba(240, 245, 236, .12);
}

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

.klima-footer__pitch {
	margin: 1.2rem 0 1.4rem;
	max-width: 34rem;
	font-size: .92rem;
	color: rgba(240, 245, 236, .58);
}

.klima-footer__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }

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

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

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

.klima-footer__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: .58rem; }

.klima-footer__menu a {
	font-size: .89rem;
	color: rgba(240, 245, 236, .68);
	transition: color .2s, padding-left .25s var(--kb-ease);
}

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

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

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

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

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

.klima-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. */
.klima-footer__euid span { display: flex; flex-direction: column; gap: .05rem; }
.klima-footer__euid strong { font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: rgba(240, 245, 236, .45); }
.klima-footer__euid em { font-style: normal; letter-spacing: .02em; }

/* Déclaration § 36 VSBG, en clair au pied de page. */
.klima-footer__vsbg {
	margin: 1.5rem 0 0;
	padding-top: 1.4rem;
	border-top: 1px solid rgba(240, 245, 236, .12);
	font-size: .78rem;
	line-height: 1.6;
	color: rgba(240, 245, 236, .5);
}

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

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

.klima-footer__legal a,
.klima .klima-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;
}

.klima-footer__legal a:hover,
.klima .klima-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.
   -------------------------------------------------------------------------- */
.klima-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);
}

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

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

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

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

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

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

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

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

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

.klima-cookie__cat--none { background: #fafafa; }

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

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

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

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

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

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

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

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

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

.klima-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) {
	.klima-cookie__foot { flex-direction: column-reverse; align-items: stretch; }
	.klima-cookie__foot .klima-btn { width: 100%; }
	.klima-cookie__table { font-size: .72rem; }
}

.klima-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .9rem 1.6rem;
	padding-top: 1.5rem;
}

.klima-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. */
.klima-pay {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .95rem;
	margin-top: 1.6rem;
	padding-top: 1.7rem;
	border-top: 1px solid rgba(240, 245, 236, .12);
}

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

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

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

.klima-pay__mark { flex: none; display: block; }

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

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

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

.klima-pay__card--mastercard {
	gap: .42rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: -.01em;
	color: #231f20;
}

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

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

.klima-pay__card--apple { background: #000; color: #fff; font-size: .98rem; gap: .3rem; }

@media (max-width: 640px) {
	.klima-pay__card { min-height: 40px; padding: 0 .7rem; font-size: .84rem; }
	.klima-pay__card--visa { font-size: .95rem; }
	.klima-pay__list { gap: .4rem; }
}

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

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

.klima-footer__pefc { border-color: rgba(126, 189, 0, .9) !important; background: rgba(126, 189, 0, .45); color: #e4f2c8 !important; }

/* Barre mobile Storefront */
.klima .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);
}

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

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

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

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

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

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

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

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

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

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

.klima select,
.klima input[type="text"],
.klima input[type="email"],
.klima input[type="tel"],
.klima input[type="url"],
.klima input[type="password"],
.klima input[type="search"],
.klima input[type="number"],
.klima 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;
}

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

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

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

.klima .woocommerce-pagination ul li a,
.klima .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);
}

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

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

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

/* --- Messages WooCommerce --- */
.klima .woocommerce-message,
.klima .woocommerce-info,
.klima .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;
}

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

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

/* --------------------------------------------------------------------------
   20. Fiche produit
   -------------------------------------------------------------------------- */
.klima.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.
 */
.klima.single-product div.product .woocommerce-product-gallery,
.klima.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);
}

.klima.single-product div.product .summary,
.klima.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.
 */
.klima.single-product div.product .woocommerce-tabs,
.klima.single-product div.product .related,
.klima.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.
 */
.klima .woocommerce-product-gallery .flex-viewport,
.klima .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. */
.klima .woocommerce-product-gallery:not(.flexslider-enabled) .woocommerce-product-gallery__wrapper { overflow: hidden; }

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

.klima .woocommerce-product-gallery { overflow: visible; }

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

.klima.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.
 */
.klima .flex-control-thumbs {
	display: flex;
	gap: .55rem;
	margin: 0;
	padding: 0;
	list-style: none;
	scrollbar-width: thin;
}

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

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

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

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

	.klima.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.
	 */
	.klima.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.
	 */
	.klima.single-product div.product .woocommerce-product-gallery:not(:has(.flex-control-thumbs)) {
		grid-template-columns: minmax(0, 1fr);
	}

	.klima.single-product div.product .woocommerce-product-gallery:not(:has(.flex-control-thumbs)) .flex-viewport,
	.klima.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) {
	.klima .flex-control-thumbs {
		margin-top: .7rem;
		overflow-x: auto;
	}
}

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

.klima .flex-control-thumbs img.flex-active,
.klima .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.
 */
.klima .single-product .product_title,
.klima.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;
}

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

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

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

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

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

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

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

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

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

.klima-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 ---------------------------------------------------- */
.klima-specs { margin: 0 0 1.6rem; }

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

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

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

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

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

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

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

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

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

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

.klima form.cart .quantity { margin: 0; }

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

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

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

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

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

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

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

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

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

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

.klima .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. */
.klima .star-rating span,
.klima .star-rating span::before,
.klima .woocommerce-product-rating .star-rating span,
.klima .woocommerce-product-rating .star-rating span::before,
.klima #reviews .star-rating span::before { color: var(--kb-ember-text); }
.klima .woocommerce-review-link { color: var(--kb-ink-3); font-size: .85rem; border-bottom: 1px solid var(--kb-line); }
.klima .woocommerce-review-link:hover { color: var(--kb-ember); }
.klima #reviews .star-rating::before { color: rgba(38, 38, 38, .2); }
.klima .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.
 */
.klima-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);
}

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

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

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

/*
 * Le sélecteur porte l'élément : « .klima 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.
 */
.klima button.klima-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);
}

.klima button.klima-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. */
.klima button.klima-similar__arrow[disabled] { opacity: .3; cursor: default; }
.klima button.klima-similar__arrow[disabled]:hover { background: var(--kb-card); border-color: var(--kb-line); }
.klima button.klima-similar__arrow svg { display: block; }
.klima button.klima-similar__arrow[data-klima-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.
 */
.klima-similar__track {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.klima-similar__track::-webkit-scrollbar { display: none; }

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

.klima .klima-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. */
.klima .woocommerce-tabs { margin-top: clamp(1.6rem, 3vw, 2.6rem); }
.klima .woocommerce-tabs ul.tabs,
.klima .woocommerce-tabs .panel {
	width: 100%;
	float: none;
	margin-left: 0;
	margin-right: 0;
}

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

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

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

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

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

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

.klima .woocommerce-tabs .panel { max-width: 74ch; }
.klima .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) {
	.klima .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.
	 */
	.klima .woocommerce-tabs #tab-description > h2,
	.klima .woocommerce-tabs #tab-description > h3,
	.klima .woocommerce-tabs #tab-description > h4,
	.klima .woocommerce-tabs #tab-description > ul,
	.klima .woocommerce-tabs #tab-description > ol,
	.klima .woocommerce-tabs #tab-description > table,
	.klima .woocommerce-tabs #tab-description > figure { break-inside: avoid; }

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

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

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

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

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

.klima .related > h2,
.klima .upsells > h2,
.klima .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 */
.klima .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);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* --------------------------------------------------------------------------
   22. Articles & pages
   -------------------------------------------------------------------------- */
.klima .hentry { margin-bottom: 3rem; }
.klima .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. */
.klima .entry-content > p,
.klima .entry-content > ul,
.klima .entry-content > ol,
.klima .entry-content > dl,
.klima .entry-content > h2,
.klima .entry-content > h3,
.klima .entry-content > h4,
.klima .entry-content > blockquote,
.klima .entry-content > figure { max-width: 72ch; }
.klima .entry-content h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 2.2rem 0 .9rem; color: var(--kb-ink); }
.klima .entry-content h3 { font-size: 1.28rem; margin: 1.8rem 0 .7rem; color: var(--kb-ink); }
.klima .entry-content ul, .klima .entry-content ol { padding-left: 1.2rem; }
.klima .entry-content li { margin-bottom: .45rem; }

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

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

.klima .page-header, .klima .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; }

.klima-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.klima .content-area,
body.klima .site-main,
body.klima.woocommerce-cart .content-area,
body.klima.woocommerce-checkout .content-area,
body.klima.woocommerce-account .content-area {
	width: 100%;
	float: none;
	margin-right: 0;
	padding: 0;
}

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

/* --- Fil des étapes ---------------------------------------------------- */
.klima-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;
}

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

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

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

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

.klima-steps-bar .is-done { color: var(--kb-ember-text); }
.klima-steps-bar .is-done .klima-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) {
	.klima.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;
	}

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

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

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

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

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

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

.klima .cart_totals table.shop_table th,
.klima .cart_totals table.shop_table td,
.klima .woocommerce-checkout-review-order-table th,
.klima .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;
}

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

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

.klima .cart_totals .order-total .amount,
.klima .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. */
.klima #shipping_method {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .45rem;
}

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

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

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

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

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

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

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

/* --- Tableau du panier -------------------------------------------------- */
.klima 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. */
.klima table.cart .product-remove { width: 52px; padding-left: .9rem; padding-right: 0; }
.klima table.cart .product-thumbnail { width: 96px; padding-left: .6rem; }
.klima table.cart .product-name { width: auto; text-align: left; }
.klima table.cart .product-price,
.klima table.cart .product-subtotal { width: 130px; text-align: right; }
.klima table.cart .product-quantity { width: 120px; text-align: center; }
.klima table.cart th { text-align: left; }
.klima table.cart th.product-price,
.klima table.cart th.product-subtotal { text-align: right; }
.klima table.cart th.product-quantity { text-align: center; }

.klima .woocommerce-cart-form__cart-item .product-name a { font-weight: 600; line-height: 1.3; }
.klima .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. */
.klima .includes_tax,
.klima .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);
}

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

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

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

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

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

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

/* --- Commande ----------------------------------------------------------- */
@media (min-width: 992px) {
	.klima.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. */
	.klima.woocommerce-checkout form.checkout > * { grid-column: 1 / -1; }

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

	.klima.woocommerce-checkout form.checkout > .klima-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. */
.klima.woocommerce-checkout .woocommerce { width: 100%; max-width: none; }
.klima.woocommerce-checkout #customer_details,
.klima.woocommerce-checkout .klima-checkout__aside,
.klima.woocommerce-checkout #order_review,
.klima.woocommerce-checkout .col2-set .col-1,
.klima.woocommerce-checkout .col2-set .col-2 {
	width: 100%;
	float: none;
	margin: 0;
}

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

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

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

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

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

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

.klima .woocommerce form .form-row .required { color: var(--kb-promo); text-decoration: none; }
.klima .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;
}

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

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

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

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

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

.klima .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é. */
.klima .woocommerce-checkout #payment ul.payment_methods li > input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

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

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

.klima .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. */
.klima .woocommerce-checkout #payment ul.payment_methods li > label::before,
.klima .woocommerce-checkout #payment ul.payment_methods li > label::after {
	content: none !important;
	display: none !important;
}

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

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

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

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

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

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

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

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

.klima-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. */
.klima input[type="radio"],
.klima input[type="checkbox"],
.klima .wc_payment_method input[type="radio"],
.klima #shipping_method input[type="radio"],
.klima .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. */
.klima .cart_totals .order-total .includes_tax .amount,
.klima .woocommerce-checkout-review-order-table .order-total .includes_tax .amount,
.klima .order-total .includes_tax .amount {
	font-family: var(--kb-sans);
	font-size: .75rem;
	font-weight: 600;
	color: var(--kb-ink-3);
}

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

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

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

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

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

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

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

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

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

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

.klima .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) {
	.klima-utility__hours { display: none; }
	.klima-nav__list > li > a { padding: .55rem .6rem; font-size: .84rem; }
}

@media (max-width: 1024px) {
	.klima-hero__shell { grid-template-columns: 1fr; }
	.klima-hero__visual { max-width: 560px; }
	.klima-hero__ring { inset: -14% -18% auto auto; width: 100%; }
	.klima-process__head { grid-template-columns: 1fr; }
	.klima-split__grid { grid-template-columns: 1fr; }
	.klima-faq__grid { grid-template-columns: 1fr; }
	/* « minmax(0, 1fr) » et non « 1fr » : la piste des produits similaires ne
	   doit pas pouvoir élargir la colonne. */
	.klima.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.
	 */
	.klima.single-product div.product .woocommerce-product-gallery,
	.klima.single-product div.product .images,
	.klima.single-product div.product .summary,
	.klima.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.
	 */
	.klima .woocommerce-product-gallery__image img {
		aspect-ratio: auto;
		max-height: 46vh;
	}

	.klima .cart-collaterals { grid-template-columns: 1fr; }
	.klima-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

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

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

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

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

	.klima-hero__stats { gap: 1.4rem 2rem; }
	.klima-hero__cta .klima-btn { width: 100%; }
	.klima-footer__top { grid-template-columns: 1fr; }
	.klima .storefront-sorting { flex-direction: column; align-items: stretch; }
	.klima .woocommerce-ordering select { width: 100%; }
	.klima table.shop_table .product-thumbnail img { width: 56px; }
	.klima-choice { grid-template-columns: 1fr; }
	.klima-section--bark .klima-trust--grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
	.klima-hero__title { font-size: 2.35rem; }
	.klima-gauge { display: none; }
}

/* --------------------------------------------------------------------------
   25. Pages de contenu
   Contact, livraison, scierie, 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.
   -------------------------------------------------------------------------- */
.klima-contenu #content.site-content > .col-full { max-width: none; padding: 0; }
.klima-contenu #primary { width: 100%; float: none; margin: 0; }
.klima-contenu .hentry { margin: 0; }
.klima-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. */
.klima-contenu .content-area { margin-bottom: 0; }

/* --- Bandeau de titre ---------------------------------------------------- */
.klima-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. */
.klima-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;
}

.klima-pagehead__inner { position: relative; }

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

.klima-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.
   -------------------------------------------------------------------------- */
.klima-pagehead--compact {
	padding: clamp(1rem, 2vw, 1.5rem) 0 clamp(1.1rem, 2.2vw, 1.7rem);
}

.klima-pagehead--compact::before { display: none; }

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

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

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

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

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

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

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

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

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

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

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

/* Adresse ou coordonnées posées telles quelles, sans puces. */
.klima-prose .klima-plain { list-style: none; padding: 0; }
.klima-prose .klima-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. */
.klima-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;
}

.klima-doc__main.klima-prose { max-width: none; }

/* Variante « contenu d'abord » : le formulaire de contact et ses à-côtés. */
.klima-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. */
.klima-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;
}

.klima-doc__aside { position: sticky; top: 7rem; }
.klima-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é. */
.klima-doc--wide .klima-doc__aside { position: static; }

/* Une page de contenu enchaîne beaucoup de sections : le rythme de la page
   d'accueil y serait trop ample. */
.klima-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. */
.klima-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;
}

.klima-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. */
.klima-toc__progress {
	display: block;
	height: 2px;
	margin: 0 0 .85rem;
	background: var(--kb-line);
	border-radius: 2px;
	overflow: hidden;
}

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

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

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

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

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

.klima-toc__list a.is-current .klima-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. */
.klima-docsec { scroll-margin-top: 6.5rem; }

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Bouton d'impression : « .klima button » impose l'aplat sombre des boutons
   d'achat, qu'un utilitaire de colonne n'a pas à porter. */
.klima .klima-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);
}

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

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

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

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

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

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

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

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

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

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

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

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

.klima-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. */
.klima-channels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
	gap: clamp(.9rem, 1.6vw, 1.15rem);
}

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

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

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

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

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

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

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

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

/* --- Encart d'appoint titré -------------------------------------------------- */
.klima-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;
}

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

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

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

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

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

/* Le tableau des horaires est déjà dans une surface : son propre cadre ferait
   double bordure. */
.klima .klima-panel .klima-datatable { border: 0; border-radius: 0; background: transparent; }
.klima .klima-panel .klima-datatable th,
.klima .klima-panel .klima-datatable td { padding: .58rem .1rem; }
.klima .klima-panel .klima-datatable tbody tr:first-child th,
.klima .klima-panel .klima-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. */
.klima-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. */
.klima-prose .klima-eyebrow { font-size: .715rem; line-height: 1.4; color: var(--kb-ember-text); }

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

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

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

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

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

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

.klima .klima-datatable th,
.klima .klima-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);
}

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

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

.klima .klima-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. */
.klima .klima-datatable--hours tbody th { width: 42%; }

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

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

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

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

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

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

.klima-callout__link { font-weight: 600; }

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

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

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

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

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

/* --- Illustration -------------------------------------------------------------- */
.klima-figure { margin: 0; }
.klima-figure img { display: block; width: 100%; height: auto; border-radius: var(--kb-radius-lg); }
.klima-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. */
.klima-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 ------------------------------------------------------ */
.klima-form { margin: 0; }

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

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

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

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

.klima .klima-form input[type="text"],
.klima .klima-form input[type="email"],
.klima .klima-form input[type="tel"],
.klima .klima-form select,
.klima .klima-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);
}

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

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

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

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

.klima-form__consent { margin: 0 0 1.35rem; }

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

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

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

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

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

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

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

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

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

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

.klima-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. */
.klima-journal__grid--archive { grid-template-columns: repeat(3, minmax(0, 1fr)); }

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

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

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

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

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

.klima .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) {
	.klima-doc--legal { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); }

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

	.klima-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. */
	.klima-rail__help { order: 1; }

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

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

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

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

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

@media print {
	.klima::after,
	.klima-announce,
	.klima .site-header,
	.klima .site-footer,
	.klima-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. */
	.klima-doc__aside,
	.klima-doc__rail,
	.klima-breadcrumb { display: none !important; }

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