/* ==========================================================================
   Page « Interface de diagnostic ELM327 ».
   Maquette : Interface ELM327.dc.html.

   Page documentaire longue : sommaire collant + sections ancrées. Les
   composants communs (kk-container, kk-card, kk-badge, kk-btn, kk-reassure,
   kk-cta-band, kk-icotile) viennent de components.css.
   ========================================================================== */

/* --- Héro ---------------------------------------------------------------- */

.elm-hero-wrap {
	--hero-pt: clamp(20px, 3.2vw, 38px);
	--hero-pb: clamp(28px, 4.4vw, 54px);
}

.elm-lead {
	--lead-gap: 14px;
	--lead-width: 58ch;
}

/* --- Cartes produit du héro ---------------------------------------------- */

.elm-products-h {
	font-size: var(--k-text-s);
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--k-chevron);
	margin: 0 0 12px;
}

/* Les vignettes vivent dans la colonne étroite du héro, pas dans une grille
   pleine largeur : deux colonnes serrées, image plus basse, pied compact.
   Le composant reste le même, seuls ses réglages changent. */
.elm-products .kk-prod-grid {
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	--prod-min: 0;
	--prod-img-h: 96px;
	--card-padding: 16px;
	--more-size: 13px;
}

/* --- Puces et types ------------------------------------------------------- */

.elm-chips {
	--grid-min: 150px;
	--grid-gap: 10px;
	margin-bottom: 16px;
}

.elm-chip {
	background: #fff;
	border: 1px solid var(--k-border);
	border-radius: var(--k-r-tile);
	padding: 13px 15px;
}

.elm-chip-n {
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: var(--k-text-l);
	color: var(--k-charcoal);
	margin: 0 0 3px !important;
}

.elm-chip-p {
	font-size: var(--k-text-s) !important;
	color: var(--k-chevron) !important;
	margin: 0 !important;
	font-weight: 600;
}

.elm-type {
	--card-padding: 18px 20px;
}

.elm-type-head {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-bottom: 9px;
}

.elm-type-n {
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: var(--k-text-xl);
	margin: 0 !important;
	color: var(--k-charcoal);
}

.elm-type-d {
	font-size: var(--k-text-m) !important;
	line-height: 1.55;
	margin: 0 !important;
}

/* --- Comparatif Bluetooth / WiFi ------------------------------------------ */

.elm-compare {
	--card-padding: 18px 20px;
}

.elm-compare-n {
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: var(--k-text-xl);
	color: var(--k-charcoal);
	margin: 0 0 12px !important;
}

.elm-compare-l {
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: var(--k-text-s);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 12px 0 4px !important;
}

.elm-compare-l.is-yes {
	color: var(--k-green-ink) !important;
}

.elm-compare-l.is-no {
	color: var(--k-orange-dark);
}

.elm-compare p:not(.elm-compare-n):not(.elm-compare-l) {
	font-size: var(--k-text-m) !important;
	line-height: 1.55;
	margin: 0 !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 560px) {
	.elm-products .kk-prod-grid {
		gap: 10px;
		--card-padding: 14px;
		--prod-img-h: 78px;
		--more-size: 12px;
	}

	.elm-hero-btns .kk-btn {
		flex: 1 1 100%;
		text-align: center;
	}
}