/*
 * kp-guarantees.css — Section "Garanties" (Le Bureau bloc 7).
 *
 * Figma : 10132:2495. Header 2 cols (heading 608px gauche + body 648px droite)
 * + grille 2×2 cards icône (SSIAP / Habilitations électriques / Certifs ERP /
 * Autres certifs chantier). Chaque card : icône 60×60 carré orange ou glass
 * (à gauche) + titre + sous-texte (à droite).
 *
 * Auto-enqueué (kp-pattern-guarantees, dep kp-tokens).
 */

.kp-guarantees {
	display: flex;
	flex-direction: column;
	gap: 4rem;
	padding: var(--kp-section-padding-y, 9.375rem) var(--kp-section-padding-x, 4.5rem);
	background: var(--kp-color-surface-deep);
}

.kp-guarantees__header {
	display: flex;
	gap: 2.5rem;
	align-items: flex-start;
	width: 100%;
}

.kp-guarantees__heading {
	flex: 608 0 0;
	min-width: 0;
	margin: 0;
	font-family: var(--kp-font-sans);
	font-size: var(--kp-font-size-62);
	font-weight: var(--kp-font-weight-regular);
	line-height: 1.06;
	letter-spacing: var(--kp-letter-spacing-h2, -0.06em);
	color: var(--kp-color-text-inverse);
	text-align: right; /* demande Morgan 2026-06-10 r3 — heading aligné à droite */
}

.kp-guarantees__body {
	flex: 648 0 0;
	min-width: 0;
	margin: 0;
	font-family: var(--kp-font-sans);
	font-size: 1.125rem;
	font-weight: var(--kp-font-weight-regular);
	line-height: 1.6;
	letter-spacing: -0.015em;
	color: var(--kp-color-text-muted);
}

/* Grille damier : 1 et 4 noir (style Synapse), 2 et 3 orange glassy (style Ecovadis).
 * Bordures blanches subtiles (pas orange) — Morgan r3. */
.kp-guarantees__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: #0a0a0a;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.kp-guarantees__card {
	display: flex;
	align-items: center;
	gap: 2rem;
	padding: 2.25rem 2.75rem; /* 36 / 44 */
	border-right: 1px solid rgba(255, 255, 255, 0.14);
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	min-height: 11.8125rem; /* 189 */
	background: #0a0a0a;
	color: var(--kp-color-text-inverse);
}

.kp-guarantees__card:nth-child(2n) {
	border-right: 0;
}

.kp-guarantees__card:nth-last-child(-n+2) {
	border-bottom: 0;
}

/* Damier diagonal : cards 2 + 3 en orange glassy (top-right + bottom-left). */
.kp-guarantees__card:nth-child(2),
.kp-guarantees__card:nth-child(3) {
	background: rgba(223, 115, 46, 0.12);
}

.kp-guarantees__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.75rem; /* 60 */
	height: 3.75rem;
	padding: 0.5rem;
	border-radius: var(--kp-radius-sm, 4px);
	background: rgba(255, 255, 255, 0.1);
}

.kp-guarantees__icon svg {
	width: 2rem;
	height: 2rem;
	color: #fff;
	display: block;
}

/* Override automatique via :nth-child : icônes des cards orange (2, 3) en orange
 * brand, icônes des cards noires (1, 4) en glass. Demande Morgan 2026-06-10 r3. */
.kp-guarantees__card:nth-child(2) .kp-guarantees__icon,
.kp-guarantees__card:nth-child(3) .kp-guarantees__icon {
	background: var(--kp-color-brand-primary);
}

.kp-guarantees__card:nth-child(2) .kp-guarantees__icon svg,
.kp-guarantees__card:nth-child(3) .kp-guarantees__icon svg {
	color: #fff;
}

.kp-guarantees__card:nth-child(1) .kp-guarantees__icon,
.kp-guarantees__card:nth-child(4) .kp-guarantees__icon {
	background: rgba(255, 255, 255, 0.08);
}

.kp-guarantees__card:nth-child(1) .kp-guarantees__icon svg,
.kp-guarantees__card:nth-child(4) .kp-guarantees__icon svg {
	color: rgba(255, 255, 255, 0.6);
}

.kp-guarantees__icon--accent {
	background: var(--kp-color-brand-primary);
}

.kp-guarantees__icon--accent svg {
	color: #fff;
}

.kp-guarantees__text {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	min-width: 0;
}

.kp-guarantees__title {
	margin: 0;
	font-family: var(--kp-font-sans);
	font-size: 1.625rem; /* 26 */
	font-weight: var(--kp-font-weight-regular);
	line-height: 1.15;
	letter-spacing: -0.04em;
	color: var(--kp-color-text-inverse);
}

/* Sous-titres en MAJ — demande Morgan 2026-06-10. */
.kp-guarantees__sub {
	margin: 0;
	font-family: var(--kp-font-sans);
	font-size: 0.75rem;
	font-weight: var(--kp-font-weight-medium);
	line-height: 1.4;
	letter-spacing: 0.125em;
	text-transform: uppercase;
	color: var(--kp-color-text-faint);
}

@media (max-width: 980px) {
	.kp-guarantees__header {
		flex-direction: column;
		gap: 1.5rem;
	}
	.kp-guarantees__grid {
		grid-template-columns: 1fr;
	}
	.kp-guarantees__heading {
		font-size: clamp(2rem, 7vw, 3.5rem);
	}
}