/* ==========================================================================
   Page « L'OBD, c'est quoi ? ».
   Maquette : Presentation OBD.dc.html.

   La mise en page documentaire (sommaire collant, sections, listes, encarts,
   tableaux, figures) vient du gabarit partagé kk-doc-* de components.css.
   Ici uniquement le propre à cette page : héro, cartes de norme, états du
   voyant, protocoles et accordéon des modes.
   ========================================================================== */

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

.obd-hero-wrap {
	--hero-pt: clamp(20px, 3vw, 34px);
	--hero-pb: clamp(30px, 4.5vw, 54px);
}

.obd-lead { --lead-gap: 14px; }

/* --- L'essentiel en 4 points --------------------------------------------- */

.obd-key-t {
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: var(--k-text-2xl);
	margin: 0 0 16px;
}

.obd-key ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.obd-key li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 13px 0;
	border-bottom: 1px solid var(--k-border);
}

.obd-key li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.obd-key-ico {
	flex: none;
	color: var(--k-orange);
	display: inline-flex;
	margin-top: 2px;
}

.obd-key-n {
	display: block;
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: var(--k-text-l);
	margin-bottom: 3px;
}

.obd-key-d {
	display: block;
	font-size: var(--k-text-m);
	line-height: 1.5;
	color: var(--k-nav);
}

/* --- Colonnes de contenu -------------------------------------------------- */

/* Figure accolée à du texte : elle ne doit pas s'étirer sur toute la colonne. */
.obd-fig--tight {
	max-width: none;
	margin-bottom: 0;
	padding: 12px;
}

.obd-fig--tight img {
	border-radius: var(--k-r-tile);
}

.obd-fig--tight figcaption {
	font-size: var(--k-text-s);
	font-weight: 700;
	color: var(--k-nav);
	margin: 9px 4px 2px;
}

/* --- Cartes de norme ------------------------------------------------------ */

.obd-norms {
	--grid-min: 215px;
	--grid-gap: 12px;
	margin-bottom: 18px;
}

.obd-norm {
	--card-padding: 18px 20px;
}

/* EOBD : la norme qui s'applique en Europe, mise en avant par la maquette. */
.obd-norm--current {
	border-color: var(--k-orange);
	border-width: 2px;
}

.obd-norm-n {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: var(--k-text-2xl);
	margin: 0 0 8px !important;
	color: var(--k-charcoal);
}

.obd-norm--current .obd-norm-n {
	color: var(--k-orange-dark);
}

.obd-norm-y {
	font-size: var(--k-text-s);
	font-weight: 700;
	color: var(--k-chevron);
}

.obd-norm-d {
	font-size: var(--k-text-m) !important;
	line-height: var(--k-lh);
	margin: 0 !important;
}

/* --- Encarts de la section « dates » -------------------------------------- */

.obd-note {
	--card-padding: 16px 18px;
}

.obd-note-t {
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: var(--k-text-l);
	margin: 0 0 7px !important;
	color: var(--k-charcoal);
}

.obd-note-d {
	font-size: var(--k-text-l) !important;
	line-height: var(--k-lh);
	margin: 0 !important;
}

/* --- États du voyant MIL -------------------------------------------------- */

.obd-mils {
	--grid-min: 235px;
	--grid-gap: 12px;
}

.obd-mil {
	--card-shadow: none;
	--card-radius: var(--k-r-card);
	--card-padding: 16px 18px;
}

.obd-mil-n {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: var(--k-text-xl);
	margin: 0 0 8px !important;
	color: var(--k-charcoal);
}

.obd-mil-dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	flex: none;
	background: var(--k-chevron);
}

.obd-mil-d {
	font-size: var(--k-text-m) !important;
	line-height: var(--k-lh);
	margin: 0 !important;
	color: var(--k-nav);
}

/* Allumé : le défaut est confirmé, on peut rouler. */
.obd-mil--warn {
	background: var(--k-orange-tint);
	border-color: var(--k-border-warm);
}

.obd-mil--warn .obd-mil-n,
.obd-mil--warn .obd-mil-d {
	color: var(--k-warm-ink);
}

.obd-mil--warn .obd-mil-dot {
	background: var(--k-orange);
}

/* Clignotant : risque de destruction mécanique, il faut s'arrêter. */
.obd-mil--danger {
	background: var(--k-red-tint);
	border-color: #F2C4BC;
}

.obd-mil--danger .obd-mil-n {
	color: #9A3325;
}

.obd-mil--danger .obd-mil-d {
	color: #8A3A2E;
}

.obd-mil--danger .obd-mil-dot {
	background: var(--k-red);
}

/* Éteint : aucun défaut de pollution actif. */
.obd-mil--ok {
	background: var(--k-green-tint);
	border-color: var(--k-green-border);
}

.obd-mil--ok .obd-mil-n {
	color: var(--k-green-ink);
}

.obd-mil--ok .obd-mil-d {
	color: var(--k-green-ink);
}

.obd-mil--ok .obd-mil-dot {
	background: var(--k-green);
}

.obd-after {
	font-size: var(--k-text-l) !important;
	line-height: var(--k-lh);
	margin: 14px 2px 0 !important;
}

/* --- Brochage ------------------------------------------------------------- */

/* Une broche libre : grisée, elle ne doit pas attirer l'œil. */
.obd-pins tr.is-free td {
	color: var(--k-chevron);
	font-weight: 600;
}

.obd-pins {
	min-width: 260px;
}

/* --- Protocoles ----------------------------------------------------------- */

.obd-proto {
	--card-padding: 20px 22px;
	margin-bottom: 14px;
}

.obd-proto-n {
	display: flex;
	align-items: center;
	gap: 11px;
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: var(--k-text-2xl);
	margin: 0 0 6px !important;
	color: var(--k-charcoal);
}

.obd-proto-i {
	font-size: var(--k-text-l) !important;
	line-height: var(--k-lh);
	margin: 0 0 14px !important;
}

.obd-proto-items {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.obd-proto-item {
	background: var(--k-tile);
	border: 1px solid var(--k-border);
	border-radius: var(--k-r-tile);
	padding: 13px 15px;
}

.obd-proto-item-n {
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: var(--k-text-l);
	margin: 0 0 4px !important;
	color: var(--k-charcoal);
}

.obd-proto-item-d {
	font-size: var(--k-text-m) !important;
	line-height: var(--k-lh);
	margin: 0 !important;
}

/* --- Accordéon des modes -------------------------------------------------- */

.obd-mode-n {
	flex: none;
	/* « Mode 10 (ou Mode A) » ne doit pas se couper : la pastille s'élargit,
	   c'est le titre à côté qui passe à la ligne. */
	white-space: nowrap;
	min-width: 34px;
	height: 30px;
	padding: 0 9px;
	border-radius: 10px;
	background: var(--k-orange-tint);
	color: var(--k-orange-dark);
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: var(--k-text-m);
	display: flex;
	align-items: center;
	justify-content: center;
}

.obd-mode-link { --more-top: 12px; }

.obd-mode-link:hover,
.obd-mode-link:focus-visible {
	text-decoration: underline;
}

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

@media (max-width: 760px) {
	/* Empilées, les figures reprennent la marge basse des blocs de texte. */
	.obd-fig--tight {
		margin-bottom: 14px;
	}
}

@media (max-width: 480px) {
	.obd-hero-btns .kk-btn {
		flex: 1 1 100%;
		text-align: center;
	}

	.obd-mode-n {
		min-width: 30px;
		height: 26px;
		font-size: var(--k-text-s);
	}
}

/* --- Puces listées sous certains modes ------------------------------------ */

.obd-mode-items {
	--list-gap: 6px;
	margin-bottom: 4px;
}

.obd-mode-items li {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	font-size: var(--k-text-l);
	line-height: 1.55;
	color: var(--k-nav);
}

.obd-mode-items li::before {
	content: "·";
	flex: none;
	color: var(--k-orange);
	font-weight: 800;
	line-height: 1.5;
}

/* --- Niveaux de titre alignés sur le legacy ------------------------------
   Les groupes de protocoles sont des h3 et chaque protocole un h4 dans le
   legacy : la hiérarchie est celle du document, l'apparence celle de la
   maquette. Le libellé « Brochage du connecteur » n'est PAS un titre.
   ------------------------------------------------------------------------ */

.obd-sub-t {
	font-size: var(--k-h3-m);
	color: var(--k-charcoal);
	margin: 0 0 12px !important;
}

.obd-main h3.obd-proto-n {
	font-size: var(--k-h3-m);
	margin: 0 0 6px;
}

.obd-main h4.obd-proto-item-n {
	font-size: var(--k-text-l);
	font-weight: 700;
	margin: 0 0 4px;
}

/* --- Dates d'application --------------------------------------------------
   Le legacy enfermait ces dates dans un PNG. En tableau, elles sont lisibles
   par Google et par un lecteur d'écran. Le <caption> porte le titre que
   l'image avait en en-tête ; la légende reprend celle de l'image.
   ------------------------------------------------------------------------ */

.obd-dates caption {
	font-size: var(--k-text-s);
	font-weight: 700;
	color: var(--k-nav);
	text-align: left;
	padding: 0 0 9px;
}

.obd-dates td {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.obd-dates-legend {
	font-size: var(--k-text-s);
	color: var(--k-soft);
	margin: 9px 2px 18px;
}

/* Titre du legacy « Description de la norme OBD2 » : même apparence que les
   libellés .obd-sub-t, mais c'est un vrai titre de sous-section. */
.obd-main h3.obd-sub-t {
	font-size: var(--k-h3-m);
}