/* Charte Kidorico « encre sur craie ». Cinq couleurs, deux dérivées du Coq, deux statuts.
   Grille de 8 px, contenu à 880 px, une seule ombre.
   Les @font-face vivent dans polices.css, chargée avant cette feuille par le header. */

:root {
	--craie: #F4F3EE;
	--encre: #1A1815;
	/* Brume porte TOUT le texte secondaire du produit : filet d'état, notes, traces, libellés de
	   champs, états vides, en-têtes de tableaux, pied. Le #9A968C de la charte mesurait 2,66:1 sur
	   Craie et 2,85:1 sur Lait — un gris clair sur un beige clair, à 13 px, sur une tablette dans
	   une pièce lumineuse. Assombri d'un cran, au minimum qui passe sur les deux fonds : 4,58:1 et
	   4,91:1. Le retrait continue de se dire par la taille, plus par la pâleur. */
	--brume: #726E64;
	--lait: #FCFBF8;
	--coq: #F2A81D;
	--coq-profond: #8A5A00; /* le Coq en version texte : jamais de texte écrit en Coq */
	--coq-voile: #F4EAD5;
	--alerte: #B4472E;      /* texte et filets, jamais en aplat (hors pastille de 8 px) */
	--sur: #4A7C59;

	--ombre: 0 1px 3px rgba(26, 24, 21, .06);
	--filet: rgba(114, 110, 100, .2); /* Brume à 20 %, le séparateur de listes — suit Brume */

	/* Trois familles, trois rôles, servies depuis /fonts/ (@font-face dans polices.css) */
	--police-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
	--police-texte: "Hanken Grotesk", system-ui, sans-serif;
	--police-donnees: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
	background: var(--craie);
	color: var(--encre);
	font-family: var(--police-texte);
	font-size: 17px;
	line-height: 1.5;
}

/* Échelle : 13 / 15 / 17 / 21 / 28 / 44. Pas de septième taille. */
h1 { font-family: var(--police-display); font-size: 28px; font-weight: 600; }
h2 { font-family: var(--police-display); font-size: 21px; font-weight: 600; }

a { color: inherit; }

/* Tout montant, toute durée, toute date : chiffres tabulaires alignés */
.k-donnee {
	font-family: var(--police-donnees);
	font-size: 15px;
	font-variant-numeric: tabular-nums;
}

/* Focus visible partout, en ENCRE et non en couleur : « encre sur craie » vaut aussi pour le
   focus. Un anneau doré autour d'un bouton jurait avec le reste, et le Coq ne mesure de toute
   façon que 1,82:1 sur Craie — invisible là où il devait signaler.
   L'anneau ne s'applique PAS aux champs de saisie : ceux-là ont déjà leur geste de focus, le
   filet inférieur qui s'épaissit (voir composants.css). Un rectangle flottant autour d'un champ
   pleine largeur est laid et redondant. */
:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }

/* Les champs sont exclus de l'anneau : leur filet inférieur dit le focus, et lui seul. */
.k-champ input:focus-visible,
.k-champ select:focus-visible,
.k-intention input:focus-visible { outline: none; }

/* Lisible par un lecteur d'écran, invisible à l'œil. Pour les légendes de tableaux et les
   libellés que la mise en page rend redondants. */
.k-vh {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.k-page {
	max-width: 880px;
	margin: 0 auto;
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Le gap de .k-page est la SEULE source de l'écart entre deux feuilles. Un <form> qui enveloppe
   les feuilles (le dossier parent) le remet en place : sans lui, ses sections tombaient à 16 px
   quand tous les autres écrans sont à 24. */
.k-page > form {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

@media (max-width: 640px) {
	.k-page { padding: 16px; }
	.k-barre { gap: 16px; padding: 16px 16px 8px; }
	.k-pied { padding: 24px 16px 32px; }
}

/* Le châssis nu de l'accueil : la page occupe toute la hauteur et rien ne la surplombe.
   Le contenu se place au CENTRE OPTIQUE et non au milieu géométrique — le cahier §6 le situe à
   42 % de la hauteur, parce qu'un élément centré à 50 % paraît toujours trop bas.
   La marge basse est en vh et non en px, sinon le rapport ne tient qu'à une seule hauteur
   d'écran : avec 16vh, le centre tombe à 50vh − 8vh + 16px, soit 43 % sur un écran de 900 px
   comme sur un de 1400. Une valeur fixe donnait 46 % ici et 48 % là.
   dvh avant vh : sur iOS, 100vh compte la barre d'adresse et la page dépasse toujours d'un cran.
   La règle vh reste en repli pour les navigateurs qui ignorent dvh. */
.k-page.plein {
	position: relative; /* le filet d'état s'y accroche, pas au document */
	min-height: 100vh;
	min-height: 100dvh;
	justify-content: center;
	align-items: center;
	padding-bottom: 16vh;
	text-align: center;
}

/* La barre du haut : elle murmure, elle n'annonce pas.
   flex-wrap et position ne sont pas cosmétiques :
   - sans wrap, les six entrées de menu réclament ~572 px de largeur minimale, et la barre à elle
     seule posait une barre de défilement horizontale sur TOUTES les pages sous 650 px (mesuré à
     390 px : la page débordait de 182 px, sans qu'aucun tableau y soit pour quelque chose) ;
   - sans position ni z-index, la barre est peinte SOUS le bandeau de retour, qui est en position
     fixe : le bandeau recouvrait les liens de menu et interceptait leurs clics. */
.k-barre {
	position: relative;
	z-index: 12;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 32px;
	max-width: 880px;
	margin: 0 auto;
	padding: 16px 32px 8px;
	border-bottom: 1px solid var(--filet);
	background: var(--craie);
}

.k-marque {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--police-display);
	font-size: 17px;
	font-weight: 700;
	text-decoration: none;
}

.k-marque img { display: block; }

/* La navigation se pousse à DROITE : la marque tient le bord gauche de la colonne de contenu,
   les entrées tiennent le bord droit. Sans ça, marque et menu s'agglutinaient en un seul paquet
   au milieu de l'écran, et la barre ne se lisait pas comme une barre. */
.k-barre nav {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-left: auto;
}

/* Le Kit est un outil d'équipe, pas du produit : il se détache du reste par un filet vertical
   et prend la couleur la plus discrète. */
.k-barre nav a.outil {
	margin-left: 8px;
	padding-left: 24px;
	border-left: 1px solid var(--filet);
}

/* 44 px de haut comme toute cible du produit (§5.8) : le menu se touche avec un enfant dans les
   bras lui aussi. align-items: center recentre le libellé dans la cible agrandie. */
.k-barre nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 15px;
	color: var(--brume);
	text-decoration: none;
}

.k-barre nav a[aria-current="page"] {
	color: var(--encre);
	border-bottom: 2px solid var(--coq);
}

.k-pied {
	max-width: 880px;
	margin: 0 auto;
	padding: 24px 32px 32px;
	font-size: 13px;
	color: var(--brume);
}

/* Une seule famille d'animations ; toutes s'effacent si le visiteur le demande */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}