/* ==========================================================================
   Page hub « Emplacement de la prise OBD » — SPÉCIFIQUE.
   Réutilise kk-narrow, kk-band-dark, kk-crumb, kk-head,
   kk-on-dark, kk-cta-band (components.css), le composant vidéo ET le wizard
   compat (wizard.css) pour le sélecteur marque/modèle. On ne définit ici QUE
   le propre à la page : cadrage du sélecteur, grille des marques, carte
   appli. Toutes les sections prennent la largeur du site (--container) : la page
   n'a plus cinq mesures différentes.
   ========================================================================== */

/* --- Sélecteur (carte du héro) : composant wizard-compat partagé ----------- */
.cn-wizard-wrap {
	max-width: 580px;
	margin: 26px auto 0;
	text-align: left;
}

/* Les résultats du sélecteur connecteur sont des LIENS (pages d'emplacement),
   pas des boutons comme dans le wizard compat : reset du style natif. */
a.wizard-compat__result {
	text-decoration: none;
	color: inherit;
}

/* --- Vidéo ----------------------------------------------------------------- */
.cn-video {
	padding-top: clamp(34px, 5vw, 56px);
	padding-bottom: clamp(20px, 3vw, 28px);
}

/* --- Toutes les marques ----------------------------------------------------- */
.cn-brands {
	max-width: var(--container);
	padding-top: clamp(34px, 5vw, 56px);
	padding-bottom: clamp(20px, 3vw, 28px);
}

/* Ici le compteur s'aligne sur la ligne de base du titre, pas sur son pied. */
.cn-brands-head { align-items: baseline; }

.cn-brands-head h2 {
	font-size: var(--k-h2-m);
	margin: 0;
}

.cn-brands-count { font-size: var(--k-text-m); font-weight: 700; color: var(--k-faint); }

/* Le pavage de marques est le composant kk-brand-grid / kk-brand-tile. */

/* --- Carte appli ------------------------------------------------------------ */
.cn-app-wrap {
	padding-top: clamp(34px, 5vw, 56px);
	padding-bottom: clamp(20px, 3vw, 28px);
}

.cn-app {
	--card-padding: clamp(24px, 3vw, 36px);
	display: flex;
	align-items: center;
	gap: clamp(18px, 3vw, 32px);
	flex-wrap: wrap;
}

.cn-app-ico {
	width: 84px;
	height: 84px;
	border-radius: var(--k-r-lg);
	flex: none;
	box-shadow: 0 12px 24px -12px rgba(40, 30, 15, 0.4);
}

.cn-app-text { flex: 1; min-width: 220px; }

.cn-app-text h2 {
	font-size: var(--k-h2-xs);
	margin: 0 0 6px;
}

.cn-app-text p {
	font-size: var(--k-text-l);
	line-height: 1.55;
	color: var(--k-muted);
	margin: 0;
}

.cn-app-stores { display: flex; gap: 10px; flex-wrap: wrap; }
.cn-app-stores img { height: 44px; width: auto; }
/* Badges obfusqués (pages marque et véhicule) : <button> sans habillage. */
.cn-app-stores button { background: none; border: 0; padding: 0; cursor: pointer; line-height: 0; }

/* --- CTA final --------------------------------------------------------------- */
.cn-cta-wrap { padding-top: clamp(10px, 2vw, 20px); }

/* ==========================================================================
   Page MARQUE (/emplacement-prise-connecteur-obd/{marque}) — cnb-*.
   Réutilise lc-hero (licence.css), kk-notice, kk-crumb, kk-badge,
   kk-btn, kk-search, cn-brand-grid/-card, cn-app-ico/-stores (ci-dessus).
   Largeur : celle du site (--container). Le champ de recherche vient de la
   maquette (blanc bordé), le reste des composants existants.
   ========================================================================== */

.cnb-hero-inner {
	padding-top: clamp(24px, 4vw, 44px);
	padding-bottom: clamp(28px, 4vw, 44px);
}

.cnb-brand-row {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.cnb-brand-logo {
	--tile-size: 58px;
	--tile-radius: var(--k-r-card);
	--tile-bg: #fff;
	border: 1px solid var(--k-border);
	box-shadow: var(--k-shadow-card);
}

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

.cnb-p {
	--lead-gap: 14px;
	--lead-width: 62ch;
}

.cnb-p2 {
	font-size: var(--k-text-l);
	line-height: var(--k-lh);
	color: var(--k-soft);
	margin: 0 0 24px;
	max-width: 62ch;
}

/* --- Grille des modèles ---------------------------------------------------- */
.cnb-models {
	padding-top: clamp(36px, 5vw, 60px);
	padding-bottom: clamp(36px, 5vw, 60px);
}

.cnb-models-head h2 {
	font-size: var(--k-h2-l);
	margin: 0 0 7px;
}

.cnb-models-count {
	font-size: var(--k-text-l);
	color: var(--k-soft);
	margin: 0;
}
.cnb-models-count strong { color: var(--k-nav); }

/* Filtre des modèles : variante blanche du composant .kk-search (maquette). */
.cnb-filter-wrap {
	--search-bg: #fff;
	min-width: min(260px, 100%);
}

.cnb-model-grid {
	--grid-mode: auto-fill;
	--grid-min: 206px;
	--grid-gap: 11px;
}

.cnb-model {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: #fff;
	border: 1px solid var(--k-border);
	border-radius: var(--k-r-tile);
	padding: 13px 15px;
	text-decoration: none;
	cursor: pointer;
	text-align: left;
	transition: border-color .14s, transform .14s;
}

.cnb-model:hover,
.cnb-model:focus-visible {
	border-color: var(--k-orange);
	transform: translateY(-2px);
}

.cnb-model-txt {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cnb-model-name {
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: var(--k-text-l);
	color: var(--k-charcoal);
	line-height: 1.2;
}

.cnb-model-years {
	font-size: var(--k-text-s);
	font-weight: 600;
	color: var(--k-soft);
}

.cnb-model-arrow { color: var(--k-gold); font-weight: 700; font-size: var(--k-text-l); flex: none; }

/* État vide du filtre. */
.cnb-empty {
	--empty-padding: 34px 12px;
	margin-top: 12px;
}

.cnb-empty-t {
	font-size: var(--k-text-l);
	font-weight: 700;
	color: var(--k-nav);
	margin: 0 0 6px;
}

.cnb-empty p:last-child {
	font-size: var(--k-text-m);
	color: var(--k-soft);
	margin: 0;
}

/* Encadré conseil : kk-notice--warm, juste l’espacement. */
.cnb-tip { margin-top: 22px; }

/* --- Bande appli (sombre, pleine largeur — même radial que les bandes
   marine du site) ---------------------------------------------------------- */
.cnb-app {
	padding-top: clamp(28px, 4vw, 48px);
	padding-bottom: clamp(28px, 4vw, 48px);
	display: flex;
	align-items: center;
	gap: clamp(18px, 3vw, 32px);
	flex-wrap: wrap;
}

.cnb-app-text { flex: 1; min-width: 220px; }

.cnb-app-text .cnb-app-h {
	font-size: var(--k-h2-xs);
	margin: 0 0 6px;
	color: var(--k-dark-strong);
	font-weight: 800;
}

.cnb-app-text p {
	font-size: var(--k-text-l);
	line-height: 1.55;
	color: var(--k-dark-body);
	margin: 0;
}

/* --- Autres marques du même pays -------------------------------------------- */
.cnb-others {
	padding-top: clamp(36px, 5vw, 60px);
	padding-bottom: clamp(36px, 5vw, 60px);
}

.cnb-others h2 {
	font-size: var(--k-h2-s);
	margin: 0 0 6px;
}

.cnb-others-lead {
	--lead-color: var(--k-soft);
	--lead-gap: clamp(18px, 2.5vw, 24px);
	--lead-width: none;
}

/* ==========================================================================
   Page VÉHICULE (/emplacement-prise-connecteur-obd/{marque}-{modele}) — cnv-*.
   Réutilise lc-hero (licence.css), kk-notice, kk-crumb, kk-btn, kk-head,
   kk-band-alt, kk-band-dark, le composant vidéo et cnb-app (ci-dessus).
   Largeur : celle du site (--container) pour toutes les sections.
   ========================================================================== */

.cnv-hero-inner {
	padding-top: clamp(24px, 4vw, 44px);
	padding-bottom: clamp(28px, 4vw, 44px);
}

.cnv-hero-inner h1 .cnv-years {
	color: var(--k-faint);
	font-weight: 700;
	font-size: 0.62em;
	white-space: nowrap;
}

.cnv-lead { --lead-gap: clamp(30px, 3.5vw, 40px); }

/* --- Étapes photo ----------------------------------------------------------- */
.cnv-steps {
	padding-top: clamp(40px, 5vw, 68px);
	padding-bottom: clamp(40px, 5vw, 68px);
}

.cnv-step-grid {
	--grid-gap: clamp(16px, 2.5vw, 24px);
}

.cnv-step {
	--card-padding: 0;
	overflow: hidden;
}

.cnv-step-photo {
	display: block;
	position: relative;
}

.cnv-step-photo img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	background: var(--k-bg-alt);
}

.cnv-step-n {
	position: absolute;
	top: 14px;
	left: 14px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--k-orange);
	color: #fff;
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: var(--k-text-xl);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--k-shadow-orange-sm);
}

.cnv-step-n--ok {
	background: var(--k-green);
	box-shadow: 0 6px 14px -6px rgba(46, 158, 106, 0.8);
}

.cnv-step-body { padding: 18px 20px; }

.cnv-step-body p {
	font-size: var(--k-text-l);
	line-height: 1.5;
	color: var(--k-body);
	margin: 0;
	font-weight: 600;
}

.cnv-credit {
	font-size: var(--k-text-s);
	color: var(--k-faint);
	margin: 16px 0 0;
	text-align: center;
}
.cnv-credit strong { color: var(--k-nav); }

.cnv-video { margin-top: clamp(28px, 4vw, 40px); }

/* --- Quoi de nouveau -------------------------------------------------------- */
.cnv-intro {
	padding-top: clamp(36px, 5vw, 56px);
	padding-bottom: clamp(10px, 2vw, 20px);
}

.cnv-intro h2 {
	font-size: var(--k-h2-m);
	margin: 0 0 16px;
}

.cnv-intro p {
	margin: 0;
	white-space: pre-line;
}

/* --- Wizard compat (bande alternée) ----------------------------------------- */
.cnv-wizard {
	padding-top: clamp(40px, 5vw, 64px);
	padding-bottom: clamp(40px, 5vw, 64px);
}

/* --- Autres modèles (chips du tourniquet) ------------------------------------ */
.cnv-others {
	padding-top: clamp(36px, 5vw, 60px);
	padding-bottom: clamp(36px, 5vw, 60px);
}

.cnv-others h2 {
	font-size: var(--k-h2-s);
	margin: 0 0 16px;
}

.cnv-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Réglages repris de licence.css plutôt qu'empruntés : les trois pages du
   connecteur étaient la dernière raison de charger cette feuille hors licence. */
/* Commune aux héros connecteur (véhicule + marque). Ne fixe PAS --lead-gap :
   chaque page pilote son propre espace lead → boutons via sa classe (.cnv-lead,
   .cnb-p). Le forcer à 0 ici l'écrasait (cette règle est plus bas dans le
   fichier, donc l'emportait à spécificité égale). */
.cn-lead { --lead-width: 60ch; }

.cn-how {
	margin-top: clamp(28px, 4vw, 44px);
}

.cn-how-inner {
	--narrow-max: 880px;
	padding-top: clamp(40px, 5vw, 64px);
	padding-bottom: clamp(40px, 5vw, 64px);
}

/* Texte de la bande foncée (norme OBD). Les <h2>/<p> nus ne consomment pas les
   tokens d'encre sur fond sombre (--card-t-color / --card-p-color posés par
   .kk-on-dark, qui n'agissent que sur .kk-card-t/.kk-card-p) : sans cette règle,
   ils restent en encre sombre, illisibles sur le marine. */
.cn-how-inner h2,
.cnb-app h2 { color: var(--card-t-color); }
.cn-how-inner p,
.cnb-app p { color: var(--card-p-color); }