/* stylelint-disable */
/* Fichier produit par tools/build/bundles.mjs depuis les feuilles de base : ne pas modifier à la main. */
/* ---- fonts.css ---- */
/*
 * Polices hébergées sur le site (F-ID-02) : deux familles variables, un fichier par famille et par sous-ensemble.
 * font-display: swap = le texte s'affiche tout de suite avec la police de secours, puis change sans décalage fort.
 * Les fichiers et leurs licences : assets/fonts/LICENSES.md. Poids total : moins de 120 Ko (L1-02).
 * Les familles s'appellent « KMB Inter » et « KMB Jakarta » (et non « Inter » ou « Plus Jakarta Sans ») : WooCommerce déclare
 * lui aussi une famille « Inter » (326 Ko) qui, à nom égal, serait téléchargée à la place de la nôtre (48 Ko).
 */

/* Plus Jakarta Sans : titres (graisses 600 et 700 utilisées) */
@font-face {
	font-family: "KMB Jakarta";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "KMB Jakarta";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter : texte et interface (graisses 400, 500 et 600 utilisées). Sous-ensemble latin seulement. */
@font-face {
	font-family: "KMB Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Application des familles aux éléments de base (Divi reprend ces variables par ses préréglages). */
body {
	font-family: var(--kmb-font-body);
	font-size: var(--kmb-fs-body);
	line-height: var(--kmb-lh-body);
	color: var(--kmb-ink-900);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--kmb-font-heading);
}

/* ---- tokens.css ---- */
/*
 * Jetons de design Kmerboutik (--kmb-…), source de vérité du CSS maison.
 * Miroir des variables Divi 5 de même nom (docs/04-identite-visuelle.md, F-ID-02 et F-ID-03).
 * Aucune couleur, taille ni police ne se saisit « à la main » : tout passe par ces jetons.
 * Les contrastes sont contrôlés par « npm run check:contrast » (docs/design/contraste.md).
 */
:root {
	/* ---- Couleurs ---- */
	--kmb-brand-600: #ce1126;   /* principale : boutons, liens actifs ; 5,6:1 sur blanc */
	--kmb-brand-700: #a50e1f;   /* survol et appui */
	--kmb-brand-50: #fdecee;    /* fonds légers, puces de filtres actives */
	--kmb-accent-400: #fcd116;  /* badge « À la une » : toujours avec un texte foncé, jamais pour du texte */
	--kmb-success-600: #007a5e; /* succès, « Ouvert », « Vérifié » */
	--kmb-warning-700: #b45309; /* avertissements */
	--kmb-danger-700: #b42318;  /* erreurs : toujours avec une icône et un texte */
	--kmb-ink-900: #0f172a;     /* texte principal */
	--kmb-ink-600: #475569;     /* texte secondaire */
	--kmb-line-200: #e2e8f0;    /* séparateurs et bordures décoratives (pas pour un champ : voir --kmb-field-border) */
	--kmb-field-border: #64748b; /* bordure des champs et des contrôles : au moins 3:1 sur blanc (WCAG 1.4.11) */
	--kmb-surface-0: #ffffff;   /* fond */
	--kmb-surface-50: #f8fafc;  /* fonds de sections alternées */
	--kmb-surface-100: #f1f5f9; /* fonds de blocs, survols doux, champs désactivés */
	--kmb-brand-100: #fbd0d6;   /* bordures et survols teintés de la couleur principale */
	--kmb-whatsapp: #0f8176;    /* bouton WhatsApp, texte blanc : 4,75:1 (le vert 128c7e ne donnait que 4,14:1) */

	/* ---- Typographie ---- */
	--kmb-font-heading: "KMB Jakarta", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--kmb-font-body: "KMB Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--kmb-fs-h1: clamp(2rem, 1.6rem + 2vw, 3.25rem);
	--kmb-fs-h2: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
	--kmb-fs-h3: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
	--kmb-fs-body: 1rem;
	--kmb-fs-small: 0.875rem;
	--kmb-lh-body: 1.6;
	--kmb-fw-regular: 400;
	--kmb-fw-medium: 500;
	--kmb-fw-semibold: 600;
	--kmb-fw-bold: 700;

	/* ---- Espacements (base 4 px) ---- */
	--kmb-space-1: 4px;
	--kmb-space-2: 8px;
	--kmb-space-3: 12px;
	--kmb-space-4: 16px;
	--kmb-space-5: 24px;
	--kmb-space-6: 32px;
	--kmb-space-7: 48px;
	--kmb-space-8: 64px;
	--kmb-space-9: 96px;

	/* ---- Rayons ---- */
	--kmb-radius-sm: 12px;  /* champs, boutons carrés */
	--kmb-radius-md: 16px;  /* cartes */
	--kmb-radius-lg: 24px;  /* blocs */
	--kmb-radius-xl: 32px;  /* grands blocs de page : héros, appel final */
	--kmb-radius-pill: 999px;

	/* ---- Ombres : douces, en deux couches (contact + diffusion), jamais plus de deux niveaux visibles sur un écran ---- */
	--kmb-shadow-sm: 0 1px 2px rgb(15 23 42 / 6%), 0 1px 3px rgb(15 23 42 / 4%);
	--kmb-shadow-md: 0 2px 4px rgb(15 23 42 / 5%), 0 10px 24px rgb(15 23 42 / 8%);
	--kmb-shadow-lg: 0 8px 16px rgb(15 23 42 / 8%), 0 24px 48px rgb(15 23 42 / 12%);
	--kmb-shadow-brand: 0 8px 20px rgb(206 17 38 / 28%); /* lueur du bouton principal au survol */

	/* ---- Dégradés : texte blanc toujours lisible (les deux extrémités passent 4,5:1) ---- */
	--kmb-gradient-brand: linear-gradient(135deg, #ce1126 0%, #a50e1f 100%);
	--kmb-gradient-soft: linear-gradient(180deg, #fff1f2 0%, #fff 100%);

	/* ---- Largeurs ---- */
	--kmb-width-content: 1200px;
	--kmb-width-text: 72ch;

	/* ---- Mouvement ---- */
	--kmb-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--kmb-dur: 180ms;
	/* Apparitions au défilement (L6-26, NF-UI-06) : 300 à 600 ms, transform et opacity seulement. */
	--kmb-reveal-dur: 500ms;
	--kmb-reveal-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

	/* ---- Cibles tactiles ---- */
	--kmb-tap: 44px;
}

/* Rien ne bouge si l'utilisateur a demandé moins d'animations (NF-UI-06). */
@media (prefers-reduced-motion: reduce) {
	:root {
		--kmb-dur: 0ms;
	}
}

/* ---- divi-variables.css ---- */
/*
 * Fichier GÉNÉRÉ par « node tools/design/divi-aliases.mjs » à partir de tokens.css : ne pas modifier à la main.
 * Alias --gvid-kmb-… (variables Divi 5) vers les jetons --kmb-… : voir le commentaire de l'outil.
 */
:root {
	--gvid-kmb-font-heading: var(--kmb-font-heading);
	--gvid-kmb-font-body: var(--kmb-font-body);
	--gvid-kmb-fs-h1: var(--kmb-fs-h1);
	--gvid-kmb-fs-h2: var(--kmb-fs-h2);
	--gvid-kmb-fs-h3: var(--kmb-fs-h3);
	--gvid-kmb-fs-body: var(--kmb-fs-body);
	--gvid-kmb-fs-small: var(--kmb-fs-small);
	--gvid-kmb-lh-body: var(--kmb-lh-body);
	--gvid-kmb-fw-regular: var(--kmb-fw-regular);
	--gvid-kmb-fw-medium: var(--kmb-fw-medium);
	--gvid-kmb-fw-semibold: var(--kmb-fw-semibold);
	--gvid-kmb-fw-bold: var(--kmb-fw-bold);
	--gvid-kmb-space-1: var(--kmb-space-1);
	--gvid-kmb-space-2: var(--kmb-space-2);
	--gvid-kmb-space-3: var(--kmb-space-3);
	--gvid-kmb-space-4: var(--kmb-space-4);
	--gvid-kmb-space-5: var(--kmb-space-5);
	--gvid-kmb-space-6: var(--kmb-space-6);
	--gvid-kmb-space-7: var(--kmb-space-7);
	--gvid-kmb-space-8: var(--kmb-space-8);
	--gvid-kmb-space-9: var(--kmb-space-9);
	--gvid-kmb-radius-sm: var(--kmb-radius-sm);
	--gvid-kmb-radius-md: var(--kmb-radius-md);
	--gvid-kmb-radius-lg: var(--kmb-radius-lg);
	--gvid-kmb-radius-xl: var(--kmb-radius-xl);
	--gvid-kmb-radius-pill: var(--kmb-radius-pill);
	--gvid-kmb-shadow-sm: var(--kmb-shadow-sm);
	--gvid-kmb-shadow-md: var(--kmb-shadow-md);
	--gvid-kmb-shadow-lg: var(--kmb-shadow-lg);
	--gvid-kmb-shadow-brand: var(--kmb-shadow-brand);
	--gvid-kmb-gradient-brand: var(--kmb-gradient-brand);
	--gvid-kmb-gradient-soft: var(--kmb-gradient-soft);
	--gvid-kmb-width-content: var(--kmb-width-content);
	--gvid-kmb-width-text: var(--kmb-width-text);
	--gvid-kmb-ease: var(--kmb-ease);
	--gvid-kmb-dur: var(--kmb-dur);
	--gvid-kmb-reveal-dur: var(--kmb-reveal-dur);
	--gvid-kmb-reveal-ease: var(--kmb-reveal-ease);
	--gvid-kmb-tap: var(--kmb-tap);
}

/* ---- components.css ---- */
/*
 * Composants Kmerboutik (F-ID-05) : classes CSS documentées, construites UNIQUEMENT avec les jetons de tokens.css.
 * Aucune couleur, taille ni police n'est écrite ici « à la main ». La page /ui-kit/ de staging montre chaque composant
 * dans tous ses états (normal, survol, focus, désactivé, erreur, chargement) à 360 px et à 1 280 px.
 *
 * Convention : bloc  .kmb-nom  ·  variante  .kmb-nom--variante  ·  partie  .kmb-nom__partie
 * Mobile d'abord : les règles de base sont celles du téléphone ; @media (min-width: 768px) élargit.
 */

/* ---------- Base ---------- */

/* Focus clavier toujours visible (NF-A11Y-01) : anneau de 3 px, 5,6:1 sur blanc. */
:where(.kmb-btn, .kmb-input, .kmb-chip, .kmb-link, .kmb-card a, .kmb-tab):focus-visible {
	outline: 3px solid var(--kmb-brand-600);
	outline-offset: 3px;
}

.kmb-icon {
	inline-size: 1.5rem;
	block-size: 1.5rem;
	flex: none;
	stroke: currentcolor; /* trait 1,75 px posé dans le SVG par le thème */
}

.kmb-visually-hidden {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.kmb-link {
	color: var(--kmb-brand-600);
	text-underline-offset: 0.2em;
}

.kmb-link:hover {
	color: var(--kmb-brand-700);
}

/* ---------- Boutons : .kmb-btn (+ --primary, --secondary, --text, --whatsapp, --call, --icon) ---------- */

.kmb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--kmb-space-2);
	min-block-size: 3rem;
	min-inline-size: var(--kmb-tap);
	padding: var(--kmb-space-2) var(--kmb-space-5);
	border: 2px solid transparent;
	border-radius: var(--kmb-radius-pill);
	font: var(--kmb-fw-semibold) var(--kmb-fs-body) / 1.2 var(--kmb-font-body);
	letter-spacing: 0.005em;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--kmb-dur) var(--kmb-ease),
		border-color var(--kmb-dur) var(--kmb-ease),
		color var(--kmb-dur) var(--kmb-ease),
		box-shadow var(--kmb-dur) var(--kmb-ease),
		transform var(--kmb-dur) var(--kmb-ease);
}

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

.kmb-btn:active {
	transform: scale(0.98);
}

.kmb-btn--primary {
	background: var(--kmb-gradient-brand);
	color: var(--kmb-surface-0);
	box-shadow: var(--kmb-shadow-sm);
}

.kmb-btn--primary:hover {
	box-shadow: var(--kmb-shadow-brand);
	transform: translateY(-1px);
}

.kmb-btn--secondary {
	background: var(--kmb-surface-0);
	border-color: var(--kmb-brand-100);
	color: var(--kmb-brand-600);
}

.kmb-btn--secondary:hover {
	background: var(--kmb-brand-50);
	border-color: var(--kmb-brand-600);
	color: var(--kmb-brand-700);
}

.kmb-btn--text {
	background: transparent;
	color: var(--kmb-brand-600);
	padding-inline: var(--kmb-space-3);
}

.kmb-btn--text:hover {
	background: var(--kmb-brand-50);
}

.kmb-btn--whatsapp {
	background: var(--kmb-whatsapp);
	color: var(--kmb-surface-0);
	box-shadow: var(--kmb-shadow-sm);
}

.kmb-btn--whatsapp:hover {
	filter: brightness(0.92);
	box-shadow: var(--kmb-shadow-md);
}

.kmb-btn--call {
	background: var(--kmb-ink-900);
	color: var(--kmb-surface-0);
	box-shadow: var(--kmb-shadow-sm);
}

.kmb-btn--call:hover {
	background: var(--kmb-ink-600);
	box-shadow: var(--kmb-shadow-md);
}

/* Bouton avec icône seule : le libellé accessible va dans aria-label. */
.kmb-btn--icon {
	padding: var(--kmb-space-2);
	border-radius: var(--kmb-radius-md);
}

.kmb-btn:disabled,
.kmb-btn[aria-disabled="true"] {
	background: var(--kmb-surface-100);
	border-color: transparent;
	box-shadow: none;
	color: var(--kmb-ink-600);
	cursor: not-allowed;
	transform: none;
}

/* Chargement : le bouton garde sa taille, un anneau tourne (aucune rotation si l'animation est réduite). */
.kmb-btn[aria-busy="true"] {
	position: relative;
	pointer-events: none;
	cursor: progress; /* pas d'opacité réduite : elle ferait tomber le contraste du texte sous 4,5:1 */
}

.kmb-btn[aria-busy="true"]::after {
	content: "";
	inline-size: 1em;
	block-size: 1em;
	border: 2px solid currentcolor;
	border-inline-end-color: transparent;
	border-radius: 50%;
	animation: kmb-spin 700ms linear infinite;
}

@keyframes kmb-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ---------- Champs : .kmb-field (étiquette + .kmb-input + aide + message d'erreur) ---------- */

.kmb-field {
	display: grid;
	gap: var(--kmb-space-1);
}

.kmb-field__label {
	font-weight: var(--kmb-fw-medium);
	color: var(--kmb-ink-900);
}

.kmb-input {
	inline-size: 100%;
	min-block-size: 3rem;
	padding: var(--kmb-space-2) var(--kmb-space-4);
	border: 1px solid var(--kmb-field-border);
	border-radius: var(--kmb-radius-sm);
	background: var(--kmb-surface-0);
	color: var(--kmb-ink-900);
	font: var(--kmb-fw-regular) var(--kmb-fs-body) / var(--kmb-lh-body) var(--kmb-font-body);
	transition: border-color var(--kmb-dur) var(--kmb-ease), box-shadow var(--kmb-dur) var(--kmb-ease);
}

.kmb-input:hover {
	border-color: var(--kmb-ink-600);
}

.kmb-input:focus {
	border-color: var(--kmb-brand-600);
	box-shadow: 0 0 0 4px var(--kmb-brand-50);
}

.kmb-input:disabled {
	background: var(--kmb-surface-100);
	color: var(--kmb-ink-600);
	cursor: not-allowed;
}

.kmb-input[aria-invalid="true"] {
	border-color: var(--kmb-danger-700);
	border-width: 2px;
}

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

/* Erreur : toujours une icône ET un texte, jamais la couleur seule. */
.kmb-field__error {
	display: flex;
	align-items: center;
	gap: var(--kmb-space-2);
	margin: 0;
	font-size: var(--kmb-fs-small);
	color: var(--kmb-danger-700);
}

/* Téléphone camerounais : préfixe +237 collé au champ. */
.kmb-phone {
	display: flex;
}

.kmb-phone__prefix {
	display: inline-flex;
	align-items: center;
	padding-inline: var(--kmb-space-3);
	border: 1px solid var(--kmb-field-border);
	border-inline-end: 0;
	border-radius: var(--kmb-radius-sm) 0 0 var(--kmb-radius-sm);
	background: var(--kmb-surface-50);
	color: var(--kmb-ink-900);
}

.kmb-phone .kmb-input {
	border-radius: 0 var(--kmb-radius-sm) var(--kmb-radius-sm) 0;
}

/* Case à cocher et interrupteur : zone tactile de 44 px. */
.kmb-check {
	display: flex;
	align-items: center;
	gap: var(--kmb-space-3);
	min-block-size: var(--kmb-tap);
}

.kmb-check input {
	inline-size: 1.5rem;
	block-size: 1.5rem;
	accent-color: var(--kmb-brand-600);
}

/* ---------- Puces de filtre : .kmb-chip ([aria-pressed="true"] = active) ---------- */

.kmb-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--kmb-space-2);
	min-block-size: var(--kmb-tap);
	padding: var(--kmb-space-1) var(--kmb-space-4);
	border: 1px solid var(--kmb-field-border);
	border-radius: var(--kmb-radius-pill);
	background: var(--kmb-surface-0);
	color: var(--kmb-ink-900);
	font: var(--kmb-fw-medium) var(--kmb-fs-small) / 1.2 var(--kmb-font-body);
	cursor: pointer;
	transition: background-color var(--kmb-dur) var(--kmb-ease), border-color var(--kmb-dur) var(--kmb-ease), color var(--kmb-dur) var(--kmb-ease);
}

.kmb-chip:hover {
	background: var(--kmb-surface-100);
}

.kmb-chip[aria-pressed="true"] {
	background: var(--kmb-brand-50);
	border-color: var(--kmb-brand-600);
	color: var(--kmb-brand-600);
}

.kmb-chip[aria-pressed="true"]:hover {
	background: var(--kmb-brand-100);
}

/* ---------- Badges : .kmb-badge (--verified, --featured, --open, --closed, --new, --expiring) ---------- */

.kmb-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--kmb-space-1);
	padding: var(--kmb-space-1) var(--kmb-space-3);
	border-radius: var(--kmb-radius-pill);
	font: var(--kmb-fw-semibold) var(--kmb-fs-small) / 1.2 var(--kmb-font-body);
	background: var(--kmb-surface-50);
	color: var(--kmb-ink-900);
	border: 1px solid var(--kmb-line-200);
}

.kmb-badge .kmb-icon {
	inline-size: 1rem;
	block-size: 1rem;
}

.kmb-badge--featured {
	background: var(--kmb-accent-400); /* le jaune sert de fond, avec un texte foncé : jamais de texte jaune */
	border-color: transparent;
}

/* Boutique partenaire (D-168) : couleur neutre, pour ne jamais la confondre avec « À la une ». */
.kmb-badge--partner {
	background: var(--kmb-surface-0);
	border-color: var(--kmb-ink-600);
	color: var(--kmb-ink-900);
}

.kmb-badge--verified {
	background: var(--kmb-success-600);
	border-color: transparent;
	color: var(--kmb-surface-0);
}

/* Le badge « Vérifié » de la fiche est un lien vers « Que signifie Vérifié ? » : il garde l'aspect d'un badge, sans soulignement. */
a.kmb-badge {
	text-decoration: none;
}

.kmb-badge--open {
	background: var(--kmb-surface-0);
	border-color: var(--kmb-success-600);
	color: var(--kmb-success-600);
}

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

.kmb-badge--expiring {
	background: var(--kmb-surface-0);
	border-color: var(--kmb-warning-700);
	color: var(--kmb-warning-700);
}

/* ---------- Cartes : .kmb-card (photo, nom, catégorie, quartier, badges, note, actions rapides) ---------- */

.kmb-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* sans cela, un élément à ratio fixe élargit la carte étirée par sa voisine */
	align-content: start;
	gap: var(--kmb-space-3);
	padding: var(--kmb-space-4);
	border: 1px solid var(--kmb-line-200);
	border-radius: var(--kmb-radius-md);
	background: var(--kmb-surface-0);
	box-shadow: var(--kmb-shadow-sm);
	transition: box-shadow var(--kmb-dur) var(--kmb-ease), transform var(--kmb-dur) var(--kmb-ease), border-color var(--kmb-dur) var(--kmb-ease);
}

@media (hover: hover) {
	.kmb-card:hover {
		border-color: transparent;
		box-shadow: var(--kmb-shadow-md);
		transform: translateY(-2px);
	}
}

.kmb-card__photo {
	aspect-ratio: 3 / 2; /* recadrage des cartes : 3:2 (F-ID-06) */
	inline-size: 100%;
	object-fit: cover;
	border-radius: var(--kmb-radius-sm);
	background: var(--kmb-surface-100);
}

.kmb-card__title {
	margin: 0;
	font: var(--kmb-fw-semibold) var(--kmb-fs-h3) / 1.25 var(--kmb-font-heading);
	letter-spacing: -0.01em;
}

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

.kmb-card__badges,
.kmb-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kmb-space-2);
}

.kmb-card__title .kmb-link {
	color: var(--kmb-ink-900);
	text-decoration: none;
}

.kmb-card__title .kmb-link:hover {
	color: var(--kmb-brand-600);
}

/* Carte d'annonce : la photo prend toute la largeur en haut, le texte et les actions sont en dessous.
   Toute la carte est cliquable (lien étiré sur le titre) ; les boutons d'action restent au-dessus. */
.kmb-card--listing {
	position: relative;
	gap: 0;
	padding: 0;
	overflow: hidden;
}

.kmb-card__media {
	position: relative;
	display: block;
	overflow: hidden;
}

.kmb-card--listing .kmb-card__photo {
	display: block;
	border-radius: 0;
	transition: transform 200ms var(--kmb-ease);
}

@media (hover: hover) {
	.kmb-card--listing:hover .kmb-card__photo {
		transform: scale(1.04);
	}
}

.kmb-card__flags {
	position: absolute;
	inset: var(--kmb-space-3) auto auto var(--kmb-space-3);
	display: flex;
	flex-wrap: wrap;
	gap: var(--kmb-space-2);
	/* Les pastilles passent à la ligne avant d'atteindre le cœur (jamais dessous), même sur les cartes étroites de l'accueil. */
	max-inline-size: calc(100% - var(--kmb-tap) - (var(--kmb-space-3) * 2) - var(--kmb-space-2));
}

.kmb-card__body {
	display: grid;
	gap: var(--kmb-space-1);
	padding: var(--kmb-space-4) var(--kmb-space-4) var(--kmb-space-3);
}

.kmb-card__eyebrow {
	margin: 0;
	color: var(--kmb-brand-600);
	font: var(--kmb-fw-semibold) 0.75rem / 1.2 var(--kmb-font-body);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.kmb-card--listing .kmb-card__title {
	font-size: 1.125rem;
}

.kmb-card--listing .kmb-card__title a {
	color: var(--kmb-ink-900);
	text-decoration: none;
}

.kmb-card--listing .kmb-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.kmb-card--listing .kmb-card__title a:hover {
	color: var(--kmb-brand-600);
}

.kmb-card__place {
	display: flex;
	align-items: center;
	gap: var(--kmb-space-1);
	margin: 0;
	color: var(--kmb-ink-600);
	font-size: var(--kmb-fs-small);
}

.kmb-card__place .kmb-icon {
	inline-size: 1rem;
	block-size: 1rem;
}

/* Une carte posée dans un texte de page (.kmb-prose : page « Mes favoris », futures pages de contenu) ne reprend pas les marges des
   paragraphes et des titres de ce texte : sans cette règle, la carte des favoris était 74 px plus haute que celle des résultats. */
.kmb-prose .kmb-card :is(.kmb-card__eyebrow, .kmb-card__title, .kmb-card__place, .kmb-card__meta) {
	margin: 0;
}

.kmb-card--listing .kmb-card__actions {
	position: relative;
	z-index: 1;
	padding: var(--kmb-space-1) var(--kmb-space-4) var(--kmb-space-4);
}

.kmb-card--listing .kmb-card__actions .kmb-btn {
	flex: 1 1 auto;
	min-block-size: var(--kmb-tap);
	padding-inline: var(--kmb-space-3);
	font-size: var(--kmb-fs-small);
}

/* Liste : photo à gauche sur écran large ; grille : cartes empilées sur téléphone. */
@media (min-width: 768px) {
	.kmb-card--list {
		grid-template-columns: 16rem 1fr;
		align-items: start;
	}
}

/* Grille de cartes : le nombre de colonnes suit l'écran (1, 2, 3) et le visiteur peut le changer (data-cols, posé par
   grid-columns.js, jamais au-delà de ce que l'écran permet). Sans JavaScript, les valeurs par défaut s'appliquent. */
.kmb-grid {
	--kmb-cols: 1;
	display: grid;
	gap: var(--kmb-space-4);
	grid-template-columns: repeat(var(--kmb-cols), minmax(0, 1fr));
}

@media (min-width: 640px) {
	.kmb-grid {
		--kmb-cols: 2;
	}
}

@media (min-width: 1024px) {
	.kmb-grid {
		--kmb-cols: 3;
		gap: var(--kmb-space-5);
	}
}

.kmb-grid[data-cols="1"] {
	--kmb-cols: 1;
}

.kmb-grid[data-cols="2"] {
	--kmb-cols: 2;
}

.kmb-grid[data-cols="3"] {
	--kmb-cols: 3;
}

.kmb-grid[data-cols="4"] {
	--kmb-cols: 4;
}

/* Une carte ne dépasse jamais sa colonne (sinon la page défile sur le côté à 768 px). */
.kmb-grid > * {
	min-inline-size: 0;
}

/* Réglage de l'affichage : « 1 · 2 · 3 · 4 colonnes » (boutons radio), mémorisé dans le navigateur du visiteur. */
.kmb-view {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--kmb-space-3);
	margin: 0 0 var(--kmb-space-4);
	padding: 0;
	border: 0;
	color: var(--kmb-ink-600);
	font-size: var(--kmb-fs-small);
}

.kmb-view__legend {
	margin: 0;
	padding: 0;
	font-weight: var(--kmb-fw-medium);
}

.kmb-view__options {
	display: inline-flex;
	gap: var(--kmb-space-1);
	padding: var(--kmb-space-1);
	border-radius: var(--kmb-radius-pill);
	background: var(--kmb-surface-100);
}

.kmb-view__option {
	position: relative;
	display: inline-flex;
}

.kmb-view__option input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.kmb-view__option span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: var(--kmb-tap);
	min-block-size: 2.25rem;
	padding-inline: var(--kmb-space-3);
	border-radius: var(--kmb-radius-pill);
	color: var(--kmb-ink-900);
	font-weight: var(--kmb-fw-semibold);
	transition: background-color var(--kmb-dur) var(--kmb-ease), color var(--kmb-dur) var(--kmb-ease);
}

.kmb-view__option input:checked + span {
	background: var(--kmb-surface-0);
	box-shadow: var(--kmb-shadow-sm);
	color: var(--kmb-brand-600);
}

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

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

/* Squelette de chargement : forme grise qui palpite doucement (fixe si l'animation est réduite). */
.kmb-skeleton {
	max-inline-size: 100%;
	border-radius: var(--kmb-radius-sm);
	background: linear-gradient(90deg, var(--kmb-surface-100), var(--kmb-line-200), var(--kmb-surface-100));
	background-size: 200% 100%;
	animation: kmb-shimmer 1.4s ease-in-out infinite;
}

@keyframes kmb-shimmer {
	to {
		background-position: -200% 0;
	}
}

/* ---------- Étoiles de notation : .kmb-stars (--kmb-rating de 0 à 5, texte alternatif obligatoire) ---------- */

.kmb-stars {
	--kmb-rating: 0;
	display: inline-block;
	position: relative;
	font-size: var(--kmb-fs-body);
	letter-spacing: 0.1em;
	line-height: 1;
	color: var(--kmb-line-200);
}

.kmb-stars::before {
	content: "★★★★★";
}

.kmb-stars::after {
	content: "★★★★★";
	position: absolute;
	inset: 0 auto 0 0;
	inline-size: calc(var(--kmb-rating) / 5 * 100%);
	overflow: hidden;
	color: var(--kmb-warning-700);
}

/* ---------- Alertes : .kmb-alert (--info, --success, --warning, --danger), role="alert" ou "status" ---------- */

.kmb-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--kmb-space-3);
	padding: var(--kmb-space-4);
	border: 1px solid var(--kmb-line-200);
	border-inline-start-width: 6px;
	border-radius: var(--kmb-radius-sm);
	background: var(--kmb-surface-0);
	box-shadow: var(--kmb-shadow-sm);
	color: var(--kmb-ink-900);
}

.kmb-alert--info {
	border-color: var(--kmb-ink-600);
}

.kmb-alert--success {
	border-color: var(--kmb-success-600);
}

.kmb-alert--warning {
	border-color: var(--kmb-warning-700);
}

.kmb-alert--danger {
	border-color: var(--kmb-danger-700);
}

/* Liens dans une alerte (« Lire les conditions »…) : rouge foncé souligné, 7:1 sur blanc, jamais la couleur par défaut de Divi. */
.kmb-alert a:not(.kmb-btn) {
	color: var(--kmb-brand-700);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ---------- Cartes de prix : .kmb-plan (--highlight pour le plan mis en valeur) ---------- */

.kmb-plan {
	display: grid;
	gap: var(--kmb-space-3);
	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-sm);
}

/* Divi et la prose ajoutent marges et bas de page aux paragraphes : chaque case d'une carte les remet à zéro.
   Le sélecteur est renforcé (grille de plans) pour passer devant la prose ; une case vide garde sa ligne, sinon les cartes voisines décalent leurs listes. */
.kmb-plans .kmb-plan > p {
	margin: 0;
	padding: 0;
}

.kmb-plans .kmb-plan > p:empty {
	display: block;
}

/* La mise en avant garde la bordure d'1 px (un anneau la rend visible) : le contenu ne bouge pas d'une carte à l'autre. */
.kmb-plan--highlight {
	border-color: var(--kmb-brand-600);
	box-shadow: 0 0 0 1px var(--kmb-brand-600), var(--kmb-shadow-lg);
}

.kmb-plan__price {
	margin: 0;
	font: var(--kmb-fw-bold) var(--kmb-fs-h2) / 1.1 var(--kmb-font-heading);
}

/* Détail (durée, livraison) et condition (renouvellement) : texte neutre, sous le prix. */
.kmb-plan__detail,
.kmb-plan__renewal {
	margin: 0;
	color: var(--kmb-ink-600);
	font-size: var(--kmb-fs-small);
}

.kmb-plan__name {
	margin: 0;
	font: var(--kmb-fw-semibold) var(--kmb-fs-h3) / 1.25 var(--kmb-font-heading);
}

.kmb-plan__saving {
	margin: 0;
	color: var(--kmb-success-600);
	font-size: var(--kmb-fs-small);
	font-weight: var(--kmb-fw-semibold);
}

/* ---------- Commander une prestation : fenêtre avec les prestations, le total et « Aller à la caisse » (D-108) ---------- */

.kmb-micro-order__dialog {
	inline-size: min(36rem, calc(100vw - 2 * var(--kmb-space-4)));
	max-block-size: calc(100vh - 2 * var(--kmb-space-4));
	overflow-y: auto;
	padding: var(--kmb-space-5);
	border: 1px solid var(--kmb-line-200);
	border-radius: var(--kmb-radius-lg);
	background: var(--kmb-surface-0);
	color: var(--kmb-ink-900);
	box-shadow: var(--kmb-shadow-lg);
}

.kmb-micro-order__dialog::backdrop {
	background: rgb(15 23 42 / 0.45);
}

.kmb-micro-order__dialog p {
	margin: 0;
}

.kmb-micro-order__form {
	display: grid;
	gap: var(--kmb-space-4);
}

.kmb-micro-order__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kmb-space-3);
}

.kmb-micro-order__head h2 {
	margin: 0;
	font-size: var(--kmb-fs-h3);
}

.kmb-micro-order__close {
	display: grid;
	place-items: center;
	min-inline-size: 2.75rem;
	min-block-size: 2.75rem;
	border: 0;
	border-radius: var(--kmb-radius-md);
	background: transparent;
	color: var(--kmb-ink-900);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.kmb-micro-order__situation,
.kmb-micro-order__services {
	display: grid;
	gap: var(--kmb-space-2);
	margin: 0;
	padding: 0;
	border: 0;
}

.kmb-micro-order__situation legend,
.kmb-micro-order__services legend {
	margin-block-end: var(--kmb-space-2);
	padding: 0;
	font-weight: var(--kmb-fw-semibold);
}

.kmb-micro-order__situation label {
	font-weight: var(--kmb-fw-semibold);
}

.kmb-micro-order__situation select {
	inline-size: 100%;
	min-block-size: 2.75rem;
	padding-inline: var(--kmb-space-3);
	border: 1px solid var(--kmb-field-border);
	border-radius: var(--kmb-radius-md);
	background: var(--kmb-surface-0);
	color: var(--kmb-ink-900);
	font: inherit;
}

.kmb-micro-order__choice {
	display: flex;
	align-items: flex-start;
	gap: var(--kmb-space-2);
	min-block-size: 2.75rem;
	cursor: pointer;
}

.kmb-micro-order__choice input {
	flex: 0 0 auto;
	inline-size: 1.125rem;
	block-size: 1.125rem;
	margin-block-start: 0.2rem;
	accent-color: var(--kmb-brand-600);
}

.kmb-micro-order__choice:has(input:disabled) {
	color: var(--kmb-ink-600);
	cursor: not-allowed;
}

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

.kmb-micro-order__list {
	display: grid;
	gap: var(--kmb-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kmb-micro-order__list li {
	list-style: none;
}

.kmb-micro-order__amount {
	margin-inline-start: auto;
	font-variant-numeric: tabular-nums;
	font-weight: var(--kmb-fw-semibold);
	white-space: nowrap;
}

.kmb-micro-order__total,
.kmb-micro-order__rule {
	color: var(--kmb-ink-600);
	font-size: var(--kmb-fs-small);
}

.kmb-micro-order__total strong {
	color: var(--kmb-ink-900);
	font-size: var(--kmb-fs-h3);
}

/* Boutons centrés : rangée d'action de la fenêtre et bouton d'ouverture (règle de LT : les boutons sont centrés). */
.kmb-micro-order__open {
	display: flex;
	justify-content: center;
	margin: 0;
}

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

.kmb-micro-order__actions button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ---------- Tuiles de statistiques : .kmb-stat ---------- */

.kmb-stat {
	display: grid;
	gap: var(--kmb-space-1);
	padding: var(--kmb-space-4);
	border: 1px solid var(--kmb-line-200);
	border-radius: var(--kmb-radius-md);
	background: var(--kmb-surface-0);
	box-shadow: var(--kmb-shadow-sm);
}

.kmb-stat__value {
	font: var(--kmb-fw-bold) var(--kmb-fs-h2) / 1.1 var(--kmb-font-heading);
}

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

/* ---------- Onglets, fil d'Ariane, pagination ---------- */

.kmb-tabs {
	display: flex;
	gap: var(--kmb-space-1);
	overflow-x: auto;
	border-block-end: 1px solid var(--kmb-line-200);
}

.kmb-tab {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--kmb-tap);
	padding-inline: var(--kmb-space-4);
	border-block-end: 3px solid transparent;
	color: var(--kmb-ink-600);
	font-weight: var(--kmb-fw-medium);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--kmb-dur) var(--kmb-ease);
}

.kmb-tab:hover {
	color: var(--kmb-ink-900);
}

.kmb-tab[aria-selected="true"],
.kmb-tab[aria-current="page"] {
	border-block-end-color: var(--kmb-brand-600);
	color: var(--kmb-brand-600);
}

.kmb-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kmb-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--kmb-fs-small);
	color: var(--kmb-ink-600);
}

.kmb-breadcrumb li + li::before {
	content: "›";
	margin-inline-end: var(--kmb-space-2);
}

.kmb-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kmb-space-2);
}

/* ---------- États vides : .kmb-empty ---------- */

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

.kmb-empty {
	display: grid;
	justify-items: center;
	gap: var(--kmb-space-3);
	padding: var(--kmb-space-7) var(--kmb-space-4);
	border: 2px dashed var(--kmb-line-200);
	border-radius: var(--kmb-radius-lg);
	background: var(--kmb-surface-50);
	text-align: center;
	color: var(--kmb-ink-600);
}

/* ---------- Mouvement réduit : plus aucune animation (NF-UI-06) ---------- */

@media (prefers-reduced-motion: reduce) {
	.kmb-skeleton,
	.kmb-btn[aria-busy="true"]::after {
		animation: none;
	}
}

/* ---------- Formulaire d'annonce : bouton « Utiliser ma position » (L3-02) ---------- */

.kmb-geolocate {
	display: grid;
	gap: var(--kmb-space-2);
	margin-block: var(--kmb-space-3);
	padding: var(--kmb-space-4);
	border: 1px solid var(--kmb-line-200);
	border-radius: var(--kmb-radius-md);
	background: var(--kmb-surface-50);
	font-family: var(--kmb-font-body);
}

.kmb-geolocate .kmb-btn {
	justify-self: start;
}

.kmb-geolocate__help,
.kmb-geolocate__status {
	margin: 0;
	font-size: var(--kmb-fs-small);
	color: var(--kmb-ink-600);
}

.kmb-geolocate__status:empty {
	display: none;
}

.kmb-geolocate__status.is-error {
	color: var(--kmb-danger-700);
}

/* Carte d'annonce sans photo : un aplat doux avec l'icône de la boutique, au centre, au même format 3:2. Classe doublée : la règle
   `.kmb-card--listing .kmb-card__photo` (display: block) l'emportait et collait l'icône en haut à gauche, sous les pastilles. */
.kmb-card__photo.kmb-card__photo--empty {
	display: grid;
	place-items: center;
	color: var(--kmb-ink-600);
}

.kmb-card__photo--empty .kmb-icon {
	inline-size: 2.5rem;
	block-size: 2.5rem;
}

/* ---------- Bouton avec flèche : .kmb-btn--arrow (la flèche avance au survol) ---------- */

.kmb-btn--arrow::after {
	content: "";
	flex: none;
	inline-size: 1.1em;
	block-size: 1.1em;
	background: currentcolor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--kmb-dur) var(--kmb-ease);
}

.kmb-btn--arrow:hover::after {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.kmb-btn--arrow:hover::after {
		transform: none;
	}
}

/* ---------- Favoris : cœur d'une carte ou d'une fiche, message bref, invitation à se connecter (L3-11) ---------- */

.kmb-fav {
	position: absolute;
	inset: var(--kmb-space-3) var(--kmb-space-3) auto auto;
	z-index: 2;
	display: inline-grid;
	place-items: center;
	inline-size: var(--kmb-tap);
	block-size: var(--kmb-tap);
	padding: 0;
	border: 1px solid var(--kmb-line-200);
	border-radius: var(--kmb-radius-pill);
	background: color-mix(in srgb, var(--kmb-surface-0) 92%, transparent);
	color: var(--kmb-ink-900);
	box-shadow: var(--kmb-shadow-sm);
	cursor: pointer;
	transition: transform 180ms var(--kmb-ease), color 180ms var(--kmb-ease);
}

.kmb-fav .kmb-icon {
	inline-size: 1.4rem;
	block-size: 1.4rem;
}

.kmb-fav:hover {
	transform: scale(1.06);
	color: var(--kmb-brand-600);
}

.kmb-fav[aria-pressed="true"] {
	color: var(--kmb-brand-600);
}

.kmb-fav[aria-pressed="true"] .kmb-icon {
	fill: currentcolor;
	animation: kmb-fav-pop 320ms var(--kmb-ease);
}

@keyframes kmb-fav-pop {
	0% {
		transform: scale(0.7);
	}

	60% {
		transform: scale(1.25);
	}

	100% {
		transform: scale(1);
	}
}

/* Anneau qui part du cœur au clic (classe posée par favorites.js pendant 700 ms) : le retour se voit là où on a touché. */
.kmb-fav::after {
	content: "";
	position: absolute;
	inset: -2px;
	border: 2px solid var(--kmb-brand-600);
	border-radius: var(--kmb-radius-pill);
	opacity: 0;
	pointer-events: none;
}

.kmb-fav.is-bursting::after {
	animation: kmb-fav-ring 650ms var(--kmb-ease);
}

@keyframes kmb-fav-ring {
	0% {
		opacity: 0.75;
		transform: scale(0.8);
	}

	100% {
		opacity: 0;
		transform: scale(1.7);
	}
}

/* Message bref après un clic sur le cœur. Placé sous l'en-tête (et non en bas) : en bas il recouvrait les boutons « Appeler » et
   « WhatsApp » des cartes et la barre d'actions de la fiche. Centré par les marges automatiques, sans décalage de moitié de largeur :
   sa largeur est celle de son texte (une ligne), et non la moitié de l'écran. */
.kmb-fav-toast {
	position: fixed;
	inset-block-start: calc(var(--kmb-header-h) + var(--kmb-space-3) + env(safe-area-inset-top));
	inset-inline: 0;
	z-index: 10000;
	inline-size: max-content;
	max-inline-size: calc(100vw - 2rem);
	margin-inline: auto;
	padding: var(--kmb-space-2) var(--kmb-space-5);
	border-radius: var(--kmb-radius-pill);
	background: var(--kmb-ink-900);
	color: var(--kmb-surface-0);
	box-shadow: var(--kmb-shadow-md);
	font-size: var(--kmb-fs-small);
	font-weight: var(--kmb-fw-semibold);
	text-align: center;
	text-wrap: balance;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-10px) scale(0.96);
	transition: opacity 200ms var(--kmb-ease), transform 200ms var(--kmb-ease);
}

.kmb-fav-toast.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.kmb-fav-toast:empty {
	display: none;
}

.kmb-favdialog {
	inline-size: min(26rem, calc(100vw - 2rem));
	padding: 0;
	border: 0;
	border-radius: var(--kmb-radius-lg);
	background: var(--kmb-surface-0);
	color: var(--kmb-ink-900);
	box-shadow: var(--kmb-shadow-lg);
}

.kmb-favdialog::backdrop {
	background: color-mix(in srgb, var(--kmb-ink-900) 55%, transparent);
}

.kmb-favdialog__box {
	display: grid;
	justify-items: center;
	gap: var(--kmb-space-3);
	padding: var(--kmb-space-6) var(--kmb-space-5) var(--kmb-space-5);
	text-align: center;
}

.kmb-favdialog__box h2,
.kmb-favdialog__box p {
	margin: 0;
}

.kmb-favdialog__icon {
	display: grid;
	place-items: center;
	inline-size: 3.5rem;
	block-size: 3.5rem;
	border-radius: var(--kmb-radius-pill);
	background: var(--kmb-brand-50);
	color: var(--kmb-brand-600);
}

.kmb-favdialog__icon .kmb-icon {
	inline-size: 1.75rem;
	block-size: 1.75rem;
}

.kmb-favdialog__actions {
	display: grid;
	inline-size: 100%;
	gap: var(--kmb-space-2);
	margin-block-start: var(--kmb-space-2);
}

.kmb-badge--offline {
	background: var(--kmb-ink-900);
	border-color: transparent;
	color: var(--kmb-surface-0);
}

/* Favori qui n'est plus en ligne : carte sans lien, photo remplacée par une icône, légèrement estompée. */
.kmb-card--offline .kmb-card__media {
	background: var(--kmb-surface-100);
	aspect-ratio: 4 / 3;
}

.kmb-card--offline .kmb-card__photo--empty {
	display: grid;
	place-items: center;
	inline-size: 100%;
	block-size: 100%;
	color: var(--kmb-ink-600);
}

.kmb-card--offline .kmb-card__body {
	opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
	.kmb-fav,
	.kmb-fav-toast {
		transition: none;
	}

	.kmb-fav[aria-pressed="true"] .kmb-icon,
	.kmb-fav.is-bursting::after {
		animation: none;
	}

	.kmb-fav:hover {
		transform: none;
	}
}

/* ---------- Mouvement des pages de l'annuaire (étude « kiwi », C-060) : transform et opacité seulement ---------- */

/* Cartes qui arrivent sans recharger la page (filtres en direct, « Voir plus ») : l'une après l'autre. results.js pose la classe. */
.kmb-card.is-entering {
	animation: kmb-rise 480ms var(--kmb-ease) calc(var(--kmb-i, 0) * 45ms) backwards;
}

/* Le nombre de commerces « rebondit » quand il change. */
@keyframes kmb-bump {
	40% {
		transform: scale(1.08);
	}
}

.is-bumped {
	transform-origin: left center;
	animation: kmb-bump 420ms var(--kmb-ease);
}

/* Page « Mes favoris » : les cartes montent l'une après l'autre dès l'ouverture. */
.kmb-favpage__grid > .kmb-card {
	animation: kmb-rise 520ms var(--kmb-ease) backwards;
}

.kmb-favpage__grid > .kmb-card:nth-child(2) {
	animation-delay: 70ms;
}

.kmb-favpage__grid > .kmb-card:nth-child(3) {
	animation-delay: 140ms;
}

.kmb-favpage__grid > .kmb-card:nth-child(n+4) {
	animation-delay: 210ms;
}

@media (prefers-reduced-motion: reduce) {
	.kmb-card.is-entering,
	.is-bumped,
	.kmb-favpage__grid > .kmb-card {
		animation: none;
	}
}

/* ---------- Rappel « confirmez votre e-mail » en tête des pages de compte (L4-01) ---------- */

.kmb-verify-wrap {
	display: grid;
	gap: var(--kmb-space-3);
	margin-block: var(--kmb-space-4);
}

.kmb-page--full > .kmb-verify-wrap {
	max-inline-size: var(--kmb-width-content);
	margin-inline: auto;
	padding-inline: var(--kmb-space-4);
}

.kmb-verify__form {
	margin: var(--kmb-space-3) 0 0;
}

/* ---------- Bandeau « Premier mois offert, encore N places » (plan Lancement, L4-07) ---------- */

.kmb-launch-banner {
	display: flex;
	align-items: center;
	gap: var(--kmb-space-2);
	inline-size: fit-content;
	max-inline-size: 100%;
	margin: var(--kmb-space-4) auto 0;
	padding: var(--kmb-space-2) var(--kmb-space-4);
	border: 1px solid var(--kmb-brand-100);
	border-radius: var(--kmb-radius-pill);
	background: var(--kmb-brand-50);
	color: var(--kmb-brand-700);
	font-weight: var(--kmb-fw-bold);
	text-align: center;
}

.kmb-launch-banner__dot {
	flex: none;
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-radius: 50%;
	background: var(--kmb-brand-600);
}

/* Sur « Publier mon annonce », le bandeau suit la phrase d'introduction de l'offre, alignée à gauche. */
.kmb-plans__note + .kmb-launch-banner {
	margin: 0 0 var(--kmb-space-4);
}

/* ---------- Parcours : Plan, Annonce, Paiement, Validation (L4-11e) ----------
   Quatre repères toujours dans le même ordre, sur le formulaire d'annonce, à la caisse et sur « commande reçue » : une barre par étape (faite en
   vert, en cours en rouge de la marque), le nom dessous. Rien n'est numéroté : l'assistant du formulaire a déjà son compteur « Étape n / 6 ». */

#page-container ol.kmb-journey {
	display: flex;
	gap: var(--kmb-space-2);
	margin: 0 0 var(--kmb-space-5);
	padding: 0;
	list-style: none;
}

#page-container ol.kmb-journey .kmb-journey__step {
	display: grid;
	flex: 1;
	gap: var(--kmb-space-1);
	min-inline-size: 0;
	margin: 0;
	padding: 0;
}

#page-container ol.kmb-journey .kmb-journey__step::before {
	content: "";
	block-size: 0.25rem;
	border-radius: 0.125rem;
	background: var(--kmb-line-200);
}

#page-container ol.kmb-journey .kmb-journey__step--done::before {
	background: var(--kmb-success-600);
}

#page-container ol.kmb-journey .kmb-journey__step--current::before {
	background: var(--kmb-brand-600);
}

#page-container ol.kmb-journey .kmb-journey__label {
	overflow-wrap: anywhere;
	color: var(--kmb-ink-600);
	font-size: var(--kmb-fs-small);
	line-height: 1.3;
}

#page-container ol.kmb-journey .kmb-journey__step--current .kmb-journey__label {
	color: var(--kmb-ink-900);
	font-weight: var(--kmb-fw-semibold);
}

#page-container ol.kmb-journey .kmb-journey__step--done .kmb-journey__label::before {
	content: "✓ " / "";
	color: var(--kmb-success-600);
	font-weight: var(--kmb-fw-bold);
}

/* Sur un petit téléphone, quatre colonnes de 65 px n'ont pas la place d'un « ✓ » devant le nom : la barre verte dit « fait ». */
@media (max-width: 479px) {
	#page-container ol.kmb-journey .kmb-journey__step--done .kmb-journey__label::before {
		content: none;
	}
}

/* Mot de passe : bouton afficher / masquer dans le champ. body : Divi impose son propre retrait aux champs texte. */
.kmb-pw {
	position: relative;
}

body .kmb-pw .kmb-input {
	padding-block: var(--kmb-space-2);
	padding-inline: var(--kmb-space-4);
}

body .kmb-pw.has-toggle .kmb-input {
	padding-inline-end: calc(var(--kmb-tap) + var(--kmb-space-2));
}

.kmb-pw__toggle {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--kmb-tap);
	padding: 0;
	border: 0;
	border-radius: var(--kmb-radius-sm);
	background: transparent;
	color: var(--kmb-ink-600);
	cursor: pointer;
}

.kmb-pw__toggle:hover {
	color: var(--kmb-ink-900);
}

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

/* Indicateur de solidité : la barre grandit par transform (pas de recalcul de mise en page). */
.kmb-meter {
	display: flex;
	align-items: center;
	gap: var(--kmb-space-3);
	font-size: var(--kmb-fs-small);
	color: var(--kmb-ink-600);
}

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

.kmb-meter__track {
	flex: 1;
	block-size: 6px;
	overflow: hidden;
	border-radius: var(--kmb-radius-pill);
	background: var(--kmb-line-200);
}

.kmb-meter__track i {
	display: block;
	block-size: 100%;
	border-radius: inherit;
	background: var(--kmb-danger-700);
	transform: scaleX(0.1);
	transform-origin: left center;
	transition: transform calc(var(--kmb-dur) * 2) var(--kmb-ease), background-color var(--kmb-dur) var(--kmb-ease);
}

.kmb-meter[data-level="1"] .kmb-meter__track i {
	background: var(--kmb-warning-700);
	transform: scaleX(0.35);
}

.kmb-meter[data-level="2"] .kmb-meter__track i {
	background: var(--kmb-warning-700);
	transform: scaleX(0.6);
}

.kmb-meter[data-level="3"] .kmb-meter__track i {
	background: var(--kmb-success-600);
	transform: scaleX(0.82);
}

.kmb-meter[data-level="4"] .kmb-meter__track i {
	background: var(--kmb-success-600);
	transform: scaleX(1);
}

.kmb-meter__text {
	min-inline-size: 10.5rem;
	color: var(--kmb-ink-900);
}

/* ---- reveal.css ---- */
/* Apparition au défilement (L6-26, NF-UI-06). Déplacée de components.css ; durée et courbe dans les jetons --kmb-reveal-dur et --kmb-reveal-ease.

   Caché seulement quand JavaScript tourne (classe kmb-js) ; si le script échoue, l'élément réapparaît tout seul après 3 s.
   Animation et non transition : elle s'efface après coup (fill-mode « backwards »), donc le survol des cartes reste libre. */

.kmb-js [data-reveal]:not(.is-visible) {
	opacity: 0;
	animation: kmb-reveal-failsafe 1ms linear 3s forwards;
}

.kmb-js [data-reveal].is-visible {
	animation: kmb-rise var(--kmb-reveal-dur) var(--kmb-reveal-ease) calc(var(--kmb-i, 0) * 80ms) backwards;
}

@keyframes kmb-rise {
	from {
		opacity: 0;
		transform: translateY(1.5rem);
	}
}

@keyframes kmb-reveal-failsafe {
	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kmb-js [data-reveal]:not(.is-visible) {
		opacity: 1;
		animation: none;
	}

	.kmb-js [data-reveal].is-visible {
		animation: none;
	}
}

/* ---- layout.css ---- */
/*
 * Mise en page du site : en-tête, barre basse du téléphone, pied de page, page 404, article, archive (F-VIT-01, F-VIT-02).
 * Mobile d'abord : les règles de base sont celles du téléphone. Uniquement des jetons --kmb-… (voir tokens.css).
 *
 * Paliers (docs/04, F-ID-04) : téléphone jusqu'à 767 px · tablette de 768 à 1 023 px · bureau à partir de 1 024 px.
 * Aucun décalage de mise en page (CLS) : l'en-tête est fixe, une cale de même hauteur réserve sa place, et la réduction au
 * défilement ne change que la hauteur de l'en-tête fixe, jamais celle de la cale.
 */

:root {
	--kmb-header-h: 56px;
	--kmb-header-compact-h: 48px;
	--kmb-bottomnav-h: 64px;
}

@media (min-width: 768px) {
	:root {
		--kmb-header-h: 72px;
		--kmb-header-compact-h: 60px;
	}
}

/*
 * Neutralise deux réglages de Divi qui gênent nos modèles du Theme Builder :
 * - le module « code plein écran » est limité à 1 200 px et centré : nos blocs gèrent leur propre largeur (.kmb-container) ;
 * - Divi remet des puces et un retrait aux listes à l'intérieur de ses modules.
 */
/* stylelint-disable declaration-no-important -- Divi écrit ces réglages en ligne : seul !important les neutralise. */
.et-l--header .et_pb_fullwidth_code,
.et-l--body .et_pb_fullwidth_code,
.et-l--footer .et_pb_fullwidth_code {
	inline-size: 100% !important;
	max-inline-size: none !important;
	margin-inline: 0 !important;
	padding: 0 !important;
}
/* stylelint-enable declaration-no-important */

body .kmb-header ul,
body .kmb-header li,
body .kmb-bottomnav ul,
body .kmb-bottomnav li,
body .kmb-footer ul,
body .kmb-footer li,
body .kmb-pagination ul,
body .kmb-pagination li,
body .kmb-breadcrumb {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Puces des listes de filtres : Divi remet une puce sur chaque li, on la retire (la liste garde sa mise en page). */
body .kmb-home-chips li,
body .kmb-results__chips li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kmb-container {
	inline-size: 100%;
	max-inline-size: var(--kmb-width-content);
	margin-inline: auto;
	padding-inline: var(--kmb-space-4);
	box-sizing: border-box;
}

/* ---------- Lien d'évitement ---------- */

.kmb-skip {
	position: absolute;
	inset-inline-start: var(--kmb-space-3);
	inset-block-start: -200px;
	z-index: 10000;
	padding: var(--kmb-space-3) var(--kmb-space-4);
	border-radius: var(--kmb-radius-sm);
	background: var(--kmb-ink-900);
	color: var(--kmb-surface-0);
	font: var(--kmb-fw-semibold) var(--kmb-fs-body) / 1.2 var(--kmb-font-body);
	text-decoration: none;
}

.kmb-skip:focus {
	inset-block-start: var(--kmb-space-3);
	outline: 3px solid var(--kmb-brand-600);
	outline-offset: 2px;
}

/* ---------- En-tête ---------- */

.kmb-header-spacer {
	block-size: var(--kmb-header-h);
}

.kmb-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 9000;
	background: var(--kmb-surface-0);
	border-block-end: 1px solid var(--kmb-line-200);
	font-family: var(--kmb-font-body);
	transition: box-shadow var(--kmb-dur) var(--kmb-ease);
}

/* Verre dépoli là où le navigateur le sait ; sinon le fond blanc plein reste. */
@supports (backdrop-filter: blur(1px)) {
	.kmb-header {
		background: rgb(255 255 255 / 86%);
		backdrop-filter: saturate(180%) blur(16px);
	}
}

.kmb-header.is-compact {
	box-shadow: var(--kmb-shadow-sm);
}

body.admin-bar .kmb-header {
	inset-block-start: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .kmb-header {
		inset-block-start: 46px;
	}
}

.kmb-header__bar {
	display: flex;
	align-items: center;
	gap: var(--kmb-space-3);
	block-size: var(--kmb-header-h);
	transition: block-size var(--kmb-dur) var(--kmb-ease);
}

.kmb-header.is-compact .kmb-header__bar {
	block-size: var(--kmb-header-compact-h);
}

.kmb-header__logo {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--kmb-tap);
	flex: none;
}

.kmb-header__logo-img {
	block-size: 28px;
	inline-size: auto;
	transition: block-size var(--kmb-dur) var(--kmb-ease);
}

@media (min-width: 768px) {
	.kmb-header__logo-img {
		block-size: 36px;
	}
}

.kmb-header.is-compact .kmb-header__logo-img {
	block-size: 24px;
}

@media (min-width: 768px) {
	.kmb-header.is-compact .kmb-header__logo-img {
		block-size: 30px;
	}
}

.kmb-header__actions {
	display: flex;
	align-items: center;
	gap: var(--kmb-space-2);
	margin-inline-start: auto;
}

.kmb-iconbtn {
	display: inline-grid;
	place-items: center;
	inline-size: var(--kmb-tap);
	block-size: var(--kmb-tap);
	padding: 0;
	border: 0;
	border-radius: var(--kmb-radius-pill);
	background: transparent;
	color: var(--kmb-ink-900);
	cursor: pointer;
	transition: background-color var(--kmb-dur) var(--kmb-ease), color var(--kmb-dur) var(--kmb-ease);
}

.kmb-iconbtn:hover {
	background: var(--kmb-surface-100);
	color: var(--kmb-brand-700);
}

.kmb-iconbtn:focus-visible,
.kmb-header a:focus-visible,
.kmb-footer a:focus-visible,
.kmb-bottomnav a:focus-visible,
.kmb-bottomnav button:focus-visible {
	outline: 3px solid var(--kmb-brand-600);
	outline-offset: 2px;
}

.kmb-header__login,
.kmb-header__cta {
	display: none;
}

.kmb-header__login {
	align-items: center;
	min-block-size: var(--kmb-tap);
	padding-inline: var(--kmb-space-4);
	border-radius: var(--kmb-radius-pill);
	color: var(--kmb-ink-900);
	font-weight: var(--kmb-fw-medium);
	text-decoration: none;
	transition: background-color var(--kmb-dur) var(--kmb-ease), color var(--kmb-dur) var(--kmb-ease);
}

.kmb-header__login:hover {
	background: var(--kmb-surface-100);
	color: var(--kmb-brand-600);
}

@media (min-width: 768px) {
	.kmb-header .kmb-header__cta {
		display: inline-flex;
	}
}

@media (min-width: 1024px) {
	.kmb-header .kmb-header__login {
		display: inline-flex;
	}

	.kmb-header__menu {
		display: none;
	}
}

/* Navigation du bureau */

.kmb-nav {
	display: none;
}

@media (min-width: 1024px) {
	.kmb-nav {
		display: block;
		margin-inline-start: var(--kmb-space-5);
	}
}

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

.kmb-header .kmb-menu a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--kmb-tap);
	padding-inline: var(--kmb-space-4);
	border-radius: var(--kmb-radius-pill);
	color: var(--kmb-ink-900);
	font-weight: var(--kmb-fw-medium);
	text-decoration: none;
	transition: background-color var(--kmb-dur) var(--kmb-ease), color var(--kmb-dur) var(--kmb-ease);
}

.kmb-header .kmb-menu a:hover {
	background: var(--kmb-surface-100);
	color: var(--kmb-brand-600);
}

.kmb-header .kmb-menu a[aria-current="page"],
.kmb-header .kmb-menu a.is-active,
.kmb-header .kmb-menu .current-menu-item > a {
	background: var(--kmb-brand-50);
	color: var(--kmb-brand-600);
}

/* Sous-menu « Commerces » (F-VIT-01) : sur ordinateur, il se déroule au survol et quand un lien reçoit le focus (clavier). */

.kmb-header .kmb-menu li {
	position: relative;
}

.kmb-header .kmb-menu .sub-menu {
	display: none;
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	z-index: 30;
	box-sizing: border-box;
	min-inline-size: 15rem;
	max-block-size: 70vh;
	overflow-y: auto;
	margin: 0;
	padding: var(--kmb-space-2);
	list-style: none;
	border: 1px solid var(--kmb-line-200);
	border-radius: var(--kmb-radius-md);
	background: var(--kmb-surface-0);
	box-shadow: var(--kmb-shadow-lg);
}

.kmb-header .kmb-menu li:hover > .sub-menu,
.kmb-header .kmb-menu li:focus-within > .sub-menu {
	display: block;
}

.kmb-header .kmb-menu .sub-menu a {
	box-sizing: border-box;
	inline-size: 100%;
	border-radius: var(--kmb-radius-sm);
	white-space: nowrap;
}

.kmb-header .kmb-menu .kmb-menu__group-start {
	margin-block-start: var(--kmb-space-2);
	padding-block-start: var(--kmb-space-2);
	border-block-start: 1px solid var(--kmb-line-200);
}

/* Panneaux : recherche et menu du téléphone */

.kmb-panel {
	padding-block: var(--kmb-space-3);
	border-block-start: 1px solid var(--kmb-line-200);
	background: var(--kmb-surface-0);
	max-block-size: calc(100vh - var(--kmb-header-h));
	overflow-y: auto;
}

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

.kmb-search {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kmb-space-2);
}

/* Le champ garde une largeur lisible : sur un petit téléphone, le bouton passe en dessous. */
.kmb-search .kmb-input {
	flex: 1 1 14rem;
	min-inline-size: 0;
}

/* Menu du téléphone : tiroir à droite, grands boutons, fond assombri. Posé hors de l'en-tête (son flou ferait de lui le repère du « fixed »). */
.kmb-drawer {
	position: fixed;
	inset: 0;
	z-index: 9800;
	font-family: var(--kmb-font-body);
}

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

.kmb-drawer__scrim {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--kmb-ink-900) 60%, transparent);
	animation: kmb-fade-in var(--kmb-dur) var(--kmb-ease);
}

.kmb-drawer__sheet {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	display: flex;
	flex-direction: column;
	gap: var(--kmb-space-2);
	inline-size: min(22rem, 88vw);
	padding: var(--kmb-space-4);
	padding-block: calc(var(--kmb-header-h) + var(--kmb-space-2)) calc(var(--kmb-space-6) + env(safe-area-inset-bottom));
	border-radius: var(--kmb-radius-xl) 0 0 var(--kmb-radius-xl);
	background: var(--kmb-surface-0);
	box-shadow: var(--kmb-shadow-lg);
	overflow-y: auto;
	animation: kmb-slide-in 320ms var(--kmb-ease);
}

.kmb-drawer__close {
	position: absolute;
	inset-block-start: var(--kmb-space-3);
	inset-inline-end: var(--kmb-space-3);
}

.kmb-drawer .kmb-menu--stack {
	display: flex;
	flex-direction: column;
	gap: var(--kmb-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kmb-drawer .kmb-menu--stack a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-block-size: 3.25rem;
	padding-inline: var(--kmb-space-4);
	border-radius: var(--kmb-radius-pill);
	background: var(--kmb-surface-100);
	color: var(--kmb-ink-900);
	font: var(--kmb-fw-semibold) 1.125rem / 1.2 var(--kmb-font-heading);
	text-decoration: none;
}

.kmb-drawer .kmb-menu--stack a:hover,
.kmb-drawer .kmb-menu--stack a[aria-current="page"],
.kmb-drawer .kmb-menu--stack .current-menu-item > a {
	background: var(--kmb-brand-50);
	color: var(--kmb-brand-600);
}

/* Sous-menu « Commerces » dans le tiroir du téléphone : toujours déployé, en retrait. */
.kmb-drawer .kmb-menu--stack .sub-menu {
	display: flex;
	flex-direction: column;
	gap: var(--kmb-space-1);
	margin: var(--kmb-space-2) 0 0;
	padding: 0 0 0 var(--kmb-space-4);
	list-style: none;
}

.kmb-drawer .kmb-menu--stack .sub-menu a {
	min-block-size: 2.75rem;
	background: transparent;
	font: var(--kmb-fw-medium) 1rem / 1.2 var(--kmb-font-body);
}

.kmb-drawer .kmb-menu--stack .kmb-menu__group-start {
	padding-block-start: var(--kmb-space-2);
	border-block-start: 1px solid var(--kmb-line-200);
}

.kmb-menu__account {
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--kmb-tap);
	margin-block-start: var(--kmb-space-2);
	color: var(--kmb-ink-900);
	font-weight: var(--kmb-fw-medium);
	text-decoration: none;
}

.kmb-menu__cta {
	inline-size: 100%;
	margin-block-start: auto;
}

html.kmb-menu-open {
	overflow: hidden;
}

@keyframes kmb-slide-in {
	from {
		transform: translateX(100%);
	}
}

@keyframes kmb-fade-in {
	from {
		opacity: 0;
	}
}

@media (min-width: 1024px) {
	.kmb-drawer {
		display: none;
	}
}

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

/* ---------- Barre de navigation basse du téléphone ---------- */

.kmb-bottomnav {
	position: fixed;
	inset: auto 0 0;
	z-index: 9000;
	padding-block-end: env(safe-area-inset-bottom);
	border-block-start: 1px solid var(--kmb-line-200);
	background: var(--kmb-surface-0);
	font-family: var(--kmb-font-body);
}

@supports (backdrop-filter: blur(1px)) {
	.kmb-bottomnav {
		background: rgb(255 255 255 / 90%);
		backdrop-filter: saturate(180%) blur(16px);
	}
}

@media (min-width: 768px) {
	.kmb-bottomnav {
		display: none;
	}
}

.kmb-bottomnav__list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kmb-bottomnav__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	inline-size: 100%;
	min-block-size: var(--kmb-bottomnav-h);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--kmb-ink-600);
	font: var(--kmb-fw-medium) 0.75rem / 1.2 var(--kmb-font-body);
	text-decoration: none;
	cursor: pointer;
}

.kmb-bottomnav__item .kmb-icon {
	box-sizing: content-box;
	padding: var(--kmb-space-1) var(--kmb-space-4);
	border-radius: var(--kmb-radius-pill);
	transition: background-color var(--kmb-dur) var(--kmb-ease);
}

.kmb-bottomnav__item.is-active,
.kmb-bottomnav__item[aria-current="page"] {
	color: var(--kmb-brand-600);
	font-weight: var(--kmb-fw-semibold);
}

.kmb-bottomnav__item.is-active .kmb-icon,
.kmb-bottomnav__item[aria-current="page"] .kmb-icon {
	background: var(--kmb-brand-50);
}

/* La barre basse ne masque jamais le bas de la page. */
@media (max-width: 767px) {
	body {
		padding-block-end: calc(var(--kmb-bottomnav-h) + env(safe-area-inset-bottom));
	}
}

/* ---------- Pied de page ---------- */

.kmb-footer {
	position: relative;
	margin-block-start: var(--kmb-space-7);
	padding-block: var(--kmb-space-8) var(--kmb-space-5);
	border-radius: var(--kmb-radius-xl) var(--kmb-radius-xl) 0 0;
	background: var(--kmb-ink-900);
	color: var(--kmb-surface-0);
	font-family: var(--kmb-font-body);
}

.kmb-footer__grid {
	display: grid;
	gap: var(--kmb-space-6);
	grid-template-columns: 1fr;
}

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

@media (min-width: 1024px) {
	.kmb-footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
	}
}

.kmb-footer__logo-img {
	block-size: 32px;
	inline-size: auto;
	margin-block-end: var(--kmb-space-4);
}

.kmb-footer__title {
	margin: 0 0 var(--kmb-space-3);
	color: var(--kmb-accent-400);
	font: var(--kmb-fw-semibold) var(--kmb-fs-small) / 1.3 var(--kmb-font-heading);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.kmb-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kmb-footer a {
	display: inline-flex;
	align-items: center;
	gap: var(--kmb-space-2);
	min-block-size: var(--kmb-tap);
	color: var(--kmb-line-200);
	text-decoration: none;
	text-underline-offset: 0.2em;
	transition: color var(--kmb-dur) var(--kmb-ease);
}

.kmb-footer a:hover {
	color: var(--kmb-surface-0);
	text-decoration: underline;
}

/* « Gérer mes cookies » (AUD-123) : un bouton qui se lit comme les liens du pied de page. */
.kmb-footer__consent {
	min-block-size: var(--kmb-tap);
	padding: 0;
	border: 0;
	background: none;
	color: var(--kmb-line-200);
	font: inherit;
	text-underline-offset: 0.2em;
	cursor: pointer;
	transition: color var(--kmb-dur) var(--kmb-ease);
}

.kmb-footer__consent:hover {
	color: var(--kmb-surface-0);
	text-decoration: underline;
}

/* Réseaux sociaux (F-VIT-02) : affichés seulement quand une adresse est réglée. */
.kmb-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kmb-space-2) var(--kmb-space-4);
	margin: var(--kmb-space-3) 0 0;
	padding: 0;
	list-style: none;
}

.kmb-footer__logo {
	text-decoration: none;
}

.kmb-footer__support {
	margin: var(--kmb-space-3) 0 0;
	color: var(--kmb-line-200);
	font-size: var(--kmb-fs-small);
}

.kmb-footer__todo {
	font-style: italic;
}

/* Bas du pied de page : proposition d'installation, « Économiser mes données », copyright, centrés les uns sous les autres (rangées de
   boutons centrées ; rien à droite, où se pose le bouton flottant « Aide »). */
.kmb-footer__bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--kmb-space-3);
	margin-block-start: var(--kmb-space-6);
	padding-block-start: var(--kmb-space-4);
	border-block-start: 1px solid var(--kmb-ink-600);
	text-align: center;
}

.kmb-footer__copyright {
	margin: 0;
	color: var(--kmb-line-200);
	font-size: var(--kmb-fs-small);
}

/* Bouton rond « retour en haut » : posé à cheval sur le bord du pied de page. */
.kmb-footer a.kmb-totop {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 50%;
	justify-content: center;
	inline-size: 3.25rem;
	block-size: 3.25rem;
	min-block-size: 0;
	border-radius: 50%;
	background: var(--kmb-gradient-brand);
	box-shadow: 0 0 0 0.35rem var(--kmb-ink-900);
	color: var(--kmb-surface-0);
	transform: translate(-50%, -50%);
	transition: transform var(--kmb-dur) var(--kmb-ease);
}

.kmb-footer a.kmb-totop:hover {
	color: var(--kmb-surface-0);
	text-decoration: none;
	transform: translate(-50%, calc(-50% - 4px));
}

@media (prefers-reduced-motion: reduce) {
	.kmb-footer a.kmb-totop:hover {
		transform: translate(-50%, -50%);
	}
}

/* ---------- Titres des pages de contenu : les jetons, pas le gris léger de Divi ---------- */

body .kmb-notfound h1,
body .kmb-article__title {
	color: var(--kmb-ink-900);
	font-family: var(--kmb-font-heading);
	font-weight: var(--kmb-fw-bold);
	letter-spacing: -0.01em;
}

/* ---------- Page 404 ---------- */

.kmb-notfound {
	display: grid;
	justify-items: center;
	gap: var(--kmb-space-4);
	padding-block: var(--kmb-space-8);
	text-align: center;
}

/* Seule la grande icône du haut (enfant direct) : la loupe du bouton « Rechercher » gardait sinon 3 rem, en rouge sur rouge. */
.kmb-notfound > .kmb-icon {
	inline-size: 3rem;
	block-size: 3rem;
	color: var(--kmb-brand-600);
}

.kmb-notfound .kmb-search {
	justify-content: center;
	inline-size: 100%;
	max-inline-size: 32rem;
}

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

/* Page d'une annonce expirée ou archivée (F-PAY-11, L4-12b) : le nom du commerce sous le titre, et, pour son propriétaire, le bandeau « Renouveler ». */
.kmb-expired__name {
	margin: 0;
	color: var(--kmb-ink-900);
	font-family: var(--kmb-font-heading);
	font-size: var(--kmb-fs-h3);
	font-weight: var(--kmb-fw-semibold);
	overflow-wrap: anywhere;
}

.kmb-expired__owner {
	inline-size: 100%;
	max-inline-size: 40rem;
	margin: 0;
	text-align: start;
}

/* ---------- Article et archive ---------- */

.kmb-article {
	max-inline-size: calc(var(--kmb-width-text) + var(--kmb-space-8));
	padding-block: var(--kmb-space-6);
}

.kmb-article__title {
	margin: var(--kmb-space-4) 0 var(--kmb-space-2);
	font-family: var(--kmb-font-heading);
	font-size: var(--kmb-fs-h1);
	line-height: 1.15;
}

.kmb-article__meta {
	margin-block-end: var(--kmb-space-5);
	color: var(--kmb-ink-600);
	font-size: var(--kmb-fs-small);
}

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

.kmb-article__image img {
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--kmb-radius-lg);
	box-shadow: var(--kmb-shadow-md);
}

.kmb-article__content {
	max-inline-size: var(--kmb-width-text);
	font-size: var(--kmb-fs-body);
	line-height: var(--kmb-lh-body);
}

.kmb-archive {
	padding-block: var(--kmb-space-6);
}

/* Couvertures des articles (tools/brand/covers.mjs) : 1 200 × 630, texte écrit sur l'image. Au format 3:2 des cartes, le bord gauche du
   texte était rogné ; les cartes d'article gardent donc le format de la couverture. */
.kmb-card--article .kmb-card__photo {
	aspect-ratio: 40 / 21;
}

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

.kmb-pagination a,
.kmb-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--kmb-tap);
	min-inline-size: var(--kmb-tap);
	padding-inline: var(--kmb-space-3);
	border: 1px solid var(--kmb-line-200);
	border-radius: var(--kmb-radius-pill);
	color: var(--kmb-ink-900);
	font-weight: var(--kmb-fw-medium);
	text-decoration: none;
	transition: background-color var(--kmb-dur) var(--kmb-ease);
}

.kmb-pagination a:hover {
	background: var(--kmb-surface-100);
}

.kmb-pagination .current,
.kmb-pagination [aria-current="page"] {
	border-color: transparent;
	background: var(--kmb-brand-600);
	color: var(--kmb-surface-0);
	font-weight: var(--kmb-fw-semibold);
}

/* ---------- Pages de contenu : largeur, titre et texte courant ---------- */

.kmb-container--prose {
	max-inline-size: calc(var(--kmb-width-text) + 2 * var(--kmb-space-4));
}

.kmb-page .kmb-container {
	padding-block: var(--kmb-space-5) var(--kmb-space-7);
}

/* Bandeau de titre : fond doux, motif de points en coin, titre qui se lève (même esprit que l'accueil). */
.kmb-page__head {
	position: relative;
	overflow: clip;
	background: linear-gradient(180deg, var(--kmb-brand-50), var(--kmb-surface-0));
}

.kmb-page__head::after {
	content: "";
	position: absolute;
	inset: var(--kmb-space-4) var(--kmb-space-3) auto auto;
	inline-size: 7rem;
	block-size: 5.75rem;
	background: url("../img/motifs/dots.svg") no-repeat center / contain;
	pointer-events: none;
}

.kmb-page .kmb-page__head .kmb-container {
	position: relative;
	z-index: 1;
	padding-block: var(--kmb-space-5) var(--kmb-space-3);
}

.kmb-page .kmb-page__body {
	padding-block-start: var(--kmb-space-4);
}

.kmb-page__title {
	animation: kmb-rise 700ms var(--kmb-ease) backwards;
}

@media (max-width: 639px) {
	.kmb-page__head::after {
		display: none;
	}
}

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

body .kmb-page__title,
body .kmb-home-hero h1 {
	margin: var(--kmb-space-4) 0 var(--kmb-space-5);
	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;
}

.kmb-prose {
	color: var(--kmb-ink-900);
	font-size: var(--kmb-fs-body);
	line-height: var(--kmb-lh-body);
}

.kmb-prose h2,
.kmb-prose h3 {
	margin: var(--kmb-space-6) 0 var(--kmb-space-3);
	color: var(--kmb-ink-900);
	font-family: var(--kmb-font-heading);
	font-weight: var(--kmb-fw-bold);
	letter-spacing: -0.02em;
	line-height: 1.2;
}

/* Même sur une page large, un paragraphe ne dépasse pas une ligne confortable à lire (72 caractères) ; les cartes et
   tableaux, eux, gardent toute la largeur. */
.kmb-prose > p,
.kmb-prose > ul,
.kmb-prose > ol,
.kmb-prose > h2,
.kmb-prose > h3 {
	max-inline-size: var(--kmb-width-text);
}

.kmb-prose h2 {
	font-size: var(--kmb-fs-h2);
}

.kmb-prose h3 {
	font-size: var(--kmb-fs-h3);
}

.kmb-prose p,
.kmb-prose ul,
.kmb-prose ol {
	margin: 0 0 var(--kmb-space-4);
}

.kmb-prose ul,
.kmb-prose ol {
	padding-inline-start: var(--kmb-space-5);
}

/* Seulement les liens de texte : les boutons et composants (.kmb-btn, .kmb-chip…) gardent leurs propres couleurs. */
.kmb-prose a:not([class]) {
	color: var(--kmb-brand-600);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.kmb-prose a:not([class]):hover {
	color: var(--kmb-brand-700);
	text-decoration-thickness: 2px;
}

.kmb-prose blockquote {
	margin: var(--kmb-space-5) 0;
	padding: var(--kmb-space-4) var(--kmb-space-5);
	border-inline-start: 4px solid var(--kmb-brand-600);
	border-radius: 0 var(--kmb-radius-md) var(--kmb-radius-md) 0;
	background: var(--kmb-surface-50);
	color: var(--kmb-ink-900);
}

.kmb-prose img {
	max-inline-size: 100%;
	block-size: auto;
	border-radius: var(--kmb-radius-md);
}

.kmb-prose hr {
	margin-block: var(--kmb-space-6);
	border: 0;
	border-block-start: 1px solid var(--kmb-line-200);
}

.kmb-home-hero .kmb-search {
	inline-size: 100%;
	max-inline-size: 36rem;
}

/* Document légal : version, date et sommaire */

.kmb-legal-meta {
	margin: 0 0 var(--kmb-space-5);
	color: var(--kmb-ink-600);
	font-size: var(--kmb-fs-small);
}

.kmb-toc-wrap {
	margin-block-end: var(--kmb-space-6);
	padding: var(--kmb-space-4) var(--kmb-space-5);
	border: 1px solid var(--kmb-line-200);
	border-radius: var(--kmb-radius-md);
	background: var(--kmb-surface-50);
	box-shadow: var(--kmb-shadow-sm);
}

body .kmb-toc-title {
	margin: 0 0 var(--kmb-space-2);
	font: var(--kmb-fw-semibold) var(--kmb-fs-body) / 1.3 var(--kmb-font-heading);
}

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

.kmb-toc__item {
	padding-block: var(--kmb-space-1);
}

.kmb-toc__item--3 {
	margin-inline-start: var(--kmb-space-4);
	list-style-type: circle;
}

.kmb-toc a {
	color: var(--kmb-brand-600);
}

.kmb-prose [id] {
	scroll-margin-block-start: calc(var(--kmb-header-h) + var(--kmb-space-4));
}

/* ---------- État « aucun résultat » et suggestions ---------- */

.kmb-suggest {
	max-inline-size: 40rem;
	margin-inline: auto;
}

body .kmb-suggest__heading {
	margin: 0;
	color: var(--kmb-ink-900);
	font-family: var(--kmb-font-heading);
	font-size: var(--kmb-fs-h3);
}

.kmb-suggest__tips {
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--kmb-ink-600);
}

body .kmb-suggest__title {
	margin: 0 0 var(--kmb-space-2);
	font: var(--kmb-fw-semibold) var(--kmb-fs-body) / 1.3 var(--kmb-font-body);
}

.kmb-suggest__merchants {
	display: grid;
	gap: var(--kmb-space-3);
	justify-items: center;
	margin: 0;
	color: var(--kmb-ink-600);
}

.kmb-search-results .kmb-search {
	margin-block-end: var(--kmb-space-5);
}

/* ---------- Blog : filtres, partage, appel à l'action, articles liés ---------- */

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

@media (max-width: 639.98px) {
	/* Sur téléphone, le bouton passe sous le champ : toute la largeur, comme la recherche de l'accueil. */
	.kmb-archive__search .kmb-btn {
		flex: 1 1 100%;
	}

	/* Fil d'Ariane d'un article : le titre, juste en dessous, répète la dernière étape ; sur téléphone elle coupait le fil en deux
	   lignes. Masquée à l'écran seulement : les lecteurs d'écran la lisent toujours. */
	.kmb-article .kmb-breadcrumb [aria-current="page"] {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

.kmb-archive__filters {
	justify-content: flex-start;
	margin-block-end: var(--kmb-space-5);
}

.kmb-chip[aria-current="page"] {
	background: var(--kmb-brand-50);
	border-color: var(--kmb-brand-600);
	color: var(--kmb-brand-600);
}

.kmb-share {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--kmb-space-3);
	margin-block: var(--kmb-space-6);
}

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

.kmb-cta-block {
	display: grid;
	gap: var(--kmb-space-4);
	justify-items: center;
	text-align: center;
	margin-block: var(--kmb-space-6);
	padding: var(--kmb-space-6) var(--kmb-space-5);
	border-radius: var(--kmb-radius-lg);
	background: var(--kmb-gradient-soft);
	box-shadow: inset 0 0 0 1px var(--kmb-brand-100);
}

body .kmb-cta-block h2,
body .kmb-related h2 {
	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-related {
	margin-block-start: var(--kmb-space-7);
}

/* Dans la colonne de lecture, deux cartes au plus par ligne : à trois, une carte faisait 140 px de large. */
.kmb-related .kmb-grid {
	--kmb-cols: 1;
	margin-block-start: var(--kmb-space-4);
}

@media (min-width: 640px) {
	.kmb-related .kmb-grid {
		--kmb-cols: 2;
	}
}

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
	.kmb-header__bar,
	.kmb-header__logo-img {
		transition: none;
	}
}

/* Bouton flottant « Aide sur WhatsApp » : bureau seulement (sur téléphone, la barre basse suffit) */
.kmb-wa-float {
	display: none;
}

@media (min-width: 1024px) {
	.kmb-wa-float {
		position: fixed;
		inset-block-end: var(--kmb-space-5);
		inset-inline-end: var(--kmb-space-5);
		z-index: 8000;
		display: inline-flex;
		align-items: center;
		gap: var(--kmb-space-2);
		min-block-size: var(--kmb-tap);
		padding: var(--kmb-space-2) var(--kmb-space-4);
		border-radius: var(--kmb-radius-pill);
		background: var(--kmb-whatsapp);
		box-shadow: var(--kmb-shadow-lg);
		color: var(--kmb-surface-0);
		font: var(--kmb-fw-semibold) var(--kmb-fs-small) / 1 var(--kmb-font-body);
		text-decoration: none;
		transition: transform var(--kmb-dur) var(--kmb-ease), filter var(--kmb-dur) var(--kmb-ease);
	}

	.kmb-wa-float:hover {
		filter: brightness(0.92);
		transform: translateY(-2px);
	}

	.kmb-wa-float:focus-visible {
		outline: 3px solid var(--kmb-ink-900);
		outline-offset: 2px;
	}
}

/* ---------- Bandeau de consentement (L2-09) ---------- */

/* Téléphone : la carte se pose au-dessus de la barre basse, jamais dessus. Bureau : coin bas gauche (le bouton WhatsApp est à droite). */
.kmb-consent {
	position: fixed;
	inset-inline: var(--kmb-space-3);
	inset-block-end: calc(var(--kmb-bottomnav-h) + env(safe-area-inset-bottom) + var(--kmb-space-3));
	z-index: 9500;
	max-block-size: 70vh;
	overflow-y: auto;
	padding: var(--kmb-space-4);
	border: 1px solid var(--kmb-line-200);
	border-radius: var(--kmb-radius-lg);
	background: var(--kmb-surface-0);
	box-shadow: var(--kmb-shadow-lg);
	color: var(--kmb-ink-900);
	font-family: var(--kmb-font-body);
}

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

.kmb-consent__title {
	margin: 0 0 var(--kmb-space-2);
	font: var(--kmb-fw-bold) 1.125rem / 1.3 var(--kmb-font-heading);
}

.kmb-consent__text {
	margin: 0 0 var(--kmb-space-4);
	font-size: var(--kmb-fs-small);
	line-height: 1.5;
}

.kmb-consent__text a {
	color: var(--kmb-brand-600);
	text-decoration: underline;
}

.kmb-consent__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--kmb-space-3);
}

.kmb-consent:focus-within {
	outline: 3px solid var(--kmb-ink-900);
	outline-offset: 2px;
}

@media (min-width: 768px) {
	.kmb-consent {
		inset-inline: var(--kmb-space-5) auto;
		inset-block-end: var(--kmb-space-5);
		inline-size: 26rem;
	}
}

/* Bouton de recherche : loupe et libellé alignés. */
.kmb-search__submit {
	gap: var(--kmb-space-2);
}

/* Rangée de puces (catégories du héros, filtres du blog, suggestions) : partagée par plusieurs pages. */
.kmb-home-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--kmb-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kmb-home-chips .kmb-chip {
	border-color: var(--kmb-line-200);
	text-decoration: none;
}

/* ---------- Recherche de l'annuaire : « Que cherchez-vous ? » + « Où ? » + suggestions (search.js) ---------- */

.kmb-search--directory {
	flex-direction: column;
	flex-wrap: nowrap;
	gap: var(--kmb-space-2);
}

.kmb-search__field {
	position: relative;
	flex: 1 1 0;
	min-inline-size: 0;
}

.kmb-search--directory .kmb-input {
	inline-size: 100%;
	padding-inline: 2.75rem var(--kmb-space-4);
}

.kmb-search__icon {
	position: absolute;
	inset-block: 0;
	inset-inline-start: var(--kmb-space-4);
	z-index: 1;
	display: flex;
	align-items: center;
	color: var(--kmb-brand-600);
	pointer-events: none;
}

.kmb-search__icon svg {
	inline-size: 1.15rem;
	block-size: 1.15rem;
}

.kmb-search__field--where .kmb-input {
	padding-inline-end: 3.25rem;
}

.kmb-search__near {
	position: absolute;
	inset-block: 0;
	inset-inline-end: var(--kmb-space-2);
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.5rem;
	margin-block: auto;
	block-size: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--kmb-brand-50);
	color: var(--kmb-brand-600);
	cursor: pointer;
	transition: background var(--kmb-dur) var(--kmb-ease);
}

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

.kmb-search__near:hover {
	background: var(--kmb-surface-100);
}

.kmb-search__near svg {
	inline-size: 1.15rem;
	block-size: 1.15rem;
}

.kmb-combo {
	position: absolute;
	inset: calc(100% + var(--kmb-space-2)) 0 auto;
	z-index: 30;
	max-block-size: 20rem;
	margin: 0;
	padding: var(--kmb-space-2);
	overflow-y: auto;
	border: 1px solid var(--kmb-line-200);
	border-radius: var(--kmb-radius-lg);
	background: var(--kmb-surface-0);
	box-shadow: var(--kmb-shadow-lg);
	list-style: none;
	text-align: start;
}

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

.kmb-combo li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kmb-space-3);
	min-block-size: var(--kmb-tap);
	padding: var(--kmb-space-2) var(--kmb-space-3);
	border-radius: var(--kmb-radius-md);
	color: var(--kmb-ink-900);
	cursor: pointer;
}

.kmb-combo li[aria-selected="true"],
.kmb-combo li:hover {
	background: var(--kmb-brand-50);
}

.kmb-combo__type {
	flex: none;
	padding: 0.1rem var(--kmb-space-2);
	border-radius: var(--kmb-radius-pill);
	background: var(--kmb-surface-100);
	color: var(--kmb-ink-600);
	font-size: var(--kmb-fs-small);
}

.kmb-search--directory .kmb-search__submit {
	justify-content: center;
}

/* Bureau : un seul bloc arrondi, les deux champs côte à côte. */
@media (min-width: 768px) {
	.kmb-search--directory {
		flex-direction: row;
		align-items: center;
	}

	.kmb-search--directory .kmb-search__field + .kmb-search__field {
		border-inline-start: 1px solid var(--kmb-line-200);
	}

	.kmb-search--directory .kmb-search__submit {
		flex: none;
	}
}

/* ---------- Le site d'abord léger (prompt de lancement, section 4) ---------- */

/* Bandeau ajouté par le service worker sur une page enregistrée, servie sans réseau (sw.js, withBanner). Fixé en haut, au-dessus de
   l'en-tête (lui aussi fixé), qui descend de la hauteur du bandeau avec son espace réservé : sinon le bandeau cacherait le logo et le
   menu. Hauteur connue : deux lignes sur téléphone, une au-delà de 640 px (les trois textes de sw.js y tiennent). */
:root:has(.kmb-offline-banner) {
	--kmb-offline-h: 2.75rem;
}

@media (min-width: 640px) {
	:root:has(.kmb-offline-banner) {
		--kmb-offline-h: 2.25rem;
	}
}

.kmb-offline-banner {
	position: fixed;
	inset: 0 0 auto;
	z-index: 9001;
	display: flex;
	align-items: center;
	justify-content: center;
	block-size: var(--kmb-offline-h);
	padding: 0 var(--kmb-space-4);
	overflow: hidden;
	background: var(--kmb-ink-900);
	color: var(--kmb-surface-0);
	font-size: 0.875rem;
	line-height: 1.3;
	text-align: center;
	text-wrap: balance;
}

body:has(.kmb-offline-banner) .kmb-header {
	inset-block-start: var(--kmb-offline-h);
}

body:has(.kmb-offline-banner) .kmb-header-spacer {
	block-size: calc(var(--kmb-header-h) + var(--kmb-offline-h));
}

/* Proposition d'installation : dans le pied de page, à la deuxième visite seulement (pwa.js), jamais par-dessus le contenu. */
.kmb-install {
	align-self: stretch;
	padding: var(--kmb-space-4);
	border-radius: var(--kmb-radius-md);
	background: rgb(255 255 255 / 0.06);
	text-align: center;
	animation: kmb-rise var(--kmb-reveal-dur) var(--kmb-reveal-ease) backwards;
}

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

/* « Plus tard » sur le fond sombre du pied de page : contour clair, pas le bouton blanc des fonds clairs. */
.kmb-install .kmb-btn--secondary {
	border-color: rgb(255 255 255 / 0.45);
	background: transparent;
	color: var(--kmb-surface-0);
}

.kmb-install .kmb-btn--secondary:hover {
	border-color: var(--kmb-surface-0);
	background: rgb(255 255 255 / 0.08);
	color: var(--kmb-surface-0);
}

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

.kmb-install__text {
	margin: 0 0 var(--kmb-space-3);
	color: var(--kmb-surface-0);
}

.kmb-install__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--kmb-space-3);
	margin: 0;
}

/* Bouton « Économiser mes données » : même allure que « Gérer mes cookies », état lisible (coché ou non). */
.kmb-footer__light {
	margin: 0;
}

.kmb-footer__light-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--kmb-space-2);
	min-block-size: var(--kmb-tap);
	padding: 0;
	border: 0;
	background: none;
	color: var(--kmb-line-200);
	font: inherit;
	text-underline-offset: 0.2em;
	cursor: pointer;
	transition: color var(--kmb-dur) var(--kmb-ease);
}

.kmb-footer__light-toggle::before {
	content: "";
	inline-size: 2.25rem;
	block-size: 1.25rem;
	border-radius: var(--kmb-radius-pill);
	background: var(--kmb-ink-600) radial-gradient(circle at 0.625rem 50%, var(--kmb-surface-0) 0.4375rem, transparent 0.5rem);
	transition: background-position var(--kmb-dur) var(--kmb-ease);
}

.kmb-footer__light-toggle[aria-pressed="true"]::before {
	background: var(--kmb-brand-600) radial-gradient(circle at 1.625rem 50%, var(--kmb-surface-0) 0.4375rem, transparent 0.5rem);
}

.kmb-footer__light-toggle:hover {
	color: var(--kmb-surface-0);
	text-decoration: underline;
}

/* Mode léger : polices du système (les polices du site ne sont alors jamais téléchargées), aucune image décorative. */
:root[data-kmb-light="1"] {
	--kmb-font-heading: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--kmb-font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Divi écrit aussi le nom de la police en dur (feuille du personnaliseur) : en mode léger, la police du système partout, sauf les
   icônes de Divi. Sans élément qui la demande, aucune police du site n'est téléchargée. */
/* stylelint-disable declaration-no-important -- la feuille du personnaliseur de Divi écrit la police en dur. */
:root[data-kmb-light="1"] body,
:root[data-kmb-light="1"] body *:not(.et-pb-icon) {
	font-family: var(--kmb-font-body) !important;
}
/* stylelint-enable declaration-no-important */

:root[data-kmb-light="1"] .kmb-motif,
:root[data-kmb-light="1"] .kmb-illustration {
	display: none;
}

:root[data-kmb-light="1"] .kmb-page__head::after {
	content: none;
}

/* Commerces similaires en mode léger : une liste de liens, sans photo (favorites.php). */
.kmb-similar__list {
	display: grid;
	gap: var(--kmb-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kmb-similar__list a {
	display: block;
	min-block-size: var(--kmb-tap);
	padding: var(--kmb-space-3) var(--kmb-space-4);
	border: 1px solid var(--kmb-line-200);
	border-radius: var(--kmb-radius-sm);
	color: var(--kmb-ink-900);
	text-decoration: none;
}

.kmb-similar__list a:hover {
	border-color: var(--kmb-brand-600);
}

.kmb-similar__list span {
	display: block;
	color: var(--kmb-ink-600);
	font-size: 0.875rem;
}

/* Écran réduit (publication, paiement, D-186) : pas de barre du bas, le bouton principal de l'écran reste visible. */
@media (max-width: 767px) {
	body.kmb-one-screen {
		padding-block-end: 0;
	}

	body.kmb-one-screen .kmb-bottomnav {
		display: none;
	}
}

/* Confirmation : un titre et deux boutons. */
.kmb-done {
	max-inline-size: 560px;
	margin-inline: auto;
	text-align: center;
}

.kmb-done__title {
	margin: 0 0 var(--kmb-space-4);
	color: var(--kmb-ink-900);
	font-size: 22px;
	font-weight: var(--kmb-fw-bold);
	line-height: 1.25;
}

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

.kmb-done__more {
	margin: 0;
}

/* Écran réduit : le titre de la page n'occupe pas la place du formulaire. */
.kmb-one-screen .kmb-breadcrumb {
	display: none;
}

.kmb-one-screen .kmb-page__head {
	padding-block: var(--kmb-space-2);
	background: none;
}

.kmb-one-screen .kmb-page__head::after {
	display: none;
}

body.kmb-one-screen .kmb-page__title {
	margin: 0;
	font-size: 22px;
}

/* ---- modern.css ---- */
/* Composants de mise en page « 2026 » partagés par tout le site (C-064) : rythme des espaces, bandes de page, cartes, étapes, FAQ,
   appel à l'action, listes déroulantes, mouvement. Chargée partout après layout.css. Jetons --kmb-… uniquement.
   Règles de mouvement : transform et opacity seulement, rien si prefers-reduced-motion, contenu visible sans JavaScript. */

:root {
	/* Rythme vertical commun : deux blocs d'une page sont toujours séparés par ces valeurs, jamais par un chiffre au hasard. */
	--kmb-section-y: clamp(2.25rem, 1.6rem + 3vw, 4.5rem);
	--kmb-gap: clamp(1rem, 0.8rem + 1vw, 1.75rem);

	/* Flèche des listes déroulantes (voir « Listes déroulantes » plus bas). */
	--kmb-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	--kmb-chevron-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ce1126' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ---------- Transition entre pages : fondu doux, en-tête et pied de page restent en place ---------- */

@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}

	.kmb-header {
		view-transition-name: kmb-header;
	}

	::view-transition-old(root),
	::view-transition-new(root) {
		animation-duration: 240ms;
		animation-timing-function: var(--kmb-ease);
	}

	::view-transition-group(kmb-header) {
		animation: none;
	}
}

/* ---------- Barre de progression de lecture sous l'en-tête (là où le navigateur sait la lier au défilement) ---------- */

.kmb-header::after {
	content: "";
	position: absolute;
	inset: auto 0 -1px;
	block-size: 3px;
	background: var(--kmb-gradient-brand);
	transform: scaleX(0);
	transform-origin: left;
	pointer-events: none;
}

@keyframes kmb-progress {
	to {
		transform: scaleX(1);
	}
}

@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.kmb-header::after {
			animation: kmb-progress linear both;
			animation-timeline: scroll(root);
		}
	}
}

/* ---------- Bande de page : fond pleine largeur dans une page en colonne ---------- */

.kmb-page {
	overflow-x: clip;
}

.kmb-band {
	position: relative;
	margin-inline: calc(50% - 50vw);
	padding: var(--kmb-section-y) calc(50vw - 50%);
}

.kmb-band--soft {
	background: var(--kmb-surface-50);
}

.kmb-band--brand {
	background: var(--kmb-gradient-soft);
}

.kmb-band--dark {
	background: var(--kmb-ink-900);
	color: var(--kmb-line-200);
}

body .kmb-band h2,
body .kmb-band h3 {
	margin: 0 0 var(--kmb-space-3);
	color: var(--kmb-ink-900);
	font-family: var(--kmb-font-heading);
	font-weight: var(--kmb-fw-bold);
	letter-spacing: -0.02em;
	line-height: 1.15;
}

body .kmb-band h2 {
	font-size: var(--kmb-fs-h2);
}

body .kmb-band h3 {
	font-size: var(--kmb-fs-h3);
}

body .kmb-band--dark h2,
body .kmb-band--dark h3 {
	color: var(--kmb-surface-0);
}

.kmb-band__head {
	max-inline-size: 46rem;
	margin-block-end: var(--kmb-space-6);
}

.kmb-band__head > p {
	margin: 0;
	color: var(--kmb-ink-600);
	font-size: 1.125rem;
	line-height: var(--kmb-lh-body);
}

.kmb-band--dark .kmb-band__head > p {
	color: var(--kmb-line-200);
}

/* Petit titre au-dessus d'un titre : trait de couleur puis mot en capitales. */
.kmb-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--kmb-space-2);
	margin: 0 0 var(--kmb-space-3);
	color: var(--kmb-brand-600);
	font: var(--kmb-fw-bold) var(--kmb-fs-small) / 1 var(--kmb-font-heading);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.kmb-eyebrow::before {
	content: "";
	inline-size: 2rem;
	block-size: 3px;
	border-radius: var(--kmb-radius-pill);
	background: var(--kmb-accent-400);
}

.kmb-band--dark .kmb-eyebrow {
	color: var(--kmb-accent-400);
}

/* Mot géant en filigrane derrière le titre. */
.kmb-band[data-watermark]::before {
	content: attr(data-watermark);
	position: absolute;
	inset-block-start: var(--kmb-space-3);
	inset-inline-end: 0;
	color: color-mix(in srgb, var(--kmb-line-200) 40%, transparent);
	font: var(--kmb-fw-bold) clamp(3.5rem, 9vw, 6.5rem) / 1 var(--kmb-font-heading);
	letter-spacing: -0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}

.kmb-band--soft[data-watermark]::before {
	color: color-mix(in srgb, var(--kmb-line-200) 70%, transparent);
}

.kmb-band--dark[data-watermark]::before {
	color: color-mix(in srgb, var(--kmb-surface-0) 7%, transparent);
}

.kmb-band > * {
	position: relative;
}

/* WordPress ajoute des paragraphes vides autour des codes courts : ils ne doivent pas creuser les cartes. */
.kmb-band p:empty,
.kmb-cta-card p:empty {
	display: none;
}

/* Texte d'introduction : plus grand, plus doux. */
body .kmb-lead {
	max-inline-size: 46rem;
	margin: 0 0 var(--kmb-space-6);
	color: var(--kmb-ink-600);
	font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.35rem);
	line-height: 1.55;
}

/* ---------- Cartes d'arguments : .kmb-feature-grid > .kmb-feature ---------- */

body .kmb-feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
	gap: var(--kmb-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

body .kmb-feature-grid > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kmb-feature {
	display: grid;
	align-content: start;
	gap: var(--kmb-space-3);
	block-size: 100%;
	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-sm);
	transition: transform 300ms var(--kmb-ease), box-shadow 300ms var(--kmb-ease), border-color 300ms var(--kmb-ease);
}

.kmb-feature:hover {
	border-color: var(--kmb-brand-100);
	box-shadow: var(--kmb-shadow-lg);
	transform: translateY(-6px);
}

body .kmb-feature h3 {
	margin: 0;
}

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

.kmb-feature .kmb-iconbadge {
	display: inline-grid;
	place-items: center;
	inline-size: 3rem;
	block-size: 3rem;
	border-radius: var(--kmb-radius-sm);
	background: var(--kmb-brand-50);
	color: var(--kmb-brand-600);
	transition: background 300ms var(--kmb-ease), color 300ms var(--kmb-ease), transform 300ms var(--kmb-ease);
}

.kmb-feature:hover .kmb-iconbadge {
	background: var(--kmb-gradient-brand);
	color: var(--kmb-surface-0);
	transform: rotate(-6deg) scale(1.08);
}

.kmb-iconbadge svg {
	inline-size: 1.5rem;
	block-size: 1.5rem;
}

.kmb-band--dark .kmb-feature {
	border-color: color-mix(in srgb, var(--kmb-surface-0) 16%, transparent);
	background: color-mix(in srgb, var(--kmb-surface-0) 8%, transparent);
	box-shadow: none;
}

body .kmb-band--dark .kmb-feature h3 {
	color: var(--kmb-surface-0);
}

.kmb-band--dark .kmb-feature p {
	color: var(--kmb-line-200);
}

/* ---------- Points forts avec coche : liste en cartes sur deux colonnes ---------- */

body .kmb-checklist {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
	gap: var(--kmb-space-3);
	margin: 0 0 var(--kmb-space-5);
	padding: 0;
	list-style: none;
}

body .kmb-checklist li {
	display: flex;
	align-items: flex-start;
	gap: var(--kmb-space-3);
	margin: 0;
	padding: var(--kmb-space-4);
	border: 1px solid var(--kmb-line-200);
	border-radius: var(--kmb-radius-md);
	background: var(--kmb-surface-0);
	transition: border-color var(--kmb-dur) var(--kmb-ease), transform 300ms var(--kmb-ease);
}

body .kmb-checklist li:hover {
	border-color: var(--kmb-success-600);
	transform: translateX(4px);
}

.kmb-checklist li::before {
	position: static;
	flex: none;
	display: grid;
	place-items: center;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	margin-block-start: 0.1rem;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--kmb-success-600) 14%, var(--kmb-surface-0));
	color: var(--kmb-success-600);
	content: "✓";
	font-weight: var(--kmb-fw-bold);
	transform: none;
}

/* ---------- Étapes : cartes numérotées avec un grand chiffre ---------- */

.kmb-band > .kmb-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: var(--kmb-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kmb-band > .kmb-steps li {
	position: relative;
	margin: 0;
	padding: var(--kmb-space-5);
	padding-block-start: var(--kmb-space-7);
	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-band > .kmb-steps li:hover {
	box-shadow: var(--kmb-shadow-lg);
	transform: translateY(-6px);
}

.kmb-band > .kmb-steps li::before {
	inset-block-start: calc(var(--kmb-space-5) * -1);
	inset-inline-start: var(--kmb-space-5);
	inline-size: 3rem;
	block-size: 3rem;
	background: var(--kmb-gradient-brand);
	box-shadow: var(--kmb-shadow-brand);
	font-size: 1.25rem;
}

.kmb-band > .kmb-steps strong {
	display: block;
	margin-block-end: var(--kmb-space-2);
	color: var(--kmb-ink-900);
	font-family: var(--kmb-font-heading);
	font-size: 1.125rem;
}

/* ---------- Questions fréquentes : une carte par question, la flèche se retourne ---------- */

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

details.kmb-faq {
	border: 1px solid var(--kmb-line-200);
	border-radius: var(--kmb-radius-md);
	background: var(--kmb-surface-0);
	transition: border-color var(--kmb-dur) var(--kmb-ease), box-shadow 300ms var(--kmb-ease);
}

details.kmb-faq:hover {
	border-color: var(--kmb-brand-100);
}

details.kmb-faq[open] {
	border-color: var(--kmb-brand-600);
	box-shadow: var(--kmb-shadow-md);
}

details.kmb-faq summary {
	justify-content: space-between;
	text-wrap: balance;
	gap: var(--kmb-space-4);
	padding: var(--kmb-space-3) var(--kmb-space-5);
	list-style: none;
}

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

details.kmb-faq summary::after {
	content: "";
	flex: none;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	background: var(--kmb-brand-600);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 300ms var(--kmb-ease);
}

details.kmb-faq[open] summary::after {
	transform: rotate(180deg);
}

details.kmb-faq p {
	margin: 0;
	padding: 0 var(--kmb-space-5) var(--kmb-space-4);
	animation: kmb-rise 400ms var(--kmb-ease) backwards;
}

/* ---------- Grand bloc d'appel à l'action ---------- */

.kmb-cta-card {
	position: relative;
	display: grid;
	justify-items: center;
	gap: var(--kmb-space-4);
	overflow: hidden;
	isolation: isolate;
	padding: var(--kmb-space-8) var(--kmb-space-5);
	border-radius: var(--kmb-radius-xl);
	background: var(--kmb-gradient-brand);
	box-shadow: var(--kmb-shadow-lg);
	color: var(--kmb-surface-0);
	text-align: center;
}

.kmb-cta-card::before,
.kmb-cta-card::after {
	content: "";
	position: absolute;
	z-index: -1;
	background: no-repeat center / contain;
	pointer-events: none;
}

.kmb-cta-card::before {
	inset: auto auto -1rem 1rem;
	inline-size: 7rem;
	block-size: 10.5rem;
	background-image: url("../img/motifs/leaf.svg");
	animation: kmb-float 9s ease-in-out infinite;
}

.kmb-cta-card::after {
	inset: 1rem 1rem auto auto;
	inline-size: 7rem;
	block-size: 5.75rem;
	background-image: url("../img/motifs/dots.svg");
	opacity: 0.6;
}

body .kmb-cta-card h2 {
	margin: 0;
	color: var(--kmb-surface-0);
}

.kmb-cta-card p {
	max-inline-size: 36rem;
	margin: 0;
	color: var(--kmb-brand-50);
	font-size: 1.125rem;
}

.kmb-cta-card .kmb-btn {
	background: var(--kmb-surface-0);
	color: var(--kmb-brand-600);
}

.kmb-cta-card .kmb-btn:hover {
	background: var(--kmb-accent-400);
	color: var(--kmb-ink-900);
}

/* ---------- Deux colonnes : texte et illustration ---------- */

.kmb-split {
	display: grid;
	gap: var(--kmb-space-6);
	align-items: center;
}

.kmb-split--top {
	align-items: start;
}

/* Téléphone : les points décoratifs du grand bloc d'appel passeraient sur le titre. */
@media (max-width: 639px) {
	.kmb-cta-card::after {
		display: none;
	}

	.kmb-cta-card {
		padding-block: var(--kmb-space-7);
	}
}

@media (min-width: 900px) {
	.kmb-split {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		gap: var(--kmb-space-8);
	}

	.kmb-split--faq {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	}
}

/* Deux bandes de même fond qui se suivent : la seconde n'ajoute pas de marge en haut. */
.kmb-band--flush-top {
	padding-block-start: 0;
}

/* ---------- Page « en préparation » : l'avis de la page remplace l'encadré gris ---------- */

.kmb-prose > .kmb-alert--info[role="note"] {
	flex-direction: column;
	align-items: center;
	gap: var(--kmb-space-4);
	max-inline-size: 40rem;
	margin-inline: auto;
	padding: var(--kmb-space-8) var(--kmb-space-5);
	border: 2px dashed var(--kmb-line-200);
	border-radius: var(--kmb-radius-lg);
	background: var(--kmb-surface-50);
	box-shadow: none;
	color: var(--kmb-ink-600);
	font-size: 1.125rem;
	text-align: center;
}

.kmb-prose > .kmb-alert--info[role="note"]::before {
	content: "";
	inline-size: 3.5rem;
	block-size: 3.5rem;
	background: var(--kmb-brand-600);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Pied de page : plus de marge propre quand la page se termine par une bande ---------- */

body:has(.kmb-band) .kmb-page__body {
	padding-block-end: 0;
}

body:has(.kmb-band) .kmb-footer {
	margin-block-start: 0;
}

/* Sur ces pages, le bouton « retour en haut » reste dans le pied de page : il ne recouvre plus le dernier bloc. */
body:has(.kmb-band) .kmb-footer a.kmb-totop {
	inset-block-start: var(--kmb-space-3);
	transform: translate(-50%, 0);
}

body:has(.kmb-band) .kmb-footer a.kmb-totop:hover {
	transform: translate(-50%, -4px);
}

/* ---------- Bandeau de titre : le trait jaune se dessine sous le titre ---------- */

.kmb-page__title::after {
	content: "";
	display: block;
	inline-size: 4.5rem;
	block-size: 6px;
	margin-block-start: var(--kmb-space-4);
	border-radius: var(--kmb-radius-pill);
	background: var(--kmb-accent-400);
	transform-origin: left;
	animation: kmb-grow 800ms var(--kmb-ease) 300ms backwards;
}

@keyframes kmb-float {
	50% {
		transform: translateY(-0.75rem) rotate(3deg);
	}
}

@keyframes kmb-grow {
	from {
		transform: scaleX(0);
	}
}

.kmb-page__head::after {
	animation: kmb-float 9s ease-in-out infinite;
}

/* ---------- Listes déroulantes : une seule apparence pour tous les menus de choix du site ---------- */

/* Flèche des listes natives (couleur du texte secondaire, puis couleur de marque au focus). Les listes de Directorist (compte,
   formulaire d'annonce) en étaient privées : elles gardaient la flèche du navigateur, d'un système à l'autre différente.
   Les listes Select2 (cachées, remplacées par leur propre boîte) et les listes à choix multiples sont exclues. */
select.kmb-input,
.kmb-select,
body .directorist-form-group.directorist-form-group select:not([multiple], .select2-hidden-accessible) {
	padding-inline-end: 2.75rem;
	background: var(--kmb-surface-0) var(--kmb-chevron) no-repeat right 1rem center / 1.15rem;
	appearance: none;
	cursor: pointer;
}

select.kmb-input:focus,
body .directorist-form-group.directorist-form-group select:not([multiple], .select2-hidden-accessible):focus {
	background-image: var(--kmb-chevron-active);
}

select.kmb-input option,
select.kmb-input optgroup,
body .directorist-form-group select option,
body .directorist-form-group select optgroup {
	color: var(--kmb-ink-900);
	font-family: var(--kmb-font-body);
}

/* ---------- Gestes : les boutons répondent au toucher et au survol ---------- */

.kmb-btn:hover {
	transform: translateY(-2px);
}

.kmb-btn:active {
	transform: translateY(0) scale(0.98);
}

/* Le bouton « Publier mon annonce » de l'en-tête attire l'œil : un reflet le traverse de temps en temps. */
.kmb-header__cta {
	position: relative;
	overflow: hidden;
}

.kmb-header__cta::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 38%) 50%, transparent 70%);
	transform: translateX(-130%);
	pointer-events: none;
}

@keyframes kmb-shine {
	0%,
	70% {
		transform: translateX(-130%);
	}

	100% {
		transform: translateX(130%);
	}
}

/* Le bouton d'aide arrive en rebondissant, puis se fait discret. */
@keyframes kmb-pop {
	0% {
		opacity: 0;
		transform: translateY(1.5rem) scale(0.8);
	}

	70% {
		transform: translateY(-0.25rem) scale(1.04);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.kmb-header__cta::after {
		animation: kmb-shine 7s ease-in-out 2.5s infinite;
	}

	.kmb-wa-float {
		animation: kmb-pop 700ms var(--kmb-ease) 2s backwards;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kmb-feature,
	.kmb-feature:hover,
	.kmb-feature:hover .kmb-iconbadge,
	.kmb-band > .kmb-steps li,
	.kmb-band > .kmb-steps li:hover,
	body .kmb-checklist li:hover,
	.kmb-btn:hover,
	.kmb-btn:active {
		transform: none;
	}

	.kmb-page__title::after,
	.kmb-page__head::after,
	.kmb-cta-card::before,
	details.kmb-faq p {
		animation: none;
	}
}