/*
 * kp-footer.css — Footer KP.
 *
 * Figma : Footer 10132:966. Fond #050505, rounded 20px, padding 72/120.
 * 3 colonnes : marque + LinkedIn / Navigation / Contact (icônes orange).
 * Auto-enqueué (kp-pattern-footer, dep kp-tokens).
 */

.kp-footer {
	background: var(--kp-color-surface-footer, #050505);
	border-radius: var(--kp-radius-lg);
	padding: 7.5rem var(--kp-section-padding-x, 4.5rem); /* 120 / 72 */
	margin: var(--kp-space-6);
	overflow: clip;
}

.kp-footer__grid {
	display: flex;
	gap: var(--kp-space-18, 4.5rem);
	align-items: flex-start;
	width: 100%;
}

/* --- Colonne marque --- */
.kp-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--kp-space-6);
	width: 552px;
	max-width: 100%;
	flex-shrink: 0;
}

.kp-footer__brand-row {
	display: flex;
	align-items: center;
	gap: var(--kp-space-3);
}

.kp-footer__logo {
	width: 37px;
	height: 38px;
	flex-shrink: 0;
	object-fit: contain;
}

.kp-footer__brand-name {
	display: flex;
	flex-direction: column;
}

.kp-footer__wordmark {
	font-family: var(--kp-font-sans);
	font-size: 1.375rem; /* 22px */
	font-weight: var(--kp-font-weight-regular);
	letter-spacing: 5.5px;
	color: var(--kp-color-text-inverse);
	line-height: 1.1;
}

.kp-footer__tagline {
	font-family: var(--kp-font-sans);
	font-size: 0.625rem; /* 10px */
	font-weight: var(--kp-font-weight-regular);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--kp-color-brand-primary);
	line-height: 1.2;
}

.kp-footer__desc {
	font-family: var(--kp-font-sans);
	font-size: var(--kp-font-size-16);
	font-weight: var(--kp-font-weight-regular);
	letter-spacing: 0.16px;
	line-height: 1.5;
	color: var(--kp-color-text-muted);
	margin: 0;
}

.kp-footer__linkedin {
	display: inline-flex;
	align-items: center;
	gap: var(--kp-space-2);
	align-self: flex-start;
	padding: 6px var(--kp-space-3);
	background: var(--kp-color-brand-primary);
	border-radius: var(--kp-radius-sm);
	font-family: var(--kp-font-sans);
	font-size: var(--kp-font-size-16);
	font-weight: var(--kp-font-weight-medium);
	color: var(--kp-color-black);
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.kp-footer__linkedin:hover {
	background: var(--kp-color-brand-primary-hover);
}

.kp-footer__linkedin svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* --- Colonnes (Navigation, Contact) --- */
.kp-footer__col {
	display: flex;
	flex-direction: column;
	gap: var(--kp-space-6);
	flex: 1 0 0;
	min-width: 0;
}

.kp-footer__col-title {
	font-family: var(--kp-font-sans);
	font-size: var(--kp-font-size-20);
	font-weight: var(--kp-font-weight-medium);
	color: var(--kp-color-text-inverse);
	line-height: 1.34;
	margin: 0;
	text-transform: capitalize;
}

.kp-footer__list {
	display: flex;
	flex-direction: column;
	gap: var(--kp-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.kp-footer__link {
	font-family: var(--kp-font-sans);
	font-size: var(--kp-font-size-16);
	font-weight: var(--kp-font-weight-regular);
	color: var(--kp-color-text-muted);
	text-decoration: none;
	transition: color 0.2s ease;
}

.kp-footer__link:hover {
	color: var(--kp-color-text-inverse);
}

/* --- Contact rows (icône orange + texte) --- */
.kp-footer__contact-row {
	display: flex;
	align-items: center;
	gap: var(--kp-space-3);
}

.kp-footer__contact-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	padding: var(--kp-space-2);
	background: var(--kp-color-brand-primary);
	border-radius: var(--kp-radius-sm);
}

.kp-footer__contact-icon svg {
	width: 22px;
	height: 22px;
	color: var(--kp-color-text-on-brand);
}

.kp-footer__contact-text {
	font-family: var(--kp-font-sans);
	font-size: var(--kp-font-size-16);
	font-weight: var(--kp-font-weight-regular);
	letter-spacing: 0.48px;
	line-height: 1.5;
	color: var(--kp-color-text-muted);
}

.kp-footer__contact-text a {
	color: inherit;
	text-decoration: none;
}

.kp-footer__contact-text a:hover {
	color: var(--kp-color-text-inverse);
}

.kp-footer__contact-text--phone {
	font-weight: var(--kp-font-weight-bold);
}

/* --- Responsive --- */
@media (max-width: 900px) {
	.kp-footer {
		padding: var(--kp-space-16) var(--kp-space-6);
	}
	.kp-footer__grid {
		flex-direction: column;
		gap: var(--kp-space-12);
	}
	.kp-footer__brand {
		width: 100%;
	}
}