/* Les composants de la charte (cahier des charges §5.5), en registre calme par défaut.
   Le registre accent (.accent) se pose écran par écran : un seul aplat Coq par écran. */

/* Le filet d'état : une ligne de 13 px en Brume, alignée à gauche. Elle murmure. */
.k-filet {
	font-size: 13px;
	color: var(--brume);
}

/* Les deux états où le filet cesse de murmurer (cahier §6, tableau « états du filet »).
   « veille » est en Coq PROFOND et non en Coq : un texte en Coq sur Craie fait 1,82:1, donc
   illisible (§5.8). Le kit visuel écrit `--coq` dans sa première définition et se corrige
   lui-même dans sa section accent — c'est la version corrigée qu'on reprend. */
.k-filet.veille  { color: var(--coq-profond); }
.k-filet.franchi { color: var(--alerte); }

/* Le séparateur « · » entre les segments du filet : présent, mais en retrait */
.k-filet .k-sep { opacity: .5; }

/* La feuille : surface Lait, rayon 12, ombre unique. Le contenant de tout ce qui n'est pas
   l'accueil. Elle monte depuis le bas en 240 ms.
   min-width: 0 est le garde-fou de débordement du produit entier : sans lui, un contenu plus
   large que la feuille (un tableau, une longue chaîne insécable) pousse la page et sort une
   barre de défilement horizontale. Le défilement d'un tableau appartient à son porteur
   (.k-table-porteur ci-dessous), pas à la feuille : sinon le titre et la note de la section
   défilent latéralement avec le tableau. */
.k-feuille {
	min-width: 0;
	background: var(--lait);
	border-radius: 12px;
	box-shadow: var(--ombre);
	padding: 24px;
	animation: k-montee 240ms cubic-bezier(.2, .8, .2, 1);
}

.k-feuille.accent { border-top: 3px solid var(--coq); }

@keyframes k-montee {
	from { transform: translateY(16px); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}

/* Le rythme intérieur de la feuille, en UN SEUL endroit : sans lui, un titre hors tête touche
   son contenu (base.css met tout à margin: 0), et chaque écran inventait sa valeur — 8 px ici,
   16 là, 0 ailleurs. */
.k-feuille > * + * { margin-top: 16px; }

/* Ce qui suit un bloc de données respire davantage : une note ou un pied qui démarre sur le
   dernier filet d'un tableau se lit comme une ligne de plus du tableau.
   :where() garde la spécificité au plancher (0,1,0) : une feuille d'écran peut surcharger. */
.k-feuille > :where(ul, table, .k-table-porteur, form) + :where(p, .k-note, .k-aide, footer),
.k-feuille > footer { margin-top: 24px; }

/* La tête de carte, une fois pour toutes : titre à gauche, repère à droite. Les .xxx-tete des
   écrans ne gardent que ce qui leur est propre — typiquement leur passage en colonne sur
   mobile, d'où le :where() : en (0,1,1) cette règle écraserait ces surcharges en (0,1,0). */
.k-feuille > :where(header) {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}

/* L'aide dépliable : là où vont les notes qui expliquent au lieu d'agir.
   Une par feuille au maximum, fermée par défaut. */
.k-aide { font-size: 13px; color: var(--brume); }

.k-aide > summary {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px; /* cible tactile, comme toute action du produit */
	cursor: pointer;
	list-style: none;
	text-decoration: underline;
	text-decoration-color: var(--filet);
	text-underline-offset: 3px;
}

.k-aide > summary::-webkit-details-marker { display: none; }
.k-aide p + p { margin-top: 8px; }

/* La ligne de liste : 56 px de haut, un filet Brume à 20 % en séparateur.
   Nom à gauche en 17, donnée en Plex Mono 15, action à droite. */
.k-feuille ul { list-style: none; }

.k-ligne {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 56px;
	padding: 8px 0;
	border-bottom: 1px solid var(--filet);
}

.k-ligne:last-child { border-bottom: none; }

.k-ligne:hover { background: var(--craie); }

/* Registre accent de la ligne : elle désigne LA ligne sur laquelle agir maintenant.
   Fond Coq voile + liseré Coq de 3 px à gauche (§5.5). Le liseré est une ombre interne et non
   un border-left, pour ne pas décaler le contenu de 3 px par rapport aux lignes calmes. */
.k-ligne.accent {
	background: var(--coq-voile);
	box-shadow: inset 3px 0 0 var(--coq);
	border-bottom-color: transparent;
}

.k-ligne.accent:hover { background: var(--coq-voile); }

.k-ligne.accent .k-donnee { color: var(--coq-profond); }

.k-ligne .k-nom { flex: 1; }

.k-ligne .k-note {
	display: block;
	font-size: 13px;
	color: var(--brume);
}

/* La note d'explication en bas d'une section. Elle n'existait QUE sous .k-ligne : les
   paragraphes autonomes sortaient donc en 17 px Encre, plus forts que les données qu'ils
   commentent — ils se lisaient comme des notes de développeur oubliées dans la page. */
.k-note {
	font-size: 13px;
	color: var(--brume);
}

/* Le bouton. Le libellé dit ce qui va se passer, jamais « Valider ».
   44 px de haut : l'interface se pilote avec un enfant dans les bras (§5.8). */
.k-btn {
	display: inline-block;
	min-height: 44px;
	padding: 10px 20px;
	border: 1px solid var(--encre);
	border-radius: 8px;
	background: var(--encre);
	color: var(--craie);
	font-family: var(--police-texte);
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
}

.k-btn.secondaire {
	background: none;
	color: var(--encre);
	border-color: var(--brume);
}

.k-btn.accent {
	background: var(--coq);
	color: var(--encre);
	border-color: var(--coq);
	font-weight: 700;
}

.k-btn.secondaire.accent {
	background: none;
	color: var(--coq-profond);
	border-color: var(--coq);
	font-weight: 600;
}

/* Les survols, repris du kit visuel (ui-kit.html) — ils avaient été oubliés au portage.
   Le --survol du kit se traduit en Craie, comme .k-ligne:hover. Desktop seulement : le
   tactile n'a pas de survol, l'état enfoncé natif suffit. */
.k-btn:hover                  { opacity: .85; }
.k-btn.secondaire:hover       { background: var(--craie); opacity: 1; }
.k-btn.accent:hover           { opacity: 1; filter: brightness(.94); }
.k-btn.secondaire.accent:hover { background: var(--coq-voile); filter: none; }

/* Le lien secondaire — la sortie d'une confirmation (« Annuler »), jamais la destination.
   Ce n'est pas un bouton : pas de cadre, pas de surface, pas de poids. Il n'a volontairement
   PAS de variante .accent : le lien secondaire ne prend jamais l'accent.
   44 px de haut quand même : c'est une cible tactile comme une autre.
   Texte en Encre : le retrait se dit par l'absence de cadre et par la couleur du soulignement,
   jamais en rendant le mot pâle — c'est le dernier endroit du produit où mettre du texte clair,
   puisque c'est le seul moyen de renoncer à un acte irréversible. */
.k-lien {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	border: none;
	background: none;
	color: var(--encre);
	font-family: var(--police-texte);
	font-size: 15px;
	text-decoration: underline;
	text-decoration-color: var(--brume);
	text-underline-offset: 3px;
	cursor: pointer;
}

.k-lien:hover { text-decoration-color: var(--encre); }

/* La pastille d'état : 8 px de diamètre plus un libellé en 13 px */
.k-pastille {
	font-size: 13px;
	white-space: nowrap;
}

.k-pastille::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 6px;
	background: currentColor;
	vertical-align: 1px;
}

.k-pastille.brume { color: var(--brume); }        /* en attente */
.k-pastille.coq   { color: var(--coq-profond); }  /* en cours */
.k-pastille.sur   { color: var(--sur); }          /* fait */
.k-pastille.alerte{ color: var(--alerte); }       /* bloqué */

/* Le champ : pas de bordure, un filet inférieur qui s'épaissit au focus (voir la règle de focus
   plus bas — c'est le seul signal, et il est en Encre).
   textarea est entré dans le sélecteur au J9 : le dossier de santé est le premier écran à en
   porter (allergies, conduite à tenir d'un PAI), et sans lui un texte long sortait en Times, avec
   une bordure de navigateur — étranger à « encre sur craie ». La règle du filet inférieur vaut
   pour lui comme pour les autres ; seule la hauteur est à sa charge (attribut rows). */
.k-champ {
	display: block;
	font-size: 13px;
	color: var(--brume);
}

.k-champ input, .k-champ select, .k-champ textarea {
	display: block;
	width: 100%;
	min-height: 44px; /* cible tactile, comme .k-btn et .k-lien (§5.8) */
	margin-top: 4px;
	padding: 8px 0;
	border: none;
	border-bottom: 1px solid var(--brume);
	background: none;
	color: var(--encre);
	font-family: var(--police-texte);
	font-size: 17px;
	caret-color: var(--coq);
}

/* LE geste de focus d'un champ : son filet inférieur s'épaissit et passe en Encre. C'est le
   seul signal, et c'est voulu — base.css retire l'anneau sur les champs, parce qu'un rectangle
   flottant autour d'un champ pleine largeur est laid et redondant.
   Deux pixels et pas un : à un seul, l'épaississement ne se voit pas ; et l'Encre monte à
   17:1 contre les 3:1 exigés d'un indicateur non textuel, donc le focus se voit vraiment.
   ⚠️ Ne JAMAIS remettre `outline: none` sur `:focus` ici : cette règle est plus spécifique que
   le `:focus-visible` de base.css et priverait tous les champs du produit de tout indicateur —
   c'est le défaut qui vivait dans le kit jusqu'au 12/08. */
.k-champ input:focus, .k-champ select:focus, .k-champ textarea:focus {
	border-bottom-width: 2px;
	border-bottom-color: var(--encre);
	padding-bottom: 7px; /* 8 − 1 : le filet gagne un pixel, la hauteur du champ ne bouge pas */
}

/* .k-donnee seule ne suffit pas sur un champ de saisie : la règle .k-champ input ci-dessus est
   plus spécifique et lui reprend la police. Or tout montant, toute durée, tout numéro se saisit
   en Plex Mono tabulaire — sinon l'erreur de frappe dans une colonne de chiffres devient
   invisible. */
.k-champ input.k-donnee {
	font-family: var(--police-donnees);
	font-variant-numeric: tabular-nums;
}

/* La trace : sous une donnée modifiée à la main. Discrète, permanente, jamais masquée. */
.k-trace { font-size: 13px; color: var(--brume); }

/* La confirmation d'un acte engageant.
   S'ajoute à une feuille : <div class="k-feuille k-confirm">. La feuille porte déjà la surface,
   le rayon, l'ombre et la montée de 240 ms ; on n'ajoute ici que la largeur et le centrage.
   La variante .accent reprend le filet Coq de 3 px de .k-feuille.accent, et son bouton passe en
   .k-btn.accent. */
.k-confirm {
	max-width: 440px;
	margin-inline: auto;
}

.k-confirm .k-quoi {
	font-size: 17px;
	margin-bottom: 24px;
}

/* Le bouton d'abord, le lien de sortie ensuite : l'ordre de lecture est l'ordre d'intention */
.k-confirm .k-actions {
	display: flex;
	align-items: center;
	gap: 24px;
}

/* La balise pleine : l'état du filet qui doit se voir depuis l'autre bout de la pièce.
   Fond Coq + Encre en accent ; la version Alerte reste un filet rouge, jamais un aplat. */
.k-balise {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 4px;
	background: var(--coq);
	color: var(--encre);
	font-size: 13px;
	font-weight: 700;
}

.k-balise.alerte {
	background: none;
	border: 1px solid var(--alerte);
	color: var(--alerte);
}

/* Le badge plein : la pastille en registre accent, réservée aux échéances et aux compteurs
   qui appellent une décision. Un simple constat reste une pastille de 8 px. */
.k-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 10px;
	background: var(--coq);
	color: var(--encre);
	font-size: 13px;
	font-weight: 700;
}

/* Badge en version douce : quand l'écran porte déjà son unique aplat Coq ailleurs et qu'un
   second compteur doit rester lisible sans le concurrencer (§5.2 bis, « un seul aplat par écran »). */
.k-badge.douce {
	background: var(--coq-voile);
	color: var(--coq-profond);
}

/* Le voile : fond Coq à 12 %, pour le bloc que l'accent concerne. Un seul par écran. */
.k-voile {
	background: var(--coq-voile);
	border-radius: 8px;
}

/* L'orbe Coco : 88 px, Encre, le seul élément expressif du produit. Au repos il respire,
   à l'écoute il pulse en Coq. */
/* border: none est indispensable, pas cosmétique : l'orbe est un <button>, et la bordure par
   défaut du navigateur, avec box-sizing: border-box, mange 2 px de chaque côté — le disque
   tombait à 84 px, cerclé de gris. Le seul élément expressif du produit doit faire ses 88 px. */
.k-orbe {
	width: 88px;
	height: 88px;
	border: none;
	border-radius: 50%;
	background: var(--encre);
	cursor: pointer;
	animation: k-respiration 4s ease-in-out infinite;
}

.k-orbe.ecoute {
	background: var(--coq);
	animation: k-pulsation 1.2s ease-in-out infinite;
}

@keyframes k-respiration {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.03); }
}

@keyframes k-pulsation {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.08); }
}

/* Le champ d'intention : sous l'orbe. Pas de bordure, un filet inférieur qui s'allume au focus,
   le marqueur › à gauche. */
.k-intention {
	display: flex;
	align-items: center;
	min-height: 44px; /* cible tactile (§5.8) : c'est le champ le plus utilisé du produit */
	gap: 8px;
	width: min(420px, 100%);
	border-bottom: 1px solid var(--brume);
	font-size: 17px;
}

/* Même geste que .k-champ input — un seul signal de focus dans tout le produit : le filet
   s'épaissit et passe en Encre, jamais un anneau autour du champ. */
.k-intention:focus-within {
	border-bottom-width: 2px;
	border-bottom-color: var(--encre);
}

.k-intention .k-marqueur { color: var(--brume); }

.k-intention input {
	flex: 1;
	padding: 8px 0;
	border: none;
	background: none;
	color: var(--encre);
	font-family: var(--police-texte);
	font-size: 17px;
	caret-color: var(--coq);
}

/* Pas d'`outline: none` : le porteur montre le focus par son filet (:focus-within ci-dessus),
   et l'anneau du navigateur reste disponible pour qui navigue au clavier. */

/* La suggestion en ligne : UNE complétion en fantôme dans le champ, jamais une liste (§6).
   Le porteur enveloppe l'input ; le fantôme se superpose dessous, en deux morceaux : la saisie
   en transparent — elle tient la largeur exacte du texte tapé — puis le reste en Brume.
   pointer-events: none : le fantôme ne vole jamais un clic destiné au champ. */
.k-saisie {
	position: relative;
	flex: 1;
}

.k-saisie input { width: 100%; }

.k-suggestion {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	white-space: pre;
	overflow: hidden;
	pointer-events: none;
	font-size: 17px;
}

.k-suggestion .k-tape { color: transparent; }
.k-suggestion .k-reste { color: var(--brume); }

/* L'écran vide : une invitation à agir, jamais un trou */
.k-vide {
	padding: 24px 0;
	color: var(--brume);
}

/* La barre de progression des appels serveur (pilotée par common.js) */
.loader-bar {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0;
	background: var(--coq);
	z-index: 10;
}

/* Le bandeau de retour (piloté par common.js). Deux registres, deux couleurs, toujours en
   filet, jamais en aplat : une erreur (Alerte) ne se confond pas avec un succès (Sûr).
   Il se pose SOUS la barre du haut (76 px = 16 + 44 + 8 + 1 de filet, plus un souffle) : à
   top: 16px il recouvrait les liens de menu et interceptait leurs clics.
   La largeur suit la colonne de contenu de 880 px au lieu d'un pourcentage de fenêtre : avec
   left: 50% et un max-width en %, un message long ne s'élargissait pas, il se repliait en
   colonne étroite et haute au milieu de l'écran. */
.k-bandeau {
	position: fixed;
	top: 76px;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	gap: 16px;
	width: fit-content;
	max-width: min(880px, calc(100% - 32px));
	margin-inline: auto;
	padding: 12px 20px;
	background: var(--lait);
	border-left: 3px solid var(--brume);
	border-radius: 8px;
	box-shadow: var(--ombre);
	font-size: 15px;
	z-index: 11;
}

/* Sur le châssis nu (l'accueil), aucune barre ne surplombe : le bandeau reprend le haut, mais
   décalé du filet d'état qui occupe déjà top: 16px à gauche. */
.k-page.plein ~ .k-bandeau,
body:has(.k-page.plein) .k-bandeau { top: 56px; }

.k-bandeau.erreur { border-left-color: var(--alerte); }
.k-bandeau.succes { border-left-color: var(--sur); }

/* La croix de fermeture : une erreur ne s'auto-masque plus (elle dit quoi réparer, elle doit
   pouvoir se relire), il faut donc un moyen de la refermer. */
.k-bandeau-ferme {
	flex: none;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 4px;
	background: none;
	color: var(--encre);
	font-family: var(--police-texte);
	font-size: 21px;
	line-height: 1;
	cursor: pointer;
}

.k-bandeau-ferme:hover { background: var(--craie); }

/* Le tableau de données, et son PORTEUR de défilement.
   Le porteur existe parce que poser le défilement sur la feuille elle-même faisait défiler le
   titre de section et la note EN MÊME TEMPS que le tableau, et reléguait la barre de
   défilement tout en bas de la carte, où personne ne la voit. Il est focusable et annoncé :
   sans ça, les colonnes hors écran sont inatteignables au clavier (§9-5).
   Les cellules coupent les chaînes insécables (un jeton, une empreinte) au lieu de pousser
   la page. */
.k-table-porteur {
	overflow-x: auto;
	max-width: 100%;
}

.k-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.k-table th {
	font-size: 13px;
	font-weight: 500;
	color: var(--brume);
	text-align: left;
	padding: 0 8px 8px; /* même horizontale que les td, et sur la grille de 8 */
	border-bottom: 1px solid var(--filet);
}

.k-table td {
	padding: 8px;
	border-bottom: 1px solid var(--filet);
	overflow-wrap: anywhere;
}

/* Le tableau s'aligne sur le bord de la feuille, comme le titre et la note : sans ça, la
   première colonne démarrait 10 px plus à droite que tout le reste de la carte. */
.k-table th:first-child, .k-table td:first-child { padding-left: 0; }
.k-table th:last-child,  .k-table td:last-child  { padding-right: 0; }

.k-table .num, .k-table td.num {
	font-family: var(--police-donnees);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* Un en-tête n'est jamais une donnée : il s'aligne à droite au-dessus d'une colonne de
   chiffres, mais il garde la police du texte — sinon la ligne d'en-tête sort mi-mono
   mi-proportionnelle selon les colonnes. */
.k-table th.num {
	font-family: var(--police-texte);
	text-align: right;
}

.k-table tr.souci td {
	color: var(--alerte);
}

/* Le repli mobile de la ligne de liste. Une règle qui parle d'un composant partagé vit avec le
   composant, sinon chaque écran la recopie.
   min-width: 0 sur les items : sans lui, un item flex refuse de descendre sous son contenu
   minimal et la ligne déborde de la feuille sur les petits écrans. */
.k-ligne > * { min-width: 0; }

@media (max-width: 640px) {
	.k-ligne { flex-wrap: wrap; }
	.k-ligne .k-nom { flex-basis: 100%; order: 3; }
}