/**
 * Koko Store — la boutique « Atelier ».
 *
 * Chargée sur les pages WooCommerce après boutique.css, et sur l'accueil et
 * la recherche, où passent aussi les cartes. Seulement quand le plugin
 * KokoRepair est actif : sans lui, ni colonne ni carte Atelier.
 *
 * L'idée : un appareil de mesure posé sur un établi clair.
 *
 *   - LA CONSOLE. Les filtres sont des voies numérotées « 01 — TYPE » en
 *     chiffres d'instrument, avec des commutateurs (segments), une jauge à
 *     crans pour l'état, des cases de marque. Pas de pastilles rondes.
 *
 *   - L'ÉTIQUETTE. Chaque carte est une étiquette d'atelier détachable : la
 *     photo sur sa plaque, puis un bord en pointillés à deux encoches, la
 *     batterie en jauge, l'état en quatre crans, le prix en chiffres
 *     d'instrument, noir souligné d'or, et un petit bouton carré « + ».
 *
 * Sur fond clair, l'or vif ne sert qu'aux aplats (segments choisis, crans,
 * bouton, soulignés) ; le texte doré prend --or, l'or foncé. Le prix neuf à
 * la sortie n'est jamais barré.
 *
 * SOMMAIRE
 *   1. Mise en page : colonne et grille
 *   2. En-tête de grille
 *   3. Colonne de filtres
 *   4. Panneau des filtres (téléphone)
 *   5. Carte-étiquette
 *   6. Pagination
 *   7. Fiche produit : haut de page, galerie, sections
 */

:root {
	/* Les deux seules couleurs propres à la boutique, prises à la maquette
	   claire : le bleu des badges « Occasion » et le vert pâle des
	   « Reconditionné ». */
	--atelier-bleu: #2b55c6;
	--atelier-vert-pale: #e3f3ec;
}

/* ============================================ 1. Mise en page */

.k-atelier {
	display: grid;
	grid-template-columns: 15rem minmax(0, 1fr);
	gap: var(--e-6);
	align-items: start;
}

.k-atelier__contenu {
	min-width: 0;
}

@media (min-width: 900px) {
	/* Trois étiquettes de front à côté de la colonne, deux sur un portable. */
	.k-atelier__contenu ul.products {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
		gap: var(--e-4) 1.25rem;
	}
}

/* ============================================ 2. En-tête de grille */

.k-atelier__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--e-3) var(--e-5);
	margin-bottom: var(--e-5);
}

.k-atelier__titre {
	margin: 0;
	font-size: clamp(1.3rem, 1.15rem + 0.55vw, 1.65rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.2;
	color: var(--craie);
}

.k-atelier__outils {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--e-2) var(--e-3);
	font-family: var(--fonte-technique);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--craie-3);
}

.k-atelier__nombre {
	margin: 0;
}

.k-atelier__tri {
	display: flex;
	align-items: center;
	gap: var(--e-2);
}

.k-atelier__tri::before {
	content: '·';
	margin-right: var(--e-1);
}

.k-atelier__tri .woocommerce-ordering {
	margin: 0;
}

.k-atelier__tri .woocommerce-ordering select {
	width: auto;
	min-width: 0;
	padding: 0.4rem 1.9rem 0.4rem 0.65rem;
	background-color: var(--noir-2);
	background-position: right 0.6rem center;
	border-radius: var(--r-1);
	font-family: var(--fonte-technique);
	font-size: 0.72rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--craie);
	cursor: pointer;
}

/* Le bouton « Filtres » n'existe que sur un téléphone (voir 4). */
.k-atelier__filtrer {
	display: none;
	align-items: center;
	gap: var(--e-2);
	padding: 0.55rem 0.85rem;
	border: 1px solid var(--ligne-2);
	border-radius: var(--r-1);
	background: var(--noir-2);
	color: var(--craie);
	font-family: var(--fonte);
	font-size: var(--t-petit);
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
}

.k-atelier__filtrer:hover {
	color: var(--craie);
	border-color: var(--craie-3);
}

.k-atelier__compte {
	display: inline-grid;
	place-items: center;
	min-width: 1.3rem;
	height: 1.3rem;
	padding-inline: 0.3rem;
	border-radius: 3px;
	background: var(--or-vif);
	color: var(--sur-or);
	font-family: var(--fonte-technique);
	font-size: 0.7rem;
	font-weight: 700;
}

/* ============================================ 3. Colonne de filtres */

.k-filtres {
	padding-left: var(--e-4);
	border-left: 1px solid var(--ligne-2);
}

.k-filtres__tete,
.k-filtres__voile {
	display: none;
}

.k-filtres__section {
	min-width: 0;
	margin: 0 0 var(--e-5);
	padding: 0;
	border: 0;
}

.k-filtres__titre {
	display: block;
	margin-bottom: var(--e-3);
	padding: 0;
	font-family: var(--fonte-technique);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--or);
}

/* La vraie case reste dans la page, invisible mais atteignable au clavier :
   c'est le libellé dessiné qui montre son état.
   Sans transition : celle des cases du thème (« all ») ferait hériter la
   visibilité du panneau avec un temps de retard, et le focus rendu au
   rechargement tomberait sur une case encore cachée. */
.k-filtres__case,
input[type='checkbox'].k-filtres__case,
input[type='radio'].k-filtres__case {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
	transition: none;
}

/* --- Les lignes : type, modèles compatibles. --- */
.k-filtres__liste {
	display: grid;
	gap: 2px;
}

.k-filtres__liste--longue {
	max-height: 21rem;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.k-filtres__ligne {
	position: relative;
	display: block;
	cursor: pointer;
}

.k-filtres__ligne-corps {
	display: flex;
	align-items: center;
	gap: var(--e-3);
	padding: 0.45rem 0.6rem;
	border-radius: var(--r-1);
	font-size: var(--t-petit);
	color: var(--craie-2);
	transition: background-color 0.16s var(--rythme), color 0.16s var(--rythme);
}

.k-filtres__ligne:hover .k-filtres__ligne-corps {
	background: var(--noir-3);
	color: var(--craie);
}

.k-filtres__case:checked + .k-filtres__ligne-corps {
	background: var(--or-voile);
	box-shadow: inset 3px 0 0 var(--or-vif);
	color: var(--craie);
	font-weight: 600;
}

.k-filtres__picto {
	display: grid;
	place-items: center;
	flex: none;
	width: 1.35rem;
	height: 1.35rem;
	color: var(--craie-3);
}

.k-filtres__picto img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	background: none;
}

.k-filtres__case:checked + .k-filtres__ligne-corps .k-filtres__picto {
	color: var(--craie);
}

.k-filtres__nom {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.k-filtres__nombre {
	margin-left: auto;
	font-family: var(--fonte-technique);
	font-size: 0.72rem;
	color: var(--craie-3);
}

/* Sur le fond d'une ligne survolée ou choisie, le nombre fonce : --craie-3
   y passerait sous le contraste AA (4,5:1). */
.k-filtres__ligne:hover .k-filtres__nombre,
.k-filtres__case:checked + .k-filtres__ligne-corps .k-filtres__nombre {
	color: var(--craie-2);
}

/* --- Les marques : des cases à logo. --- */
.k-filtres__marques {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 4px;
}

.k-filtres__marque {
	position: relative;
	display: block;
	cursor: pointer;
}

/* Une marque sans logo s'écrit en toutes lettres, sur deux cases. */
.k-filtres__marque--nom {
	grid-column: span 2;
}

.k-filtres__marque-corps {
	display: grid;
	place-items: center;
	height: 100%;
	min-height: 2.6rem;
	aspect-ratio: 1;
	padding: 7px;
	background: var(--noir-2);
	border: 1px solid var(--ligne);
	border-radius: var(--r-1);
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--craie-2);
	transition: border-color 0.16s var(--rythme), box-shadow 0.16s var(--rythme);
}

.k-filtres__marque--nom .k-filtres__marque-corps {
	aspect-ratio: auto;
}

.k-filtres__marque-corps img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	background: none;
}

.k-filtres__marque:hover .k-filtres__marque-corps {
	border-color: var(--ligne-2);
	color: var(--craie);
}

.k-filtres__case:checked + .k-filtres__marque-corps {
	border-color: var(--or-vif);
	box-shadow: 0 0 0 1px var(--or-vif);
	color: var(--craie);
}

/* --- Le budget : deux cases en chiffres d'instrument. --- */
.k-filtres__budget {
	display: flex;
	align-items: center;
	gap: var(--e-2);
}

.k-filtres__somme {
	position: relative;
	flex: 1;
	min-width: 0;
}

.k-filtres__somme input[type='number'] {
	padding: 0.5rem 1.6rem 0.5rem 0.6rem;
	border-radius: var(--r-1);
	font-family: var(--fonte-technique);
	font-size: 0.8rem;
	-moz-appearance: textfield;
}

.k-filtres__somme input::-webkit-outer-spin-button,
.k-filtres__somme input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.k-filtres__devise {
	position: absolute;
	top: 50%;
	right: 0.6rem;
	transform: translateY(-50%);
	font-family: var(--fonte-technique);
	font-size: 0.8rem;
	color: var(--craie-3);
	pointer-events: none;
}

.k-filtres__fleche {
	font-family: var(--fonte-technique);
	color: var(--craie-3);
}

/* --- Les segments : statut, batterie, stockage. ---
   Les traits sont dessinés par chaque segment (bord droit et bas) dans une
   grille débordant d'un pixel, que le cadre rogne : une rangée incomplète
   reste propre, et deux segments choisis côte à côte gardent leur trait. */
.k-seg {
	overflow: hidden;
	background: var(--noir-2);
	border: 1px solid var(--ligne-2);
	border-radius: var(--r-1);
}

.k-seg__grille {
	display: grid;
	grid-template-columns: repeat(var(--colonnes, 3), minmax(0, 1fr));
	margin: 0 -1px -1px 0;
}

.k-seg__choix {
	position: relative;
	display: block;
	cursor: pointer;
}

.k-seg__texte {
	display: block;
	padding: 0.5rem 0.2rem;
	box-shadow: inset -1px 0 0 var(--ligne-2), inset 0 -1px 0 var(--ligne-2);
	font-family: var(--fonte-technique);
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--craie-2);
	transition: background-color 0.16s var(--rythme), color 0.16s var(--rythme);
}

.k-seg__choix:hover .k-seg__texte {
	background-color: var(--noir-3);
	color: var(--craie);
}

.k-filtres__case:checked + .k-seg__texte {
	background-color: var(--or-vif);
	color: var(--sur-or);
	font-weight: 700;
}

/* --- La jauge d'état : quatre crans, du plus usé au meilleur, comme sur
   les cartes. Le cran choisi et ceux d'avant s'allument. --- */
.k-jauge {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 3px;
}

.k-jauge__cran {
	position: relative;
	display: block;
	padding-block: 6px;
	cursor: pointer;
}

.k-jauge__barre {
	display: block;
	height: 8px;
	border-radius: 2px;
	background: var(--noir-4);
	transition: background-color 0.16s var(--rythme), box-shadow 0.16s var(--rythme);
}

.k-jauge__cran.est-allume .k-jauge__barre {
	background: var(--or-vif);
}

.k-jauge__cran:hover .k-jauge__barre {
	box-shadow: 0 0 0 1px var(--or-trait);
}

.k-jauge__legende {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--e-2);
	font-size: 0.72rem;
	color: var(--craie-3);
}

.k-jauge__tous {
	position: relative;
	cursor: pointer;
}

.k-jauge__tous span {
	text-decoration: underline;
	text-decoration-color: var(--ligne-2);
	text-underline-offset: 0.2em;
}

.k-jauge__tous:hover span {
	color: var(--craie);
}

.k-jauge__tous .k-filtres__case:checked + span {
	text-decoration: none;
	color: var(--craie-2);
	font-weight: 600;
}

.k-jauge__choix {
	display: none;
	font-weight: 600;
	color: var(--craie);
}

.k-jauge__choix.est-choisi {
	display: inline;
}

/* Le navigateur sait suivre la case cochée : la jauge et sa légende
   répondent au clic, avant même l'envoi du formulaire. */
@supports selector(:has(*)) {
	.k-filtres__etat:has(.k-filtres__case:checked) .k-jauge__barre {
		background: var(--noir-4);
	}

	.k-filtres__etat:has([value='moyen']:checked) .k-jauge__cran:nth-child(-n + 1) .k-jauge__barre,
	.k-filtres__etat:has([value='correct']:checked) .k-jauge__cran:nth-child(-n + 2) .k-jauge__barre,
	.k-filtres__etat:has([value='tres_bon']:checked) .k-jauge__cran:nth-child(-n + 3) .k-jauge__barre,
	.k-filtres__etat:has([value='parfait']:checked) .k-jauge__cran .k-jauge__barre {
		background: var(--or-vif);
	}

	.k-filtres__etat:has(.k-filtres__case:checked) .k-jauge__choix {
		display: none;
	}

	.k-filtres__etat:has([value='moyen']:checked) [data-etat='moyen'],
	.k-filtres__etat:has([value='correct']:checked) [data-etat='correct'],
	.k-filtres__etat:has([value='tres_bon']:checked) [data-etat='tres_bon'],
	.k-filtres__etat:has([value='parfait']:checked) [data-etat='parfait'] {
		display: inline;
	}
}

/* --- Le clavier voit toujours où il est, y compris sur la case qui
   reprend le focus après le rechargement (k-filtres--clavier, posée par
   theme.js quand le changement venait du clavier). --- */
.k-filtres__case:focus-visible + .k-filtres__ligne-corps,
.k-filtres__case:focus-visible + .k-filtres__marque-corps,
.k-filtres__case:focus-visible + .k-jauge__barre,
.k-filtres__case:focus-visible + span,
.k-filtres--clavier .k-filtres__case:focus + .k-filtres__ligne-corps,
.k-filtres--clavier .k-filtres__case:focus + .k-filtres__marque-corps,
.k-filtres--clavier .k-filtres__case:focus + .k-jauge__barre,
.k-filtres--clavier .k-filtres__case:focus + span {
	outline: 2px solid var(--or);
	outline-offset: 2px;
}

.k-filtres__case:focus-visible + .k-seg__texte,
.k-filtres--clavier .k-filtres__case:focus + .k-seg__texte {
	outline-offset: -3px;
}

/* Changement fait à la souris : la case reprend le focus sans cadre, jusqu'à
   la prochaine touche (le navigateur en dessinerait un). */
.k-filtres--souris .k-filtres__case:focus-visible + .k-filtres__ligne-corps,
.k-filtres--souris .k-filtres__case:focus-visible + .k-filtres__marque-corps,
.k-filtres--souris .k-filtres__case:focus-visible + .k-jauge__barre,
.k-filtres--souris .k-filtres__case:focus-visible + span {
	outline: none;
}

/* --- Le pied : « Appliquer » sans JavaScript, « Tout effacer » dès qu'un
   filtre est choisi. --- */
.k-filtres__pied {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--e-3) var(--e-4);
}

.k-filtres__effacer {
	font-size: var(--t-petit);
	font-weight: 600;
	color: var(--craie);
	text-decoration: underline;
	text-decoration-color: var(--or-vif);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

.k-filtres__effacer:hover {
	color: var(--craie);
	text-decoration-color: var(--or);
}

@media (min-width: 900px) {
	/* Avec JavaScript, chaque changement part tout seul. */
	.k-filtres--js .k-filtres__appliquer {
		display: none;
	}
}

/* ============================================ 4. Panneau des filtres */

@media (max-width: 899px) {
	.k-atelier {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	/* Deux rangées : le titre et le nombre, puis « Filtres » et le tri. */
	.k-atelier__entete {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: var(--e-3) var(--e-4);
	}

	.k-atelier__outils {
		display: contents;
	}

	.k-atelier__titre {
		grid-area: 1 / 1;
	}

	.k-atelier__nombre {
		grid-area: 1 / 2;
		justify-self: end;
	}

	.k-atelier__filtrer {
		display: inline-flex;
		grid-area: 2 / 1;
		justify-self: start;
	}

	.k-atelier__tri {
		grid-area: 2 / 2;
		justify-self: end;
	}

	.k-atelier__tri::before {
		display: none;
	}

	.k-filtres {
		position: fixed;
		inset: 0 auto 0 0;
		z-index: 960;
		display: flex;
		flex-direction: column;
		width: min(23rem, 90vw);
		padding: 0;
		border: 0;
		background: var(--noir);
		box-shadow: var(--ombre-2);
		transform: translateX(-102%);
		visibility: hidden;
		transition: transform 0.32s var(--rythme-sec), visibility 0s linear 0.32s;
	}

	/* Ouvert par JavaScript, ou par l'ancre #filtres quand il n'y en a pas. */
	.k-filtres.est-ouvert,
	.k-filtres:not(.k-filtres--js):target {
		transform: none;
		visibility: visible;
		transition: transform 0.32s var(--rythme-sec);
	}

	.k-filtres__tete {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--e-3);
		padding: var(--e-3) var(--e-4) var(--e-3) var(--e-5);
		border-bottom: 1px solid var(--ligne);
		background: var(--noir-2);
	}

	.k-filtres__intitule {
		margin: 0;
		font-size: var(--t-h4);
		font-weight: 800;
		letter-spacing: -0.02em;
	}

	.k-filtres__fermer {
		display: grid;
		place-items: center;
		width: 2.6rem;
		height: 2.6rem;
		border: 1px solid var(--ligne-2);
		border-radius: var(--r-1);
		color: var(--craie);
	}

	.k-filtres__fermer:hover {
		color: var(--craie);
		background: var(--noir-3);
	}

	.k-filtres__formulaire {
		display: flex;
		flex: 1;
		flex-direction: column;
		min-height: 0;
	}

	.k-filtres__corps {
		flex: 1;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: var(--e-5) var(--e-5) var(--e-2);
	}

	.k-filtres__pied {
		padding: var(--e-3) var(--e-5);
		border-top: 1px solid var(--ligne);
		background: var(--noir-2);
	}

	.k-filtres__appliquer {
		flex: 1;
	}

	.k-filtres__voile {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 955;
		background: rgba(12, 12, 13, 0.42);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s var(--rythme), visibility 0s linear 0.3s;
	}

	.k-filtres.est-ouvert + .k-filtres__voile,
	.k-filtres:not(.k-filtres--js):target + .k-filtres__voile {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.3s var(--rythme);
	}

	/* Rouvert après l'envoi d'un filtre : il est déjà là, sans glisser. */
	.k-filtres--immediat,
	.k-filtres--immediat + .k-filtres__voile {
		transition: none !important;
	}

	/* Des cibles de doigt, pas de souris. */
	.k-filtres__ligne-corps {
		padding-block: 0.6rem;
		font-size: var(--t-note);
	}

	.k-seg__texte {
		padding-block: 0.7rem;
		font-size: 0.75rem;
	}

	.k-filtres__marques {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* ============================================ 5. Carte-étiquette */

.k-ticket {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background: var(--noir-2);
	border: 1px solid var(--ligne);
	border-radius: var(--r-2);
	box-shadow: 0 1px 2px rgba(12, 12, 13, 0.04);
	container-type: inline-size;
	transition:
		transform 0.28s var(--rythme),
		border-color 0.28s var(--rythme),
		box-shadow 0.28s var(--rythme);
}

.k-ticket:hover,
.k-ticket:focus-within {
	transform: translateY(-3px);
	border-color: var(--ligne-2);
	box-shadow: 0 1px 2px rgba(12, 12, 13, 0.05), 0 14px 30px rgba(52, 40, 12, 0.09);
}

/* --- Le haut : la photo sur sa plaque, le badge, et les deux encoches
   où l'étiquette se détache. --- */
.k-ticket__haut {
	position: relative;
}

.k-ticket__plaque {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3.4;
	padding: clamp(0.75rem, 0.4rem + 1.3vw, 1.35rem);
	background: var(--plaque);
	border-radius: calc(var(--r-2) - 1px) calc(var(--r-2) - 1px) 0 0;
	overflow: hidden;
}

.k-ticket__plaque img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	background: none;
	transition: transform 0.5s var(--rythme);
}

.k-ticket:hover .k-ticket__plaque img {
	transform: scale(1.04);
}

.k-ticket__plaque--vide {
	padding: 0;
}

.k-ticket__plaque--vide .k-media--vide {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	border: 0;
	border-radius: 0;
}

.k-ticket.outofstock .k-ticket__plaque img {
	filter: grayscale(1);
	opacity: 0.55;
}

/* Les encoches : deux disques couleur de page, posés à cheval sur le bord,
   dont seul l'arc intérieur est tracé. */
.k-ticket__haut::before,
.k-ticket__haut::after {
	content: '';
	position: absolute;
	bottom: -9px;
	z-index: 1;
	width: 17px;
	height: 17px;
	border: 1px solid transparent;
	border-radius: 50%;
	background: var(--noir);
	transform: rotate(45deg);
	pointer-events: none;
}

.k-ticket__haut::before {
	left: -9px;
	border-top-color: var(--ligne-2);
	border-right-color: var(--ligne-2);
}

.k-ticket__haut::after {
	right: -9px;
	border-bottom-color: var(--ligne-2);
	border-left-color: var(--ligne-2);
}

/* --- Les badges de statut. Des étiquettes à angles vifs, jamais des
   pastilles. --- */
.k-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.55rem;
	border-radius: 3px;
	background: var(--noir-2);
	font-family: var(--fonte-technique);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--craie);
}

.k-ticket__haut .k-badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 2;
}

.k-badge--neuf {
	background: var(--or-vif);
	color: var(--sur-or);
}

.k-badge--reconditionne {
	background: var(--atelier-vert-pale);
	color: var(--vert);
	box-shadow: inset 0 0 0 1px rgba(14, 122, 83, 0.45);
}

/* La flèche circulaire du « remis en état », dessinée au masque pour prendre
   la couleur du texte. */
.k-badge--reconditionne::before {
	content: '';
	width: 0.85em;
	height: 0.85em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.6-5.9'/%3E%3Cpath d='M20.2 4.3v4.4h-4.4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.6-5.9'/%3E%3Cpath d='M20.2 4.3v4.4h-4.4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.k-badge--occasion {
	background: var(--noir-2);
	color: var(--atelier-bleu);
	box-shadow: inset 0 0 0 1px rgba(43, 85, 198, 0.45);
	border-left: 3px solid var(--atelier-bleu);
}

/* Épuisé, promo : en bas de la plaque, à l'écart du badge, même sur une
   étiquette étroite. */
.k-ticket__marque {
	position: absolute;
	right: 0.75rem;
	bottom: 0.9rem;
	z-index: 2;
	padding: 0.3rem 0.55rem;
	border-radius: 3px;
	background: var(--craie);
	font-family: var(--fonte-technique);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--noir-2);
}

.k-ticket__marque--promo {
	background: var(--noir-2);
	color: var(--or);
	box-shadow: inset 0 0 0 1px var(--or-trait);
}

/* --- Le corps de l'étiquette, sous le pointillé. --- */
.k-ticket__corps {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: var(--e-4) 1.1rem 1.1rem;
	border-top: 1px dashed var(--ligne-2);
}

.k-ticket__nom {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.015em;
}

.k-ticket__nom a {
	color: var(--craie);
	text-decoration: none;
	text-decoration-color: var(--or-vif);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.k-ticket:hover .k-ticket__nom a {
	text-decoration-line: underline;
}

/* Le lien couvre toute l'étiquette ; un seul lien annoncé. */
.k-ticket__nom a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

.k-ticket__nom a:focus-visible {
	outline: none;
}

.k-ticket__nom a:focus-visible::after {
	outline: 2px solid var(--or);
	outline-offset: 3px;
	border-radius: var(--r-2);
}

.k-ticket__ref {
	margin: 0.2rem 0 0;
	font-family: var(--fonte-technique);
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--craie-3);
}

/* --- Les mesures : batterie en jauge, état en crans. --- */
.k-ticket__mesures {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--e-3);
	margin: var(--e-4) 0 0;
}

.k-ticket__mesure {
	min-width: 0;
}

.k-ticket__mesure dt {
	margin-bottom: 0.3rem;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--craie-3);
}

.k-ticket__mesure dd {
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.3;
}

.k-ticket__mesure-texte {
	font-size: 0.75rem;
	color: var(--craie-2);
}

.k-batt {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--fonte-technique);
	font-size: 0.75rem;
	color: var(--craie);
}

.k-batt__corps {
	position: relative;
	flex: 1;
	max-width: 5.5rem;
	height: 9px;
	padding: 1px;
	border: 1px solid var(--ligne-2);
	border-radius: 2px;
}

/* La borne de la pile. */
.k-batt__corps::after {
	content: '';
	position: absolute;
	top: 50%;
	right: -4px;
	width: 2px;
	height: 4px;
	border-radius: 0 1px 1px 0;
	background: var(--ligne-2);
	transform: translateY(-50%);
}

.k-batt__corps i {
	display: block;
	height: 100%;
	border-radius: 1px;
	background: var(--vert);
}

.k-batt__valeur {
	white-space: nowrap;
}

.k-crans {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem 0.45rem;
}

.k-crans__barres {
	display: flex;
	gap: 3px;
}

.k-crans__barres span {
	width: 13px;
	height: 8px;
	border-radius: 2px;
	background: var(--noir-3);
}

.k-crans__barres .est-allume {
	background: var(--or-vif);
}

.k-crans em {
	font-style: normal;
	font-size: 0.75rem;
	line-height: 1.3;
	color: var(--craie-2);
}

.k-ticket__compatibles {
	margin: var(--e-3) 0 0;
	font-size: 0.75rem;
	line-height: 1.45;
	color: var(--craie-2);
}

/* --- Le pied : prix et bouton « + ». --- */
.k-ticket__pied {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--e-2) var(--e-3);
	margin-top: auto;
	padding-top: var(--e-4);
}

.k-ticket__prix {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
	margin: 0;
}

/* Le prix neuf à la sortie : un repère, en petit, jamais barré. */
.k-ticket__neuf {
	font-family: var(--fonte-technique);
	font-size: 0.66rem;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--craie-3);
	text-decoration: none;
}

.k-ticket__montant {
	font-family: var(--fonte-technique);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.03em;
	color: var(--craie);
}

/* Noir, souligné d'or : le trait passe sous les chiffres comme un coup de
   surligneur. */
.k-ticket__montant .amount {
	background: linear-gradient(var(--or-vif), var(--or-vif)) 0 92% / 100% 0.3em no-repeat;
	color: var(--craie);
}

.k-ticket__montant del {
	display: block;
	font-size: 0.7rem;
	font-weight: 500;
	color: var(--craie-3);
}

.k-ticket__montant del .amount {
	background: none;
	color: var(--craie-3);
}

.k-ticket__montant ins {
	text-decoration: none;
	background: none;
}

/* Le bouton carré, au-dessus du lien de carte. Le même sert aux
   accessoires « À prévoir avec » de la fiche produit (7). */
.k-ticket a.k-plus,
.k-prevoir a.k-plus {
	position: relative;
	z-index: 2;
	display: grid;
	place-items: center;
	flex: none;
	width: 2.6rem;
	height: 2.6rem;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: var(--or-vif);
	color: var(--sur-or);
	box-shadow: none;
	text-decoration: none;
	transition: background-color 0.2s var(--rythme), transform 0.2s var(--rythme), box-shadow 0.2s var(--rythme);
}

.k-ticket a.k-plus:hover,
.k-prevoir a.k-plus:hover {
	background: var(--or-vif-clair);
	color: var(--sur-or);
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(235, 181, 22, 0.28);
}

.k-ticket a.k-plus:focus-visible,
.k-prevoir a.k-plus:focus-visible {
	outline: 2px solid var(--craie);
	outline-offset: 2px;
}

.k-plus--ajout::before,
.k-plus--ajout::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 2.5px;
	border-radius: 1px;
	background: currentColor;
	transform: translate(-50%, -50%);
}

.k-plus--ajout::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

/* Pendant l'ajout : le « + » tourne en anneau. */
.k-plus--ajout.loading::before {
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	background: none;
	animation: k-plus-tourne 0.7s linear infinite;
}

.k-plus--ajout.loading::after,
.k-plus--ajout.added::after {
	display: none;
}

/* Ajouté : une coche. */
.k-plus--ajout.added::before {
	width: 7px;
	height: 12px;
	border: solid currentColor;
	border-width: 0 2.5px 2.5px 0;
	border-radius: 0;
	background: none;
	transform: translate(-50%, -62%) rotate(45deg);
}

@keyframes k-plus-tourne {
	from {
		transform: translate(-50%, -50%) rotate(0deg);
	}

	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

/* Épuisé : plus d'ajout, une flèche vers la fiche. */
.k-ticket a.k-plus:not(.k-plus--ajout) {
	background: var(--noir-2);
	color: var(--craie);
	box-shadow: inset 0 0 0 1px var(--ligne-2);
}

.k-ticket a.k-plus:not(.k-plus--ajout):hover {
	background: var(--noir-3);
	box-shadow: inset 0 0 0 1px var(--craie-3);
}

/* « Voir le panier », que WooCommerce ajoute après un ajout. */
.k-ticket__pied .added_to_cart {
	position: relative;
	z-index: 2;
	order: 3;
	flex-basis: 100%;
	justify-content: flex-end;
	font-family: var(--fonte-technique);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--craie);
	text-decoration: underline;
	text-decoration-color: var(--or-vif);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

.k-ticket .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Une étiquette étroite (deux de front sur un téléphone) : les mesures
   passent l'une sous l'autre. */
@container (max-width: 14.5rem) {
	.k-ticket__corps {
		padding: var(--e-3) 0.8rem 0.9rem;
	}

	.k-ticket__nom {
		font-size: 0.9rem;
	}

	.k-ticket__mesures {
		grid-template-columns: 1fr;
		gap: var(--e-2);
		margin-top: var(--e-3);
	}

	.k-ticket__montant {
		font-size: 1.2rem;
	}

	.k-ticket__neuf {
		font-size: 0.6rem;
		letter-spacing: -0.02em;
	}

	.k-ticket__haut .k-badge,
	.k-ticket__marque {
		font-size: 0.6rem;
		letter-spacing: 0.08em;
	}

	.k-ticket a.k-plus {
		width: 2.4rem;
		height: 2.4rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.k-ticket,
	.k-ticket__plaque img,
	.k-filtres,
	.k-filtres__voile {
		transition: none;
	}

	.k-plus--ajout.loading::before {
		animation-duration: 1.6s;
	}
}

/* ============================================ 6. Pagination */

/* La pagination de WooCommerce, au dessin de celle du journal. */
.woocommerce-pagination {
	margin-top: var(--e-7);
}

.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--e-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-pagination .page-numbers li {
	margin: 0;
}

.woocommerce-pagination a.page-numbers,
.woocommerce-pagination span.page-numbers {
	display: grid;
	place-items: center;
	min-width: 2.6rem;
	height: 2.6rem;
	padding-inline: var(--e-2);
	border: 1px solid var(--ligne-2);
	border-radius: var(--r-1);
	background: var(--noir-2);
	font-family: var(--fonte-technique);
	font-size: var(--t-petit);
	font-weight: 600;
	color: var(--craie-2);
	text-decoration: none;
	transition: background-color 0.2s var(--rythme), border-color 0.2s var(--rythme), color 0.2s var(--rythme);
}

.woocommerce-pagination a.page-numbers:hover {
	border-color: var(--craie-3);
	color: var(--craie);
}

.woocommerce-pagination span.page-numbers.current {
	background: var(--or-vif);
	border-color: var(--or-vif);
	color: var(--sur-or);
}

.woocommerce-pagination span.page-numbers.dots {
	border: 0;
	background: none;
}

/* ============================================ 7. Fiche produit
 *
 * La fiche d'un produit publié par l'outil de vente (body.k-fiche-atelier) :
 * un bon d'atelier sur le papier clair. À gauche la galerie de WooCommerce
 * sur sa plaque ; à droite le badge, le prix noir souligné d'or, les cadrans
 * et les lignes ; dessous les sections numérotées. Les anciennes fiches,
 * sans annonce, ne portent pas la classe et restent telles quelles.
 */

/* Le fil d'Ariane suit de près l'en-tête, comme sur la maquette. */
.k-fiche-atelier .k-principal > .k-section:first-child {
	padding-top: clamp(1.25rem, 0.75rem + 1.6vw, 2.25rem);
}

/* --- Le fil d'Ariane : capitales et chasse fixe, des barres pour
   séparateurs. « Accueil » s'efface : le fil part de la boutique. --- */
.k-fiche-atelier .k-ariane {
	padding-block: 0 var(--e-5);
	font-family: var(--fonte-technique);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	line-height: 1.5;
	text-transform: uppercase;
}

.k-fiche-atelier .k-ariane ol {
	gap: 0.15rem 0.6rem;
}

.k-fiche-atelier .k-ariane li {
	gap: 0.6rem;
}

.k-fiche-atelier .k-ariane li:first-child {
	display: none;
}

.k-fiche-atelier .k-ariane li + li::before {
	content: '/';
	width: auto;
	height: auto;
	border: 0;
	transform: none;
	opacity: 0.7;
}

.k-fiche-atelier .k-ariane li:nth-child(2)::before {
	display: none;
}

.k-fiche-atelier .k-ariane a:hover {
	color: var(--craie);
	text-decoration: underline;
	text-decoration-color: var(--or-vif);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

.k-fiche-atelier .k-ariane [aria-current='page'] {
	font-weight: 700;
	color: var(--or);
}

/* --- Les deux colonnes : la photo un peu plus large que le bon. --- */
@media (min-width: 961px) {
	.k-fiche-atelier div.product {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		gap: 0 clamp(2rem, 0.5rem + 3vw, 3.5rem);
	}
}

/* Les textes réservés aux lecteurs d'écran : WooCommerce en pose dans le
   formulaire d'achat et à côté des boutons « + ». */
.k-fiche-atelier .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --- La galerie de WooCommerce : chaque photo sur sa plaque, les
   vignettes dessous, chacune sur la sienne. --- */
.k-fiche-atelier .woocommerce-product-gallery {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	overflow: visible;
}

.k-fiche-atelier .woocommerce-product-gallery .flex-viewport {
	border-radius: var(--r-2);
}

/*
 * Ni marge intérieure ni bordure sur la photo elle-même : le défilement
 * les retranche de sa largeur, et la photo suivante dépasserait sur le
 * bord. Le trait est une ombre, la marge passe sur le lien.
 *
 * « !important » : le défilement pose « display: block » en ligne sur
 * chaque photo, et la photo ne serait plus centrée sur sa plaque.
 */
.k-fiche-atelier .woocommerce-product-gallery__image {
	display: grid !important;
	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
	place-items: stretch;
	aspect-ratio: 1 / 0.92;
	background: var(--plaque);
	border-radius: var(--r-2);
	box-shadow: inset 0 0 0 1px var(--ligne);
	overflow: hidden;
}

.k-fiche-atelier .woocommerce-product-gallery__image a {
	display: block;
	min-width: 0;
	min-height: 0;
	padding: clamp(1.25rem, 0.5rem + 2.4vw, 2.75rem);
}

.k-fiche-atelier .woocommerce-product-gallery__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	background: none;
}

.k-fiche-atelier .woocommerce-product-gallery__trigger {
	top: var(--e-3);
	right: var(--e-3);
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 6px;
	background: var(--noir-2);
	backdrop-filter: none;
	border-color: var(--ligne-2);
	color: var(--craie);
	box-shadow: 0 1px 2px rgba(12, 12, 13, 0.06);
}

.k-fiche-atelier .woocommerce-product-gallery__trigger:hover {
	border-color: var(--craie-3);
	color: var(--craie);
}

.k-fiche-atelier .flex-control-thumbs {
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--e-2);
	margin-top: var(--e-2);
}

.k-fiche-atelier .flex-control-thumbs li {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	padding: 0.3rem;
	background: var(--plaque);
	border: 1px solid var(--ligne);
	border-radius: 6px;
	overflow: hidden;
	cursor: pointer;
	transition: border-color 0.2s var(--rythme), box-shadow 0.2s var(--rythme);
}

.k-fiche-atelier .flex-control-thumbs li:hover {
	border-color: var(--ligne-2);
}

.k-fiche-atelier .flex-control-thumbs li:has(img.flex-active) {
	border-color: var(--or-vif);
	box-shadow: 0 0 0 1px var(--or-vif);
}

.k-fiche-atelier .flex-control-thumbs img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	background: none;
	border: 0;
	border-radius: 3px;
	opacity: 0.72;
}

.k-fiche-atelier .flex-control-thumbs img:hover,
.k-fiche-atelier .flex-control-thumbs img.flex-active {
	opacity: 1;
}

/* --- Le haut de la fiche : badge, nom, référence. --- */
.k-bon .k-badge {
	padding: 0.38rem 0.7rem;
	font-size: 0.7rem;
	letter-spacing: 0.14em;
}

.k-bon .k-bon__nom {
	margin: var(--e-3) 0 0.2rem;
	font-size: clamp(1.75rem, 1.35rem + 1.3vw, 2.35rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.025em;
}

.k-bon__ref {
	margin: 0;
	font-family: var(--fonte-technique);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--craie-3);
}

/* --- Le prix : gros chiffres noirs, soulignés d'or. Le prix neuf à sa
   sortie en petit à côté : un repère, jamais barré. --- */
.k-bon__prix {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--e-2) var(--e-4);
	margin: var(--e-5) 0 var(--e-4);
	padding: var(--e-4) 0;
	border-block: 1px solid var(--ligne);
}

.k-bon__montant {
	margin: 0;
	font-family: var(--fonte-technique);
	font-size: clamp(2.1rem, 1.7rem + 1.2vw, 2.6rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--craie);
}

.k-bon__montant .amount {
	background: linear-gradient(var(--or-vif), var(--or-vif)) 0 94% / 100% 0.3em no-repeat;
	color: var(--craie);
}

.k-bon__montant del {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--craie-3);
}

.k-bon__montant del .amount {
	background: none;
	color: var(--craie-3);
}

.k-bon__montant ins {
	text-decoration: none;
	background: none;
}

.k-bon__neuf {
	margin: 0 0 0.2rem;
	font-family: var(--fonte-technique);
	font-size: 0.72rem;
	line-height: 1.4;
	color: var(--craie-3);
	text-decoration: none;
}

/* Vendu : un tampon d'atelier à la place du prix. */
.k-bon__prix--vendu {
	align-items: center;
	gap: var(--e-3) var(--e-5);
}

.k-bon__vendu {
	margin: 0;
	padding: 0.35rem 0.85rem 0.3rem;
	border: 2px solid var(--craie);
	border-radius: 4px;
	font-family: var(--fonte-technique);
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--craie);
	transform: rotate(-3deg);
}

.k-bon__vendu-texte {
	flex: 1 1 12rem;
	margin: 0;
	font-size: var(--t-petit);
	line-height: 1.55;
	color: var(--craie-2);
}

.k-bon__vendu-texte a {
	display: inline-block;
	font-weight: 700;
	color: var(--craie);
	text-decoration: underline;
	text-decoration-color: var(--or-vif);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

/* La description d'un accessoire. */
.k-bon__resume {
	margin: 0 0 var(--e-4);
	font-size: var(--t-note);
	line-height: 1.65;
	color: var(--craie-2);
}

.k-bon__resume p {
	margin: 0;
}

.k-bon__resume p + p {
	margin-top: var(--e-2);
}

/* --- Les cadrans : batterie en jauge, état en crans, garantie. --- */
.k-cadrans {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--e-2);
	margin: 0 0 var(--e-3);
}

.k-cadran {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 0.7rem 0.85rem 0.8rem;
	background: var(--noir-2);
	border: 1px solid var(--ligne);
	border-radius: 6px;
}

.k-cadran--large {
	grid-column: span 2;
}

.k-cadran__titre {
	margin-bottom: 0.4rem;
	font-family: var(--fonte-technique);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--craie-3);
}

.k-cadran__valeur {
	margin: 0;
	font-family: var(--fonte-technique);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--craie);
}

.k-cadran__valeur--mot {
	font-size: 0.95rem;
}

.k-cadran__jauge {
	position: relative;
	height: 9px;
	margin: auto 0 0;
	padding: 1px;
	border: 1px solid var(--ligne-2);
	border-radius: 2px;
	transform: translateY(0.35rem);
}

.k-cadran__jauge i {
	display: block;
	height: 100%;
	border-radius: 1px;
	background: var(--vert);
}

.k-cadran__crans {
	display: flex;
	gap: 3px;
	margin: auto 0 0;
	transform: translateY(0.35rem);
}

.k-cadran__crans span {
	flex: 1;
	height: 7px;
	border-radius: 2px;
	background: var(--noir-3);
}

.k-cadran__crans .est-allume {
	background: var(--or-vif);
}

.k-cadran:has(.k-cadran__jauge, .k-cadran__crans) .k-cadran__valeur {
	margin-bottom: 0.65rem;
}

/* La garantie légale, juste sous les cadrans. */
.k-bon__legale {
	margin: 0 0 var(--e-4);
	font-size: 0.78rem;
	line-height: 1.55;
	color: var(--craie-2);
}

.k-bon__legale a,
.k-bon__rassure a {
	font-weight: 700;
	color: var(--craie);
	white-space: nowrap;
	text-decoration: underline;
	text-decoration-color: var(--or-vif);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

.k-bon__legale a:hover,
.k-bon__rassure a:hover {
	text-decoration-color: var(--craie);
}

/* --- Les lignes du bon : pièces, défauts, contenu de la boîte. --- */
.k-bon__lignes {
	margin: 0 0 var(--e-5);
	border-top: 1px dashed var(--ligne-2);
}

/* Un accessoire : la garantie légale suit sa ligne Garantie. */
.k-bon__lignes:has(+ .k-bon__legale) {
	margin-bottom: var(--e-3);
}

.k-bon__ligne {
	display: grid;
	grid-template-columns: 8.5rem minmax(0, 1fr);
	gap: var(--e-3);
	padding: 0.6rem 0;
	border-bottom: 1px dashed var(--ligne-2);
}

.k-bon__ligne dt {
	padding-top: 0.15rem;
	font-family: var(--fonte-technique);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--craie-3);
}

.k-bon__ligne dd {
	margin: 0;
	font-size: var(--t-petit);
	line-height: 1.55;
	color: var(--craie);
}

/* --- L'achat : le formulaire de WooCommerce. Un appareil est unique : sa
   quantité, cachée par WooCommerce, ne prend pas de place. --- */
.k-bon__achat form.cart {
	margin-bottom: 0 !important;
}

.k-bon__achat .quantity:has(input[type='hidden']) {
	display: none;
}

.k-bon__achat .quantity {
	min-height: 3.25rem;
	border-radius: 6px;
	background: var(--noir-2);
}

.k-bon__achat .single_add_to_cart_button {
	min-height: 3.25rem;
	border-radius: 6px;
	font-size: var(--t-note);
}

.k-bon__achat .stock {
	margin-bottom: var(--e-3);
}

/* --- La réassurance : trois mentions d'instrument. --- */
.k-bon__rassure {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem 1.25rem;
	margin: var(--e-4) 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--fonte-technique);
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	line-height: 1.5;
	color: var(--craie-2);
}

.k-bon__rassure li {
	margin: 0;
	text-transform: uppercase;
}

.k-bon__rassure li > span {
	font-weight: 700;
	color: var(--vert);
}

.k-bon__rassure a {
	font-size: 0.72rem;
	letter-spacing: 0.02em;
	text-transform: none;
}

/* --- Les sections sous le haut de page, numérotées. --- */
.k-fiche-sections {
	grid-column: 1 / -1;
	display: grid;
	gap: clamp(2.25rem, 1.5rem + 2.4vw, 3.5rem);
	margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.k-fiche-section {
	min-width: 0;
}

.k-fiche-section__tete {
	display: flex;
	align-items: baseline;
	gap: var(--e-3);
	margin-bottom: var(--e-4);
}

.k-fiche-section__tete::after {
	content: '';
	flex: 1;
	align-self: center;
	height: 1px;
	background: var(--ligne-2);
}

.k-fiche-section__num {
	font-family: var(--fonte-technique);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--or);
}

.k-fiche-section__titre {
	margin: 0;
	font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

/* 01 — Contrôle atelier : une plaque blanche, des cases cochées. */
.k-fiche-section--controle {
	padding: var(--e-5) clamp(1rem, 0.6rem + 1.2vw, 1.5rem);
	background: var(--noir-2);
	border: 1px solid var(--ligne);
	border-radius: var(--r-2);
}

.k-controle {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr));
	gap: var(--e-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.k-controle li {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	min-width: 0;
	margin: 0;
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--ligne);
	border-radius: 4px;
	background: var(--noir);
	font-size: 0.78rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--craie);
}

.k-controle__coche {
	flex: none;
	width: 6px;
	height: 11px;
	margin: -3px 3px 0 2px;
	border: solid var(--vert);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* 02 — Fiche technique : cinq chiffres en bandeau, puis les rubriques. */
.k-reperes {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: 1px;
	margin: 0 0 var(--e-3);
	background: var(--ligne-2);
	border: 1px solid var(--ligne-2);
	border-radius: 6px;
	overflow: hidden;
}

.k-reperes__case {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: 0.3rem;
	min-width: 0;
	padding: 0.95rem 1.1rem;
	background: var(--noir-2);
}

.k-reperes__case dd {
	margin: 0;
	font-family: var(--fonte-technique);
	font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--craie);
}

.k-reperes__case dt {
	font-size: 0.74rem;
	line-height: 1.35;
	color: var(--craie-3);
}

.k-rubriques {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--e-3);
	align-items: start;
}

.k-rubrique {
	min-width: 0;
	padding: 0.9rem 1rem 0.35rem;
	background: var(--noir-2);
	border: 1px solid var(--ligne);
	border-radius: 6px;
}

.k-rubrique__titre {
	margin: 0 0 0.3rem;
	font-family: var(--fonte-technique);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--or);
}

.k-rubrique__lignes {
	margin: 0;
}

.k-rubrique__lignes div {
	display: flex;
	justify-content: space-between;
	gap: var(--e-4);
	padding: 0.5rem 0;
	border-bottom: 1px dashed var(--ligne-2);
	font-size: 0.8rem;
	line-height: 1.45;
}

.k-rubrique__lignes div:last-child {
	border-bottom: 0;
}

.k-rubrique__lignes dt {
	flex: none;
	max-width: 45%;
	color: var(--craie-3);
}

.k-rubrique__lignes dd {
	margin: 0;
	text-align: right;
	color: var(--craie);
}

/* Les autres rubriques, repliées : tout reste dans la page. */
.k-rubriques__plus {
	margin-top: var(--e-3);
}

.k-rubriques__plus > summary {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
	padding: 0.85rem var(--e-4);
	border: 1px dashed var(--ligne-2);
	border-radius: 6px;
	list-style: none;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.2s var(--rythme), background-color 0.2s var(--rythme);
}

.k-rubriques__plus > summary::-webkit-details-marker {
	display: none;
}

.k-rubriques__plus > summary:hover {
	border-color: var(--craie-3);
	background: var(--noir-2);
}

.k-rubriques__plus > summary:focus-visible {
	outline: 2px solid var(--or);
	outline-offset: 2px;
}

.k-rubriques__ouvrir {
	font-family: var(--fonte-technique);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--craie);
}

.k-rubriques__ouvrir::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 0.6rem 0.2rem 0;
	border: solid currentColor;
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
	transition: transform 0.2s var(--rythme);
}

.k-rubriques__plus[open] .k-rubriques__ouvrir::before {
	margin-bottom: -0.1rem;
	transform: rotate(-135deg);
}

.k-rubriques__noms {
	font-size: 0.75rem;
	color: var(--craie-3);
}

.k-rubriques__plus[open] .k-rubriques__noms {
	display: none;
}

.k-rubriques__plus > .k-rubriques {
	margin-top: var(--e-3);
}

/* Compatible avec (accessoire) : les modèles, en étiquettes. */
.k-compatibles {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.k-compatibles li {
	margin: 0;
	padding: 0.5rem 0.8rem;
	background: var(--noir-2);
	border: 1px solid var(--ligne-2);
	border-left: 3px solid var(--or-vif);
	border-radius: 4px;
	font-size: var(--t-petit);
	font-weight: 600;
	line-height: 1.3;
	color: var(--craie);
}

/* 03 — À prévoir avec : de petites étiquettes avec leur « + ». */
.k-prevoir {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	gap: var(--e-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.k-prevoir__article {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--e-2) var(--e-3);
	margin: 0;
	padding: 0.6rem 0.7rem 0.6rem 0.6rem;
	background: var(--noir-2);
	border: 1px solid var(--ligne);
	border-radius: 6px;
	transition: border-color 0.2s var(--rythme), box-shadow 0.2s var(--rythme);
}

.k-prevoir__article:hover {
	border-color: var(--ligne-2);
	box-shadow: 0 8px 20px rgba(52, 40, 12, 0.07);
}

.k-prevoir__plaque {
	display: grid;
	flex: none;
	place-items: center;
	width: 3.6rem;
	height: 3.6rem;
	padding: 0.25rem;
	background: var(--plaque);
	border-radius: 4px;
	overflow: hidden;
}

.k-prevoir__plaque img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	background: none;
}

.k-prevoir__corps {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
	margin: 0;
}

.k-prevoir__nom {
	font-size: var(--t-petit);
	font-weight: 600;
	line-height: 1.3;
	color: var(--craie);
	text-decoration: none;
}

/* Le nom couvre toute l'étiquette, sous le bouton « + ». */
.k-prevoir__nom::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: 6px;
}

.k-prevoir__article:hover .k-prevoir__nom {
	text-decoration: underline;
	text-decoration-color: var(--or-vif);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.k-prevoir__nom:focus-visible {
	outline: none;
}

.k-prevoir__nom:focus-visible::after {
	outline: 2px solid var(--or);
	outline-offset: 2px;
}

.k-prevoir__prix {
	font-family: var(--fonte-technique);
	font-size: 0.95rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--craie);
}

.k-prevoir__prix .amount {
	background: linear-gradient(var(--or-vif), var(--or-vif)) 0 92% / 100% 0.3em no-repeat;
}

/* Le « + » de la carte (5), un peu plus petit. */
.k-prevoir a.k-plus {
	width: 2.4rem;
	height: 2.4rem;
}

.k-prevoir .added_to_cart {
	position: relative;
	z-index: 2;
	flex-basis: 100%;
	justify-content: flex-end;
	padding: 0;
	background: none;
	font-family: var(--fonte-technique);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-align: right;
	text-transform: uppercase;
	color: var(--craie);
	text-decoration: underline;
	text-decoration-color: var(--or-vif);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

/* Appareils proches, sous un appareil vendu : les cartes de la boutique. */
.k-fiche-proches {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	gap: var(--e-4) 1.25rem;
}

/* --- Tablette et téléphone. --- */
@media (max-width: 960px) {
	.k-fiche-atelier .woocommerce-product-gallery {
		margin-bottom: var(--e-5);
	}

	.k-rubriques {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.k-fiche-atelier .flex-control-thumbs {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.k-controle {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.k-controle li {
		padding: 0.55rem 0.6rem;
		font-size: 0.74rem;
	}

	.k-bon__ligne {
		grid-template-columns: 6.75rem minmax(0, 1fr);
		gap: var(--e-2);
	}

	.k-cadran {
		padding: 0.6rem 0.65rem 0.7rem;
	}

	.k-cadran__valeur {
		font-size: 1rem;
	}

	.k-cadran__valeur--mot {
		font-size: 0.85rem;
	}

	/* Le bandeau passe sur deux colonnes ; un nombre impair finit sur
	   toute la largeur. */
	.k-reperes {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.k-reperes__case:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.k-rubriques {
		grid-template-columns: minmax(0, 1fr);
	}

	.k-fiche-proches {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--e-3);
	}
}

@media (prefers-reduced-motion: reduce) {
	.k-prevoir__article,
	.k-rubriques__plus > summary,
	.k-rubriques__ouvrir::before {
		transition: none;
	}
}