/* ==========================================================================
   Composants partagés — briques réutilisées par toutes les pages.
   Chaque page ne doit définir QUE ce qui lui est propre.

   Les variantes se règlent par variables CSS locales (--btn-*, --card-*)
   plutôt qu'en redéclarant le composant : une page ajuste un rayon ou une
   ombre en une ligne, sans dupliquer la règle.
   ========================================================================== */

/* --- Réglages des composants ---------------------------------------------
   Ces variables sont l'API des composants : une page en pose une pour ajuster
   un composant sans le redéclarer. Leurs valeurs par défaut vivent ICI et non
   dans un repli au point d'usage — sinon le défaut est recopié à chaque
   utilisation, et l'éditeur ne peut pas dire quels réglages existent.
   ------------------------------------------------------------------------ */

:root {
	/* Héro */
	--hero-pt: clamp(28px, 4vw, 48px);
	--hero-pb: clamp(28px, 4vw, 48px);

	/* Titres */
	--h1-max: 46px;
	--head-gap: clamp(18px, 2.5vw, 26px);     /* .kk-section-head */
	--head-mb: clamp(30px, 4vw, 48px);        /* .kk-head */
	--head-sh-gap: 18px;                      /* écart des deux blocs */

	/* Chapô */
	--lead-width: 56ch;
	--lead-gap: 22px;
	--lead-color: var(--k-nav);

	/* Boutons */
	--btn-size: 16px;
	--btn-padding: 15px 26px;
	--btn-radius: 14px;
	--btn-gap: 9px;
	--btn-shadow: var(--k-shadow-orange);

	/* Cartes */
	--card-radius: var(--k-r-lg);
	--card-padding: clamp(24px, 3vw, 32px);
	--card-shadow: var(--k-shadow-card);
	--card-t-size: var(--k-h3-m);
	--card-t-gap: 8px;
	--card-t-color: var(--k-charcoal);
	--card-p-size: var(--k-text-l);
	--card-p-color: var(--k-muted);
	--card-p-gap: 0;

	/* Pastilles d'icône */
	--tile-size: 46px;
	--tile-radius: var(--k-r-tile);
	--tile-bg: var(--k-orange-tint);
	--tile-color: var(--k-orange);

	/* Listes */
	--list-gap: 10px;

	/* Carte produit */
	--prod-min: 280px;
	--prod-img-h: 150px;
	--price-size: 28px;
	--more-size: 14px;
	--more-top: 0;
	--stars-size: 16px;

	/* Chiffres-clés */
	--stat-min: 28px;
	--stat-max: 42px;
	--stat-color: var(--k-dark-strong);
	--stat-l-size: 12.5px;
	--stat-l-weight: 600;
	--stat-l-color: var(--k-dark-lead);

	/* Réassurance */
	--reassure-min: 150px;
	--reassure-gap: 14px;
	--reassure-size: 13px;
	--reassure-bg: #fff;
	--reassure-border: var(--k-border);

	/* Champ de recherche */
	--search-bg: var(--k-bg);
	--search-gap: 10px;
	--search-padding: 0 14px;
	--search-border: 1px solid var(--k-border);
	--search-ico: var(--k-nav);
	--search-input-padding: 12px 0;
	--search-input-size: var(--k-text-l);
	--search-input-weight: 600;
	--search-input-family: inherit;

	/* Divers */
	--chip-padding: 12px 18px;
	--chip-size: 14px;
	--aside-cta-gap: 20px;
	--video-max: 950px;
}

/* --- Conteneur et sections ----------------------------------------------- */

.kk-container {
	max-width: var(--container);
	margin: 0 auto;
	padding-left: clamp(16px, 4vw, 40px);
	padding-right: clamp(16px, 4vw, 40px);
}

.kk-section {
	padding-top: clamp(44px, 6vw, 78px);
	padding-bottom: clamp(44px, 6vw, 78px);
}

/* En-tête de section : sur-titre + titre + accroche, centré. */
/* Réservé aux lecteurs d'écran : retiré du flux sans être masqué pour eux
   (display:none et visibility:hidden les rendraient muets). */
.kk-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.kk-head {
	text-align: center;
	margin-bottom: var(--head-mb);
}

/* Certaines sections des maquettes alignent leur en-tête à GAUCHE (avis,
   déballage vidéo, FAQ de la page produit) : même bloc, autre alignement. */
.kk-head--left {
	text-align: left;
}

.kk-eyebrow {
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: var(--k-text-s);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--k-blue-light);
	margin-bottom: 12px;
}

.kk-head h2 {
	font-size: var(--k-h2-xl);
	margin: 0 0 10px;
}

.kk-head p {
	font-size: var(--k-text-xl);
	color: var(--k-soft);
	margin: 0;
}

/* --- Héro de page --------------------------------------------------------
   UN seul dégradé et UNE seule taille de H1 pour tout le site. Chaque page
   avait le sien : 17 dégradés quasi identiques (le point de fuite variait de
   82% à 88%, la fin entre 56% et 63%) et 20 tailles de titre entre 38 et
   58px. Les documents légaux font exception : ils n'ont pas de héro.
   Une page ne redéfinit QUE sa mise en page interne (grille, colonnes). */

.kk-hero {
	background: radial-gradient(120% 130% at 84% 0%, var(--k-hero-tint) 0%, var(--k-bg) 60%);
}

.kk-hero .kk-crumb {
	margin-bottom: clamp(18px, 2.4vw, 26px);
}

/* Rythme vertical du héro. Quinze pages écrivaient chacune leur enveloppe, pour
   quatorze valeurs différentes — deux paires étaient même identiques au
   caractère près, donc déjà recopiées.
   Le relevé sur les onze héros à rembourrage seul dit deux choses opposées :
   le BAS se tient (neuf pages à moins de 6px les unes des autres), le HAUT
   non — de 20 à 68px selon qu'un fil d'Ariane précède le titre ou non. Le
   défaut couvre donc le bas ; le haut se règle par --hero-pt, en une ligne,
   et l'écart devient lisible au lieu d'être noyé dans un clamp recopié.
   Le rembourrage HORIZONTAL n'est pas ici : il vient de .kk-container. */
.kk-hero-inner {
	padding-top: var(--hero-pt);
	padding-bottom: var(--hero-pb);
}

/* UN SEUL H1 pour tout le site. `.kk-hero h1` couvre les pages dont le héro
   porte la classe commune ; `.kk-h1` sert aux titres qui vivent ailleurs (héros
   propres aux pages compatibilité et prise OBD, colonne d'achat, page 404).
   Dix-huit feuilles redéclaraient ce bloc avec un clamp légèrement différent :
   la borne haute est désormais la seule chose qu'une page puisse ajuster, via
   --h1-max, et seulement quand la place l'impose. */
.kk-hero h1,
.kk-h1 {
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: clamp(29px, 4.4vw, var(--h1-max));
	letter-spacing: -0.03em;
	line-height: 1.25;
	margin: 0 0 14px;
}

/* Fragment orange du H1. Chaque titre du site en porte un : c'est la marque
   visuelle de la refonte, et ça donne un point d'accroche à la lecture. */
.kk-hl {
	color: var(--k-orange);
}

/* Héro à deux colonnes : texte à gauche, illustration ou outil à droite.
   Trois pages (codes défauts, interface ELM327, présentation OBD) avaient la
   même grille à trois détails près — ratio des colonnes et point de rupture.
   Une seule définition, un seul point de rupture. */
.kk-hero-cols {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(24px, 3.5vw, 48px);
	align-items: center;
}

@media (max-width: 980px) {
	.kk-hero-cols {
		grid-template-columns: 1fr;
	}
}

/* --- Chapô ---------------------------------------------------------------
   Le paragraphe d'introduction, sous un H1 ou un titre de section. Seize
   feuilles en avaient leur version : même intention, mais huit tailles, cinq
   hauteurs de ligne et neuf mesures. Une page ne règle plus que la mesure
   (--lead-width), l'espace en dessous (--lead-gap) et, rarement, l'encre
   (--lead-color).
   ------------------------------------------------------------------------ */

.kk-lead {
	font-size: clamp(16px, 1.7vw, 18px);
	line-height: var(--k-lh);
	color: var(--lead-color);
	margin: 0 0 var(--lead-gap);
	max-width: var(--lead-width);
}

.kk-lead strong {
	color: var(--k-charcoal);
}

/* Chapô centré : pages sans colonne (contact, équipe, comparatif). */
.kk-lead--center {
	margin-left: auto;
	margin-right: auto;
}

/* Chapô de section : plus petit que celui d'un héro. Cinq feuilles avaient le
   leur (présentation des familles de codes, sous-titres « qui sommes-nous »,
   autres modèles, colonne d'achat, intro véhicule), entre 14.5 et 15.5px. */
.kk-lead--sm {
	font-size: var(--k-text-xl);
	line-height: var(--k-lh);
}

/* Seconde ligne de chapô : plus petite et plus claire que la première.
   Elle ne porte PAS la classe de page, sinon la mesure et l'espace de la
   première ligne l'emporteraient (même spécificité, feuille chargée après). */
.kk-lead--sub {
	font-size: var(--k-text-l);
	--lead-color: var(--k-soft);
	--lead-gap: 22px;
}

/* --- Boutons -------------------------------------------------------------- */

.kk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--btn-gap);
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: var(--btn-size);
	padding: var(--btn-padding);
	border-radius: var(--btn-radius);
	border: 0;
	text-decoration: none;
	cursor: pointer;
	transition: background .14s, border-color .14s, color .14s;
}

.kk-btn--primary {
	background: var(--k-orange);
	color: #fff;
	box-shadow: var(--btn-shadow);
}

.kk-btn--primary:hover,
.kk-btn--primary:focus-visible {
	background: var(--k-orange-hover);
}

/* Secondaire : sur fond clair. */
.kk-btn--secondary {
	background: #fff;
	color: var(--k-charcoal);
	border: 1px solid var(--k-border-warm);
}

.kk-btn--secondary:hover,
.kk-btn--secondary:focus-visible {
	border-color: var(--k-orange);
}

/* Fantôme : sur fond sombre. */
.kk-btn--ghost {
	background: transparent;
	color: var(--k-dark-strong);
	border: 1px solid rgba(246, 238, 226, 0.35);
}

.kk-btn--ghost:hover,
.kk-btn--ghost:focus-visible {
	border-color: var(--k-orange);
}

/* Format compact (bandes sombres, CTA secondaires). */
.kk-btn--sm {
	--btn-size: 15px;
	--btn-radius: 13px;
	--btn-padding: 14px 26px;
}

/* --- Liste empilée sans puces ---------------------------------------------
   Le squelette que huit feuilles réécrivaient à l'identique. Le style des
   items reste à la page : l'icône de tête, l'encre et la graisse varient
   réellement d'une liste à l'autre, contrairement au conteneur.
   ------------------------------------------------------------------------ */

.kk-list {
	display: flex;
	flex-direction: column;
	gap: var(--list-gap);
}

/* --- En-tête de section à deux blocs ---------------------------------------
   Titre à gauche, compteur ou outil à droite, alignés sur leur ligne de base
   basse et repliés en colonne quand la place manque. Cinq pages en avaient
   leur copie, cinq marges basses différentes entre 22 et 28px : une seule
   désormais, ajustable par --head-gap.
   ------------------------------------------------------------------------ */

.kk-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--head-sh-gap);
	flex-wrap: wrap;
	margin-bottom: var(--head-gap);
}

/* --- Cartes --------------------------------------------------------------- */

.kk-card {
	background: #fff;
	border: 1px solid var(--k-border);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	padding: var(--card-padding);
}

/* Survol « soulevé » (maquette : .hov-lift). */
.kk-card--lift {
	transition: transform .16s, box-shadow .16s, border-color .16s;
}

.kk-card--lift:hover,
.kk-card--lift:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--k-shadow-lift);
	border-color: var(--k-border-warm);
}

/* Libellé d'une carte : le titre court qui suit la pastille dans une vignette.
   Ce n'est PAS un niveau de plan — une vignette d'étape, une règle de
   compatibilité ou un domaine d'expertise ne structurent pas le document, ils
   l'illustrent. Ils étaient en <h3>, ce qui gonflait le plan de la page d'une
   dizaine de faux niveaux ; ils sont désormais des <p>, et gardent leur
   apparence grâce à cette règle. Règle du projet : un Hn structure, il ne met
   pas en forme. */
.kk-card-t {
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: var(--card-t-size);
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--card-t-color);
	margin: 0 0 var(--card-t-gap);
}

/* Texte descriptif d'une carte : le paragraphe qui suit le titre dans une
   vignette à pastille (étapes de l'accueil, règles de compatibilité, domaines
   d'expertise, atouts du recrutement). Quatre feuilles en avaient la copie
   exacte, aux quatre déclarations près.
   Il n'est PAS posé sur `.kk-card p` : une carte peut contenir plusieurs
   paragraphes de rôles différents (titre en <p>, note, prix), et le socle ne
   doit pas décider pour eux. */
.kk-card-p {
	font-size: var(--card-p-size);
	line-height: var(--k-lh);
	color: var(--card-p-color);
	margin: 0 0 var(--card-p-gap);
}

/* Même contraste renforcé que dans un chapô : le gras se détache du texte
   atténué au lieu d'en prendre la couleur. */
.kk-card-p strong {
	color: var(--k-charcoal);
}

/* Carte sur fond sombre (bandes charcoal / bleues). */
.kk-card--dark {
	background: var(--k-dark-surface);
	border: 1px solid var(--k-dark-line);
	box-shadow: none;
	--card-radius: var(--k-r-card);
	--card-padding: clamp(20px, 2.5vw, 26px);
}

/* --- Pastilles d'icône ---------------------------------------------------- */

.kk-icotile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: var(--tile-size);
	height: var(--tile-size);
	border-radius: var(--tile-radius);
	background: var(--tile-bg);
	color: var(--tile-color);
}

/* Sur fond sombre. */
.kk-icotile--dark {
	--tile-bg: rgba(242, 150, 68, 0.16);
	--tile-color: var(--k-orange-glow);
	--tile-size: 42px;
	--tile-radius: var(--k-r-tile);
}

/* --- Badges et pastilles de texte ---------------------------------------- */

.kk-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: 999px;
	font-weight: 700;
	font-size: var(--k-text-s);
	padding: 7px 14px;
}

/* Badge de héro : pastille blanche bordée, en tête de page. */
.kk-badge--hero {
	/* Respiration avant le H1, comme la maquette. */
	margin-bottom: 16px;
	background: #fff;
	border: 1px solid var(--k-border-warm);
	color: var(--k-orange-dark);
}

/* Badge teinté : fond orange clair et encre orange (badge « fabriqué en
   Bretagne » de la page produit, badge « témoignage client » de la boutique). */
.kk-badge--tint {
	background: var(--k-orange-tint);
	color: var(--k-orange-dark);
}

/* Badge plein orange : mise en avant forte sur une carte produit
   (« le plus complet »). */
.kk-badge--accent {
	background: var(--k-orange);
	color: #fff;
	font-family: var(--k-font-title);
	font-size: var(--k-text-xs);
	padding: 5px 11px;
}

/* --- Champ de recherche --------------------------------------------------- */

/* Boîte « icône + saisie nue » : la bordure et le fond sont portés par
   l'enveloppe, l'input est dépouillé pour se fondre dedans. Quatre emplacements
   la reprenaient à l'identique (marques de connecteur, recherche de code
   défaut, filtre de la liste, sélecteur de compatibilité).
   Structure : .kk-search > .kk-search-ico + <input> [+ bouton d'effacement].
   Le focus est signalé sur l'ENVELOPPE (:focus-within), l'input n'ayant plus
   de bordure propre à colorer. */
.kk-search {
	display: flex;
	align-items: center;
	gap: var(--search-gap);
	background: var(--search-bg);
	border: var(--search-border);
	border-radius: var(--k-r-tile);
	padding: var(--search-padding);
	transition: border-color .14s;
}

.kk-search:focus-within {
	border-color: var(--k-orange);
}

.kk-search-ico {
	color: var(--search-ico);
	display: inline-flex;
	flex: none;
}

/* min-width: 0 est indispensable : sans lui, la largeur minimale intrinsèque
   d'un input (une vingtaine de caractères) empêche la boîte de rétrécir. */
.kk-search input {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	padding: var(--search-input-padding);
	font-family: var(--search-input-family);
	font-size: var(--search-input-size);
	font-weight: var(--search-input-weight);
	color: var(--k-charcoal);
}

/* Badge « label » posé sur une carte produit. */
/* Pilule blanche bordée : compteur de résultats, chip de sélection. Deux
   pages la refaisaient (.em-count, .eng-chip). */
.kk-badge--outline {
	background: #fff;
	border: 1px solid var(--k-border);
	color: var(--k-body);
}

/* Ton vert : compatibilité confirmée, vérification réussie. Même vocabulaire
   que kk-notice--success et kk-icotile--success. */
.kk-badge--success {
	background: var(--k-green-tint);
	border: 1px solid var(--k-green-border);
	color: var(--k-green-ink);
}

/* Statut négatif (commande annulée, remboursée…). */
.kk-badge--danger {
	background: var(--k-red-tint);
	border: 1px solid #F2C4BC;
	color: var(--k-red-ink);
}

.kk-badge--label {
	font-family: var(--k-font-title);
	font-size: var(--k-text-xs);
	padding: 5px 11px;
	background: var(--k-border);
	color: #6B5A42;
}

/* --- Bande CTA sombre (fin de page) --------------------------------------
   Motif partagé : « Reprenez la main… » (home) et « Un doute sur votre
   véhicule ? » (compatibilité) sont le MÊME composant. */

.kk-cta-wrap {
	padding-top: clamp(40px, 5vw, 64px);
	padding-bottom: clamp(40px, 5vw, 64px);
}

.kk-cta-band {
	background: var(--k-gradient-dark);
	border-radius: var(--k-r-lg);
	padding: clamp(30px, 4vw, 52px);
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
}

/* Le titre du CTA est tantôt un <h2>, tantôt un <p class="kk-cta-h"> quand
   l'accroche n'est pas un niveau de plan (études de cas, présentation OBD).
   La famille et la graisse sont posées ICI et pas héritées de la règle
   h1,h2,h3 de base.css : celle-ci ne touche pas un <p>, et les trois pages
   concernées affichaient donc leur titre en Mulish 400 au lieu de Hanken 800. */
.kk-cta-band h2,
.kk-cta-band .kk-cta-h {
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: var(--k-h2-l);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--k-dark-strong);
	margin: 0 0 10px;
}

/* Variante « deux colonnes » : texte à gauche, illustration à droite. C'est le
   bloc « qui sommes-nous » de bas de page, qui était un composant à part
   (.sh-about) alors qu'il ne différait du CTA que par trois détails — le
   rembourrage, la gouttière, et la couleur du paragraphe. */
.kk-cta-band--split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.kk-cta-band--split img {
	display: block;
	width: 100%;
	max-width: 420px;
	height: auto;
	margin: 0 auto;
	border-radius: var(--k-r-lg);
}

/* Colonne de texte du CTA. Elle accueille le titre, le ou les paragraphes, et
   — quand la bande porte une illustration — les boutons eux-mêmes.
   flex + min-width : sans eux, l'illustration écrase la colonne de texte sous
   son contenu minimal dès que la place manque. */
.kk-cta-text {
	flex: 1;
	min-width: min(280px, 100%);
	max-width: 48ch;
}

/* Boutons posés SOUS le texte (bande avec illustration) plutôt qu'en colonne
   voisine. Trois pages écrivaient chacune leur .xxx-cta-btns avec un écart
   différent : l'écart vit ici. */
.kk-cta-text .kk-btns {
	margin-top: 20px;
}

/* Illustration du CTA : le boîtier détouré, deuxième colonne de la bande. */
.kk-cta-img {
	width: min(100%, 260px);
	height: auto;
	margin-left: auto;
	filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.4));
}

@media (max-width: 700px) {
	.kk-cta-img {
		margin: 0 auto;
		width: min(100%, 210px);
	}
}

.kk-cta-text p,
.kk-cta-band > div p {
	font-size: var(--k-text-xl);
	line-height: var(--k-lh);
	color: var(--k-dark-muted);
	margin: 0;
	max-width: 48ch;
}

/* L'ombre orange du bouton primaire fait halo sur du marine. Elle est neutre
   sur tout conteneur sombre — et posée sur le CONTENEUR, pas sur le bouton :
   ainsi elle vaut pour n'importe quel bouton qu'il accueille, y compris ceux
   qu'on y ajoutera. Le CTA latéral des pages documentaires l'avait manquée,
   parce que la règle visait .kk-cta-band .kk-btn--primary. */
.kk-cta-band,
.kk-aside-cta,
.kk-on-dark {
	--btn-shadow: 0 14px 28px -12px rgba(0, 0, 0, 0.35);
}

/* Rangée de boutons. */
.kk-btns {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* Rangée centrée (bandes CTA pleine largeur). */
.kk-btns--center {
	justify-content: center;
}

/* --- Player audio (pilule play + progression) — enhancé par audio-player.js */

.kk-audio {
	display: flex;
	align-items: center;
	gap: 13px;
	background: #fff;
	border: 1px solid var(--k-border);
	border-radius: 999px;
	padding: 8px 18px 8px 8px;
	box-shadow: 0 4px 14px -10px rgba(40, 30, 15, 0.3);
	margin-bottom: 18px;
	margin-top: 18px;
}

.kk-audio-btn {
	flex: none;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	background: var(--k-orange);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--k-shadow-orange-sm);
	transition: transform .12s, background .12s;
}

.kk-audio-btn:hover,
.kk-audio-btn:focus-visible{ transform: scale(1.05); }

.kk-audio-body { flex: 1; min-width: 0; }

.kk-audio-bar {
	height: 6px;
	border-radius: 3px;
	background: var(--k-border);
	cursor: pointer;
	position: relative;
}

.kk-audio-fill {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
	border-radius: 3px;
	background: var(--k-orange);
	transition: width .1s linear;
}

.kk-audio-time {
	flex: none;
	font-size: var(--k-text-xs);
	font-weight: 600;
	color: var(--k-faint);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* --- CTA de colonne latérale ---------------------------------------------
   Pavé sombre en pied de sommaire (codes défauts, présentation OBD, étude de
   cas). Les trois pages en avaient chacune leur copie, au pixel près à la
   marge haute près : celle-ci se règle par --aside-cta-gap.
   Structure : div.kk-aside-cta > p.kk-aside-cta-t + p.kk-aside-cta-p + boutons.
   ------------------------------------------------------------------------ */

.kk-aside-cta {
	margin-top: var(--aside-cta-gap);
	background: var(--k-gradient-dark);
	border-radius: var(--k-r-card);
	padding: 18px;
}

.kk-aside-cta-t {
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: var(--k-text-l);
	line-height: 1.25;
	color: var(--k-dark-strong);
	margin: 0 0 7px;
}

.kk-aside-cta-p {
	font-size: var(--k-text-s);
	line-height: 1.5;
	color: var(--k-dark-body);
	margin: 0 0 14px;
}

.kk-aside-cta .kk-btn {
	display: flex;
	width: 100%;
	justify-content: center;
}

/* La colonne peut empiler deux appels (étude de cas). */
.kk-aside-cta .kk-btn + .kk-btn {
	margin-top: 9px;
}

/* --- Bande presse « Ils parlent de nous » (commune) ---------------------- */

.kk-press {
	padding-top: clamp(40px, 5vw, 64px);
	padding-bottom: clamp(40px, 5vw, 64px);
	text-align: center;
}

.kk-press-title {
	font-family: var(--k-font-title);
	font-weight: 600;
	color: var(--k-faint);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: var(--k-text-s);
	margin: 0 0 26px;
}

.kk-press-logos {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(24px, 4vw, 48px);
	align-items: center;
	justify-content: center;
}

.kk-press-logos img {
	height: 34px;
	width: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .6;
}

/* --- Grille de marques ---------------------------------------------------
   Pavage de logos constructeurs (sélecteur de compatibilité, prise OBD par
   marque). Les deux pages en avaient chacune une copie à l'identique.
   Structure : div.kk-brand-grid > a.kk-brand-tile > img + span.
   ------------------------------------------------------------------------ */

.kk-brand-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(96px, 100%), 1fr));
	gap: 12px;
}

.kk-brand-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	background: #fff;
	border: 1px solid var(--k-border);
	border-radius: var(--k-r-tile);
	padding: 16px 8px;
	text-decoration: none;
	transition: border-color .14s, transform .14s;
}

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

.kk-brand-tile img {
	height: 32px;
	width: auto;
	max-width: 54px;
	object-fit: contain;
}

.kk-brand-tile span {
	font-size: var(--k-text-xs);
	font-weight: 700;
	color: var(--k-body);
	text-align: center;
	line-height: 1.15;
}

/* --- Pastille-lien (« autres modèles », « autres marques ») ----------------
   Chip cliquable posée sous une liste : la page véhicule et la page prise OBD
   en avaient chacune leur copie, identiques à la taille et au rembourrage près.
   ------------------------------------------------------------------------ */

.kk-chip-link {
	display: flex;
	align-items: center;
	gap: 9px;
	background: #fff;
	border: 1px solid var(--k-border);
	border-radius: var(--k-r-tile);
	padding: var(--chip-padding);
	font-weight: 700;
	font-size: var(--chip-size);
	color: var(--k-body);
	text-decoration: none;
	transition: border-color .14s, background .14s, color .14s;
}

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

/* --- Témoignage client ----------------------------------------------------
   La citation et ses pastilles vertes, partagées par l'accueil et la boutique.
   Les pastilles y étaient rigoureusement identiques, neuf déclarations sur
   neuf ; la citation ne différait que par une couleur et l'équilibrage des
   lignes, tous deux repris ici.
   ------------------------------------------------------------------------ */

.kk-testi-quote {
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: clamp(19px, 2.3vw, 25px);
	line-height: 1.34;
	letter-spacing: -0.015em;
	color: var(--k-charcoal);
	margin: 14px 0 16px;
	text-wrap: pretty;
}

.kk-testi-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--k-green-tint);
	color: var(--k-green);
	font-weight: 700;
	font-size: var(--k-text-s);
	padding: 6px 12px;
	border-radius: 999px;
}

/* --- Titre de bande sombre -------------------------------------------------
   Deux pages en avaient leur version, à la taille près. Elle vient désormais
   de l'échelle commune (--k-h2-l).
   ------------------------------------------------------------------------ */

.kk-band-h2 {
	font-size: var(--k-h2-l);
	color: var(--k-dark-strong);
	margin: 0 0 10px;
}

/* --- Fil d'Ariane (commun à tout le site) --------------------------------
   RÈGLE DU PROJET : un fil d'Ariane ne contient JAMAIS de <a>, toujours un
   <button> obfusqué — sculpting du maillage interne, le fil reste fourni à
   Google par le JSON-LD BreadcrumbList de la page. Les sélecteurs `a` qui
   traînaient ici sont retirés : il n'en existe plus un seul dans le markup,
   et les garder laisserait croire que les deux écritures se valent.
   ------------------------------------------------------------------------ */

.kk-crumb {
	font-size: var(--k-text-s);
	font-weight: 600;
	color: var(--k-faint);
}

/* Reset du chrome natif du <button>, pour un rendu identique au texte. */
.kk-crumb-link {
	color: var(--k-faint);
	text-decoration: none;
}

.kk-crumb-link:hover,
.kk-crumb-link:focus-visible {
	color: var(--k-orange-dark);
}

.kk-crumb span[aria-hidden] {
	margin: 0 6px;
}

.kk-crumb-cur {
	color: var(--k-nav);
}

/* --- Bande de section sur fond alterné ----------------------------------- */

.kk-band-alt {
	background: var(--k-bg-alt);
	border-top: 1px solid var(--k-border);
	border-bottom: 1px solid var(--k-border);
}

/* Bande sombre pleine largeur. Trois pages posaient exactement ce fond, chacune
   sous son propre nom (.ap-band, .sf-situ-band, .cnb-app-band) sans rien y
   ajouter d'autre.
   Les blocs qui, EN PLUS du fond, arrondissent ou rembourrent (.kk-cta-band,
   .pg-value, .em-spont…) gardent leur règle : ils consomment le token
   --k-gradient-dark, ce qui suffit à empêcher la valeur de diverger.
   À associer à .kk-on-dark, qui bascule les encres sur l'échelle sombre. */
.kk-band-dark {
	background: var(--k-gradient-dark);
}

/* Bande blanche bordée (ressort sur le fond crème). */
.kk-band-white {
	background: #fff;
	border-top: 1px solid var(--k-border);
	border-bottom: 1px solid var(--k-border);
}

/* --- Liens éditoriaux sur fond sombre ------------------------------------
   Sélecteur DESCENDANT et non classe : ces <a> proviennent des fichiers de
   langue (ex. « nos <a href="{url_dtc}">codes défauts</a> ») et ne peuvent donc
   pas porter de classe sans polluer les traductions. On marque le CONTENEUR.
   Soulignement discret par défaut (repère non chromatique, utile en
   accessibilité) qui s'intensifie au survol. */

/* :not(.kk-btn) — sinon un bouton posé sur une bande sombre (candidature
   spontanée, « qui sommes-nous ») reçoit le orange et le soulignement du lien
   de texte : orange sur orange, illisible. */
/* Sur une surface sombre, les encres des cartes basculent sur l'échelle sombre.
   Posé sur le CONTENEUR, ce réglage vaut pour toutes les cartes qu'il porte —
   sans quoi chaque page réécrit la couleur de ses libellés, et une règle
   générique du genre `.xxx p` finit par l'emporter sur le composant. */
.kk-on-dark {
	--card-t-color: var(--k-dark-strong);
	--card-p-color: var(--k-dark-body);
}

.kk-on-dark a:not(.kk-btn) {
	color: var(--k-orange-glow);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: rgba(244, 164, 69, 0.35);
	text-underline-offset: 3px;
	transition: color .14s, text-decoration-color .14s;
}

.kk-on-dark a:not(.kk-btn):hover,
.kk-on-dark a:not(.kk-btn):focus-visible {
	color: #FFC17A;
	text-decoration-color: currentColor;
}

/* Pastille verte : validation, compatibilité confirmée, option incluse.
   Quatre pages posaient ce couple fond+encre. La variante encode une
   INTENTION, contrairement à une variante de taille — une taille est un
   réglage, et l'API du composant est faite pour ça. */
.kk-icotile--success {
	--tile-bg: var(--k-green-tint);
	--tile-color: var(--k-green);
}

/* Icône de validation (vert sémantique), en ligne dans un texte ou une carte. */
.kk-ico-success {
	color: var(--k-green);
	display: inline-flex;
	flex: none;
}

/* Icône orange en tête de ligne : ne rétrécit pas, et se cale sur la première
   ligne du texte qu'elle accompagne. Quatre feuilles la redéclaraient (encart
   des sous-familles, note produit, méta d'étude de cas).
   L'encart d'information était joint ici ; il porte désormais la même mise en
   forme depuis .kk-notice, avec sa couleur donnée par la variante. */
.kk-ico-note {
	color: var(--k-orange-dark);
	display: inline-flex;
	flex: none;
	margin-top: 1px;
}

/* --- Chiffres-clés -------------------------------------------------------- */

/* Chiffre-clé et son libellé. Trois pages en avaient leur copie : bande
   sombre de l'accueil (blanc), cartes « qui sommes-nous » (orange sur fond
   clair), bloc « fabriqué en France » de la page véhicule (petit format).
   Une page règle l'échelle (--stat-min / --stat-max) et les encres. */
.kk-stat-n {
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: clamp(var(--stat-min), 4vw, var(--stat-max));
	letter-spacing: -0.02em;
	color: var(--stat-color);
	line-height: 1;
}

.kk-stat-l {
	font-size: var(--stat-l-size);
	font-weight: var(--stat-l-weight);
	color: var(--stat-l-color);
	line-height: 1.35;
	margin-top: 6px;
}

/* --- Éléments de carte produit ------------------------------------------- */

/* Modèle mis en avant : bordure orange + ombre chaude.
   Sélecteur doublé (.kk-card.kk-card--featured) À DESSEIN : la carte porte aussi
   une classe de page qui règle --card-shadow ; à spécificité égale, la feuille
   de page (chargée après) l'emporterait et l'ombre orange serait perdue. */
.kk-card.kk-card--featured {
	border: 2px solid var(--k-orange);
	--card-shadow: var(--k-shadow-orange-lg);
}

.kk-prod-img {
	height: var(--prod-img-h);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
}

.kk-prod-img img {
	max-height: var(--prod-img-h);
	width: auto;
	object-fit: contain;
}

.kk-price {
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: var(--price-size);
}

/* Lien « en savoir plus » — le même partout : pied de carte produit, fin de
   liste d'études de cas, sous un accordéon, dans un encart. Quatre feuilles en
   avaient leur copie, à la taille et à la marge haute près. */
.kk-more-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--more-top);
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: var(--more-size);
	color: var(--k-orange-dark);
	text-decoration: none;
}

/* --- Carte produit (les trois boîtiers) -----------------------------------
   LA vignette de présentation des klavkarr, employée par l'accueil, la page
   logiciel, l'interface ELM327, le comparatif et le sélecteur de
   compatibilité. Elle vivait dans home.css sous deux noms — .hm-product et
   .cp-box — ce qui obligeait trois pages à charger la feuille de l'accueil
   pour l'obtenir, et faisait diverger le rayon, la pastille et le nom.

   Structure : a.kk-card.kk-card--lift.kk-prod
                 > span.kk-prod-badge          (optionnelle)
                 > span.kk-prod-img > img
                 > p.kk-prod-name
                 > span.kk-prod-rating > .kk-stars + .kk-prod-nb   (optionnelle)
                 > span.kk-prod-tagline
                 > span.kk-prod-bullets > span.kk-prod-bullet…     (optionnelle)
                 > span.kk-prod-foot > .kk-price + .kk-more-link

   La carte est TOUJOURS un lien : le survol soulevé de kk-card--lift y est
   donc légitime.
   ------------------------------------------------------------------------ */

/* PAS d'align-items: start ici. Les cartes s'étirent à la hauteur de la
   rangée, et comme l'accroche pousse le pied (flex: 1), les prix et les liens
   s'alignent d'une carte à l'autre — même quand un modèle a deux puces là où
   les autres en ont trois. */
.kk-prod-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(var(--prod-min), 100%), 1fr));
	gap: clamp(18px, 2.5vw, 24px);
}

/* La carte est un <a>, ou un <button> quand la page obfusque ses liens
   (sculpting SEO). text-align explicite : un bouton centre son contenu
   nativement, un lien hérite — sans quoi les deux variantes divergeraient. */
.kk-prod {
	--card-padding: clamp(22px, 3vw, 28px);
	--card-shadow: var(--k-shadow-card);
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
	text-align: left;
	text-decoration: none;
	color: inherit;
}

.kk-prod-badge {
	position: absolute;
	top: 16px;
	right: 16px;
}

.kk-prod-name {
	display: block;
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: 21px;
	letter-spacing: -0.02em;
	margin: 0;
}

.kk-prod-rating {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 4px 0 12px;
}

.kk-prod-nb {
	font-size: var(--k-text-s);
	font-weight: 600;
	color: var(--k-soft);
}

/* PAS de flex: 1 ici. L'accroche garde sa hauteur naturelle, pour que les
   puces de toutes les cartes démarrent à la même ligne. C'est le pied qui
   absorbe l'espace restant (margin-top: auto), et les prix s'alignent donc
   quand même. */
.kk-prod-tagline {
	display: block;
	font-size: var(--k-text-l);
	line-height: 1.5;
	color: var(--k-muted);
	margin: 0 0 14px;
}

.kk-prod-bullets {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 18px;
}

.kk-prod-bullet {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: var(--k-text-m);
	font-weight: 600;
	color: var(--k-body);
}

.kk-prod-bullet > span {
	color: var(--k-green);
	display: inline-flex;
	flex: none;
}

.kk-prod-foot {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid var(--k-border);
}

/* Étoiles d'avis : SVG piloté par --stars-size (voir starsHtml()). */
.kk-stars {
	color: var(--k-orange);
	display: inline-flex;
	align-items: center;
}

.kk-stars-svg {
	height: var(--stars-size);
	width: auto;
	display: block;
}

/* --- Bandeau de réassurance (motif récurrent du design system) ------------ */

.kk-reassure {
	border-top: 1px solid var(--reassure-border);
	border-bottom: 1px solid var(--reassure-border);
	background: var(--reassure-bg);
}

.kk-reassure-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(var(--reassure-min), 100%), 1fr));
	gap: var(--reassure-gap);
	padding-top: 22px;
	padding-bottom: 22px;
}

.kk-reassure-item {
	display: flex;
	align-items: center;
	gap: 11px;
}

.kk-reassure-item img {
	width: 30px;
	height: 30px;
	flex: none;
}

.kk-reassure-label {
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: var(--reassure-size);
	color: var(--k-charcoal);
}

/* Variante empilée : icône au-dessus, texte centré. */
.kk-reassure--stacked .kk-reassure-item {
	flex-direction: column;
	text-align: center;
	gap: 10px;
	padding: 8px;
}

/* Variante crème (bandeau boutique du footer). */
.kk-reassure--cream {
	--reassure-bg: var(--k-bg);
	--reassure-border: var(--k-border);
	--reassure-min: 200px;
	--reassure-gap: 18px;
	--reassure-size: 13.5px;
}

.kk-reassure--cream .kk-reassure-label {
	font-family: var(--k-font-body);
	color: var(--k-body);
}

/* --- Hero à deux colonnes (héro des pages /compatible/*) ------------------
   Nom explicite : la classe portait le nom générique .kk-hero-inner et était
   déclarée deux fois dans cette feuille, la seconde écrasant la première. Toute
   page qui aurait employé le nom générique aurait hérité de la grille à deux
   colonnes sans l'avoir demandé. */

.kk-hero-split {
	padding-top: clamp(30px, 5vw, 58px);
	padding-bottom: clamp(28px, 4vw, 48px);
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* Zones : head (badge + titre), body (accroche + reste), wizard (l'outil),
	   déclarées juste après. Le wizard occupe toute la colonne droite. */
	grid-template-areas:
		"head wizard"
		"body wizard";
	/* auto 1fr, et non « auto auto » : le wizard occupe les DEUX rangées, donc
	   sans cela sa hauteur les fait grandir toutes les deux et repousse le texte
	   de la seconde. Mesuré : le bloc passait de 414 à 624px selon l'étape du
	   sélecteur. La 2e rangée absorbe désormais le surplus, le texte ne bouge
	   plus. */
	grid-template-rows: auto 1fr;
	align-items: start;
	column-gap: clamp(24px, 4vw, 48px);
	row-gap: 0;
}

/* Les trois zones. Elles vivaient dans compat.css, ce qui obligeait la page
   marque à charger la feuille du sélecteur pour trois déclarations. Une grille
   nomme ses propres zones. */
.kk-hero-split-head   { grid-area: head; }
.kk-hero-split-body   { grid-area: body; }
.kk-hero-split-wizard { grid-area: wizard; }

/* Mobile : on empile head -> WIZARD -> body, pour que l'outil soit juste
   sous le titre et non repoussé après toute la colonne texte. */
@media (max-width: 760px) {
	.kk-hero-split {
		grid-template-columns: 1fr;
		grid-template-areas:
			"head"
			"wizard"
			"body";
		row-gap: clamp(18px, 5vw, 26px);
	}
}

/* --- Lien inline orange (comparatif, localiser la prise…) ---------------- */

.kk-inline-link {
	font-weight: 700;
	color: var(--k-orange-dark);
	text-decoration: none;
	white-space: nowrap;
}

.kk-inline-link:hover,
.kk-inline-link:focus-visible {
	text-decoration: underline;
}

/* --- Chapô de bande sombre (sous un titre de section) -------------------- */

.kk-band-lead {
	font-size: var(--k-text-l);
	color: var(--k-dark-lead);
	margin: 0 0 clamp(22px, 3vw, 32px);
	max-width: 60ch;
}

/* --- FAQ accordéon (composant partagé) — clair par défaut, variante --dark
   (bande sombre). Structure : .kk-faq > details.kk-faq-item >
   summary.kk-faq-sum (h3.kk-faq-q + span.kk-faq-ico) + div.kk-faq-a. */
.kk-faq {
	max-width: 880px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.kk-faq-item {
	background: #fff;
	border: 1px solid var(--k-border);
	border-radius: var(--k-r-card);
	overflow: hidden;
	box-shadow: var(--k-shadow-card);
}

.kk-faq-sum {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
}
.kk-faq-sum::-webkit-details-marker { display: none; }

.kk-faq-q {
	flex: 1;
	margin: 0;
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: var(--k-text-xl);
	color: var(--k-charcoal);
}

.kk-faq-ico {
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: var(--k-bg-alt);
	color: var(--k-orange-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .18s, background .18s, color .18s;
}
.kk-faq-item[open] .kk-faq-ico {
	transform: rotate(45deg);
	background: var(--k-orange);
	color: #fff;
}

.kk-faq-a {
	padding: 0 20px 20px;
	font-size: var(--k-text-l);
	line-height: var(--k-lh);
	color: var(--k-body);
}
.kk-faq-a p { margin: 0 0 12px; }
.kk-faq-a :last-child { margin-bottom: 0; }
.kk-faq-a h4 { color: var(--k-charcoal); font-size: var(--k-text-l); margin: 14px 0 6px; }
.kk-faq-a a { color: var(--k-orange-dark); font-weight: 700; }

/* Variante sombre (sur bande bleue). */
.kk-faq--dark .kk-faq-item {
	background: var(--k-dark-surface);
	border-color: var(--k-dark-line);
	box-shadow: none;
}
.kk-faq--dark .kk-faq-q { color: var(--k-dark-strong); }
.kk-faq--dark .kk-faq-ico { background: rgba(255, 255, 255, 0.12); color: var(--k-orange-glow); }
.kk-faq--dark .kk-faq-a { color: var(--k-dark-body); }
.kk-faq--dark .kk-faq-a h4 { color: var(--k-dark-strong); }
.kk-faq--dark .kk-faq-a a { color: var(--k-orange-glow); }

/* ==========================================================================
   Page documentaire : mise en page à sommaire collant.
   Partagé par les pages interface ELM327 et présentation OBD — toute page
   longue à sections ancrées doit l'employer plutôt que le redéfinir.
   ========================================================================== */

/* --- Mise en page : sommaire + corps -------------------------------------- */

.kk-doc-layout {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: clamp(24px, 3.5vw, 44px);
	align-items: start;
}

.kk-doc-aside {
	position: sticky;
	top: 24px;
}

.kk-doc-aside-h {
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: var(--k-text-s);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--k-chevron);
	margin: 0 0 10px 4px;
}

.kk-doc-toc {
	display: flex;
	flex-direction: column;
	gap: 2px;
	border-left: 2px solid var(--k-border);
}

.kk-doc-toc a {
	padding: 9px 12px;
	font-size: var(--k-text-m);
	font-weight: 600;
	line-height: 1.35;
	color: var(--k-nav);
	text-decoration: none;
	border-left: 2px solid transparent;
	margin-left: -2px;
	transition: color .12s, border-color .12s;
}

.kk-doc-toc a:hover,
.kk-doc-toc a:focus-visible {
	color: var(--k-orange-dark);
}

/* Section en cours de lecture : posée par elm.js (IntersectionObserver). */
/* Entrée en cours de lecture : fond teinté + barre orange, comme la maquette.
   Posée par doc-page.js (IntersectionObserver). */
.kk-doc-toc a.is-current {
	color: var(--k-orange-dark);
	background: var(--k-orange-tint);
	border-left-color: var(--k-orange);
	border-radius: 10px;
	font-weight: 700;
}

/* --- Sections du corps ---------------------------------------------------- */

.kk-doc-sec {
	margin-bottom: clamp(34px, 4.5vw, 56px);
	scroll-margin-top: 24px;
}

/* Sous 980px le sommaire disparaît : la page documentaire se lit à la suite,
   et les ancres restent atteignables depuis le corps. SANS cette règle, la
   colonne de contenu reste écrasée à côté d'un sommaire invisible. */
@media (max-width: 980px) {
	.kk-doc-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.kk-doc-aside {
		display: none;
	}
}

.kk-doc-sec h2 {
	font-size: var(--k-h2-m);
	margin: 0 0 14px;
}

/* Les <h3> d'une section documentaire portent une marge et une taille de
   sous-titre. Un accordéon imbriqué dans la section (les modes OBD) utilise
   aussi un <h3> : sans l'exclusion, il hérite de cette marge de 30px et son
   libellé se décale sous la pastille, que le <summary> centre. */
.kk-doc-sec h3:not(.kk-faq-q) {
	font-size: var(--k-h3-m);
	margin: clamp(22px, 3vw, 30px) 0 10px;
}

/* Les <h4> d'une section documentaire : sous-titre d'un <h3>, une taille en
   dessous et un rythme plus serré. Exclusion de .elm-compare-n (le titre des
   cartes de comparaison ELM327), qui fixe déjà sa propre taille : sans elle,
   cette règle (0,1,1) l'emporterait sur le composant (0,1,0). */
.kk-doc-sec h4:not(.elm-compare-n) {
	font-size: var(--k-h3-s);
	margin: clamp(16px, 2vw, 20px) 0 8px;
}

/* :not(.kk-notice) — un encart d'information est un <p> lui aussi, et cette
   règle (0,2,1) l'emportait sur le composant (0,1,0) : il fallait deux
   !important dans .kk-notice pour lui reprendre sa taille et son encre.
   L'exclure ici règle le conflit à la source, et les !important disparaissent. */
.kk-doc-sec p:not(.kk-notice) {
	font-size: var(--k-text-xl);
	line-height: var(--k-lh);
	color: var(--k-nav);
	margin: 0 0 14px;
}

/* Dans le fil d'une page documentaire, l'encart suit le rythme des
   paragraphes qui l'entourent, pas celui d'un bloc autonome. */
.kk-doc-sec .kk-notice {
	--notice-mb: 14px;
}

.kk-doc-sec p a,
.kk-doc-sec li a {
	color: var(--k-orange-dark);
	font-weight: 700;
}

/* --- Listes --------------------------------------------------------------- */

.kk-doc-list,
.kk-doc-adv,
.kk-doc-warn,
.kk-doc-versions {
	margin: 0 0 16px;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

/* ATTENTION à l'usage : ces <li> sont des conteneurs FLEX. Le contenu qui suit
   la puce doit être enveloppé dans un <span>, sinon un texte suivi d'un lien
   donne DEUX items côte à côte au lieu d'un paragraphe qui coule.
   Le min-width: 0 sur l'enveloppe évite qu'un mot long empêche le retour à la
   ligne (largeur minimale intrinsèque d'un item flex). */
.kk-doc-list li,
.kk-doc-adv li,
.kk-doc-warn li,
.kk-doc-versions li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: var(--k-text-l);
	line-height: var(--k-lh);
	color: var(--k-nav);
}

.kk-doc-list li > span:last-child,
.kk-doc-adv li > span:last-child,
.kk-doc-warn li > span:last-child,
.kk-doc-versions li > span:last-child {
	min-width: 0;
}

.kk-doc-list li::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--k-orange);
	margin-top: 9px;
}

/* La PASTILLE, donc le premier enfant : sans :first-child, cette règle
   attrapait aussi l'enveloppe du texte et lui posait flex: none — le
   paragraphe ne pouvait plus se réduire et débordait sur mobile. */
.kk-doc-adv li > span:first-child,
.kk-doc-versions li.is-yes > span:first-child {
	color: var(--k-green-ink);
	flex: none;
	display: inline-flex;
	margin-top: 2px;
}

.kk-doc-warn li > span:first-child,
.kk-doc-versions li.is-no > span:first-child {
	color: var(--k-orange-dark);
	flex: none;
	display: inline-flex;
	margin-top: 2px;
}

/* Liste d'ETAPES : l'ordre compte, les numeros aussi. Le reset global
   :where(ol[class]) retire les marqueurs de toutes les listes a classe — utile
   pour les composants qui posent leur propre puce, mais ici il laissait un
   padding-left de 22px reservant la place d'un marqueur jamais dessine. Les
   trois listes concernees (mode d'emploi ELM327, points a verifier des etudes
   de cas) etaient numerotees dans le legacy. */
.kk-doc-steps {
	margin: 0 0 16px;
	padding-left: 22px;
	list-style: decimal;
}

.kk-doc-steps li {
	font-size: var(--k-text-l);
	line-height: var(--k-lh);
	color: var(--k-nav);
	margin-bottom: 9px;
}


/* --- Colonne étroite -------------------------------------------------------
   Le pendant de .kk-container pour les pages « guide » (licence, klavkarr,
   prise OBD) : une colonne de 900px au lieu de 1200, même gouttière.
   Les trois pages en avaient chacune leur copie — .lc-hero-inner,
   .kv-hero-inner, .cn-hero-inner — rigoureusement identiques, padding compris.

   Même partage des rôles que kk-container : le composant possède la largeur
   et la gouttière HORIZONTALE, la page garde son rythme VERTICAL. --narrow-max
   couvre les colonnes qui s'en écartent (880px des bandes « comment ça
   marche »).
   ------------------------------------------------------------------------ */

.kk-narrow {
	max-width: var(--narrow-max, 900px);
	margin: 0 auto;
	padding-left: clamp(16px, 4vw, 40px);
	padding-right: clamp(16px, 4vw, 40px);
}

/* Le rythme vertical du héro de ces trois pages, identique lui aussi. */
.kk-narrow--hero {
	padding-top: clamp(28px, 4vw, 52px);
	padding-bottom: clamp(30px, 4vw, 44px);
}

/* Leur chapô : plus large que le défaut et sans espace en dessous, la section
   suivante fournissant la respiration. Posé en descendant plutôt qu'en
   variante — les deux pages connecteur qui n'ont PAS ce héro gardent leurs
   propres réglages, et une variante les aurait forcées à porter une classe
   qui ment sur leur contexte. */
.kk-narrow--hero .kk-lead {
	--lead-gap: 0;
	--lead-width: 60ch;
}

/* --- En-tête de carte ------------------------------------------------------
   Pastille + titre sur une ligne, en tête d'une grande carte. Deux pages en
   avaient la copie exacte (.lc-card-head, .kv-card-head).
   À ne pas confondre avec .kk-section-head, qui coiffe une SECTION.
   ------------------------------------------------------------------------ */

.kk-card-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 22px;
}

/* Le titre y prend le plus petit cran de l'échelle : il coiffe une carte, pas
   une section. */
.kk-card-head h2 {
	font-size: var(--k-h2-xs);
	margin: 0;
}

/* --- Grille de cartes ------------------------------------------------------
   La grille responsive du site : autant de colonnes que la largeur en permet,
   chacune jamais plus étroite que --grid-min. Cinquante-six règles de page la
   réécrivaient à l'identique, à deux valeurs près.

   LE min(…, 100%) EST LE POINT IMPORTANT. Sans lui, une colonne refuse de
   descendre sous son plancher et c'est la PAGE ENTIÈRE qui défile
   latéralement sous 375px. Le défaut a dû être corrigé soixante fois, une par
   grille, faute d'un endroit unique où l'écrire. Ici il est écrit une fois, et
   une grille nouvelle ne peut plus l'oublier.

   Réglages : --grid-min (largeur mini d'une colonne), --grid-gap (écart),
   --grid-mode (auto-fit par défaut ; auto-fill garde les colonnes vides, ce
   qui évite qu'un item isolé s'étire sur toute la largeur).
   ------------------------------------------------------------------------ */

.kk-grid {
	display: grid;
	grid-template-columns:
		repeat(var(--grid-mode, auto-fit), minmax(min(var(--grid-min, 260px), 100%), 1fr));
	gap: var(--grid-gap, clamp(16px, 2.5vw, 22px));
}

/* --- Liste de points ------------------------------------------------------
   « Ce qui est inclus », « ce que vous obtenez » : une puce icône suivie d'un
   libellé court, sur une ligne. Trois pages en avaient la définition exacte
   (.cp-points, .pg-assur, .sf-free-list), aux six mêmes déclarations près.

   La COULEUR reste réglable : la liste de l'édition gratuite s'en sert pour
   distinguer ce qui est inclus de ce qui ne l'est pas.
   ------------------------------------------------------------------------ */

.kk-feature-list li {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: var(--k-text-l);
	font-weight: 600;
	color: var(--feature-color, var(--k-body));
}

/* --- Encarts d'information ------------------------------------------------
   UN SEUL encart pour tout le site. Il en existait deux, identiques à l'œil
   et invisibles l'un à l'autre : .kk-doc-tip ici (pages documentaires) et
   .lc-notice dans licence.css, que trois autres pages importaient — c'est
   précisément la dépendance page-à-page qu'on cherche à supprimer.

   STRUCTURE. Deux enfants, dans cet ordre : l'icône, puis le texte. Le texte
   DOIT être enveloppé (<p> ou <span>) : l'encart est un conteneur flex, et
   sans enveloppe chaque balise inline du texte (<strong>, <a>) deviendrait un
   élément flex distinct — le paragraphe s'éclaterait en colonnes.

       <p class="kk-notice kk-notice--warm">
           <span aria-hidden="true">[icône]</span><span>Texte…</span>
       </p>

   La variante porte TOUTE la couleur (fond, filet, icône, encre). Un encart
   sans variante n'a pas de fond : c'est voulu, il n'existe pas de ton neutre.
   ------------------------------------------------------------------------ */

.kk-notice {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	background: var(--notice-bg);
	border: 1px solid var(--notice-border);
	border-radius: var(--k-r-tile);
	padding: 16px 20px;
	margin: 20px 0;
	font-size: var(--k-text-l);
	line-height: var(--k-lh);
	font-weight: 600;
	color: var(--notice-color);
}

/* L'icône ne se comprime jamais ; le texte, si — sans min-width:0 une longue
   URL insécable le ferait déborder de l'encart. */
.kk-notice > :first-child {
	display: inline-flex;
	flex: none;
	margin-top: 1px;
	color: var(--notice-ico);
}

.kk-notice > :last-child {
	min-width: 0;
}

/* Pastille EMPILÉE au-dessus du texte d'une carte. Quatre cartes du site ont
   cette forme, et trois posaient leur propre écart — 14, 15 et 16px — quand la
   quatrième (« pourquoi klavkarr », boutique) n'en posait aucun : l'icône y
   touchait son titre. Une valeur unique, sur le rythme de 8px du reste des
   cartes.

   Le sélecteur exige un enfant DIRECT : une pastille placée en ligne dans une
   rangée (en-tête de carte, ligne de liste) ne doit surtout pas décoller. */
.kk-card > .kk-icotile {
	margin-bottom: var(--card-ico-gap, 16px);
}

/* Le texte peut être un <p> : on annule sa marge native, la mise en page
   verticale appartient à l'encart. */
.kk-notice p {
	margin: 0;
}

/* Confirmation, garantie, bonne nouvelle. */
.kk-notice--success {
	--notice-bg: var(--k-green-tint);
	--notice-border: var(--k-green-border);
	--notice-ico: var(--k-green);
	--notice-color: var(--k-green-ink);
}

/* Conseil, précision, mise en garde douce. Pas un ton d'erreur : le rouge du
   site est réservé aux défauts réels (champ invalide, voyant allumé). */
.kk-notice--warm {
	--notice-bg: var(--k-orange-tint);
	--notice-border: var(--k-border-warm);
	--notice-ico: var(--k-orange-dark);
	--notice-color: var(--k-warm-ink);
}

/* --- État vide ------------------------------------------------------------
   « Aucun résultat », « aucune offre », « modèle introuvable ». Quatre pages
   en avaient leur version (.cnb-empty, .dtc-empty, .sh-noresult, .em-empty),
   toutes bâties sur le même trait : fond blanc, filet TIRETÉ, texte centré.
   Le tireté est ce qui porte le sens — il dit « emplacement sans contenu »
   plutôt que « bloc raté » — et c'est exactement ce qu'il ne faut pas laisser
   diverger.

   Seul le rembourrage varie légitimement d'un contexte à l'autre, d'où
   --empty-padding. Le rayon suit celui du bloc environnant (--empty-radius)
   quand la page mêle des surfaces --k-r-lg.

   Le contenu (titre, texte, icône) reste à la page : les quatre états n'ont
   ni la même hiérarchie ni le même volume de texte, et les uniformiser
   demanderait plus de réglages que de règles économisées.
   ------------------------------------------------------------------------ */

.kk-empty {
	background: #fff;
	border: 1px dashed var(--k-border-warm);
	border-radius: var(--empty-radius, var(--k-r-card));
	padding: var(--empty-padding, 34px 16px);
	text-align: center;
}

/* --- Texte courant --------------------------------------------------------
   Le paragraphe éditorial du site. Six feuilles en portaient la définition,
   au caractère près (.cp-editorial p, .cnv-intro p, .eq-made p, .mk-obd-text p,
   .sf-p, .vh-made-p) : seules les marges les distinguaient.

   La classe s'applique AU CHOIX sur le paragraphe ou sur son conteneur — les
   six usages se répartissaient entre les deux formes, et imposer l'une aurait
   fait réécrire du markup sans rien y gagner.

   Les MARGES restent à la page : c'est le rythme d'une section, pas une
   propriété du texte. C'est aussi pourquoi ceci n'est pas une règle sur `p`
   dans base.css — tous les paragraphes du site n'ont pas ce rôle.
   ------------------------------------------------------------------------ */

.kk-copy,
.kk-copy p {
	font-size: var(--k-text-xl);
	line-height: var(--k-lh);
	color: var(--k-body);
}

/* --- Tableaux ------------------------------------------------------------
   STYLE UNIQUE DE TOUS LES TABLEAUX DU SITE. En-tête bleu nuit sur texte
   crème (référence : page compatibilité/modèle). Toute page qui présente des
   données en lignes et colonnes emploie ce composant — ne pas en redéfinir.

   Toujours envelopper dans .kk-doc-scroll : un tableau plus large que le texte
   défile alors dans son conteneur, et la page ne défile jamais latéralement.
   ------------------------------------------------------------------------ */

.kk-doc-scroll {
	overflow-x: auto;
	margin-bottom: 18px;
	border: 1px solid var(--k-border);
	border-radius: var(--k-r-card);
	background: #fff;
	box-shadow: var(--k-shadow-card);
}

.kk-doc-tbl {
	width: 100%;
	border-collapse: collapse;
	min-width: 460px;
}

.kk-doc-tbl th,
.kk-doc-tbl td {
	padding: 13px 16px;
	text-align: left;
	font-size: var(--k-text-m);
	line-height: 1.5;
}

.kk-doc-tbl thead th {
	background: var(--k-blue);
	color: var(--k-bg-alt);
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: var(--k-text-s);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.kk-doc-tbl tbody tr {
	border-bottom: 1px solid var(--k-border);
}

.kk-doc-tbl tbody tr:last-child {
	border-bottom: 0;
}

/* En-tête de LIGNE (première colonne) : mis en avant sans être un titre. */
.kk-doc-tbl tbody th {
	font-family: var(--k-font-title);
	font-weight: 700;
	color: var(--k-charcoal);
}

.kk-doc-tbl tbody td {
	color: var(--k-nav);
}

/* Liens du texte seulement : un bouton (.kk-btn) garde son propre habillage
   (sans :not, le texte d'un bouton orange sortait orange sur orange). */
.kk-doc-tbl a:not(.kk-btn) {
	color: var(--k-orange-dark);
	font-weight: 600;
}

/* Rayage : une ligne sur deux, pour suivre une longue ligne du regard. */
.kk-doc-tbl--zebra tbody tr:nth-child(even) {
	background: var(--k-tile);
}

/* Variante filtrée (liste des codes défauts) : des lignes sont masquées, le
   rang CSS ne vaut plus rien — c'est le JS qui pose .is-odd sur les lignes
   VISIBLES. Le rayage automatique est donc neutralisé ici. */
.kk-doc-tbl--filtered tbody tr:nth-child(even) {
	background: transparent;
}

.kk-doc-tbl--filtered tbody tr.is-odd {
	background: var(--k-tile);
}

/* Cellules d'état (matrice de compatibilité). */
.kk-doc-tbl td.is-yes span {
	color: var(--k-green-ink);
	display: inline-flex;
}

.kk-doc-tbl td.is-no span {
	color: var(--k-chevron);
	display: inline-flex;
}

.kk-doc-tbl code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: var(--k-text-m);
	border-radius: 6px;
	padding: 2px 7px;
	color: var(--k-charcoal);
}

/* Tableau à DEUX colonnes très longues (code + définition) : sous 560px, deux
   colonnes hachent la définition en un mot par ligne. La variante --stack
   empile alors le libellé de la première colonne au-dessus de la seconde. */
@media (max-width: 560px) {
	.kk-doc-tbl--stack {
		min-width: 0;
	}

	.kk-doc-tbl--stack thead {
		display: none;
	}

	.kk-doc-tbl--stack tbody tr,
	.kk-doc-tbl--stack tbody th,
	.kk-doc-tbl--stack tbody td {
		display: block;
	}

	.kk-doc-tbl--stack tbody tr {
		padding: 12px 14px;
	}

	.kk-doc-tbl--stack tbody th {
		padding: 3px 9px;
		margin-bottom: 6px;
		width: fit-content;
		background: var(--k-orange-tint);
		color: var(--k-orange-dark);
		border-radius: 7px;
		font-size: var(--k-text-m);
	}

	.kk-doc-tbl--stack tbody td {
		padding: 0;
	}

	/* display:block ci-dessus l'emporterait sur l'attribut hidden posé par le
	   filtre : les lignes masquées réapparaîtraient en mobile. */
	.kk-doc-tbl--stack tbody tr[hidden] {
		display: none;
	}
}

/* Tableau de valeurs COURTES (commandes, versions) : le min-width de 460px le
   fait défiler sur un téléphone alors que son contenu tiendrait. La variante
   --fit lève cette largeur plancher et resserre les cellules. */
.kk-doc-tbl--fit {
	min-width: 0;
}

@media (max-width: 560px) {
	.kk-doc-tbl--fit th,
	.kk-doc-tbl--fit td {
		padding: 10px 9px;
		font-size: var(--k-text-s);
	}

	.kk-doc-tbl--fit thead th {
		font-size: var(--k-text-xs);
		letter-spacing: 0.03em;
	}

	.kk-doc-tbl--fit code {
		font-size: var(--k-text-s);
		padding: 2px 5px;
	}

	/* Sans cela, « version 1.4b et + » renvoie le seul « + » à la ligne. */
	.kk-doc-tbl--fit tbody th {
		text-wrap: balance;
	}
}

/* MATRICE (interface × appareil) : cinq colonnes dont quatre en-têtes d'un seul
   mot, qui ne se coupent pas. Sous 560px elle s'empile via --stack, chaque
   cellule affichant alors son intitulé de colonne à gauche et l'état à droite ;
   entre 560 et 900px elle se resserre. Dans les deux cas, pas de défilement. */
/* Masqué hors mobile. Sélecteurs redondants à dessein : la règle d'état
   (.kk-doc-tbl td.is-yes span) est plus spécifique qu'une simple classe et
   rendrait le libellé visible en desktop, collé à l'icône. */
.kk-doc-lbl,
.kk-doc-tbl td.is-yes .kk-doc-lbl,
.kk-doc-tbl td.is-no .kk-doc-lbl {
	display: none;
}

@media (max-width: 900px) {
	.kk-doc-tbl--matrix {
		min-width: 0;
	}

	.kk-doc-tbl--matrix th,
	.kk-doc-tbl--matrix td {
		padding: 11px 8px;
		font-size: var(--k-text-s);
	}

	.kk-doc-tbl--matrix thead th {
		font-size: var(--k-text-xs);
		letter-spacing: 0.03em;
	}
}

@media (max-width: 560px) {
	.kk-doc-tbl--matrix tbody td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 6px 2px;
		border-top: 1px solid var(--k-border);
	}

	.kk-doc-tbl--matrix tbody td:first-of-type {
		border-top: 0;
	}

	/* Même raison : sans cette spécificité, le libellé hériterait aussi de la
	   couleur d'état (vert ou gris) au lieu de rester neutre. */
	.kk-doc-tbl--matrix tbody td.is-yes .kk-doc-lbl,
	.kk-doc-tbl--matrix tbody td.is-no .kk-doc-lbl {
		display: inline;
		color: var(--k-nav);
		font-size: var(--k-text-m);
	}
}

/* Deux colonnes de contenu dans une section documentaire (texte + figure,
   ou deux encarts). Partagé par les pages interface ELM327 et présentation
   OBD ; les variantes règlent l'alignement vertical. */
.kk-doc-two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 18px;
}

.kk-doc-two--top {
	align-items: start;
}

.kk-doc-two--center {
	align-items: center;
}

@media (max-width: 760px) {
	.kk-doc-two {
		grid-template-columns: 1fr;
	}
}

/* --- En-tête de matrice de comparaison ------------------------------------
   Le site compare ses trois modèles à DEUX endroits, avec deux techniques :
   la boutique en vrai <table>, la page comparatif en grille de <div>. Les deux
   rendaient exactement le même en-tête. Cette classe se pose sur la RANGÉE
   d'en-tête, quelle que soit la technique, et habille ses cellules.

   Ce n'est pas kk-doc-tbl : une matrice n'a pas d'intitulés en capitales — ses
   colonnes portent des noms de produit — et elle met une colonne en avant.
   ------------------------------------------------------------------------ */

.kk-matrix-head > * {
	background: var(--k-blue);
	color: var(--k-bg-alt);
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: var(--k-text-s);
	padding: 13px 12px;
	text-align: center;
}

.kk-matrix-head > *:first-child {
	padding-left: 18px;
	text-align: left;
}

/* Colonne mise en avant : le voile orange se SUPERPOSE au bleu, il ne le
   remplace pas — sinon le nom du modèle passerait en blanc sur fond clair. */
.kk-matrix-head > .is-featured {
	background:
		linear-gradient(rgba(242, 150, 68, 0.22), rgba(242, 150, 68, 0.22)),
		var(--k-blue);
	color: var(--k-dark-strong);
}

/* --- Figures -------------------------------------------------------------- */

.kk-doc-fig {
	margin: 0 auto 18px;
	border: 1px solid var(--k-border);
	border-radius: var(--k-r-card);
	overflow: hidden;
	background: #fff;
	max-width: 720px;
}

.kk-doc-fig img {
	width: 100%;
	height: auto;
}

/* Capture d'écran mobile : verticale, elle ne doit pas s'étirer. */
.kk-doc-fig--narrow {
	max-width: 340px;
}

/* --- Image encadrée -------------------------------------------------------
   Photo ou carte posée dans une grille, recadrée par le cadre (« qui sommes-
   nous », « l'équipe »). L'image DOIT porter une hauteur ou remplir sa cellule
   de grille : c'est le cadre qui rogne, pas l'image qui s'étire.
   ------------------------------------------------------------------------ */

.kk-frame {
	border-radius: var(--k-r-lg);
	overflow: hidden;
	border: 1px solid var(--k-border-warm);
	box-shadow: var(--k-shadow-card);
}

.kk-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Formulaire : champ, libellé, erreur ----------------------------------
   Composant partagé de tous les formulaires du site (contact, tunnel d'achat,
   compte, réinitialisation de mot de passe). Promu depuis les anciennes classes
   .ct-* de la page contact ; la géométrie retenue est celle des maquettes du
   tunnel (bordure 1px, rayon 12px, libellé en police titre) — décision de
   design. Les couleurs et polices passent par les tokens ; la taille des champs
   est fixée à 16px pour empêcher le zoom automatique de Safari iOS à la saisie.
   L'état d'erreur .is-invalid est piloté par la validation JS.
   ------------------------------------------------------------------------ */

.kk-label {
	display: block;
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: 12.5px;
	color: var(--k-nav);
	margin-bottom: 7px;
}

/* Marqueur « facultatif » discret dans un libellé de champ optionnel. */
.kk-label-opt {
	font-weight: 400;
	font-size: 11px;
	color: var(--k-muted);
	text-transform: none;
}

.kk-field {
	width: 100%;
	font-family: var(--k-font-body);
	font-size: 16px;
	color: var(--k-charcoal);
	background: var(--k-tile);
	border: 1px solid var(--k-border-warm);
	border-radius: 12px;
	padding: 14px;
	outline: none;
	transition: border-color .14s, box-shadow .14s, background .14s;
}

.kk-field:focus {
	border-color: var(--k-orange);
	background: var(--k-card);
	box-shadow: 0 0 0 3px rgba(242, 150, 68, 0.16);
}

.kk-field::placeholder { color: var(--k-faint); }

/* Zone de texte multiligne. */
.kk-field--area {
	resize: vertical;
	min-height: 120px;
}

/* Champ invalidé par la validation (client ou serveur). */
.kk-field.is-invalid {
	border-color: var(--k-red);
	background: var(--k-red-tint);
}

/* Champ téléphone : indicatif du pays (préfixe non éditable) collé au champ. */
.kk-phone { display: flex; align-items: stretch; }
.kk-phone-input { flex: 1; min-width: 0; }
.kk-phone-dial {
	display: inline-flex;
	align-items: center;
	padding: 0 13px;
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: 15px;
	color: var(--k-charcoal);
	white-space: nowrap;
	background: #fff;
	border: 1px solid var(--k-border-warm);
	border-right: none;
	border-radius: 12px 0 0 12px;
}
.kk-phone--dial .kk-phone-input {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
.kk-phone:focus-within .kk-phone-dial { border-color: var(--k-orange); }

/* Note d'aide discrète sous un champ (ex. « tél utilisé pour la livraison »). */
.kk-field-note {
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--k-muted);
}

/* Encart d'erreur affiché au-dessus/en-dessous d'un champ ou d'un formulaire. */
.kk-field-error {
	display: flex;
	align-items: center;
	gap: 9px;
	background: var(--k-red-tint);
	color: var(--k-red-ink);
	border: 1px solid #F3CDC5;
	border-radius: 12px;
	padding: 11px 14px;
	font-size: var(--k-text-m);
	font-weight: 700;
}

.kk-field-error svg { flex: none; }