/**
 * KNA Distribution — collections produits (archives de catégories et boutique).
 *
 * Portée strictement limitée au composant de collection : aucun sélecteur
 * global, aucun identifiant, aucun `!important`. Les jetons `--kna-*` existants
 * sont réutilisés ; l'accent local #8DF572 reste confiné au contexte collection
 * sans modifier --kna-color-accent.
 */

.kna-collection,
.kna-collection-hero,
.kna-collection-benefits,
.kna-collection-pro,
.kna-collection-promos,
.kna-collection-reassurance {
	--kna-collection-accent: #8df572;
	--kna-collection-line: rgba(255, 255, 255, 0.1);
	--kna-collection-line-light: rgba(17, 17, 17, 0.1);
}

/*
 * Zone catalogue claire, conformément à la maquette (fond #F8FAF9).
 * Portée limitée aux archives produits : l'accueil, les pages standard, la
 * fiche produit, le panier et la commande ne portent pas ces classes de body.
 */
body.tax-product_cat,
body.post-type-archive-product {
	background-color: #f8faf9;
}

/* -----------------------------------------------------------------
 * Hero
 * ----------------------------------------------------------------- */

.kna-collection-hero {
	position: relative;
	overflow: hidden;
	max-width: 100%;
	color: var(--kna-color-text);
	background-color: var(--kna-color-dark);
	border-bottom: 1px solid var(--kna-collection-line);
}

.kna-collection-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--kna-collection-hero-image, none);
	background-position: right center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Voile de lisibilité : dense à gauche, plus clair à droite sur le visuel. */
.kna-collection-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(90deg, rgba(4, 8, 6, 0.96) 0%, rgba(4, 8, 6, 0.88) 40%, rgba(4, 8, 6, 0.58) 72%, rgba(4, 8, 6, 0.32) 100%),
		linear-gradient(180deg, rgba(4, 8, 6, 0.55) 0%, rgba(4, 8, 6, 0) 34%, rgba(4, 8, 6, 0.6) 100%);
}

.kna-collection-hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kna-space-xl);
	min-width: 0;
	padding-block: var(--kna-space-2xl);
	min-height: 320px;
}

.kna-collection-hero__content {
	min-width: 0;
	max-width: 620px;
}

.kna-collection-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--kna-space-xs);
	margin: 0 0 var(--kna-space-sm);
	font-size: var(--kna-font-size-xs);
	font-weight: var(--kna-weight-semibold);
	letter-spacing: var(--kna-tracking-wider);
	text-transform: uppercase;
	color: var(--kna-collection-accent);
}

.kna-collection-hero__dash {
	display: inline-block;
	width: 16px;
	height: 2px;
	background-color: var(--kna-collection-accent);
}

.kna-collection-hero__title {
	margin: 0 0 var(--kna-space-md);
	font-family: var(--kna-font-display);
	font-size: clamp(2rem, 3.6vw, 3.25rem);
	font-weight: var(--kna-weight-black);
	line-height: 1.06;
	letter-spacing: var(--kna-tracking-tight);
	text-transform: uppercase;
	color: var(--kna-color-text);
	overflow-wrap: break-word;
}

.kna-collection-hero__line {
	display: block;
}

.kna-collection-hero__line--accent {
	color: var(--kna-collection-accent);
}

.kna-collection-hero__text {
	margin: 0 0 var(--kna-space-lg);
	max-width: 560px;
	font-size: var(--kna-font-size-sm);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
}

.kna-collection-hero__actions {
	margin: 0;
}

.kna-collection-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--kna-space-2xs);
}

.kna-collection-hero__signature {
	flex-shrink: 0;
	max-width: 300px;
	margin: 0;
	font-size: var(--kna-font-size-2xl);
	line-height: 1.05;
	text-align: right;
	color: rgba(255, 255, 255, 0.9);
	transform: rotate(-6deg);
	transform-origin: right top;
	pointer-events: none;
}

.kna-collection-hero__signature-line {
	display: block;
}

/* -----------------------------------------------------------------
 * Bandeau d'avantages
 * ----------------------------------------------------------------- */

.kna-collection-benefits {
	color: var(--kna-color-text);
	background-color: #050b08;
	border-bottom: 1px solid var(--kna-collection-line);
}

.kna-collection-benefits__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--kna-space-md);
	min-width: 0;
	padding-block: var(--kna-space-sm);
}

.kna-collection-benefits__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kna-space-md) var(--kna-space-xl);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kna-collection-benefits__item {
	display: flex;
	align-items: center;
	gap: var(--kna-space-xs);
	min-width: 0;
	font-size: var(--kna-font-size-xs);
	color: rgba(255, 255, 255, 0.85);
}

.kna-collection-benefits__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border: 1px solid rgba(141, 245, 114, 0.3);
	border-radius: var(--kna-radius-pill);
	background-color: rgba(14, 91, 50, 0.35);
	color: var(--kna-collection-accent);
}

.kna-collection-benefits__pillars {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding-left: var(--kna-space-md);
	border-left: 1px solid var(--kna-collection-line);
	font-size: var(--kna-font-size-2xs);
	font-weight: var(--kna-weight-bold);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

.kna-collection-benefits__pillar--accent {
	color: var(--kna-collection-accent);
}

/* -----------------------------------------------------------------
 * Bandeau tarifs professionnels
 * ----------------------------------------------------------------- */

.kna-collection-pro {
	display: inline-flex;
	align-items: center;
	gap: var(--kna-space-sm);
	min-width: 0;
	padding: 4px var(--kna-space-sm) 4px 4px;
	background-color: #ffffff;
	border: 1px solid var(--kna-collection-line-light);
	border-radius: var(--kna-radius-pill);
	box-shadow: var(--kna-shadow-sm);
}

.kna-collection-pro__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	color: var(--kna-color-link);
	background-color: #e7f0ea;
	border: 1px solid rgba(14, 91, 50, 0.25);
	border-radius: var(--kna-radius-pill);
}

.kna-collection-pro__text {
	display: block;
	min-width: 0;
}

.kna-collection-pro__title {
	display: block;
	font-size: var(--kna-font-size-sm);
	font-weight: var(--kna-weight-bold);
	color: var(--kna-color-text-strong);
}

.kna-collection-pro__hint {
	display: block;
	font-size: var(--kna-font-size-2xs);
	color: var(--kna-color-text-muted);
}

.kna-collection-pro__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	margin-left: var(--kna-space-2xs);
	color: #ffffff;
	background-color: var(--kna-color-brand);
	border-radius: var(--kna-radius-pill);
}

.kna-collection-pro__link:hover,
.kna-collection-pro__link:focus {
	background-color: var(--kna-color-brand-hover);
}

/* -----------------------------------------------------------------
 * Mise en page : filtres + contenu
 * ----------------------------------------------------------------- */

.kna-collection__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--kna-space-sm);
	margin-block: var(--kna-space-md) var(--kna-space-sm);
}

.kna-collection__layout {
	display: grid;
	/* Proportions de la maquette : filtres sur 3 colonnes, produits sur 9. */
	grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
	gap: var(--kna-space-xl);
	align-items: start;
	scroll-margin-top: var(--kna-header-h, 120px);
}

.kna-collection__content {
	min-width: 0;
}

.kna-collection__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--kna-space-sm);
	margin-bottom: var(--kna-space-md);
}

.kna-collection__toolbar .woocommerce-result-count {
	margin: 0;
	font-size: var(--kna-font-size-sm);
	font-weight: var(--kna-weight-bold);
	color: var(--kna-color-text-strong);
}

.kna-collection__toolbar .woocommerce-ordering {
	margin: 0;
}

/* -----------------------------------------------------------------
 * Panneau de filtres
 * ----------------------------------------------------------------- */

.kna-collection-filters {
	min-width: 0;
}

.kna-collection-filters__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kna-space-sm);
	padding-bottom: var(--kna-space-xs);
	border-bottom: 1px solid var(--kna-collection-line-light);
}

.kna-collection-filters__title {
	margin: 0;
	font-family: var(--kna-font-display);
	font-size: var(--kna-font-size-sm);
	font-weight: var(--kna-weight-black);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kna-color-text-strong);
}

.kna-collection-filters__clear {
	font-size: var(--kna-font-size-xs);
	font-weight: var(--kna-weight-semibold);
	color: var(--kna-color-brand);
}

.kna-collection-filters__clear:hover,
.kna-collection-filters__clear:focus {
	text-decoration: underline;
}

.kna-collection-filters__search {
	display: flex;
	align-items: stretch;
	min-width: 0;
	margin-top: var(--kna-space-sm);
}

.kna-collection-filters__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 36px;
	padding: 0 var(--kna-space-sm);
	font-family: var(--kna-font-body);
	font-size: var(--kna-font-size-xs);
	color: var(--kna-color-text-strong);
	background-color: #ffffff;
	border: 1px solid var(--kna-collection-line-light);
	border-radius: var(--kna-radius-sm) 0 0 var(--kna-radius-sm);
}

.kna-collection-filters__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	color: #ffffff;
	background-color: var(--kna-color-brand);
	border: 0;
	border-radius: 0 var(--kna-radius-sm) var(--kna-radius-sm) 0;
	cursor: pointer;
}

.kna-collection-filters__submit:hover,
.kna-collection-filters__submit:focus {
	background-color: var(--kna-color-brand-hover);
}

/*
 * Groupes de facettes : sections repliables natives, sans JavaScript.
 */
.kna-collection-filters__group {
	padding-block: var(--kna-space-sm);
	border-bottom: 1px solid var(--kna-collection-line-light);
}

.kna-collection-filters__group > .kna-collection-filters__values {
	padding-top: var(--kna-space-xs);
}

/* Message affiché lorsque aucune facette produit n'existe réellement. */
.kna-collection-filters__empty {
	margin: var(--kna-space-md) 0 0;
	padding: var(--kna-space-sm) var(--kna-space-md);
	font-size: var(--kna-font-size-xs);
	line-height: 1.5;
	color: var(--kna-color-text-muted);
	background-color: rgba(17, 17, 17, 0.03);
	border: 1px dashed rgba(17, 17, 17, 0.14);
	border-radius: var(--kna-radius-md);
}

.kna-collection-filters__label {
	display: flex;
	align-items: center;
	gap: var(--kna-space-2xs);
	font-family: var(--kna-font-body);
	font-size: var(--kna-font-size-xs);
	font-weight: var(--kna-weight-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--kna-color-text-strong);
	cursor: pointer;
	list-style: none;
}

/* Supprime le marqueur natif du résumé : le chevron fait office d'indicateur. */
.kna-collection-filters__label::-webkit-details-marker {
	display: none;
}

.kna-collection-filters__label-text {
	min-width: 0;
}

.kna-collection-filters__selected {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding-inline: 4px;
	font-size: var(--kna-font-size-2xs);
	font-weight: var(--kna-weight-bold);
	color: #ffffff;
	background-color: var(--kna-color-brand);
	border-radius: var(--kna-radius-pill);
}

.kna-collection-filters__chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	color: var(--kna-color-text-muted);
	transition: transform var(--kna-transition-fast);
}

.kna-collection-filters__group[open] .kna-collection-filters__chevron {
	transform: rotate(180deg);
}

.kna-collection-filters__values {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kna-collection-filters__values li + li {
	margin-top: var(--kna-space-2xs);
}

.kna-collection-filters__value {
	display: flex;
	align-items: center;
	gap: var(--kna-space-xs);
	min-width: 0;
	font-size: var(--kna-font-size-xs);
	color: var(--kna-color-text-muted);
}

.kna-collection-filters__value:hover,
.kna-collection-filters__value:focus,
.kna-collection-filters__value.is-active {
	color: var(--kna-color-brand);
}

.kna-collection-filters__box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	border: 1px solid rgba(17, 17, 17, 0.25);
	border-radius: var(--kna-radius-sm);
	color: transparent;
}

.kna-collection-filters__value.is-active .kna-collection-filters__box {
	color: #ffffff;
	background-color: var(--kna-color-brand);
	border-color: var(--kna-color-brand);
}

.kna-collection-filters__value-label {
	min-width: 0;
	overflow-wrap: break-word;
}

.kna-collection-filters__count {
	margin-left: auto;
	font-size: var(--kna-font-size-2xs);
	color: var(--kna-color-text-subtle);
}

/* -----------------------------------------------------------------
 * Bandeaux promotionnels
 * ----------------------------------------------------------------- */

.kna-collection-promos {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--kna-space-md);
	margin-bottom: var(--kna-space-lg);
}

.kna-collection-promos__card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--kna-space-sm);
	min-width: 0;
	padding: var(--kna-space-lg);
	border-radius: var(--kna-radius-lg);
}

.kna-collection-promos__card--dark {
	color: var(--kna-color-text);
	background-color: #0a120e;
	border: 1px solid #17261e;
}

.kna-collection-promos__card--light {
	color: var(--kna-color-text-strong);
	background-color: #edf3f0;
	border: 1px solid #dfe8e3;
}

.kna-collection-promos__title {
	margin: 0;
	font-family: var(--kna-font-display);
	font-size: var(--kna-font-size-xl);
	font-weight: var(--kna-weight-black);
	line-height: 1.1;
	text-transform: uppercase;
}

.kna-collection-promos__line {
	display: block;
}

.kna-collection-promos__line--accent {
	color: var(--kna-collection-accent);
}

.kna-collection-promos__items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--kna-space-2xs) var(--kna-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kna-collection-promos__item {
	display: flex;
	align-items: center;
	gap: var(--kna-space-xs);
	min-width: 0;
	font-size: var(--kna-font-size-xs);
	color: rgba(255, 255, 255, 0.85);
}

.kna-collection-promos__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	border-radius: var(--kna-radius-pill);
	background-color: rgba(141, 245, 114, 0.18);
	color: var(--kna-collection-accent);
}

.kna-collection-promos__quote-title {
	margin: 0 0 var(--kna-space-2xs);
	font-family: var(--kna-font-display);
	font-size: var(--kna-font-size-md);
	font-weight: var(--kna-weight-black);
	text-transform: uppercase;
}

.kna-collection-promos__quote-text {
	margin: 0;
	font-size: var(--kna-font-size-xs);
	line-height: 1.5;
	color: var(--kna-color-text-muted);
}

.kna-collection-promos__quote-action {
	margin: 0;
}

.kna-collection-promos__quote-link {
	display: inline-flex;
	align-items: center;
	gap: var(--kna-space-xs);
	padding: var(--kna-space-xs) var(--kna-space-md);
	font-size: var(--kna-font-size-xs);
	font-weight: var(--kna-weight-bold);
	text-transform: uppercase;
	color: var(--kna-color-text-strong);
	background-color: #ffffff;
	border: 1px solid rgba(17, 17, 17, 0.15);
	border-radius: var(--kna-radius-md);
}

.kna-collection-promos__quote-link:hover,
.kna-collection-promos__quote-link:focus {
	border-color: var(--kna-color-brand);
}

/* -----------------------------------------------------------------
 * Grille produits : le rendu des cartes reste celui du thème
 * ----------------------------------------------------------------- */

.kna-collection__content ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--kna-space-md);
	margin: 0 0 var(--kna-space-lg);
	padding: 0;
	list-style: none;
}

.kna-collection__content ul.products li.product {
	width: auto;
	margin: 0;
	float: none;
	clear: none;
	min-width: 0;
}

.kna-collection__content .woocommerce-pagination {
	margin-top: var(--kna-space-lg);
}

/* -----------------------------------------------------------------
 * Réassurance avant le footer global
 * ----------------------------------------------------------------- */

.kna-collection-reassurance {
	color: var(--kna-color-text);
	background-color: #060d0a;
	border-top: 1px solid var(--kna-collection-line);
	border-bottom: 1px solid var(--kna-collection-line);
}

.kna-collection-reassurance__inner {
	padding-block: var(--kna-space-xl);
}

.kna-collection-reassurance__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--kna-space-xl);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kna-collection-reassurance__item {
	display: flex;
	align-items: flex-start;
	gap: var(--kna-space-md);
	min-width: 0;
}

.kna-collection-reassurance__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border: 1px solid rgba(141, 245, 114, 0.4);
	border-radius: var(--kna-radius-pill);
	background-color: rgba(14, 91, 50, 0.35);
	color: var(--kna-collection-accent);
}

.kna-collection-reassurance__text {
	min-width: 0;
}

.kna-collection-reassurance__title {
	display: block;
	margin-bottom: 2px;
	font-size: var(--kna-font-size-sm);
	font-weight: var(--kna-weight-extrabold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--kna-color-text);
}

.kna-collection-reassurance__desc {
	display: block;
	font-size: var(--kna-font-size-xs);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.6);
}

/* -----------------------------------------------------------------
 * Adaptation
 * ----------------------------------------------------------------- */

@media (max-width: 1024px) {
	.kna-collection__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--kna-space-lg);
	}

	.kna-collection__content ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.kna-collection-hero__inner {
		flex-direction: column;
		align-items: flex-start;
		min-height: 0;
	}

	.kna-collection-hero__signature {
		max-width: none;
		text-align: left;
		transform: none;
	}

	.kna-collection-promos {
		grid-template-columns: minmax(0, 1fr);
	}

	.kna-collection-reassurance__list {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--kna-space-lg);
	}
}

@media (max-width: 768px) {
	.kna-collection__content ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.kna-collection-promos__items {
		grid-template-columns: minmax(0, 1fr);
	}

	.kna-collection-benefits__pillars {
		border-left: 0;
		padding-left: 0;
	}
}

@media (max-width: 480px) {
	.kna-collection__content ul.products {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* -----------------------------------------------------------------
 * 15. Micro-lot 12 — collections mobiles (≤ 768 px)
 *
 * Quatre chantiers, tous cantonnés au point de rupture mobile de la navbar :
 *   a) hero + bandeau d'avantages + piliers forment ENSEMBLE 100vh ;
 *   b) bandeau d'avantages : deux colonnes, dernier centré si le total est impair ;
 *   c) filtres : longue liste remplacée par un bouton + panneau, pastilles actives ;
 *   d) grille produits : deux cartes par ligne, cartes adaptées à cette largeur.
 *
 * Desktop (≥ 769 px) : le conteneur ajouté autour du hero est neutre, aucune de
 * ces règles ne s'applique, et les couleurs affichées sont rigoureusement celles
 * d'avant (aucune déclaration de couleur n'est ajoutée aux sélecteurs existants).
 * ----------------------------------------------------------------- */

/*
 * a) Portée des couleurs : le conteneur ajouté ne reçoit AUCUNE nouvelle
 * déclaration de variable. Le hero et le bandeau consomment déjà
 * `--kna-collection-accent` et `--kna-collection-line` avec leur valeur de
 * repli écrite dans les règles existantes, et cette valeur de repli est
 * exactement celle qu'ils affichent aujourd'hui. Vérifié par mesure : couleurs
 * calculées identiques avant et après, en mobile comme en ordinateur —
 * accent rgb(141, 245, 114), trait rgba(255, 255, 255, 0.1). Ajouter le
 * conteneur à la liste des porteurs de variables aurait au contraire changé la
 * source de la valeur : c'est précisément ce qui n'est pas fait ici.
 */

@media ( max-width: 768px ) {
	.kna-collection-intro {
		display: flex;
		flex-direction: column;
		/* Hauteur demandée : hero + bandeau d'avantages + piliers = la hauteur
		 * d'un écran, la barre de navigation restant au-dessus, hors de cette
		 * hauteur.
		 * MESURE EN LIGNE (390 × 844) : la barre est `position: sticky` et
		 * reste dans le flux, elle occupe donc le haut de l'écran. Avec
		 * `height: 100vh`, le bloc commençait à 74 px et finissait à 918 px :
		 * les 74 derniers pixels du bandeau passaient sous le pli. La hauteur
		 * réelle de la barre est donc déduite, pour que l'ensemble tienne
		 * vraiment dans un écran, barre comprise. La hauteur du bloc est
		 * appliquée plus bas, sous garde de hauteur d'écran (section 15 bis) :
		 * sur un écran plus court que son contenu, forcer la hauteur rognerait
		 * le bloc, ce qui n'est pas acceptable. */
		--kna-collection-header-height: calc( var( --kna-header-row1-height ) + 2px );
	}

	/* Le hero PREND LA PLACE RESTANTE ; le bandeau d'avantages et ses piliers
	 * gardent leur hauteur naturelle. C'est donc bien l'ENSEMBLE hero + bandeau
	 * qui occupe une hauteur d'écran, et non le hero seul : aucune hauteur
	 * propre n'est fixée ici. La navbar reste hors de ce calcul. */
	.kna-collection-hero {
		display: flex;
		flex: 1 1 auto;
		min-height: 0;
	}

	.kna-collection-hero__inner {
		flex: 1 1 auto;
		/* Espace sous le CTA resserré : le hero n'a plus à remplir un écran à lui
		 * seul, il n'a donc plus besoin de respirations larges. */
		padding-block: var(--kna-space-md);
	}

	.kna-collection-benefits {
		flex: 0 0 auto;
	}

	/* Signature manuscrite : retirée du flux, sans marge ni réserve d'espace. */
	.kna-collection-hero__signature {
		display: none;
	}

	/* b) Bandeau d'avantages : deux colonnes. Le bandeau garde sa hauteur
	 * naturelle, il n'est jamais comprimé. */
	.kna-collection-benefits__inner {
		padding-block: var(--kna-space-md);
	}

	.kna-collection-benefits__list {
		display: grid;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: var(--kna-space-sm) var(--kna-space-md);
		width: 100%;
	}

	.kna-collection-benefits__item {
		align-items: flex-start;
	}

	/* Dernier engagement centré sur les deux colonnes lorsque le total est
	 * impair. La classe est posée par le gabarit en fonction du nombre réel
	 * d'engagements : aucun nombre n'est figé ici. */
	.kna-collection-benefits__item--last {
		grid-column: 1 / -1;
		justify-content: center;
	}

	/* Les trois piliers restent groupés, sur une seule ligne. */
	.kna-collection-benefits__pillars {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--kna-space-sm);
		width: 100%;
		padding-top: var(--kna-space-sm);
		padding-left: 0;
		border-top: 1px solid var(--kna-collection-line);
		border-left: 0;
		text-align: center;
	}

	/* c) Filtres : barre d'outils mobile et panneau. La barre est construite à
	 * l'exécution par le script, à partir de l'aside existant ; sans script,
	 * aucune de ces règles ne s'applique et l'aside reste visible après la
	 * grille (voir plus bas). */
	.kna-collection-mobile-toolbar {
		display: none;
		align-items: stretch;
		gap: var(--kna-space-xs);
		margin-bottom: var(--kna-space-sm);
	}

	html.kna-collection-has-js .kna-collection-mobile-toolbar {
		display: grid;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.kna-collection-mobile-toolbar__filters {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--kna-space-xs);
		grid-column: 1 / -1;
		min-height: 44px;
		padding: var(--kna-space-xs) var(--kna-space-md);
		font-family: var(--kna-font-body);
		font-size: var(--kna-font-size-sm);
		font-weight: var(--kna-weight-bold);
		color: var(--kna-color-text-strong);
		background-color: #ffffff;
		border: 1px solid rgba( 17, 17, 17, 0.15 );
		border-radius: var(--kna-radius-md);
		cursor: pointer;
	}

	.kna-collection-mobile-toolbar__count {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 20px;
		height: 20px;
		padding-inline: 6px;
		border-radius: var(--kna-radius-pill);
		background-color: var(--kna-color-brand);
		color: #ffffff;
		font-size: var(--kna-font-size-2xs);
		font-weight: var(--kna-weight-black);
		line-height: 1;
	}

	/* Tri et compteur de résultats, côte à côte sous le bouton. */
	.kna-collection-mobile-toolbar__cell {
		display: flex;
		align-items: center;
		min-width: 0;
	}

	.kna-collection-mobile-toolbar__cell--count {
		justify-content: flex-end;
		text-align: right;
	}

	.kna-collection-mobile-toolbar__cell .woocommerce-ordering,
	.kna-collection-mobile-toolbar__cell .woocommerce-result-count {
		margin: 0;
		min-width: 0;
	}

	.kna-collection-mobile-toolbar__cell .orderby {
		width: 100%;
		min-height: 40px;
	}

	/* Pastilles des critères actifs, sous la barre d'outils. Elles sont
	 * construites par le script à partir des liens `is-active` réellement
	 * rendus : aucune valeur n'est inventée, et le retrait se fait par les URL
	 * de filtre existantes. */
	.kna-collection-active-filters {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--kna-space-xs);
		margin: 0 0 var(--kna-space-md);
	}

	.kna-collection-active-filters__pill {
		display: inline-flex;
		align-items: center;
		gap: var(--kna-space-2xs);
		padding: var(--kna-space-2xs) var(--kna-space-sm);
		font-size: var(--kna-font-size-2xs);
		font-weight: var(--kna-weight-bold);
		color: var(--kna-color-text-strong);
		background-color: #ffffff;
		border: 1px solid rgba( 17, 17, 17, 0.12 );
		border-radius: var(--kna-radius-pill);
		text-decoration: none;
	}

	.kna-collection-active-filters__pill:hover,
	.kna-collection-active-filters__pill:focus {
		border-color: var(--kna-color-brand);
	}

	/*
	 * ÉTAT 2 — script actif, panneau FERMÉ.
	 * C'est l'état par défaut de l'aside en mobile : hors du flux, invisible et
	 * non focalisable (`visibility: hidden` retire aussi ses liens de l'ordre de
	 * tabulation). Aucun filtre ne peut donc se déplier sous les produits quand
	 * le bouton « Filtres » est présent.
	 */
	.kna-collection-filters {
		position: fixed;
		inset: 0;
		/* Le tiroir doit passer AU-DESSUS de la barre de navigation (z-index 50,
		 * jeton `--kna-z-header`) : sans cela, le bouton de fermeture se retrouve
		 * sous l'en-tête et devient incliquable sur les accès mobiles dont la
		 * barre d'outils du navigateur recouvre le haut de la page. */
		z-index: calc( var(--kna-z-header) + 1 );
		display: flex;
		flex-direction: column;
		width: auto;
		max-width: none;
		margin: 0;
		padding: 0;
		background-color: #ffffff;
		visibility: hidden;
		transform: translateX( -100% );
		transition: transform var(--kna-transition-fast), visibility var(--kna-transition-fast);
	}

	/*
	 * ÉTAT 1 — AUCUN script.
	 * Le sélecteur exige l'absence de `kna-collection-has-js` : il ne peut donc
	 * pas écraser l'état 2. L'aside revient dans le flux, après la grille, avec
	 * ses liens, ses compteurs, sa recherche et ses groupes ouverts.
	 */
	html:not( .kna-collection-has-js ) .kna-collection__layout {
		display: flex;
		flex-direction: column;
	}

	html:not( .kna-collection-has-js ) .kna-collection__content {
		order: 1;
	}

	html:not( .kna-collection-has-js ) .kna-collection__toolbar {
		order: 1;
	}

	html:not( .kna-collection-has-js ) .kna-collection-filters {
		position: static;
		order: 3;
		margin-top: var(--kna-space-lg);
		padding: var(--kna-space-md);
		visibility: visible;
		transform: none;
		border: 1px solid var(--kna-collection-line-light);
		border-radius: var(--kna-radius-md);
	}

	/*
	 * ÉTAT 3 — script actif, panneau OUVERT.
	 * Déclaré APRÈS l'état 1 et avec une spécificité supérieure ou égale, donc
	 * il l'emporte dans tous les cas. Le tiroir reprend la main sur la position,
	 * la visibilité, les marges et les bordures.
	 */
	html.kna-collection-has-js .kna-collection-filters.is-open {
		position: fixed;
		order: 0;
		margin: 0;
		padding: 0;
		visibility: visible;
		transform: none;
		border: 0;
		border-radius: 0;
	}

	/* Le contenu reprend sa place dans l'ordre quand le script est actif. */
	html.kna-collection-has-js .kna-collection__content {
		order: 0;
	}

	/* Blocage du défilement du contenu arrière pendant l'ouverture. */
	body.kna-collection-filters-open {
		overflow: hidden;
	}

	/* En-tête du tiroir : titre, fermeture explicite, effacement. */
	.kna-collection-filters__head {
		display: grid;
		grid-template-columns: minmax( 0, 1fr ) auto;
		align-items: center;
		gap: var(--kna-space-xs);
		flex: 0 0 auto;
		padding: var(--kna-space-md);
		border-bottom: 1px solid var(--kna-collection-line-light);
	}

	.kna-collection-filters__title {
		margin: 0;
		font-size: var(--kna-font-size-md);
	}

	.kna-collection-filters__clear {
		grid-column: 1;
		grid-row: 2;
		justify-self: start;
		padding: var(--kna-space-2xs) 0;
		font-size: var(--kna-font-size-sm);
	}

	.kna-collection-filters__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		grid-column: 2;
		grid-row: 1 / span 2;
		width: 44px;
		height: 44px;
		padding: 0;
		color: var(--kna-color-text-strong);
		background-color: transparent;
		border: 1px solid rgba( 17, 17, 17, 0.15);
		border-radius: var(--kna-radius-md);
		cursor: pointer;
	}

	/* Corps défilant : recherche + groupes repliables. */
	.kna-collection-filters__scroll {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		padding: var(--kna-space-md);
	}

	.kna-collection-filters__group {
		margin-bottom: var(--kna-space-xs);
		border-bottom: 1px solid var(--kna-collection-line-light);
	}

	.kna-collection-filters__label {
		min-height: 44px;
	}

	.kna-collection-filters__value {
		min-height: 40px;
	}

	/* d) Grille produits : deux cartes par ligne, à toutes les largeurs mobiles.
	 * SEUL l'écart entre cartes est resserré (12 px → 8 px) : + 4 px par carte,
	 * à marge latérale de conteneur inchangée (24 px). La marge de page n'est pas
	 * touchée, et c'est la comparaison à élément identique qui le prouve. */
	.kna-collection__content ul.products {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: var(--kna-space-xs);
	}

	/* Les cartes occupent toute leur colonne.
	 * MESURE EN LIGNE : la largeur réellement appliquée venait de
	 * `woocommerce-smallscreen.css` —
	 * `.woocommerce ul.products[class*="columns-"] li.product,
	 *  .woocommerce-page ul.products[class*="columns-"] li.product
	 *  { width: 48%; float: left; margin: 0 0 2.992em }` — de spécificité
	 * 0-4-2, qui l'emportait sur le sélecteur précédent (0-3-2). La carte ne
	 * faisait donc que 48 % de sa colonne : 80 px mesurés au lieu des 167 px
	 * de la colonne, d'où les écarts béants et les libellés cassés. Le
	 * sélecteur ci-dessous porte 0-5-2 : il gagne quel que soit l'ordre des
	 * feuilles, sans `!important`. `float` et `margin` sont neutralisés pour
	 * la même raison — la marge basse de cette règle (2.992em ≈ 48 px) créait
	 * aussi les grands trous verticaux entre les cartes. */
	.kna-collection .kna-collection__content ul.products[class*="columns-"] li.product,
	.kna-collection .kna-collection__content ul.products[class*="columns-"] .kna-product-card-item,
	.kna-collection .kna-collection__content ul.products li.product,
	.kna-collection .kna-collection__content ul.products .kna-product-card-item {
		width: auto;
		max-width: none;
		margin: 0;
		min-width: 0;
		float: none;
	}

	.kna-collection .kna-container,
	.kna-collection__content,
	.kna-collection__layout {
		min-width: 0;
	}

	/* Cartes adaptées à ~150 px de large : ce sont les cartes de la grille
	 * catalogue qui sont visées, jamais celles de l'accueil ni des blocs. */
	.kna-collection__content .kna-product-card__media {
		padding: var(--kna-space-xs);
	}

	.kna-collection__content .kna-product-card__body {
		padding: var(--kna-space-sm);
	}

	.kna-collection__content .kna-product-card__title {
		font-size: 12px;
		line-height: 1.3;
	}

	.kna-collection__content .kna-product-card__cbd,
	.kna-collection__content .kna-product-card__brand {
		font-size: 10px;
	}

	.kna-collection__content .kna-product-card__specs {
		margin-bottom: var(--kna-space-xs);
		padding-top: var(--kna-space-2xs);
	}

	.kna-collection__content .kna-product-card__spec {
		font-size: 10px;
		margin-bottom: 2px;
	}

	.kna-collection__content .kna-product-card__footer {
		flex-wrap: nowrap;
		gap: var(--kna-space-2xs);
		padding-top: var(--kna-space-xs);
	}

	.kna-collection__content .kna-product-card__price {
		font-size: 11px;
	}

	.kna-collection__content .kna-product-card__action-button,
	.kna-collection__content .kna-product-card__action--native .button {
		width: 32px;
		height: 32px;
		min-width: 32px;
		min-height: 32px;
	}

	/* e) Blocs éditoriaux et contact : ils ne doivent plus repousser la grille.
	 * Aucun n'est supprimé : ils passent après les produits, dans le même
	 * conteneur, uniquement en mobile. */
	.kna-collection-promos {
		order: 3;
		margin-top: var(--kna-space-lg);
	}

	.kna-collection-promos__card {
		padding: var(--kna-space-md);
	}
}

/* -----------------------------------------------------------------
 * 15 bis. Micro-lot 14-b — hero + réassurance + piliers dans un écran
 *
 * MESURE EN LIGNE (page publiée, 390 × 844) : le bloc mesurait 844 px mais
 * commençait à 74 px, la barre collante restant dans le flux : 74 px du
 * bandeau, ligne des piliers comprise, passaient sous le pli. La hauteur de
 * la barre est déduite ici (72 px de rangée + 2 px de bordure, mesurés à
 * 74 px). `100svh` remplace `100vh` : sur iOS, `100vh` correspond au plus
 * grand viewport et dépasse la zone visible lorsque les barres du navigateur
 * sont affichées — ce qui reproduisait le même rognage sur iPhone.
 *
 * La garde `min-height: 620px` évite de forcer cette hauteur sur un écran
 * plus court que le contenu (320 × 568) : dans ce cas le bloc garde sa
 * hauteur naturelle et rien n'est rogné.
 * ----------------------------------------------------------------- */

@media ( max-width: 768px ) and ( min-height: 620px ) {
	.kna-collection-intro {
		height: calc( 100vh - var( --kna-collection-header-height ) );
		height: calc( 100svh - var( --kna-collection-header-height ) );
	}
}

/* -----------------------------------------------------------------
 * 16. Micro-lot 12 — retour ordinateur (≥ 769 px)
 *
 * Le conteneur ajouté est neutre : il ne crée aucune boîte, donc la mise en
 * page desktop est identique. Les éléments construits par le script restent
 * masqués si jamais ils subsistaient.
 * ----------------------------------------------------------------- */

@media ( min-width: 769px ) {
	.kna-collection-intro {
		display: contents;
	}

	.kna-collection-mobile-toolbar,
	.kna-collection-active-filters {
		display: none;
	}
}

/* -----------------------------------------------------------------
 * Micro-lot 16 — la flèche du bandeau « tarifs professionnels » doit rester
 * blanche sur son fond vert.
 *
 * MESURE (page publiée) : `.kna-main--shop a { color: var(--kna-color-link) }`
 * (spécificité 0-1-1) l'emportait sur le `color: #ffffff` de ce bouton
 * (0-1-0) ; l'icône, tracée en `currentColor`, devenait verte (rgb(30,114,69))
 * sur le fond vert du bouton (rgb(14,91,50)). Le sélecteur ci-dessous porte
 * 0-2-0 et gagne. Aucune couche, aucun `!important`, aucun autre changement.
 * ----------------------------------------------------------------- */

.kna-collection-pro .kna-collection-pro__link {
	color: #ffffff;
}