/**
 * KokoRepair — tunnel de réservation.
 *
 * Direction : « atelier clair ». Le parcours client doit rassurer : peu
 * d'éléments par écran, cibles larges, prix lisible sans effort. Conçu pour le
 * pouce d'abord : la majorité des demandes de réparation se font depuis un
 * téléphone.
 *
 * Les couleurs ne sont que des valeurs par défaut : le client choisit les
 * siennes dans Réglages → Couleurs, et Core\Branding injecte alors une
 * surcharge de ces variables (nuances et contrastes calculés compris) après
 * cette feuille. Ne jamais poser une couleur de marque en dur ici : toujours
 * passer par --k-bench / --k-signal et leurs déclinaisons.
 *
 * Tout est confiné à .kokorepair pour ne rien déborder sur le thème du client.
 */

.kokorepair {
	--k-ink: #12161c;
	--k-ink-2: #4a5560;
	--k-ink-3: #7a8593;

	--k-paper: #ffffff;
	--k-paper-2: #f5f7f8;
	--k-line: #e2e7ea;
	--k-line-2: #cfd7dc;

	/* Couleur principale : structure, sélection, fil d'avancement. */
	--k-bench: #2570eb;
	--k-bench-2: #1d57b7;
	--k-bench-soft: #e9f1fd;
	--k-on-bench: #ffffff;

	/* Couleur d'action : les boutons qui font avancer, et rien d'autre. */
	--k-signal: #2570eb;
	--k-signal-2: #1d57b7;
	--k-on-signal: #ffffff;

	/* Encadré des marques mises en avant. Suit la couleur principale tant que
	   le client n'en choisit pas une autre dans les réglages. */
	--k-spot: #2570eb;
	--k-spot-soft: #eaf1fd;
	--k-on-spot: #ffffff;
	--k-spot-ink: #2570eb;

	--k-ok: #2b7a4f;

	/* Montserrat partout — y compris les prix et petites étiquettes, qui
	   gardent leurs chiffres alignés grâce à tabular-nums (posé plus bas). */
	--k-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--k-mono: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	--k-r: 14px;
	--k-r-sm: 10px;
	--k-shadow: 0 1px 2px rgba(18, 22, 28, 0.05), 0 8px 24px rgba(18, 22, 28, 0.06);
	--k-shadow-lift: 0 4px 10px rgba(18, 22, 28, 0.08), 0 18px 40px rgba(18, 22, 28, 0.1);

	max-width: 940px;
	margin: 0 auto;
	color: var(--k-ink);
	font-family: var(--k-font);
	font-size: 16px;
	line-height: 1.55;
	/* Chiffres à largeur fixe partout : les prix restent alignés sans police
	   monospace dédiée. */
	font-variant-numeric: tabular-nums;
	-webkit-font-smoothing: antialiased;
}

/* Les champs et boutons n'héritent pas de la police du bloc : on l'impose. */
.kokorepair button,
.kokorepair input,
.kokorepair select,
.kokorepair textarea {
	font-family: var(--k-font);
}

.kokorepair *,
.kokorepair *::before,
.kokorepair *::after {
	box-sizing: border-box;
}

/* Le tunnel est posé sur fond clair, quel que soit le thème. Certains thèmes
   (dont koko-store) repeignent le gras dans leur couleur de texte, ce qui
   effaçait les prix du panier : on rend le gras à la couleur de son entourage. */
.kokorepair strong,
.kokorepair b {
	color: inherit;
}

/* ------------------------------------------------------- Fil d'avancement */

.kokorepair .kr-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	counter-reset: none;
}

.kokorepair .kr-steps__item {
	margin: 0;
	padding: 0;
}

.kokorepair .kr-steps__item > a,
.kokorepair .kr-steps__item > span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: var(--k-ink-3);
	font-size: 13px;
}

.kokorepair .kr-steps__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	font-family: var(--k-mono);
	font-size: 11px;
	line-height: 1;
	flex: none;
}

.kokorepair .kr-steps__label {
	letter-spacing: -0.01em;
}

.kokorepair .kr-steps__item.is-done > a {
	color: var(--k-bench);
}

.kokorepair .kr-steps__item.is-done .kr-steps__num {
	background: var(--k-bench);
	border-color: var(--k-bench);
	color: var(--k-on-bench);
}

.kokorepair .kr-steps__item.is-current > span {
	color: var(--k-ink);
	font-weight: 600;
}

.kokorepair .kr-steps__item.is-current .kr-steps__num {
	background: var(--k-ink);
	border-color: var(--k-ink);
	color: #fff;
}

/* ------------------------------------------------------------------ Étape */

.kokorepair .kr-step__title {
	font-size: clamp(1.4rem, 3.4vw, 1.8rem);
	line-height: 1.15;
	letter-spacing: -0.025em;
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--k-ink);
	text-wrap: balance;
}

.kokorepair .kr-step__lead {
	margin: 0 0 18px;
	color: var(--k-ink-2);
	font-size: 1rem;
	max-width: 56ch;
}

.kokorepair .kr-step__lead strong {
	color: var(--k-ink);
	font-weight: 650;
}

.kokorepair .kr-empty {
	padding: 26px;
	border: 1px dashed var(--k-line-2);
	border-radius: var(--k-r);
	color: var(--k-ink-3);
	text-align: center;
	margin: 0;
}

.kokorepair .kr-alert {
	margin: 0 0 22px;
	padding: 13px 16px;
	border-radius: var(--k-r-sm);
	background: #fdeee8;
	border: 1px solid #f2c5b3;
	color: #9c3a15;
	font-size: 0.95rem;
}

/* ------------------------------------------------------------------ Choix */

.kokorepair .kr-choices {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 12px;
}

.kokorepair .kr-choices--wide {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.kokorepair .kr-choice {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 20px;
	background: var(--k-paper);
	border: 1px solid var(--k-line);
	border-radius: var(--k-r);
	box-shadow: var(--k-shadow);
	text-decoration: none;
	color: var(--k-ink);
	transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
	/* Apparition échelonnée : la liste se pose au lieu de surgir d'un bloc. */
	animation: kr-rise 0.32s ease both;
}

.kokorepair .kr-choices > .kr-choice:nth-child(1) { animation-delay: 0.02s; }
.kokorepair .kr-choices > .kr-choice:nth-child(2) { animation-delay: 0.04s; }
.kokorepair .kr-choices > .kr-choice:nth-child(3) { animation-delay: 0.06s; }
.kokorepair .kr-choices > .kr-choice:nth-child(4) { animation-delay: 0.08s; }
.kokorepair .kr-choices > .kr-choice:nth-child(5) { animation-delay: 0.1s; }
.kokorepair .kr-choices > .kr-choice:nth-child(n + 6) { animation-delay: 0.12s; }

@keyframes kr-rise {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

.kokorepair .kr-choice:hover,
.kokorepair .kr-choice:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--k-shadow-lift);
	border-color: var(--k-bench);
	outline: none;
}

.kokorepair .kr-choice__name {
	flex: 1;
	font-weight: 600;
	letter-spacing: -0.012em;
}

.kokorepair .kr-choice__meta {
	font-family: var(--k-mono);
	font-size: 12px;
	color: var(--k-ink-3);
}

.kokorepair .kr-choice__go {
	color: var(--k-bench);
	font-size: 18px;
	line-height: 1;
	transition: transform 0.14s ease;
}

.kokorepair .kr-choice:hover .kr-choice__go {
	transform: translateX(3px);
}

/* --------------------------------------------------------------- Recherche */

.kokorepair .kr-search {
	margin: 0 0 18px;
}

.kokorepair .kr-search__label {
	display: block;
	font-family: var(--k-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--k-ink-3);
	margin-bottom: 6px;
}

.kokorepair .kr-search__input,
.kokorepair .kr-field input,
.kokorepair .kr-field textarea {
	width: 100%;
	padding: 12px 15px;
	border: 1px solid var(--k-line-2);
	border-radius: var(--k-r-sm);
	background: var(--k-paper);
	font: inherit;
	color: var(--k-ink);
	transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.kokorepair .kr-search__input:focus,
.kokorepair .kr-field input:focus,
.kokorepair .kr-field textarea:focus {
	outline: none;
	border-color: var(--k-bench);
	box-shadow: 0 0 0 3px var(--k-bench-soft);
}

/* ---------------------------------------------------------- Réparations */

.kokorepair .kr-repairs {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.kokorepair .kr-repair {
	margin: 0;
	padding: 0;
	border: 0;
}

.kokorepair .kr-repair__legend {
	display: block;
	width: 100%;
	padding: 0 0 10px;
	margin: 0;
}

.kokorepair .kr-repair__name {
	display: block;
	font-size: 1.0625rem;
	font-weight: 650;
	letter-spacing: -0.015em;
}

.kokorepair .kr-repair__desc {
	display: block;
	font-size: 0.9rem;
	color: var(--k-ink-3);
	margin-top: 2px;
}

.kokorepair .kr-options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 10px;
}

.kokorepair .kr-option {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 13px;
	padding: 15px 17px;
	background: var(--k-paper);
	border: 1px solid var(--k-line);
	border-radius: var(--k-r);
	cursor: pointer;
	transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}

.kokorepair .kr-option:hover {
	border-color: var(--k-line-2);
	box-shadow: var(--k-shadow);
}

/* La case reste une vraie case à cocher — accessible au clavier et lisible par
   les lecteurs d'écran — mais dessinée ici de bout en bout : laissée au
   navigateur, elle héritait des styles de formulaire du thème et se rendait en
   carré noir plein sur nos cartes claires. */
.kokorepair .kr-option input {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	width: 21px;
	height: 21px;
	flex: none;
	margin: 0;
	padding: 0;
	cursor: pointer;
	background: var(--k-paper);
	border: 1.5px solid var(--k-line-2);
	border-radius: 6px;
	box-shadow: none;
	transition: background 0.14s ease, border-color 0.14s ease;
}

.kokorepair .kr-option:hover input {
	border-color: var(--k-bench);
}

.kokorepair .kr-option input:checked {
	background: var(--k-bench);
	border-color: var(--k-bench);
}

/* Le crochet est tracé au trait : deux bords d'un carré, pivotés. Il prend la
   couleur calculée pour rester lisible sur la couleur de marque, quelle
   qu'elle soit. */
.kokorepair .kr-option input:checked::after {
	content: '';
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid var(--k-on-bench, #fff);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.kokorepair .kr-option:has(input:checked) {
	border-color: var(--k-bench);
	background: var(--k-bench-soft);
	box-shadow: inset 0 0 0 1px var(--k-bench);
}

.kokorepair .kr-option:has(input:focus-visible) {
	outline: 2px solid var(--k-bench);
	outline-offset: 2px;
}

/* Une seule qualité par prestation : la puce est ronde et se remplit d'un
   point. Le carré coché annonçait un cumul que le formulaire ne permet plus. */
.kokorepair .kr-option input[type="radio"] {
	border-radius: 50%;
}

.kokorepair .kr-option input[type="radio"]:checked::after {
	left: 50%;
	top: 50%;
	width: 9px;
	height: 9px;
	border: 0;
	border-radius: 50%;
	background: var(--k-on-bench, #fff);
	transform: translate(-50%, -50%);
}

/* La sortie du groupe : masquée tant que rien n'est retenu, elle apparaît sous
   les qualités dès qu'une case est cochée. Le bouton lui-même reste dans le
   flux du clavier — il fait partie du groupe et s'atteint aux flèches. */
.kokorepair .kr-options__clear {
	display: none;
	align-self: flex-start;
	margin: 2px 0 0 4px;
	padding: 6px 2px;
	color: var(--k-ink-3, #6b6b70);
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.kokorepair .kr-options:has([data-kr-item]:checked) .kr-options__clear {
	display: inline-flex;
}

.kokorepair .kr-options__clear:hover {
	color: var(--k-bench);
}

.kokorepair .kr-options__none {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.kokorepair .kr-options__clear:has(:focus-visible) {
	outline: 2px solid var(--k-bench);
	outline-offset: 2px;
	border-radius: 6px;
}

.kokorepair .kr-option__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.kokorepair .kr-option__label {
	font-weight: 600;
	letter-spacing: -0.01em;
}

.kokorepair .kr-option__meta {
	font-family: var(--k-mono);
	font-size: 11px;
	color: var(--k-ink-3);
	letter-spacing: 0.02em;
}

/* Ce que vaut la pièce, saisi dans Réglages → Qualités : l'argument qui fait
   choisir l'origine plutôt que la compatible. Il prend sa propre ligne, sous
   le libellé et le prix, et toute la largeur de la case — coincé dans la
   colonne du titre, il tombait en colonne de journal sur un téléphone. */
.kokorepair .kr-option__note {
	flex: 1 0 100%;
	margin-top: 7px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--k-ink-2);
	white-space: pre-line;
	text-wrap: pretty;
}

.kokorepair .kr-option__price {
	font-family: var(--k-mono);
	font-size: 1.0625rem;
	font-weight: 600;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.kokorepair .kr-option__symbol {
	font-size: 0.8em;
	color: var(--k-ink-3);
	margin-left: 1px;
}

/* ----------------------------------------------------------- Récapitulatif */

.kokorepair .kr-summary {
	position: sticky;
	bottom: 12px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 22px;
	padding: 15px 18px;
	background: var(--k-ink);
	color: #fff;
	border-radius: var(--k-r);
	box-shadow: var(--k-shadow-lift);
}

.kokorepair .kr-summary__label {
	display: block;
	font-family: var(--k-mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #9aa6b3;
}

.kokorepair .kr-summary__amount {
	font-family: var(--k-mono);
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.kokorepair .kr-summary__symbol {
	font-size: 0.62em;
	color: #9aa6b3;
	margin-left: 2px;
}

/* ------------------------------------------------------------------- CTA */

.kokorepair .kr-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 26px;
	border: 0;
	border-radius: var(--k-r-sm);
	background: var(--k-signal);
	color: var(--k-on-signal);
	font: inherit;
	font-weight: 600;
	letter-spacing: -0.01em;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.14s ease, transform 0.14s ease;
}

.kokorepair .kr-cta:hover {
	background: var(--k-signal-2);
	color: var(--k-on-signal);
	transform: translateY(-1px);
}

.kokorepair .kr-cta:active {
	transform: translateY(0);
}

.kokorepair .kr-cta:focus-visible {
	/* L'anneau se dessine sur le fond de la page, pas sur le bouton : la
	   nuance foncée reste visible sur un thème clair comme sombre. */
	outline: 2px solid var(--k-signal-2);
	outline-offset: 2px;
}

.kokorepair .kr-cta--block {
	width: 100%;
	margin-top: 20px;
	padding: 16px 26px;
	font-size: 1.05rem;
}

.kokorepair .kr-cta--ghost {
	background: transparent;
	color: var(--k-bench);
	border: 1px solid var(--k-line-2);
	margin-top: 26px;
}

.kokorepair .kr-cta--ghost:hover {
	background: var(--k-bench-soft);
	color: var(--k-bench-2);
}

/* -------------------------------------------------------------- Formulaire */

.kokorepair .kr-step--split {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	align-items: start;
}

/*
 * Sans cette remise à zéro, un enfant large — la bande des jours, une ligne de
 * panier qui ne se coupe pas — impose sa largeur à toute la colonne : sur
 * téléphone, la carte débordait de l'écran et le panier finissait tronqué,
 * hors d'atteinte puisque le thème interdit le défilement horizontal.
 */
.kokorepair .kr-step--split > * {
	min-width: 0;
	max-width: 100%;
}

@media (min-width: 860px) {
	.kokorepair .kr-step--split {
		grid-template-columns: minmax(0, 1.45fr) minmax(260px, 1fr);
		gap: 28px;
	}
}

.kokorepair .kr-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

/* Deux champs par ligne jusqu'en bas de gamme : prénom/nom, e-mail/téléphone,
   code postal/ville vont par paires, et un formulaire de huit champs empilés
   sur un téléphone décourage avant la fin. Seuls les très petits écrans
   repassent sur une colonne. */
@media (max-width: 620px) {
	.kokorepair .kr-fields {
		gap: 10px 8px;
	}
}

@media (max-width: 360px) {
	.kokorepair .kr-fields {
		grid-template-columns: 1fr;
	}
}

.kokorepair .kr-field {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.kokorepair .kr-field--full {
	grid-column: 1 / -1;
}

.kokorepair .kr-field label {
	font-family: var(--k-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--k-ink-3);
}

.kokorepair .kr-req {
	color: var(--k-signal);
}

.kokorepair .kr-note {
	margin: 16px 0 0;
	font-size: 0.875rem;
	color: var(--k-ink-3);
}

/* Pourquoi on réclame l'adresse : dit sous les trois champs, au moment où le
   visiteur se demande si elle est vraiment nécessaire. */
.kokorepair .kr-hint-address {
	margin: -2px 0 0;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--k-ink-3);
}

/* ------------------------------------------------------------- Récapitulatif */

.kokorepair .kr-recap {
	padding: 20px 22px;
	background: var(--k-paper-2);
	border: 1px solid var(--k-line);
	border-radius: var(--k-r);
	position: sticky;
	top: 24px;
}

.kokorepair .kr-recap__title {
	margin: 0 0 4px;
	font-size: 0.8rem;
	font-family: var(--k-mono);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--k-ink-3);
	font-weight: 500;
}

.kokorepair .kr-recap__device {
	margin: 0 0 14px;
	font-size: 1.05rem;
	font-weight: 650;
	letter-spacing: -0.015em;
}

.kokorepair .kr-recap__list,
.kokorepair .kr-ticket__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.kokorepair .kr-recap__list li,
.kokorepair .kr-ticket__list li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-size: 0.925rem;
	padding-bottom: 9px;
	border-bottom: 1px solid var(--k-line);
}

.kokorepair .kr-recap__list em,
.kokorepair .kr-ticket__list em {
	display: block;
	font-style: normal;
	font-size: 0.8rem;
	color: var(--k-bench);
	letter-spacing: 0.02em;
}

.kokorepair .kr-recap__list strong,
.kokorepair .kr-ticket__list strong {
	font-family: var(--k-mono);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.kokorepair .kr-recap__total,
.kokorepair .kr-ticket__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 2px solid var(--k-ink);
	font-weight: 650;
}

.kokorepair .kr-recap__total strong,
.kokorepair .kr-ticket__total strong {
	font-family: var(--k-mono);
	font-size: 1.2rem;
	font-variant-numeric: tabular-nums;
}

.kokorepair .kr-recap__edit {
	display: inline-block;
	margin-top: 14px;
	font-size: 0.875rem;
	color: var(--k-bench);
}

/* ----------------------------------------------------------- Confirmation */

.kokorepair .kr-done {
	text-align: center;
	max-width: 560px;
	margin: 0 auto;
}

.kokorepair .kr-done__mark {
	width: 58px;
	height: 58px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: var(--k-ok);
	color: #fff;
	font-size: 28px;
	line-height: 58px;
	animation: kr-pop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

@keyframes kr-pop {
	from { opacity: 0; transform: scale(0.5); }
	to   { opacity: 1; transform: none; }
}

.kokorepair .kr-done .kr-step__lead {
	margin-left: auto;
	margin-right: auto;
}

.kokorepair .kr-reference {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 0 26px;
	padding: 14px 26px;
	border: 1px dashed var(--k-line-2);
	border-radius: var(--k-r-sm);
	background: var(--k-paper-2);
}

.kokorepair .kr-reference__label {
	font-family: var(--k-mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--k-ink-3);
}

.kokorepair .kr-reference__value {
	font-family: var(--k-mono);
	font-size: 1.5rem;
	letter-spacing: 0.04em;
	color: var(--k-ink);
}

.kokorepair .kr-ticket {
	text-align: left;
	padding: 20px 22px;
	background: var(--k-paper);
	border: 1px solid var(--k-line);
	border-radius: var(--k-r);
	box-shadow: var(--k-shadow);
}

.kokorepair .kr-ticket__device {
	margin: 0 0 14px;
	font-weight: 650;
	letter-spacing: -0.015em;
}

@media (prefers-reduced-motion: reduce) {
	.kokorepair *,
	.kokorepair *::before,
	.kokorepair *::after {
		animation: none !important;
		transition: none !important;
	}
}

/* ------------------------------------------------------- Navigation instantanée */

/*
 * Pendant l'échange avec le serveur, le contenu s'estompe légèrement et cesse de
 * répondre. Un délai avant l'estompage évite le clignotement sur les réponses
 * rapides — la plupart le sont.
 */
.kokorepair .kr-inner {
	transition: opacity 0.15s ease 0.12s;
}

.kokorepair.is-loading .kr-inner {
	opacity: 0.45;
	pointer-events: none;
}

.kokorepair.is-loading {
	cursor: progress;
}


.kokorepair .kr-option__price--quote {
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--k-bench);
	background: var(--k-bench-soft);
	padding: 4px 10px;
	border-radius: 20px;
	white-space: nowrap;
}

.kokorepair .kr-summary__quote {
	font-family: var(--k-mono);
	font-size: 0.75rem;
	color: #9aa6b3;
	margin-left: 8px;
}


/* ---------------------------------------------------------------- Créneaux */

.kokorepair .kr-days {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	padding: 2px 2px 12px;
	margin: 0 0 16px;
	scrollbar-width: thin;
}

.kokorepair .kr-day {
	scroll-snap-align: start;
}

.kokorepair .kr-day {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	min-width: 64px;
	padding: 10px 8px;
	background: var(--k-paper);
	border: 1px solid var(--k-line);
	border-radius: var(--k-r-sm);
	text-decoration: none;
	color: var(--k-ink);
	transition: border-color 0.14s ease, background 0.14s ease;
}

.kokorepair .kr-day__name {
	font-family: var(--k-mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--k-ink-3);
}

.kokorepair .kr-day__num {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.15;
}

.kokorepair .kr-day__month {
	font-size: 11px;
	color: var(--k-ink-3);
}

.kokorepair a.kr-day:hover {
	border-color: var(--k-bench);
}

.kokorepair .kr-day.is-current {
	background: var(--k-bench);
	border-color: var(--k-bench);
}

.kokorepair .kr-day.is-current .kr-day__name,
.kokorepair .kr-day.is-current .kr-day__num,
.kokorepair .kr-day.is-current .kr-day__month {
	color: var(--k-on-bench);
}

.kokorepair .kr-day.is-off {
	opacity: 0.38;
}

.kokorepair .kr-slots-title {
	margin: 0 0 10px;
	font-weight: 650;
	letter-spacing: -0.01em;
}

.kokorepair .kr-slots {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
	gap: 8px;
}

/*
 * Sur téléphone, les créneaux d'une demi-journée défilent au doigt, comme la
 * bande des jours juste au-dessus : une grille de douze cases repousse le
 * bouton « Continuer » deux écrans plus bas, et le geste est le même que pour
 * choisir le jour.
 */
@media (max-width: 600px) {
	.kokorepair .kr-slots {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 6px;
		scrollbar-width: thin;
	}

	.kokorepair .kr-slots .kr-slot {
		flex: 0 0 auto;
		min-width: 82px;
		scroll-snap-align: start;
	}
}

.kokorepair .kr-slot {
	display: block;
	padding: 11px 6px;
	text-align: center;
	background: var(--k-paper);
	border: 1px solid var(--k-line-2);
	border-radius: var(--k-r-sm);
	font-family: var(--k-mono);
	font-weight: 600;
	text-decoration: none;
	color: var(--k-ink);
	transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.kokorepair .kr-slot:hover {
	background: var(--k-bench);
	border-color: var(--k-bench);
	color: var(--k-on-bench);
}

.kokorepair .kr-recap__slot,
.kokorepair .kr-ticket__slot {
	margin: 0 0 12px;
	padding: 9px 12px;
	background: var(--k-bench-soft);
	border-radius: var(--k-r-sm);
	font-size: 0.925rem;
	font-weight: 600;
	color: var(--k-bench-2);
}


/* ------------------------------------------------ Couleurs personnalisées */

/*
 * Les variables --k-on-* sont fournies par les réglages de marque : elles
 * garantissent un texte lisible même sur une couleur claire.
 */
.kokorepair .kr-cta {
	color: var(--k-on-signal, #fff);
}

.kokorepair .kr-cta:hover {
	color: var(--k-on-signal, #fff);
}

.kokorepair .kr-day.is-current .kr-day__name,
.kokorepair .kr-day.is-current .kr-day__num,
.kokorepair .kr-day.is-current .kr-day__month {
	color: var(--k-on-bench, #fff);
}

.kokorepair .kr-slot:hover {
	color: var(--k-on-bench, #fff);
}

.kokorepair .kr-steps__item.is-done .kr-steps__num {
	color: var(--k-on-bench, #fff);
}

/* ------------------------------------------------------------ Enveloppe */

/*
 * Le tunnel vit dans une carte : bord discret, coins arrondis, ombre légère.
 * Elle isole visuellement le parcours du reste de la page, quel que soit le
 * thème du site.
 */
.kokorepair {
	background: var(--k-paper);
	border: 1px solid var(--k-line);
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(18, 22, 28, 0.04), 0 12px 32px rgba(18, 22, 28, 0.07);
	padding: clamp(20px, 4vw, 40px);
}

@media (max-width: 560px) {
	.kokorepair {
		border-radius: 14px;
	}
}


/* L'attribut hidden posé par le filtre de recherche doit l'emporter sur les
   display:flex des cartes, sinon la recherche ne masque rien. */
.kokorepair [hidden] {
	display: none !important;
}

/* ------------------------------------------------- Fil d'avancement mobile */

/*
 * Sur téléphone, six étapes libellées passent sur deux lignes et mangent
 * l'écran : on garde les pastilles, seul le libellé de l'étape courante reste.
 */
@media (max-width: 600px) {
	.kokorepair .kr-steps {
		flex-wrap: nowrap;
		gap: 10px;
		overflow-x: auto;
		padding-bottom: 4px;
		margin-bottom: 22px;
		scrollbar-width: none;
	}

	.kokorepair .kr-steps::-webkit-scrollbar {
		display: none;
	}

	.kokorepair .kr-steps__item {
		flex: none;
	}

	.kokorepair .kr-steps__item:not(.is-current) .kr-steps__label {
		display: none;
	}

	.kokorepair .kr-steps__item.is-current {
		background: var(--k-bench-soft);
		border-radius: 20px;
		padding: 2px 12px 2px 2px;
	}

	.kokorepair .kr-steps__item.is-current .kr-steps__label {
		color: var(--k-bench-2);
	}
}


/* ------------------------------------------------------------ Bouton retour */

.kokorepair .kr-topbar {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
}

.kokorepair .kr-topbar .kr-steps {
	margin: 0;
	flex: 1;
	min-width: 0;
}

.kokorepair .kr-back {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1.5px solid var(--k-bench);
	border-radius: 50%;
	color: var(--k-bench);
	font-size: 17px;
	line-height: 1;
	text-decoration: none;
	transition: background 0.14s ease, color 0.14s ease, transform 0.14s ease;
}

.kokorepair .kr-back:hover {
	background: var(--k-bench);
	color: var(--k-on-bench, #fff);
	transform: translateX(-2px);
}

.kokorepair .kr-back:focus-visible {
	outline: 2px solid var(--k-bench);
	outline-offset: 2px;
}

@media (max-width: 600px) {
	.kokorepair .kr-topbar {
		margin-bottom: 22px;
	}

	.kokorepair .kr-topbar .kr-steps {
		margin-bottom: 0;
	}
}


/* Le tunnel est conçu clair : sans cette déclaration, un appareil en mode
   sombre repeint les contrôles de formulaire avec ses propres couleurs et
   produit du texte blanc sur fond blanc. */
.kokorepair {
	color-scheme: light;
}

/* ------------------------------------------------------------------ Tuiles */

/*
 * Les étapes appareil / marque / modèle présentent des tuiles centrées :
 * pictogramme ou photo au-dessus, libellé en dessous. Les visuels viennent de
 * la médiathèque du client ; à défaut, une icône au trait (catégories), un
 * monogramme (marques) ou l'icône de la catégorie (modèles) prennent le relais.
 */
.kokorepair .kr-choices--tiles {
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.kokorepair .kr-choice--tile {
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	padding: 22px 14px 18px;
	text-align: center;
}

.kokorepair .kr-choice--tile .kr-choice__name {
	flex: none;
}

.kokorepair .kr-tile__visual {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	color: var(--k-ink-2);
	transition: color 0.14s ease;
}

.kokorepair .kr-choice--tile:hover .kr-tile__visual,
.kokorepair .kr-choice--tile:focus-visible .kr-tile__visual {
	color: var(--k-bench);
}

.kokorepair .kr-tile__visual svg {
	width: 38px;
	height: 38px;
}

.kokorepair .kr-tile__visual img {
	max-height: 52px;
	max-width: 110px;
	object-fit: contain;
}

.kokorepair .kr-tile__monogram {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--k-bench-soft);
	color: var(--k-bench);
	font-weight: 700;
	font-size: 1.15rem;
}

/*
 * Marques les plus demandées : un encadré en tête d'étape.
 *
 * Neuf clients sur dix viennent pour trois marques ; les chercher dans une
 * grille alphabétique de quarante logos est un travail qu'on ne doit pas leur
 * demander. Le cadre coloré et le fond pastel disent « c'est probablement ici »
 * sans écrire une ligne de plus, et les tuiles restent celles de la grille
 * pour que le geste soit le même partout.
 */
.kokorepair .kr-spotlight {
	margin: 0 0 20px;
	padding: 16px 16px 18px;
	border: 1.5px solid var(--k-spot);
	border-radius: var(--k-r);
	background: var(--k-spot-soft);
}

.kokorepair .kr-spotlight__head {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0 0 14px;
}

.kokorepair .kr-spotlight__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--k-spot);
	color: var(--k-on-spot);
}

.kokorepair .kr-spotlight__badge svg {
	width: 18px;
	height: 18px;
}

.kokorepair .kr-spotlight__titles {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.kokorepair .kr-spotlight__title {
	font-weight: 700;
	font-size: 1.02rem;
	line-height: 1.3;
	letter-spacing: -0.012em;
	color: var(--k-spot-ink);
}

.kokorepair .kr-spotlight__note {
	font-size: 0.86rem;
	line-height: 1.35;
	color: var(--k-ink-2);
}

/* Les tuiles de l'encadré sont posées sur le pastel : elles gardent leur fond
   blanc, sans ombre portée qui alourdirait le bloc. */
.kokorepair .kr-spotlight .kr-choice--tile {
	box-shadow: none;
	border-color: transparent;
}

.kokorepair .kr-spotlight .kr-choice--tile:hover,
.kokorepair .kr-spotlight .kr-choice--tile:focus-visible {
	border-color: var(--k-spot);
	box-shadow: var(--k-shadow-lift);
}

/* Titre de la grille restante, sous l'encadré. */
.kokorepair .kr-subhead {
	margin: 0 0 10px;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--k-ink-3);
}

@media (max-width: 600px) {
	.kokorepair .kr-spotlight {
		padding: 13px 11px 14px;
		margin-bottom: 16px;
	}

	.kokorepair .kr-spotlight__head {
		margin-bottom: 11px;
	}

	/* Trois marques mises en avant tiennent sur une ligne plutôt que de
	   déborder en deux plus une, qui laissait une case vide et donnait à
	   l'encadré la hauteur d'un demi-écran. Les tuiles se resserrent : le
	   logo suffit à reconnaître la marque, le nom reste lisible dessous. */
	.kokorepair .kr-spotlight .kr-choices--tiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}

	.kokorepair .kr-spotlight .kr-choice--tile {
		padding: 12px 6px 10px;
		gap: 6px;
	}

	.kokorepair .kr-spotlight .kr-tile__visual {
		height: 38px;
	}

	.kokorepair .kr-spotlight .kr-tile__visual img {
		max-height: 34px;
		max-width: 100%;
	}

	.kokorepair .kr-spotlight .kr-tile__monogram {
		width: 34px;
		height: 34px;
		font-size: 15px;
	}

	.kokorepair .kr-spotlight .kr-choice--tile .kr-choice__name {
		font-size: 12.5px;
		line-height: 1.25;
	}
}

/* Les modèles montrent une photo : la zone visuelle est plus généreuse. */
.kokorepair .kr-choices--models {
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

.kokorepair .kr-choices--models .kr-tile__visual {
	height: 96px;
}

.kokorepair .kr-choices--models .kr-tile__visual img {
	max-height: 96px;
	max-width: 140px;
}

.kokorepair .kr-choices--models .kr-tile__visual svg {
	width: 44px;
	height: 44px;
	opacity: 0.55;
}

/*
 * Sur téléphone, une tuile de 170px de large ne tient pas deux fois : la liste
 * des modèles passait à une par ligne et il fallait faire défiler dix écrans
 * pour trouver son iPhone. On force donc deux colonnes et on réduit la photo
 * en conséquence.
 */
@media (max-width: 600px) {
	.kokorepair .kr-choices--models,
	.kokorepair .kr-choices--tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.kokorepair .kr-choice--tile {
		padding: 16px 10px 14px;
		gap: 8px;
	}

	.kokorepair .kr-choices--models .kr-tile__visual {
		height: 74px;
	}

	.kokorepair .kr-choices--models .kr-tile__visual img {
		max-height: 74px;
		max-width: 100%;
	}

	.kokorepair .kr-choice--tile .kr-choice__name {
		font-size: 14px;
		line-height: 1.3;
	}
}


/* ------------------------------------------------------------- Formules */

.kokorepair .kr-service {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	background: var(--k-paper);
	border: 1px solid var(--k-line);
	border-radius: var(--k-r);
	box-shadow: var(--k-shadow);
	text-decoration: none;
	color: var(--k-ink);
	transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}

.kokorepair a.kr-service:hover {
	transform: translateY(-2px);
	box-shadow: var(--k-shadow-lift);
	border-color: var(--k-bench);
}

.kokorepair .kr-service.is-current {
	border-color: var(--k-bench);
	box-shadow: inset 0 0 0 1.5px var(--k-bench);
	background: var(--k-bench-soft);
}

.kokorepair .kr-service.is-off {
	opacity: 0.55;
	cursor: not-allowed;
}

.kokorepair .kr-service__icon {
	font-size: 26px;
	flex: none;
}

.kokorepair .kr-service__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.kokorepair .kr-service__name {
	font-weight: 650;
	letter-spacing: -0.012em;
}

.kokorepair .kr-service__hint {
	font-size: 0.85rem;
	color: var(--k-ink-3);
}

.kokorepair .kr-service__min {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--k-signal);
}

.kokorepair .kr-service__price {
	flex: none;
	font-family: var(--k-mono);
	font-weight: 600;
	font-size: 0.925rem;
	color: var(--k-bench-2);
	white-space: nowrap;
}

.kokorepair .kr-slots-period {
	margin: 14px 0 8px;
	font-family: var(--k-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--k-ink-3);
}

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

/* Une seule colonne : des tuiles larges où le titre, le descriptif et le prix
   respirent, plutôt que deux colonnes étriquées. */
.kokorepair .kr-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

.kokorepair .kr-card {
	position: relative;
	border: 1px solid var(--k-line-2);
	border-radius: var(--k-r);
	/* Fond légèrement teinté vers la couleur de la boutique. */
	background: linear-gradient(115deg, var(--k-paper) 55%, var(--k-bench-soft) 160%);
	overflow: hidden;
	transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

/* Filet de couleur à gauche : la signature de la boutique. */
.kokorepair .kr-card::before {
	content: '';
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	background: var(--k-bench);
	opacity: 0.35;
	transition: opacity 0.14s ease;
}

.kokorepair .kr-card:hover::before,
.kokorepair .kr-card.is-picked::before {
	opacity: 1;
}

.kokorepair .kr-card:hover {
	border-color: var(--k-bench);
	box-shadow: var(--k-shadow);
}

.kokorepair .kr-card.is-picked {
	border-color: var(--k-bench);
	box-shadow: 0 0 0 3px var(--k-bench-soft);
}

.kokorepair details.kr-card > summary.kr-card__face {
	display: block;
	position: relative;
	padding: 13px 42px 13px 18px;
	cursor: pointer;
	list-style: none;
}

.kokorepair .kr-card__face::-webkit-details-marker,
.kokorepair .kr-card__face::marker {
	display: none;
	content: '';
}

.kokorepair .kr-card__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.kokorepair .kr-card__name {
	font-weight: 700;
	font-size: 16px;
	letter-spacing: -0.01em;
	color: var(--k-ink);
}

/* Le prix vit dans une pastille aux couleurs de la boutique. */
.kokorepair .kr-card__from {
	flex: 0 0 auto;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	background: var(--k-bench-soft);
	border-radius: 11px;
	padding: 6px 13px;
	white-space: nowrap;
}

.kokorepair .kr-card__from em {
	display: block;
	font-style: normal;
	font-family: var(--k-mono);
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--k-bench-2);
}

.kokorepair .kr-card__from strong {
	font-family: var(--k-mono);
	font-size: 16px;
	line-height: 1.25;
	color: var(--k-bench-2);
}

.kokorepair .kr-card__from-quote {
	font-size: 13px;
	padding: 3px 0;
}

.kokorepair .kr-card__meta {
	display: block;
	font-family: var(--k-mono);
	font-size: 11px;
	color: var(--k-ink-3);
	margin-top: 3px;
}

.kokorepair .kr-card__desc {
	display: block;
	font-size: 13px;
	line-height: 1.5;
	color: var(--k-ink-2);
	margin-top: 6px;
	max-width: 60ch;
}

.kokorepair .kr-card__chevron {
	position: absolute;
	top: 50%;
	right: 18px;
	width: 9px;
	height: 9px;
	margin-top: -7px;
	border-right: 2px solid var(--k-bench);
	border-bottom: 2px solid var(--k-bench);
	transform: rotate(45deg);
	transition: transform 0.14s ease;
}

.kokorepair .kr-card[open] .kr-card__chevron {
	transform: rotate(-135deg);
	margin-top: -2px;
}

.kokorepair .kr-card > .kr-options {
	/* Dans une carte, les qualités s'empilent : la grille générale des options
	   impose un minimum de 260px qui déborderait d'une carte étroite. */
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 16px 14px;
	border-top: 1px dashed var(--k-line-2);
}

.kokorepair .kr-card .kr-option {
	padding: 12px 14px;
	min-width: 0;
	box-shadow: none;
	background: var(--k-paper);
}

.kokorepair .kr-card .kr-option__body {
	gap: 3px;
}

.kokorepair .kr-card .kr-option__label {
	font-size: 14px;
}

.kokorepair .kr-card .kr-option__meta {
	font-size: 11px;
}

/* ------------------------------------------------------- Couleurs modèle */

.kokorepair .kr-colors {
	margin: 0 0 18px;
}

.kokorepair .kr-colors__label {
	font-family: var(--k-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--k-ink-3);
	margin: 0 0 8px;
}

.kokorepair .kr-colors__row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.kokorepair .kr-color input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.kokorepair .kr-color__chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 13px;
	border: 1px solid var(--k-line-2);
	border-radius: 999px;
	background: var(--k-paper);
	font-size: 13px;
	color: var(--k-ink);
	cursor: pointer;
	transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.kokorepair .kr-color:hover .kr-color__chip {
	border-color: var(--k-bench);
}

.kokorepair .kr-color input:checked + .kr-color__chip {
	border-color: var(--k-bench);
	box-shadow: 0 0 0 3px var(--k-bench-soft);
	font-weight: 600;
}

.kokorepair .kr-color__dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.12);
}

/* --------------------------------------------------------- Panier latéral */

.kokorepair .kr-cart {
	min-width: 0;
	max-width: 100%;
	border: 1px solid var(--k-line-2);
	border-radius: var(--k-r-sm);
	background: var(--k-paper);
	padding: 18px;
	position: sticky;
	top: 24px;
}

.kokorepair .kr-cart__title {
	margin: 0 0 4px;
	font-size: 16px;
	color: var(--k-ink);
}

.kokorepair .kr-cart__device {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--k-ink-2);
}

.kokorepair .kr-cart__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kokorepair .kr-cart__item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
	border-bottom: 1px dashed var(--k-line-2);
	font-size: 13px;
}

.kokorepair .kr-cart__label {
	flex: 1;
	min-width: 0;
	overflow-wrap: anywhere;
	color: var(--k-ink);
}

.kokorepair .kr-cart__label em {
	font-style: normal;
	color: var(--k-ink-3);
}

.kokorepair .kr-cart__price {
	font-family: var(--k-mono);
	white-space: nowrap;
}

.kokorepair .kr-cart__remove {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: #fdecec;
	color: #b3261e;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.kokorepair .kr-cart__remove:hover {
	background: #b3261e;
	color: #fff;
}

.kokorepair .kr-cart__empty {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--k-ink-3);
}

.kokorepair .kr-cart__totals {
	margin-top: 12px;
}

.kokorepair .kr-cart__row {
	display: flex;
	justify-content: space-between;
	margin: 4px 0;
	font-size: 13px;
	color: var(--k-ink-2);
}

.kokorepair .kr-cart__row span:last-child {
	font-family: var(--k-mono);
}

.kokorepair .kr-cart__row--promo {
	color: #1b7f4d;
}

.kokorepair .kr-cart__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin: 10px 0 0;
	padding-top: 10px;
	border-top: 2px solid var(--k-ink);
	font-size: 14px;
}

.kokorepair .kr-cart__total strong {
	font-family: var(--k-mono);
	font-size: 18px;
}

.kokorepair .kr-cart__quote-note {
	margin: 4px 0 0;
	font-size: 11px;
	color: var(--k-ink-3);
}

/* Ligne remisée : l'ancien prix barré, le nouveau juste dessous. */

.kokorepair .kr-cart__was {
	display: block;
	font-weight: 400;
	font-size: 11px;
	color: var(--k-ink-3);
	text-decoration: line-through;
}

.kokorepair .kr-cart__now {
	display: block;
	color: #1b7f4d;
}

/* Relance multi-réparations : l'argument, à l'endroit où le client hésite. */

.kokorepair .kr-cart__bundle {
	margin: 12px 0 0;
	padding: 9px 11px;
	border: 1px dashed #1b7f4d;
	border-radius: 8px;
	background: rgba(27, 127, 77, 0.06);
	font-size: 12px;
	line-height: 1.4;
	color: #1b7f4d;
}

.kokorepair .kr-cart .kr-cta--block {
	margin-top: 14px;
}

/* Code promo */

.kokorepair .kr-promo {
	margin-top: 14px;
}

.kokorepair .kr-promo__label {
	display: block;
	font-family: var(--k-mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--k-ink-3);
	margin-bottom: 5px;
}

.kokorepair .kr-promo__row {
	display: flex;
	gap: 8px;
}

.kokorepair .kr-promo__row input {
	flex: 1;
	min-width: 0;
	padding: 9px 12px;
	border: 1px solid var(--k-line-2);
	border-radius: var(--k-r-sm);
	font: inherit;
	font-size: 13px;
	text-transform: uppercase;
	color: var(--k-ink);
	background: var(--k-paper);
}

.kokorepair .kr-promo__row input:focus {
	outline: none;
	border-color: var(--k-bench);
	box-shadow: 0 0 0 3px var(--k-bench-soft);
}

.kokorepair .kr-btn-mini {
	padding: 9px 14px;
	border: 1px solid var(--k-line-2);
	border-radius: var(--k-r-sm);
	background: var(--k-paper);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--k-ink);
	cursor: pointer;
	transition: border-color 0.14s ease, background 0.14s ease;
}

.kokorepair .kr-btn-mini:hover {
	border-color: var(--k-bench);
	color: var(--k-bench);
}

.kokorepair .kr-btn-mini--full {
	width: 100%;
}

/* Devis PDF */

.kokorepair .kr-pdf {
	margin-top: 12px;
	border: 1px solid var(--k-line-2);
	border-radius: var(--k-r-sm);
	background: var(--k-bench-soft);
}

.kokorepair .kr-pdf__toggle {
	display: block;
	padding: 11px 14px;
	cursor: pointer;
	text-align: center;
	list-style: none;
}

.kokorepair .kr-pdf__toggle::-webkit-details-marker {
	display: none;
}

.kokorepair .kr-pdf__title {
	display: block;
	font-weight: 700;
	font-size: 13px;
	color: var(--k-bench-2);
}

.kokorepair .kr-pdf__hint {
	display: block;
	font-size: 11px;
	color: var(--k-ink-3);
}

.kokorepair .kr-pdf__form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0 14px 14px;
}

.kokorepair .kr-pdf__form input {
	padding: 9px 12px;
	border: 1px solid var(--k-line-2);
	border-radius: var(--k-r-sm);
	font: inherit;
	font-size: 13px;
	background: var(--k-paper);
	color: var(--k-ink);
}

.kokorepair .kr-pdf__form input:focus {
	outline: none;
	border-color: var(--k-bench);
	box-shadow: 0 0 0 3px var(--k-bench-soft);
}

/* ---------------------------------------------------- Recherche globale */

.kokorepair .kr-search--global {
	max-width: 560px;
}

.kokorepair .kr-search__wrap {
	position: relative;
}

.kokorepair .kr-hits {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 40;
	background: var(--k-paper);
	border: 1px solid var(--k-line-2);
	border-radius: var(--k-r-sm);
	box-shadow: 0 14px 34px rgba(15, 27, 36, 0.14);
	/* Beaucoup de résultats : la liste défile au lieu de remplir l'écran. */
	max-height: min(420px, 60vh);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.kokorepair .kr-hit {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	text-decoration: none;
	border-bottom: 1px solid var(--k-line-2);
}

.kokorepair .kr-hit:last-child {
	border-bottom: 0;
}

.kokorepair .kr-hit:hover {
	background: var(--k-bench-soft);
}

.kokorepair .kr-hit__visual {
	flex: 0 0 40px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.kokorepair .kr-hit__visual img {
	max-width: 40px;
	max-height: 46px;
	object-fit: contain;
}

.kokorepair .kr-hit__brand {
	display: block;
	font-family: var(--k-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--k-ink-3);
}

.kokorepair .kr-hit__name {
	display: block;
	font-size: 14px;
	color: var(--k-ink);
}

/* Message de succès */

.kokorepair .kr-alert--ok {
	background: #e8f6ee;
	border-color: #bfe5cf;
	color: #17663d;
}

/* -------------------------------------------- Sélection puis Continuer */

.kokorepair .kr-slot.is-current {
	background: var(--k-bench);
	border-color: var(--k-bench);
	color: #fff;
	font-weight: 700;
}

.kokorepair .kr-nextbar {
	margin-top: 20px;
	max-width: 420px;
}

.kokorepair .kr-nextbar__picked {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--k-ink);
}

/* Créneau choisi, rappelé dans le panier. */
.kokorepair .kr-cart__slot {
	margin: -6px 0 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--k-ink);
}

/* Prénom et nom côte à côte dans le formulaire de devis. */
.kokorepair .kr-pdf__duo {
	display: flex;
	gap: 8px;
}

.kokorepair .kr-pdf__duo input {
	flex: 1;
	min-width: 0;
}

/* --------------------------------------------- Visuel du modèle au panier */

.kokorepair .kr-cart__head,
.kokorepair .kr-recap__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.kokorepair .kr-cart__titles {
	min-width: 0;
}

.kokorepair .kr-cart__img {
	flex: 0 0 auto;
	max-width: 52px;
	max-height: 64px;
	object-fit: contain;
}

/* -------------------------------------- Visuel du modèle près du titre */

.kokorepair .kr-step__head {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	margin-bottom: 10px;
}

.kokorepair .kr-step__headings {
	min-width: 0;
}

/* L'appareil à gauche du titre, son nom en petit dessous. */
.kokorepair .kr-step__figure {
	flex: 0 0 auto;
	width: 84px;
	margin: 0;
	text-align: center;
}

.kokorepair .kr-step__model {
	display: block;
	margin: 0 auto;
	max-height: 108px;
	max-width: 84px;
	object-fit: contain;
}

.kokorepair .kr-step__caption {
	margin-top: 5px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--k-bench-2);
	overflow-wrap: break-word;
}

/* ------------------------------------------------ États de clic et focus */

/* Un clic souris ne doit laisser aucun anneau ni surlignage : l'anneau de
   focus est réservé à la navigation au clavier, aux couleurs de la boutique.
   Le thème du site ne doit jamais imposer les siens dans le tunnel. */
.kokorepair {
	-webkit-tap-highlight-color: transparent;
}

.kokorepair a:focus:not(:focus-visible),
.kokorepair button:focus:not(:focus-visible),
.kokorepair summary:focus:not(:focus-visible),
.kokorepair [type="checkbox"]:focus:not(:focus-visible),
.kokorepair [type="radio"]:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

.kokorepair a:focus-visible,
.kokorepair button:focus-visible,
.kokorepair summary:focus-visible {
	outline: 2px solid var(--k-bench);
	outline-offset: 2px;
}

/* Le bouton d'action s'assombrit franchement pendant l'appui : un retour
   visible, dans la teinte du client plutôt que celle du navigateur. */
.kokorepair .kr-cta:active {
	background: var(--k-signal-2);
	color: var(--k-on-signal);
}

.kokorepair .kr-btn-mini:active,
.kokorepair .kr-slot:active,
.kokorepair .kr-day:active,
.kokorepair .kr-choice:active,
.kokorepair .kr-service:active {
	border-color: var(--k-bench);
	background: var(--k-bench-soft);
}

/* Le thème du site (rouge au clic) ne doit jamais repeindre nos contrôles :
   chaque état focus/actif est réaffirmé ici avec nos propres couleurs. */
.kokorepair :is(a, button, summary):focus,
.kokorepair :is(a, button, summary):active {
	color: inherit !important;
	text-decoration: none !important;
}

.kokorepair .kr-cta:focus,
.kokorepair .kr-cta:active {
	background: var(--k-signal-2) !important;
	color: var(--k-on-signal) !important;
}

.kokorepair .kr-slot:focus,
.kokorepair .kr-slot:active {
	background: var(--k-paper) !important;
	color: var(--k-ink) !important;
}

.kokorepair .kr-slot.is-current:focus,
.kokorepair .kr-slot.is-current:active {
	background: var(--k-bench) !important;
	color: var(--k-on-bench) !important;
}

.kokorepair .kr-day.is-current:focus,
.kokorepair .kr-day.is-current:active {
	background: var(--k-bench) !important;
	color: var(--k-on-bench) !important;
}

.kokorepair .kr-back:focus,
.kokorepair .kr-back:active {
	color: var(--k-bench) !important;
}

.kokorepair .kr-recap__edit:focus,
.kokorepair .kr-recap__edit:active {
	color: var(--k-bench) !important;
}

.kokorepair .kr-cart__remove:focus,
.kokorepair .kr-cart__remove:active {
	background: #b3261e !important;
	color: #fff !important;
}

.kokorepair .kr-steps__item a:focus,
.kokorepair .kr-steps__item a:active {
	color: var(--k-bench) !important;
}

/* Champ piège anti-robot.
   Sorti de l'écran plutôt que « display:none » : les robots ignorent ce qui est
   masqué, ils remplissent ce qui a l'air d'être un champ ordinaire. */
.kokorepair .kr-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* ---------------------------------------------------------------- Suivi ---
   « Où en est ma réparation ? » Deux champs, puis une frise verticale qui se
   lit d'un coup d'œil : le client cherche une seule information, l'étape en
   cours. Elle est donc la seule à porter de la couleur. */

.kokorepair .kr-track__form {
	background: var(--k-paper);
	border: 1px solid var(--k-line);
	border-radius: var(--k-r);
	box-shadow: var(--k-shadow);
	padding: 28px;
}

.kokorepair .kr-track__title {
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.kokorepair .kr-track__lead {
	margin: 0 0 20px;
	color: var(--k-ink-2);
	font-size: 15px;
}

.kokorepair .kr-track__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 20px;
}

@media (max-width: 640px) {
	.kokorepair .kr-track__fields {
		grid-template-columns: 1fr;
	}
}

.kokorepair .kr-track__result {
	margin-top: 24px;
	background: var(--k-paper);
	border: 1px solid var(--k-line);
	border-radius: var(--k-r);
	box-shadow: var(--k-shadow);
	padding: 28px;
}

.kokorepair .kr-track__head {
	border-bottom: 1px solid var(--k-line);
	padding-bottom: 16px;
	margin-bottom: 24px;
}

.kokorepair .kr-track__ref {
	margin: 0 0 4px;
	color: var(--k-ink-3);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.kokorepair .kr-track__device {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
}

/* La frise : un filet vertical continu, un point par étape. Le trait relie les
   points plutôt que de border chaque ligne — c'est ce qui donne la lecture
   « chemin parcouru ». */
.kokorepair .kr-track__steps {
	list-style: none;
	margin: 0;
	padding: 0 0 0 8px;
	position: relative;
}

.kokorepair .kr-track__steps::before {
	content: "";
	position: absolute;
	left: 13px;
	top: 10px;
	bottom: 10px;
	width: 2px;
	background: var(--k-line);
}

.kokorepair .kr-track__step {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 0 10px 26px;
	color: var(--k-ink-3);
	font-size: 15px;
}

.kokorepair .kr-track__dot {
	position: absolute;
	left: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--k-paper);
	border: 2px solid var(--k-line-2);
	box-shadow: 0 0 0 4px var(--k-paper);
}

.kokorepair .kr-track__step.is-done {
	color: var(--k-ink-2);
}

.kokorepair .kr-track__step.is-done .kr-track__dot {
	background: var(--k-ok);
	border-color: var(--k-ok);
}

.kokorepair .kr-track__step.is-current {
	color: var(--k-ink);
	font-weight: 700;
}

.kokorepair .kr-track__step.is-current .kr-track__dot {
	background: var(--k-bench);
	border-color: var(--k-bench);
	box-shadow: 0 0 0 4px var(--k-bench-soft);
}

.kokorepair .kr-track__now {
	background: var(--k-bench-soft);
	color: var(--k-bench-2);
	border-radius: 999px;
	padding: 2px 10px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.kokorepair .kr-track__stopped {
	background: var(--k-paper-2);
	border-radius: var(--k-r-sm);
	padding: 16px;
	margin: 0;
	color: var(--k-ink-2);
}

.kokorepair .kr-track__note {
	margin: 20px 0 0;
	padding: 14px 16px;
	background: var(--k-bench-soft);
	border-radius: var(--k-r-sm);
	font-size: 15px;
}

.kokorepair .kr-track__facts {
	margin: 24px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--k-line);
	display: grid;
	gap: 16px;
}

.kokorepair .kr-track__fact dt {
	color: var(--k-ink-3);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 4px;
}

.kokorepair .kr-track__fact dd {
	margin: 0;
	font-size: 16px;
}

.kokorepair .kr-track__lines {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kokorepair .kr-track__lines li {
	padding: 2px 0;
}

.kokorepair .kr-track__quality {
	color: var(--k-ink-3);
	font-size: 14px;
}

.kokorepair .kr-track__quality::before {
	content: "— ";
}

.kokorepair .kr-track__total {
	font-size: 20px;
	font-weight: 700;
}

.kokorepair .kr-track__help {
	margin: 24px 0 0;
	color: var(--k-ink-2);
	font-size: 14px;
}

/* Acompte encore dû : le seul élément du suivi qui appelle une action. */
.kokorepair .kr-track__pay {
	display: inline-block;
	margin-left: 10px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--k-signal);
	color: var(--k-on-signal);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.kokorepair .kr-track__pay:hover,
.kokorepair .kr-track__pay:focus {
	background: var(--k-signal-2);
	color: var(--k-on-signal);
}


/* ===================================================== Le tunnel sur un
 * téléphone
 *
 * Ce bloc vient en dernier, et c'est la raison d'être de la section : les
 * règles générales des cartes, des cases et de l'en-tête sont écrites plus
 * haut avec la même spécificité. Placé avant elles — c'était le cas jusqu'ici —
 * le resserrement mobile ne s'appliquait jamais : sur un téléphone, le tunnel
 * portait les rembourrages prévus pour un écran d'ordinateur.
 *
 * Sur 390 px de large, l'empilement des encadrements coûtait 94 px avant la
 * première lettre. Ce qui suit rend cette largeur au texte et met deux
 * prestations par ligne.
 */

@media (max-width: 600px) {

	/* L'enveloppe du tunnel : 20 px de chaque côté sur un écran de 390 px,
	   c'est 40 px de texte en moins. */
	.kokorepair {
		padding: 10px;
	}

	/* -------------------------------------------------- En-tête de l'étape */

	/* La photo de l'appareil laisse la ligne au texte. */
	.kokorepair .kr-step__head {
		gap: 12px;
	}

	.kokorepair .kr-step__figure {
		width: 58px;
	}

	.kokorepair .kr-step__model {
		max-width: 58px;
		max-height: 76px;
	}

	/* Le nom du modèle est déjà dans la phrase juste à côté : sous une photo
	   de 58 px, il tombait en trois lignes sans rien apprendre. */
	.kokorepair .kr-step__caption {
		display: none;
	}

	/* Une phrase par ligne : « Tarifs pour votre iPhone 17 Pro Max. » puis
	   « Vous pouvez cumuler plusieurs réparations. » Il en fallait quatre. */
	.kokorepair .kr-step__lead {
		font-size: 12px;
		line-height: 1.45;
		margin-bottom: 14px;
	}

	.kokorepair .kr-step__phrase {
		display: block;
	}

	/* ------------------------------------------------ Couleurs de l'appareil */

	/* Trois couleurs par ligne au minimum : à la volée, « Cosmic Orange » et
	   « Silver » remplissaient déjà une ligne et « Deep Blue » partait seul
	   sur la suivante. */
	.kokorepair .kr-colors__row {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 7px;
	}

	/* L'étiquette porte la hauteur de la rangée pour que les trois pastilles
	   s'alignent, même quand un nom passe sur deux lignes. */
	.kokorepair .kr-colors__row .kr-color {
		display: flex;
	}

	.kokorepair .kr-color__chip {
		justify-content: flex-start;
		width: 100%;
		padding: 7px 9px;
		gap: 6px;
		font-size: 12px;
		line-height: 1.25;
	}

	.kokorepair .kr-color__dot {
		width: 11px;
		height: 11px;
		flex: none;
	}

	/* ---------------------------------------------- Cartes des prestations */

	/* Deux prestations par ligne : la liste tient dans un écran au lieu d'en
	   demander trois. */
	.kokorepair .kr-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	/* Une carte dépliée reprend toute la largeur : les qualités et leur
	   descriptif ont besoin de la ligne entière pour rester lisibles. */
	.kokorepair .kr-card[open] {
		grid-column: 1 / -1;
	}

	/* Face repliée : le titre, puis la pastille de prix dessous. Côte à côte,
	   il ne resterait pas dix caractères pour le nom de la prestation. */
	.kokorepair details.kr-card > summary.kr-card__face {
		display: flex;
		flex-direction: column;
		height: 100%;
		padding: 11px 11px 11px 12px;
	}

	.kokorepair .kr-card__top {
		flex: 1 1 auto;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		gap: 9px;
	}

	.kokorepair .kr-card__name {
		font-size: 14px;
		line-height: 1.25;
	}

	.kokorepair .kr-card__from {
		align-items: flex-start;
		padding: 5px 9px;
		border-radius: 9px;
	}

	.kokorepair .kr-card__from strong {
		font-size: 15px;
	}

	.kokorepair .kr-card__meta {
		margin-top: 7px;
		padding-right: 16px;
	}

	.kokorepair .kr-card__desc {
		display: none;
	}

	/* Le chevron descend dans le coin : au centre du côté droit, il tombait
	   au milieu du titre sur une carte deux fois moins large. */
	.kokorepair .kr-card__chevron {
		top: auto;
		bottom: 13px;
		right: 12px;
		margin-top: 0;
	}

	/* Dépliée, la carte retrouve la pleine largeur : titre et prix se
	   remettent sur la même ligne. */
	.kokorepair .kr-card[open] > summary.kr-card__face {
		display: block;
		height: auto;
		padding: 12px 32px 12px 11px;
	}

	.kokorepair .kr-card[open] .kr-card__top {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
	}

	.kokorepair .kr-card[open] .kr-card__name {
		font-size: 16px;
	}

	.kokorepair .kr-card[open] .kr-card__from strong {
		font-size: 16px;
	}

	.kokorepair .kr-card[open] .kr-card__meta {
		padding-right: 0;
	}

	.kokorepair .kr-card[open] .kr-card__chevron {
		top: 50%;
		bottom: auto;
		right: 18px;
		margin-top: -2px;
	}

	/* ------------------------------------------- Qualités dans une carte */

	/* Les qualités restent une par ligne — c'est là que le client compare, et
	   le descriptif a besoin de toute la largeur — mais les rembourrages se
	   resserrent. */
	.kokorepair .kr-card > .kr-options {
		padding: 8px 6px 10px;
		gap: 7px;
	}

	.kokorepair .kr-card .kr-option {
		padding: 11px 10px;
		gap: 0 10px;
	}

	.kokorepair .kr-option__note {
		margin-top: 6px;
	}
}