/* ==========================================================================
   Page véhicule (/compatible/{marque}-{modele}-{id}) — SPÉCIFIQUE.
   Réutilise kk-* (components.css), cp-* (compat.css) et mk-* (marque.css).
   Ici uniquement : héro résultat, carte produit + grille de voyants traités,
   tableau motorisations, FAQ, bloc Made in France, chips « autres modèles ».
   ========================================================================== */

/* Titres de section réutilisés (fond clair / fond sombre). */
.vh-h2 {
	font-size: var(--k-h2-m);
	margin: 0 0 10px;
}

.vh-lead {
	--lead-color: var(--k-soft);
	--lead-width: 74ch;
}

/* --- Héro résultat (dégradé vert « compatible ») ------------------------- */
/* Le H1 tient sur la même ligne que le logo de la marque, dans un bloc qui
   doit rester compact : c'est la seule raison de rabaisser sa borne haute. */
.vh-hero {
	background: radial-gradient(120% 130% at 84% 0%, var(--k-green-tint) 0%, var(--k-bg) 56%);
	--h1-max: 38px;
}

.vh-hero h1 {
	margin: 0;
}

.vh-hero-inner {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding-top: clamp(14px, 2vw, 20px);
}

/* Le bloc badge + H1 grandit et reste à côté du logo ; c'est le TEXTE du H1 qui
   replie, au lieu que tout le bloc bascule sous le logo. */
.vh-hero-text {
	flex: 1;
	min-width: 0;
}

.vh-brand-logo {
	width: 60px;
	height: 60px;
	border-radius: var(--k-r-card);
	background: #fff;
	border: 1px solid var(--k-border);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	overflow: hidden;
	box-shadow: 0 10px 22px -16px rgba(40, 30, 15, 0.5);
}

.vh-brand-logo img {
	max-height: 38px;
	max-width: 42px;
	width: auto;
	object-fit: contain;
}

.vh-badge {
	font-family: var(--k-font-title);
	gap: 7px;
	padding: 5px 12px;
	margin-bottom: 8px;
}

/* Véhicule dans le H1 : marque + modèle en orange, année en gris plus petit. */
.vh-hero h1 .vh-h1-mm { color: var(--k-orange); }
.vh-hero h1 .vh-h1-year {
	color: var(--k-faint);
	font-size: 0.62em;
	font-weight: 700;
}

/* Le chapô suit un bloc titre+logo : la respiration au-dessus lui est propre. */
.vh-hero-lead {
	margin-top: 18px;
	--lead-gap: 0;
	--lead-width: 62ch;
}

/* --- Cartes produit résultat --------------------------------------------- */
.vh-products-wrap {
	padding-top: clamp(28px, 4vw, 44px);
	padding-bottom: clamp(20px, 3vw, 32px);
}

.vh-products {
	--grid-min: 320px;
	--grid-gap: clamp(18px, 2.5vw, 24px);
	align-items: start;
}

/* Un seul boîtier compatible : la carte ne prend pas toute la largeur —
   colonne unique bornée, centrée. */
.vh-products--single {
	grid-template-columns: minmax(0, 620px);
	justify-content: center;
}

.vh-pcard {
	display: flex;
	flex-direction: column;
	--card-padding: clamp(22px, 3vw, 30px);
}

.vh-pcard--reco {
	border: 2px solid var(--k-orange);
	box-shadow: var(--k-shadow-orange-lg);
}

.vh-pcard-head {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 18px;
}

.vh-pcard-img {
	width: 108px;
	height: 108px;
	object-fit: contain;
	flex: none;
}

.vh-pcard-name {
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: 24px;
	letter-spacing: -0.02em;
	margin: 0 0 6px;
}

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

.vh-pcard-rating .kk-stars { --stars-size: 15px; }

/* Note chiffrée entre les étoiles et le nombre d'avis. */
.vh-pcard-note {
	font-size: var(--k-text-s);
	font-weight: 700;
	color: var(--k-nav);
}

.vh-pcard-nb {
	font-size: var(--k-text-s);
	color: var(--k-soft);
	font-weight: 600;
	text-decoration: none;
}

.vh-pcard-nb:hover,
.vh-pcard-nb:focus-visible{ text-decoration: underline; }

.vh-pcard-price {
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: 26px;
}

/* --- Encart voyants traités ---------------------------------------------- */
.vh-lights {
	background: var(--k-tile);
	border: 1px solid var(--k-border);
	border-radius: var(--k-r-card);
	padding: 16px;
	margin-bottom: 18px;
}

.vh-lights-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
}

.vh-lights-title {
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: var(--k-text-s);
	color: var(--k-nav);
}

.vh-lights-count {
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: var(--k-text-s);
	color: var(--k-warm-ink);
	background: var(--k-warm-tile);
	padding: 4px 10px;
	border-radius: 999px;
	white-space: nowrap;
}

.vh-lights-count--plus {
	color: var(--k-green-ink);
	background: var(--k-green-tint);
}

.vh-lights-grid {
	--grid-mode: auto-fill;
	--grid-min: 86px;
	--grid-gap: 10px;
}

.vh-light {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
}

.vh-light-tile {
	position: relative;
	width: 52px;
	height: 52px;
	border-radius: var(--k-r-tile);
	background: #fff;
	border: 1px solid var(--k-border);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
}

.vh-light-tile--extra {
	background: var(--k-green-tint);
	border: 1px solid #A9DCC0;
}

.vh-light-tile img {
	max-height: 34px;
	max-width: 34px;
	width: auto;
}

.vh-light-name {
	font-size: 10.5px;
	font-weight: 700;
	color: var(--k-muted);
	line-height: 1.2;
}

.vh-light-name--extra { color: var(--k-green-ink); }

/* Astérisque « adaptateur requis » : en orange pour rester visible sur le
   nom du voyant (gris), il renvoie à la note liée sous la grille. */
.vh-light-star { color: var(--k-orange-dark); }

/* Note « adaptateur requis » (passerelle Fiat/Alfa/Lancia) : sous la grille,
   liée à l'article blog. L'astérisque du voyant vidange y renvoie. */
.vh-lights-note {
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.35;
}

.vh-lights-note a {
	color: var(--k-orange-dark);
	font-weight: 600;
	text-decoration: underline;
}

/* --- Boutons de carte ---------------------------------------------------- */
.vh-pcard-foot {
	margin-top: auto;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* Le form d'ajout panier ne doit pas casser la rangée de boutons :
   display:contents fait participer son bouton au flex du pied. */
.vh-pcard-cart { display: contents; }

/* Boutons d'action = composant standard .kk-btn (identiques sur tout le site) ;
   ici ils se partagent la largeur du pied à parts égales. */
.vh-pcard-foot .kk-btn {
	flex: 1;
	min-width: 150px;
}

/* Mobile : les deux boutons l'un SOUS l'autre. Côte à côte, la carte reste assez
   large (≈310px) pour les garder sur une ligne, et « En savoir plus » /
   « Ajouter au panier » se coupaient alors sur deux lignes. */
@media (max-width: 560px) {
	.vh-pcard-foot { flex-direction: column; }
}

/* --- Tableau motorisations ----------------------------------------------- */
.vh-tech-band { margin-top: clamp(20px, 3vw, 32px); }

.vh-motor {
	display: block;
	font-family: var(--k-font-title);
	font-weight: 700;
	color: var(--k-charcoal);
}

.vh-proto {
	display: block;
	font-size: var(--k-text-s);
	color: var(--k-faint);
	margin-top: 2px;
}

/* --- FAQ (bande sombre) — l'accordéon vient du composant kk-faq (--dark). -- */
.vh-faq-band { background: var(--k-blue); }

.vh-faq-head {
	text-align: center;
	margin-bottom: clamp(26px, 4vw, 38px);
}

/* Le lead FAQ est centré (pas de max-width qui le calerait à gauche). */
.vh-faq-head .kk-band-lead {
	max-width: none;
	margin: 0;
}

/* Lien contextuel vers la page marque : présenté comme du texte (couleur du
   corps FAQ, sans soulignement) — crawlable mais discret, repris du legacy. */
.kk-faq-a a.vh-faq-plain { color: inherit; font-weight: inherit; text-decoration: none; }

/* --- Made in France ------------------------------------------------------ */
.vh-made {
	--grid-min: 280px;
	--grid-gap: clamp(24px, 4vw, 44px);
	align-items: center;
}

.vh-made-p {
	margin: 14px 0 0;
}

.vh-made .kk-badge--hero { margin-bottom: 0; }
.vh-made .vh-h2 {
	margin-top: 16px;
}

.vh-made-card {
	background: radial-gradient(120% 130% at 85% 0%, var(--k-blue-light) 0%, var(--k-blue) 60%);
	border-radius: var(--k-r-lg);
	padding: clamp(24px, 3vw, 32px);
	box-shadow: var(--k-shadow-drama);
}

.vh-made-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 22px;
}

.vh-made-title {
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: clamp(18px, 2.2vw, 22px);
	color: var(--k-dark-strong);
}

.vh-made-sub {
	font-size: var(--k-text-s);
	color: var(--k-faint);
	font-weight: 600;
	margin-top: 2px;
}

.vh-made-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

/* Petit format : le chiffre partage sa carte avec une icône. */
.vh-made-stat {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: var(--k-r-card);
	padding: 16px;
	--stat-min: 20px;
	--stat-max: 20px;
	--stat-l-size: 12px;
	--stat-l-color: var(--k-faint);
}

.vh-made-stat-ico { color: var(--k-orange); display: inline-flex; margin-bottom: 9px; }

.vh-made-foot {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: var(--k-text-m);
	font-weight: 700;
	color: var(--k-bg);
}

/* --- Chips « autres modèles » -------------------------------------------- */
.vh-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

.vh-chip {
	--chip-padding: 11px 16px;
	--chip-size: 13.5px;
}

.vh-chip svg { color: var(--k-gold); }

/* Mots-clés SEO discrets ajoutés aux ancres crawlables (tactique du
   propriétaire, reprise à l'identique du legacy) : couleur proche du fond,
   lisibles par les moteurs, quasi invisibles à l'écran. Risque de pénalité
   « texte caché » assumé côté propriétaire — NE PAS retirer sans validation.
   .vh-seo-kw : cellule tableau (fond blanc) ; override crème sur les chips. */
.vh-seo-kw { color: #fff; }
.vh-chip .vh-seo-kw { color: var(--k-hero-tint); }

.vh-chip:hover,
.vh-chip:focus-visible {
	border-color: var(--k-orange);
	background: var(--k-orange-tint);
	color: var(--k-orange-dark);
}

/* --- Tableau des motorisations -------------------------------------------
   Le style vient du composant kk-doc-tbl ; ici seulement ce qui est propre à
   ce tableau : largeurs de colonne, protocole sous le nom du moteur, lien
   obfusqué, et le masquage de la puissance en mobile.
   ------------------------------------------------------------------------ */

.vh-table th:first-child { width: 30%; }
.vh-table th:nth-child(2),
.vh-table th:nth-child(4) { width: 12%; }


/* Mobile : le tableau RESTE un tableau — colonnes resserrées, pas de cadre à
   défilement ni de repli en cartes. Tout doit tenir dans la largeur, quitte à
   comprimer : c'est ce que fait le site actuel.
   Trois leviers, dans cet ordre : la puissance saute, le libellé de protocole
   passe à la ligne sous la motorisation, et le corps de texte descend d'un
   cran. Le rembourrage des cellules se resserre en dernier. */
@media (max-width: 760px) {
	.vh-tech-band .kk-doc-scroll {
		overflow-x: visible;
	}

	.vh-table {
		min-width: 0;
		table-layout: fixed;
		width: 100%;
	}

	.vh-table th,
	.vh-table td {
		padding: 10px 8px;
		font-size: var(--k-text-s);
		word-break: break-word;
	}

	.vh-table thead th {
		font-size: var(--k-text-xs);
		padding: 8px;
	}

	/* La motorisation et son protocole s'empilent : c'est cette colonne qui
	   tirait toute la largeur. */
	.vh-motor,
	.vh-proto {
		display: block;
	}

	.vh-proto {
		font-size: var(--k-text-xs);
	}

	/* Largeurs explicites : sans elles, la colonne du lien impose la sienne. */
	.vh-table th:first-child { width: 38%; }
	.vh-table th:nth-child(2) { width: 16%; }
	.vh-table th:nth-child(3) { width: 20%; }
	.vh-table th:nth-child(5) { width: 26%; }

	.vh-table th:nth-child(4),
	.vh-table .vh-power {
		display: none;
	}

	/* .kk-inline-link tient sur une ligne par défaut — utile dans un
	   paragraphe, fatal dans une colonne de 90px : le libellé débordait la
	   cellule alors que le tableau, lui, tenait dans la largeur. */
	.vh-table .kk-inline-link,
	.vh-table .vh-tr-btn {
		white-space: normal;
		text-align: left;
	}
}

/* --- Voyant non compatible (/non-compatible-voyant/…) ---------------------
   Maquette « Voyant non compatible ». La page réutilise la grille de voyants
   ci-dessus (.vh-lights-grid, .vh-light*) : seuls le héro, la mise en colonnes
   et les deux listes propres à cette page sont définis ici. */

.vy-hero {
	background: radial-gradient(120% 130% at 86% 0%, var(--k-red-tint) 0%, var(--k-bg) 58%);
	border-bottom: 1px solid var(--k-border);
	padding: clamp(22px, 3vw, 32px) 0 clamp(28px, 4vw, 46px);
}

.vy-hero-head {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin: 22px 0 18px;
}

/* Pastille du logo de marque — même traitement que le héro des pages marque. */
.vy-brand {
	flex: none;
	width: 60px;
	height: 60px;
	border-radius: 15px;
	background: var(--k-card);
	border: 1px solid var(--k-border);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.vy-brand img {
	max-height: 38px;
	max-width: 42px;
	width: auto;
	object-fit: contain;
}

.vy-hero-title {
	flex: 1;
	min-width: 260px;
}

/* Le véhicule passe SOUS le nom du voyant : c'est le voyant qui titre. */
.vy-h1-sub {
	display: block;
	font-size: 0.62em;
	color: var(--k-soft);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-top: 6px;
}

.vy-lead {
	max-width: 66ch;
	margin: 0;
}

/* Colonnes inégales : la liste des voyants a besoin de plus de large que le
   bloc d'explication. Repasse en une colonne avant que la grille de voyants
   ne se tasse. */
.vy-two {
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr);
	align-items: start;
}

@media (max-width: 900px) {
	.vy-two {
		grid-template-columns: minmax(0, 1fr);
	}
}

.vy-card-head {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-bottom: 6px;
}

.vy-card-head h2,
.vy-why h2 {
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: 19px;
	letter-spacing: -0.01em;
	margin: 0;
}

.vy-card-lead {
	font-size: var(--k-text-m);
	line-height: 1.6;
	color: var(--k-soft);
	margin: 0 0 18px;
}

.vy-covered {
	margin-bottom: 18px;
}

.vy-light-tile {
	background: var(--k-green-tint);
	border-color: var(--k-green-border);
}

.vy-not {
	background: var(--k-tile);
	border: 1px solid var(--k-border);
	border-radius: 16px;
	padding: 16px 18px;
	margin-bottom: 18px;
}

.vy-not-title {
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: var(--k-text-s);
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--k-soft);
	margin: 0 0 11px;
}

.vy-not-list {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.vy-not-row {
	display: flex;
	align-items: center;
	gap: 11px;
}

.vy-not-dash {
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: var(--k-card);
	border: 1px solid var(--k-border-warm);
	color: var(--k-faint);
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vy-not-name {
	flex: 1;
	min-width: 0;
	font-size: var(--k-text-m);
	font-weight: 600;
	color: var(--k-faint);
}

/* La ligne du voyant recherché est la seule en encre pleine : c'est elle que
   le visiteur vient lire. */
.vy-not-row.is-current .vy-not-name {
	color: var(--k-charcoal);
}

/* Reprend kk-badge--danger : seules la mise en majuscules et la compacité
   propres à cette liste sont ajoutées. */
.vy-not-flag {
	flex: none;
	font-size: var(--k-text-xs);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 3px 9px;
}

.vy-why {
	background: var(--k-bg-alt);
}

.vy-why-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.vy-why-row {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.vy-why-t {
	display: block;
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: var(--k-text-m);
	margin-bottom: 3px;
}

.vy-why-d {
	display: block;
	font-size: var(--k-text-s);
	line-height: 1.6;
	color: var(--k-muted);
}