/* Kizyun — surface de conversation en Material 3
 *
 * Deux décisions portent ce fichier.
 *
 *   1. **Les tokens Material sont dérivés de la palette du produit**, pas des couleurs
 *      d'exemple de Google : le vert de visa devient `primary`, le papier froid devient
 *      `surface-container`, le rouge d'écart devient `error`. Un écran mi-Material
 *      mi-registre serait plus laid que les deux séparément.
 *   2. **La chasse fixe ne sert qu'aux identifiants exacts** — code de la norme (`A.8.2`,
 *      `FOR-SMSI-001`) *ou* clé d'objet (`code-consultation-56207`). Sa justification n'est
 *      pas l'origine de la chaîne mais son usage : un identifiant se **compare et se copie**,
 *      il ne se lit pas. Formulée « codes de la norme » d'abord, la règle devenait
 *      inapplicable : le filtre `?cible=` porte indifféremment une cote ou une clé, et il
 *      aurait fallu deviner la forme de la valeur dans le gabarit pour choisir la police.
 *      Auteur, heure, natures, actions, comptes et libellés passent en Roboto, casse phrase,
 *      sans interlettrage. C'est ce renversement qui rend la conversation lisible : le
 *      contenu reprend le dessus sur le métadonné.
 *
 * La police est auto-hébergée : la navigation d'un consultant sur un dossier client ne fuit
 * pas vers un tiers, et une mission ne dépend pas d'un CDN.
 */

@font-face {
  font-family: "Roboto Kuma";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("polices/roboto-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto Kuma";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("polices/roboto-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto Kuma";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("polices/roboto-latin-700-normal.woff2") format("woff2");
}

:root {
  --md-ref-typeface-brand: "Roboto Kuma", "Inter", system-ui, sans-serif;
  --md-ref-typeface-plain: "Roboto Kuma", "Inter", system-ui, sans-serif;

  --md-sys-color-primary: #1f6f4a;
  /* Les trois paliers intermédiaires d'une barre d'avancement. Ils vivent ici et non dans la
     feuille d'écran : une teinte déclarée près de son usage échappe au thème et se duplique
     au premier réemploi. L'échelle va de l'ambre au vert de la marque. */
  --md-sys-color-avancement-amorce: #e0a93c;
  --md-sys-color-avancement-engage: #7fae62;
  --md-sys-color-avancement-acheve: #14442e;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #e3efe8;
  --md-sys-color-on-primary-container: #0b3a25;
  --md-sys-color-secondary: #4b5661;
  --md-sys-color-secondary-container: #e4e9ec;
  --md-sys-color-on-secondary-container: #1c2732;
  --md-sys-color-tertiary-container: #fbf0da;
  --md-sys-color-on-tertiary-container: #5a3a05;
  --md-sys-color-surface: #ffffff;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f7f9fa;
  --md-sys-color-surface-container: #edf0f2;
  --md-sys-color-surface-container-high: #e4e9ec;
  --md-sys-color-on-surface: #10161c;
  --md-sys-color-on-surface-variant: #4b5661;
  --md-sys-color-outline: #9aa8b0;
  --md-sys-color-outline-variant: #c8d1d6;
  /* Le voile d'une boîte de dialogue modale. Material 3 le nomme `scrim` et il porte une
     transparence : c'est le seul jeton de couleur du socle qui en a besoin, parce qu'il doit
     laisser deviner la page qu'il neutralise. */
  --md-sys-color-scrim: rgba(15, 26, 22, 0.52);
  --md-sys-color-error: #9d2a21;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #f8e6e3;
  --md-sys-color-on-error-container: #4d120d;

  /* Espacement Material : multiples de 4 px, une seule échelle pour tout l'écran. */
  --pas-1: 4px;
  --pas-2: 8px;
  --pas-3: 12px;
  --pas-4: 16px;
  --pas-6: 24px;
}


.historique-etape > summary {
  cursor: pointer;
}

.historique-fil {
  max-height: 32rem;
  margin-top: var(--pas-3);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 8px;
}


/* — Le fil : le contenu domine, le métadonné se tait — */

.fil {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: var(--pas-2) var(--pas-6) var(--pas-4);
  overflow-y: auto;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--pas-4);
}

.fil-jour {
  align-self: center;
  padding: var(--pas-1) var(--pas-3);
  background: var(--md-sys-color-surface-container);
  border-radius: 8px;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.conv-message {
  display: flex;
  flex-direction: column;
  gap: var(--pas-1);
  max-width: 100%;
}

.conv-message--humain {
  align-items: flex-end;
}

.conv-auteur {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--md-sys-color-on-surface-variant);
}

.conv-texte {
  max-width: 42rem;
  margin: 0;
  font: 400 1rem/1.5 var(--md-ref-typeface-plain);
  letter-spacing: 0.03125em;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.conv-message--humain .conv-texte {
  padding: var(--pas-3) var(--pas-4);
  background: var(--md-sys-color-primary-container);
  border-radius: 20px 20px 4px 20px;
  color: var(--md-sys-color-on-primary-container);
}

.conv-message--kuma .conv-texte {
  color: var(--md-sys-color-on-surface);
}

.conv-message--refus .conv-texte,
.conv-message--echec .conv-texte {
  padding: var(--pas-3) var(--pas-4);
  background: var(--md-sys-color-error-container);
  border-radius: 12px;
  color: var(--md-sys-color-on-error-container);
}

/* L'indicateur de réflexion : la roue et trois mots, dans la bulle, comme Claude ou Codex.
 * La roue mesure 48 px par défaut — sa taille de bouton flottant ; elle est ramenée à la
 * hauteur de sa ligne, et son trait proportionné : c'est un indicateur, pas un contrôle. */
.conv-reflexion {
  display: inline-flex;
  align-items: center;
  gap: var(--pas-2);
  color: var(--md-sys-color-on-surface-variant);
}

.conv-message--analyse md-circular-progress {
  --md-circular-progress-size: 1rem;
  --md-circular-progress-active-indicator-width: 14;
  flex: none;
}


/* La suite d'un conseil : une ligne d'action, pas une bannière. Elle reprend la couleur du
 * métadonné pour le reste à pourvoir et laisse le lien porter l'accent — c'est le lien qu'on
 * vient chercher quand Kuma dit « vous devez maintenant… ». */
.conv-suite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pas-2);
  margin: var(--pas-3) 0 0;
}

.conv-suite-reste {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.875rem;
}

/* Le point guidé : une ligne d'appui au-dessus du texte, pas un titre. Elle dit ce que la
 * question cherche à faire avancer — sans elle, une question de Kuma flotte dans un fil de
 * vingt bulles. */
.conv-point {
  margin: 0 0 var(--pas-2);
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.875rem;
}

/* L'attribution explicite garde la conversation attachée au point affiché. */
.composeur-point {
  flex: 1 0 100%;
  margin: 0 0 var(--pas-2);
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.875rem;
}

/* Annotation d'étape : « Ce que l'auditeur regardera », « Conseil », « Références ». Un seul
 * niveau, une seule échelle — elles empruntaient `.constat`, `.meta` et `.a-deposer`, d'où
 * 14,08 / 12,48 / 14,08 px côte à côte. Un cran sous le corps de l'objectif, jamais sous le
 * seuil de lecture : c'est du texte à lire en entier, pas du métadonné. */
.etape-note {
  margin: 0 0 var(--pas-3);
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.etape-note strong {
  color: var(--md-sys-color-on-surface);
  font-weight: 600;
}

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

.conv-image {
  display: block;
  max-width: 18rem;
  border-radius: 12px;
  border: 1px solid var(--md-sys-color-outline-variant);
}

/* Étiquette d'une pièce jointe : apparence de puce Material, mais ni contrôle ni état
 * désactivé — un `md-assist-chip[disabled]` peignait son libellé à 30 % d'opacité. */
.conv-piece {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--pas-3);
  background: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 8px;
  color: var(--md-sys-color-on-surface);
  font: 500 0.8125rem/1.4 var(--md-ref-typeface-plain);
  overflow-wrap: anywhere;
}

/* — Constats proposés : une carte Material par destinataire — */

.conv-groupe {
  display: flex;
  flex-direction: column;
  gap: var(--pas-2);
  margin: var(--pas-1) 0 0;
  padding: 0;
  list-style: none;
}

.conv-groupe-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pas-3);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
}

.conv-groupe-tete a {
  color: var(--md-sys-color-primary);
  text-decoration: none;
}

.conv-groupe-tete a:hover {
  text-decoration: underline;
}

.conv-groupe-compte {
  color: var(--md-sys-color-on-surface-variant);
  font-weight: 400;
  white-space: nowrap;
}

.conv-constat {
  padding: var(--pas-3) var(--pas-4);
  background: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 12px;
}

.conv-natures {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pas-2);
  margin-bottom: var(--pas-1);
  font-size: 0.75rem;
  color: var(--md-sys-color-on-surface-variant);
}

.conv-nature {
  padding: 2px 8px;
  background: var(--md-sys-color-secondary-container);
  border-radius: 8px;
  color: var(--md-sys-color-on-secondary-container);
  font-weight: 500;
}

/* Seule exception à Roboto : un code de la norme se lit en chasse fixe, c'est par lui que
 * l'auditeur retrouve la ligne dont il parle. */
.conv-cote {
  font: 500 0.75rem/1.5 var(--chasse);
  font-variant-numeric: tabular-nums;
  padding: 2px 6px;
  background: var(--md-sys-color-surface-container-high);
  border-radius: 6px;
  color: var(--md-sys-color-on-surface);
}

.conv-enonce {
  margin: 0;
  font: 400 0.9375rem/1.5 var(--md-ref-typeface-plain);
  color: var(--md-sys-color-on-surface);
  overflow-wrap: anywhere;
}

/* — Boutons natifs portant les tokens Material —
 *
 * Un composant Material est inerte tant que le module n'a pas chargé. Là où l'action est le
 * seul chemin d'entrée d'une donnée — trancher un constat — le bouton reste natif et
 * emprunte seulement l'apparence : même forme, même typographie, aucune dépendance. */
.bouton-tonal,
.bouton-texte {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Les composants Material étendent leur zone tactile à 47 px ; un bouton natif ne le fait
   * pas tout seul. Mesuré au navigateur : 40 px visuel = 40 px cliquable. */
  min-height: 44px;
  padding: 0 var(--pas-6);
  border: 0;
  border-radius: 22px;
  font: 500 0.875rem/1.43 var(--md-ref-typeface-plain);
  letter-spacing: 0.00714em;
  text-transform: none;
  cursor: pointer;
  transition: background 120ms linear, box-shadow 120ms linear;
}

.bouton-tonal {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.bouton-tonal:hover {
  background: #d5e6dc;
  box-shadow: 0 1px 3px rgba(16, 22, 28, 0.18);
}

.bouton-texte {
  padding: 0 var(--pas-3);
  background: transparent;
  color: var(--md-sys-color-primary);
  /* Porté par un `<a>`, il héritait du soulignement des liens : une action se lisait comme
     un lien en ligne. Le soulignement revient au survol et au focus, où il informe. */
  text-decoration: none;
}

a.bouton-texte:hover,
a.bouton-texte:focus-visible {
  text-decoration: underline;
}

.bouton-texte:hover {
  background: var(--md-sys-color-primary-container);
}

.constat-detail {
  margin-left: auto;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.8125rem;
}

/* — Repli de revue : un bouton d'ouverture, pas un cartouche — */

/* Le repli occupe une rangée de 44 px — la règle tactile du produit — tandis que la
 * pastille visible reste légère (32 px). Une extension par `::before` n'était pas prise en
 * compte au test de pointage : mesuré 32 px cliquables. */
.constat-revue > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--pas-1);
  padding: 0;
  background: transparent;
  cursor: pointer;
  list-style: none;
}

.conv-puce {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--pas-4);
  background: var(--md-sys-color-surface-container-high);
  border-radius: 16px;
  color: var(--md-sys-color-on-surface);
  font: 500 0.8125rem/1.4 var(--md-ref-typeface-plain);
  letter-spacing: 0;
  text-transform: none;
}

.constat-revue > summary::-webkit-details-marker {
  display: none;
}

.constat-revue > summary:hover .conv-puce,
.constat-revue > summary:focus-visible .conv-puce {
  background: var(--md-sys-color-primary-container);
}

.constat-revue[open] {
  display: block;
  margin-top: var(--pas-2);
}

.constat-revue[open] > form {
  display: grid;
  gap: var(--pas-2);
  margin-top: var(--pas-2);
  padding: var(--pas-3);
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 12px;
}

.constat-revue-choix {
  display: grid;
  gap: var(--pas-2);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

/* La réponse d'étape proposée : le formulaire de l'étape, champ par champ, dans le fil.
 * Les champs sont éditables avant la confirmation — une retouche est une correction
 * versionnée — et un champ que le message n'a pas renseigné se présente vide, à compléter. */
.conv-reponse {
  display: grid;
  gap: var(--pas-1);
  margin: 0;
}

.conv-reponse dt {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--md-sys-color-on-surface-variant);
}

.conv-reponse dd {
  margin: 0 0 var(--pas-2);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* La même lecture dans la zone de données : le libellé au-dessus, la valeur qui replie. */
.reponse-etape {
  display: grid;
  gap: var(--pas-1);
  margin: var(--pas-2) 0 0;
}

.reponse-etape dt {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--md-sys-color-on-surface-variant);
}

.reponse-etape dd {
  margin: 0 0 var(--pas-2);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.constat-revue-champs {
  display: grid;
  gap: var(--pas-2);
}

.constat-revue-champs label {
  display: grid;
  gap: var(--pas-1);
  font-size: 0.8125rem;
  color: var(--md-sys-color-on-surface-variant);
}

.constat-revue-champs textarea {
  width: 100%;
  min-height: 4.5rem;
  padding: var(--pas-2) var(--pas-3);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: 8px;
  font: 400 0.9375rem/1.5 var(--md-ref-typeface-plain);
  color: var(--md-sys-color-on-surface);
  resize: vertical;
}

.constat-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pas-2);
  margin-top: var(--pas-2);
}

/* Ceinture et bretelles : si le module se charge mais qu'un composant reste indéfini,
 * il ne s'affiche pas à moitié. */
md-outlined-text-field:not(:defined),
md-filled-button:not(:defined),
md-icon-button:not(:defined) {
  visibility: hidden;
}

.conv-tranches {
  margin: var(--pas-1) 0 0;
  font-size: 0.8125rem;
  color: var(--md-sys-color-on-surface-variant);
}

.fil-vide {
  align-self: center;
  max-width: 32rem;
  padding: var(--pas-6);
  color: var(--md-sys-color-on-surface-variant);
  font-size: 0.9375rem;
  text-align: center;
}


@media (max-width: 640px) {

  .fil {
    padding: var(--pas-2) var(--pas-3) var(--pas-3);
  }

  .conv-image {
    max-width: 100%;
  }
}

@media print {
  .prompt {
    display: none !important;
  }
}

/* Vignette d'une image attachée : elle vit dans le slot d'icône de la puce Material. */
.piece-vignette {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  object-fit: cover;
}

/* ============================================================================
 * Socle Material appliqué à toutes les pages (`body.theme-md`)
 *
 * Portée volontairement limitée : typographie, couleurs, formes et contrôles. Les mises en
 * page restent dans `kuma.css`. Un thème qui redéfinirait aussi les grilles casserait des
 * écrans qu'aucun test ne couvre visuellement, et l'incohérence serait pire que l'ancien
 * langage assumé.
 * ==========================================================================*/

body.theme-md {
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-ref-typeface-plain);
}

/* — Titres : l'échelle Material remplace les capitales pistées — */

body.theme-md h1 {
  font: 400 2rem/1.25 var(--md-ref-typeface-brand);
  letter-spacing: 0;
  text-transform: none;
  color: var(--md-sys-color-on-surface);
}

body.theme-md h2 {
  font: 400 1.375rem/1.3 var(--md-ref-typeface-brand);
  letter-spacing: 0;
  text-transform: none;
  color: var(--md-sys-color-on-surface);
}

body.theme-md h3 {
  font: 500 1.0625rem/1.4 var(--md-ref-typeface-plain);
  letter-spacing: 0;
  text-transform: none;
}

body.theme-md .meta,
body.theme-md .chapeau {
  font-family: var(--md-ref-typeface-plain);
  letter-spacing: 0;
  text-transform: none;
}

/* Un identifiant exact garde la chasse fixe : cote de la norme ou clé d'objet, il se
 * compare et se copie — c'est par lui qu'on retrouve une ligne ou qu'on filtre une file. */
body.theme-md .cote,
body.theme-md .code {
  font-family: var(--chasse);
}

/* — Surfaces — */

body.theme-md .carte,
body.theme-md .registre,
body.theme-md .fiche,
body.theme-md .feuille,
body.theme-md .depot,
body.theme-md .soa-ligne {
  background: var(--md-sys-color-surface);
  border-color: var(--md-sys-color-outline-variant);
  border-radius: 12px;
}

body.theme-md .groupe > .registre {
  background: transparent;
  border-radius: 0;
}

/* — Contrôles natifs : forme et typographie Material, aucune dépendance au module — */

body.theme-md button,
body.theme-md a.bouton-lien {
  /* 44 px est la règle tactile du produit, plus exigeante que les 40 dp de Material : les
   * composants `md-*` étendent leur zone à 47 px, un bouton natif ne le fait pas seul.
   * Signalé par la vérification de l'éditeur de document, mesuré à 40 px. */
  min-height: 44px;
  border-radius: 22px;
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  font: 500 0.875rem/1.43 var(--md-ref-typeface-plain);
  letter-spacing: 0.00714em;
  text-transform: none;
}

body.theme-md button.discret,
body.theme-md button.discrete,
body.theme-md a.bouton-lien.discret {
  background: transparent;
  border: 1px solid var(--md-sys-color-outline);
  color: var(--md-sys-color-primary);
}

/* Le bouton du champ de fichier suit les boutons du produit ; le texte « aucun fichier »
   reste celui du navigateur, dans sa langue, et la liste des fichiers choisis est rendue
   dessous par le script. */
body.theme-md input[type="file"]::file-selector-button {
  min-height: 36px;
  margin-right: var(--pas-3);
  padding: 0 var(--pas-4);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: 18px;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-primary);
  font: 500 0.875rem/1.43 var(--md-ref-typeface-plain);
  cursor: pointer;
}

body.theme-md button.refus {
  background: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
}

body.theme-md label {
  font: 500 0.8125rem/1.5 var(--md-ref-typeface-plain);
  letter-spacing: 0;
  text-transform: none;
  color: var(--md-sys-color-on-surface-variant);
}

/* Patron global des champs texte nus (hors `.champ`/`.ecran`, ex. #id_motif_rotation de
 * source_detail.html) : bordure `--kc-color-border-interactif` (jeton #168, 3,56:1), jamais
 * `--md-sys-color-outline` (2,4:1, réservé aux bordures décoratives qui ne changent pas ici). */
body.theme-md input[type="text"],
body.theme-md input[type="email"],
body.theme-md input[type="file"],
body.theme-md input[type="password"],
body.theme-md input[type="number"],
body.theme-md input[type="date"],
body.theme-md textarea,
body.theme-md select {
  border: 1px solid var(--kc-color-border-interactif);
  border-radius: 8px;
  background: var(--md-sys-color-surface);
  font-family: var(--md-ref-typeface-plain);
}

body.theme-md input[type="text"]:focus-visible,
body.theme-md input[type="email"]:focus-visible,
body.theme-md input[type="number"]:focus-visible,
body.theme-md input[type="date"]:focus-visible,
body.theme-md textarea:focus-visible,
body.theme-md select:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 1px;
}

/* — Étiquettes d'état : la couleur porte la bande, le mot porte l'état — */

body.theme-md .etiquette,
body.theme-md .tampon {
  border-radius: 8px;
  font: 500 0.75rem/1.5 var(--md-ref-typeface-plain);
  letter-spacing: 0;
  text-transform: none;
  transform: none;
}

/* — Variantes qui doivent survivre au socle —
 *
 * Défaut mesuré au navigateur juste après l'ajout du socle : `body.theme-md button` (deux
 * sélecteurs) écrasait `.prompt-declencheur`, `.bouton-tonal` et `.bouton-texte` (un seul),
 * qui apparaissaient tous en bouton primaire plein. La pilule d'ouverture et les deux
 * décisions de revue reprennent donc leur rôle, à spécificité égale ou supérieure. */

body.theme-md .prompt-declencheur {
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 28px;
  color: var(--md-sys-color-on-surface-variant);
  font: 400 1rem/1.5 var(--md-ref-typeface-plain);
}

body.theme-md .prompt-declencheur:hover {
  background: var(--md-sys-color-surface-container-high);
  border-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-surface);
}

body.theme-md .bouton-tonal {
  min-height: 44px;
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border-radius: 22px;
}

body.theme-md .bouton-texte {
  min-height: 44px;
  padding: 0 var(--pas-3);
  background: transparent;
  color: var(--md-sys-color-primary);
  border-radius: 22px;
}

body.theme-md .bouton-texte:hover {
  background: var(--md-sys-color-primary-container);
}

/* ============================================================================
 * Listes de documents et de clauses : une surface par groupe, pas une carte par ligne
 *
 * Défaut mesuré à l'écran (retour de Bruno, capture du 29.08) : `details.famille` est une
 * surface blanche qui contient des `.fiche` blanches, séparées par une gouttière de 7,2 px
 * — le blanc du dessous apparaît entre chaque ligne, et l'écran a l'air inachevé. Deuxième
 * défaut de la même mesure : la ligne n'avait **aucun padding en haut** (`0 14.4px 14.4px`),
 * d'où la puce et le titre collés au bord, et les espaces mélangeaient 7,2 / 14,4 / 8 px.
 *
 * Règle retenue, la même que dans la zone de données de l'étape : le groupe porte la
 * surface, la ligne porte un filet et sa réglette d'état. Tous les espaces sur la grille
 * de 8 px de Material.
 * ==========================================================================*/

body.theme-md details.famille,
body.theme-md details.branche {
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 12px;
  margin-bottom: var(--pas-3);
}

body.theme-md details.famille > summary,
body.theme-md details.branche > summary {
  min-height: 48px;
  padding: var(--pas-2) var(--pas-4);
  font: 500 0.9375rem/1.5 var(--md-ref-typeface-plain);
  letter-spacing: 0;
  text-transform: none;
}

/* Le padding du groupe ne s'applique qu'à ce qui n'est pas une ligne : mesuré, cette règle
 * écrasait le padding des `.fiche` (résultat `0 16px 8px`, donc titre collé en haut). */
body.theme-md details.famille > *:not(summary):not(.fiche):not(.feuille),
body.theme-md details.branche > *:not(summary):not(.fiche):not(.feuille) {
  padding: 0 var(--pas-4) var(--pas-2);
}

/* Écran « Tous vos documents » (`arbre_documents.html`, lot surfaces A) : `details.famille`
   migre vers la carte unique du système de surfaces (`.kc-card`, kc-admin.css) — fond,
   bordure et rayon repris ici à l'identique, jamais redéfinis dans `ecrans-corpus.css`
   (qui ne doit pas reprendre les règles de liste de ce socle). Scindé de la règle générale
   ci-dessus pour ne pas toucher `clauses.html`, qui garde l'ancienne surface. */
body.theme-md .ecran-arbre-documents details.famille {
  background: linear-gradient(180deg, var(--kc-color-surface) 0%, var(--kc-color-surface-2) 100%);
  border: var(--kc-border-thin) solid var(--kc-color-border-soft);
  border-radius: var(--kc-radius-lg);
  box-shadow: var(--kc-shadow-1);
  margin-bottom: 0;
}

/* La ligne perd son cadre et son fond : le filet suffit à la séparer de la suivante. */
body.theme-md .fiche,
body.theme-md .feuille {
  padding: var(--pas-3) var(--pas-4);
  margin: 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 0;
  gap: var(--pas-3);
  align-items: start;
}

body.theme-md .fiche:first-of-type,
body.theme-md .feuille:first-of-type {
  border-top: 0;
}

/* L'état reste lisible sans cadre : une réglette de 3 px à gauche, jamais la couleur seule
 * (le mot de l'état vit dans la jauge et la marque « il manque »). */
body.theme-md .fiche--redige,
body.theme-md .feuille--redige {
  box-shadow: inset 3px 0 0 var(--md-sys-color-primary);
}

body.theme-md .fiche--a_completer,
body.theme-md .feuille--a_completer {
  box-shadow: inset 3px 0 0 var(--md-sys-color-on-tertiary-container);
}

body.theme-md .fiche--humain,
body.theme-md .feuille--humain {
  box-shadow: inset 3px 0 0 var(--md-sys-color-secondary);
}

body.theme-md .fiche--vide,
body.theme-md .feuille--vide {
  box-shadow: inset 3px 0 0 var(--md-sys-color-outline);
}

/* La jauge compte (`0/1`), elle ne cote pas : elle passe donc en Roboto comme le reste, et
 * garde l'alignement des chiffres par `tabular-nums` plutôt que par la chasse fixe. Un
 * compteur n'est pas un identifiant : on le lit, on ne le compare pas caractère à caractère.
 * Incohérence signalée par MaterialPilotage sur ma propre feuille. */
body.theme-md .fiche > .jauge,
body.theme-md .feuille > .jauge {
  padding-left: var(--pas-3);
  font: 500 0.8125rem/1.5 var(--md-ref-typeface-plain);
  font-variant-numeric: tabular-nums;
}

/* La colonne d'action s'appelle `.actions` dans ces lignes : viser `.fiche-action` ne
 * touchait rien, et les boutons restaient à 40 px, collés au bord de la surface. */
body.theme-md .fiche > .actions,
body.theme-md .feuille > .actions,
body.theme-md .fiche-action,
body.theme-md .feuille-action {
  gap: var(--pas-2);
  align-items: flex-start;
}

body.theme-md .fiche > .actions a.bouton-lien,
body.theme-md .feuille > .actions a.bouton-lien,
body.theme-md .fiche > .actions button,
body.theme-md .feuille > .actions button,
body.theme-md .fiche-action a.bouton-lien,
body.theme-md .feuille-action a.bouton-lien {
  min-height: 44px;
}

body.theme-md .fiche-corps > *:first-child,
body.theme-md .feuille-corps > *:first-child {
  margin-top: 0;
}

body.theme-md .manque {
  margin-top: var(--pas-2);
  color: var(--md-sys-color-on-tertiary-container);
  font-size: 0.875rem;
}

/* — Rythme vertical sur la grille de 8 —
 *
 * Mesuré sur l'écran principal : `.compteurs` (marge 22,4 px, gap 9,6 px) et `.carte.depot`
 * (marge 20,8 px) tombaient hors grille, héritées de valeurs en `rem` de l'ancien langage.
 * Trois valeurs voisines mais différentes se lisent comme un défaut d'alignement, même
 * quand chacune est défendable seule. */

body.theme-md .compteurs {
  gap: var(--pas-2);
  margin-bottom: var(--pas-6);
}

body.theme-md .carte,
body.theme-md .depot {
  margin-bottom: var(--pas-6);
}

body.theme-md .section-imprimable {
  margin-bottom: var(--pas-6);
}

body.theme-md .actions {
  gap: var(--pas-2);
}

/* — L'unique exception à la règle typographique —
 *
 * `.bandeau .marque` reste en chasse fixe pistée : c'est un **logotype**, pas du métadonné
 * d'interface. La règle « chasse fixe pour les identifiants exacts » a été écrite contre
 * les étiquettes, auteurs, comptes et actions qui criaient plus fort que le contenu ; elle
 * ne visait pas la signature du produit. Une exception nommée et unique vaut mieux qu'une
 * règle qu'on contourne en silence — si une deuxième apparaît, c'est un défaut.
 * Question soulevée par MaterialCorpus, tranchée ici. */