/* ==========================================================================
   Boutique — page catégorie et page produit.
   Maquettes : « Boutique klavkarr v2.dc.html » et « Page produit klavkarr 310.dc.html ».

   Réutilise le socle de components.css : kk-container, kk-section, kk-head,
   kk-card, kk-btn, kk-badge, kk-icotile, kk-reassure (bandeau), kk-press,
   kk-audio (lecteur de présentation), kk-stars, kk-faq (accordéons), kk-crumb,
   kk-cta-band. Ici uniquement ce que ces composants ne couvrent pas.
   ========================================================================== */

/* --- En-tête de catégorie ------------------------------------------------ */

.sh-hero-band {
	border-bottom: 1px solid var(--k-border);
}

.sh-hero-wrap {
	/* Héro serré en haut : le fil d'Ariane le précède immédiatement. */
	--hero-pt: clamp(14px, 2vw, 20px);
}

.sh-chapo {
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: clamp(16px, 1.9vw, 19.5px);
	line-height: 1.4;
	color: var(--k-nav);
	margin: 0 0 14px;
}

.sh-intro {
	font-size: var(--k-text-xl);
	line-height: var(--k-lh);
	color: var(--k-muted);
	margin: 0 0 18px;
	max-width: 62ch;
}

.sh-elig {
	display: flex;
	gap: 9px;
	flex-wrap: wrap;
}

.sh-elig li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--k-border);
	border-radius: 999px;
	padding: 8px 15px;
	font-size: var(--k-text-m);
	font-weight: 600;
	color: var(--k-body);
}

.sh-elig .sh-ok {
	color: var(--k-green);
	display: inline-flex;
}

/* Respiration entre le fil d'Ariane et le titre (valeur de la maquette). */

/* Le bloc « vous hésitez » ne doit pas coller au bandeau de réassurance. */
.sh-help-wrap {
	padding-bottom: clamp(34px, 4.5vw, 54px);
}

/* Paragraphe de clôture des cartes « pourquoi klavkarr » : aligné à gauche
   sous la grille, comme dans la maquette. */
.sh-why-note {
	font-size: var(--k-text-xl);
	line-height: var(--k-lh);
	color: var(--k-muted);
	margin: clamp(20px, 2.6vw, 28px) 0 0;
	max-width: 70ch;
}

/* --- Barre d'outils de la gamme ------------------------------------------ */

.sh-toolbar h2 {
	font-size: var(--k-h2-m);
	margin: 0;
}

.sh-filters {
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
}

.sh-filters-label {
	font-size: var(--k-text-s);
	font-weight: 700;
	color: var(--k-soft);
}

.sh-filter {
	background: #fff;
	border: 1px solid var(--k-border-warm);
	color: var(--k-charcoal);
	box-shadow: 0 3px 8px -6px rgba(40, 30, 15, 0.45);
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: var(--k-text-m);
	padding: 10px 17px;
	border-radius: 999px;
	transition: background 0.15s, border-color 0.15s, color 0.15s,
		box-shadow 0.15s, transform 0.15s;
}

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

.sh-filter:active {
	transform: translateY(0);
}

.sh-filter[aria-pressed="true"] {
	background: var(--k-orange-tint);
	border-color: var(--k-orange);
	color: var(--k-orange-dark);
	box-shadow: var(--k-shadow-orange-sm);
}

/* --- Sélecteur mobile (segmented control) -------------------------------- */

/* Rendu seulement sous 640px : au-dessus, ce sont les pastilles qui pilotent
   le même état (le JS écrit dans les deux). */
.sh-seg {
	display: none;
	flex: 1 1 100%;
}

.sh-seg-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 9px;
}

.sh-seg-label {
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: var(--k-text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--k-soft);
}

.sh-seg-all {
	padding: 6px 0;
	font-size: var(--k-text-s);
	font-weight: 700;
	color: var(--k-orange-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sh-seg-btns {
	display: flex;
	gap: 8px;
}

.sh-seg-btn {
	flex: 1 1 0;
	min-width: 0;
	min-height: 52px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	background: #fff;
	border: 1px solid var(--k-border-warm);
	color: var(--k-charcoal);
	box-shadow: 0 3px 8px -6px rgba(40, 30, 15, 0.45);
	border-radius: var(--k-r-tile);
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: var(--k-text-m);
	line-height: 1.15;
	padding: 8px 6px;
	transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.sh-seg-btn[aria-pressed="true"] {
	background: var(--k-orange-tint);
	border-color: var(--k-orange);
	color: var(--k-orange-dark);
	box-shadow: var(--k-shadow-orange-sm);
}

.sh-seg-hint {
	display: block;
	font-family: var(--k-font-body);
	font-weight: 600;
	font-size: 10.5px;
	letter-spacing: 0.01em;
	color: var(--k-faint);
}

.sh-seg-btn[aria-pressed="true"] .sh-seg-hint {
	color: var(--k-orange-dark);
}

.sh-seg-count {
	font-size: var(--k-text-s);
	font-weight: 600;
	color: var(--k-faint);
	margin: 9px 2px 0;
}

.sh-noresult {
	--empty-padding: 32px;
	--empty-radius: var(--k-r-lg);
}

.sh-noresult p {
	font-size: var(--k-text-xl);
	color: var(--k-muted);
	margin: 0 0 14px;
}

/* --- Grille des 3 modèles ------------------------------------------------ */

.sh-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 1.8vw, 22px);
	align-items: start;
}

@media (max-width: 980px) {
	.sh-grid {
		grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
	}
}

/* Filtre actif ne laissant qu'un ou deux modèles : la grille se recentre au
   lieu d'aligner les cartes à gauche avec du vide à droite.

   Uniquement au-delà de 980px : c'est là que la grille est figée à 3 colonnes.
   En dessous elle est déjà en auto-fill minmax(min(290px, 100%), 1fr), qui donne d'elle-
   même une ou deux colonnes selon la place — forcer 2 colonnes y écrasait les
   cartes sur un écran de téléphone. */
@media (min-width: 981px) {
	.sh-grid--1 {
		grid-template-columns: minmax(0, 400px);
		justify-content: center;
	}

	.sh-grid--2 {
		grid-template-columns: repeat(2, minmax(0, 400px));
		justify-content: center;
	}
}

.sh-prod {
	position: relative;
	--card-padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.sh-prod--featured {
	border-width: 2px;
	border-color: var(--k-orange);
}

/* Le lien de carte couvre la carte : le titre reste le libellé accessible,
   les éléments interactifs (audio, bouton) repassent au-dessus. */
.sh-prod-link {
	position: absolute;
	inset: 0;
	z-index: 1;
	text-indent: -9999px;
	overflow: hidden;
}

.sh-prod-media {
	position: relative;
	background: var(--k-tile);
	padding: clamp(18px, 2.4vw, 26px);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 180px;
}

.sh-prod-media img {
	max-height: 150px;
	width: auto;
	object-fit: contain;
}

.sh-prod-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	background: var(--k-tile);
	color: #6B5A42;
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: var(--k-text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 999px;
}

.sh-prod--featured .sh-prod-badge {
	background: var(--k-orange-tint);
	color: var(--k-orange-dark);
}

.sh-prod-body {
	padding: clamp(18px, 2.4vw, 24px);
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* Le nom du produit sortait en 24px, hors de l'échelle des libellés de carte
   (--k-h3-l vaut 20px). Il rentre dans le cran, et l'écart se règle par
   variable plutôt que par redéclaration. */
.sh-prod-name {
	--card-t-size: var(--k-h3-l);
	--card-t-gap: 6px;
}

.sh-tagline {
	font-size: var(--k-text-l);
	line-height: 1.5;
	color: var(--k-muted);
	margin: 0 0 12px;
	min-height: 42px;
}

.sh-rating {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 8px;
	font-size: var(--k-text-s);
	font-weight: 600;
	color: var(--k-soft);
}

.sh-price-row {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 20px;
}

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

.sh-price-suffix {
	font-size: var(--k-text-s);
	font-weight: 600;
	color: var(--k-soft);
}

.sh-label {
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: var(--k-text-xs);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--k-soft);
	margin: 0 0 12px;
}

.sh-sys {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 16px;
	/* Sans cela, la hauteur réservée ci-dessous étire les pastilles au lieu de
	   les laisser à leur taille et de packer les lignes en haut. */
	align-content: flex-start;
	align-items: flex-start;
}

/* Les pastilles réservent la hauteur du 310 (le plus fourni) pour que les
   rangées suivantes restent alignées entre les 3 cartes. */
@media (min-width: 641px) {
	.sh-sys {
		min-height: 130px;
	}
}

@media (min-width: 1081px) {
	.sh-sys {
		min-height: 98px;
	}
}

.sh-sys li {
	background: var(--k-green-tint);
	border: 1px solid var(--k-green-border);
	color: var(--k-green-ink);
	font-weight: 700;
	font-size: var(--k-text-s);
	padding: 5px 10px;
	border-radius: 8px;
}

.sh-caps {
	margin: 0 0 16px;
}

.sh-caps li {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 0;
	border-bottom: 1px solid var(--k-border);
	font-size: var(--k-text-m);
	font-weight: 600;
	color: var(--k-body);
}

.sh-caps li.is-off {
	color: var(--k-faint);
}

.sh-cap-mark {
	flex: none;
	width: 18px;
	text-align: center;
	color: var(--k-green);
	display: inline-flex;
	justify-content: center;
}

.sh-caps li.is-off .sh-cap-mark {
	color: var(--k-chevron);
}

/* Le lecteur audio et le bouton sont cliquables au-dessus du lien de carte. */
.sh-prod .kk-audio,
.sh-prod-foot {
	position: relative;
	z-index: 2;
}

.sh-prod-foot {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--k-border);
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.sh-prod-foot .kk-btn {
	justify-content: center;
	width: 100%;
}

/* Mobile : règles de la maquette (≤640px). La barre de filtres et la liste
   « ce qu'il sait faire » disparaissent — le détail est dans le comparatif
   juste en dessous —, les cartes et les pastilles se compactent. */
@media (max-width: 640px) {
	.sh-filters,
	.sh-caps,
	.sh-label--caps {
		display: none;
	}

	.sh-seg {
		display: block;
	}

	.sh-grid {
		gap: 14px;
	}

	.sh-prod-media {
		min-height: 150px;
		padding: 14px;
	}

	.sh-prod-media img {
		max-height: 118px;
	}

	.sh-tagline {
		min-height: 0;
		margin-bottom: 10px;
	}

	.sh-elig {
		gap: 6px;
	}

	.sh-elig li {
		padding: 6px 11px;
		font-size: var(--k-text-s);
		gap: 6px;
	}

	.sh-elig-since {
		display: none;
	}

	.sh-toolbar {
		--head-sh-gap: 12px;
	}
}

/* --- Aide au choix -------------------------------------------------------- */

.sh-help {
	border: 1px solid var(--k-border-warm);
	--card-radius: var(--k-r-card);
	--card-padding: 16px clamp(18px, 2.4vw, 24px);
	display: flex;
	align-items: center;
	gap: 14px 20px;
	flex-wrap: wrap;
}

/* En mobile la carte s'empile : la pastille se retrouvait calée à gauche,
   au-dessus d'un texte pleine largeur. */
@media (max-width: 640px) {
	.sh-help .kk-icotile {
		margin-inline: auto;
	}
}

.sh-help p {
	flex: 1 1 320px;
	min-width: 240px;
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: clamp(15.5px, 1.8vw, 18px);
	line-height: 1.35;
	margin: 0;
}

/* --- Comparatif ----------------------------------------------------------- */

.sh-compare-wrap {
	--card-padding: 0;
	--card-shadow: none;
	overflow-x: auto;
	--card-radius: var(--k-r-card);
	/* Les coins arrondis rognent les cellules : le rayon vit sur le conteneur,
	   comme dans la maquette. */
	overflow: hidden;
}

.sh-compare {
	width: 100%;
	min-width: 600px;
	table-layout: fixed;
	border-collapse: collapse;
	font-size: var(--k-text-m);
}

/* Proportions de la maquette : 1.7fr pour l'intitulé, 2.1fr partagés en 3. */
.sh-compare-col-label { width: 44.7%; }
.sh-compare-col-val   { width: 18.43%; }

/* L'en-tête est le composant kk-matrix-head (components.css). */

.sh-compare-price {
	display: block;
	font-size: var(--k-text-xs);
	color: var(--k-dark-lead);
	margin-top: 2px;
	font-weight: 600;
}

.sh-compare thead th.is-featured .sh-compare-price {
	color: var(--k-orange-glow);
}

.sh-compare tbody th {
	text-align: left;
	font-family: var(--k-font-title);
	font-weight: 700;
	color: var(--k-charcoal);
	padding: 15px 18px;
	border-top: 1px solid var(--k-border);
}

.sh-compare tbody td {
	text-align: center;
	font-weight: 700;
	padding: 15px 12px;
	border-top: 1px solid var(--k-border);
	color: var(--k-green);
}

/* icon() rend un SVG en display:block : sans marge auto il se colle à gauche
   de la cellule, alors que le tiret des lignes « non » est bien centré. */
.sh-compare tbody td svg {
	margin-inline: auto;
}

.sh-compare tbody td.is-featured {
	background: var(--k-tile);
}

.sh-compare tbody td.is-no {
	color: var(--k-chevron);
}

/* Le tableau reste un tableau en mobile : il se resserre au lieu de défiler
   (maquette). L'intitulé rend de la largeur aux 3 colonnes de valeurs. */
@media (max-width: 760px) {
	.sh-compare-wrap {
		overflow: hidden;
	}

	.sh-compare {
		min-width: 0;
	}

	.sh-compare-col-label { width: 50%; }
	.sh-compare-col-val   { width: 16.66%; }

	.sh-compare thead th {
		padding: 11px 2px;
		font-size: var(--k-text-s);
	}

	.sh-compare tbody th {
		padding: 11px 12px;
		font-size: var(--k-text-s);
		line-height: 1.3;
	}

	.sh-compare tbody td {
		padding: 11px 2px;
		font-size: var(--k-text-m);
	}

	.sh-compare thead th:first-child {
		padding-left: 12px;
	}

	.sh-compare-price {
		font-size: 10.5px;
	}

	.sh-compare-brand,
	.sh-compare-note {
		display: none;
	}
}

@media (max-width: 400px) {
	.sh-compare-col-label { width: 56.7%; }
	.sh-compare-col-val   { width: 14.43%; }

	.sh-compare tbody th {
		padding: 10px 9px;
		font-size: var(--k-text-s);
	}
}

/* F — la note du rail d'avis passe en gras foncé à côté des étoiles, et non
   dans le gris de chapeau de kk-head (maquette). */
.kk-head .pg-avis-note {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	font-size: var(--k-text-l);
	color: var(--k-body);
}

/* E — sur la page produit, les logos de presse sont plus grands et en
   couleur ; la boutique garde la bande grisée de sa propre maquette. */
.pg .kk-press-logos {
	gap: clamp(18px, 3vw, 40px);
}

.pg .kk-press-logos img {
	width: clamp(96px, 13vw, 140px);
	height: auto;
	filter: none;
	opacity: 1;
}

/* --- Calculateurs NON lus (210, 110) -------------------------------------- */

/* Ce que le boîtier ne lit pas, listé sous les calculateurs lus : la maquette
   le dit avant l'achat plutôt que de le laisser découvrir après. */
.pg-ecus--non {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--k-border);
}

.pg-ecus--non li {
	align-items: center;
	padding: 9px 0;
	border-bottom: 0;
	font-weight: 600;
	font-size: var(--k-text-l);
	color: var(--k-faint);
}

.pg-non {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: var(--k-tile);
	color: #A79781;
	font-weight: 700;
}

/* Fonction que ce boîtier ne fait pas : barrée et estompée, puce comprise.
   Même intention que .pg-ecus--non pour les calculateurs, appliquée aux
   items de .kk-doc-list de l'encart « tout ce que vous pouvez faire ». */
.kk-doc-list li.pg-fn-non {
	color: var(--k-faint);
	text-decoration: line-through;
}

.kk-doc-list li.pg-fn-non::before {
	background: var(--k-faint);
}

.pg-renvoi {
	font-size: var(--k-text-m);
	line-height: 1.55;
	color: var(--k-soft);
	margin: 12px 0 0;
}

/* --- Bien choisir (210, 110) ---------------------------------------------- */

.pg-choisir {
	--grid-min: 280px;
	--grid-gap: clamp(14px, 2.2vw, 22px);
}

.pg-choisir-yes,
.pg-choisir-no {
	border-radius: var(--k-r-lg);
	padding: clamp(20px, 2.8vw, 28px);
}

.pg-choisir-yes {
	background: var(--k-green-tint);
	border: 1px solid var(--k-green-border);
}

.pg-choisir-no {
	background: #fff;
	border: 1px solid var(--k-border-warm);
}

.pg-choisir-t {
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: var(--k-text-2xl);
	margin: 0 0 14px;
}

.pg-choisir-yes .pg-choisir-t {
	color: var(--k-green-ink);
}

.pg-choisir-no .pg-choisir-t {
	color: var(--k-orange-dark);
}

.pg-choisir ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pg-choisir li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 7px 0;
	font-size: var(--k-text-l);
	line-height: 1.55;
	font-weight: 600;
}

.pg-choisir li span {
	flex: none;
	display: inline-flex;
	margin-top: 1px;
}

.pg-choisir-yes li {
	color: var(--k-green-ink);
}

.pg-choisir-yes li span {
	color: var(--k-green);
}

.pg-choisir-no li {
	color: var(--k-nav);
}

.pg-choisir-no li span {
	color: var(--k-orange);
}

.pg-choisir-cta {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--k-border);
}

.pg-choisir-cmp {
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: var(--k-text-l);
	padding: 11px 4px;
	color: var(--k-nav);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pg-choisir-cmp:hover,
.pg-choisir-cmp:focus-visible {
	color: var(--k-orange-dark);
}

/* --- Rapports & suivi (page produit) -------------------------------------- */

/* La bande blanche « compatibilité » suit immédiatement : sans marge basse, la
   carte vient coller son bord. Padding logique (et pas le raccourci `padding`)
   pour ne pas écraser les marges latérales de kk-container. */
.pg-rep-wrap {
	padding-top: clamp(40px, 5.5vw, 72px);
	padding-bottom: clamp(40px, 5.5vw, 72px);
}

.pg-rep {
	--card-padding: clamp(22px, 3vw, 36px);
}

.pg-rep-head {
	max-width: 60ch;
}

.pg-rep-grid {
	--grid-min: 230px;
	--grid-gap: clamp(14px, 2vw, 20px);
}

.pg-rep-grid li {
	background: var(--k-bg);
	border: 1px solid var(--k-border);
	border-radius: var(--k-r-card);
	padding: clamp(16px, 2.2vw, 22px);
}

.pg-rep-grid .kk-icotile {
	--tile-size: 42px;
}

.pg-rep-t {
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: var(--k-text-xl);
	margin: 14px 0 6px;
}

.pg-rep-d {
	font-size: var(--k-text-m);
	line-height: 1.55;
	color: var(--k-soft);
	margin: 0;
}

/* --- Témoignage vidéo ----------------------------------------------------- */

.sh-testi {
	display: grid;
	grid-template-columns: 0.92fr 1fr;
	gap: clamp(18px, 2.6vw, 30px);
	align-items: center;
	--card-padding: clamp(16px, 2vw, 20px);
	margin-bottom: clamp(16px, 2.2vw, 22px);
}

@media (max-width: 820px) {
	.sh-testi {
		grid-template-columns: minmax(0, 1fr);
	}
}

.sh-testi-who {
	margin-bottom: 18px;
}

.sh-testi-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* --- Cartes d'avis --------------------------------------------------------- */

.sh-avis-grid {
	--grid-min: 300px;
	--grid-gap: clamp(14px, 2vw, 22px);
}

.sh-avis {
	--card-padding: 26px;
}

.sh-avis p {
	font-size: var(--k-text-l);
	line-height: var(--k-lh);
	color: var(--k-body);
	margin: 12px 0 18px;
}

.sh-avis-who {
	display: flex;
	align-items: center;
	gap: 11px;
}

.sh-avis-ini {
	--tile-size: 36px;
	--tile-radius: 50%;
	--tile-color: var(--k-orange-dark);
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: var(--k-text-l);
}

.sh-avis-name {
	font-weight: 700;
	font-size: var(--k-text-m);
}

.sh-avis-date {
	font-size: var(--k-text-s);
	color: var(--k-faint);
}

/* --- Conseils -------------------------------------------------------------- */

.sh-tips {
	--grid-min: 250px;
	--grid-gap: 12px;
}

/* Carte « par thème » de la maquette Blog : libellé et chevron encadré à
   droite (la pastille d'icône de la maquette n'est pas reprise). */
.sh-tip {
	display: flex;
	align-items: center;
	gap: 15px;
	background: var(--k-bg-alt);
	border: 1px solid var(--k-border);
	border-radius: var(--k-r-card);
	padding: 20px 22px;
	text-decoration: none;
	color: var(--k-charcoal);
	transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.sh-tip:hover,
.sh-tip:focus-visible {
	border-color: var(--k-orange);
	transform: translateY(-3px);
	box-shadow: var(--k-shadow-lift);
}

.sh-tip-t {
	flex: 1;
	min-width: 0;
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: var(--k-text-xl);
	line-height: 1.3;
}

.sh-tip-go {
	--tile-size: 34px;
	--tile-color: var(--k-orange-dark);
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: var(--k-text-3xl);
	line-height: 1;
	padding-bottom: 2px;
	transition: transform 0.16s, background 0.16s;
}

.sh-tip:hover .sh-tip-go,
.sh-tip:focus-visible .sh-tip-go {
	transform: translateX(3px);
	background: #F9DEB7;
}

/* ==========================================================================
   Page produit (klavkarr 310) — maquette « Page produit klavkarr 310.dc.html »,
   variante A du héro (celle affichée par défaut dans la maquette).
   ========================================================================== */

.pg {
	padding-bottom: 78px; /* place pour la barre d'achat fixe */
}

.pg-hero {
	background: linear-gradient(180deg, var(--k-bg) 0%, var(--k-bg-alt) 100%);
	/* Le haut reprend celui de .sh-hero-wrap : le fil d'Ariane doit se poser à
	   la même hauteur sur la boutique et sur la page produit. */
	padding: clamp(14px, 2vw, 20px) 0 clamp(28px, 4vw, 52px);
}

.pg-hero-inner {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(24px, 4vw, 52px);
	align-items: flex-start;
}

.pg-gallery {
	flex: 1 1 380px;
	min-width: min(300px, 100%);
}

.pg-main {
	--card-shadow: none;
	--card-padding: clamp(18px, 3vw, 38px);
}

.pg-main img {
	width: 100%;
	height: clamp(260px, 34vw, 420px);
	object-fit: contain;
}

.pg-thumbs {
	display: flex;
	gap: 10px;
	margin-top: 14px;
	flex-wrap: wrap;
}

.pg-thumb {
	width: 74px;
	height: 74px;
	border-radius: var(--k-r-tile);
	background: #fff;
	border: 2px solid var(--k-border);
	padding: 7px;
	opacity: 0.55;
	transition: border-color 0.15s, opacity 0.15s;
}

.pg-thumb[aria-current="true"] {
	border-color: var(--k-orange);
	opacity: 1;
}

.pg-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Galerie défilante et pastilles : mobile uniquement (maquette). */
.pg-swipe,
.pg-dots {
	display: none;
}

@media (max-width: 760px) {
	.pg-main,
	.pg-thumbs {
		display: none;
	}

	.pg-swipe {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 0 0 6px;
	scrollbar-width: none;
}

	.pg-swipe::-webkit-scrollbar {
		display: none;
	}

	.pg-swipe > li {
		flex: 0 0 100%;
		scroll-snap-align: center;
		background: #fff;
		border: 1px solid var(--k-border);
		border-radius: var(--k-r-lg);
		padding: 18px;
	}

	.pg-swipe img {
		width: 100%;
		height: 260px;
		object-fit: contain;
	}

	.pg-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2px;
	margin: 10px 0 0;
}

	/* Le bouton fait 24px pour rester atteignable au doigt ; seul le point de
	   8px qu'il contient se voit (maquette). */
	.pg-dots button {
		width: 24px;
		height: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pg-dots button span {
		display: block;
		width: 8px;
		height: 8px;
		border-radius: 999px;
		background: #DCD3C4;
		transition: width 0.18s, background 0.18s;
	}

	.pg-dots button[aria-current="true"] span {
		width: 24px;
		background: var(--k-orange);
	}
}

/* Bandeau de réassurance de la page produit : 2 colonnes plutôt que 4
   colonnes écrasées dès que la largeur ne suit plus (maquette). */
@media (max-width: 640px) {
	.pg-reassure {
		grid-template-columns: 1fr 1fr;
	}
}

/* Le lecteur de présentation, sous le lien de compatibilité. */
.pg-buy-audio {
	margin-top: 18px;
}

/* Carte d'achat. Le nom du produit y est le H1 de la page : dans une colonne
   large de 430px au plus, la borne haute du composant déborderait. */
.pg-buy {
	flex: 1 1 360px;
	min-width: min(300px, 100%);
	max-width: 430px;
	position: sticky;
	top: 84px;
	--card-padding: clamp(22px, 3vw, 32px);
	--h1-max: 42px;
}

.pg-buy h1 {
	margin: 14px 0 8px;
}

.pg-buy-rating {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	font-size: var(--k-text-m);
	font-weight: 600;
	color: var(--k-nav);
}

.pg-buy-lead {
	--lead-gap: 18px;
	--lead-width: none;
}

.pg-buy-price {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 6px;
}

.pg-buy-price strong {
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: 40px;
}

.pg-buy-price span {
	font-size: var(--k-text-m);
	color: var(--k-soft);
	font-weight: 600;
}

.pg-buy form {
	margin: 20px 0 0;
}

.pg-buy .kk-btn--primary {
	width: 100%;
	justify-content: center;
	font-size: var(--k-text-2xl);
	padding: 16px;
}

.pg-buy-compat {
	display: block;
	margin-top: 12px;
	text-align: center;
	font-size: var(--k-text-m);
	font-weight: 600;
	color: var(--k-nav);
	text-underline-offset: 2px;
}

.pg-assur {
	--list-gap: 14px;
	margin: 22px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--k-border);
}

.pg-ok {
	--tile-size: 26px;
	--tile-radius: 8px;
}

/* Corps de titre par section, repris de la maquette : la hiérarchie descend au
   fil de la page, là où kk-head impose un corps unique.
   xl = comment ça marche, ce que lit le 310 ; l = compatibilité ;
   m = rapports & suivi, avis ; s = contenu du colis ; xs = déballage, FAQ. */
.pg-head--xl h2 {
	font-size: var(--k-h2-xl);
	letter-spacing: -0.03em;
}

.pg-head--l h2 {
	font-size: var(--k-h2-l);
}

.pg-head--m h2 {
	font-size: var(--k-h2-m);
}

.pg-head--s h2 {
	font-size: var(--k-h2-s);
}

.pg-head--xs h2 {
	font-size: var(--k-h2-s);
}

/* Un titre plus court appelle moins de blanc que le grand chapeau de kk-head. */
.pg-head--m,
.pg-head--s,
.pg-head--xs {
	--head-mb: clamp(20px, 2.6vw, 30px);
}

/* Respiration entre le fil d'Ariane et le contenu du héro. */
.pg-hero .kk-crumb {
	margin-bottom: clamp(18px, 2.4vw, 26px);
}

/* Les sur-titres de section sont ORANGE sur cette page (maquette), et non
   bleus comme le défaut de kk-eyebrow. */
.pg .kk-eyebrow {
	color: var(--k-orange-dark);
}

/* Sur la bande sombre, l'orange lisible sur fond marine. */
.pg-value .kk-eyebrow {
	color: var(--k-orange-glow);
}

/* Encart « selon le véhicule » : pastille orange clair centrée sous le
   chapeau de section (et non un encadré pleine largeur). */
.kk-head .pg-note {
	margin-top: 14px;
}

.pg-note {
	display: inline-flex;
	align-items: flex-start;
	gap: 9px;
	text-align: left;
	background: var(--k-orange-tint);
	border: 1px solid var(--k-border-warm);
	border-radius: var(--k-r-tile);
	padding: 11px 16px;
	font-size: var(--k-text-m);
	line-height: 1.5;
	font-weight: 600;
	color: var(--k-warm-ink);
	margin: 0;
	max-width: 52ch;
}

/* Carte des calculateurs */
.pg-ecu-card {
	--card-padding: clamp(20px, 2.8vw, 34px);
	margin-top: clamp(20px, 2.6vw, 28px);
}

.pg-ecu-sub {
	font-size: var(--k-text-l);
	line-height: 1.55;
	color: var(--k-soft);
	margin: 0 0 16px;
}

/* Les deux titres de la carte « systèmes » : « Quels systèmes ? » puis « Sur
   quels moteurs ? ». Ils forment une paire, chacun introduisant une liste —
   ce sont de vrais niveaux de plan, et ils partagent donc une seule règle. */
.pg-ecu-h,
.pg-engines-h {
	font-size: var(--k-h3-l);
	margin: 0 0 4px;
}

.pg-engines-sub {
	font-size: var(--k-text-m);
	line-height: 1.5;
	color: var(--k-soft);
	margin: 0;
}

/* Bande de valeur */
.pg-value {
	background: var(--k-gradient-dark);
	border-radius: var(--k-r-lg);
	padding: clamp(34px, 5vw, 62px) clamp(20px, 4vw, 44px);
	text-align: center;
	color: var(--k-dark-strong);
}

.pg-value h2 {
	font-size: var(--k-h2-xl);
	margin: 0 auto 18px;
	max-width: 18ch;
}

.pg-value p {
	font-size: clamp(16px, 1.6vw, 18px);
	line-height: var(--k-lh);
	color: var(--k-dark-body);
	max-width: 56ch;
	margin: 0 auto;
}

/* Les 3 étapes */
.pg-steps {
	--grid-min: 240px;
	--grid-gap: clamp(16px, 2.5vw, 28px);
}

.pg-step {
	--card-padding: clamp(22px, 3vw, 32px);
}

.pg-step-n {
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: var(--k-text-3xl);
	width: 46px;
	height: 46px;
	border-radius: var(--k-r-tile);
	background: var(--k-orange-tint);
	color: var(--k-orange);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}

/* Calculateurs et carburants */
.pg-ecus {
	--grid-min: 215px;
	--grid-gap: 2px clamp(18px, 3vw, 36px);
}

.pg-ecus li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 11px 0;
	border-bottom: 1px solid var(--k-tile);
}

.pg-ecu-name {
	display: block;
	font-weight: 700;
	font-size: var(--k-text-l);
}

.pg-ecu-tip {
	display: block;
	font-size: var(--k-text-s);
	line-height: 1.45;
	color: var(--k-soft);
	margin-top: 2px;
}

.pg-fuels {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.pg-fuels li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--k-bg);
	border: 1px solid var(--k-border);
	border-radius: 999px;
	padding: 8px 15px;
	font-weight: 700;
	font-size: var(--k-text-m);
}

.pg-engines {
	margin-top: clamp(22px, 2.6vw, 30px);
	padding-top: clamp(20px, 2.4vw, 26px);
	border-top: 1px solid var(--k-border);
	display: flex;
	align-items: center;
	gap: clamp(14px, 2.4vw, 30px);
	flex-wrap: wrap;
}

.pg-engines > div:first-child {
	flex: 1 1 230px;
	min-width: 210px;
}

/* Les deux dépliants « fonctions » et « caractéristiques » suivent la largeur
   de la section, contrairement à la FAQ de bas de page (kk-faq, 880 px). */
.pg-expand {
	max-width: none;
	margin-top: 24px;
}

/* Ce que vous allez recevoir */
.pg-included {
	--grid-min: 220px;
	--grid-gap: clamp(16px, 2.5vw, 24px);
	max-width: 880px;
	margin: 0 auto;
}

.pg-included li {
	text-align: center;
	padding: clamp(22px, 3vw, 30px);
	background: #fff;
	border: 1px solid var(--k-border);
	border-radius: var(--k-r-lg);
}

.pg-included-ico {
	margin-bottom: 12px;
	color: var(--k-orange);
	display: flex;
	justify-content: center;
}

/* Avis : rail défilant */
.pg-avis-rail {
	position: relative;
}

.pg-avis-scroll {
	display: flex;
	gap: clamp(14px, 2vw, 22px);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding: 2px 2px 8px;
	scrollbar-width: none;
}

.pg-avis-scroll::-webkit-scrollbar {
	display: none;
}

.pg-avis-scroll > li {
	flex: 0 0 clamp(268px, 30%, 340px);
	scroll-snap-align: start;
	background: #fff;
	border: 1px solid var(--k-border);
	border-radius: var(--k-r-card);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-self: start;
}

.pg-avis-scroll p {
	font-size: var(--k-text-l);
	line-height: var(--k-lh);
	color: var(--k-body);
	margin: 0;
	flex: 1;
	/* Sans écrêtage, la carte la plus longue de la base impose sa hauteur à
	   toute la rangée : le rail se retrouvait avec des cartes géantes. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 8;
	line-clamp: 8;
	overflow: hidden;
}

.pg-avis-nav {
	position: absolute;
	top: calc(50% - 4px);
	transform: translateY(-50%);
	z-index: 3;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--k-border-warm);
	color: var(--k-charcoal);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.14s, background 0.14s, color 0.14s;
}

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

.pg-avis-nav--prev { left: 6px; }

.pg-avis-nav--prev svg {
	transform: scaleX(-1);
}
.pg-avis-nav--next { right: 6px; }

@media (max-width: 760px) {
	.pg-avis-scroll > li {
		flex: 0 0 88%;
		scroll-snap-align: center;
	}

	.pg-avis-nav {
		width: 38px;
		height: 38px;
	}
}

/* Barre d'achat fixe */
.pg-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--k-border);
	box-shadow: 0 -8px 24px -16px rgba(40, 30, 15, 0.4);
}

.pg-bar-inner {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 11px clamp(16px, 4vw, 40px);
}

.pg-bar img {
	height: 42px;
	width: 42px;
	object-fit: contain;
	flex: none;
}

.pg-bar-name {
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: var(--k-text-l);
	line-height: 1.1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pg-bar-meta {
	font-size: var(--k-text-s);
	color: var(--k-soft);
	display: flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}

.pg-bar-buy {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 14px;
}

.pg-bar-price {
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: 22px;
}

.pg-bar-title {
	min-width: 0;
	overflow: hidden;
}

.pg-bar-cta {
	flex: none;
	white-space: nowrap;
}

/* Sous 520px la vignette et la note s'effacent, le bouton se resserre : il
   ne reste que le nom, le prix et l'action (maquette). */
@media (max-width: 560px) {
	.pg-bar-img,
	.pg-bar-meta {
		display: none;
	}

	.pg-bar-inner {
		gap: 10px;
	}

	.pg-bar-cta {
		--btn-size: var(--k-text-l);
		--btn-padding: 12px 18px;
	}
}

/* ==========================================================================
   Comparatif (clé COMPARE) — maquette « Comparatif klavkarr.dc.html ».
   Le reste de la page emprunte au socle : kk-faq pour les blocs dépliables,
   kk-card / kk-btn / kk-stars / sh-label / pg-note pour tout le
   reste. Ici uniquement la grille de comparaison, qui n'existe nulle part
   ailleurs (4 colonnes, en-tête flottant, défilement horizontal en mobile).
   ========================================================================== */

.cmp-hero {
	text-align: center;
}

/* Le héro est centré (maquette), mais pas le fil d'Ariane : il reste calé à
   gauche comme sur la boutique et les pages produit. */
.cmp-hero .kk-crumb {
	text-align: left;
}

.cmp-lead {
	--lead-gap: 0;
	--lead-width: 60ch;
}

/* Pas de plafond propre : le tableau tient la même largeur que le reste de la
   page (kk-container), sinon il paraît rétréci entre le héro et les cartes de
   conseil. */
.cmp-wrap {
	padding-top: clamp(20px, 3vw, 32px);
	padding-bottom: clamp(30px, 4vw, 44px);
}

/* Le tableau ne se resserre pas : à 4 colonnes il deviendrait illisible.
   Il défile horizontalement, l'intitulé gardant une largeur utilisable. */
.cmp-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.cmp-inner {
	min-width: 600px;
}

/* Proportions du comparatif de la boutique (.sh-compare) : 44% pour
   l'intitulé, 18,5% par modèle. Le 1.7fr de la maquette était calculé pour un
   tableau de 600px ; étiré à 1100px il donnait des colonnes de 217px pour une
   seule coche, l'intitulé se retrouvant à l'étroit. */
.cmp-row {
	display: grid;
	grid-template-columns: minmax(215px, 2.4fr) repeat(3, minmax(min(78px, 100%), 1fr));
	align-items: stretch;
}

/* --- Cartes de tête, hors tableau ---------------------------------------- */

.cmp-heads {
	padding-bottom: 16px;
}

.cmp-head-cell {
	padding: 11px 5px 0;
}

.cmp-head {
	position: relative;
	--card-radius: var(--k-r-card);
	--card-padding: 16px 10px 14px;
	text-align: center;
}

.cmp-head--featured {
	background: var(--k-tile);
	border: 2px solid var(--k-orange);
	box-shadow: var(--k-shadow-orange-lg);
}

.cmp-head-badge {
	position: absolute;
	top: -11px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--k-orange);
	color: #fff;
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: 10.5px;
	line-height: 1;
	padding: 5px 12px;
	border-radius: 999px;
	white-space: nowrap;
}

.cmp-head img {
	height: 82px;
	width: auto;
	object-fit: contain;
	margin: 0 auto 8px;
}

.cmp-head-name {
	display: block;
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: var(--k-text-l);
	line-height: 1.1;
}

.cmp-head-price {
	display: block;
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: var(--k-text-3xl);
	margin-top: 3px;
}

.cmp-head .kk-btn {
	--btn-size: 12.5px;
	--btn-padding: 9px;
	--btn-radius: 10px;
	display: flex;
	margin-top: 10px;
}

/* --- Grille de comparaison ------------------------------------------------ */

.cmp-table {
	--card-padding: 0;
	--card-radius: var(--k-r-card);
	overflow: hidden;
}

/* L'en-tête est le composant kk-matrix-head (components.css) ; il ne reste
   ici que le non-repli des noms de modèle. */
.cmp-thead > div {
	white-space: nowrap;
}

.cmp-line {
	border-top: 1px solid var(--k-border);
	font-size: var(--k-text-m);
}

.cmp-label {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 15px 18px;
	font-family: var(--k-font-title);
	font-weight: 700;
	color: var(--k-charcoal);
}

.cmp-label--fn {
	padding: 13px 18px;
	font-family: var(--k-font-body);
	font-weight: 600;
	color: var(--k-body);
}

.cmp-val {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 13px 12px;
}

.cmp-val.is-featured {
	background: rgba(242, 150, 68, 0.06);
}

.cmp-yes {
	display: inline-flex;
	color: var(--k-green);
}

/* Absence : un trait neutre, pas une croix — on ne stigmatise pas un modèle
   d'entrée de gamme. */
.cmp-no {
	display: inline-block;
	width: 14px;
	height: 2px;
	border-radius: 2px;
	background: #D8CDBA;
}

/* Intertitre de groupe à l'intérieur d'un tableau déplié. */
.cmp-group {
	margin: 0;
	padding: 10px 18px;
	background: var(--k-tile);
	border-top: 1px solid var(--k-border);
	border-left: 3px solid var(--k-orange);
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: var(--k-text-xs);
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--k-warm-ink);
}

/* Pastille d'icône de voyant, aux trois tailles de la maquette. */
.cmp-ico {
	--tile-size: 40px;
	--tile-radius: 10px;
	--tile-bg: var(--k-tile);
	border: 1px solid var(--k-border);
	overflow: hidden;
}

.cmp-ico img {
	width: auto;
	max-width: 30px;
	max-height: 30px;
}

.cmp-ico--lg {
	--tile-size: 42px;
}

/* --- Blocs dépliables (kk-faq) ------------------------------------------- */

.cmp-detail {
	margin-top: 26px;
}

.cmp-detail .pg-note {
	display: flex;
	max-width: none;
	margin-bottom: 16px;
}

/* kk-faq est calibré pour une colonne de lecture (880px centrés). Ici les
   blocs contiennent le tableau comparatif : ils doivent tenir la même largeur
   que la matrice au-dessus, sinon le tableau paraît rétrécir d'un bloc à
   l'autre. */
.cmp-faq {
	max-width: none;
	margin: 0;
}

.cmp-sum {
	gap: 13px;
}

.cmp-sum-txt {
	flex: 1;
	min-width: 0;
}

.cmp-sum-count {
	display: block;
	font-size: var(--k-text-s);
	font-weight: 600;
	color: var(--k-soft);
	margin-top: 2px;
}

/* Le tableau déplié occupe toute la largeur du bloc, sans le rembourrage de
   réponse de kk-faq. */
.cmp-faq-a {
	padding: 0;
}

.cmp-faq-a .cmp-table {
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

@media (max-width: 820px) {
	.cmp-pre {
		display: none;
	}
}

/* Mobile : le tableau se resserre au lieu de défiler. Pour lui rendre la
   largeur nécessaire, la rangée de cartes produit disparaît — les mêmes
   modèles, avec leur prix et leur bouton, sont repris juste en dessous par
   « Lequel est fait pour vous ? ». */
@media (max-width: 760px) {
	.cmp-scroll {
		overflow: visible;
	}

	.cmp-inner {
		min-width: 0;
	}

	.cmp-heads {
		display: none;
	}

	.cmp-row {
		grid-template-columns: minmax(0, 2.6fr) repeat(3, minmax(0, 1fr));
	}

	.cmp-thead > div {
		padding: 11px 2px;
		font-size: var(--k-text-s);
	}

	.cmp-thead > div:first-child {
		padding-left: 12px;
	}

	.cmp-label {
		gap: 8px;
		padding: 11px 12px;
		font-size: var(--k-text-s);
		line-height: 1.3;
	}

	.cmp-label--fn {
		padding: 11px 12px;
		font-size: var(--k-text-s);
	}

	.cmp-val {
		padding: 11px 2px;
	}

	/* À peine plus petites qu'en desktop : le voyant doit rester reconnaissable,
	   c'est lui qui identifie la ligne. */
	.cmp-ico {
		--tile-size: 36px;
		--tile-radius: 9px;
	}

	.cmp-ico img {
		max-width: 26px;
		max-height: 26px;
	}

	.cmp-group {
		padding: 9px 12px;
	}

	.cmp-sum {
		gap: 10px;
	}
}

@media (max-width: 400px) {
	.cmp-row {
		grid-template-columns: minmax(0, 2.9fr) repeat(3, minmax(0, 1fr));
	}

	.cmp-label {
		padding: 10px 9px;
		font-size: var(--k-text-s);
	}

	.cmp-label--fn {
		padding: 10px 9px;
		font-size: var(--k-text-s);
	}
}

/* ==========================================================================
   Nos engagements (clé DELIVERY) — maquette « Nos engagements.dc.html ».
   Le reste vient du socle : kk-card, kk-icotile, kk-badge, kk-btn,
   kk-cta-band (CTA final et « qui sommes-nous »). Ici seulement le reste.
   ========================================================================== */

.eng-hero {
	padding-top: clamp(40px, 5vw, 70px);
	padding-bottom: clamp(30px, 4vw, 46px);
}

/* La maquette pose le contenu dans la colonne de gauche d'une grille
   1.25fr / 0.85fr, la droite étant restée vide : même largeur de texte, sans
   la colonne fantôme. */
.eng-hero-inner {
	max-width: 700px;
}

.eng-lead {
	--lead-gap: 24px;
	--lead-width: none;
}

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

.eng-chip {
	padding: 8px 14px;
}


/* --- Les 7 engagements ---------------------------------------------------- */

.eng-pillars-band {
	margin-top: clamp(14px, 2vw, 24px);
}

.eng-pillars {
	--grid-min: 250px;
	--grid-gap: 16px;
	padding-top: clamp(32px, 4vw, 52px);
	padding-bottom: clamp(32px, 4vw, 52px);
}

/* Pas de fond propre : une carte du site est BLANCHE sur un fond greige. Ces
   sept-là faisaient l'inverse — greiges sur une bande blanche — et se
   fondaient dans leur bande au lieu de s'en détacher. */
.eng-pillar {
	--card-padding: 24px;
}

.eng-pillar-t {
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: var(--k-text-2xl);
	margin: 15px 0 7px;
}

.eng-pillar-d {
	font-size: var(--k-text-m);
	line-height: var(--k-lh);
	color: var(--k-nav);
	margin: 0;
}

/* Teintes de pastille, sur le kk-icotile du socle. */
.eng-tile--orange { --tile-bg: var(--k-hero-tint); --tile-color: var(--k-orange-dark); }
.eng-tile--neutre { --tile-bg: var(--k-tile); --tile-color: var(--k-body); }
.eng-tile--rouge  { --tile-bg: var(--k-red-tint); --tile-color: var(--k-red); }

/* --- Livraison et suivi --------------------------------------------------- */

.eng-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 4vw, 52px);
	align-items: center;
}

@media (max-width: 760px) {
	.eng-split {
		grid-template-columns: 1fr;
	}
}

.eng-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: var(--k-text-s);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--k-blue);
	margin: 0;
}

.eng-split h2 {
	font-size: var(--k-h2-l);
	margin: 12px 0 14px;
}

.eng-p {
	--lead-gap: 20px;
	--lead-width: 48ch;
}

.eng-options li {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #fff;
	border: 1px solid var(--k-border);
	border-radius: var(--k-r-tile);
	padding: 13px 16px;
	font-weight: 700;
	font-size: var(--k-text-l);
}

.eng-opt-ico {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--k-hero-tint);
	color: var(--k-orange-dark);
}

.eng-track {
	--card-padding: 28px;
	--card-shadow: 0 24px 44px -28px rgba(40, 30, 15, 0.3);
}

.eng-track-title {
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: var(--k-text-s);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--k-faint);
	margin: 0 0 20px;
}

.eng-track ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.eng-track li {
	display: flex;
	gap: 15px;
	padding-bottom: 18px;
	position: relative;
}

/* Le filet relie les étapes ; la dernière n'a pas de suite. */
.eng-track li:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 14px;
	top: 32px;
	bottom: 4px;
	width: 2px;
	background: var(--k-border);
}

.eng-track li:last-child {
	padding-bottom: 0;
}

.eng-track-n {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--k-charcoal);
	color: var(--k-dark-strong);
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: var(--k-text-s);
}

.eng-track li.is-done .eng-track-n {
	background: var(--k-green-tint);
	color: var(--k-green-ink);
}

.eng-track-t {
	display: block;
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: var(--k-text-l);
	line-height: 1.2;
}

.eng-track-d {
	display: block;
	font-size: var(--k-text-m);
	font-weight: 600;
	color: var(--k-soft);
	margin-top: 3px;
}

/* --- Paiement (bande sombre) ---------------------------------------------- */

/* kk-on-dark ne colore que les liens : sur cette bande le titre et le texte
   héritaient sinon du charcoal de la page, illisible sur le bleu. */
.eng-pay {
	background: var(--k-gradient-dark);
	color: var(--k-dark-strong);
}

.eng-pay .kk-head h2 {
	color: var(--k-dark-strong);
}

.eng-pay .kk-head p {
	color: var(--k-dark-muted);
}

.eng-pay-head {
	max-width: 620px;
	margin-inline: auto;
}

.eng-pay-head .eng-eyebrow {
	color: var(--k-orange-glow);
}

.eng-pay-grid {
	--grid-min: 180px;
	--grid-gap: 14px;
	max-width: 880px;
	margin: 0 auto;
}

.eng-pay-grid li {
	display: flex;
	align-items: center;
	gap: 13px;
	background: var(--k-dark-surface);
	border: 1px solid var(--k-dark-line);
	border-radius: var(--k-r-card);
	padding: 20px;
}

.eng-pay-ico {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.1);
	color: var(--k-orange-glow);
}

.eng-pay-t {
	display: block;
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: var(--k-text-l);
}

.eng-pay-d {
	display: block;
	font-size: var(--k-text-s);
	font-weight: 600;
	color: var(--k-dark-lead);
}

/* --- Zones, mises à jour, remboursement ----------------------------------- */

.eng-duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

@media (max-width: 760px) {
	.eng-duo {
		grid-template-columns: 1fr;
	}
}

.eng-note {
	--card-padding: 28px;
}

.eng-note .kk-icotile {
	--tile-size: 48px;
}

/* La politique de remboursement est plus longue que les deux autres cartes :
   elle prend la largeur sous elles. */
.eng-note--wide {
	grid-column: 1 / -1;
}

.eng-note .kk-card-t {
	--card-t-size: var(--k-h3-l);
	--card-t-gap: 10px;
	margin-top: 16px;
}

.eng-note p {
	font-size: var(--k-text-l);
	line-height: var(--k-lh);
	color: var(--k-nav);
	margin: 0 0 14px;
}

.eng-note-foot {
	display: flex;
	align-items: center;
	gap: 9px;
	font-weight: 700;
	font-size: var(--k-text-m);
	color: var(--k-body);
	margin: 0;
}

.eng-note-foot a {
	color: var(--k-orange-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ==========================================================================
   Nos offres d'emploi (clé JOBS) — maquette « Emploi.dc.html ».
   Emprunte au socle (kk-card, kk-icotile, kk-btn, kk-cta-band) et à la bande
   sombre écrite pour « nos engagements ».
   ========================================================================== */

.em-hero {
	padding-top: clamp(22px, 3vw, 34px);
	padding-bottom: clamp(32px, 4.5vw, 52px);
}

.em-split {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}

@media (max-width: 820px) {
	.em-split {
		grid-template-columns: minmax(0, 1fr);
	}
}

.em-intro {
	font-size: var(--k-text-2xl);
	line-height: var(--k-lh);
	color: var(--k-nav);
	margin: 0 0 14px;
}

.em-intro + .em-intro {
	margin-bottom: 24px;
}

.em-hero-img {
	display: flex;
	justify-content: center;
}

.em-hero-img img {
	width: 100%;
	max-width: 440px;
	height: auto;
	border-radius: var(--k-r-lg);
	box-shadow: var(--k-shadow-lift);
}

/* --- Repères chiffrés ----------------------------------------------------- */

.em-facts {
	--grid-min: 190px;
	--grid-gap: clamp(14px, 2.4vw, 26px);
	padding-top: clamp(26px, 3.4vw, 40px);
	padding-bottom: clamp(26px, 3.4vw, 40px);
}

.em-fact {
	display: flex;
	align-items: flex-start;
	gap: 13px;
}

.em-fact-ico {
	--tile-size: 42px;
}

.em-fact-v {
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: clamp(19px, 2.2vw, 23px);
	letter-spacing: -0.01em;
	line-height: 1.1;
	margin: 0 0 2px;
}

.em-fact-k {
	font-size: var(--k-text-m);
	line-height: 1.45;
	font-weight: 600;
	color: var(--k-soft);
	margin: 0;
}

/* --- Offres --------------------------------------------------------------- */

.em-offers {
	padding-top: clamp(38px, 5vw, 64px);
	padding-bottom: clamp(20px, 3vw, 32px);
	scroll-margin-top: 20px;
}

.em-offers-head h2 {
	font-size: var(--k-h2-l);
	margin: 0 0 6px;
}

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

.em-count {
	font-family: var(--k-font-title);
	/* Encre plus claire que le --outline générique : ce compteur accompagne un
	   titre, il ne doit pas peser autant que lui. */
	color: var(--k-nav);
	padding: 8px 15px;
}

/* État sans offre : c'est le cas aujourd'hui sur les 3 domaines. */
.em-empty {
	--empty-padding: clamp(26px, 4vw, 42px);
	--empty-radius: var(--k-r-lg);
}

.em-empty-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: var(--k-r-card);
	background: var(--k-tile);
	color: var(--k-soft);
	margin: 0 auto 16px;
}

.em-empty-t {
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: clamp(18px, 2.2vw, 22px);
	margin: 0 0 8px;
}

.em-empty-d {
	font-size: var(--k-text-xl);
	line-height: var(--k-lh);
	color: var(--k-soft);
	margin: 0 auto;
	max-width: 52ch;
}

/* Liste des offres : rendue seulement quand il y en a. */
.em-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.em-offer {
	--card-padding: clamp(18px, 2.4vw, 24px);
	display: flex;
	align-items: center;
	gap: clamp(14px, 2.4vw, 26px);
	flex-wrap: wrap;
	text-decoration: none;
	color: inherit;
}

.em-offer-body {
	flex: 1 1 320px;
	min-width: min(260px, 100%);
}

.em-offer-tags {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 9px;
}

.em-tag {
	display: inline-flex;
	align-items: center;
	background: var(--k-tile);
	color: var(--k-body);
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: var(--k-text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 4px 11px;
	border-radius: 999px;
}

.em-tag--type {
	background: var(--k-orange-tint);
	color: var(--k-orange-dark);
	font-weight: 800;
}

.em-offer-t {
	display: block;
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: var(--k-text-3xl);
	margin-bottom: 5px;
}

.em-offer-d {
	display: block;
	font-size: var(--k-text-l);
	line-height: var(--k-lh);
	color: var(--k-soft);
}

.em-offer-go {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: var(--k-text-l);
	color: var(--k-orange-dark);
}

/* --- Candidature spontanée ------------------------------------------------ */

.em-spont-wrap {
	padding-top: clamp(20px, 3vw, 32px);
	padding-bottom: clamp(38px, 5vw, 60px);
	scroll-margin-top: 20px;
}

.em-spont {
	--grid-min: 270px;
	--grid-gap: clamp(24px, 4vw, 48px);
	background: var(--k-gradient-dark);
	color: var(--k-dark-strong);
	border-radius: var(--k-r-lg);
	padding: clamp(28px, 4vw, 48px);
	align-items: center;
}
.em-spont h2 {
	font-size: var(--k-h2-l);
	margin: 18px 0 14px;
}

.em-spont p {
	font-size: var(--k-text-xl);
	line-height: var(--k-lh);
	color: var(--k-dark-muted);
	margin: 0 0 22px;
}

/* L'adresse peut être longue : elle se coupe plutôt que de déborder. */
/* Le libellé de ce bouton est une ADRESSE E-MAIL : coupée en deux elle devient
   illisible, et le lecteur ne sait plus s'il doit inclure le retour à la ligne.
   Le rembourrage se resserre pour lui laisser la place de tenir sur une ligne ;
   word-break reste en secours pour les langues où l'adresse serait précédée
   d'un mot long. */
.em-spont-mail {
	--btn-padding: 15px 18px;
	--btn-size: clamp(15px, 1.8vw, 17px);
	max-width: 100%;
	word-break: break-word;
}

.em-answer {
	background: var(--k-dark-surface);
	border: 1px solid var(--k-dark-line);
	border-radius: var(--k-r-lg);
	padding: clamp(20px, 2.6vw, 28px);
}

.em-answer-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: var(--k-r-tile);
	background: rgba(255, 255, 255, 0.1);
	color: var(--k-orange-glow);
	margin-bottom: 16px;
}

.em-answer-t {
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: var(--k-text-3xl);
	line-height: 1.25;
	margin: 0 0 10px;
}

.em-answer-d {
	font-size: var(--k-text-l);
	line-height: var(--k-lh);
	color: var(--k-dark-muted);
	margin: 0;
}

/* --- Travailler chez nous ------------------------------------------------- */

.em-why-head {
	max-width: 60ch;
	margin-bottom: clamp(22px, 3vw, 32px);
}

.em-why-head h2 {
	font-size: var(--k-h2-l);
	margin: 0 0 10px;
}

.em-why-head p {
	font-size: var(--k-text-xl);
	line-height: var(--k-lh);
	color: var(--k-nav);
	margin: 0;
}

.em-why {
	--grid-min: 250px;
	--grid-gap: clamp(14px, 2vw, 18px);
}

.em-why-card {
	--card-padding: clamp(20px, 2.6vw, 26px);
}

.em-why-t {
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: var(--k-text-2xl);
	margin: 0 0 7px;
}

/* ==========================================================================
   Documents légaux (CGV, mentions, confidentialité, rétractation).
   Mise en page des maquettes : une colonne de 820px, pas de sommaire latéral.
   Ces pages sont faites pour être imprimées — d'où lg-noprint.
   ========================================================================== */

.lg-doc {
	max-width: 820px;
	padding-top: clamp(22px, 3vw, 34px);
	padding-bottom: clamp(34px, 5vw, 56px);
}

.lg-doc .kk-crumb {
	margin-bottom: 22px;
}

/* Exception assumée : un document légal n'a pas de héro. Son titre porte un
   filet et une échelle plus sobres, il ne suit donc pas le H1 commun. */
.lg-doc h1 {
	font-weight: 800;
	font-size: clamp(25px, 3.4vw, 34px);
	letter-spacing: -0.02em;
	line-height: 1.12;
	margin: 0 0 26px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--k-border);
}

/* Sous-titre : la rétractation cite l'article de CGV dont elle est tirée. Il
   remonte contre le filet du titre, qui lui sert de séparateur. */
.lg-sur {
	font-size: var(--k-text-m);
	color: var(--k-soft);
	margin: -18px 0 26px;
}

.lg-body h2 {
	font-size: var(--k-h2-xs);
	letter-spacing: -0.01em;
	line-height: 1.25;
	margin: 34px 0 12px;
	scroll-margin-top: 20px;
}

.lg-body h3 {
	font-size: var(--k-h3-s);
	line-height: 1.3;
	margin: 22px 0 8px;
}

.lg-body h4 {
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: var(--k-text-l);
	margin: 18px 0 6px;
}

/* Quatrième niveau : seul l'article 21 des CGV descend aussi bas. */
.lg-body h5 {
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: var(--k-text-m);
	margin: 14px 0 6px;
}

.lg-body p,
.lg-body li {
	font-size: var(--k-text-l);
	line-height: var(--k-lh);
	color: var(--k-body);
}

.lg-body p {
	margin: 0 0 12px;
}

.lg-body ul,
.lg-body ol {
	margin: 0 0 12px;
	padding-left: 22px;
}

.lg-body li {
	margin-bottom: 5px;
}

.lg-body a {
	color: var(--k-orange-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.lg-body table {
	width: 100%;
	margin: 0 0 16px;
	font-size: var(--k-text-l);
}

.lg-body td,
.lg-body th {
	padding: 8px 10px;
	border: 1px solid var(--k-border);
	text-align: left;
	vertical-align: top;
}

/* Formulaire type de rétractation : un encadré à remplir et à renvoyer. */
.lg-form {
	border: 1px solid var(--k-border);
	background: #fff;
	border-radius: 6px;
	padding: clamp(20px, 3vw, 28px);
	margin: 0 0 14px;
}

.lg-form p {
	font-size: var(--k-text-l);
	line-height: 1.85;
}

.lg-form-line {
	display: inline-block;
	min-width: 170px;
	border-bottom: 1px dotted var(--k-chevron);
}

.lg-form-sign {
	font-size: var(--k-text-m);
	line-height: var(--k-lh);
	color: var(--k-soft);
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--k-border);
}

.lg-print {
	font-size: var(--k-text-l);
	font-weight: 700;
	color: var(--k-orange-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media print {
	.lg-noprint,
	.hd,
	.ft,
	footer,
	header {
		display: none !important;
	}
}