/**
 * KNA Distribution — footer global.
 *
 * Cinq zones : marque et signature, « À propos », « Service client »,
 * newsletter, réseaux sociaux — puis une barre inférieure avec la mention
 * finale alignée à droite. Composition de la maquette.
 *
 * Accent propre au footer : #8DF572. Le jeton global --kna-color-accent
 * (#9DF758) n'est volontairement pas modifié : le footer suit le design
 * sombre premium de la maquette catalogue sans toucher au reste du thème.
 */

.kna-footer {
	/* Accent local, strictement limité à ce composant. */
	--kna-footer-accent: #8df572;
	--kna-footer-accent-soft: rgba(141, 245, 114, 0.12);
	--kna-footer-line: rgba(255, 255, 255, 0.1);

	position: relative;
	z-index: var(--kna-z-banner);
	color: var(--kna-color-text);
	background-color: var(--kna-color-dark-footer);
	/* Très léger dégradé radial vert forêt : purement décoratif. */
	background-image: radial-gradient(
		130% 100% at 8% 0%,
		rgba(14, 91, 50, 0.38) 0%,
		rgba(6, 13, 11, 0) 62%
	);
	border-top: 1px solid var(--kna-footer-line);
}

.kna-footer__main {
	padding-block: var(--kna-space-2xl) var(--kna-space-xl);
}

.kna-footer__grid {
	display: grid;
	grid-template-columns: 1.35fr 0.95fr 1fr 1.35fr 0.7fr;
	gap: var(--kna-space-lg);
	align-items: start;
	min-width: 0;
}

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

/* Séparateurs verticaux entre les quatre premières zones. */
.kna-footer__grid > .kna-footer__col:not(:last-child) {
	border-right: 1px solid var(--kna-footer-line);
	padding-right: var(--kna-space-md);
}

.kna-footer__heading {
	margin: 0 0 var(--kna-space-sm);
	font-family: var(--kna-font-body);
	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);
}

/* -----------------------------------------------------------------
 * Zone 1 — marque et signature
 * ----------------------------------------------------------------- */

.kna-footer__brand-link {
	display: inline-flex;
	align-items: center;
	gap: var(--kna-space-xs);
	color: var(--kna-footer-accent);
	text-decoration: none;
}

.kna-footer__brand-link .kna-brand-mark {
	flex-shrink: 0;
	color: var(--kna-footer-accent);
}

/*
 * Logo du site (Identité du site).
 *
 * Même précaution que dans la navbar : `.kna-footer__brand-link .kna-footer__logo`
 * garde la priorité sur la règle `.woocommerce-page img { height: auto }` de
 * WooCommerce, qui s'applique aussi au footer sur les pages boutique.
 */
.kna-footer__brand-link .kna-footer__logo {
	display: block;
	width: auto;
	height: 40px;
	max-width: 100%;
}

.kna-footer__brand-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.kna-footer__brand-name {
	font-family: var(--kna-font-display);
	font-size: var(--kna-font-size-xl);
	font-weight: var(--kna-weight-black);
	line-height: 1;
	letter-spacing: var(--kna-tracking-tight);
	text-transform: uppercase;
	color: var(--kna-color-text);
}

.kna-footer__brand-sub {
	margin-top: 2px;
	font-size: var(--kna-font-size-2xs);
	font-weight: var(--kna-weight-semibold);
	line-height: 1.1;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

.kna-footer__signature {
	margin: var(--kna-space-sm) 0 0;
	font-size: 0.625rem;
	font-weight: var(--kna-weight-semibold);
	line-height: 1.55;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

.kna-footer__signature-line {
	display: block;
}

/* -----------------------------------------------------------------
 * Zones 2 et 3 — menus de liens
 * ----------------------------------------------------------------- */

.kna-footer__menu,
.kna-footer__legal,
.kna-social {
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.kna-footer__menu a {
	font-size: var(--kna-font-size-sm);
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
}

.kna-footer__menu a:hover,
.kna-footer__menu a:focus {
	color: var(--kna-footer-accent);
}

/* -----------------------------------------------------------------
 * Zone 4 — newsletter
 * ----------------------------------------------------------------- */

.kna-newsletter__text {
	margin: 0 0 var(--kna-space-xs);
	font-size: var(--kna-font-size-xs);
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.7);
}

.kna-newsletter__row {
	display: flex;
	align-items: stretch;
	min-width: 0;
}

/* Champ leurre : jamais visible, jamais focalisable. */
.kna-newsletter__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.kna-newsletter__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: 0;
	border-radius: var(--kna-radius-sm) 0 0 var(--kna-radius-sm);
}

.kna-newsletter__input::placeholder {
	color: var(--kna-color-text-subtle);
}

.kna-newsletter__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	height: 36px;
	min-width: 44px;
	padding-inline: var(--kna-space-sm);
	color: #ffffff;
	background-color: var(--kna-color-brand);
	border: 0;
	border-radius: 0 var(--kna-radius-sm) var(--kna-radius-sm) 0;
	cursor: pointer;
	transition: background-color var(--kna-transition-fast);
}

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

.kna-newsletter__message {
	margin: var(--kna-space-sm) 0 0;
	font-size: var(--kna-font-size-xs);
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.75);
}

.kna-newsletter__message:empty {
	margin: 0;
}

.kna-newsletter__message--info {
	color: rgba(255, 255, 255, 0.85);
}

.kna-newsletter__message--error {
	color: #ffb4b4;
}

.kna-newsletter__message--success {
	color: var(--kna-footer-accent);
}

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

/* -----------------------------------------------------------------
 * Zone 5 — réseaux sociaux
 * ----------------------------------------------------------------- */

.kna-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kna-space-xs);
}

.kna-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: rgba(255, 255, 255, 0.8);
	background-color: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--kna-radius-pill);
	transition: color var(--kna-transition-fast), border-color var(--kna-transition-fast);
}

.kna-social__link:hover,
.kna-social__link:focus {
	color: var(--kna-footer-accent);
	border-color: var(--kna-footer-accent);
}

/* -----------------------------------------------------------------
 * Barre inférieure
 * ----------------------------------------------------------------- */

.kna-footer__bottom {
	margin-top: var(--kna-space-xl);
	border-top: 1px solid var(--kna-footer-line);
}

.kna-footer__bottom-inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: var(--kna-space-sm);
	padding-block: var(--kna-space-md);
}

.kna-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kna-space-md);
	margin-right: auto;
}

.kna-footer__legal a {
	font-size: var(--kna-font-size-xs);
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
}

.kna-footer__legal a:hover,
.kna-footer__legal a:focus {
	color: var(--kna-footer-accent);
}

.kna-footer__mention {
	margin: 0;
	font-size: var(--kna-font-size-xs);
	font-weight: var(--kna-weight-medium);
	letter-spacing: 0.02em;
	color: var(--kna-color-text-subtle);
}

/* Focus visible : accent du footer, lisible sur fond sombre. */
.kna-footer a:focus-visible,
.kna-footer button:focus-visible,
.kna-footer input:focus-visible {
	outline: 2px solid var(--kna-footer-accent);
	outline-offset: 2px;
}

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

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

	.kna-footer__grid > .kna-footer__col:not(:last-child) {
		border-right: 0;
		padding-right: 0;
	}
}

@media (max-width: 768px) {
	.kna-footer__main {
		padding-block: var(--kna-space-xl) var(--kna-space-lg);
	}

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

@media (max-width: 560px) {
	.kna-footer__grid {
		grid-template-columns: minmax(0, 1fr);
	}

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

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