/* ==========================================================================
   Page marque (/liste-vehicule-compatible-obd2/{marque}) — SPÉCIFIQUE.
   Réutilise kk-* (components.css) et wizard.css. On ne
   définit ici QUE ce qui est propre à cette page : fil d'Ariane, en-tête de
   marque, accordéon des modèles, encart coût, et quelques ajustements des
   bandes éditoriales (contenu HTML par marque rendu tel quel).
   ========================================================================== */

/* Fil d'Ariane en tête de héro : espacement propre à cette mise en page
   (le composant kk-crumb lui-même vit dans components.css). */
.mk-hero-crumb {
	padding-top: clamp(14px, 2.5vw, 22px);
}

.mk-hero .kk-hero-split {
	padding-top: clamp(16px, 3vw, 28px);
}

/* --- En-tête de marque (logo + badge) ------------------------------------ */
.mk-brand-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.mk-brand-logo {
	height: 46px;
	width: auto;
}

.mk-hero-sub {
	font-size: var(--k-text-l);
	line-height: var(--k-lh);
	color: var(--k-soft);
	margin: 0 0 24px;
	max-width: 48ch;
}

/* Lien inline orange : voir .kk-inline-link dans components.css. */

/* --- Cartes produit (maquette ProductCard) ------------------------------- */
.mk-pcards {
	--grid-min: 280px;
	--grid-gap: clamp(18px, 2.5vw, 26px);
	/* Hauteur naturelle, alignées en haut (maquette) : pas d'étirement qui créerait un vide sous le 210. */ align-items: start;
	max-width: 820px;
	margin: 0 auto;
}

.mk-pcard {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--k-hover);
	border-radius: var(--k-r-lg);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	/* Rendue en <button> (lien obfusqué) : le centrage natif du bouton
	   décalerait le contenu, on rétablit l'alignement à gauche de la carte. */
	text-align: left;
	box-shadow: 0 14px 28px -14px rgba(40, 30, 15, 0.26), 0 3px 8px -3px rgba(40, 30, 15, 0.12);
}

.mk-pcard--reco {
	background: var(--k-blue);
	border: none;
	color: var(--k-dark-strong);
	box-shadow: var(--k-shadow-drama);
}

.mk-pcard-badge {
	background: var(--k-orange);
	color: #fff;
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: var(--k-text-s);
	letter-spacing: 0.02em;
	text-align: center;
	padding: 9px 14px;
}

.mk-pcard-img {
	height: 172px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(120% 120% at 50% 0%, var(--k-hero-tint) 0%, var(--k-bg) 70%);
	border-bottom: 1px solid var(--k-border);
}

.mk-pcard--reco .mk-pcard-img {
	background: radial-gradient(120% 120% at 50% 0%, var(--k-blue-light) 0%, var(--k-blue) 70%);
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

.mk-pcard-img img {
	max-height: 132px;
	max-width: 80%;
	width: auto;
	object-fit: contain;
}

.mk-pcard--reco .mk-pcard-img img {
	filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.5));
}

.mk-pcard-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 22px;
}

.mk-pcard-name {
	display: block;
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: 22px;
	letter-spacing: -0.02em;
	margin: 0 0 5px;
}

.mk-pcard-rating {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 15px;
}

.mk-pcard-rating .kk-stars { --stars-size: 15px; }
.mk-pcard-nb {
	font-size: var(--k-text-s);
	font-weight: 600;
	color: var(--k-soft);
}

.mk-pcard--reco .mk-pcard-nb { color: var(--k-dark-body); }

.mk-pcard-sys {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 18px;
}

.mk-sys {
	font-size: var(--k-text-xs);
	font-weight: 700;
	color: var(--k-nav);
	background: var(--k-bg-alt);
	padding: 5px 10px;
	border-radius: 8px;
}

.mk-pcard--reco .mk-sys { background: var(--k-bg-alt); }

.mk-sys--plus {
	font-weight: 800;
	color: #1B7A4D;
	background: var(--k-green-border)!important;
}

.mk-pcard-foot {
	margin-top: auto;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px;
}

.mk-pcard-price {
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: 28px;
	line-height: 1;
}

.mk-pcard-cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: var(--k-text-m);
	border-radius: var(--k-r-tile);
	background: #fff;
	color: var(--k-orange-dark);
	border: 1.5px solid var(--k-border-active);
	padding: 11px 16px;
	transition: background .14s, border-color .14s, color .14s;
}

.mk-pcard--reco .mk-pcard-cta {
	background: var(--k-orange);
	color: var(--k-dark-strong);
	border: none;
	padding: 12px 18px;
}

.mk-pcard:hover .mk-pcard-cta,
.mk-pcard:focus-visible .mk-pcard-cta{ background: var(--k-orange-tint); }
.mk-pcard--reco:hover .mk-pcard-cta,
.mk-pcard--reco:focus-visible .mk-pcard-cta{ background: var(--k-orange-hover); }

/* --- Callout éditorial (bloc SEO : bande radiale sombre) ------------------ */
/* La carte s'ajuste à son texte au lieu de s'étirer sur toute la largeur.
   Ses paragraphes sont mesurés à 62 caractères ; étirée, elle laissait une
   moitié droite vide qui se lisait comme une illustration manquante — alors
   qu'aucune des vingt-huit marques n'en a jamais eu dans ce bloc.
   max-width et non width : sur un écran étroit, elle se resserre encore. */
.mk-callout {
	max-width: fit-content;
	background: var(--k-gradient-dark);
	border-radius: var(--k-r-lg);
	padding: clamp(26px, 4vw, 40px);
}

.mk-callout p {
	font-size: var(--k-text-xl);
	line-height: var(--k-lh);
	color: var(--k-dark-body);
	margin: 0 0 14px;
	max-width: 62ch;
}

.mk-callout p:last-child { margin-bottom: 0; }
.mk-callout strong { color: var(--k-dark-strong); }

/* --- Bande + cartes de codes défauts ------------------------------------- */
.mk-codes-band {
	background: var(--k-blue);
}

/* Chapô de bande sombre : voir .kk-band-lead dans components.css. */

.mk-code-grid {
	--grid-gap: 12px;
}

.mk-code-card {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: var(--k-dark-surface);
	border: 1px solid var(--k-dark-line);
	border-radius: var(--k-r-tile);
	padding: 16px 18px;
	text-decoration: none;
	transition: border-color .14s, background .14s;
}

a.mk-code-card:hover,
a.mk-code-card:focus-visible{
	border-color: var(--k-orange);
	background: rgba(255, 255, 255, 0.09);
}

/* Une carte sans libellé (le contenu éditorial ne donne parfois que le code)
   n'a pas à occuper la hauteur d'une carte à deux lignes : elle se centre. */
.mk-code-card:not(:has(.mk-code-label)) {
	align-items: center;
}

.mk-code-chip {
	flex: none;
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: var(--k-text-m);
	color: var(--k-blue);
	background: var(--k-orange-glow);
	border-radius: 8px;
	padding: 7px 10px;
	white-space: nowrap;
}

.mk-code-label {
	font-size: var(--k-text-m);
	line-height: 1.45;
	color: #DCE1E8;
	font-weight: 600;
}

/* --- Accordéon des modèles ----------------------------------------------- */
.mk-models {
	--grid-mode: auto-fill;
	--grid-min: 300px;
	--grid-gap: 14px;
	align-items: start;
}

.mk-fam {
	background: #fff;
	border: 1px solid var(--k-border);
	border-radius: var(--k-r-tile);
	overflow: hidden;
}

.mk-sum {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 15px 18px;
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: var(--k-text-l);
	color: var(--k-charcoal);
	transition: background .14s;
}

.mk-sum::-webkit-details-marker { display: none; }
.mk-sum:hover,
.mk-sum:focus-visible{ background: var(--k-border); }

/* Le nom du groupe est un vrai <h3> (SEO) mais doit s'afficher comme le
   résumé : on neutralise la typo de titre par défaut, il hérite de .mk-sum. */
.mk-fam-name {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.mk-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--k-orange);
	flex: none;
}

.mk-count {
	margin-left: auto;
	font-size: var(--k-text-s);
	font-weight: 600;
	color: var(--k-faint);
}

.mk-chev {
	display: inline-flex;
	color: var(--k-orange-dark);
	transition: transform .18s;
}

.mk-fam[open] .mk-chev {
	transform: rotate(90deg);
}

.mk-versions {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	padding: 0 18px 16px;
}

.mk-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--k-text-s);
	font-weight: 600;
	color: var(--k-body);
	text-decoration: none;
	padding: 6px 10px 6px 11px;
	background: var(--k-bg);
	border: 1px solid var(--k-border);
	border-radius: 8px;
	transition: border-color .14s, background .14s, color .14s, transform .14s;
}

.mk-pill:hover,
.mk-pill:focus-visible {
	border-color: var(--k-orange);
	background: var(--k-orange-tint);
	color: var(--k-orange-dark);
	transform: translateY(-1px);
}

.mk-pill span {
	color: var(--k-gold);
}

.mk-pill:hover span,
.mk-pill:focus-visible span{
	color: var(--k-orange);
}

/* En-tête de section aligné à GAUCHE (maquette : autres marques, prise OBD) —
   contrairement à kk-head qui centre. */
.mk-lhead {
	margin-bottom: clamp(22px, 3vw, 30px);
}

.mk-lhead h2 {
	font-size: var(--k-h2-s);
	margin: 0 0 8px;
}

.mk-lhead p {
	font-size: var(--k-text-l);
	color: var(--k-soft);
	margin: 0;
}

/* --- Prise OBD + encart coût --------------------------------------------- */
.mk-obd {
	--grid-min: 280px;
	--grid-gap: clamp(20px, 3vw, 28px);
	align-items: center;
}

.mk-obd-text h2 {
	font-size: var(--k-h2-s);
	margin: 0 0 12px;
}

.mk-obd-text p {
	margin: 0 0 16px;
}

.mk-cost {
	background: var(--k-orange-tint);
	border: 1px solid var(--k-border-warm);
	border-radius: var(--k-r-lg);
	padding: clamp(24px, 3vw, 32px);
}

.mk-cost-amount {
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: clamp(26px, 3vw, 34px);
	color: var(--k-charcoal);
	line-height: 1.1;
}

.mk-cost p {
	font-size: var(--k-text-l);
	line-height: 1.55;
	color: var(--k-warm-ink);
	margin: 8px 0 0;
}

/* Réglages repris de la page sélecteur (compat.css) plutôt qu'empruntés :
   trois lignes dupliquées valent mieux qu'une feuille de page chargée pour
   les obtenir. Elles règlent des composants communs, elles ne les redéfinissent
   pas. */
.mk-lead  { --lead-width: 48ch; }
.mk-grid3 { --grid-min: 250px; }
.mk-rule  { --card-padding: 26px; }

/* Rappel législation EOBD (paragraphe éditorial après les modèles, parité
   legacy). Liens inline via .kk-inline-link (orange). */
.mk-eobd {
	padding: clamp(20px, 3.5vw, 34px);
}
.mk-eobd p {
	margin: 0;
	color: var(--k-body);
	line-height: var(--k-lh);
}