/**
 * KNA Distribution — page d'accueil : hero et bandeaux.
 *
 * États conçus explicitement :
 *   - desktop  : ≥ 1280 px
 *   - tablette : 768 – 1024 px
 *   - mobile   : ≤ 768 px, ajusté ≤ 480 px
 *
 * Règles de robustesse appliquées partout :
 *   - aucune largeur fixe en pixels sur les blocs de contenu ;
 *   - `min-width: 0` sur les cellules de grille (évite l'écrasement du texte) ;
 *   - `overflow` maîtrisé : les éléments décoratifs (signatures inclinées,
 *     images de fond) ne peuvent jamais provoquer de défilement horizontal ;
 *   - les signatures perdent leur inclinaison sur petit écran pour rester
 *     lisibles et ne jamais chevaucher le contenu.
 */

/* -----------------------------------------------------------------
 * 1. Conteneur de page
 * ----------------------------------------------------------------- */

.kna-main--home {
	padding-block: 0;
}

/* -----------------------------------------------------------------
 * 2. Hero
 * ----------------------------------------------------------------- */

.kna-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	max-width: 100%;
	/* Le header et le hero complètent ensemble la hauteur de la fenêtre.
	 * --kna-header-h est mesurée en JavaScript (assets/js/header.js) ; la
	 * valeur de repli évite tout trou si le script n'est pas chargé. */
	min-height: max(560px, calc(100vh - var(--kna-header-h, 148px)));
	background-color: var(--kna-color-dark);
	background-image: linear-gradient(160deg, #0b1410 0%, #070908 55%, #050706 100%);
	border-bottom: 1px solid #000000;
}

/* Barre d'administration connectée : la hauteur visible est réduite d'autant. */
body.admin-bar .kna-hero {
	min-height: max(560px, calc(100vh - var(--kna-header-h, 148px) - 32px));
}

/*
 * Le visuel occupe désormais TOUT l'espace de la section, en arrière-plan
 * plein cadre. Le texte repose sur un voile dégradé sombre, dense à gauche :
 * la lisibilité reste structurelle et ne dépend pas de la photo déposée.
 */
.kna-hero__inner {
	position: relative;
	z-index: 2;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	padding-block: var(--kna-space-2xl);
}

/* Couche d'arrière-plan : couvre toute la section, sans marge ni arrondi. */
.kna-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

/* Voile de lisibilité : dense à gauche, quasi transparent à droite pour
 * laisser apparaître les produits du packshot. */
.kna-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(90deg, rgba(5, 7, 6, 0.95) 0%, rgba(5, 7, 6, 0.88) 34%, rgba(5, 7, 6, 0.55) 62%, rgba(5, 7, 6, 0.2) 100%),
		linear-gradient(180deg, rgba(5, 7, 6, 0.6) 0%, rgba(5, 7, 6, 0) 32%, rgba(5, 7, 6, 0.55) 100%);
}

/*
 * Pas de `position: relative` ici : la signature doit se positionner par
 * rapport au conteneur du hero, pas par rapport à la colonne de texte, sinon
 * elle chevauche le titre. Le contenu reste au-dessus du visuel grâce au
 * z-index de .kna-hero__inner.
 */
.kna-hero__content {
	min-width: 0;
	max-width: 620px;
}

/* L'image remplit la section entière. Ancrage à droite : les produits du
 * packshot restent dans le cadre malgré le recadrage en `cover`. */
.kna-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: cover;
	object-position: right center;
	border-radius: 0;
}

.kna-hero__eyebrow {
	margin: 0 0 var(--kna-space-xs);
	font-size: var(--kna-font-size-sm);
	font-weight: var(--kna-weight-bold);
	letter-spacing: var(--kna-tracking-wider);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.8);
}

.kna-hero__title {
	margin: 0 0 var(--kna-space-md);
	font-family: var(--kna-font-display);
	font-size: clamp(2.25rem, 4.7vw, 4.25rem);
	font-weight: var(--kna-weight-black);
	line-height: 0.94;
	letter-spacing: var(--kna-tracking-tight);
	text-transform: uppercase;
	color: var(--kna-color-text);
	text-shadow: var(--kna-shadow-text);
	overflow-wrap: break-word;
}

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

.kna-hero__subtitle {
	margin: 0 0 var(--kna-space-lg);
	font-size: var(--kna-font-size-xs);
	font-weight: var(--kna-weight-bold);
	letter-spacing: var(--kna-tracking-wide);
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.9);
}

/* 4 arguments de réassurance — grille auto-adaptative. */
.kna-hero__points {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--kna-space-md);
	max-width: 560px;
	margin: 0 0 var(--kna-space-xl);
	padding: 0;
	list-style: none;
}

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

.kna-hero__point-icon {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--kna-color-accent);
}

.kna-hero__point-text {
	min-width: 0;
	font-size: var(--kna-font-size-xs);
	font-weight: var(--kna-weight-medium);
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.9);
}

.kna-hero__point-title {
	display: block;
	font-weight: var(--kna-weight-semibold);
	color: var(--kna-color-text);
}

/* Boutons */
.kna-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kna-space-md);
}

.kna-hero__actions .kna-btn {
	padding: var(--kna-space-sm) var(--kna-space-lg);
}

/* Signature manuscrite — en haut à droite du hero, au-dessus du visuel. Elle
 * est placée dans le contenu : sur mobile elle repasse simplement dans le flux
 * et ne peut donc jamais recouvrir le titre. */
.kna-hero__signature {
	position: absolute;
	top: calc(var(--kna-space-2xl) + var(--kna-space-2xs));
	right: var(--kna-space-lg);
	z-index: 4;
	max-width: 260px;
	margin: 0;
	font-size: var(--kna-font-size-display-sm);
	line-height: 1.1;
	text-align: right;
	color: var(--kna-color-text);
	text-shadow: var(--kna-shadow-text), var(--kna-shadow-text-strong);
	transform: rotate(-8deg);
	transform-origin: right top;
	pointer-events: none;
}

/* Bandeau de mots-clés sous le hero. */
.kna-hero__strip {
	position: relative;
	z-index: 2;
	padding-block: var(--kna-space-sm);
	/* Translucide : le visuel reste continu jusqu'au bas de la section. */
	background-color: rgba(6, 13, 11, 0.72);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.kna-hero__strip-inner {
	display: flex;
	justify-content: flex-end;
}

.kna-hero__strip-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kna-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--kna-font-size-xs);
	font-weight: var(--kna-weight-bold);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.8);
}

.kna-hero__strip-item + .kna-hero__strip-item::before {
	content: "|";
	margin-right: var(--kna-space-md);
	color: rgba(255, 255, 255, 0.2);
}

/* -----------------------------------------------------------------
 * 3. Cartes de catégories
 *
 * Colonnes explicites : la maquette affiche 5 cartes de front sur desktop.
 * Avec moins de 5 catégories valides, la dernière rangée reste simplement
 * incomplète — aucune carte de remplissage n'est inventée.
 * ----------------------------------------------------------------- */

.kna-categories {
	padding-block: var(--kna-space-xl) var(--kna-space-lg);
	background-color: var(--kna-color-surface-light);
	color: var(--kna-color-text-strong);
}

/*
 * Grille des catégories : nombre de colonnes DÉDUIT des cartes réellement
 * présentes (auto-fit). 4 cartes remplissent toute la largeur, 5 s'ajoutent
 * sur une cinquième colonne, 3 s'étirent sur trois — sans réglage à changer.
 * `min()` évite tout débordement sur les écrans étroits.
 */
.kna-categories__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: var(--kna-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.kna-cat-card {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: var(--kna-category-card-height);
	border-radius: var(--kna-radius-xl);
	overflow: hidden;
	background-color: #dde1e4;
	color: #ffffff;
	box-shadow: var(--kna-shadow-sm);
	transition: transform var(--kna-transition-base), box-shadow var(--kna-transition-base);
}

.kna-cat-card:hover,
.kna-cat-card:focus {
	transform: translateY(-4px);
	box-shadow: var(--kna-shadow-md);
	color: #ffffff;
}

.kna-cat-card__image {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--kna-transition-slow);
}

.kna-cat-card:hover .kna-cat-card__image {
	transform: scale(1.05);
}

/* Repli sans image : aplat graphique clair, jamais d'image cassée. */
.kna-cat-card__placeholder {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(17, 17, 17, 0.3);
	background-image: linear-gradient(135deg, #eceff1 0%, #d5dade 100%);
}

/*
 * Voile sombre en bas de carte : garantit le contraste du texte en blanc,
 * que la catégorie ait une image ou non.
 */
.kna-cat-card__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.9) 0%,
		rgba(0, 0, 0, 0.45) 45%,
		rgba(0, 0, 0, 0) 100%
	);
}

.kna-cat-card__body {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	min-width: 0;
	padding: var(--kna-space-md);
}

.kna-cat-card__name {
	display: block;
	font-family: var(--kna-font-display);
	font-size: var(--kna-font-size-lg);
	font-weight: var(--kna-weight-extrabold);
	line-height: 1.15;
	letter-spacing: var(--kna-tracking-tight);
	text-transform: uppercase;
	overflow-wrap: break-word;
}

.kna-cat-card__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--kna-space-3xs);
	margin-top: 2px;
	font-size: var(--kna-font-size-xs);
	font-weight: var(--kna-weight-medium);
	color: rgba(255, 255, 255, 0.85);
}

/* -----------------------------------------------------------------
 * 4. Section « Nos marques »
 * ----------------------------------------------------------------- */

.kna-brands {
	padding-block: var(--kna-space-lg) var(--kna-space-2xl);
	background-color: var(--kna-color-surface-light);
	color: var(--kna-color-text-strong);
}

.kna-brands__top-link {
	margin: 0 0 var(--kna-space-sm);
	font-size: var(--kna-font-size-xs);
	font-weight: var(--kna-weight-bold);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.kna-brands__top-link a {
	display: inline-flex;
	align-items: center;
	gap: var(--kna-space-3xs);
	color: var(--kna-color-link);
}

.kna-brands__top-link a:hover,
.kna-brands__top-link a:focus {
	color: var(--kna-color-link-hover);
}

/*
 * Rangée souple : la colonne de titre garde une largeur stable, les cartes de
 * marques se partagent l'espace restant. Le nombre de marques est libre (0 à 5,
 * plus la carte d'invitation) : la rangée s'adapte sans trou.
 */
.kna-brands__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kna-space-sm);
	align-items: stretch;
}

.kna-brands__intro {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 0 1 220px;
	min-width: 170px;
	padding-right: var(--kna-space-sm);
}

.kna-brands__title {
	margin: 0 0 var(--kna-space-xs);
	font-family: var(--kna-font-display);
	font-size: var(--kna-font-size-xl);
	font-weight: var(--kna-weight-black);
	line-height: 1;
	text-transform: uppercase;
	color: #0b0f0d;
}

.kna-brands__subtitle {
	margin: 0;
	font-size: var(--kna-font-size-sm);
	font-weight: var(--kna-weight-medium);
	line-height: 1.35;
	color: var(--kna-color-text-muted);
}

.kna-brand-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--kna-space-2xs);
	flex: 1 1 150px;
	min-width: 140px;
	min-height: var(--kna-brand-card-height);
	padding: var(--kna-space-sm);
	background-color: var(--kna-color-muted-surface);
	border-radius: var(--kna-radius-lg);
	color: var(--kna-color-text-strong);
	text-align: center;
	box-shadow: var(--kna-shadow-sm);
	transition: background-color var(--kna-transition-fast), transform var(--kna-transition-fast);
}

.kna-brand-card:hover,
.kna-brand-card:focus {
	background-color: var(--kna-color-card-hover);
	color: var(--kna-color-text-strong);
	transform: translateY(-2px);
}

.kna-brand-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
}

.kna-brand-card__logo {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 52px;
	object-fit: contain;
}

.kna-brand-card__placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--kna-radius-lg);
	background-color: rgba(17, 17, 17, 0.06);
	color: rgba(17, 17, 17, 0.45);
}

.kna-brand-card__name {
	font-size: var(--kna-font-size-sm);
	font-weight: var(--kna-weight-extrabold);
	line-height: 1.2;
	letter-spacing: var(--kna-tracking-tight);
	text-transform: uppercase;
	overflow-wrap: break-word;
}

.kna-brand-card__catalog {
	display: inline-flex;
	align-items: center;
	gap: var(--kna-space-3xs);
	font-size: var(--kna-font-size-2xs);
	font-weight: var(--kna-weight-semibold);
	color: var(--kna-color-text-muted);
}

/* Carte d'invitation « et bien d'autres marques ». */
.kna-brand-card--more {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: var(--kna-space-sm);
	text-align: left;
}

.kna-brand-card__more-text {
	font-size: var(--kna-font-size-sm);
	font-weight: var(--kna-weight-bold);
	line-height: 1.25;
}

.kna-brand-card__more-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: var(--kna-radius-pill);
	background-color: #e2e5e8;
	color: var(--kna-color-text-strong);
}

/* -----------------------------------------------------------------
 * 6. Bandeau partenariat
 * ----------------------------------------------------------------- */

.kna-partner {
	padding-block: var(--kna-space-2xl);
	background-color: var(--kna-color-surface-light);
	color: var(--kna-color-text-strong);
}

.kna-partner__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--kna-space-lg);
}

.kna-partner__side {
	min-width: 0;
	border-radius: var(--kna-radius-2xl);
	overflow: hidden;
}

/* Moitié gauche : image + panneau sombre. */
.kna-partner__side--logistics {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	background-color: var(--kna-color-dark-header);
}

/* Sans image, le panneau occupe toute la largeur : aucun trou de mise en page. */
.kna-partner__side--no-image {
	grid-template-columns: minmax(0, 1fr);
}

.kna-partner__media {
	margin: 0;
	min-width: 0;
}

.kna-partner__image {
	width: 100%;
	height: 100%;
	min-height: 240px;
	object-fit: cover;
}

.kna-partner__panel {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--kna-space-md);
	min-width: 0;
	padding: var(--kna-space-lg);
	color: var(--kna-color-text);
	border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.kna-partner__kicker {
	margin: 0;
	font-family: var(--kna-font-display);
	font-size: var(--kna-font-size-md);
	font-weight: var(--kna-weight-black);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.kna-partner__title {
	margin: 0 0 var(--kna-space-sm);
	font-family: var(--kna-font-display);
	font-size: var(--kna-font-size-2xl);
	font-weight: var(--kna-weight-black);
	line-height: 1.1;
	color: var(--kna-color-accent);
}

.kna-partner__bullets {
	display: flex;
	flex-direction: column;
	gap: var(--kna-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kna-partner__bullet {
	display: flex;
	align-items: center;
	gap: var(--kna-space-xs);
	font-size: var(--kna-font-size-base);
	font-weight: var(--kna-weight-semibold);
	color: rgba(255, 255, 255, 0.95);
}

.kna-partner__bullet-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border-radius: var(--kna-radius-pill);
	background-color: var(--kna-color-accent);
	color: var(--kna-color-dark);
}

.kna-partner__action {
	margin: 0;
}

/* Moitié droite : signature + atouts. */
.kna-partner__side--relation {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--kna-space-lg);
	padding: var(--kna-space-lg);
	background-color: #ffffff;
	color: var(--kna-color-text-strong);
}

.kna-partner__signature {
	margin: 0;
	font-size: var(--kna-font-size-3xl);
	line-height: 1.05;
	color: var(--kna-color-text-strong);
	transform: rotate(-5deg);
	transform-origin: left top;
}

.kna-partner__points {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--kna-space-md) var(--kna-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kna-partner__point {
	display: flex;
	align-items: center;
	gap: var(--kna-space-sm);
	min-width: 0;
}

.kna-partner__point-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border: 1px solid var(--kna-color-link);
	border-radius: var(--kna-radius-lg);
	background-color: #ffffff;
	color: var(--kna-color-link);
	box-shadow: var(--kna-shadow-sm);
}

.kna-partner__point-text {
	min-width: 0;
	line-height: 1.25;
}

.kna-partner__point-title {
	display: block;
	font-size: var(--kna-font-size-base);
	font-weight: var(--kna-weight-bold);
	color: var(--kna-color-text-strong);
}

.kna-partner__point-desc {
	display: block;
	font-size: var(--kna-font-size-xs);
	font-weight: var(--kna-weight-medium);
	color: var(--kna-color-text-muted);
}

/* -----------------------------------------------------------------
 * 7. Bandeau réassurance
 * ----------------------------------------------------------------- */

.kna-reassurance {
	position: relative;
	overflow: hidden;
	max-width: 100%;
	padding-block: var(--kna-space-2xl);
	background-color: var(--kna-color-dark-elevated);
	background-image: linear-gradient(rgba(5, 15, 8, 0.85), rgba(2, 10, 5, 0.9)),
		linear-gradient(120deg, #06120b 0%, #040a06 100%);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.kna-reassurance__image {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.kna-reassurance__inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--kna-space-xl);
}

.kna-reassurance__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--kna-space-lg);
	flex: 1 1 560px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kna-reassurance__block {
	display: flex;
	align-items: center;
	gap: var(--kna-space-sm);
	min-width: 0;
}

.kna-reassurance__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border: 1px solid var(--kna-color-border-dark-strong);
	border-radius: var(--kna-radius-pill);
	background-color: rgba(255, 255, 255, 0.05);
	color: var(--kna-color-text);
}

.kna-reassurance__text {
	min-width: 0;
	line-height: 1.3;
}

.kna-reassurance__title {
	display: block;
	font-size: var(--kna-font-size-sm);
	font-weight: var(--kna-weight-bold);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--kna-color-text);
}

.kna-reassurance__desc {
	display: block;
	margin-top: 2px;
	font-size: var(--kna-font-size-xs);
	color: rgba(255, 255, 255, 0.8);
}

.kna-reassurance__signature {
	flex-shrink: 0;
	margin: 0;
	font-size: var(--kna-font-size-2xl);
	line-height: 1.1;
	text-align: right;
	color: var(--kna-color-text);
}

/* -----------------------------------------------------------------
 * 8. Tablette : ≤ 1024 px
 * ----------------------------------------------------------------- */

@media (max-width: 1024px) {
	.kna-hero__inner {
		padding-block: var(--kna-space-xl);
	}

	/* La signature repasse dans le flux, sous les boutons. */
	.kna-hero__signature {
		position: static;
		max-width: none;
		margin-top: var(--kna-space-lg);
		text-align: left;
		transform: none;
	}

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

	.kna-partner__signature {
		transform: none;
	}

	.kna-reassurance__signature {
		text-align: left;
	}

	/* Cartes de catégories : colonnes déduites du nombre réel de cartes. */
	.kna-categories__grid {
		grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	}

	.kna-brands__intro {
		flex: 1 1 100%;
		min-width: 0;
		padding-right: 0;
	}
}

/* -----------------------------------------------------------------
 * 9. Mobile : ≤ 768 px
 * ----------------------------------------------------------------- */

@media (max-width: 768px) {
	/*
	 * Mobile : le visuel reste en arrière-plan plein cadre. Le recadrage
	 * conserve les produits, situés entre 62 % et 88 % de la largeur du
	 * packshot, et le voile est renforcé pour la lisibilité du titre.
	 */
	.kna-hero {
		min-height: max(520px, calc(100vh - var(--kna-header-h, 120px)));
	}

	body.admin-bar .kna-hero {
		min-height: max(520px, calc(100vh - var(--kna-header-h, 120px) - 46px));
	}

	.kna-hero__image {
		object-position: 70% center;
	}

	.kna-hero__bg::after {
		background-image:
			linear-gradient(90deg, rgba(5, 7, 6, 0.94) 0%, rgba(5, 7, 6, 0.82) 55%, rgba(5, 7, 6, 0.6) 100%),
			linear-gradient(180deg, rgba(5, 7, 6, 0.7) 0%, rgba(5, 7, 6, 0.25) 40%, rgba(5, 7, 6, 0.75) 100%);
	}

	.kna-hero__points {
		max-width: none;
	}

	.kna-hero__strip-inner {
		justify-content: flex-start;
	}

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

	.kna-partner__image {
		min-height: 180px;
	}

	.kna-partner__panel {
		border-right: 0;
	}

	.kna-reassurance__inner {
		gap: var(--kna-space-lg);
	}

	/* Cartes de catégories : 2 colonnes sur tablette, toujours déduites du
	 * nombre réel de cartes. */
	.kna-categories__grid {
		grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	}

	.kna-cat-card {
		min-height: 150px;
	}

	.kna-brand-card {
		flex: 1 1 45%;
	}
}

/* -----------------------------------------------------------------
 * 10. Petits mobiles : ≤ 480 px
 * ----------------------------------------------------------------- */

@media (max-width: 480px) {
	/* Deux cartes par rangée sur petit écran, toujours déduites du nombre réel. */
	.kna-categories__grid {
		grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
	}

	.kna-hero__title {
		font-size: var(--kna-font-size-display-sm);
	}

	/* Les boutons s'empilent sur toute la largeur : aucune compression. */
	.kna-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.kna-hero__actions .kna-btn {
		width: 100%;
	}

	/*
	 * Les 4 arguments restent en grille auto-adaptative (déjà minmax(140px, 1fr)) :
	 * deux colonnes sur un mobile courant, une seule sur les largeurs extrêmes.
	 * Aucune largeur fixe, donc aucun écrasement du texte.
	 */
	.kna-hero__points {
		max-width: none;
	}

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

/* -----------------------------------------------------------------
 * 11. Variantes 0.7.0
 * ----------------------------------------------------------------- */

/*
 * Cartes catégories SANS image : rendu premium, jamais de zone vide.
 * Fond très sombre, dégradé subtil, texture CSS discrète, icône SVG interne.
 */
.kna-cat-card--plain {
	background-color: #0b100d;
	background-image: linear-gradient(155deg, #12241a 0%, #070b09 62%, #050706 100%);
}

.kna-cat-card__texture {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.55;
	background-image:
		radial-gradient(circle at 24% 18%, rgba(157, 247, 88, 0.18) 0%, transparent 44%),
		repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 9px);
}

.kna-cat-card__glyph {
	position: absolute;
	top: 44%;
	right: var(--kna-space-md);
	z-index: 1;
	transform: translateY(-50%);
	color: var(--kna-color-accent);
	opacity: 0.85;
}

.kna-cat-card--plain .kna-cat-card__overlay {
	background-image: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.92) 0%,
		rgba(0, 0, 0, 0.32) 55%,
		rgba(0, 0, 0, 0) 100%
	);
}

/*
 * Marques éditoriales : monogramme typographique. Aucun logo n'est inventé,
 * téléchargé ou créé dans WordPress.
 */
.kna-brand-card__monogram {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	height: 38px;
	padding-inline: var(--kna-space-2xs);
	border: 1px solid rgba(17, 17, 17, 0.16);
	border-radius: var(--kna-radius-md);
	background-color: #ffffff;
	font-family: var(--kna-font-display);
	font-size: var(--kna-font-size-lg);
	font-weight: var(--kna-weight-black);
	letter-spacing: -0.02em;
	line-height: 1;
	color: #0b0f0d;
}

/*
 * Bandeau partenariat — panneau relation client : visuel « poignée de main »
 * en bandeau supérieur, sous un dégradé clair à gauche pour la lisibilité.
 */
.kna-partner__side--relation {
	position: relative;
	overflow: hidden;
}

.kna-partner__relation-media {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 0;
	display: block;
	height: 158px;
	overflow: hidden;
	border-top-right-radius: var(--kna-radius-2xl);
}

.kna-partner__relation-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.kna-partner__relation-veil {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		to right,
		#ffffff 0%,
		#ffffff 34%,
		rgba(255, 255, 255, 0.86) 50%,
		rgba(255, 255, 255, 0) 76%
	);
}

.kna-partner__side--relation > *:not(.kna-partner__relation-media) {
	position: relative;
	z-index: 1;
}

.kna-partner__side--relation .kna-partner__signature {
	margin-top: var(--kna-space-2xs);
}

@media (max-width: 768px) {
	.kna-partner__relation-media {
		height: 132px;
	}
}


/* -----------------------------------------------------------------
 * 12. Micro-lot 11 — hero mobile (≤ 768 px)
 *
 * Trois changements, tous cantonnés au point de rupture mobile existant :
 *   a) la signature manuscrite disparaît complètement (aucun espace réservé) ;
 *   b) le bandeau des quatre mots passe en grille 2 × 2 centrée ;
 *   c) la hero complète, bandeau compris, mesure exactement 100vh.
 *
 * Desktop (≥ 769 px) : aucune de ces règles ne s'applique.
 * ----------------------------------------------------------------- */

@media ( max-width: 768px ) {
	/*
	 * c) Hauteur demandée : 100vh, bandeau compris. La barre de navigation est
	 * hors de cette section, elle n'est donc pas retranchée. `height` (et non
	 * `min-height`) fixe la hauteur : le contenu ne peut pas faire grandir la
	 * section en silence. `overflow: hidden` est déjà porté par `.kna-hero` :
	 * rien ne sera superposé ni coupé nulle part tant que le contenu tient.
	 */
	.kna-hero {
		height: 100vh;
		min-height: 100vh;
	}

	/* Barre d'administration connectée : la hauteur utile est réduite d'autant,
	 * comme le faisait déjà la règle desktop. */
	body.admin-bar .kna-hero {
		height: calc( 100vh - 46px );
		min-height: calc( 100vh - 46px );
	}

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

	/* L'espace libéré est rendu aux respirations de la colonne de texte, pour
	 * que le bandeau reste collé en bas sans trou artificiel. */
	.kna-hero__inner {
		padding-block: var(--kna-space-lg);
	}

	.kna-hero__points {
		margin-bottom: var(--kna-space-lg);
	}

	/* b) Bandeau : grille 2 colonnes × 2 lignes, centrée, sans séparateur. */
	.kna-hero__strip-inner {
		justify-content: center;
	}

	.kna-hero__strip-list {
		display: grid;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		column-gap: var(--kna-space-sm);
		row-gap: var(--kna-space-2xs);
		justify-items: center;
		text-align: center;
	}

	/* Les séparateurs du format horizontal n'ont plus de sens en grille. */
	.kna-hero__strip-item + .kna-hero__strip-item::before {
		content: none;
	}
}

/* -----------------------------------------------------------------
 * 13. Micro-lot 11 — écrans de 320 px (≤ 360 px)
 *
 * La grille d'arguments à DEUX colonnes est conservée telle quelle : aucun
 * passage à une colonne, aucune alternance. Seules les respirations sont
 * resserrées — rembourrage, écart entre arguments, marges verticales — pour
 * rendre de la hauteur au contenu.
 *
 * Les boutons ne sont pas rapetissés : leur rembourrage vertical reste celui
 * de la feuille active, soit la même hauteur qu'aux autres largeurs. Si la
 * hauteur de fenêtre ne suffit pas, le dépassement est constaté et signalé,
 * jamais absorbé en réduisant les boutons.
 * ----------------------------------------------------------------- */

@media ( max-width: 360px ) {
	/*
	 * Marge latérale du conteneur ramenée de 24 px à 16 px : c'est ce qui rend
	 * la place nécessaire à la grille d'arguments à deux colonnes telle qu'elle
	 * est écrite dans la feuille active (`minmax(140px, 1fr)`, écart 12 px).
	 * 320 − 32 = 288 px utiles, soit deux colonnes de 138 px + 12 px d'écart :
	 * la grille bascule d'elle-même à deux colonnes, sans règle de colonnes
	 * ajoutée ici.
	 */
	.kna-hero__inner {
		padding-inline: var(--kna-space-md);
		padding-block: var(--kna-space-md);
	}

	.kna-hero__title,
	.kna-hero__subtitle {
		margin-bottom: var(--kna-space-sm);
	}

	.kna-hero__points {
		gap: var(--kna-space-xs);
		margin-bottom: var(--kna-space-md);
	}

	.kna-hero__actions {
		gap: var(--kna-space-sm);
	}
}