/* KarFlow — feuille du site vitrine.
 *
 * Écrite pour ce site, pas adaptée d'un gabarit. Tout ce qui est à moi porte le
 * préfixe « kf- » : les six animations posées dans la page arrivent avec leurs
 * propres .card, .row, .col et .cnt, écrites sans se connaître, et c'est ce
 * préfixe qui garantit qu'aucune ne rencontrera jamais les miennes.
 *
 * Le parti : le site ressemble au produit. Une base claire, comme les écrans de
 * l'application, et des bandes marine là où ce sont les animations qui parlent —
 * elles sont dessinées dans un cadre marine et s'y lisent comme des écrans. Le
 * texte reste au fer à gauche. L'orange est un trait et une marque : il ne
 * remplit qu'une seule bande de toute la page.
 */

/* ==========================================================================
   Jetons
   ==========================================================================
   Deux jeux des mêmes noms. Le clair est celui de la page ; « .kf-sombre » les
   réaffecte pour tout ce qu'il contient. Un composant n'a donc jamais à savoir
   sur quel fond il est posé : il lit ses jetons, et la portée décide. */

:root {
	--kf-fond: #f6f8fb;
	--kf-fond-alt: #eef2f7;
	--kf-surface: #ffffff;
	--kf-surface-haute: #f1f5f9;
	--kf-filet: #dde4ee;
	--kf-filet-fort: #c3cedd;
	--kf-voile: rgba(15, 27, 45, 0.04);
	--kf-champ: #ffffff;

	/* L'orange vif fait 3:1 sur blanc : assez pour un aplat, trop peu pour un
	   texte. Les mots en orange prennent donc sa version brûlée. */
	--kf-accent: #f97316;
	--kf-accent-clair: #fb923c;
	--kf-accent-texte: #c2410c;
	--kf-accent-voile: rgba(249, 115, 22, 0.16);

	--kf-texte: #0f1b2d;
	--kf-texte-doux: #45556f;
	--kf-texte-faible: #66758c;

	--kf-ombre: 0 1px 2px rgba(15, 27, 45, 0.05), 0 8px 24px -12px rgba(15, 27, 45, 0.16);
	--kf-ombre-ecran: 0 2px 6px rgba(15, 27, 45, 0.08), 0 34px 80px -24px rgba(15, 27, 45, 0.42);

	--kf-rayon: 12px;
	--kf-rayon-l: 18px;
	--kf-barre: 62px; /* hauteur de la barre de sections, une fois posée */

	--kf-mesure: 62ch; /* largeur de lecture confortable */

	color-scheme: light;
}

/* La palette marine d'origine du site. Le fond reste nettement plus sombre que
   le cadre des animations (#16233d) : c'est ce qui les fait lire comme des
   écrans posés sur la page — un écart plus faible les faisait disparaître. */
.kf-sombre {
	--kf-fond: #0a1220;
	--kf-fond-alt: #0e1728;
	--kf-surface: #16233d;
	--kf-surface-haute: #1f3055;
	--kf-filet: #24365c;
	--kf-filet-fort: #3a4f7d;
	--kf-voile: rgba(255, 255, 255, 0.05);
	--kf-champ: rgba(255, 255, 255, 0.04);

	--kf-accent-texte: #fb923c;

	--kf-texte: #e8eef8;
	--kf-texte-doux: #9fb0cb;
	--kf-texte-faible: #7d90ae;

	--kf-ombre: none;

	background: var(--kf-fond);
	color: var(--kf-texte);
	color-scheme: dark;
}

/* ==========================================================================
   Socle
   ========================================================================== */

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

html {
	background: var(--kf-fond);
	scroll-behavior: smooth;
	/* Un clic sur une pastille doit amener le titre sous la barre, pas dessous. */
	scroll-padding-top: calc(var(--kf-barre) + 16px);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--kf-fond);
	color: var(--kf-texte);
	font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Le pied reste en bas de l'écran sur les pages courtes (404, merci) :
	   sans cela il flottait au milieu, avec un vide clair dessous. */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
body > main { flex: 1 0 auto; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--kf-accent-texte); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--kf-accent); }

h1, h2, h3, h4 {
	margin: 0;
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* Le focus au clavier est visible, partout, et jamais l'anneau bleu du
   navigateur : sur un fond marine il est illisible. */
:focus-visible {
	outline: 2px solid var(--kf-accent-texte);
	outline-offset: 3px;
	border-radius: 3px;
}

/* Masqué à l'œil, lisible aux lecteurs d'écran. « display: none » retirerait
   le texte de l'arbre d'accessibilité — c'est ainsi qu'on se retrouve avec des
   liens sans texte, ce qu'on ne veut pas reproduire ici. */
.kf-invisible {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.kf-saut {
	position: absolute;
	top: -6em; left: 0;
	z-index: 200;
	background: var(--kf-surface-haute);
	color: var(--kf-texte);
	padding: 0.8em 1.3em;
	border-radius: 0 0 var(--kf-rayon) 0;
}
.kf-saut:focus { top: 0; }

/* ==========================================================================
   Bandes
   ========================================================================== */

.kf-bande { padding: clamp(64px, 9vw, 120px) 0; }
.kf-bande--alt { background: var(--kf-fond-alt); }
.kf-bande--serree { padding: clamp(48px, 6vw, 80px) 0; }
/* La bande du Parcours : le texte, puis l'animation, puis assez de marine sous
   elle pour qu'elle ne bute pas contre la bande claire suivante. */
.kf-sombre--parcours { padding-bottom: clamp(56px, 8vw, 110px); }

.kf-conteneur {
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 40px);
}
.kf-conteneur--etroit { max-width: 980px; }

.kf-surtitre {
	display: block;
	margin: 0 0 18px;
	color: var(--kf-accent-texte);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.kf-titre {
	font-size: clamp(28px, 4vw, 46px);
	max-width: 20ch;
}
.kf-titre--large { max-width: 26ch; }

.kf-chapo {
	margin-top: 20px;
	max-width: var(--kf-mesure);
	color: var(--kf-texte-doux);
	font-size: clamp(16px, 1.6vw, 19px);
}

/* ==========================================================================
   Boutons
   ========================================================================== */

.kf-boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.kf-bouton {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 13px 22px;
	border: 1px solid var(--kf-filet);
	border-radius: var(--kf-rayon);
	background: var(--kf-surface);
	color: var(--kf-texte);
	font: inherit;
	font-weight: 500;
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.kf-bouton:hover { background: var(--kf-surface-haute); border-color: var(--kf-filet-fort); color: var(--kf-texte); }

.kf-bouton--primaire {
	background: var(--kf-accent);
	border-color: var(--kf-accent);
	color: #14161c;
	font-weight: 600;
}
.kf-bouton--primaire:hover { background: var(--kf-accent-clair); border-color: var(--kf-accent-clair); color: #14161c; }

.kf-bouton svg { width: 17px; height: 17px; flex: none; }

/* ==========================================================================
   En-tête — une barre, deux états
   ==========================================================================
   Au-dessus de la bannière elle est transparente : le nom, et l'appel à la
   démonstration. Passé la bannière elle se pose, prend son fond, et déplie les
   six pastilles de section. Une seule barre, pour ne pas en superposer deux. */

.kf-entete {
	position: sticky;
	top: 0;
	z-index: 90;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}

.kf-entete__rang {
	display: flex;
	align-items: center;
	gap: 20px;
	height: var(--kf-barre);
}
/* Le <nav> qui porte les pastilles n'a pas de classe : par défaut, un enfant
   flex refuse de rétrécir sous la taille de son contenu (« min-width: auto »).
   Sous 860 px, .kf-pastilles passe en overflow-x: auto et devrait pouvoir
   s'écraser à volonté — mais c'est ce <nav>, son parent, qui porte encore la
   largeur pleine des six pastilles côte à côte. La rangée entière déborde
   alors du cadre, et pousse le bouton « Demander une démo » hors de l'écran :
   c'est lui qu'on voit dépasser, alors que la cause est un cran plus haut. */
.kf-entete__rang > nav { min-width: 0; }

/* Le logo dessiné ne descend pas à la hauteur d'une barre : son sous-titre y
   tomberait à six pixels. La marque reste donc un mot, et c'est sa seconde
   moitié qui porte la couleur, comme sur le logo. */
.kf-marque {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--kf-texte);
	text-decoration: none;
	white-space: nowrap;
}
.kf-marque span { color: var(--kf-accent-texte); }
.kf-marque:hover { color: var(--kf-texte); opacity: .8; }

.kf-entete__fin { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.kf-entete__fin .kf-bouton { padding: 10px 16px; font-size: 15px; }

/* -- état posé -- */
.kf-entete--posee {
	background: rgba(246, 248, 251, 0.88);
	border-bottom-color: var(--kf-filet);
	backdrop-filter: blur(10px);
}

/* -- les pastilles -- */
.kf-pastilles {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Elles n'existent qu'une fois la barre posée : au-dessus de la bannière, le
   titre doit rester seul. */
.kf-pastilles li {
	opacity: 0;
	transform: translateY(-6px);
	pointer-events: none;
	transition: opacity .35s ease, transform .35s ease;
}
.kf-entete--posee .kf-pastilles li { opacity: 1; transform: none; pointer-events: auto; }
/* En cascade, de gauche à droite — le mouvement suit la lecture. */
.kf-entete--posee .kf-pastilles li:nth-child(1) { transition-delay: .02s }
.kf-entete--posee .kf-pastilles li:nth-child(2) { transition-delay: .06s }
.kf-entete--posee .kf-pastilles li:nth-child(3) { transition-delay: .10s }
.kf-entete--posee .kf-pastilles li:nth-child(4) { transition-delay: .14s }
.kf-entete--posee .kf-pastilles li:nth-child(5) { transition-delay: .18s }
.kf-entete--posee .kf-pastilles li:nth-child(6) { transition-delay: .22s }

/* Les pastilles portent leur nom. Réduites à des ronds muets, elles étaient
   illisibles : une enveloppe et un bouclier de 17 px sur fond marine ne se
   distinguent pas, et on ne compte pas ce qu'on ne sait pas nommer. L'icône
   seule ne suffit que si le mot revient au survol — ici il ne revenait jamais. */
.kf-pastille {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 38px;
	padding: 0 15px 0 13px;
	border: 1px solid var(--kf-filet);
	border-radius: 999px;
	background: var(--kf-surface);
	color: var(--kf-texte-doux);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.kf-pastille svg { width: 17px; height: 17px; flex: none; }
.kf-pastille__mot { font-size: 14.5px; font-weight: 500; }

.kf-pastille:hover { color: var(--kf-texte); border-color: var(--kf-filet-fort); background: var(--kf-surface-haute); }

/* La section courante s'allume. */
.kf-pastille[aria-current] {
	background: var(--kf-accent);
	border-color: var(--kf-accent);
	color: #14161c;
}

/* -- filet de progression -- */
.kf-progres {
	height: 2px;
	background: var(--kf-accent);
	width: 0;
	transition: width .12s linear;
	opacity: 0;
}
.kf-entete--posee .kf-progres { opacity: 1; }

/* Six pastilles nommées demandent environ 750 px. En dessous, les libellés se
   replient sur la seule section courante — celle qu'on a besoin de lire — et
   les autres redeviennent des icônes. C'est le repli, pas l'état normal. */
/* Le bouton d'appel se réduit à sa flèche avant que les pastilles ne cèdent :
   c'est lui qu'on peut abréger sans perte, puisqu'il est aussi en bas de page
   et dans le pied. Les noms de sections, eux, sont ce qu'on vient lire. */
@media (max-width: 1180px) {
	.kf-entete__rang { gap: 12px; }
	.kf-entete__fin .kf-bouton--primaire .kf-bouton__mot { display: none; }
	.kf-entete__fin .kf-bouton { padding: 10px 12px; }
}

@media (max-width: 1020px) {
	/* Le lien Tarifs cède là où les pastilles perdent leurs libellés : la barre
	   n'a plus la place d'un second bouton, et la page reste atteignable par le
	   pied, comme la page Contact. */
	.kf-bouton--tarifs { display: none; }

	.kf-pastille {
		gap: 0;
		width: 38px;
		padding: 0;
		justify-content: center;
		overflow: hidden;
		transition: width .28s ease, padding .28s ease, background-color .2s ease,
		            color .2s ease, border-color .2s ease;
	}
	.kf-pastille__mot {
		max-width: 0;
		opacity: 0;
		margin-left: 0;
		transition: max-width .28s ease, opacity .2s ease, margin-left .28s ease;
	}
	.kf-pastille[aria-current] { width: auto; padding: 0 15px 0 13px; }
	.kf-pastille[aria-current] .kf-pastille__mot { max-width: 14ch; opacity: 1; margin-left: 9px; }
}

/* Plus étroit encore, la rangée défile horizontalement plutôt que de déborder. */
@media (max-width: 860px) {
	.kf-pastilles {
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		padding: 0 2px;
	}
	.kf-pastilles::-webkit-scrollbar { display: none; }
}
@media (max-width: 620px) {
	.kf-marque { font-size: 17px; }
	.kf-pastille[aria-current] .kf-pastille__mot { max-width: 9ch; font-size: 13.5px; }
}

/* ==========================================================================
   Bannière
   ========================================================================== */

/* Le titre et la promesse, puis le produit lui-même : le KarBoard tourne sous
   le texte, à sa largeur de dessin. La photo générée et le logo dans son disque
   sont partis — l'une portait du faux texte, l'autre ne montrait rien de ce que
   fait l'application. C'est l'écran qui répond au titre. */
.kf-banniere {
	position: relative;
	margin-top: calc(-1 * var(--kf-barre));
	padding: calc(var(--kf-barre) + clamp(44px, 7vw, 96px)) 0 clamp(56px, 7vw, 96px);
	overflow: hidden;
	background:
		radial-gradient(55% 45% at 88% 0%, rgba(249, 115, 22, 0.12), transparent 70%),
		radial-gradient(45% 55% at 0% 30%, rgba(31, 48, 85, 0.08), transparent 70%),
		var(--kf-fond);
}
/* Une trame discrète, qui s'efface vers le bas : de la matière sans image. */
.kf-banniere::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(var(--kf-filet) 1px, transparent 1px),
		linear-gradient(90deg, var(--kf-filet) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
	mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
	opacity: 0.6;
	pointer-events: none;
}
.kf-banniere > .kf-conteneur { position: relative; }

/* La même matière en tête des autres pages : l'éclat orange et la trame, mais
   sur une hauteur fixe — étirée sur toute une section comme celle des Tarifs,
   la trame couvrirait la page entière. */
.kf-tete {
	position: relative;
	background:
		radial-gradient(900px 420px at 92% 0%, rgba(249, 115, 22, 0.11), transparent 70%),
		radial-gradient(700px 480px at 0% 10%, rgba(31, 48, 85, 0.07), transparent 70%),
		var(--kf-fond);
}
.kf-tete::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 560px;
	background-image:
		linear-gradient(var(--kf-filet) 1px, transparent 1px),
		linear-gradient(90deg, var(--kf-filet) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(ellipse 70% 100% at 50% 0%, #000 15%, transparent 75%);
	mask-image: radial-gradient(ellipse 70% 100% at 50% 0%, #000 15%, transparent 75%);
	opacity: 0.6;
	pointer-events: none;
}
.kf-tete > * { position: relative; }

.kf-banniere__tete {
	display: grid;
	gap: 8px clamp(32px, 5vw, 80px);
}
@media (min-width: 1080px) {
	.kf-banniere__tete { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: end; }
	.kf-banniere__tete .kf-chapo { margin-top: 0; }
}

.kf-banniere h1 {
	font-size: clamp(34px, 5.4vw, 64px);
	font-weight: 700;
	letter-spacing: -0.03em;
	max-width: 16ch;
}
.kf-banniere .kf-chapo { font-size: clamp(17px, 1.6vw, 20px); max-width: 48ch; }

.kf-preuves {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 32px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
	font-size: 14.5px;
	color: var(--kf-texte-doux);
}
.kf-preuves b {
	color: var(--kf-texte);
	font-size: 17px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	margin-right: 6px;
}

.kf-banniere__ecran { margin-top: clamp(40px, 6vw, 72px); }
.kf-banniere__ecran .kf-anim {
	/* La largeur exacte du cadre du KarBoard : plus large, l'ombre dessinait
	   un second cadre, vide, autour du sien. */
	max-width: 1100px;
	border-radius: 18px;
	box-shadow: var(--kf-ombre-ecran);
}

/* ==========================================================================
   Duo texte + écran
   ==========================================================================
   Le texte tient une colonne étroite, l'animation prend tout le reste : elles
   sont dessinées pour 1100 px, les serrer davantage déclencherait leurs propres
   ruptures de mise en page et on ne verrait plus ce qu'elles montrent. */

.kf-duo {
	display: grid;
	/* « minmax(0, 1fr) » et non la valeur par défaut : une colonne de grille se
	   dimensionne sinon sur son contenu, et le tableau des tâches, large de
	   1100 px avant mise à l'échelle, pousserait la bande hors du conteneur. */
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}
.kf-duo > * { min-width: 0; }
/* Le seuil est haut, et c'est délibéré. Ces écrans sont dessinés pour 1100 px.
   Passer en deux colonnes dès 1040 px de fenêtre ne leur en laissait que 560 :
   le tableau des tâches s'y réduisait de moitié, et les cartes de l'Équipe
   coupaient les noms en trois lignes. En dessous de 1280 px, la bande empile —
   le texte au-dessus, l'écran sur toute la largeur — ce qui lui rend près de
   mille pixels au lieu de six cents. */
@media (min-width: 1280px) {
	.kf-duo { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); }
	/* En alternance, ce n'est pas seulement l'ordre qui change : les largeurs
	   suivent. Sans cette seconde règle, le texte passe à droite mais l'écran
	   se retrouve dans la colonne étroite, où il se replie sur sa propre mise en
	   page mobile — on ne voit plus ce qu'il montre. */
	.kf-duo--inverse { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
	.kf-duo--inverse .kf-duo__texte { order: 2; }
}

.kf-duo + .kf-duo { margin-top: clamp(64px, 8vw, 110px); }

.kf-duo__texte h3 { font-size: clamp(22px, 2.4vw, 30px); }
.kf-duo__texte p { margin-top: 16px; color: var(--kf-texte-doux); font-size: 16.5px; }

.kf-duo__num {
	display: block;
	margin-bottom: 14px;
	color: var(--kf-accent-texte);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.16em;
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Les animations
   ==========================================================================
   Deux niveaux. L'enveloppe .kf-anim porte la mise en page du site ; la page
   intérieure .kf-anim__page reçoit ce que le prototype posait sur <body>. Voir
   la fonction enfermer() dans build/anim.mjs. */

.kf-anim { max-width: 1140px; margin-inline: auto; }
.kf-anim__page { }

/* Une animation hors de l'écran n'a aucune raison de tourner : on met ses
   animations CSS en pause tant qu'elle n'est pas visible. Le repère est posé
   par site.js ; sans JavaScript, tout tourne, ce qui est le bon repli. */
.kf-anim--repos * { animation-play-state: paused !important; }

/* -- Tâches atelier : le cadre que sa variante claire n'a pas --
   Les six animations n'ont pas la même structure. Le KarBoard et le Tableau de
   bord posent une planche claire DANS un cadre marine — deux niveaux. Tâches
   atelier n'en a qu'un : sa variante sombre peint tout en marine, sa variante
   claire tout en clair. On prend la claire, pour que son contenu se lise comme
   celui des autres, et on lui rend le cadre ici.

   La page intérieure devient donc ce cadre. Les valeurs reprennent celles du
   KarBoard : 14 px de marge, 18 px de rayon dehors, 14 px dedans — un rayon
   intérieur plus petit que l'extérieur, sans quoi l'emboîtement se voit. */
.kf-anim-taches .kf-anim__page {
	background: #16233d;
	border-radius: 18px;
	padding: 14px;
	/* Le prototype centrait sa scène par flex. Elle est désormais mise à
	   l'échelle par animations.js et garde sa largeur de dessin : centrée, elle
	   déborderait du cadre. Le bloc simple suffit, l'échelle fait le reste. */
	display: block;
	overflow: hidden;
}
.kf-anim-taches .stage { border-radius: 14px; }

/* -- Rôles et périmètres : l'écran disparaissait au téléphone --
   Le prototype bascule en colonne sous 800 px et donne « height: 400px » à la
   zone d'écran. Mais cette zone porte « flex: 1 » en style en ligne, donc une
   base de 0 % — et dans un conteneur en colonne, c'est la base qui fait la
   hauteur, jamais « height ». La zone tombait à zéro : il ne restait que la
   rangée d'avatars et le compteur « 2 sections sur 12 ».

   Le défaut est dans le fichier livré, pas dans sa compilation : l'original
   ouvert seul se comporte à l'identique. On le corrige ici plutôt que dans la
   source, pour que le prochain export reste comparable à celui-ci.

   « !important » n'est pas une facilité : un style en ligne ne se corrige pas
   autrement depuis une feuille. */
@media (max-width: 800px) {
	.kf-anim-perimetres [data-el="winarea"] { flex: 0 0 400px !important; }
}
/* Sur un écran de téléphone, les six rôles dépassent de quelques pixels et le
   sixième est coupé net par « overflow: hidden ». On resserre leur marge
   intérieure plutôt que de laisser une pastille tranchée en deux. */
@media (max-width: 430px) {
	.kf-anim-perimetres [data-el="rolerow"] { padding: 2px !important; }
}

/* ==========================================================================
   Chiffres — la seule bande en aplat de toute la page
   ========================================================================== */

.kf-bande--accent {
	/* Un orange brûlé, pas l'orange vif : le blanc y garde 5:1. */
	background: #c2410c;
	background-image: linear-gradient(135deg, #c2410c, #9a3412);
	color: #fff;
}

.kf-chiffres {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: clamp(28px, 4vw, 48px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.kf-chiffres__valeur {
	display: block;
	font-size: clamp(40px, 5.5vw, 62px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.03em;
	color: #fff;
	font-variant-numeric: tabular-nums;
}
.kf-chiffres__libelle {
	display: block;
	margin-top: 12px;
	color: rgba(255, 255, 255, 0.88);
	font-size: 15px;
	line-height: 1.5;
}

/* ==========================================================================
   Listes de contenu
   ========================================================================== */

.kf-liste { margin: 0; padding: 0; list-style: none; }

/* Le problème : le titre à gauche, les cinq questions en face, numérotées. */
.kf-probleme { display: grid; gap: 36px clamp(40px, 6vw, 96px); }
@media (min-width: 1080px) {
	.kf-probleme { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
.kf-questions {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: question;
	display: grid;
	gap: 10px;
}
.kf-questions li {
	counter-increment: question;
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	align-items: baseline;
	padding: 16px 20px;
	background: var(--kf-surface);
	border: 1px solid var(--kf-filet);
	border-radius: var(--kf-rayon);
	box-shadow: var(--kf-ombre);
	color: var(--kf-texte);
	font-size: 16.5px;
	line-height: 1.5;
}
.kf-questions li::before {
	content: counter(question, decimal-leading-zero);
	color: var(--kf-accent-texte);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
}

/* Les onze rôles. */
.kf-roles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	/* Les filets sont portés par chaque case, pas par un fond de grille vu à
	   travers un écart d'un pixel : onze rôles sur quatre colonnes laissent une
	   case vide, et ce fond l'aurait peinte en bloc. */
	gap: 0;
	border: 1px solid var(--kf-filet);
	border-radius: var(--kf-rayon);
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none;
}
.kf-roles li { background: var(--kf-fond); padding: 18px 20px; box-shadow: 1px 0 0 var(--kf-filet), 0 1px 0 var(--kf-filet); }
.kf-bande--alt .kf-roles li { background: var(--kf-fond-alt); }
.kf-roles__qui { display: block; font-weight: 500; color: var(--kf-texte); }
.kf-roles__quoi { display: block; margin-top: 4px; color: var(--kf-texte-doux); font-size: 14.5px; line-height: 1.5; }

/* Cartes : périmètre, sécurité, canaux. */
.kf-cartes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}
.kf-carte {
	background: var(--kf-surface);
	border: 1px solid var(--kf-filet);
	border-radius: var(--kf-rayon);
	box-shadow: var(--kf-ombre);
	padding: 24px;
}
.kf-carte h3 { font-size: 18px; display: flex; align-items: center; gap: 11px; }
.kf-carte h3 svg { width: 19px; height: 19px; flex: none; color: var(--kf-accent-texte); }
.kf-carte p { margin: 12px 0 0; color: var(--kf-texte-doux); font-size: 15.5px; }
.kf-carte ul { margin: 14px 0 0; padding-left: 1.1em; color: var(--kf-texte-doux); font-size: 15.5px; }
.kf-carte li + li { margin-top: 6px; }

/* Les modules : le cœur en marine, qui porte tout ce que la page vient de
   montrer, puis les trois modules en cartes claires, chacun avec son étiquette.
   Le cœur prend deux colonnes quand il y en a quatre : c'est lui qu'on achète,
   les modules s'y ajoutent. */
.kf-modules {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
	margin: 44px 0 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 1180px) {
	.kf-modules { grid-template-columns: 1.4fr repeat(3, 1fr); }
}
.kf-modules .kf-carte { display: flex; flex-direction: column; }
.kf-carte--coeur { border-color: transparent; }
.kf-carte--coeur h3 { font-size: 21px; }
.kf-etiquette {
	align-self: flex-start;
	margin-bottom: 16px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--kf-accent-voile);
	color: var(--kf-accent-texte);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Les écrans des Fonctions, posés sur la page claire : l'ombre les décolle du
   fond, comme le KarBoard de la bannière. */
.kf-duo .kf-anim { border-radius: 18px; box-shadow: var(--kf-ombre-ecran); overflow: hidden; }

/* ==========================================================================
   Formulaire
   ========================================================================== */

.kf-form {
	margin-top: 36px;
	padding: clamp(22px, 3vw, 36px);
	background: var(--kf-surface);
	border: 1px solid var(--kf-filet);
	border-radius: var(--kf-rayon-l);
	box-shadow: var(--kf-ombre);
}
.kf-form__grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
}
.kf-champ--large { grid-column: 1 / -1; }

.kf-form label {
	display: block;
	margin-bottom: 7px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--kf-texte);
}
.kf-form .kf-facultatif { color: var(--kf-texte-faible); font-weight: 400; }

.kf-form input,
.kf-form textarea {
	width: 100%;
	padding: 12px 14px;
	background: var(--kf-champ);
	border: 1px solid var(--kf-filet);
	border-radius: var(--kf-rayon);
	color: var(--kf-texte);
	font: inherit;
	font-size: 16px;
	transition: border-color .18s ease, background-color .18s ease;
}
.kf-form textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.kf-form input::placeholder, .kf-form textarea::placeholder { color: var(--kf-texte-faible); }
.kf-form input:hover, .kf-form textarea:hover { border-color: var(--kf-filet-fort); }
.kf-form input:focus, .kf-form textarea:focus {
	border-color: var(--kf-accent);
	background: var(--kf-champ);
	outline: none;
	box-shadow: 0 0 0 3px var(--kf-accent-voile);
}

.kf-form__note { margin-top: 18px; color: var(--kf-texte-faible); font-size: 14px; max-width: 60ch; }

/* Piège à robots : invisible à l'œil et hors du parcours au clavier, mais pas
   « display: none », que les remplisseurs automatiques ignorent. */
.kf-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   Coordonnées, pied
   ========================================================================== */

.kf-contact-infos {
	display: grid;
	gap: 22px;
	margin: 0;
	padding: clamp(22px, 2.6vw, 30px);
	border-radius: var(--kf-rayon-l);
}
.kf-contact-infos dt {
	display: flex; align-items: center; gap: 10px;
	font-size: 14px; font-weight: 500; color: var(--kf-texte-doux);
}
.kf-contact-infos dt svg { width: 17px; height: 17px; color: var(--kf-accent-texte); flex: none; }
.kf-contact-infos dd { margin: 5px 0 0 27px; font-size: 16.5px; }

/* Le pied est marine (classe kf-sombre posée dans le gabarit) : il ferme la
   page comme la barre l'ouvre. */
.kf-pied {
	padding: 44px 0;
	color: var(--kf-texte-faible);
	font-size: 14.5px;
}
.kf-pied__rang { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.kf-pied a { color: var(--kf-texte-doux); text-decoration: none; }
.kf-pied a:hover { color: var(--kf-accent-texte); text-decoration: underline; }
.kf-pied__fin { margin-left: auto; }

/* ==========================================================================
   Tarifs — les réglages à gauche, le récapitulatif qui suit à droite
   ==========================================================================
   Le récapitulatif colle au défilement : on règle en haut de la colonne de
   gauche et on lit le total en face, sans faire l'aller-retour. Comme pour la
   grande vue du Parcours, aucun ancêtre ne doit passer en « overflow: hidden »,
   qui deviendrait le conteneur de défilement et décrocherait le collage. */

.kf-tarifs {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
	align-items: start;
	gap: clamp(20px, 2.6vw, 36px);
	margin-top: clamp(36px, 5vw, 56px);
}

/* -- un réglage -- */
.kf-reglage {
	background: var(--kf-surface);
	border: 1px solid var(--kf-filet);
	border-radius: var(--kf-rayon);
	box-shadow: var(--kf-ombre);
	padding: 22px clamp(18px, 2.4vw, 26px);
}
.kf-reglage + .kf-reglage { margin-top: 16px; }

.kf-reglage__rang { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.kf-reglage__nom { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }

.kf-reglage__saisie {
	width: 104px;
	flex: none;
	padding: 10px 12px;
	background: var(--kf-champ);
	border: 1px solid var(--kf-filet);
	border-radius: var(--kf-rayon);
	color: var(--kf-texte);
	font: inherit;
	font-size: 17px;
	font-variant-numeric: tabular-nums;
	text-align: center;
	transition: border-color .18s ease, background-color .18s ease;
}
.kf-reglage__saisie:hover { border-color: var(--kf-filet-fort); }
.kf-reglage__saisie:focus {
	border-color: var(--kf-accent);
	background: var(--kf-champ);
	outline: none;
	box-shadow: 0 0 0 3px var(--kf-accent-voile);
}

.kf-reglage__note {
	margin: 10px 0 0;
	max-width: 52ch;
	color: var(--kf-texte-doux);
	font-size: 14.5px;
	line-height: 1.55;
}

.kf-reglage__curseur {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 28px; /* la zone de prise, plus haute que la piste */
	margin-top: 14px;
	background: transparent;
	cursor: pointer;
}
.kf-reglage__curseur::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--kf-filet); }
.kf-reglage__curseur::-moz-range-track { height: 6px; border-radius: 999px; background: var(--kf-filet); }
.kf-reglage__curseur::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--kf-accent); }
.kf-reglage__curseur::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 22px; height: 22px;
	margin-top: -8px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--kf-accent);
	box-shadow: 0 0 0 1px var(--kf-filet-fort), 0 1px 4px rgba(15, 27, 45, 0.25);
	transition: transform .15s ease;
}
.kf-reglage__curseur::-moz-range-thumb {
	width: 16px; height: 16px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--kf-accent);
	box-shadow: 0 0 0 1px var(--kf-filet-fort), 0 1px 4px rgba(15, 27, 45, 0.25);
}
.kf-reglage__curseur:hover::-webkit-slider-thumb { transform: scale(1.1); }
.kf-reglage__curseur:focus-visible { outline: none; }
.kf-reglage__curseur:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--kf-accent-voile), 0 0 0 1px var(--kf-accent-texte); }
.kf-reglage__curseur:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--kf-accent-voile), 0 0 0 1px var(--kf-accent-texte); }

.kf-reglage__bornes {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	color: var(--kf-texte-faible);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

/* -- les modules --
   Un fieldset qui prend l'habit d'un réglage. Chaque module est une case à
   cocher entière : la ligne complète est la cible, pas le seul carré. */
fieldset.kf-reglage { margin: 16px 0 0; min-inline-size: 0; }
.kf-modules-choix legend { float: left; padding: 0; }
.kf-modules-choix .kf-reglage__rang + .kf-reglage__note { clear: both; }
.kf-offert {
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--kf-accent-voile);
	color: var(--kf-accent-texte);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
}
.kf-modules-choix__liste { display: grid; gap: 10px; margin-top: 18px; }
.kf-module-choix {
	position: relative;
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr) auto;
	gap: 14px;
	align-items: start;
	padding: 14px 16px;
	border: 1px solid var(--kf-filet);
	border-radius: var(--kf-rayon);
	cursor: pointer;
	transition: border-color .18s ease, background-color .18s ease;
}
.kf-module-choix:hover { border-color: var(--kf-filet-fort); background: var(--kf-surface-haute); }
.kf-module-choix:has(input:checked) { border-color: var(--kf-accent); background: rgba(249, 115, 22, 0.05); }
.kf-module-choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kf-module-choix__case {
	width: 22px; height: 22px;
	margin-top: 1px;
	border: 1.5px solid var(--kf-filet-fort);
	border-radius: 6px;
	background: var(--kf-surface);
	transition: background-color .15s ease, border-color .15s ease;
}
.kf-module-choix input:checked + .kf-module-choix__case {
	border-color: var(--kf-accent);
	background: var(--kf-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314161c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.kf-module-choix input:focus-visible + .kf-module-choix__case { outline: 2px solid var(--kf-accent-texte); outline-offset: 2px; }
.kf-module-choix__nom { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.kf-module-choix__nom svg { width: 17px; height: 17px; color: var(--kf-accent-texte); flex: none; }
.kf-module-choix__texte { display: block; margin-top: 3px; color: var(--kf-texte-doux); font-size: 14px; line-height: 1.5; }
.kf-module-choix__prix { color: var(--kf-accent-texte); font-size: 14px; font-weight: 600; white-space: nowrap; }

/* « Bêta » : une pastille détourée, pas un aplat — elle informe sans faire
   concurrence à l'étiquette « Offert ». */
.kf-beta {
	display: inline-flex;
	align-items: center;
	margin-left: 8px;
	padding: 2px 8px;
	border: 1px solid var(--kf-filet-fort);
	border-radius: 999px;
	color: var(--kf-texte-doux);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.5;
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;
}
.kf-sombre .kf-beta { border-color: var(--kf-filet-fort); color: var(--kf-texte-doux); }
.kf-note-beta {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 18px 0 0;
	color: var(--kf-texte-doux);
	font-size: 14.5px;
	line-height: 1.55;
}
.kf-note-beta .kf-beta { margin-left: 0; flex: none; }
.kf-reglage .kf-note-beta { margin-top: 10px; }

/* L'annonce de l'offre de lancement, sous le chapô des Tarifs. */
.kf-annonce {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 24px;
	padding: 12px 18px;
	border: 1px solid rgba(249, 115, 22, 0.35);
	border-radius: var(--kf-rayon);
	background: rgba(249, 115, 22, 0.07);
	color: var(--kf-texte);
	font-size: 15.5px;
}
.kf-annonce svg { width: 20px; height: 20px; flex: none; color: var(--kf-accent-texte); }

@media (max-width: 460px) {
	.kf-module-choix { grid-template-columns: 22px minmax(0, 1fr); }
	.kf-module-choix__prix { grid-column: 2; }
}

/* -- la bascule annuelle -- */
/* La case reste dans le flux et garde le clavier : elle est transparente, pas
   « display: none », qui la retirerait du parcours de tabulation. */
.kf-bascule {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	margin-top: 16px;
	padding: 20px clamp(18px, 2.4vw, 26px);
	background: var(--kf-surface);
	border: 1px solid var(--kf-filet);
	border-radius: var(--kf-rayon);
	cursor: pointer;
}
.kf-bascule__nom { display: block; font-weight: 500; }
.kf-bascule__note { display: block; margin-top: 4px; color: var(--kf-texte-doux); font-size: 14.5px; }

.kf-bascule input {
	position: absolute;
	width: 1px; height: 1px;
	opacity: 0;
}
.kf-bascule__piste {
	position: relative;
	flex: none;
	width: 48px; height: 27px;
	border: 1px solid var(--kf-filet);
	border-radius: 999px;
	background: var(--kf-surface-haute);
	transition: background-color .2s ease, border-color .2s ease;
}
.kf-bascule__piste::after {
	content: '';
	position: absolute;
	top: 3px; left: 3px;
	width: 19px; height: 19px;
	border-radius: 50%;
	background: var(--kf-texte-doux);
	transition: transform .2s ease, background-color .2s ease;
}
.kf-bascule input:checked + .kf-bascule__piste { background: var(--kf-accent); border-color: var(--kf-accent); }
.kf-bascule input:checked + .kf-bascule__piste::after { transform: translateX(21px); background: #14161c; }
.kf-bascule input:focus-visible + .kf-bascule__piste { outline: 2px solid var(--kf-accent-texte); outline-offset: 3px; }

/* -- le détail, tranche par tranche -- */
.kf-detail {
	margin-top: 16px;
	background: var(--kf-surface);
	border: 1px solid var(--kf-filet);
	border-radius: var(--kf-rayon);
}
.kf-detail summary {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 18px clamp(18px, 2.4vw, 26px);
	color: var(--kf-accent-texte);
	font-weight: 500;
	cursor: pointer;
	list-style: none;
}
.kf-detail summary::-webkit-details-marker { display: none; }
.kf-detail summary::before {
	content: '';
	border-left: 6px solid currentColor;
	border-top: 4.5px solid transparent;
	border-bottom: 4.5px solid transparent;
	transition: transform .2s ease;
}
.kf-detail[open] summary::before { transform: rotate(90deg); }
.kf-detail__corps { padding: 0 clamp(18px, 2.4vw, 26px) 8px; }

.kf-detail__bloc + .kf-detail__bloc { margin-top: 26px; }
.kf-detail__titre { font-size: 15px; font-weight: 600; color: var(--kf-texte); }

/* Un tableau ne se replie pas : sous sa largeur utile, il défile dans son
   propre cadre plutôt que de pousser la page entière de côté. */
.kf-detail__defilant { overflow-x: auto; margin-top: 10px; }
.kf-detail__table { width: 100%; border-collapse: collapse; font-size: 14px; white-space: nowrap; }
.kf-detail__table th {
	padding: 0 0 8px;
	color: var(--kf-texte-faible);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-align: left;
}
.kf-detail__table td { padding: 9px 0; border-top: 1px solid var(--kf-filet); color: var(--kf-texte-doux); }
.kf-detail__table th + th, .kf-detail__table td + td { padding-left: 18px; }
.kf-detail__nombre { text-align: right; font-variant-numeric: tabular-nums; }
.kf-detail__somme { color: var(--kf-texte); font-weight: 500; }
.kf-detail__remise { color: var(--kf-accent-texte); }
.kf-detail__pleine { color: var(--kf-texte-faible); }
.kf-detail__plancher { color: var(--kf-texte-faible); font-size: 12.5px; }

/* -- le récapitulatif --
   Il reste marine sur la page claire : c'est la pièce qu'on vient lire, et ses
   textes sont écrits en blanc. Le gabarit lui pose la portée kf-sombre. */
.kf-recap {
	position: sticky;
	top: calc(var(--kf-barre) + 20px);
	background-image: linear-gradient(135deg, #1c2c4e, #24386a);
	border: 1px solid var(--kf-filet);
	border-radius: var(--kf-rayon-l);
	padding: clamp(24px, 2.6vw, 30px);
}
.kf-recap__titre { font-size: 17px; letter-spacing: 0.02em; }

.kf-recap__lignes { margin: 22px 0 0; }
.kf-recap__lignes + .kf-recap__lignes { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.14); }

.kf-recap__ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 15px; }
.kf-recap__ligne + .kf-recap__ligne { margin-top: 10px; }
.kf-recap__ligne[hidden] { display: none; }
.kf-recap__ligne dt { color: rgba(255, 255, 255, 0.72); }
.kf-recap__ligne dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.kf-recap__ligne--gain dd, .kf-recap__ligne--gain dt { color: var(--kf-accent-clair); }

.kf-recap__total { margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.kf-recap__etiquette {
	display: block;
	color: rgba(255, 255, 255, 0.6);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.kf-recap__montant {
	margin-top: 8px;
	color: #fff;
	font-size: clamp(30px, 3.4vw, 40px);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}
.kf-recap__periode { margin: 8px 0 0; color: rgba(255, 255, 255, 0.72); font-size: 14.5px; }

.kf-recap__paves { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.kf-recap__pave { background: rgba(255, 255, 255, 0.07); border-radius: var(--kf-rayon); padding: 14px 16px; }
/* En facturation annuelle, le pave  Par mois  disparait : le montant est regle
   d avance, un equivalent mensuel affiche a cote laisserait croire le contraire.
   La regle explicite est necessaire : un enfant de grille garde son affichage
   malgre attribut hidden si une regle plus specifique le repose. */
.kf-recap__pave[hidden] { display: none; }
.kf-recap__paves--seul { grid-template-columns: 1fr; }
.kf-recap__valeur {
	display: block;
	margin-top: 6px;
	color: #fff;
	font-size: 19px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.kf-recap__mention { display: block; margin-top: 4px; color: rgba(255, 255, 255, 0.6); font-size: 12.5px; line-height: 1.45; }

.kf-recap .kf-bouton { width: 100%; justify-content: center; margin-top: 22px; }

.kf-tarifs__pied { margin-top: 26px; color: var(--kf-texte-faible); font-size: 14px; max-width: 70ch; }

/* Sous 1080 px la colonne de droite n'a plus sa largeur utile : le
   récapitulatif passe sous les réglages et cesse de coller — collé, il
   masquerait ce qu'on règle. */
@media (max-width: 1080px) {
	.kf-tarifs { grid-template-columns: 1fr; }
	.kf-recap { position: static; }
}

@media (max-width: 460px) {
	.kf-reglage__rang { align-items: flex-start; flex-direction: column; gap: 12px; }
	.kf-reglage__saisie { width: 100%; }
	.kf-recap__paves { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Pages courtes : merci, erreur, 404
   ========================================================================== */

.kf-reponse { padding: clamp(72px, 12vh, 140px) 0; }
.kf-reponse .kf-titre { max-width: 24ch; }
/* La section prend toute la hauteur libre entre la barre et le pied, et y
   centre son contenu : sinon il restait collé en haut, sur un grand vide. */
main:has(> .kf-reponse) { display: flex; flex-direction: column; }
.kf-reponse { flex: 1 0 auto; display: flex; align-items: center; }
.kf-reponse > .kf-conteneur { width: 100%; }
.kf-reponse__grille { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) {
	.kf-reponse__grille { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); }
}
.kf-reponse__signe { display: flex; justify-content: center; }

/* « 404 » en détouré : il se lit sans crier, et ne ressemble pas à un bouton. */
.kf-signe-code {
	font-size: clamp(110px, 16vw, 220px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.05em;
	color: transparent;
	-webkit-text-stroke: 2px var(--kf-filet-fort);
	font-variant-numeric: tabular-nums;
	user-select: none;
}
.kf-signe-icone {
	display: grid;
	place-items: center;
	width: clamp(140px, 16vw, 200px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--kf-accent-voile);
	color: var(--kf-accent-texte);
	box-shadow: 0 0 0 14px rgba(249, 115, 22, 0.06);
}
.kf-signe-icone svg { width: 44%; height: 44%; }
@media (max-width: 899px) {
	.kf-reponse__signe { justify-content: flex-start; order: -1; }
	.kf-signe-code { font-size: 96px; }
	.kf-signe-icone { width: 96px; box-shadow: 0 0 0 8px rgba(249, 115, 22, 0.06); }
}

/* ==========================================================================
   Apparition au défilement
   ==========================================================================
   Une fois, doucement, et jamais en boucle. Sans JavaScript, rien n'est masqué :
   la classe « visible » est posée par site.js, et son absence n'affiche rien de
   moins — c'est la présence de « .kf-reveler » qui masque, et site.js la retire
   au premier passage. */

.kf-reveler {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .6s ease, transform .6s ease;
}
.kf-reveler--vu { opacity: 1; transform: none; }

/* Le paragraphe ci-dessus dit vrai depuis cette règle seulement. « opacity: 0 »
   attend que site.js pose « --vu » : script coupé, la page entière restait
   blanche — pas dégradée, vide. Là où rien n'exécute de script, il n'y a donc
   rien à révéler, et rien n'est masqué. */
@media (scripting: none) {
	.kf-reveler { opacity: 1; transform: none; }
}

/* ==========================================================================
   Moins de mouvement
   ==========================================================================
   Ce n'est pas un confort : c'est une demande de personnes que le mouvement
   rend malades. Tout s'arrête — y compris les six animations, qui sont dans la
   page et non dans un cadre étranger, donc atteintes par cette règle. */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
	.kf-reveler { opacity: 1; transform: none; }
	.kf-pastilles li { opacity: 1; transform: none; pointer-events: auto; }
}