/* ==================================================================== *
 * KHOMPTA CLIENTS — pro.khompta.com
 *
 * Source : docs/conception/DIRECTION-ARTISTIQUE-PRO.md
 *
 * ⚠️ **LE SYSTÈME DE MARQUE DU GROUPE EST FIGÉ** : l'orange `#FF8B00` est
 * commun à toutes les marques, chacune portant la sienne à côté — `#0018c7`
 * pour khompta.com, **`#0D6E6E` pour Khompta Clients**.
 *
 * 🔴 **REGISTRE — la charte §10, relue le 2026-09-02.** « Registre retenu :
 * Qonto / Pennylane. Ni la rondeur excessive qui ferait application grand
 * public, ni les angles droits qui feraient logiciel d'entreprise. Arrondis
 * 8 à 12 px, ombres subtiles, espacements généreux, Figtree 800 sur les
 * titres. » **C'est le registre SaaS moderne**, et une première version l'a
 * sous-livré en le lisant comme « sobre ». *Une consigne orale qui traduit mal
 * un document écrit produit un écart que personne ne rattache à sa cause.*
 * ==================================================================== */

/* -------------------------------------------------------------------- *
 * 0. POLICE — FIGTREE SEULE, AUTO-HÉBERGÉE
 *
 * La hiérarchie vient de la GRAISSE et de la TAILLE, pas d'une seconde
 * famille : Poppins a été téléchargée, mesurée (26 772 o pour deux graisses
 * statiques), puis retirée avec ses fichiers.
 * -------------------------------------------------------------------- */

@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 300 900; /* plage variable */
	font-display: swap;
	src: url("../fonts/figtree-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;
}

@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("../fonts/figtree-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+2E00-2E7F, U+A720-A7FF;
}

/* -------------------------------------------------------------------- *
 * 1. JETONS
 *
 * ═══ LA GAMME, ÉTENDUE LE 2026-09-02 ═══
 *
 * Six pas de sarcelle et six gris, **tous dérivés — aucune couleur de marque
 * nouvelle**. La première version n'en avait que trois, ce qui ne suffit pas
 * à un langage de surfaces : sans tons intermédiaires, tout est soit plein,
 * soit blanc.
 *
 * ─── CONTRASTES MESURÉS, ET CE QU'ILS IMPOSENT ───
 *
 *     sarcelle 500 sur blanc .............. 6,05:1   OK
 *     sarcelle 500 sur sarcelle 50 ........ 5,57:1   OK
 *     blanc sur sarcelle 500 .............. 6,05:1   OK
 *     encre sur orange .................... 7,90:1   OK
 *     gris 700 sur blanc .................. 8,00:1   OK
 *     gris 500 sur sarcelle 50 ............ 4,46:1   🔴 SOUS 4,5
 *     gris 200 (#dfe4ec) sur blanc ........ 1,28:1   🔴 SOUS 3
 *
 * 🔴 **LE SECOND ROUGE TOUCHAIT LE FORMULAIRE, C'EST-À-DIRE LE BUT DE LA
 * PAGE.** Les champs de saisie portaient une bordure à **1,28:1**. Une
 * bordure décorative entre deux cartes n'a pas de seuil ; **la limite d'un
 * champ de saisie en a un** — c'est elle qui dit où écrire.
 * `--kh-bordure-champ` la porte à **3,49:1 sur blanc et 3,30:1 sur gris 50**,
 * les deux fonds où un champ apparaît.
 *
 * ⚠️ *Le premier rouge se corrige par l'usage, pas par la couleur* : le petit
 * texte sur fond teinté prend `--kh-encre-tenue` (5,32:1), pas un gris clair.
 * -------------------------------------------------------------------- */

:root {
	/* ── La marque, en six pas dérivés de #0D6E6E ── */
	--kh-marque-50: #f0f7f7;
	--kh-marque-100: #e6f2f2;
	--kh-marque-200: #c2dedd;
	--kh-marque-300: #8ec2c1;
	--kh-marque: #0d6e6e;        /* texte ET surface : 6,05:1 des deux côtés */
	--kh-marque-700: #0a5757;    /* survol — 8,35:1 sous du blanc */
	--kh-marque-900: #063c3c;

	/* ── L'orange du groupe — commun à toutes les marques ── */
	--kh-orange: #ff8b00;        /* surface uniquement, libellé ENCRE */
	--kh-orange-fonce: #d97400;
	--kh-orange-clair: #fff3e3;
	--kh-orange-texte: #b35f00;

	/*
	 * 🔴 **L'ÉTOILE DORÉE ÉCHOUE, ET AU MÊME CHIFFRE QUE LES BOUTONS.**
	 * `--kh-orange` rend **2,35:1** sur blanc. Une étoile porte de
	 * l'information : son seuil est 3:1. `--kh-orange-texte` rend **4,61:1**
	 * sur blanc et **4,37:1** sur le gris 50 — les deux fonds où elle paraît.
	 */
	--kh-etoile: var(--kh-orange-texte);
	--kh-etoile-contour: var(--kh-bordure-champ);  /* 4,61:1 sur blanc */

	/* ── Les gris ── */
	--kh-fond: #ffffff;
	--kh-gris-50: #f7f9fa;
	--kh-gris-100: #eef1f4;
	--kh-trait: #dfe4ec;         /* séparation DÉCORATIVE — sans seuil */
	--kh-bordure-champ: #7f8a9c; /* limite d'un champ — 3,49:1, seuil 3 */
	--kh-encre-tenue: #5f6674;   /* 5,32:1 même sur fond teinté */
	--kh-encre-douce: #47506a;
	--kh-encre: #10131c;

	/* ── États ── */
	--kh-succes: #0a5c46;
	--kh-alerte: #b42318;
	--kh-alerte-voile: #fdeceb;

	/*
	 * ═══ L'ÉCHELLE TYPOGRAPHIQUE, REFAITE LE 2026-09-02 ═══
	 *
	 * 🔴 **ELLE S'EFFONDRAIT PAR LE BAS, ET C'EST MESURÉ.** Avant : h1 48,
	 * h2 32, chiffre 32, h3 **17**, corps **17**. `h3` et le corps avaient
	 * **exactement la même taille** — seule la graisse les séparait — et un
	 * titre de section pesait autant qu'un montant.
	 *
	 * ➡️ Le chiffre passe **devant** le titre de section (56 contre 40) :
	 * c'est ce qui le fait claquer. Et `h3` reprend 4 px sur le corps, le
	 * minimum pour qu'un titre se voie sans être lu.
	 */
	--kh-t-h1: clamp(2.5rem, 1.6rem + 3.4vw, 4rem);        /* 40 → 64 */
	--kh-t-h2: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);     /* 28 → 40 */
	--kh-t-h3: 1.3125rem;                                  /* 21 */
	--kh-t-chiffre: clamp(2.5rem, 1.8rem + 2.4vw, 3.5rem); /* 40 → 56 */
	--kh-t-chapo: 1.25rem;                                 /* 20 */
	--kh-t-corps: 1.0625rem;                               /* 17 */
	--kh-t-petit: 0.875rem;                                /* 14 */

	--kh-police: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--kh-titre: var(--kh-police);
	--kh-g-normale: 400;
	--kh-g-moyenne: 500;
	--kh-g-forte: 800;

	/* ── Espacements — §10 : généreux ── */
	--kh-pas-1: 4px;
	--kh-pas-2: 8px;
	--kh-pas-3: 12px;
	--kh-pas-4: 16px;
	--kh-pas-5: 24px;
	--kh-pas-6: 32px;
	--kh-pas-7: 48px;
	--kh-pas-8: 64px;
	--kh-section: clamp(64px, 4vw + 40px, 112px);

	/* §10 : arrondis 8 à 12 px — on prend le HAUT de la fourchette. */
	--kh-rayon: 12px;
	--kh-rayon-large: 16px;
	--kh-largeur: 1180px;

	/* §10 : ombres SUBTILES. */
	--kh-ombre-1: 0 1px 2px rgb(16 19 28 / 5%);
	--kh-ombre-2: 0 8px 28px rgb(16 19 28 / 7%);
}

/* -------------------------------------------------------------------- *
 * 2. SOCLE
 * -------------------------------------------------------------------- */

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

body {
	margin: 0;
	font-family: var(--kh-police);
	font-size: var(--kh-t-corps);
	line-height: 1.65;
	color: var(--kh-encre-douce);
	background: var(--kh-fond);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--kh-titre);
	font-weight: var(--kh-g-forte);
	color: var(--kh-encre);
	line-height: 1.12;
	letter-spacing: -0.02em;
	margin: 0 0 var(--kh-pas-4);
	text-wrap: balance;
}

h1 { font-size: var(--kh-t-h1); }
h2 { font-size: var(--kh-t-h2); }

/*
 * ① **LES GRANDS TITRES NE SONT PLUS NOIRS — 2026-09-03.**
 *
 * `--kh-marque-900` rend **12,21:1 sur blanc**, 11,57:1 sur le gris 50 et
 * 11,26:1 sur la teinte sarcelle : les trois très au-dessus de 4,5. *Le choix
 * était esthétique, pas d'accessibilité* — c'est la mesure qui l'a établi
 * avant qu'il soit fait.
 *
 * ⚠️ **`h3` ET `h4` RESTENT EN ENCRE.** Les grands titres portent la marque,
 * les petits portent la lecture : trois niveaux en sarcelle effaceraient la
 * hiérarchie que la refonte du 2026-09-02 venait de rétablir.
 */
h1, h2 { color: var(--kh-marque-900); }
h3 { font-size: var(--kh-t-h3); line-height: 1.3; letter-spacing: -0.01em; }
h4 { font-size: 1.125rem; }

p { margin: 0 0 var(--kh-pas-4); }

a { color: var(--kh-marque); text-underline-offset: 3px; }
a:hover { color: var(--kh-marque-700); }

:focus-visible { outline: 3px solid var(--kh-marque); outline-offset: 3px; }

img, svg { max-width: 100%; height: auto; }

.kh-enveloppe {
	width: min(100% - 2 * var(--kh-pas-5), var(--kh-largeur));
	margin-inline: auto;
}

.kh-invisible {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.kh-evitement {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: var(--kh-pas-3) var(--kh-pas-4);
	background: var(--kh-marque);
	color: #fff;
	border-radius: 0 0 var(--kh-rayon) 0;
}

.kh-evitement:focus { left: 0; }

/*
 * ⚠️ **CE QUI MANQUE SE VOIT.** Un cadre vide et élégant laisserait croire
 * que la section est finie.
 */
.kh-manque {
	padding: var(--kh-pas-5);
	border: 2px dashed var(--kh-alerte);
	background: var(--kh-alerte-voile);
	color: var(--kh-alerte);
	font-weight: var(--kh-g-moyenne);
	border-radius: var(--kh-rayon);
	text-align: center;
}

/* -------------------------------------------------------------------- *
 * 3. LE MOUVEMENT — et ses trois gardes
 *
 * 🔴 **GARDE 1 — LE CONTENU EST VISIBLE SANS JAVASCRIPT.** L'état masqué
 * n'est appliqué que si le script a posé `kh-anime` sur `<html>`. *Une
 * révélation au défilement mal faite rend la page blanche quand le script
 * échoue, et personne ne le voit en développement — parce qu'en
 * développement, le script marche.*
 *
 * ⚠️ GARDE 2 — `prefers-reduced-motion` coupe tout (§15).
 * ⚠️ GARDE 3 — le premier écran n'est jamais animé : `.kh-hero` ne porte
 * aucune classe de révélation, pour ne pas retarder le LCP.
 * -------------------------------------------------------------------- */

.kh-anime .kh-revele {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 420ms ease, transform 420ms ease;
}

.kh-anime .kh-revele.kh-vu {
	opacity: 1;
	transform: none;
}

/* -------------------------------------------------------------------- *
 * 4. L'EN-TÊTE
 * -------------------------------------------------------------------- */

.kh-entete {
	position: sticky;
	top: 0;
	z-index: 20;
	background: rgb(255 255 255 / 88%);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--kh-trait);
}

.kh-entete__barre {
	display: flex;
	align-items: center;
	gap: var(--kh-pas-6);
	min-height: 72px;
}

.kh-entete__marque { display: inline-flex; align-items: center; }
.kh-entete__logo { display: block; height: 36px; width: auto; }

.kh-entete__logo--absent {
	font-weight: var(--kh-g-forte);
	letter-spacing: 0.08em;
	color: var(--kh-alerte);
	background: var(--kh-alerte-voile);
	padding: var(--kh-pas-2) var(--kh-pas-3);
	border-radius: var(--kh-rayon);
}

.kh-entete__nav { margin-inline-start: auto; }

.kh-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kh-pas-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kh-nav a {
	color: var(--kh-encre);
	text-decoration: none;
	font-weight: var(--kh-g-moyenne);
	font-size: var(--kh-t-corps);
}

.kh-nav a:hover,
.kh-nav .current-menu-item > a { color: var(--kh-marque); }

/* -------------------------------------------------------------------- *
 * 5. LES BOUTONS — §10 : pleins, bien lisibles
 * -------------------------------------------------------------------- */

.kh-bouton {
	display: inline-block;
	padding: 14px var(--kh-pas-5);
	border-radius: var(--kh-rayon);
	font-weight: var(--kh-g-moyenne);
	font-size: var(--kh-t-corps);
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease;
}

.kh-bouton--principal { background: var(--kh-marque); color: #fff; }
.kh-bouton--principal:hover { background: var(--kh-marque-700); color: #fff; }

/*
 * ⚠️ **LIBELLÉ EN ENCRE SUR L'ORANGE, ET C'EST MESURÉ.** Blanc sur orange
 * rend 2,35:1 — le réflexe est inaccessible. Encre sur orange rend 7,90:1.
 * Règle déjà tranchée par `khompta-2026`, transposée telle quelle.
 */
/*
 * 🔴 **LE LIBELLÉ RESTE EN ENCRE AU SURVOL — DÉCISION DU 2026-09-03.**
 *
 * Il passait en blanc sur `--kh-orange-fonce` : **3,26:1**, sous le seuil de
 * 4,5 exigé d'un texte. En encre il rend **5,70:1**. *Un état survolé est un
 * état à mesurer* — au repos la page était juste, et personne ne l'aurait vu.
 *
 * ⚠️ **LA MÊME CORRECTION EST POSÉE DANS `khompta-2026`**, au même endroit.
 * La refuser ici seulement aurait fait diverger les deux thèmes sur une règle
 * qui n'a aucune raison de différer. **Le sujet de la passe UX est refermé du
 * même coup : ne pas le rouvrir.**
 */
.kh-bouton--action { background: var(--kh-orange); color: var(--kh-encre); }
.kh-bouton--action:hover { background: var(--kh-orange-fonce); color: var(--kh-encre); }

.kh-entete__geste { white-space: nowrap; }
/* Le bouton « Menu » — caché tant que le script ne l'a pas révélé, et toujours au-dessus de 940 px. */
.kh-entete__menu {
	display: inline-flex;
	align-items: center;
	gap: var(--kh-pas-2);
	margin-inline-start: auto;
	padding: 10px var(--kh-pas-3);
	border: 1px solid var(--kh-trait);
	border-radius: var(--kh-rayon);
	background: transparent;
	color: var(--kh-encre);
	font: inherit;
	font-size: var(--kh-t-petit);
	font-weight: var(--kh-g-moyenne);
	cursor: pointer;
}
.kh-entete__menu[hidden] { display: none; }
.kh-entete__menu-trait { display: block; width: 18px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
.kh-entete__menu[aria-expanded="true"] .kh-entete__menu-trait { box-shadow: none; transform: rotate(45deg); }
@media (min-width: 941px) { .kh-entete__menu { display: none !important; } }
/*
 * Sous 480 px — mesuré le 2026-09-05 : le logo fait 5 pour 1 (viewBox 2250 × 450),
 * donc 180 px de large à 36 px de haut ; avec « Menu » (92 px) et le geste
 * (160 px) dans 327 px utiles, ça déborde de 130 px. Trois réductions : le logo
 * à 26 px (130 px de large), « Menu » réduit à son icône (le libellé reste lu
 * par les lecteurs d'écran), et le geste autorisé à passer sur deux lignes.
 */
@media (max-width: 480px) {
	.kh-entete__logo { height: 26px; }
	.kh-entete__barre { gap: var(--kh-pas-2); }
	.kh-entete__menu { padding: 10px; }
	.kh-entete__menu-libelle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	/* Le geste prend la place qui RESTE et y replie son texte : il ne peut plus déborder, quelle que soit la largeur. */
	/* `flex-basis: 0` : la barre est en `flex-wrap: wrap` (sous 940 px), et un geste à base « auto » forçait le passage à la ligne AVANT de rétrécir — mesuré dans le navigateur le 2026-09-05 : en-tête 99 px, geste seul sur sa ligne. À base 0, il ne demande rien et prend ce qui reste. */
	.kh-entete__geste { white-space: normal; text-align: center; line-height: 1.15; padding: 8px 12px; flex: 1 1 0; min-width: 0; }
}

/* -------------------------------------------------------------------- *
 * 6. LES SECTIONS — rythme et alternance
 *
 * ⚠️ **UN ESPACEMENT SEUL NE SÉPARE PAS, IL ÉLOIGNE.** L'alternance de fonds
 * fait voir le rythme au lieu de le laisser deviner.
 * -------------------------------------------------------------------- */

.kh-section { padding-block: var(--kh-section); }
/*
 * ⑤ **LA PAIRE — un titre à gauche, la matière à droite.**
 *
 * Deux sections courtes n'avaient qu'un titre et du texte pleine largeur :
 * rien ne disait à l'œil où commencer. *Elles reçoivent la MÊME classe, pas
 * deux mises en page jumelles* — deux formes qui se ressemblent divergent le
 * jour où l'une est retouchée.
 */
.kh-duo {
	display: grid;
	gap: var(--kh-pas-6) var(--kh-pas-8);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
	align-items: start;
}

.kh-duo > h2 { margin-bottom: 0; }

/* La variante où c'est la colonne de GAUCHE qui porte le texte. */
.kh-duo--large-gauche { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; }

/*
 * ═════════════════════════════════════════════════════════════════════════
 * LA COURBE — trois temps qui montent, sans un chiffre ni un axe
 * ═════════════════════════════════════════════════════════════════════════
 *
 * ⚠️ **LES LIBELLÉS SONT EN HTML, LE SVG NE PORTE AUCUN TEXTE.** Un `<text>`
 * SVG suit l'échelle du `viewBox` : les trois noms rétréciraient avec le dessin
 * au lieu de suivre la typographie de la page. *C'est l'argument qui m'avait
 * fait refuser le SVG pour le schéma de l'étape ② — il vaut ici dès que la
 * courbe porte du texte.*
 *
 * 🔴 **CONTRASTES, MESURÉS SUR LE FOND GRIS 50 DE LA SECTION.**
 *
 *     tracé et points  --kh-marque   #0d6e6e   5,73:1   (seuil 3)  ✅
 *     libellés         --kh-encre-douce         7,55:1   (seuil 4,5) ✅
 *     aire sous la courbe --kh-marque-100       1,05:1   DÉCORATIVE
 *
 * ⚠️ **L'AIRE EST DÉCLARÉE DÉCORATIVE, ET C'EST UN CHOIX.** Elle ne passerait
 * aucun seuil ; c'est le TRACÉ qui porte l'information, à 5,73:1. *Une aire
 * qu'on rendrait conforme deviendrait un aplat qui écraserait la courbe.*
 */
.kh-courbe {
	margin: 0;
	display: grid;
	gap: var(--kh-pas-4);
}

.kh-courbe__dessin {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/*
 * ⚠️ L'aire s'éteint vers le bas : un aplat laisserait une arête verticale à
 * droite, et *une arête verticale se lit comme un axe*. Le dégradé est déclaré
 * dans le SVG, ses arrêts pouvant y référencer les jetons du thème.
 */
.kh-courbe__aire { fill: url(#kh-courbe-aire); }

.kh-courbe__ligne {
	fill: none;
	stroke: var(--kh-marque);
	stroke-width: 3;
	stroke-linecap: round;
	/* ⚠️ Sans ceci, l'épaisseur du tracé suivrait l'échelle du viewBox. */
	vector-effect: non-scaling-stroke;
}

.kh-courbe__point { fill: var(--kh-marque); }

/* Le dernier point est le plus gros : c'est l'issue, comme dans le schéma. */
.kh-courbe__point--fin { fill: var(--kh-marque-900); }

/*
 * Les trois noms, alignés sous leur point : le premier à 20/320, le deuxième à
 * 160/320, le troisième à 300/320 — d'où gauche, centre, droite.
 */
.kh-courbe__noms {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--kh-pas-3);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--kh-t-petit);
	color: var(--kh-encre-douce);
}

.kh-courbe__noms li:nth-child(1) { text-align: start; }
.kh-courbe__noms li:nth-child(2) { text-align: center; }
.kh-courbe__noms li:nth-child(3) { text-align: end; }

/*
 * ⚠️ **LE TRACÉ NE SE DESSINE QU'AVEC LE SCRIPT, ET RESTE ENTIER SANS LUI.**
 * `.kh-anime` est posée par `revele.js` : sans JavaScript, aucune de ces règles
 * ne s'applique et la courbe est dessinée d'emblée. *Le contenu d'abord,
 * l'animation ensuite* — la garde 1 de la révélation, appliquée telle quelle.
 *
 * La longueur est déclarée à 400 : `pathLength` normaliserait, mais le tracé
 * mesure ~330 unités et 400 couvre la marge d'erreur sans laisser de reste
 * visible.
 */
.kh-anime .kh-courbe__ligne {
	stroke-dasharray: 400;
	stroke-dashoffset: 400;
	transition: stroke-dashoffset 900ms ease-out;
}

.kh-anime .kh-revele.kh-vu .kh-courbe__ligne,
.kh-anime .kh-vu .kh-courbe__ligne { stroke-dashoffset: 0; }

.kh-anime .kh-courbe__point {
	opacity: 0;
	transition: opacity 300ms ease-out;
}

.kh-anime .kh-vu .kh-courbe__point { opacity: 1; }

.kh-anime .kh-vu .kh-courbe__point:nth-of-type(2) { transition-delay: 350ms; }
.kh-anime .kh-vu .kh-courbe__point--fin { transition-delay: 700ms; }

/* ⑤b Les trois moments — des catégories, jamais des volumes. */
.kh-moments {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--kh-pas-4);
}

.kh-moments li {
	padding-inline-start: var(--kh-pas-5);
	border-inline-start: 3px solid var(--kh-marque-300);
	color: var(--kh-encre-douce);
	line-height: 1.5;
}

.kh-moments strong { color: var(--kh-marque-900); font-weight: var(--kh-g-forte); }

/*
 * ⑥ **LE SOMMAIRE — trois ancres, pas trois onglets.**
 *
 * ⚠️ **`scroll-margin-top` EST OBLIGATOIRE ICI** : l'en-tête est `sticky`, et
 * sans marge de défilement l'ancre atterrit DERRIÈRE lui. *Une ancre qui vise
 * juste et se cache sous la barre a exactement l'apparence d'une ancre
 * cassée.* Posée sur l'étape, pas sur le lien.
 */
.kh-sommaire {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kh-pas-3);
	margin: var(--kh-pas-6) 0 0;
	padding: 0;
	list-style: none;
}

.kh-sommaire a {
	display: inline-block;
	padding: 10px var(--kh-pas-4);
	background: var(--kh-fond);
	border: 1px solid var(--kh-marque-300);
	border-radius: 999px;
	font-size: var(--kh-t-petit);
	font-weight: var(--kh-g-moyenne);
	color: var(--kh-marque-900);
	text-decoration: none;
	transition: background-color 160ms ease, border-color 160ms ease;
}

.kh-sommaire a:hover,
.kh-sommaire a:focus-visible {
	background: var(--kh-marque-50);
	border-color: var(--kh-marque);
	color: var(--kh-marque-900);
}

.kh-etape { scroll-margin-top: 96px; }

html { scroll-behavior: smooth; }

.kh-section--teinte { background: var(--kh-gris-50); }
.kh-section--marque { background: var(--kh-marque-50); }

.kh-section__entete { margin-bottom: var(--kh-pas-7); }

/*
 * ⚠️ **LA LARGEUR DE LECTURE EST BRIDÉE, EN `ch`.** L'enveloppe fait
 * 1 180 px ; un paragraphe de 1 180 px ne se lit pas. `ch` suit la police,
 * donc la mesure reste juste si la taille change.
 */
.kh-chapo {
	max-width: 60ch;
	font-size: var(--kh-t-chapo);
	color: var(--kh-encre-douce);
	margin: 0;
}

.kh-intro { max-width: 66ch; color: var(--kh-encre-douce); margin: 0; }
.kh-intro strong,
.kh-chapo strong { color: var(--kh-encre); font-weight: var(--kh-g-moyenne); }

.kh-surtitre {
	display: block;
	margin-bottom: var(--kh-pas-3);
	font-size: var(--kh-t-petit);
	font-weight: var(--kh-g-forte);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kh-marque);
}

/* -------------------------------------------------------------------- *
 * 7. LE HERO — discours seul, jamais animé (garde 3)
 * -------------------------------------------------------------------- */

/*
 * ═════════════════════════════════════════════════════════════════════════
 * ② LA BANDE DU HERO — ET LE CHIFFRE QUI A DÉCIDÉ DE SA TEINTE
 * ═════════════════════════════════════════════════════════════════════════
 *
 * 🔴 **CE N'EST PAS `--kh-marque` QUI PORTE LA BANDE, ET CE N'EST PAS UN
 * GOÛT.** Le texte blanc passe sur la sarcelle de base (6,05:1), mais le
 * bouton orange n'y rend que **2,58:1** — sous le seuil de 3 exigé d'un
 * composant. *Un fond peut convenir au texte et pas à ce qu'on pose dessus.*
 *
 * `--kh-marque-700` est la teinte la plus CLAIRE qui satisfait les deux :
 *
 *     titre blanc                  8,35:1   (seuil 4,5)  ✅
 *     chapô  --kh-marque-200       5,88:1   (seuil 4,5)  ✅
 *     bouton orange sur la bande   3,56:1   (seuil 3)    ✅
 *     libellé encre sur orange     7,90:1   (seuil 4,5)  ✅
 *
 * ⚠️ **UN PIÈGE ÉCARTÉ PAR LA MESURE.** `--kh-marque-300` rend 4,23:1 sur la
 * bande — au-dessus de 3, donc « ça a l'air de passer ». Mais la mention de
 * l'Ordre est du texte de 14 px : son seuil est 4,5, et elle échoue. *Un seuil
 * appliqué au mauvais type d'élément donne un résultat qui a l'air juste.*
 */
.kh-hero {
	padding-block: clamp(64px, 5vw + 32px, 128px);
	background: var(--kh-marque-700);
}

.kh-hero__titre { color: #fff; }

.kh-hero__chapo { color: var(--kh-marque-200); }
.kh-hero__chapo strong { color: #fff; font-weight: var(--kh-g-moyenne); }

/*
 * ③ La rangée d'action : le bouton, puis la mention de l'Ordre à côté.
 * Elle se replie plutôt que de comprimer le bouton.
 */
.kh-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kh-pas-4);
}

/*
 * ⚠️ **UN LISERÉ, PARCE QUE LE SURVOL FAIT TOMBER LE FOND SOUS LE SEUIL.**
 * `--kh-orange-fonce` ne rend que **2,57:1** sur la bande : au survol, la
 * limite du bouton cesserait d'être perceptible. Le liseré clair donne au
 * bouton une frontière qui **ne dépend d'aucun état de son fond**.
 */
.kh-hero__geste {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.kh-hero__grille {
	display: grid;
	gap: var(--kh-pas-8);
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	align-items: center;
}

.kh-hero__titre { margin-bottom: var(--kh-pas-5); }
.kh-hero__chapo { margin-bottom: var(--kh-pas-6); }

.kh-hero__ordre {
	display: inline-flex;
	align-items: center;
	gap: var(--kh-pas-2);
	margin: 0;
	padding: var(--kh-pas-3) var(--kh-pas-4);
	background: var(--kh-marque-50);
	border: 1px solid var(--kh-marque-200);
	border-radius: 999px;
	font-size: var(--kh-t-petit);
	font-weight: var(--kh-g-moyenne);
	color: var(--kh-marque-900);
}

.kh-hero__figure { margin: 0; }

/*
 * ⚠️ **L'OMBRE PORTÉE EST REMPLACÉE PAR UN LISERÉ.** Une ombre ne se voit pas
 * sur un fond sombre : la photo flotterait sans limite. Le liseré blanc à 18 %
 * lui rend un bord. *Un effet qui disparaît avec le fond n'est pas une
 * décision de mise en page, c'est une décision qui a changé toute seule.*
 */
.kh-hero__photo {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--kh-rayon-large);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* -------------------------------------------------------------------- *
 * 8. LES CHIFFRES — grands, isolés, sans texte autour
 * -------------------------------------------------------------------- */

.kh-chiffres {
	display: grid;
	gap: var(--kh-pas-6);
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	margin-top: var(--kh-pas-7);
}

/* ══════════════════════════════════════════════════════════════════ *
 * 🔴 LA CARTE D UN CHIFFRE — Florian, 2026-09-11
 * ══════════════════════════════════════════════════════════════════ *
 *
 * *« C est notre argument le plus fort sur pro. — il mérite mieux qu une
 * liste. »*
 *
 * ⚠️ **LA DISPOSITION ÉTAIT DÉJÀ JUSTE.** Mesuré sur la page servie : quatre
 * colonnes de 271 px, même hauteur, même ligne. Ce qui manquait était la
 * surface — `background: transparent`, `border: 0`, `border-radius: 0`,
 * `padding: 0`. *Quatre chiffres alignés sans rien autour se lisent comme une
 * ligne de texte.*
 *
 * ⚠️ **BLANC SUR LE GRIS DE LA SECTION.** La section porte
 * `kh-section--teinte`, c est-à-dire `--kh-gris-50` (#f7f9fa). Une carte
 * blanche s y détache ; une carte grise s y fondrait, et le contour seul
 * ferait quatre rectangles vides.
 *
 * ⚠️ **LA MENTION DE SOURCE RESTE DEHORS.** Elle porte sur les quatre
 * chiffres, pas sur un seul : la mettre dans une carte la rattacherait au
 * dernier. *Une source déplacée dans une carte change ce qu elle source.*
 */
.kh-chiffre {
	display: flex;
	flex-direction: column;
	gap: var(--kh-pas-2);
	padding: var(--kh-pas-6);
	background: var(--kh-fond);
	border: 1px solid var(--kh-trait);
	border-radius: var(--kh-rayon-large);
	box-shadow: var(--kh-ombre-1);
}

/* ⚠️ Le filet de marque en tête : il signe la carte sans y ajouter de
 * couleur de fond, et il reprend le trait des cartes d étapes de khompta.com. */
.kh-chiffre { position: relative; overflow: hidden; }

.kh-chiffre::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--kh-marque), var(--kh-orange));
}

/* ⚠️ **LA LÉGENDE N EST PLUS BORNÉE À 24 CARACTèRES.** Dans une carte de
 * 271 px, `max-width: 24ch` laissait une colonne plus étroite que la carte :
 * le texte se coupait plus tôt que le contour, et la carte semblait vide à
 * droite. La carte borne désormais la ligne, ce qui est son rôle. */
.kh-chiffre .kh-chiffre__quoi { max-width: none; }

.kh-chiffre__valeur {
	font-size: var(--kh-t-chiffre);
	font-weight: var(--kh-g-forte);
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--kh-marque);
	margin: 0 0 var(--kh-pas-2);
}

.kh-chiffre__quoi {
	margin: 0;
	font-size: var(--kh-t-corps);
	color: var(--kh-encre-douce);
	max-width: 24ch;
}

.kh-source {
	margin-top: var(--kh-pas-7);
	margin-bottom: 0;
	font-size: var(--kh-t-petit);
	color: var(--kh-encre-tenue);
}

/*
 * ⚠️ **L'AGRÉGAT EST DÉTACHÉ DES QUATRE CHIFFRES.** Collé à eux, le seul
 * chiffre non vérifiable les affaiblirait tous.
 */
.kh-agregat {
	margin-top: var(--kh-pas-5);
	margin-bottom: 0;
	padding-top: var(--kh-pas-5);
	border-top: 1px solid var(--kh-trait);
	font-size: var(--kh-t-petit);
	color: var(--kh-encre-tenue);
}

/* -------------------------------------------------------------------- *
 * 9. LES ÉTAPES — trois blocs alternés, photo à droite puis à gauche
 * -------------------------------------------------------------------- */

.kh-etapes { display: grid; gap: var(--kh-section); margin: 0; padding: 0; list-style: none; }

.kh-etape {
	display: grid;
	gap: var(--kh-pas-8);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
}

.kh-etape:nth-child(even) .kh-etape__figure { order: -1; }

/*
 * ⑩ **LE SCHÉMA DU PARCOURS — trois temps, et le troisième est l'issue.**
 *
 * Il occupe la colonne du visuel : l'alternance des étapes s'applique donc
 * d'elle-même. *Une forme qui réutilise la place d'une autre n'a pas besoin
 * d'une règle de mise en page à elle.*
 *
 * ⚠️ **LES FLÈCHES SONT DES TRIANGLES CSS, SANS CONTENU.** L'ordre est porté
 * par le `<ol>` ; les flèches ne font que le montrer. Un `content: "▼"` serait
 * annoncé par certains lecteurs d'écran comme du texte.
 *
 * 🔴 **DEUX COULEURS RÉFLEXES ÉCARTÉES PAR LA MESURE.** La bordure des cartes
 * en `--kh-marque-200` rendait **1,42:1**, et les flèches en `--kh-marque-300`
 * **1,97:1** : *les flèches portent l'enchaînement, donc l'information — leur
 * seuil est 3, pas zéro.* Retenus : bordure `--kh-bordure-champ` **3,49:1**,
 * flèches `--kh-marque` **6,05:1**.
 */
.kh-schema {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	align-content: center;
}

.kh-schema__temps {
	position: relative;
	padding: var(--kh-pas-5);
	background: var(--kh-marque-50);
	border: 1px solid var(--kh-bordure-champ);
	border-radius: var(--kh-rayon-large);
}

/* La flèche : un triangle, posé dans la gouttière entre deux temps. */
.kh-schema__temps + .kh-schema__temps { margin-top: var(--kh-pas-7); }

.kh-schema__temps + .kh-schema__temps::before {
	content: "";
	position: absolute;
	inset-inline-start: 50%;
	top: calc(-1 * var(--kh-pas-6));
	width: 0;
	height: 0;
	transform: translateX(-50%);
	border-inline: 9px solid transparent;
	border-top: 12px solid var(--kh-marque);
}

.kh-schema__titre {
	margin: 0 0 var(--kh-pas-2);
	font-weight: var(--kh-g-forte);
	color: var(--kh-marque-900);
}

.kh-schema__texte {
	margin: 0;
	color: var(--kh-encre-douce);
	line-height: 1.5;
}

.kh-schema__champs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kh-pas-2);
	margin: var(--kh-pas-3) 0 0;
	padding: 0;
	list-style: none;
}

.kh-schema__champs li {
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--kh-marque-100);
	color: var(--kh-encre);
	font-size: var(--kh-t-petit);
}

.kh-schema__compte {
	margin: var(--kh-pas-4) 0 0;
	font-size: var(--kh-t-petit);
	color: var(--kh-encre-tenue);
}

/*
 * ⚠️ **LE TROISIÈME TEMPS EST PLEIN, ET C'EST LE SUJET.** Le parcours aboutit
 * au cabinet : si les trois cartes se ressemblent, la page raconte encore une
 * formalité. Blanc sur `--kh-marque-900` : **12,21:1**.
 */
.kh-schema__temps--issue {
	background: var(--kh-marque-900);
	border-color: var(--kh-marque-900);
}

.kh-schema__temps--issue .kh-schema__titre { color: #fff; }
.kh-schema__temps--issue .kh-schema__texte { color: var(--kh-marque-200); }

/*
 * ⑩ Le parcours réellement rempli. Deux colonnes : la liste des champs se lit
 * en balayage, pas en lecture suivie.
 */
.kh-parcours {
	margin-top: var(--kh-pas-6);
	padding: var(--kh-pas-6);
	background: var(--kh-marque-50);
	border-radius: var(--kh-rayon-large);
}

.kh-parcours__titre {
	margin: 0 0 var(--kh-pas-4);
	font-weight: var(--kh-g-forte);
	color: var(--kh-marque-900);
}

.kh-parcours__liste {
	display: grid;
	gap: var(--kh-pas-3) var(--kh-pas-6);
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.kh-parcours__liste li {
	padding-inline-start: var(--kh-pas-5);
	position: relative;
	color: var(--kh-encre-douce);
	line-height: 1.5;
}

/*
 * ⚠️ La coche est un caractère décoratif : `aria-hidden` n'existe pas sur un
 * pseudo-élément, mais `content` n'est pas lu par les lecteurs d'écran de la
 * même façon qu'un texte. Le sens est porté par le mot « obligatoire ».
 */
.kh-parcours__liste li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.55em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--kh-marque-300);
}

.kh-parcours__requis::before { background: var(--kh-marque); }

.kh-parcours__requis span {
	margin-inline-start: var(--kh-pas-2);
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--kh-marque-100);
	color: var(--kh-marque-900);
	font-size: 0.8125rem;
	white-space: nowrap;
}

.kh-parcours__releve {
	margin: var(--kh-pas-5) 0 0;
	font-size: var(--kh-t-petit);
	color: var(--kh-encre-tenue);
}

/* La capture qui remplace une photographie garde la place de la photographie. */
.kh-etape__figure.kh-capture { margin: 0; }

.kh-etape__rang {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: var(--kh-pas-4);
	border-radius: 50%;
	background: var(--kh-marque);
	color: #fff;
	font-size: 1.125rem;
	font-weight: var(--kh-g-forte);
}

.kh-etape__titre { margin-bottom: var(--kh-pas-3); }
.kh-etape p { max-width: 52ch; margin: 0; }

.kh-etape__figure { margin: 0; }

.kh-etape__photo {
	display: block;
	width: 100%;
	max-width: 720px;
	height: auto;
	border-radius: var(--kh-rayon-large);
	box-shadow: var(--kh-ombre-2);
}

/* -------------------------------------------------------------------- *
 * 10. LES CARTES — refus, produits, avis, captures
 * -------------------------------------------------------------------- */

.kh-grille {
	display: grid;
	gap: var(--kh-pas-5);
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	margin-top: var(--kh-pas-7);
}

/*
 * ⑧ **LE MANIFESTE — un refus en pleine largeur, quatre en 2 × 2.**
 *
 * ⚠️ **LA GRILLE DES QUATRE EST FIXÉE À DEUX COLONNES ICI**, et non laissée en
 * `auto-fit` : à 1 180 px, `minmax(340px, 1fr)` en produisait **trois**, et le
 * 2 × 2 exact — la raison d'être de cette mise en page — n'existait que sur
 * certaines largeurs. *Une disposition qui dépend de la largeur n'est pas une
 * disposition, c'est une coïncidence.*
 */
.kh-manifeste {
	margin-top: var(--kh-pas-7);
	padding: var(--kh-pas-7);
	background: var(--kh-marque-900);
	border-radius: var(--kh-rayon-large);
}

/* Blanc sur marque-900 : 12,21:1. Marque-200 pour le corps : 8,74:1. */
.kh-manifeste__titre {
	font-size: var(--kh-t-h2);
	color: #fff;
	margin-bottom: var(--kh-pas-4);
}

.kh-manifeste__texte {
	max-width: 62ch;
	margin: 0;
	font-size: var(--kh-t-chapo);
	color: var(--kh-marque-200);
}

.kh-manifeste__texte strong { color: #fff; font-weight: var(--kh-g-moyenne); }

.kh-refus .kh-grille--deux { grid-template-columns: repeat(2, 1fr); }

/* ⑪ Les étoiles. */
.kh-etoiles {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	vertical-align: middle;
}

.kh-etoile { display: block; }

.kh-avis__note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kh-pas-2) var(--kh-pas-3);
	margin: var(--kh-pas-6) 0 0;
	color: var(--kh-encre-tenue);
	font-size: var(--kh-t-petit);
}

.kh-avis__note strong { font-size: var(--kh-t-corps); color: var(--kh-encre); }

.kh-avis__releve {
	margin: var(--kh-pas-2) 0 0;
	font-size: var(--kh-t-petit);
	color: var(--kh-encre-tenue);
}

.kh-grille--trois { grid-template-columns: repeat(3, 1fr); }
.kh-grille--deux { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

/*
 * ⚠️ **UNE GRILLE À UN SEUL ENFANT NE LAISSE PAS SA MOITIÉ VIDE.** Sur la page
 * Web, la section des avis porte UNE carte : dans une grille à deux colonnes,
 * elle laissait un trou à droite — *un trou n'est pas une absence assumée,
 * c'est une panne apparente* (règle posée sur l'étape ② de l'accueil). L'enfant
 * unique prend toute la largeur, bridé à une mesure de lecture.
 */
.kh-grille--deux > :only-child { grid-column: 1 / -1; max-width: 66ch; }

.kh-carte {
	display: flex;
	flex-direction: column;
	padding: var(--kh-pas-6);
	background: var(--kh-fond);
	border: 1px solid var(--kh-trait);
	border-radius: var(--kh-rayon-large);
	box-shadow: var(--kh-ombre-1);
	/*
	 * ⚠️ **PAS DE `transform` AU SURVOL.** Un fond qui s'éclaircit et une
	 * bordure qui se renforce suffisent à dire « cliquable ». *Une carte qui
	 * se soulève est une animation ; une carte qui change de fond est un
	 * retour.*
	 */
	transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.kh-carte:hover,
.kh-carte:focus-within {
	background: var(--kh-marque-50);
	border-color: var(--kh-marque-200);
	box-shadow: var(--kh-ombre-2);
}

.kh-carte__titre { font-size: var(--kh-t-h3); margin-bottom: var(--kh-pas-3); }
.kh-carte__texte { color: var(--kh-encre-douce); flex-grow: 1; margin: 0; }

/*
 * La situation que couvre une formule, sous son nom — « Pour un cabinet qui
 * n'a pas encore de site ». *Les formules portent le nom de la situation du
 * cabinet, pas d'un niveau de produit* (décision du 21 août).
 * Encre tenue sur blanc : 5,32:1 mesuré sur teinte, davantage sur blanc.
 */
.kh-carte__quand {
	margin: calc(-1 * var(--kh-pas-2)) 0 var(--kh-pas-3);
	font-size: var(--kh-t-petit);
	font-weight: var(--kh-g-moyenne);
	color: var(--kh-encre-tenue);
}

/* Les refus — bordure de marque à gauche, le registre Doctolib. */
.kh-refus .kh-carte { border-left: 3px solid var(--kh-marque); }

/* Les produits. */
/*
 * ③ **LE LOGO PORTE LE NOM, IL N'EST PLUS UNE VIGNETTE.** Le titre noir qui le
 * doublait a été retiré : un nom de marque n'a aucune valeur de recherche, et
 * *un titre sous un logo répète ce que le logo dit déjà.* 30 px → 44 px.
 */
.kh-produit__logo { display: block; height: 44px; width: auto; margin-bottom: var(--kh-pas-5); }

.kh-produit--ici { background: var(--kh-marque-50); border-color: var(--kh-marque-200); }

.kh-produit__lien {
	margin-top: var(--kh-pas-4);
	font-weight: var(--kh-g-moyenne);
	text-decoration: none;
}

.kh-produit__lien:hover { text-decoration: underline; }

.kh-produit__ici {
	margin: var(--kh-pas-4) 0 0;
	font-weight: var(--kh-g-moyenne);
	color: var(--kh-marque);
}

/*
 * Le portfolio — une capture cliquable, le nom du cabinet et l'hôte du site.
 * ⚠️ L'hôte est affiché : *un lien dont on ne voit pas la destination demande
 * un acte de foi* ; le nom de domaine dit où l'on va avant de cliquer.
 */
.kh-portfolio {
	padding: 0;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
}

.kh-portfolio img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: top;
	border-bottom: 1px solid var(--kh-trait);
}

.kh-portfolio__nom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--kh-pas-2);
	padding: var(--kh-pas-4) var(--kh-pas-5);
	font-weight: var(--kh-g-forte);
	color: var(--kh-marque-900);
}

.kh-portfolio__hote {
	font-weight: var(--kh-g-normale);
	font-size: var(--kh-t-petit);
	color: var(--kh-encre-tenue);
}

.kh-portfolio:hover .kh-portfolio__nom { color: var(--kh-marque); }

/* Les avis. */
.kh-avis__carte { margin: 0; }
.kh-avis__texte { color: var(--kh-encre-douce); font-size: var(--kh-t-chapo); line-height: 1.5; }
.kh-avis__qui { font-size: var(--kh-t-petit); color: var(--kh-encre-tenue); }
.kh-avis__qui strong { color: var(--kh-encre); }

.kh-avis__source {
	display: inline-block;
	margin-inline-start: var(--kh-pas-2);
	padding: 2px var(--kh-pas-2);
	background: var(--kh-marque-100);
	color: var(--kh-marque-900);
	border-radius: 999px;
	font-size: 0.8125rem;
}

.kh-avis__lien { margin: var(--kh-pas-6) 0 0; }

/* Les captures. */
.kh-capture { margin: 0; }

.kh-capture img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--kh-trait);
	border-radius: var(--kh-rayon-large);
	box-shadow: var(--kh-ombre-2);
}

/* -------------------------------------------------------------------- *
 * 11. LE FORMULAIRE
 * -------------------------------------------------------------------- */

/*
 * 🔴 **LE VIDE QUE FLORIAN VOYAIT N'ÉTAIT PAS CELUI QUE J'AVAIS CORRIGÉ.**
 *
 * Sous le bouton, dans la boîte : **49 px pour un rembourrage de 48** — réglé.
 * Mais la colonne de gauche mesure **459 px** quand la boîte en fait **966** :
 * il restait **507 px** de vide sous le texte. *Deux vides voisins, et j'avais
 * mesuré le petit.*
 *
 * ⚠️ **IL EST RÉPARTI, PAS COMBLÉ.** Ajouter du texte pour remplir aurait
 * ramené les arguments écartés en ④ — « gratuit », « sans engagement », les
 * 1 500 cabinets. `align-items: center` distribue l'écart de part et d'autre
 * sans rien inventer.
 */
.kh-demande__grille {
	display: grid;
	gap: var(--kh-pas-8);
	grid-template-columns: minmax(0, 1fr) minmax(360px, 0.85fr);
	align-items: center;
}

.kh-demande__boite {
	padding: var(--kh-pas-7);
	background: var(--kh-fond);
	border: 1px solid var(--kh-trait);
	border-radius: var(--kh-rayon-large);
	box-shadow: var(--kh-ombre-2);
}

/*
 * ④ Ce qui se passe après le clic. Le filet d'accent aligne le bloc sur les
 * « trois moments » de la section ⑧ : une seule forme pour une seule intention.
 */
.kh-rassure {
	display: grid;
	gap: var(--kh-pas-4);
	margin: var(--kh-pas-7) 0 0;
	padding: 0;
	list-style: none;
	max-width: 56ch;
}

.kh-rassure li {
	padding-inline-start: var(--kh-pas-5);
	border-inline-start: 3px solid var(--kh-marque-300);
	color: var(--kh-encre-douce);
	line-height: 1.5;
}

.kh-rassure strong { color: var(--kh-marque-900); font-weight: var(--kh-g-forte); }

.kh-demande__titre { font-size: var(--kh-t-h3); margin-bottom: var(--kh-pas-5); }
.kh-demande__photo { display: block; width: 100%; max-width: 720px; height: auto; border-radius: var(--kh-rayon-large); margin-top: var(--kh-pas-6); }

.wpcf7 label {
	display: block;
	margin-bottom: var(--kh-pas-5);
	font-weight: var(--kh-g-moyenne);
	font-size: var(--kh-t-petit);
	color: var(--kh-encre);
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
	display: block;
	width: 100%;
	margin-top: var(--kh-pas-2);
	padding: 13px var(--kh-pas-4);
	/* ⚠️ 16 px MINIMUM : en dessous, iOS zoome au focus. */
	font-size: 16px;
	font-family: inherit;
	font-weight: var(--kh-g-normale);
	color: var(--kh-encre);
	/*
	 * 🔴 **UNE BORDURE DE CHAMP A UN SEUIL, UNE SÉPARATION DÉCORATIVE N'EN A
	 * PAS.** `--kh-trait` rendait 1,28:1 : la limite du champ — ce qui dit où
	 * écrire — était imperceptible. `--kh-bordure-champ` rend 3,49:1.
	 */
	border: 1px solid var(--kh-bordure-champ);
	border-radius: var(--kh-rayon);
	background: var(--kh-fond);
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus {
	border-color: var(--kh-marque);
	box-shadow: 0 0 0 3px var(--kh-marque-100);
	outline: none;
}

/*
 * ⑤ **LE VIDE SOUS LE BOUTON — MESURÉ, PAS ESTIMÉ.**
 *
 * Sur la page servie : **98 px entre le bas du bouton et le bord de la boîte**,
 * pour un rembourrage de 48. Décomposé au pixel en encadrant chaque boîte :
 * 33 px entre le bouton et la fin du bloc `.wpcf7`, puis 65 px jusqu'au bord.
 * *L'écart venait des marges du bloc CF7, pas du rembourrage de la boîte.*
 *
 * ⚠️ **ET LA ZONE DE RÉPONSE OCCUPE LA PLACE MÊME QUAND ELLE EST VIDE.** CF7 ne
 * la masque que si le formulaire porte `.init`, une classe **posée par son
 * JavaScript**. Sans JS, ou avant son exécution, elle réserve ses marges.
 */
.kh-demande__boite .wpcf7,
.kh-demande__boite .wpcf7 form { margin-bottom: 0; }

/*
 * 🔴 **MA PREMIÈRE CORRECTION N'A RIEN CHANGÉ, ET LA MESURE A DIT POURQUOI.**
 * `form > *:last-child` désigne la zone de réponse de CF7, pas le paragraphe du
 * bouton. Les 96 px se décomposent, géométrie du navigateur à l'appui :
 *
 *     31 px  l'interligne SOUS un `input` en `inline-block`
 *     16 px  la marge basse du <p>, qui s'échappe du bloc et s'ajoute au
 *            rembourrage au lieu de tomber dedans
 *     48 px  le rembourrage de la boîte — le seul qui soit voulu
 *
 * *Deux corrections plausibles auraient laissé le vide en place.* Le bouton
 * passe en `block` — il n'y a plus de ligne, donc plus d'interligne — et le
 * paragraphe qui le porte perd sa marge basse.
 */
.kh-demande__boite .wpcf7 input[type="submit"] { display: block; }

.kh-demande__boite .wpcf7 p:last-of-type { margin-bottom: 0; }
.kh-demande__boite .wpcf7 p:has( input[type="submit"] ) { margin-bottom: 0; }

/*
 * 🔴 **ET IL RESTAIT 31 px QUE `display: block` N'A PAS ENLEVÉS.** Je les avais
 * attribués à l'interligne du bouton en `inline-block` : *l'explication était
 * plausible, et fausse.* Le bouton passé en `block`, les 31 px sont restés —
 * c'est **la roue d'attente que CF7 insère par son JavaScript** après le
 * bouton, en `visibility: hidden` : invisible, mais elle occupe sa place, et
 * désormais sa propre ligne.
 *
 * Elle disparaît de la mise en page au repos et revient pendant l'envoi :
 * *retirer un retour d'attente coûterait plus que le vide qu'il crée.*
 */
.kh-demande__boite .wpcf7-spinner { display: none; }
.kh-demande__boite form.submitting .wpcf7-spinner { display: inline-block; }

/*
 * La zone de réponse : sans marge quand elle ne dit rien, et lisible quand elle
 * parle. *Une erreur muette perd le prospect* — règle héritée de `khompta-2026`.
 */
.kh-demande__boite .wpcf7-response-output {
	margin: var(--kh-pas-4) 0 0;
	padding: var(--kh-pas-3) var(--kh-pas-4);
	border: 1px solid var(--kh-trait);
	border-radius: var(--kh-rayon);
	font-size: var(--kh-t-petit);
	color: var(--kh-encre);
}

.kh-demande__boite form.init .wpcf7-response-output,
.kh-demande__boite form.resetting .wpcf7-response-output,
.kh-demande__boite form.submitting .wpcf7-response-output { display: none; }

.wpcf7 .wpcf7-list-item { margin: 0; }

.wpcf7 .wpcf7-acceptance .wpcf7-list-item-label,
.wpcf7 .wpcf7-checkbox .wpcf7-list-item-label {
	font-size: var(--kh-t-petit);
	font-weight: var(--kh-g-normale);
	color: var(--kh-encre-tenue);
	line-height: 1.5;
}

.wpcf7 input[type="submit"] {
	width: 100%;
	margin-top: var(--kh-pas-5);
	padding: 15px var(--kh-pas-5);
	font-size: var(--kh-t-corps);
	font-weight: var(--kh-g-moyenne);
	font-family: inherit;
	/* Encre sur orange : 7,90:1. Blanc sur orange échouerait à 2,35:1. */
	background: var(--kh-orange);
	color: var(--kh-encre);
	border: 0;
	border-radius: var(--kh-rayon);
	cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease;
}

/*
 * 🔴 **CELUI-CI, JE L'AVAIS RATÉ EN CORRIGEANT L'AUTRE.** Le 2026-09-03 j'ai
 * corrigé `.kh-bouton--action:hover` **dans ce fichier** et laissé ce
 * survol-ci à 3,26:1, deux cents lignes plus bas. *Corriger « le survol » au
 * lieu de corriger la FAMILLE laisse toujours le membre qu'on n'a pas en tête.*
 * Trouvé par un balayage de toutes les règles à fond orange, les deux thèmes.
 */
.wpcf7 input[type="submit"]:hover { background: var(--kh-orange-fonce); color: var(--kh-encre); }

/* -------------------------------------------------------------------- *
 * 12. LE FIL DES RESSOURCES ET LA PAGE GÉNÉRIQUE
 * -------------------------------------------------------------------- */

.kh-fil,
.kh-page { padding-block: var(--kh-section); }

.kh-fil__liste {
	display: grid;
	gap: var(--kh-pas-5);
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.kh-carte__date { color: var(--kh-encre-tenue); font-size: var(--kh-t-petit); margin-bottom: var(--kh-pas-3); }

.kh-vide {
	padding: var(--kh-pas-8);
	text-align: center;
	color: var(--kh-encre-tenue);
	background: var(--kh-gris-50);
	border-radius: var(--kh-rayon-large);
}

.kh-page__entete { margin-bottom: var(--kh-pas-7); }
.kh-prose { max-width: 68ch; }
.kh-prose h2 { margin-top: var(--kh-pas-8); }
.kh-prose h3 { margin-top: var(--kh-pas-7); }
.kh-prose ul,
.kh-prose ol { padding-inline-start: var(--kh-pas-5); }
.kh-prose li { margin-bottom: var(--kh-pas-2); }
/* Les articles migrés (2026-09-03) : contenu Gutenberg venu de khompta.com */
.kh-prose img, .kh-prose figure { max-width: 100%; height: auto; }
.kh-prose figure { margin: var(--kh-pas-6) 0; }
.kh-prose figcaption { color: var(--kh-encre-tenue); font-size: var(--kh-t-petit); }
.kh-prose p { margin-bottom: var(--kh-pas-4); }
.kh-article__figure { margin: 0 0 var(--kh-pas-7); }
.kh-article__figure img { width: 100%; height: auto; border-radius: var(--kh-rayon, 12px); }
.kh-article__fil { margin-bottom: var(--kh-pas-3); }
.kh-article__fil a { color: var(--kh-marque-200); }
.kh-hero--article .kh-hero__titre { max-width: 22ch; }

/* -------------------------------------------------------------------- *
 * 13. LE PIED DE PAGE
 * -------------------------------------------------------------------- */

.kh-pied {
	padding-block: var(--kh-pas-8);
	background: var(--kh-gris-50);
	border-top: 1px solid var(--kh-trait);
}

.kh-pied__haut {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kh-pas-6);
	align-items: flex-start;
	justify-content: space-between;
	padding-bottom: var(--kh-pas-6);
	border-bottom: 1px solid var(--kh-trait);
}

.kh-pied__marque { display: flex; align-items: center; gap: var(--kh-pas-3); }
.kh-pied__monogramme { display: block; height: 36px; width: auto; }
.kh-pied__baseline { margin: 0; font-weight: var(--kh-g-moyenne); color: var(--kh-marque); }

.kh-pied__bas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kh-pas-3) var(--kh-pas-6);
	align-items: center;
	padding-top: var(--kh-pas-5);
	color: var(--kh-encre-tenue);
	font-size: var(--kh-t-petit);
}

/* ══════════════════════════════════════════════════════════════════ *
 * LES TROIS RÉSEAUX AU PIED — 2026-09-10
 * ══════════════════════════════════════════════════════════════════ *
 *
 * ⚠️ **LA CIBLE FAIT 44 px**, comme partout : un pictogramme de 20 px est un
 * lien qu on rate au doigt. Le dessin reste petit, la zone cliquable non.
 *
 * ⚠️ **`kh-lecteur-seul` MASQUE POUR L ŒIL, PAS POUR LA VOIX.** Un
 * `display: none` retirerait le nom du lien de l arbre d accessibilité, et le
 * lien s annoncerait « lien, image ».
 */
.kh-pied__reseaux {
	display: flex;
	gap: 0.5rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.kh-pied__reseau {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 1px solid var(--kh-trait, #e3e6ee);
	background: var(--kh-fond, #fff);
	color: inherit;
}

.kh-pied__reseau:hover { border-color: var(--kh-bleu, #0018c7); }

.kh-pied__reseau svg { width: 20px; height: 20px; }

.kh-lecteur-seul {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.kh-nav--pied,
.kh-nav--legal { gap: var(--kh-pas-4); }
.kh-nav--legal a { color: var(--kh-encre-tenue); font-size: var(--kh-t-petit); }

.kh-pied__groupe,
.kh-pied__copyright { margin: 0; }
/*
 * Le copyright seul, centré, tout en bas — décision de Florian, 2026-09-05 : avec
 * la politique dans le menu légal, la ligne (499 px de légal + 431 de baseline
 * + 242 de copyright + deux écarts) dépassait les 1 180 px et passait à la
 * ligne de façon arbitraire. Mesuré dans le navigateur avant d'écrire.
 */
.kh-pied__copyright { flex-basis: 100%; text-align: center; margin-top: var(--kh-pas-3); }

/* -------------------------------------------------------------------- *
 * 14. MOBILE
 * -------------------------------------------------------------------- */

@media (max-width: 940px) {

	.kh-hero__grille,
	.kh-etape,
	.kh-duo,
	.kh-duo--large-gauche,
	.kh-demande__grille { grid-template-columns: 1fr; }

	.kh-grille--trois { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
	.kh-refus .kh-grille--deux { grid-template-columns: 1fr; }
	.kh-manifeste { padding: var(--kh-pas-6); }

	/* La photo repasse SOUS le texte, quelle que soit la parité. */
	.kh-etape:nth-child(even) .kh-etape__figure { order: 0; }

	.kh-entete__barre { flex-wrap: wrap; gap: var(--kh-pas-3); padding-block: var(--kh-pas-3); min-height: 64px; }
	.kh-entete__nav { margin-inline-start: 0; order: 3; width: 100%; }
	/*
	 * Le geste tient sur 375 px : logo 36 px + « Menu » + bouton — mesuré le
	 * 2026-09-05 : à 14 px de police et 10/16 px de marges, le bouton fait
	 * ~150 px, et l'en-tête replié 64 px. Il était coupé au bord droit avant.
	 */
	.kh-entete__geste { margin-inline-start: auto; padding: 10px var(--kh-pas-4); font-size: var(--kh-t-petit); }
	.kh-entete--pliable .kh-entete__nav { display: none; }
	.kh-entete--pliable .kh-entete__menu[aria-expanded="true"] + .kh-entete__nav { display: block; padding-block: var(--kh-pas-3) var(--kh-pas-4); border-top: 1px solid var(--kh-trait); }
	/* Cibles tactiles : les entrées repliées font 44 px de haut (mesuré 20 px le 2026-09-05 avant cette règle), le bouton Menu 44 px. */
	.kh-entete--pliable .kh-nav { flex-direction: column; gap: 0; }
	.kh-entete--pliable .kh-nav a { display: block; padding: 12px 0; }
	.kh-entete__menu { min-height: 44px; min-width: 44px; justify-content: center; }
	.kh-pied__copyright { margin-inline-start: 0; text-align: center; }
}

/* -------------------------------------------------------------------- *
 * 15. GARDE 2 — LE MOUVEMENT RÉDUIT COUPE TOUT
 *
 * ⚠️ Y COMPRIS la révélation au défilement : l'élément est rendu visible
 * d'emblée, sans transition. *Une garde qui laisse passer l'animation qu'elle
 * prétend couper ne sert à rien.*
 * -------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.kh-anime .kh-revele {
		opacity: 1 !important;
		transform: none !important;
	}

	/* Y COMPRIS la courbe : tracé entier, points visibles, aucun délai. */
	.kh-anime .kh-courbe__ligne {
		stroke-dasharray: none !important;
		stroke-dashoffset: 0 !important;
	}

	.kh-anime .kh-courbe__point {
		opacity: 1 !important;
		transition-delay: 0s !important;
	}
}

/* ==================================================================== *
 * 16. LA DIRECTION « TUILES » — 2026-10-15 (Florian, 14/10 au soir)
 *
 * « Même standing premium que le nouveau khompta.com (références : Pennylane,
 * Legalstart), sans reprendre forcément ses couleurs. Cible différente, thème
 * séparé : une cohérence de niveau de gamme, pas une copie. »
 *
 * ⚠️ **LE PRINCIPE EST CELUI DE khompta.com, LA PALETTE EST CELLE DE pro.**
 * (docs/DIRECTION-VISUELLE.md, l'étude du 01/10 : *ce n'est pas le mouvement
 * qui fait l'effet premium, c'est le fond qui change à chaque bloc*, une
 * tuile sombre qui ponctue, une typographie qui porte.) La gouttière n'est pas
 * le sable de khompta.com : c'est une **pierre sarcelle**, dérivée de la
 * marque — rien de nouveau dans la palette du groupe.
 *
 *   gouttière ............ --kh-gouttiere     #e8eeed  (le fond de la page)
 *   tuile ordinaire ...... blanc
 *   tuile teintée ........ --kh-tuile-teinte  #f3f7f7
 *   tuile de marque ...... --kh-marque-100    #e6f2f2  (le formulaire)
 *   tuile sombre ......... --kh-marque-700    le hero — UNE par page
 *
 * Contrastes inchangés : chaque texte garde le fond qu'il avait mesuré (blanc,
 * gris 50 ≈ teinte, marque-50/100) ; la gouttière ne porte AUCUN texte.
 * ==================================================================== */

:root {
	--kh-gouttiere: #e8eeed;
	--kh-tuile-teinte: #f3f7f7;
	--kh-tuile-rayon: 24px;
	--kh-tuile-marge: 8px;
	--kh-tuile-ecart: 8px;
}

@media (min-width: 48rem) {
	:root {
		--kh-tuile-rayon: 28px;
		--kh-tuile-marge: 16px;
		--kh-tuile-ecart: 12px;
	}
}

body { background: var(--kh-gouttiere); }

/* L'en-tête se pose sur la gouttière, verre dépoli de la même pierre. */
.kh-entete {
	background: rgb(232 238 237 / 86%);
	border-bottom-color: transparent;
}

.kh-principal { padding-block: var(--kh-tuile-ecart); }

/* Chaque section est une tuile : rayon, retrait du bord, sa couleur. */
.kh-hero,
.kh-section,
.kh-page,
.kh-fil {
	--kh-tuile: var(--kh-fond);
	background: var(--kh-tuile);
	border-radius: var(--kh-tuile-rayon);
	margin-inline: var(--kh-tuile-marge);
	max-width: calc(var(--kh-largeur) + 2 * var(--kh-pas-8));
}

@media (min-width: 1260px) {
	.kh-hero,
	.kh-section,
	.kh-page,
	.kh-fil { margin-inline: auto; }
}

.kh-hero + .kh-section,
.kh-section + .kh-section,
.kh-section + .kh-page,
.kh-page + .kh-section,
.kh-fil + .kh-section { margin-top: var(--kh-tuile-ecart); }

.kh-section--teinte { --kh-tuile: var(--kh-tuile-teinte); }
.kh-section--marque { --kh-tuile: var(--kh-marque-100); }
.kh-hero { --kh-tuile: var(--kh-marque-700); }

/* Dans une tuile, l'enveloppe respire selon la tuile, pas selon l'écran. */
.kh-section > .kh-enveloppe,
.kh-hero > .kh-enveloppe {
	width: min(100% - 2 * clamp(20px, 4vw, 64px), var(--kh-largeur));
}

/* Les cartes posées sur une tuile blanche prennent la teinte, et inversement. */
.kh-section:not(.kh-section--teinte):not(.kh-section--marque) .kh-carte { background: var(--kh-tuile-teinte); border-color: transparent; box-shadow: none; }
.kh-section:not(.kh-section--teinte):not(.kh-section--marque) .kh-carte:hover,
.kh-section:not(.kh-section--teinte):not(.kh-section--marque) .kh-carte:focus-within { background: var(--kh-marque-50); }
.kh-section--teinte .kh-carte,
.kh-section--marque .kh-carte { border-color: transparent; }

/* Le formulaire : une carte blanche posée sur la tuile de marque. */
.kh-section--marque .kh-demande__boite { border-color: transparent; box-shadow: 0 12px 40px rgb(6 60 60 / 10%); }

/* La typographie qui porte : titres serrés, H1 plus affirmé. */
h1, h2 { letter-spacing: -0.025em; }
.kh-hero__titre { line-height: 1.04; }
.kh-section__entete h2 { max-width: 24ch; }

/* Le pied : une dernière tuile. */
.kh-pied {
	background: var(--kh-fond);
	border-top: 0;
	border-radius: var(--kh-tuile-rayon) var(--kh-tuile-rayon) 0 0;
	margin-inline: var(--kh-tuile-marge);
	max-width: calc(var(--kh-largeur) + 2 * var(--kh-pas-8));
}

@media (min-width: 1260px) {
	.kh-pied { margin-inline: auto; }
}

/* -------------------------------------------------------------------- *
 * 17. LES PAGES HISTORIQUES — le contenu de khompta.com, habillé par pro
 *
 * Gabarit `page-historique.php` (15/10). Le TEXTE est celui de l'ancienne
 * page, mot pour mot : seule la mise en forme est neuve. Chaque H2 ouvre un
 * bloc ; les boutons gardent leur libellé et mènent au formulaire.
 * -------------------------------------------------------------------- */

.kh-histo__corps { max-width: 72ch; }
.kh-histo__corps > h2 {
	margin-top: var(--kh-pas-8);
	padding-top: var(--kh-pas-7);
	border-top: 1px solid var(--kh-trait);
	font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem);
}
.kh-histo__corps > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.kh-histo__corps h3 { margin-top: var(--kh-pas-6); color: var(--kh-marque-900); }
.kh-histo__corps h4 { margin: 0; font-size: 1rem; }
.kh-histo__corps figure { margin: var(--kh-pas-6) 0; }
.kh-histo__corps figure img { display: block; width: 100%; height: auto; border-radius: var(--kh-rayon-large); }
.kh-histo__corps ul { padding-inline-start: var(--kh-pas-5); }
.kh-histo__corps li { margin-bottom: var(--kh-pas-2); }
.kh-histo__action { margin: var(--kh-pas-5) 0 var(--kh-pas-2); }
.kh-histo__note { margin-top: 0; font-size: var(--kh-t-petit); color: var(--kh-encre-tenue); }

/* Les listes courtes deviennent des pastilles ; les bénéfices, des cartes. */
.kh-histo__atouts,
.kh-histo__villes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kh-pas-2);
	padding: 0 !important;
	list-style: none;
}
.kh-histo__atouts li,
.kh-histo__villes li {
	margin: 0;
	padding: 10px 16px;
	background: var(--kh-marque-50);
	border-radius: 999px;
	color: var(--kh-marque-900);
	font-weight: var(--kh-g-moyenne);
}
.kh-histo__villes h4 { font-size: var(--kh-t-petit); font-weight: var(--kh-g-moyenne); color: inherit; }
.kh-histo__benefices {
	display: grid;
	gap: var(--kh-pas-4);
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	padding: 0 !important;
	list-style: none;
}
.kh-histo__benefices li {
	margin: 0;
	padding: var(--kh-pas-5);
	background: var(--kh-tuile-teinte);
	border-radius: var(--kh-rayon-large);
}
.kh-histo__benefices strong { display: block; margin-bottom: var(--kh-pas-2); color: var(--kh-encre); font-size: 1.125rem; }

.kh-hero--histo .kh-hero__titre { max-width: 26ch; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); }
.kh-hero--histo .kh-hero__fil { margin: 0 0 var(--kh-pas-4); font-size: var(--kh-t-petit); color: var(--kh-marque-200); }
.kh-hero--histo .kh-hero__fil a { color: #fff; }

/* La page générique et le fil : l'enveloppe EST la tuile — son rembourrage la sépare du bord. */
.kh-page.kh-enveloppe,
.kh-fil.kh-enveloppe {
	width: auto;
	padding-inline: clamp(20px, 4vw, 64px);
}

/* 15/10 — le maillage du pied vers les pages historiques. */
.kh-pied__plus { padding-block: var(--kh-pas-5); border-bottom: 1px solid var(--kh-trait); }
.kh-pied__plus-titre { margin: 0 0 var(--kh-pas-3); font-size: var(--kh-t-petit); font-weight: var(--kh-g-forte); letter-spacing: 0.08em; text-transform: uppercase; color: var(--kh-marque); }

/*
 * 15/10 — LE DÉBORDEMENT HORIZONTAL À 375 PX, mesuré avant la refonte (51 px sur 7 pages sur 9) puis aggravé par les
 * libellés longs (274 px sur Talents Connect) : la boîte du formulaire prenait la largeur de son bouton, qui ne passait
 * pas à la ligne, et une colonne de grille ne rétrécit pas sous son contenu (`min-width: auto`). Les deux sont levés.
 */
.kh-demande__grille > *,
.kh-hero__grille > *,
.kh-duo > * { min-width: 0; }
.kh-demande__boite .wpcf7-submit,
.kh-bouton { white-space: normal; max-width: 100%; }
@media (max-width: 940px) {
	.kh-demande__boite { padding: var(--kh-pas-5); }
	.kh-demande__grille { grid-template-columns: minmax(0, 1fr); }
}

/* 15/10 — quatre raisons sur une rangée (deux en tablette, une au téléphone), pas 3 + 1. */
.kh-grille--quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .kh-grille--quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .kh-grille--quatre { grid-template-columns: minmax(0, 1fr); } }
/* Le message prend la largeur des autres champs (CF7 pose cols="40"). */
.kh-demande__boite textarea { width: 100%; box-sizing: border-box; }

/*
 * 15/10 — LES COPIES HISTORIQUES EN PLEINE LARGEUR (Florian : « priorité de conversion, pas cosmétique ») : le texte
 * était bridé à 72 caractères et laissait la moitié droite de la tuile vide. Il prend la largeur de la tuile ; les
 * titres aussi. Les images restent à leur taille utile (1 024 px au plus), les listes de cartes se répartissent sur
 * la largeur.
 */
.kh-histo__corps { max-width: none; }
.kh-histo__corps > h2 { max-width: none; }
.kh-histo__corps p,
.kh-histo__corps li { font-size: 1.0625rem; line-height: 1.7; }
.kh-histo__corps figure { max-width: 1024px; }
.kh-histo__benefices { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.kh-hero--histo .kh-hero__titre { max-width: none; }

/* ==================================================================== *
 * 18. RETOURS DE FLORIAN DU 15/10 — accueil, formulaire, « pour aller plus loin », pleine largeur
 * ==================================================================== */

/* L'accueil : la tuile est claire, l'encadré vert ne porte que le discours. */
.kh-hero--encadre { --kh-tuile: var(--kh-fond); padding-block: clamp(16px, 2vw, 32px); }
.kh-hero--encadre .kh-hero__grille { align-items: center; }
.kh-hero__encadre {
	background: var(--kh-marque-700);
	border-radius: calc(var(--kh-tuile-rayon) - 6px);
	padding: clamp(28px, 4vw, 56px);
}
.kh-hero--encadre .kh-hero__titre { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); }
.kh-hero--encadre .kh-hero__photo { box-shadow: none; }
@media (max-width: 940px) {
	.kh-hero--encadre { padding: 8px; }
}

/* Le bouton du hero : plus de liseré blanc (Florian, 15/10). */
.kh-hero__geste { box-shadow: none; }

/* L'ancre du formulaire arrive sous l'en-tête collant, jamais avant. */
#demander-une-demo { scroll-margin-top: 88px; }

/* Les avis : cinq étoiles décoratives. */
.kh-avis__etoiles { display: flex; gap: 2px; margin: 0 0 var(--kh-pas-3); }
.kh-avis__etoiles svg { fill: #f5b301; }

/* Le mécanisme : le titre et l'intro sur toute la largeur, puis la frise en 4 étapes. */
.kh-mecanisme .kh-section__entete h2,
.kh-mecanisme .kh-chapo { max-width: none; }
.kh-frise {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--kh-pas-4);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}
.kh-frise li { position: relative; margin: 0; }
.kh-frise li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 28px;
	left: calc(56px + var(--kh-pas-2));
	right: calc(-1 * var(--kh-pas-4) + 8px);
	height: 2px;
	background: var(--kh-marque-200);
}
.kh-frise a {
	display: flex;
	flex-direction: column;
	gap: var(--kh-pas-3);
	color: var(--kh-encre);
	font-weight: var(--kh-g-forte);
	font-size: 1.0625rem;
	text-decoration: none;
}
.kh-frise a:hover { color: var(--kh-marque); }
.kh-frise__rang {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: var(--kh-marque);
	color: #fff;
	font-size: 1.375rem;
	font-variant-numeric: tabular-nums;
}
@media (max-width: 760px) {
	.kh-frise { grid-template-columns: minmax(0, 1fr); gap: var(--kh-pas-3); }
	.kh-frise li:not(:last-child)::after { top: 56px; bottom: -12px; left: 27px; right: auto; width: 2px; height: auto; }
	.kh-frise a { flex-direction: row; align-items: center; }
}

/* Le titre du hero en 2–3 lignes : l'encadré prend les deux tiers, la photo le tiers. */
.kh-hero--encadre .kh-hero__grille { grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.55fr); gap: var(--kh-pas-6); }
.kh-hero--encadre .kh-hero__titre { font-size: clamp(2rem, 1.2rem + 2vw, 2.875rem); line-height: 1.08; }
.kh-hero--encadre .kh-hero__chapo { max-width: 62ch; }
.kh-hero--encadre .kh-hero__photo { aspect-ratio: 3 / 4; object-fit: cover; }
@media (max-width: 940px) {
	.kh-hero--encadre .kh-hero__grille { grid-template-columns: minmax(0, 1fr); }
	.kh-hero--encadre .kh-hero__photo { aspect-ratio: 16 / 10; }
}

/*
 * RÈGLE GLOBALE (Florian, 15/10) : quand le contenu d'une section occupe toute la largeur, son titre et son texte
 * d'introduction aussi — fini les titres sur 2–3 lignes bloqués à gauche. L'en-tête de section n'est plus bridé.
 */
.kh-section__entete h2,
.kh-section__entete .kh-chapo { max-width: none; }
@media (max-width: 600px) {
	.kh-hero--encadre .kh-hero__titre { font-size: 1.75rem; }
	.kh-hero--encadre .kh-hero__chapo { font-size: 1rem; }
	.kh-hero__encadre { padding: 24px 20px; }
}

/* Le formulaire de bas de page (toutes pages) : le texte de gauche en haut, la boîte plus compacte. */
.kh-demande__grille { align-items: start; }
.kh-demande__boite { padding: clamp(20px, 3vw, 36px); }
.kh-demande__titre { margin-bottom: var(--kh-pas-4); }
.kh-demande__boite .wpcf7-form p { margin: 0 0 var(--kh-pas-3); }
.kh-demande__boite textarea { height: 88px; min-height: 64px; resize: vertical; }
.kh-demande__boite .kh-mention { margin: calc(-1 * var(--kh-pas-2)) 0 var(--kh-pas-3); font-size: var(--kh-t-petit); color: var(--kh-encre-tenue); }
.kh-demande__boite .wpcf7-list-item-label { font-size: var(--kh-t-petit); }

/* « Pour aller plus loin » : quatre cartes cliquables. */
.kh-plus__titre { margin-bottom: var(--kh-pas-5); }
.kh-plus__grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--kh-pas-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
.kh-plus__grille li { margin: 0; }
.kh-plus__carte {
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	gap: var(--kh-pas-2);
	height: 100%;
	padding: var(--kh-pas-5);
	background: var(--kh-fond);
	border-radius: var(--kh-rayon-large);
	color: var(--kh-encre-douce);
	text-decoration: none;
	transition: background-color 160ms ease, box-shadow 160ms ease;
}
.kh-plus__carte:hover,
.kh-plus__carte:focus-visible { background: var(--kh-marque-50); box-shadow: var(--kh-ombre-2); }
.kh-plus__icone { color: var(--kh-marque); }
.kh-plus__nom { font-weight: var(--kh-g-forte); color: var(--kh-encre); font-size: 1.0625rem; line-height: 1.3; }
.kh-plus__ligne { font-size: 0.9375rem; line-height: 1.5; }
.kh-plus__fleche { color: var(--kh-marque); font-weight: var(--kh-g-forte); font-size: 1.25rem; }

/* Le lien des entrepreneurs égarés : discret, sans fond. */
.kh-entrepreneur {
	margin: 0;
	padding: 6px clamp(16px, 4vw, 48px) 0;
	text-align: right;
	font-size: 0.8125rem;
}
.kh-entrepreneur a { color: var(--kh-encre-tenue); text-decoration: underline; text-underline-offset: 3px; }
.kh-entrepreneur a:hover { color: var(--kh-marque); }
.kh-entrepreneur--pied { padding: var(--kh-pas-3) 0 0; text-align: center; flex-basis: 100%; }