/*
 * Pages de contenu de la vitrine (L2-03) : Publier, Comment ça marche, À propos. Mobile d'abord, uniquement des jetons --kmb-….
 * Chargée seulement sur les pages créées par Kmerboutik (hors accueil).
 */

.kmb-lead {
	margin: 0 0 var(--kmb-space-5);
	color: var(--kmb-ink-900);
	font-size: 1.125rem;
	line-height: var(--kmb-lh-body);
}

/* Liste de points forts avec coche */
body .kmb-checklist {
	margin: 0 0 var(--kmb-space-4);
	padding: 0;
	list-style: none;
}

.kmb-checklist li {
	position: relative;
	margin-block-end: var(--kmb-space-3);
	padding-inline-start: var(--kmb-space-6);
}

.kmb-checklist li::before {
	content: "";
	position: absolute;
	inset-block-start: 0.35em;
	inset-inline-start: 0;
	inline-size: 1rem;
	block-size: 0.55rem;
	border-inline-start: 3px solid var(--kmb-success-600);
	border-block-end: 3px solid var(--kmb-success-600);
	transform: rotate(-45deg) scale(0.85);
}

/* Étapes numérotées */
body .kmb-steps {
	margin: 0 0 var(--kmb-space-4);
	padding: 0;
	list-style: none;
	counter-reset: kmb-step;
}

.kmb-steps li {
	position: relative;
	margin-block-end: var(--kmb-space-3);
	padding-inline-start: var(--kmb-space-7);
	counter-increment: kmb-step;
}

.kmb-steps li::before {
	content: counter(kmb-step);
	position: absolute;
	inset-block-start: -0.1em;
	inset-inline-start: 0;
	display: inline-grid;
	place-items: center;
	inline-size: 2rem;
	block-size: 2rem;
	border-radius: 50%;
	background: var(--kmb-brand-600);
	color: var(--kmb-surface-0);
	font: var(--kmb-fw-bold) var(--kmb-fs-small) / 1 var(--kmb-font-heading);
}

/* Deux parcours côte à côte (une colonne sur téléphone) */
.kmb-journeys {
	display: grid;
	gap: var(--kmb-space-5);
	margin-block: var(--kmb-space-5);
}

.kmb-journey {
	padding: var(--kmb-space-6);
	border: 1px solid var(--kmb-line-200);
	border-radius: var(--kmb-radius-lg);
	background: var(--kmb-surface-0);
	box-shadow: var(--kmb-shadow-sm);
	transition: transform 300ms var(--kmb-ease), box-shadow 300ms var(--kmb-ease);
}

.kmb-journey:hover {
	box-shadow: var(--kmb-shadow-lg);
	transform: translateY(-6px);
}

body .kmb-journey h2 {
	margin-block-start: var(--kmb-space-3);
}

.kmb-illustration {
	display: block;
	inline-size: min(100%, 12.5rem);
	block-size: auto;
	color: var(--kmb-brand-600);
}

@media (min-width: 768px) {
	.kmb-journeys {
		grid-template-columns: repeat(2, 1fr);
		align-items: start;
	}
}

/* FAQ */
.kmb-faq {
	border-block-end: 1px solid var(--kmb-line-200);
}

.kmb-faq summary {
	display: flex;
	align-items: center;
	min-block-size: var(--kmb-tap);
	padding-block: var(--kmb-space-3);
	font-weight: var(--kmb-fw-semibold);
	cursor: pointer;
}

.kmb-faq summary:focus-visible {
	outline: 3px solid var(--kmb-brand-600);
	outline-offset: 2px;
}

.kmb-faq p {
	margin: 0 0 var(--kmb-space-4);
	color: var(--kmb-ink-600);
}

/* Cartes de plans et appel à l'action */
.kmb-plans {
	margin-block-end: var(--kmb-space-4);
}

.kmb-plans__group {
	margin: var(--kmb-space-6) 0 var(--kmb-space-1);
	font-family: var(--kmb-font-heading);
	font-size: var(--kmb-fs-h3);
	font-weight: var(--kmb-fw-bold);
}

.kmb-plans__note {
	margin: 0 0 var(--kmb-space-4);
	color: var(--kmb-ink-600);
}

/* Les cartes de plans : deux colonnes dès la tablette, quatre sur grand écran (quatre durées par famille). */
@media (min-width: 640px) {
	.kmb-plans[data-kmb-plans] {
		--kmb-cols: 2;
	}
}

@media (min-width: 1100px) {
	.kmb-plans[data-kmb-plans] {
		--kmb-cols: 4;
	}
}

.kmb-cta-line {
	margin: var(--kmb-space-5) 0;
}

.kmb-support-link {
	margin: var(--kmb-space-6) 0 0;
	text-align: center;
}

/* ---------- Page Contact : formulaire et autres moyens de nous joindre ---------- */

.kmb-contact {
	display: grid;
	gap: var(--kmb-space-6);
	margin-block-start: var(--kmb-space-5);
}

@media (min-width: 1024px) {
	.kmb-contact {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		align-items: start;
	}
}

.kmb-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: var(--kmb-space-4);
	padding: var(--kmb-space-5);
	border: 1px solid var(--kmb-line-200);
	border-radius: var(--kmb-radius-lg);
	background: var(--kmb-surface-0);
	box-shadow: var(--kmb-shadow-md);
}

@media (min-width: 640px) {
	.kmb-form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: var(--kmb-space-6);
	}

	.kmb-form > .kmb-field:has(textarea),
	.kmb-form > .kmb-hp,
	.kmb-form > .kmb-form__summary,
	.kmb-form > #kmb-field-captcha,
	.kmb-form > .kmb-form__submit,
	.kmb-form > .kmb-field__help {
		grid-column: 1 / -1;
	}
}

.kmb-form .kmb-field__label span[aria-hidden="true"] {
	color: var(--kmb-danger-700);
}

.kmb-field__optional {
	color: var(--kmb-ink-600);
	font-weight: var(--kmb-fw-regular);
}

.kmb-textarea {
	min-block-size: 9rem;
	resize: vertical;
}

.kmb-form__submit {
	justify-self: start;
}

.kmb-form__summary {
	margin-block-end: var(--kmb-space-4);
}

.kmb-form__summary ul {
	margin: var(--kmb-space-2) 0 0;
	padding-inline-start: var(--kmb-space-5);
}

.kmb-form__summary a {
	color: inherit;
}

/*
 * Place réservée au widget anti-robot (chargé à la première interaction) : la page ne bouge pas quand il apparaît.
 * line-height: 0 : le cadre de Cloudflare est un élément « en ligne » ; avec l'interligne du texte courant (25,6 px) il laissait
 * 7,6 px sous lui, et le bloc passait de 65 à 72,6 px (mesuré sur staging).
 */
.kmb-contact .cf-turnstile {
	min-block-size: 65px;
	line-height: 0;
}

/* Le widget anti-robot de Cloudflare mesure 300 px : sur un écran de 360 px il doit tenir dans le formulaire, sans être rogné. */
@media (max-width: 400px) {
	.kmb-contact .kmb-form {
		padding-inline: var(--kmb-space-3);
	}
}

/* Piège à robots : hors de l'écran, sans display:none (certains robots l'ignorent alors). */
.kmb-hp {
	position: absolute;
	inset-inline-start: -10000px;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
}

.kmb-contact__aside {
	position: relative;
	overflow: hidden;
	padding: var(--kmb-space-6);
	border-radius: var(--kmb-radius-lg);
	background: var(--kmb-ink-900);
	color: var(--kmb-line-200);
}

@media (min-width: 1024px) {
	.kmb-contact__aside {
		position: sticky;
		inset-block-start: calc(var(--kmb-header-h) + var(--kmb-space-5));
	}
}

body .kmb-contact__aside h2 {
	margin: 0 0 var(--kmb-space-4);
	color: var(--kmb-surface-0);
	font-size: var(--kmb-fs-h3);
}

.kmb-contact__aside p {
	display: flex;
	align-items: center;
	gap: var(--kmb-space-2);
	margin: 0 0 var(--kmb-space-3);
}

.kmb-contact__aside .kmb-icon {
	color: var(--kmb-accent-400);
}

.kmb-contact__aside .kmb-link {
	color: var(--kmb-surface-0);
}

.kmb-contact__aside .kmb-btn--whatsapp .kmb-icon {
	color: inherit;
}

/* Tableau d'un texte (page Cookies) : défile dans son cadre sur petit écran, la page ne déborde jamais. */
.kmb-table-wrap {
	overflow-x: auto;
	margin: var(--kmb-space-5) 0;
	border: 1px solid var(--kmb-line-200);
	border-radius: var(--kmb-radius-md);
}

.kmb-table-wrap table {
	width: 100%;
	min-width: 38rem;
	border-collapse: collapse;
	font-size: var(--kmb-fs-small);
}

.kmb-table-wrap th,
.kmb-table-wrap td {
	padding: var(--kmb-space-3) var(--kmb-space-4);
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--kmb-line-200);
}

.kmb-table-wrap thead th {
	background: var(--kmb-surface-50);
	font-weight: var(--kmb-fw-semibold);
}

.kmb-table-wrap tr:last-child td {
	border-bottom: 0;
}

.kmb-table-wrap code {
	overflow-wrap: anywhere;
}

/* ---------- Comptes : inscription, connexion, mot de passe oublié (L4-01) ---------- */

.kmb-auth {
	display: grid;
	gap: var(--kmb-space-6);
	max-inline-size: 32rem;
	margin: var(--kmb-space-5) auto 0;
}

.kmb-auth--wide {
	max-inline-size: none;
	margin-inline: 0;
}

@media (min-width: 1024px) {
	.kmb-auth--wide {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		align-items: start;
	}
}

.kmb-auth__card {
	min-inline-size: 0;
	padding: var(--kmb-space-5);
	animation: kmb-auth-in calc(var(--kmb-dur) * 3) var(--kmb-ease) both;
	border: 1px solid var(--kmb-line-200);
	border-radius: var(--kmb-radius-lg);
	background: var(--kmb-surface-0);
	box-shadow: var(--kmb-shadow-md);
}

/* Entrée de la carte : démarre dès le premier affichage, sans attendre de script (c'est le plus grand élément de l'écran, donc le LCP). */
@keyframes kmb-auth-in {
	from {
		opacity: 0.001;
		transform: translateY(12px);
	}
}

/* Place réservée au widget anti-robot (chargé à la première interaction) : la page ne bouge pas quand il apparaît. */
.kmb-auth .cf-turnstile {
	min-block-size: 65px;
	line-height: 0; /* le cadre de Cloudflare est « en ligne » : sans cela l'interligne du texte ajoute 7,6 px sous lui */
}

@media (min-width: 640px) {
	.kmb-auth__card {
		padding: var(--kmb-space-6);
	}
}

/* Le widget anti-robot de Cloudflare mesure 300 px : sur un écran de 360 px il doit tenir dans la carte. */
@media (max-width: 400px) {
	.kmb-auth__card {
		padding-inline: var(--kmb-space-3);
	}
}

.kmb-auth__card > p {
	margin: 0 0 var(--kmb-space-4);
}

/* Le formulaire vit dans la carte : plus de second cadre. */
.kmb-auth .kmb-form {
	grid-template-columns: minmax(0, 1fr);
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

/* Dans la grille à deux colonnes, un champ plus court que son voisin ne s'étire pas : son message d'erreur reste collé au champ. */
.kmb-auth .kmb-field {
	align-content: start;
}

/* La règle des textes de page (.kmb-prose p) ajoute 16 px sous chaque paragraphe : l'aide et l'erreur d'un champ restent collées à lui. */
.kmb-auth .kmb-field > p {
	margin: 0;
}

@media (min-width: 640px) {
	.kmb-auth--wide .kmb-form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.kmb-auth--wide .kmb-form > .kmb-choice,
	.kmb-auth--wide .kmb-form > .kmb-check,
	.kmb-auth--wide .kmb-form > .kmb-details {
		grid-column: 1 / -1;
	}
}

#kmb-auth-status:not(:empty) {
	margin-block-end: var(--kmb-space-4);
}

#kmb-auth-status:focus,
#kmb-auth-errors:focus {
	outline: 0;
}

#kmb-auth-status:focus-visible .kmb-alert,
#kmb-auth-errors:focus-visible {
	box-shadow: 0 0 0 4px var(--kmb-brand-50);
}

/* Lien « Se connecter » / « Créer un compte » sous la carte. */
.kmb-auth__switch {
	margin: var(--kmb-space-5) 0 0;
	text-align: center;
	color: var(--kmb-ink-600);
}

/* Un lien au milieu d'une phrase se reconnaît à autre chose que sa couleur (WCAG 1.4.1). */
.kmb-auth__switch .kmb-link,
.kmb-auth .kmb-field__error .kmb-link,
.kmb-auth .kmb-check__label .kmb-link {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* Choix du type de compte : deux grandes cartes à cocher (zone tactile large, état visible sans couleur seule). */
.kmb-choice {
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.kmb-choice legend {
	padding: 0;
	margin-block-end: var(--kmb-space-2);
}

.kmb-choice__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--kmb-space-3);
}

@media (max-width: 400px) {
	.kmb-choice__row {
		grid-template-columns: minmax(0, 1fr);
	}
}

.kmb-choice__item {
	position: relative;
	display: block;
	cursor: pointer;
}

.kmb-choice__item input {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.kmb-choice__box {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	column-gap: var(--kmb-space-3);
	min-block-size: 4.5rem;
	padding: var(--kmb-space-3) var(--kmb-space-4);
	border: 2px solid var(--kmb-field-border);
	border-radius: var(--kmb-radius-md);
	background: var(--kmb-surface-0);
	transition: transform var(--kmb-dur) var(--kmb-ease), border-color var(--kmb-dur) var(--kmb-ease), box-shadow var(--kmb-dur) var(--kmb-ease);
}

.kmb-choice__box .kmb-icon {
	grid-row: 1 / span 2;
	color: var(--kmb-ink-600);
}

.kmb-choice__box strong {
	grid-column: 2;
}

.kmb-choice__box small {
	grid-column: 2;
	color: var(--kmb-ink-600);
	font-size: var(--kmb-fs-small);
}

.kmb-choice__item:hover .kmb-choice__box {
	border-color: var(--kmb-ink-600);
	transform: translateY(-2px);
}

.kmb-choice__item input:checked + .kmb-choice__box {
	border-color: var(--kmb-brand-600);
	background: var(--kmb-brand-50);
	box-shadow: 0 0 0 3px var(--kmb-brand-50);
	animation: kmb-choice-pop calc(var(--kmb-dur) * 2) var(--kmb-ease);
}

.kmb-choice__item input:checked + .kmb-choice__box .kmb-icon {
	color: var(--kmb-brand-600);
}

.kmb-choice__item input:checked + .kmb-choice__box::after {
	content: "✓";
	grid-column: 3;
	grid-row: 1 / span 2;
	color: var(--kmb-brand-600);
	font-weight: var(--kmb-fw-bold);
}

.kmb-choice__item input:focus-visible + .kmb-choice__box {
	outline: 3px solid var(--kmb-brand-600);
	outline-offset: 2px;
}

@keyframes kmb-choice-pop {
	from {
		transform: scale(0.97);
	}

	to {
		transform: scale(1);
	}
}

/* Cases à cocher longues (conditions, rappels WhatsApp) : le texte revient à la ligne à côté de la case. */
.kmb-check__label {
	display: flex;
	align-items: flex-start;
	gap: var(--kmb-space-3);
	min-block-size: var(--kmb-tap);
	padding-block: var(--kmb-space-2);
	cursor: pointer;
}

.kmb-check__label input {
	flex: none;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	margin: 0;
	accent-color: var(--kmb-brand-600);
}

.kmb-check__label small {
	color: var(--kmb-ink-600);
}

.kmb-check--row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--kmb-space-2) var(--kmb-space-4);
}

.kmb-check--row .kmb-check__label {
	flex: 1 1 auto;
}

/* Code ambassadeur : replié par défaut. */
.kmb-details {
	padding: var(--kmb-space-3) var(--kmb-space-4);
	border: 1px solid var(--kmb-line-200);
	border-radius: var(--kmb-radius-sm);
	background: var(--kmb-surface-50);
}

.kmb-details summary {
	display: flex;
	align-items: center;
	min-block-size: var(--kmb-tap);
	cursor: pointer;
	font-weight: var(--kmb-fw-medium);
}

.kmb-details[open] summary {
	margin-block-end: var(--kmb-space-2);
}

/* Colonne d'arguments à côté du formulaire d'inscription. */
.kmb-auth__aside {
	position: relative;
	overflow: hidden;
	padding: var(--kmb-space-6);
	border-radius: var(--kmb-radius-lg);
	background: var(--kmb-ink-900);
	color: var(--kmb-line-200);
}

@media (min-width: 1024px) {
	.kmb-auth__aside {
		position: sticky;
		inset-block-start: calc(var(--kmb-header-h) + var(--kmb-space-5));
	}
}

body .kmb-auth__aside h2 {
	margin: 0 0 var(--kmb-space-4);
	color: var(--kmb-surface-0);
	font-size: var(--kmb-fs-h3);
}

body .kmb-auth__points,
body .kmb-auth__points li {
	margin: 0;
	padding: 0;
	list-style: none;
}

body .kmb-auth__points {
	display: grid;
	gap: var(--kmb-space-4);
}

body .kmb-auth__points li {
	display: flex;
	align-items: flex-start;
	gap: var(--kmb-space-3);
}

.kmb-auth__points .kmb-icon {
	flex: none;
	color: var(--kmb-accent-400);
}

.kmb-auth__points strong {
	color: var(--kmb-surface-0);
}

/* Page /hosting/ (L6-07) : barre d'actions collante sur téléphone, et accordéon de la FAQ. */
.kmb-hosting-bar {
	display: none;
}

@media (max-width: 767px) {
	.kmb-hosting-bar {
		position: fixed;
		left: 0;
		right: 0;
		/* Au-dessus de la barre de navigation du bas (téléphone) : 4,5 rem. */
		bottom: 4.5rem;
		z-index: 50;
		display: flex;
		gap: 0.5rem;
		padding: 0.75rem 1rem;
		background: var(--kmb-surface-0);
		box-shadow: 0 -2px 10px rgb(0 0 0 / 0.12);
	}

	.kmb-hosting-bar .kmb-btn {
		flex: 1;
		text-align: center;
	}
}

@media (max-width: 767px) {
	/* La page laisse la place à la barre d'actions : le bas du contenu ne reste pas caché dessous. */
	body:has(.kmb-hosting-bar) {
		padding-bottom: 8rem;
	}
}

.kmb-faq__item {
	border-bottom: 1px solid var(--kmb-line-200);
	padding: 0.75rem 0;
}

.kmb-faq__item summary {
	cursor: pointer;
	font-weight: 600;
}

/* ---------- Tableau des micro-services (F-HOS-12, L6-18) : une ligne par prestation, sa description, puis le prix chez Kmerboutik et ailleurs, chacun dans sa colonne, sans bouton d'achat (D-107). ---------- */

.kmb-micro {
	margin-block: var(--kmb-space-5);
}

.kmb-micro__table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: var(--kmb-fs-small);
	color: var(--kmb-ink-900);
}

.kmb-micro__table th,
.kmb-micro__table td {
	padding: var(--kmb-space-3);
	border-block-end: 1px solid var(--kmb-line-200);
	text-align: start;
	vertical-align: middle;
}

.kmb-micro__table thead th {
	background: var(--kmb-surface-50);
	border-block-end: 2px solid var(--kmb-ink-900);
	font-weight: 600;
	white-space: nowrap;
}

.kmb-micro__name {
	font-weight: 600;
	inline-size: 26%;
}

.kmb-micro__desc {
	color: var(--kmb-ink-600);
}

/* Colonnes de prix : en-tête et montants alignés à droite, pour se lire en colonne.
   Le sélecteur est renforcé : la règle générale des cellules aligne à gauche. */
.kmb-micro__table .kmb-micro__price-head,
.kmb-micro__table .kmb-micro__price {
	inline-size: 20%;
	text-align: end;
}

.kmb-micro__price {
	white-space: nowrap;
}

.kmb-micro__amount {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	white-space: nowrap;
}

.kmb-micro__none {
	color: var(--kmb-ink-600);
	white-space: nowrap;
}

.kmb-micro__note,
.kmb-micro__why,
.kmb-micro__free {
	margin-block-start: var(--kmb-space-3);
	font-size: var(--kmb-fs-small);
	color: var(--kmb-ink-600);
}

/* Mobile : chaque prestation devient une fiche ; le nom de la colonne est répété devant chaque prix. */
@media (max-width: 40rem) {
	.kmb-micro__table thead {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.kmb-micro__table,
	.kmb-micro__table tbody,
	.kmb-micro__table tr,
	.kmb-micro__table th,
	.kmb-micro__table td {
		display: block;
		inline-size: 100%;
	}

	.kmb-micro__table tr {
		padding-block: var(--kmb-space-3);
		border-block-end: 1px solid var(--kmb-line-200);
	}

	.kmb-micro__table th,
	.kmb-micro__table td {
		padding-inline: 0;
		padding-block: var(--kmb-space-1);
		border: 0;
	}

	.kmb-micro__name,
	.kmb-micro__table td.kmb-micro__price {
		inline-size: 100%;
	}

	.kmb-micro__table td.kmb-micro__price {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--kmb-space-2);
		text-align: start;
		white-space: normal;
	}

	.kmb-micro__price::before {
		content: attr(data-label);
		flex: 1 1 auto;
		min-inline-size: 7rem;
		color: var(--kmb-ink-600);
	}
}

/* ---------- Contenu d'une offre dans sa carte (pages Hosting) : liste courte, lisible, sous le prix. ---------- */

.kmb-plan__list {
	display: grid;
	gap: var(--kmb-space-1);
	margin: 0;
	padding-inline-start: var(--kmb-space-4);
	font-size: var(--kmb-fs-small);
	color: var(--kmb-ink-600);
}

/* Une adresse ou un mot long (nomducommerce.kmerboutik.com) se coupe au lieu de déborder de la carte. */
.kmb-plan__list li {
	overflow-wrap: anywhere;
}

/* Trois cartes par ligne sur grand écran (packs et maintenance). */
@media (min-width: 1100px) {
	.kmb-plans[data-kmb-plans="pack"],
	.kmb-plans[data-kmb-plans="maintenance"] {
		--kmb-cols: 3;
	}
}

/* Cartes alignées : chaque carte occupe six lignes de la grille (nom, prix, détail, condition, liste, bouton) et les partage avec ses voisines.
   Prix, listes et boutons restent à la même hauteur d'une carte à l'autre. Sans subgrid, chaque carte garde sa propre hauteur. */
@supports (grid-template-rows: subgrid) {
	.kmb-plans > .kmb-plan {
		grid-row: span 6;
		grid-template-rows: subgrid;
	}
}

.kmb-plan__price {
	white-space: nowrap;
}

/* ---------- Diapositives d'offres (pages Hosting) : défilement horizontal, flèches, points ; défilement automatique arrêté au survol. ---------- */
.kmb-slides {
	position: relative;
}

.kmb-slides__track {
	position: relative;
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	overflow-y: hidden;
	align-items: flex-start; /* chaque diapositive garde sa hauteur : sinon le flex les étire toutes à la plus haute */
}

.kmb-slides__track::-webkit-scrollbar {
	display: none;
}

.kmb-slides__track:focus-visible {
	outline: 3px solid var(--kmb-brand-600);
	outline-offset: 4px;
}

.kmb-slide {
	flex: 0 0 100%;
	min-inline-size: 0;
	scroll-snap-align: start;
}

.kmb-slides__controls {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: var(--kmb-space-3);
	margin-block-start: var(--kmb-space-5);
}

.kmb-slides__controls[hidden] {
	display: none;
}

/* La liste des points garde la hauteur de la rangée : Divi lui ajoute une marge basse, qui les remontait au-dessus des flèches. */
.kmb-slides__controls .kmb-slides__dots {
	margin-block: 0;
	align-items: center; /* les points restent au centre de la rangée, pas collés en haut de leur zone */
}

/* Chaque point est centré dans son élément de liste (sans cela, la ligne de texte le remonte). */
.kmb-slides__controls .kmb-slides__dots li {
	display: flex;
}

/* WordPress peut encadrer les boutons de <p> ou de <br> : ces blocs ne doivent pas sortir de la rangée. */
.kmb-slides__controls > p {
	display: contents;
}

.kmb-slides__controls > br {
	display: none;
}

.kmb-slides__btn {
	min-inline-size: 2.75rem;
	inline-size: auto;
	flex: 0 0 auto;
	min-block-size: 2.75rem;
	padding: 0 var(--kmb-space-3);
	border: 1px solid var(--kmb-line-200);
	border-radius: var(--kmb-radius-pill);
	background: var(--kmb-surface-0);
	color: var(--kmb-ink-900);
	font: inherit;
	font-size: 1.25rem;
	cursor: pointer;
}

.kmb-slides__btn:focus-visible,
.kmb-slides__dot:focus-visible {
	outline: 3px solid var(--kmb-brand-600);
	outline-offset: 2px;
}

.kmb-slides__dots {
	display: flex;
	gap: var(--kmb-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kmb-slides__dot {
	box-sizing: border-box;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	padding: 0.375rem; /* zone de clic de 24 px ; le point visible reste de 12 px (cible tactile minimale, Lighthouse target-size) */
	border: 0;
	border-radius: 999px;
	background: var(--kmb-line-200);
	background-clip: content-box;
	cursor: pointer;
}

.kmb-slides__dot[aria-current="true"] {
	background: var(--kmb-brand-600);
}

@media (prefers-reduced-motion: reduce) {
	.kmb-slides__track {
		scroll-behavior: auto;
	}
}

/* Diapositives : pas de numérotation ni de largeur héritée du thème dans les points. */
.kmb-slides__dots,
.kmb-slides__dots li {
	list-style: none;
	inline-size: auto;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
}

.kmb-slides__dots li::marker {
	content: "";
}

/* Pages de contenu : sections resserrées, sans vide inutile entre deux rubriques (l'accueil n'utilise pas .kmb-band). */
.kmb-prose > .kmb-band {
	padding-block: var(--kmb-space-5);
}

@media (min-width: 768px) {
	.kmb-prose > .kmb-band {
		padding-block: var(--kmb-space-6);
	}
}

/* ---------- Page « Vos documents » : devis à accepter, demande de facture (inc/documents.php) ---------- */

.kmb-doc {
	display: grid;
	gap: var(--kmb-space-4);
	margin-block: var(--kmb-space-2) var(--kmb-space-6);
}

.kmb-doc > * {
	margin: 0;
}

.kmb-doc__eyebrow {
	color: var(--kmb-brand-600);
	font-size: var(--kmb-fs-small);
	font-weight: var(--kmb-fw-bold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

body .kmb-doc__title {
	margin: 0;
	color: var(--kmb-ink-900);
	font-family: var(--kmb-font-heading);
	font-size: var(--kmb-fs-h1);
	font-weight: var(--kmb-fw-bold);
	letter-spacing: -0.01em;
	line-height: 1.15;
	animation: kmb-rise 700ms var(--kmb-ease) backwards;
}

.kmb-doc .kmb-lead {
	margin: 0;
}

.kmb-doc__figures {
	display: grid;
	gap: var(--kmb-space-3);
}

@media (min-width: 640px) {
	.kmb-doc__figures {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.kmb-doc__figure {
	display: grid;
	gap: var(--kmb-space-1);
	margin: 0;
	padding: var(--kmb-space-4) var(--kmb-space-5);
	border-radius: var(--kmb-radius-lg);
	background: var(--kmb-surface-50);
	text-align: center;
}

.kmb-doc__figure span {
	color: var(--kmb-ink-600);
	font-size: var(--kmb-fs-small);
}

.kmb-doc__figure strong {
	color: var(--kmb-ink-900);
	font-family: var(--kmb-font-heading);
	font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);
	font-weight: var(--kmb-fw-bold);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	white-space: nowrap;
}

.kmb-doc__figure--accent {
	background: var(--kmb-brand-50);
	box-shadow: inset 0 0 0 2px var(--kmb-brand-100);
}

.kmb-doc__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--kmb-space-2) var(--kmb-space-3);
}

.kmb-doc .kmb-doc__form {
	grid-template-columns: minmax(0, 1fr);
}

.kmb-doc__subtitle {
	margin: 0;
	color: var(--kmb-ink-900);
	font-family: var(--kmb-font-heading);
	font-size: var(--kmb-fs-h3);
	font-weight: var(--kmb-fw-bold);
}

.kmb-doc__form .kmb-form__submit {
	justify-self: center;
}

.kmb-doc__form .kmb-form__submit .kmb-btn {
	min-inline-size: min(100%, 18rem);
}

.kmb-doc__form > .kmb-field__help {
	text-align: center;
}

.kmb-doc__proforma {
	display: grid;
	justify-items: center;
	gap: var(--kmb-space-1);
	text-align: center;
}

.kmb-doc__proforma p {
	margin: 0;
	color: var(--kmb-ink-600);
	font-size: var(--kmb-fs-small);
}

@media (prefers-reduced-motion: reduce) {
	.kmb-doc__title {
		animation: none;
	}
}

/* Paiements fermés (D-184) : « Me prévenir » déplie un champ, sans script ni phrase. */
.kmb-notify {
	display: inline-block;
	max-inline-size: 100%;
}

.kmb-notify > summary {
	cursor: pointer;
	list-style: none;
}

.kmb-notify > summary::-webkit-details-marker {
	display: none;
}

.kmb-notify[open] {
	display: block;
}

.kmb-notify[open] > summary {
	display: none;
}

.kmb-notify__form {
	display: flex;
	flex-direction: column;
	gap: var(--kmb-space-2);
	text-align: start;
}

.kmb-notify__trap {
	position: absolute;
	inset-inline-start: -9999px;
}

.kmb-plan__old {
	display: block;
	color: var(--kmb-ink-600);
	font-size: var(--kmb-fs-small);
	font-weight: 400;
}

/* Spécificité : la règle des textes de page (.kmb-prose p) fixe les marges et la largeur des paragraphes. */
/* Les boutons de carte sont centrés. */
.kmb-plan__action {
	text-align: center;
}

/* Un bouton de carte peut passer sur deux lignes : son texte reste centré. */
.kmb-plan__action .kmb-btn {
	padding-inline: var(--kmb-space-3); /* le libellé tient sur une ligne, même dans une carte étroite */
	text-align: center;
}